Skip to content

E
ElectricitySheep
Commit c81ccaf6 authored by zhengke's avatar zhengke
Browse files
Options

修改页面

parent c86a7940
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 50 deletions
src/components/StoreDesign/storesManage.vue
View file @ c81ccaf6
<template>
<div class="projectClass">
<template v-if="projectClassIsShowAdd">
<div class="storeManage">
<template v-if="storesIsShowAdd">
<div class="head-title">
门店管理
<el-button @click="projectClassIsShowAdd=false" style="float:right;margin-top: -5px;" size="small"
type="primary">
<el-button @click="storesIsShowAdd=false" style="float:right;margin-top: -5px;" size="small" type="primary">
添加门店
</el-button>
</div>
......@@ -19,24 +18,26 @@
</div>
</div>
<el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
<el-table-column prop="Id" label="ID" width="150">
<el-table-column prop="Id" label="ID" width="100">
</el-table-column>
<el-table-column prop="TopicName" label="分类名称" width="829">
<el-table-column prop="Name" label="门店名称" width="499">
</el-table-column>
<el-table-column prop="SortNum" label="排序" width="250">
</el-table-column>
<el-table-column prop="IsDisable" label="状态" width="150">
<el-table-column prop="Name" label="封面图" width="80">
<template slot-scope="scope">
<el-switch v-model="scope.row.IsDisable" active-color="#409EFF" :active-value="1" :inactive-value="0"
@change="updateIsDisable(scope.row)">
</el-switch>
<img :src="getIconLink(scope.row.CoverImg)" style="height:80px;"/>
</template>
</el-table-column>
<el-table-column prop="Tel" label="联系方式" width="120">
</el-table-column>
<el-table-column prop="Address" label="门店地址" width="220">
</el-table-column>
<el-table-column prop="LngLat" label="经纬度" width="220">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<img @click="EditprojectClass(scope.row)" class="operatImg" src="../../assets/img/userman/edit.png"
<img @click="EditstoreManage(scope.row)" class="operatImg" src="../../assets/img/userman/edit.png"
alt="">
<img @click="RemoveprojectClass(scope.row)" class="operatImg" src="../../assets/img/userman/del.png"
<img @click="RemovestoreManage(scope.row)" class="operatImg" src="../../assets/img/userman/del.png"
alt="">
</template>
</el-table-column>
......@@ -48,37 +49,127 @@
</template>
<template v-else>
<div class="head-title">
<span @click="projectClassIsShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">文章</span><span
style="margin:0 9px;color:#C0C4CC">/</span><span>文章编辑</span>
<span @click="storesIsShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">门店管理</span><span
style="margin:0 9px;color:#C0C4CC">/</span><span>门店编辑</span>
</div>
<div class="content">
<div class="projectClass_condiv">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px" style="padding:0 20px;">
<el-form-item label="专题分类名称" prop="title">
<el-input v-model="addMsg.TopicName" size="small" placeholder="请输入名称" maxlength="20" />
</el-form-item>
<el-form-item label="排序">
<el-input type="text" v-model="addMsg.SortNum" size="small" @keyup.native="checkInteger(addMsg,'SortNum')"
placeholder="请输入排序" maxlength="4" />
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="addMsg.IsDisable" active-color="#409EFF" :active-value="1" :inactive-value="0">
</el-switch>
</el-form-item>
<div class="store_condiv">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px" style="padding:0 20px;">
<div class="el-row">
<div class="el-col el-col-12">
<el-form-item label="门店名称" prop="Name">
<el-input type="text" placeholder="请输入门店名称" v-model="addMsg.Name" size="small"></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="Tel">
<el-input type="text" placeholder="请输入门店联系电话" v-model="addMsg.Tel" size="small"></el-input>
</el-form-item>
<el-form-item label="门店地址" prop="Address">
<el-input type="text" placeholder="请输入门店地址" v-model="addMsg.Address" size="small"></el-input>
</el-form-item>
<el-form-item label="门店经纬度" prop="LngLat">
<label slot="label">门店经纬度
<el-tooltip class="item" effect="dark" content="纬度 | 经度,可在地图上选择位置" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</label>
<el-input type="text" placeholder="请输入门店经纬度" v-model="addMsg.LngLat" size="small"></el-input>
</el-form-item>
<el-form-item label="地图">
<el-button size="small" @click="isShowMap=true">展开地图</el-button>
</el-form-item>
<el-form-item label="门店评分">
<el-select v-model="addMsg.Score" size="small">
<el-option :key="1" label="1分" :value="1"></el-option>
<el-option :key="2" label="2分" :value="2"></el-option>
<el-option :key="3" label="3分" :value="3"></el-option>
<el-option :key="4" label="4分" :value="4"></el-option>
<el-option :key="5" label="5分" :value="5"></el-option>
</el-select>
</el-form-item>
<el-form-item label="门店描述" prop="Intro">
<div style="line-height:normal;">
<UE :defaultMsg="addMsg.Intro" :config="config" ref="ue" @input="input"></UE>
</div>
</el-form-item>
</div>
<div class="el-col el-col-12">
<el-form-item label="门店封面图" prop="CoverImg">
<el-tooltip class="item" effect="dark" content="建议尺寸:150 * 150" placement="top">
<el-button size="mini" @click="choicImg=true,commonIndex=1">选择图片</el-button>
</el-tooltip>
<div class="customize-share-title">
<div class="zk_pic_box" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(addMsg.CoverImg) + ')'}">
<i v-if="addMsg.CoverImg==''" class="el-icon-picture-outline"></i>
</div>
</div>
</el-form-item>
<el-form-item label="门店轮播图" prop="NavImg">
<el-tooltip class="item" effect="dark" content="建议尺寸:750 * 360" placement="top">
<el-button size="mini" @click="choicImg=true,commonIndex=2">选择图片</el-button>
</el-tooltip>
<div class="customize-share-title">
<div class="zk_pic_box" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(addMsg.NavImg) + ')'}">
<i v-if="addMsg.NavImg==''" class="el-icon-picture-outline"></i>
</div>
</div>
</el-form-item>
<el-form-item label="营业时间">
<el-time-select placeholder="起始时间" v-model="addMsg.StartTime" size="small" :picker-options="{
start: '00:00',
step: '00:15',
end: '23:45'
}">
</el-time-select>
<el-time-select placeholder="结束时间" v-model="addMsg.EndTime" size="small" :picker-options="{
start: '00:00',
step: '00:15',
end: '23:45',
minTime: addMsg.StartTime
}">
</el-time-select>
</el-form-item>
<el-form-item label="">
<el-checkbox v-model="checked" @change="checked==true? addMsg.IsAllDay=1:addMsg.IsAllDay=0">全天营业</el-checkbox>
</el-form-item>
</div>
</div>
</el-form>
</div>
</div>
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
</el-button>
</template>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
<!-- 地图选址 -->
<el-dialog title="地图展示" :visible.sync="isShowMap" width="960px">
<commonMap @map-submit="mapEvent"></commonMap>
</el-dialog>
</div>
</template>
<script>
import UE from '@/components/global/UE.vue'
import commonMap from "../common/commonMap.vue";
import ChooseImg from "@/components/global/ChooseImg.vue";
export default {
components: {
ChooseImg,
UE,
commonMap
},
data() {
return {
//是否线下链接弹窗
loading: false,
choicImg: false,
isShowMap:false,
checked:false,
dataList: [],
msg: {
pageIndex: 1,
......@@ -86,27 +177,62 @@
TopicName: ""
},
total: 0,
projectClassIsShowAdd: true,
storesIsShowAdd: true,
addMsg: {
Id: 0, //门店编号
Name: "", //门店名称
Tel: "", //门店电话
Address: "", //门店地址
LngLat: "", //门店经度纬度
Score: 0, //门店评分
Score: 5, //门店评分
Intro: "", //门店介绍
CoverImg: "", //门店封面图
NavImg: "", //门店轮播图
StartTime: "", //营业开始时间
EndTime: "", //营业结束时间
StartTime: "00:00", //营业开始时间
EndTime: "24:00", //营业结束时间
IsAllDay: 0, //是否全天营业(1-是)
},
config: {
initialFrameWidth: null,
initialFrameHeight: 350,
},
commonIndex: -1,
rules: {
// TopicName: [{
// required: true,
// message: '专题分类名称',
// trigger: 'change'
// }],
Name: [{
required: true,
message: '请输入门店名称',
trigger: 'change'
}],
Tel: [{
required: true,
message: '请输入门店联系方式',
trigger: 'change'
}],
Address: [{
required: true,
message: '请输入门店地址',
trigger: 'change'
}],
LngLat: [{
required: true,
message: '请输入门店经纬度',
trigger: 'change'
}],
Intro: [{
required: true,
message: '请输入门店描述',
trigger: 'change'
}],
CoverImg: [{
required: true,
message: '请添加门店封面图',
trigger: 'change'
}],
NavImg: [{
required: true,
message: '请添加门店轮播图',
trigger: 'change'
}],
},
};
......@@ -143,7 +269,7 @@
saveMsg() {
this.apipost("/api/MContent/SetStores", this.addMsg, res => {
if (res.data.resultCode == 1) {
this.projectClassIsShowAdd = true;
this.storesIsShowAdd = true;
this.getList();
this.clearMsg();
this.Success(res.data.message);
......@@ -168,12 +294,12 @@
this.addMsg.IsAllDay = 0;
},
//修改
EditprojectClass(item) {
EditstoreManage(item) {
this.apipost("/api/MContent/GetStores", {
Id: item.Id
}, res => {
if (res.data.resultCode == 1) {
this.projectClassIsShowAdd = false;
this.storesIsShowAdd = false;
var jsonData = res.data.data;
this.addMsg.Id = jsonData.Id;
this.addMsg.Name = jsonData.Name;
......@@ -193,7 +319,7 @@
})
},
//删除
RemoveprojectClass(item) {
RemovestoreManage(item) {
var that = this;
that.Confirm("是否要删除?", function () {
that.apipost("/api/MContent/RemoveStores", {
......@@ -201,6 +327,7 @@
}, res => {
if (res.data.resultCode == 1) {
that.getList();
this.clearMsg();
} else {
that.Info(res.data.message);
}
......@@ -223,8 +350,24 @@
})
},
input(obj) {
this.addMsg.content = obj
this.addMsg.Intro = obj;
},
//选择图片
SelectId(msg) {
if (this.commonIndex == 1) {
this.addMsg.CoverImg = msg.url;
} else if (this.commonIndex == 2) {
this.addMsg.NavImg = msg.url
}
this.choicImg = false;
},
//得到地图信息
mapEvent(e) {
this.addMsg.LngLat = e.lat + ',' + e.long;
this.addMsg.Address = e.address;
this.isShowMap=false;
},
},
mounted() {
this.getList();
......@@ -233,19 +376,19 @@
</script>
<style>
.projectClass .content .searchInput {
.storeManage .content .searchInput {
border: 1px solid #DCDFE6;
border-radius: 4px;
}
.projectClass .content .searchInput .el-input__inner {
.storeManage .content .searchInput .el-input__inner {
border: none;
outline: none;
height: 30px;
line-height: 30px;
}
.projectClass .content .searchInput {
.storeManage .content .searchInput {
line-height: normal;
display: inline-table;
width: 100%;
......@@ -255,24 +398,23 @@
margin-right: 20px;
}
.projectClass .content {
.storeManage .content {
background: #fff;
margin-top: 10px;
padding: 20px;
box-sizing: border-box;
}
.projectClass .operatImg {
.storeManage .operatImg {
width: 32px;
height: 32px;
margin: 0 10px
}
.projectClass .projectClass_condiv {
.storeManage .store_condiv {
padding: 20px 0;
background-color: #fff;
margin-bottom: 20px;
padding-right: 50%;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment