354 lines
10 KiB
Vue
354 lines
10 KiB
Vue
<template>
|
||
<base-page>
|
||
<view class="common-wrap common-form fixd">
|
||
<view class="common-title">门店设置</view>
|
||
<view class="common-form-item">
|
||
<label class="form-label">门店名称</label>
|
||
<view class="form-input-inline">
|
||
<input type="text" v-model="storeData.store_name" class="form-input" />
|
||
</view>
|
||
<text class="form-word-aux-line">门店的名称（招牌）</text>
|
||
</view>
|
||
<view class="common-form-item store-img">
|
||
<label class="form-label">门店图片</label>
|
||
<view class="form-input-inline upload-box" @click="addImg">
|
||
<view class="upload" v-if="storeData.store_image">
|
||
<image :src="$util.img(storeData.store_image)" @error="$util.img(defaultImg.store)" mode="heightFix"></image>
|
||
</view>
|
||
<view class="upload" v-else>
|
||
<text class="iconfont iconyunshangchuan"></text>
|
||
<view>点击上传</view>
|
||
</view>
|
||
</view>
|
||
<text class="form-word-aux-line">门店图片在PC及移动端对应页面及列表作为门店标志出现。建议图片尺寸：100 * 100像素，图片格式：jpg、png、jpeg。</text>
|
||
</view>
|
||
|
||
<view class="common-form-item">
|
||
<label class="form-label">门店类型</label>
|
||
<view class="form-inline">
|
||
<radio-group @change="storeTypeChange" class="form-radio-group">
|
||
<label class="radio form-radio-item">
|
||
<radio value="directsale" :checked="storeData.store_type=='directsale'"/>直营店
|
||
</label>
|
||
<label class="radio form-radio-item">
|
||
<radio value="franchise" :checked="storeData.store_type=='franchise'" />加盟店
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="common-form-item">
|
||
<label class="form-label">门店电话</label>
|
||
<view class="form-input-inline">
|
||
<input type="number" v-model="storeData.telphone" class="form-input" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="common-form-item">
|
||
<label class="form-label">门店地址</label>
|
||
<view class="form-inline">
|
||
<pick-regions ref="selectArea" :default-regions="defaultRegions" @getRegions="handleGetRegions">
|
||
<view class="form-input-inline long">
|
||
<view class="form-input">{{storeData.full_address}}</view>
|
||
</view>
|
||
</pick-regions>
|
||
</view>
|
||
</view>
|
||
<view class="common-form-item">
|
||
<label class="form-label"></label>
|
||
<view class="form-inline">
|
||
<view class="form-input-inline long">
|
||
<input type="text" v-model="storeData.address" class="form-input" />
|
||
</view>
|
||
<view class="form-input-inline short btn" @click="getlatlng()">查找</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="common-form-item store-img">
|
||
<label class="form-label">地图定位</label>
|
||
<view class="form-inline">
|
||
<view class="map-box">
|
||
<image src="../../static/location.png" class="map-icon"></image>
|
||
<map style="width: 100%; height: 100%;" :latitude="storeData.latitude" :longitude="storeData.longitude" :markers="covers" @markertap="markertap" @regionchange="tap">
|
||
</map>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="common-btn-wrap">
|
||
<button type="default" class="screen-btn" @click="saveFn">保存</button>
|
||
<button type="default" class="" @click="$util.redirectTo('/pages/store/index')">返回</button>
|
||
</view>
|
||
<nc-loading :layer-background="{ background: 'rgba(255,255,255,.8)' }" ref="loading"></nc-loading>
|
||
</view>
|
||
</base-page>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
storeData:{
|
||
'store_name' : '',
|
||
'store_image' : '',
|
||
'status' : 0,
|
||
'telphone' : '',
|
||
'open_date' : '',
|
||
'is_o2o' : 0,
|
||
'is_pickup' : 0,
|
||
'time_type' : 0,
|
||
'start_time' : '00:00',
|
||
'end_time' : '23:59',
|
||
'stock_type' : 'all',
|
||
'time_week' : '',
|
||
'latitude' : 39.909,
|
||
'longitude' : 116.39742,
|
||
'province_id' : 110000,
|
||
'city_id' : 110100,
|
||
'district_id' : 110101,
|
||
'address' : '西长安街1号',
|
||
'full_address' : '北京市-北京市-东城区',
|
||
'store_type' : 'directsale'
|
||
},
|
||
covers: [{
|
||
latitude: 39.909,
|
||
longitude: 116.39742,
|
||
iconPath: '/static/location.png'
|
||
}],
|
||
defaultRegions:[],
|
||
};
|
||
},
|
||
onLoad() {},
|
||
onShow() {
|
||
this.getData();
|
||
// uni.setLocale('zh-Hans')
|
||
},
|
||
methods: {
|
||
getData() {
|
||
this.$api.sendRequest({
|
||
url: '/store/storeapi/store/info',
|
||
success: res => {
|
||
if (res.code >= 0) {
|
||
this.storeData = res.data;
|
||
this.storeData.start_time = this.timeFormat(this.storeData.start_time);
|
||
this.storeData.end_time = this.timeFormat(this.storeData.end_time);
|
||
this.defaultRegions = [this.storeData.province_id, this.storeData.city_id, this.storeData.district_id];
|
||
|
||
this.$refs.selectArea.handleDefaultRegions();
|
||
this.$refs.loading.hide();
|
||
} else {
|
||
this.$util.showToast({
|
||
title: res.message
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
addImg() {
|
||
this.$util.upload(1, {
|
||
path: 'image'
|
||
}, res => {
|
||
if (res.length > 0) {
|
||
|
||
this.storeData.store_image = res[0];
|
||
this.$forceUpdate();
|
||
}
|
||
});
|
||
},
|
||
|
||
tap(e){
|
||
if(e.detail && e.detail.centerLocation){
|
||
this.storeData.latitude = e.detail.centerLocation.latitude;
|
||
this.storeData.longitude = e.detail.centerLocation.longitude;
|
||
this.covers = [
|
||
{
|
||
latitude: this.storeData.latitude,
|
||
longitude: this.storeData.longitude,
|
||
iconPath: '/static/location.png'
|
||
}
|
||
]
|
||
this.getAddress();
|
||
this.$forceUpdate();
|
||
}
|
||
},
|
||
handleGetRegions(regions) {
|
||
this.storeData.full_address = '';
|
||
this.storeData.full_address += regions[0] != undefined ? regions[0].label : '';
|
||
this.storeData.full_address += regions[1] != undefined ? '-' + regions[1].label : '';
|
||
this.storeData.full_address += regions[2] != undefined ? '-' + regions[2].label : '';
|
||
// this.storeData.address = '';
|
||
|
||
this.storeData.province_id = regions[0] != undefined ? regions[0].value : '';
|
||
this.storeData.city_id = regions[1] != undefined ? regions[1].value : '';
|
||
this.storeData.district_id = regions[2] != undefined ? regions[2].value : '';
|
||
this.defaultRegions = [this.storeData.province_id, this.storeData.city_id, this.storeData.district_id];
|
||
this.$forceUpdate();
|
||
this.getlatlng();
|
||
|
||
},
|
||
//获取详细地址
|
||
getAddress() {
|
||
let value = this.storeData.latitude+','+this.storeData.longitude;
|
||
this.$api.sendRequest({
|
||
url: '/cashier/storeapi/address/tranaddressinfo',
|
||
data: {
|
||
latlng: value
|
||
},
|
||
success: res => {
|
||
if (res.code == 0) {
|
||
this.storeData.full_address = '';
|
||
this.storeData.full_address += res.data.province != undefined ? res.data.province : '';
|
||
this.storeData.full_address += res.data.city != undefined ? '-' + res.data.city : '';
|
||
this.storeData.full_address += res.data.district != undefined ? '-' + res.data.district : '';
|
||
this.storeData.address = res.data.address != undefined ? res.data.address : '';
|
||
|
||
this.storeData.province_id = res.data.province_id != undefined ? res.data.province_id : '';
|
||
this.storeData.city_id = res.data.city_id != undefined ? res.data.city_id : '';
|
||
this.storeData.district_id = res.data.district_id != undefined ? res.data.district_id : '';
|
||
this.defaultRegions = [this.storeData.province_id, this.storeData.city_id, this.storeData.district_id];
|
||
this.$forceUpdate();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//获取详细地址
|
||
getlatlng() {
|
||
let value = this.storeData.full_address+this.storeData.address;
|
||
this.$api.sendRequest({
|
||
url: '/cashier/storeapi/address/getaddressbyname',
|
||
data: {
|
||
'address': value
|
||
},
|
||
|
||
success: res => {
|
||
if (res.code == 0) {
|
||
this.storeData.latitude = res.data.latitude;
|
||
this.storeData.longitude = res.data.longitude;
|
||
// if(this.storeData.address == '') this.getAddress();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
storeTypeChange(e){
|
||
this.storeData.store_type = e.detail.value;
|
||
},
|
||
|
||
getSaveData() {
|
||
let data = Object.assign({}, this.storeData);
|
||
data.start_time = this.timeTurnTimeStamp(data.start_time);
|
||
data.end_time = this.timeTurnTimeStamp(data.end_time);
|
||
data.time_week = this.storeData.time_week.toString();
|
||
return data;
|
||
},
|
||
checkData(data){
|
||
if(data.store_name == ''){
|
||
this.$util.showToast({
|
||
title: '请输入门店名称'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
if(!data.district_id || data.address == ''){
|
||
this.$util.showToast({
|
||
title: '请选择门店地址'
|
||
});
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
saveFn() {
|
||
let data = this.getSaveData();
|
||
if(this.checkData(data)){
|
||
if(this.flag) return false;
|
||
this.flag = true;
|
||
this.$api.sendRequest({
|
||
url: '/cashier/storeapi/store/editstore',
|
||
data: data,
|
||
success: res => {
|
||
this.flag = false;
|
||
this.$util.showToast({
|
||
title: res.message
|
||
});
|
||
if(res.code >= 0){
|
||
this.$refs.loading.show();
|
||
this.getData();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
timeTurnTimeStamp(_time){
|
||
let data = _time.split(":");
|
||
return data[0]*3600 + data[1]*60;
|
||
},
|
||
timeFormat(time){
|
||
let h = time / 3600;
|
||
|
||
let i = time % 3600 / 60;
|
||
h = h < 10 ? '0'+h : h;
|
||
i = i < 10 ? '0'+i : i;
|
||
return h+':'+i;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.common-wrap {
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
}
|
||
.upload-box{
|
||
border: .01rem dashed #e6e6e6!important;
|
||
width: 2.5rem!important;
|
||
height: 1.2rem!important;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.upload{
|
||
text-align: center;
|
||
color: #5a5a5a;
|
||
.iconfont{
|
||
font-size: 0.3rem;
|
||
|
||
}
|
||
image{
|
||
max-width: 100%;
|
||
height: 1.2rem!important;
|
||
}
|
||
}
|
||
}
|
||
.store-img{
|
||
align-items: flex-start!important;
|
||
}
|
||
.map-box{
|
||
width: 6.5rem;
|
||
height: 5rem;
|
||
position: relative;
|
||
.map-icon{
|
||
position: absolute;
|
||
top: calc(50% - 0.36rem);
|
||
left: calc(50% - 0.18rem);
|
||
width: 0.36rem;
|
||
height: 0.36rem;
|
||
z-index: 100;
|
||
}
|
||
}
|
||
.form-input{
|
||
font-size: 0.16rem;
|
||
}
|
||
.form-input-inline.btn{
|
||
height: 0.37rem;
|
||
line-height: 0.35rem;
|
||
box-sizing: border-box;
|
||
border: 0.01rem solid #e6e6e6;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
.common-title{
|
||
font-size: 0.18rem;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
</style>
|