430 lines
17 KiB
Vue
430 lines
17 KiB
Vue
<template>
|
||
<el-dialog :title="form.id ? '编辑店铺' : '添加店铺'" :visible.sync="dialogVisible" @close="reset">
|
||
<div style="height: 50vh;overflow-y: auto;">
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||
<el-form-item label="店铺名称" prop="shopName">
|
||
<el-input v-model="form.shopName" placeholder="请输入门店名称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="店铺类型">
|
||
<el-radio-group v-model="form.type">
|
||
<el-radio-button label="only">单店</el-radio-button>
|
||
<el-radio-button label="chain">连锁店</el-radio-button>
|
||
<el-radio-button label="join">加盟店</el-radio-button>
|
||
</el-radio-group>
|
||
<div class="tips">请谨慎修改！！！</div>
|
||
</el-form-item>
|
||
<el-form-item label="主店账号" prop="mainId" v-if="form.type != 'only'">
|
||
<el-select v-model="form.mainId" placeholder="请选择主店铺" filterable remote reserve-keyword
|
||
:remote-method="getTableData" :loading="shopListLoading">
|
||
<el-option v-for="item in shopList" :label="`ID:${item.id} - 名称：${item.shopName}`" :value="item.id"
|
||
:key="item.id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="连锁店扩展店名">
|
||
<el-input v-model="form.chainName" placeholder="请输入连锁店扩展店名"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="门店logo" prop="logo">
|
||
<el-image :src="form.logo || require('@/assets/images/upload.png')" fit="contain"
|
||
style="width: 80px;height: 80px;" @click="showUpload = true; uploadIndex = 1"></el-image>
|
||
</el-form-item>
|
||
<el-form-item label="门店照片">
|
||
<el-image :src="form.coverImg || require('@/assets/images/upload.png')" fit="contain"
|
||
style="width: 80px;height: 80px;" @click="showUpload = true; uploadIndex = 2"></el-image>
|
||
</el-form-item>
|
||
<el-form-item label="经营模式">
|
||
<el-radio-group v-model="form.registerType">
|
||
<el-radio-button label="munchies">快餐版</el-radio-button>
|
||
<el-radio-button label="restaurant">餐饮版</el-radio-button>
|
||
</el-radio-group>
|
||
<div class="tips">请谨慎修改！！！</div>
|
||
</el-form-item>
|
||
<el-form-item label="管理方式" v-if="form.type != 'only'">
|
||
<el-radio-group v-model="form.tube_type">
|
||
<el-radio-button label="0">不可直接管理</el-radio-button>
|
||
<el-radio-button label="1">直接管理</el-radio-button>
|
||
</el-radio-group>
|
||
<div class="tips">请谨慎修改！！！</div>
|
||
</el-form-item>
|
||
<el-form-item label="试用/正式">
|
||
<el-radio-group v-model="form.profiles">
|
||
<el-radio-button label="probation">试用</el-radio-button>
|
||
<el-radio-button label="release">正式</el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="激活码">
|
||
<el-input v-model="form.registerCode" placeholder="请输入激活码"></el-input>
|
||
<div class="tips">注：输入有效激活码表示添加的同时直接激活该店铺。</div>
|
||
</el-form-item>
|
||
<el-form-item label="登录账号" prop="account">
|
||
<el-input v-model="form.account" placeholder="请输入登录账号"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="登录密码" prop="password" v-if="!form.id">
|
||
<el-input type="password" show-password v-model="form.password" placeholder="请输入登录密码"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系电话">
|
||
<el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="设备数量">
|
||
<el-input-number v-model="form.supportDeviceNumber" controls-position="right" :min="1" :step="1"
|
||
step-strictly></el-input-number>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="外卖起送金额">
|
||
<el-input-number v-model="form.takeaway_money" placeholder="0.00" controls-position="right"
|
||
:min="0"></el-input-number>
|
||
</el-form-item> -->
|
||
<el-form-item label="店铺经度" prop="provinces">
|
||
<el-row>
|
||
<el-col :span="9" v-if="form.provinces">
|
||
<el-input :value="`${form.provinces}-${form.cities}-${form.districts}`" disabled />
|
||
</el-col>
|
||
<el-col :span="4" v-if="form.lng">
|
||
<el-input v-model="form.lng" placeholder="经度" disabled></el-input>
|
||
</el-col>
|
||
<el-col :span="4" v-if="form.lng">
|
||
<el-input v-model="form.lat" placeholder="纬度" disabled></el-input>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button type="primary" plain icon="el-icon-place"
|
||
@click="showLocation = true">选择坐标</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<el-form-item label="店铺详细地址">
|
||
<el-input type="textarea" v-model="form.address" placeholder="请输入门店详细地址"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="店铺简介">
|
||
<el-input type="textarea" v-model="form.detail" placeholder="请输入店铺简介"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="状态">
|
||
<el-radio-group v-model="form.status">
|
||
<el-radio :label="1">开启</el-radio>
|
||
<el-radio :label="0">关闭</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<el-dialog title="选择地址" :visible.sync="showLocation" :modal="false" :modal-append-to-body="false">
|
||
<div class="map_box">
|
||
<div class="map">
|
||
<el-amap ref="map" :center="amapOptions.center">
|
||
<el-amap-marker :position="amapOptions.center"></el-amap-marker>
|
||
</el-amap>
|
||
</div>
|
||
<div class="search_box">
|
||
<el-amap-search-box :search-option="searchOption"
|
||
:on-search-result="onSearchResult"></el-amap-search-box>
|
||
</div>
|
||
<div class="search_wrap">
|
||
<div class="item" v-for="item in locationSearchList" :key="item.id">
|
||
<div class="left">
|
||
<div class="name">{{ item.name }}-{{ item.address }}</div>
|
||
<div class="location">
|
||
经纬度：{{ item.lng }},{{ item.lat }}
|
||
</div>
|
||
</div>
|
||
<div class="btn">
|
||
<el-button type="primary" @click="selectLocationHandle(item)">
|
||
选择
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="500px"
|
||
@close="showUpload = false">
|
||
<el-upload :before-remove="handleBeforeRemove" :on-success="handleSuccess" :on-error="handleError"
|
||
:file-list="fileList" :headers="headers" :action="qiNiuUploadApi" class="upload-demo" multiple>
|
||
<el-button size="small" type="primary">点击上传</el-button>
|
||
<div slot="tip" style="display: block;" class="el-upload__tip">请勿上传违法文件，且文件不超过15M</div>
|
||
</el-upload>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="doSubmit">确认</el-button>
|
||
<el-button @click="uploadClose">取消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="close">取消</el-button>
|
||
<el-button type="primary" @click="submitHandle" :loading="formLoading">
|
||
<span v-if="!formLoading">保存</span>
|
||
<span v-else>保存中...</span>
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { getToken } from '@/utils/auth'
|
||
import { mapGetters } from 'vuex'
|
||
import crudQiNiu from '@/api/tools/qiniu'
|
||
import { tbShopInfoPost, geocode, tbShopInfo } from '@/api/shop'
|
||
export default {
|
||
computed: {
|
||
...mapGetters([
|
||
'qiNiuUploadApi'
|
||
])
|
||
},
|
||
data() {
|
||
const validateLogo = (rule, value, callback) => {
|
||
if (!this.form.logo) {
|
||
callback(new Error('请上传门店logo'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
return {
|
||
dialogVisible: false,
|
||
showLocation: false,
|
||
showUpload: false,
|
||
uploadIndex: 1,
|
||
startTime: '',
|
||
endTime: '',
|
||
formLoading: false,
|
||
form: {
|
||
id: '',
|
||
shopName: '',
|
||
mainId: '',
|
||
type: 'only',
|
||
tube_type: '0',
|
||
registerType: 'restaurant',
|
||
profiles: 'release',
|
||
registerCode: '',
|
||
account: '',
|
||
password: '',
|
||
phone: '',
|
||
supportDeviceNumber: '',
|
||
lat: '',
|
||
lng: '',
|
||
address: '',
|
||
detail: '',
|
||
status: 1,
|
||
logo: '',
|
||
coverImg: '',
|
||
provinces: '',
|
||
cities: '',
|
||
districts: '',
|
||
chainName: ''
|
||
},
|
||
resetForm: '',
|
||
rules: {
|
||
shopName: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
mainId: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
provinces: [
|
||
{
|
||
required: true,
|
||
message: '请选择坐标',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
logo: [
|
||
{
|
||
required: true,
|
||
validator: validateLogo,
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
account: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
password: [
|
||
{
|
||
required: true,
|
||
message: ' ',
|
||
trigger: 'change'
|
||
}
|
||
]
|
||
},
|
||
fileList: [],
|
||
files: [],
|
||
headers: {
|
||
'Authorization': getToken()
|
||
},
|
||
searchOption: {
|
||
city: '西安',
|
||
citylimit: false
|
||
},
|
||
locationSearchList: [],
|
||
amapOptions: {
|
||
center: [108.946465, 34.347984],
|
||
position: []
|
||
},
|
||
shopListLoading: false,
|
||
shopList: []
|
||
}
|
||
},
|
||
mounted() {
|
||
this.resetForm = { ...this.form }
|
||
},
|
||
methods: {
|
||
// 获取商家列表
|
||
async getTableData(query = '') {
|
||
this.shopListLoading = true
|
||
try {
|
||
const res = await tbShopInfo({
|
||
page: 0,
|
||
size: 100,
|
||
shopName: query,
|
||
type: 'only'
|
||
})
|
||
this.shopListLoading = false
|
||
this.shopList = res.content
|
||
} catch (error) {
|
||
this.shopListLoading = false
|
||
console.log(error)
|
||
}
|
||
},
|
||
onSearchResult(res) {
|
||
this.locationSearchList = res
|
||
this.amapOptions.center = [res[0].lng, res[0].lat]
|
||
},
|
||
// 确认地址选择
|
||
async selectLocationHandle(item) {
|
||
console.log(item);
|
||
this.form.lng = item.lng
|
||
this.form.lat = item.lat
|
||
this.form.address = item.address
|
||
this.showLocation = false
|
||
|
||
const position = `${item.lng},${item.lat}`;
|
||
const res = JSON.parse(await geocode({ location: position }))
|
||
console.log(res);
|
||
|
||
this.form.provinces = res.addressComponent.province
|
||
this.form.cities = res.addressComponent.city
|
||
this.form.districts = res.addressComponent.district
|
||
},
|
||
// 保存
|
||
submitHandle() {
|
||
this.$refs.form.validate(async (valid) => {
|
||
if (valid) {
|
||
this.formLoading = true
|
||
try {
|
||
await tbShopInfoPost(this.form, this.form.id ? 'put' : 'post')
|
||
this.$emit('success')
|
||
this.formLoading = false
|
||
this.$notify({
|
||
title: '成功',
|
||
message: `${this.form.id ? '编辑' : '添加'}成功`,
|
||
type: 'success'
|
||
});
|
||
this.close()
|
||
} catch (error) {
|
||
this.formLoading = false
|
||
console.log(error)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
handleSuccess(response, file, fileList) {
|
||
// const uid = file.uid
|
||
// const id = response.id
|
||
// this.files.push({ uid, id })
|
||
console.log('上传成功', response)
|
||
this.files = response.data
|
||
},
|
||
handleBeforeRemove(file, fileList) {
|
||
for (let i = 0; i < this.files.length; i++) {
|
||
if (this.files[i].uid === file.uid) {
|
||
crudQiNiu.del([this.files[i].id]).then(res => { })
|
||
return true
|
||
}
|
||
}
|
||
},
|
||
handlePictureCardPreview(file) {
|
||
this.dialogImageUrl = file.url
|
||
this.dialogVisible = true
|
||
},
|
||
// 监听上传失败
|
||
handleError(e, file, fileList) {
|
||
const msg = JSON.parse(e.message)
|
||
this.crud.notify(msg.message, CRUD.NOTIFICATION_TYPE.ERROR)
|
||
},
|
||
// 刷新列表数据
|
||
doSubmit() {
|
||
this.fileList = []
|
||
this.showUpload = false
|
||
switch (this.uploadIndex) {
|
||
case 1:
|
||
this.form.logo = this.files[0]
|
||
break;
|
||
case 2:
|
||
this.form.coverImg = this.files[0]
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
show(obj) {
|
||
this.getTableData()
|
||
|
||
this.dialogVisible = true
|
||
if (obj && obj.id) {
|
||
this.form = { ...obj }
|
||
}
|
||
},
|
||
close() {
|
||
this.dialogVisible = false
|
||
},
|
||
uploadClose() {
|
||
this.showUpload = false
|
||
},
|
||
reset() {
|
||
this.form = { ...this.resetForm }
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.map_box {
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
.map {
|
||
height: 300px;
|
||
}
|
||
|
||
.search_box {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
}
|
||
|
||
.search_wrap {
|
||
padding: 6px 0;
|
||
|
||
.item {
|
||
display: flex;
|
||
padding: 12px 0;
|
||
|
||
.left {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-right: 20px;
|
||
|
||
.location {
|
||
color: #999;
|
||
padding-top: 4px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |