Skip to content

O
office-web
Commit ccfece40 by xiaohai
Options

.

parent 3cf7e635
Showing with 200 additions and 21 deletions
src/components/contacts/storeFrame/storeInfo.vue
...@@ -4,45 +4,145 @@ ...@@ -4,45 +4,145 @@
<p class="title">门店信息</p> <p class="title">门店信息</p>
<el-form <el-form
class="store-info-form info-form" class="store-info-form info-form"
label-width="70px"> label-width="90px">
<el-form-item label="门店名称" prop="name"> <el-form-item label="门店名称" prop="name">
<el-input v-model="storeInfo.name"> <el-input v-model="storeInfo.name">
<template slot="suffix">{{storeInfo.name.length}}/20</template> <template slot="suffix">{{storeInfo.name.length}}/20</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="所属分组" prop="group"> <el-form-item label="所属分组" prop="group">
<el-input v-model="storeInfo.name"> <el-input v-model="storeInfo.groupChainName">
<i slot="suffix" class="el-input__icon el-icon-arrow-down"></i> <i slot="suffix" class="el-input__icon el-icon-arrow-down"></i>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="门店图片" prop="imageUrls"> <el-form-item label="门店图片" prop="imageUrls">
<ul class="img-list"> <ul class="img-list">
<li class="img-li" v-for="(img, index) in storeInfo.imageUrls.split(',')" :key="index + '_' + img "> <li class="img-li" v-if="storeInfo.imageUrls.split(',').length == 0" v-for="(img, index) in storeInfo.imageUrls.split(',')" :key="index + '_' + img ">
<img :src="img"> <img :src="img">
<i class="el-icon-circle-close J_del-img"></i>
</li> </li>
<li class="img-li J_add-img"> <li class="img-li J_add-img">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
<p class="tip">图片规格640*340像素</p> <p class="tip">图片规格640*340像素</p>
</li> </li>
</ul> </ul>
<div class="member-upload-image">
<vue-gic-upload-image
projectName="gic-web"
wxFlag="0"
actionUrl="/api-plug/upload-img"
:imageList="storeInfo.imageUrls.split(',')"
:limitW="500"
:limitH="500"
:maxImageLength="5"
@uploadOnSuccess="uploadOnSuccess"
@sortImg="sortImg"
@deleteImage="deleteImage">
</vue-gic-upload-image>
</div>
</el-form-item> </el-form-item>
<el-form-item label="联系电话" prop="phoneNumber"> <el-form-item label="联系电话" prop="phoneNumber">
<el-input v-model="storeInfo.phoneNumber"></el-input> <el-input v-model="storeInfo.phoneNumber"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="营业时间" prop="phoneNumber"> <el-form-item label="营业时间" prop="phoneNumber">
<el-time-picker <el-time-select
is-range placeholder="起始时间"
v-model="storeInfo.operateTime" v-model="storeInfo.openTime"
:picker-options="{
start: '00:00',
step: '00:05',
end: '24:00'
}">
</el-time-select>
~
<el-time-select
placeholder="结束时间"
v-model="storeInfo.closeTime"
:picker-options="{ :picker-options="{
start: '00:00', start: '00:00',
step: '00:01', step: '00:05',
end: '23:59' end: '24:00',
}" minTime: storeInfo.openTime
range-separator="至" }">
start-placeholder="开始时间" </el-time-select>
end-placeholder="结束时间" </el-form-item>
placeholder="选择时间范围"> <el-form-item label="门店类型">
</el-time-picker> <el-radio-group v-model="storeInfo.storeType">
<el-radio :label="0">自营</el-radio>
<el-radio :label="1">联营</el-radio>
<el-radio :label="2">代理</el-radio>
<el-radio :label="3">代销</el-radio>
<el-radio :label="4">托管</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="门店地址">
<vue-office-area :areaOptions="areaOptions" @selected="selected" projectName="haoban-web" postUrl="/api-admin/dict-district-list"></vue-office-area>
<el-input v-model="areaOptions.postAddress">
<template slot="suffix">{{storeInfo.postAddress.length}}/50</template>
</el-input>
</el-form-item>
<el-form-item label="GPS坐标">
<el-input v-model="location" class="m-r-10"></el-input>
<a href="http://m.gpsspg.com/maps.htm" class="a-href">经纬度测试工具</a>
</el-form-item>
<el-form-item>
<template slot="label">
门店代码
<i class="el-icon-question" style="color:#C0C4CC;"></i>
</template>
<el-input v-model="storeInfo.storeCode">
<template slot="suffix">{{storeInfo.storeCode.length}}/20</template>
</el-input>
</el-form-item>
</el-form>
</div>
<div class="info-cell">
<p class="title">店长信息</p>
<el-form
class="store-manager-info-form info-form"
label-width="90px">
<el-form-item label="店长姓名" prop="name">
<el-input v-model="storeInfo.managerName">
<template slot="suffix">{{storeInfo.managerName.length}}/10</template>
</el-input>
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="storeInfo.managerPhoneNumber"></el-input>
</el-form-item>
<el-form-item label="店长性别">
<el-radio-group v-model="storeInfo.managerSex">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="店长代码">
<el-input v-model="storeInfo.managerCode">
<template slot="suffix">{{storeInfo.managerCode.length}}/20</template>
</el-input>
</el-form-item>
</el-form>
</div>
<div class="info-cell">
<p class="title">经营信息</p>
<el-form
class="operate-info-form info-form"
label-width="90px">
<el-form-item label="特色服务">
<el-input type="textarea" :rows="2" v-model="storeInfo.specialService"></el-input>
<p class="counter t-rt c-909399">{{storeInfo.specialService.length}}/20</p>
</el-form-item>
<el-form-item label="人均消费">
<el-input v-model="storeInfo.personCost">
<template slot="suffix">{{(storeInfo.personCost+'').length}}/10</template>
</el-input>
</el-form-item>
<el-form-item label="推荐商品">
<el-input type="textarea" :rows="2" v-model="storeInfo.recommendGoods"></el-input>
<p class="counter t-rt c-909399">{{storeInfo.recommendGoods.length}}/100</p>
</el-form-item>
<el-form-item label="品牌介绍">
<el-input type="textarea" :rows="2" v-model="storeInfo.brandDes"></el-input>
<p class="counter t-rt c-909399">{{storeInfo.recommendGoods.length}}/200</p>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -55,12 +155,61 @@ export default { ...@@ -55,12 +155,61 @@ export default {
return { return {
storeInfo: { storeInfo: {
name: "", name: "",
groupChainName: "",
group: "", group: "",
imageUrls: "https://www.foodnext.net/dispPageBox/getFile/GetImg.aspx?FileLocation=%2FPJ-FOODNEXT%2FFiles%2F&FileName=photo-03817-i.jpg,https://video.nextmag.com.tw/photo/2015/04/19/00bOOOPIC2b_1429452213732_209232_ver1.0.jpg,https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2017/12/28/20171228-052047_U9180_M363881_1edc.jpg?itok=Swxr8yZb,https://www.yw11.com/uploads/allimg/161224/16-16122413133KM.jpg", imageUrls: "",
phoneNumber: 18758198024, phoneNumber: 18758198024,
operateTime: [] openTime: "08:00",
closeTime: "18:00",
storeCode: "code222",
managerName: "翠花",
storeType: 0,
managerPhoneNumber: 13777800255,
longitude: "40.5585354733",
latitude: "106.284122062",
managerSex: "女",
managerCode: "m220",
specialService: "脚底按摩了解一下",
personCost: 1000,
recommendGoods: "瓜子，花生，马应龙",
brandDes: "are you ok",
areaChainName: "河北省/邯郸市/成安县",
postAddress: "河源",
provinceId: "130000",
cityId: "130300",
countyId: "130302"
},
opts: {
selectableRange: '18:30 - 20:30',
format: 'HH:mm'
} }
}; };
},
methods: {
selected(val) {
console.log(val);
},
uploadOnSuccess() {},
sortImg() {},
deleteImage() {}
},
computed: {
areaOptions() {
let ths = this;
let arr = ths.storeInfo.areaChainName.split("/");
return {
provinceName: arr[0],
provinceId: ths.provinceId,
cityName: arr[1],
cityId: ths.cityId,
countryName: arr[2],
countyId: ths.countyId
};
},
location() {
return this.storeInfo.longitude + "," + this.storeInfo.latitude;
}
} }
}; };
</script> </script>
...@@ -76,10 +225,24 @@ export default { ...@@ -76,10 +225,24 @@ export default {
text-indent: 32px; text-indent: 32px;
border-bottom: 1px solid #E4E7ED; border-bottom: 1px solid #E4E7ED;
} }
.store-info-form { .info-form {
padding: 24px 60px 0; padding: 24px 60px 0;
.el-input { .el-form-item:last-child {
margin-bottom: 0;
}
.el-input, .el-textarea, .counter {
width: 500px; width: 500px;
&.el-date-editor {
width: 150px;
}
}
.area-container {
.el-select {
width: 163px;
}
.el-input {
width: 160px;
}
} }
.img-list { .img-list {
display: flex; display: flex;
...@@ -89,10 +252,10 @@ export default { ...@@ -89,10 +252,10 @@ export default {
width:148px; width:148px;
height:148px; height:148px;
border-radius:6px; border-radius:6px;
margin-right: 8px; margin-right: 12px;
margin-bottom: 10px; margin-bottom: 10px;
position: relative;
&.J_add-img { &.J_add-img {
position: relative;
text-align: center; text-align: center;
line-height: 150px; line-height: 150px;
border:1px solid rgba(192,204,218,1); border:1px solid rgba(192,204,218,1);
...@@ -108,6 +271,14 @@ export default { ...@@ -108,6 +271,14 @@ export default {
width: 100%; width: 100%;
} }
} }
.J_del-img {
position: absolute;
font-size: 20px;
color: #808995;
top: -10px;
right: -10px;
cursor: pointer;
}
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
src/main.js
...@@ -17,9 +17,10 @@ import vueOfficeArea from '@gic-test/vue-office-area' ...@@ -17,9 +17,10 @@ import vueOfficeArea from '@gic-test/vue-office-area'
// 新增公共 footer插件 // 新增公共 footer插件
import vueGicFooter from '@gic-test/vue-gic-footer' import vueGicFooter from '@gic-test/vue-gic-footer'
import vueGicImgPreview from '@gic-test/vue-gic-img-preview' import vueGicImgPreview from '@gic-test/vue-gic-img-preview'
import vueGicUploadImage from '@gic-test/vue-gic-upload-image'
Vue.use(vueGicImgPreview) Vue.use(vueGicImgPreview)
Vue.use(vueGicUploadImage)
Vue.use(vueGicFooter) Vue.use(vueGicFooter)
Vue.use(vueOfficeArea) Vue.use(vueOfficeArea)
Vue.use(vueOfficeAside) Vue.use(vueOfficeAside)
......
static/css/public.css
...@@ -325,6 +325,12 @@ input:focus { ...@@ -325,6 +325,12 @@ input:focus {
display: inline-block; display: inline-block;
} }
.t-rt {
text-align: right;
}
.c-909399 {
color: #909399;
}
.m-l-16 { .m-l-16 {
margin-left: 16px; margin-left: 16px;
} }
......
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