483 lines
16 KiB
Vue
483 lines
16 KiB
Vue
<template>
|
||
<div>
|
||
<div>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
|
||
<el-form-item label="门店名称" prop="shopName">
|
||
<el-input v-model.trim="form.shopName" placeholder="请输入门店名称" style="width: 500px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="连锁店扩展店名">
|
||
<el-input v-model.trim="form.chainName" placeholder="请输入连锁店扩展店名" style="width: 500px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="门店logo">
|
||
<div class="img_box">
|
||
<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-button type="primary" plain v-if="form.logo" @click="downloadImgHandle(form.logo)">下载</el-button> -->
|
||
</div>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="门店照片">
|
||
<div class="img_box">
|
||
<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-button type="primary" plain v-if="form.coverImg"
|
||
@click="downloadImgHandle(form.coverImg)">下载</el-button>
|
||
</div>
|
||
</el-form-item> -->
|
||
<el-form-item label="门店收款码">
|
||
<div class="img_box">
|
||
<canvas ref="canvas" id="QRCode_header" style="width: 80px;height: 80px;"></canvas>
|
||
<el-button size="mini" plain v-if="form.paymentQrcode"
|
||
@click="downloadCanvas(form.paymentQrcode)">下载</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="微信二维码">
|
||
<div class="img_box">
|
||
<el-image :src="form.shopQrcode || require('@/assets/images/upload.png')" fit="contain"
|
||
style="width: 80px;height: 80px;" @click="
|
||
showUpload = true;
|
||
uploadIndex = 3;
|
||
"></el-image>
|
||
<!-- <el-button plain v-if="form.shopQrcode" @click="downloadImgHandle(form.shopQrcode)">下载</el-button> -->
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="店铺小程序码">
|
||
<div class="img_box">
|
||
<el-image :src="form.smallQrcode || require('@/assets/images/img_download_error.png')" fit="contain"
|
||
style="width: 80px;height: 80px;"></el-image>
|
||
<el-button size="mini" plain v-if="form.shopQrcode"
|
||
@click="downloadImgHandle(form.smallQrcode)">下载</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="经营模式「单选」">
|
||
<el-radio-group v-model="form.registerType">
|
||
<el-radio label="munchies">快餐版（先支付后下单）</el-radio>
|
||
<el-radio label="restaurant">餐饮版（先下单后支付）</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="就餐模式「多选」">
|
||
<el-checkbox-group v-model="form.eatModel">
|
||
<el-checkbox label="dine-in">堂食自取</el-checkbox>
|
||
<el-checkbox label="take-out">允许打包</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item label="联系电话" prop="phone">
|
||
<el-input v-model.trim="form.phone" placeholder="请输入联系电话" style="width: 500px;"></el-input>
|
||
</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>
|
||
<div style="color: #999;">注：准确的定位便于用户导航到店铺</div>
|
||
</el-form-item>
|
||
<el-form-item label="门店详细地址">
|
||
<el-input type="textarea" v-model.trim="form.address" placeholder="请输入门店详细地址"
|
||
style="width: 500px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="营业时间">
|
||
<el-select v-model="form.businessStartDay" placeholder="周几开始">
|
||
<el-option :value="item.label" :label="item.label" v-for="item in weeks" :key="item.value"></el-option>
|
||
</el-select>
|
||
<el-select v-model="form.businessEndDay" placeholder="周几结束">
|
||
<el-option :value="item.label" :label="item.label" v-for="item in weeks" :key="item.value"></el-option>
|
||
</el-select>
|
||
<el-time-picker placeholder="起始时间" v-model="startTime" :picker-options="{
|
||
selectableRange: '00:00:00 - 23:59:59',
|
||
format: 'HH:mm'
|
||
}" format="HH:mm" value-format="HH:mm">
|
||
</el-time-picker>
|
||
<el-time-picker placeholder="结束时间" v-model="endTime" :picker-options="{
|
||
selectableRange: '00:00:00 - 23:59:59',
|
||
}" format="HH:mm" value-format="HH:mm">
|
||
</el-time-picker>
|
||
</el-form-item>
|
||
<el-form-item label="桌位费/位/元">
|
||
<el-input-number :disabled="!!form.isTableFee" v-model="form.tableFee" :min="0" />
|
||
<!-- <el-checkbox v-model="form.isTableFee" :label="1">免餐位费</el-checkbox> -->
|
||
<el-switch v-model.trim="form.isTableFee" :active-value="1" :inactive-value="0" active-text="免餐位费">
|
||
</el-switch>
|
||
</el-form-item>
|
||
<el-form-item label="是否开启8折活动">
|
||
<el-switch v-model.trim="form.isOpenYhq" active-value="true" inactive-value="false"></el-switch>
|
||
<!-- <div style="color: #999;">是否允许用户在小程序端支付订单</div> -->
|
||
</el-form-item>
|
||
<el-form-item label="是否开启会员支付">
|
||
<el-switch v-model.trim="form.isUseVip" :active-value="1" :inactive-value="0"></el-switch>
|
||
<!-- <div style="color: #999;">是否允许用户在小程序端支付订单</div> -->
|
||
</el-form-item>
|
||
<!-- <el-form-item label="结算类型">
|
||
<el-radio-group v-model="form.settleType">
|
||
<el-radio :label="0">今日</el-radio>
|
||
<el-radio :label="1">次日</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item> -->
|
||
<!-- <el-form-item label="结算时间" prop="settleTime">
|
||
<el-time-picker
|
||
placeholder="请选择结算时间"
|
||
v-model="form.settleTime"
|
||
:picker-options="{
|
||
selectableRange: '00:00:00 - 23:59:59',
|
||
format: 'HH:mm'
|
||
}"
|
||
format="HH:mm"
|
||
value-format="HH:mm"
|
||
>
|
||
</el-time-picker>
|
||
</el-form-item> -->
|
||
<el-form-item label="店铺简介">
|
||
<el-input type="textarea" v-model.trim="form.detail" placeholder="请输入店铺简介" style="width: 500px;"></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="2">休息中</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="submitHandle" :loading="formLoading">
|
||
<span v-if="!formLoading">保存</span>
|
||
<span v-else>保存中...</span>
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<el-dialog title="选择地址" :visible.sync="showLocation">
|
||
<div class="map_box">
|
||
<div class="map">
|
||
<el-amap :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" :limit="1" list-type="picture"
|
||
class="upload-demo">
|
||
<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>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import QRCode from 'qrcode'
|
||
import { getToken } from "@/utils/auth";
|
||
import { mapGetters } from "vuex";
|
||
import crudQiNiu from "@/api/tools/qiniu";
|
||
import { tbShopInfo, tbShopInfoPut } from "@/api/user";
|
||
import { geocode } from '@/api/shop'
|
||
export default {
|
||
computed: {
|
||
...mapGetters(["qiNiuUploadApi"])
|
||
},
|
||
data() {
|
||
return {
|
||
showLocation: false,
|
||
showUpload: false,
|
||
uploadIndex: 1,
|
||
startTime: "",
|
||
endTime: "",
|
||
formLoading: false,
|
||
form: {
|
||
eatModel: [],
|
||
paymentQrcode: ''
|
||
},
|
||
rules: {
|
||
shopName: [
|
||
{
|
||
required: true,
|
||
message: " ",
|
||
trigger: "blur"
|
||
}
|
||
],
|
||
phone: [
|
||
{
|
||
required: true,
|
||
message: " ",
|
||
trigger: "blur"
|
||
}
|
||
],
|
||
settleTime: [
|
||
{
|
||
required: true,
|
||
message: " ",
|
||
trigger: "blur"
|
||
}
|
||
]
|
||
},
|
||
fileList: [],
|
||
files: [],
|
||
headers: {
|
||
Authorization: getToken()
|
||
},
|
||
searchOption: {
|
||
city: "西安",
|
||
citylimit: false
|
||
},
|
||
locationSearchList: [],
|
||
amapOptions: {
|
||
center: [108.946465, 34.347984],
|
||
position: []
|
||
},
|
||
weeks: [
|
||
{
|
||
value: '1',
|
||
label: '周一'
|
||
},
|
||
{
|
||
value: '2',
|
||
label: '周二'
|
||
},
|
||
{
|
||
value: '3',
|
||
label: '周三'
|
||
},
|
||
{
|
||
value: '4',
|
||
label: '周四'
|
||
},
|
||
{
|
||
value: '5',
|
||
label: '周五'
|
||
},
|
||
{
|
||
value: '6',
|
||
label: '周六'
|
||
},
|
||
{
|
||
value: '7',
|
||
label: '周天'
|
||
}
|
||
]
|
||
};
|
||
},
|
||
mounted() {
|
||
this.tbShopInfo();
|
||
},
|
||
methods: {
|
||
// 下载url图片
|
||
downloadImgHandle(url) {
|
||
if (url) window.open(url, '_blank')
|
||
},
|
||
// 下载图片
|
||
downloadCanvas(url) {
|
||
if (url) {
|
||
this.saveCanvasAsImage(this.$refs.canvas, 'pay_code')
|
||
}
|
||
},
|
||
saveCanvasAsImage(canvas, filename) {
|
||
// 获取canvas的数据URL
|
||
const dataURL = canvas.toDataURL('image/png');
|
||
|
||
// 创建一个a标签用于下载
|
||
const downloadLink = document.createElement('a');
|
||
downloadLink.href = dataURL;
|
||
downloadLink.download = filename;
|
||
document.body.appendChild(downloadLink);
|
||
|
||
// 触发下载
|
||
downloadLink.click();
|
||
|
||
// 清理临时元素
|
||
document.body.removeChild(downloadLink);
|
||
},
|
||
onSearchResult(res) {
|
||
this.locationSearchList = res;
|
||
this.amapOptions.center = [res[0].lng, res[0].lat];
|
||
},
|
||
// 确认地址选择
|
||
async selectLocationHandle(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
|
||
},
|
||
// 获取用户详情
|
||
async tbShopInfo() {
|
||
try {
|
||
const shopId = localStorage.getItem("shopId");
|
||
const res = await tbShopInfo(shopId);
|
||
this.form = res;
|
||
if (res.businessTime) {
|
||
const businessTime = res.businessTime.split("-");
|
||
this.startTime = businessTime[0];
|
||
this.endTime = businessTime[1];
|
||
}
|
||
QRCode.toCanvas(this.$refs.canvas, this.form.paymentQrcode, { margin: 0 }, function (error) {
|
||
console.log(error);
|
||
})
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
},
|
||
// 保存
|
||
submitHandle() {
|
||
this.$refs.form.validate(async valid => {
|
||
if (valid) {
|
||
this.formLoading = true;
|
||
try {
|
||
if (this.startTime && this.endTime) {
|
||
this.form.businessTime = `${this.startTime}-${this.endTime}`;
|
||
}
|
||
console.log(this.startTime, this.endTime);
|
||
const res = await tbShopInfoPut(this.form);
|
||
this.formLoading = false;
|
||
this.$notify({
|
||
title: "成功",
|
||
message: "提交成功",
|
||
type: "success"
|
||
});
|
||
|
||
localStorage.setItem('shopName', this.form.shopName)
|
||
localStorage.setItem('logo', this.form.logo)
|
||
setTimeout(() => {
|
||
location.reload()
|
||
}, 1000);
|
||
} catch (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;
|
||
case 3:
|
||
this.form.shopQrcode = this.files[0];
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.img_box {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 20px;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.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>
|