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> <template>
<div class="projectClass"> <div class="storeManage">
<template v-if="projectClassIsShowAdd"> <template v-if="storesIsShowAdd">
<div class="head-title"> <div class="head-title">
门店管理 门店管理
<el-button @click="projectClassIsShowAdd=false" style="float:right;margin-top: -5px;" size="small" <el-button @click="storesIsShowAdd=false" style="float:right;margin-top: -5px;" size="small" type="primary">
type="primary">
添加门店 添加门店
</el-button> </el-button>
</div> </div>
...@@ -19,24 +18,26 @@ ...@@ -19,24 +18,26 @@
</div> </div>
</div> </div>
<el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0"> <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>
<el-table-column prop="TopicName" label="分类名称" width="829"> <el-table-column prop="Name" label="门店名称" width="499">
</el-table-column> </el-table-column>
<el-table-column prop="SortNum" label="排序" width="250"> <el-table-column prop="Name" label="封面图" width="80">
</el-table-column>
<el-table-column prop="IsDisable" label="状态" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch v-model="scope.row.IsDisable" active-color="#409EFF" :active-value="1" :inactive-value="0" <img :src="getIconLink(scope.row.CoverImg)" style="height:80px;"/>
@change="updateIsDisable(scope.row)">
</el-switch>
</template> </template>
</el-table-column> </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="操作"> <el-table-column label="操作">
<template slot-scope="scope"> <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=""> 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=""> alt="">
</template> </template>
</el-table-column> </el-table-column>
...@@ -48,37 +49,127 @@ ...@@ -48,37 +49,127 @@
</template> </template>
<template v-else> <template v-else>
<div class="head-title"> <div class="head-title">
<span @click="projectClassIsShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">文章</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> style="margin:0 9px;color:#C0C4CC">/</span><span>门店编辑</span>
</div> </div>
<div class="content"> <div class="content">
<div class="projectClass_condiv"> <div class="store_condiv">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px" style="padding:0 20px;"> <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px" style="padding:0 20px;">
<el-form-item label="专题分类名称" prop="title"> <div class="el-row">
<el-input v-model="addMsg.TopicName" size="small" placeholder="请输入名称" maxlength="20" /> <div class="el-col el-col-12">
</el-form-item> <el-form-item label="门店名称" prop="Name">
<el-form-item label="排序"> <el-input type="text" placeholder="请输入门店名称" v-model="addMsg.Name" size="small"></el-input>
<el-input type="text" v-model="addMsg.SortNum" size="small" @keyup.native="checkInteger(addMsg,'SortNum')" </el-form-item>
placeholder="请输入排序" maxlength="4" /> <el-form-item label="联系电话" prop="Tel">
</el-form-item> <el-input type="text" placeholder="请输入门店联系电话" v-model="addMsg.Tel" size="small"></el-input>
<el-form-item label="状态"> </el-form-item>
<el-switch v-model="addMsg.IsDisable" active-color="#409EFF" :active-value="1" :inactive-value="0"> <el-form-item label="门店地址" prop="Address">
</el-switch> <el-input type="text" placeholder="请输入门店地址" v-model="addMsg.Address" size="small"></el-input>
</el-form-item> </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> </el-form>
</div> </div>
</div> </div>
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存 <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
</el-button> </el-button>
</template> </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> </div>
</template> </template>
<script> <script>
import UE from '@/components/global/UE.vue'
import commonMap from "../common/commonMap.vue";
import ChooseImg from "@/components/global/ChooseImg.vue";
export default { export default {
components: {
ChooseImg,
UE,
commonMap
},
data() { data() {
return { return {
//是否线下链接弹窗 //是否线下链接弹窗
loading: false, loading: false,
choicImg: false,
isShowMap:false,
checked:false,
dataList: [], dataList: [],
msg: { msg: {
pageIndex: 1, pageIndex: 1,
...@@ -86,27 +177,62 @@ ...@@ -86,27 +177,62 @@
TopicName: "" TopicName: ""
}, },
total: 0, total: 0,
projectClassIsShowAdd: true, storesIsShowAdd: true,
addMsg: { addMsg: {
Id: 0, //门店编号 Id: 0, //门店编号
Name: "", //门店名称 Name: "", //门店名称
Tel: "", //门店电话 Tel: "", //门店电话
Address: "", //门店地址 Address: "", //门店地址
LngLat: "", //门店经度纬度 LngLat: "", //门店经度纬度
Score: 0, //门店评分 Score: 5, //门店评分
Intro: "", //门店介绍 Intro: "", //门店介绍
CoverImg: "", //门店封面图 CoverImg: "", //门店封面图
NavImg: "", //门店轮播图 NavImg: "", //门店轮播图
StartTime: "", //营业开始时间 StartTime: "00:00", //营业开始时间
EndTime: "", //营业结束时间 EndTime: "24:00", //营业结束时间
IsAllDay: 0, //是否全天营业(1-是) IsAllDay: 0, //是否全天营业(1-是)
}, },
config: {
initialFrameWidth: null,
initialFrameHeight: 350,
},
commonIndex: -1,
rules: { rules: {
// TopicName: [{ Name: [{
// required: true, required: true,
// message: '专题分类名称', message: '请输入门店名称',
// trigger: 'change' 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 @@ ...@@ -143,7 +269,7 @@
saveMsg() { saveMsg() {
this.apipost("/api/MContent/SetStores", this.addMsg, res => { this.apipost("/api/MContent/SetStores", this.addMsg, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.projectClassIsShowAdd = true; this.storesIsShowAdd = true;
this.getList(); this.getList();
this.clearMsg(); this.clearMsg();
this.Success(res.data.message); this.Success(res.data.message);
...@@ -168,12 +294,12 @@ ...@@ -168,12 +294,12 @@
this.addMsg.IsAllDay = 0; this.addMsg.IsAllDay = 0;
}, },
//修改 //修改
EditprojectClass(item) { EditstoreManage(item) {
this.apipost("/api/MContent/GetStores", { this.apipost("/api/MContent/GetStores", {
Id: item.Id Id: item.Id
}, res => { }, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.projectClassIsShowAdd = false; this.storesIsShowAdd = false;
var jsonData = res.data.data; var jsonData = res.data.data;
this.addMsg.Id = jsonData.Id; this.addMsg.Id = jsonData.Id;
this.addMsg.Name = jsonData.Name; this.addMsg.Name = jsonData.Name;
...@@ -193,7 +319,7 @@ ...@@ -193,7 +319,7 @@
}) })
}, },
//删除 //删除
RemoveprojectClass(item) { RemovestoreManage(item) {
var that = this; var that = this;
that.Confirm("是否要删除?", function () { that.Confirm("是否要删除?", function () {
that.apipost("/api/MContent/RemoveStores", { that.apipost("/api/MContent/RemoveStores", {
...@@ -201,6 +327,7 @@ ...@@ -201,6 +327,7 @@
}, res => { }, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
that.getList(); that.getList();
this.clearMsg();
} else { } else {
that.Info(res.data.message); that.Info(res.data.message);
} }
...@@ -223,8 +350,24 @@ ...@@ -223,8 +350,24 @@
}) })
}, },
input(obj) { 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() { mounted() {
this.getList(); this.getList();
...@@ -233,19 +376,19 @@ ...@@ -233,19 +376,19 @@
</script> </script>
<style> <style>
.projectClass .content .searchInput { .storeManage .content .searchInput {
border: 1px solid #DCDFE6; border: 1px solid #DCDFE6;
border-radius: 4px; border-radius: 4px;
} }
.projectClass .content .searchInput .el-input__inner { .storeManage .content .searchInput .el-input__inner {
border: none; border: none;
outline: none; outline: none;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
} }
.projectClass .content .searchInput { .storeManage .content .searchInput {
line-height: normal; line-height: normal;
display: inline-table; display: inline-table;
width: 100%; width: 100%;
...@@ -255,24 +398,23 @@ ...@@ -255,24 +398,23 @@
margin-right: 20px; margin-right: 20px;
} }
.projectClass .content { .storeManage .content {
background: #fff; background: #fff;
margin-top: 10px; margin-top: 10px;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.projectClass .operatImg { .storeManage .operatImg {
width: 32px; width: 32px;
height: 32px; height: 32px;
margin: 0 10px margin: 0 10px
} }
.projectClass .projectClass_condiv { .storeManage .store_condiv {
padding: 20px 0; padding: 20px 0;
background-color: #fff; background-color: #fff;
margin-bottom: 20px; margin-bottom: 20px;
padding-right: 50%;
} }
</style> </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