初始上传
This commit is contained in:
409
addon/cashier/source/os/pages/store/config.vue
Executable file
409
addon/cashier/source/os/pages/store/config.vue
Executable file
@@ -0,0 +1,409 @@
|
||||
<template>
|
||||
<base-page>
|
||||
<view class="store-config">
|
||||
<view class="common-wrap common-form fixd common-scrollbar">
|
||||
<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" />
|
||||
</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" v-if="category.status">
|
||||
<label class="form-label">门店分类</label>
|
||||
<view class="form-input-inline">
|
||||
<uni-data-select v-model="storeData.category_id" :localdata="category.list"></uni-data-select>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="common-form-item" v-if="label.length">
|
||||
<label class="form-label">门店标签</label>
|
||||
<view class="form-block">
|
||||
<checkbox-group class="form-checkbox-group" @change="labelChange">
|
||||
<label class="form-checkbox-item" v-for="(item, index) in label">
|
||||
<checkbox :value="item.label_id.toString()" :checked="labelChecked(item)" />
|
||||
{{ item.label_name }}
|
||||
</label>
|
||||
</checkbox-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" />
|
||||
<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" @click="$util.redirectTo('/pages/store/index')">返回</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</base-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
editStore,
|
||||
getAllStoreCategory,
|
||||
getAllStoreLabel
|
||||
} from '@/api/store.js'
|
||||
import { getAddressByName, getTranAddressInfo } from '@/api/address.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
storeData: {},
|
||||
covers: [{
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
iconPath: '/static/location.png'
|
||||
}],
|
||||
defaultRegions: [],
|
||||
category: {
|
||||
status: 0,
|
||||
list: []
|
||||
},
|
||||
label: [],
|
||||
labelData: {}
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getLabel();
|
||||
this.getCategory();
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.storeData = this.$util.deepClone(this.globalStoreInfo);
|
||||
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.$nextTick(() => {
|
||||
this.$refs.selectArea.handleDefaultRegions();
|
||||
});
|
||||
},
|
||||
getLabel() {
|
||||
getAllStoreLabel().then(res => {
|
||||
if (res.code == 0) {
|
||||
this.label = res.data;
|
||||
let labelData = {};
|
||||
res.data.forEach(item => {
|
||||
labelData[item.label_id] = item.label_name;
|
||||
});
|
||||
this.labelData = labelData;
|
||||
}
|
||||
});
|
||||
},
|
||||
getCategory() {
|
||||
getAllStoreCategory().then(res => {
|
||||
if (res.code == 0) {
|
||||
this.category.status = res.data.status;
|
||||
this.category.list = res.data.list.map(item => {
|
||||
return {
|
||||
value: item.category_id,
|
||||
text: item.category_name
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
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.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;
|
||||
getTranAddressInfo(value).then(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;
|
||||
getAddressByName(value).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.storeData.latitude = res.data.latitude;
|
||||
this.storeData.longitude = res.data.longitude;
|
||||
}
|
||||
});
|
||||
},
|
||||
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;
|
||||
editStore(data).then(res => {
|
||||
this.flag = false;
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
if (res.code >= 0) {
|
||||
this.$store.dispatch('app/getStoreInfoFn', {
|
||||
callback: () => {
|
||||
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;
|
||||
},
|
||||
labelChange(e) {
|
||||
if (e.detail.value.length) {
|
||||
this.storeData.label_id = ',' + e.detail.value.toString() + ',';
|
||||
let labelName = [];
|
||||
e.detail.value.forEach(item => {
|
||||
labelName.push(this.labelData[item]);
|
||||
});
|
||||
this.storeData.label_name = ',' + labelName.toString() + ',';
|
||||
} else {
|
||||
this.storeData.label_id = '';
|
||||
this.storeData.label_name = '';
|
||||
}
|
||||
},
|
||||
labelChecked(item) {
|
||||
let labelIdArr = [];
|
||||
if (!this.storeData.label_id) return false;
|
||||
if (typeof this.storeData.label_id == 'string') labelIdArr = this.storeData.label_id.split(',');
|
||||
return labelIdArr.includes(item.label_id.toString());
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.store-config {
|
||||
position: relative;
|
||||
.common-wrap.fixd {
|
||||
padding: 30rpx;
|
||||
height: calc(100vh - 0.4rem);
|
||||
overflow-y: auto;
|
||||
// padding-bottom: 1rem !important;
|
||||
box-sizing: border-box;
|
||||
|
||||
.form-label {
|
||||
width: 1.5rem !important;
|
||||
}
|
||||
|
||||
.form-input-inline /deep/ .uni-select {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.common-btn-wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 0.24rem 0.2rem;
|
||||
}
|
||||
|
||||
.form-word-aux-line {
|
||||
margin-left: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
border: 0.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>
|
||||
Reference in New Issue
Block a user