czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代客下单页面修改，增加店铺配置页面

Browse Source
This commit is contained in:
YeMingfei666
2025-02-25 13:37:24 +08:00
parent ffcaaf9e41
commit 4eb7744111
22 changed files with 2181 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/views/shop/config/components/safe.vue Normal file
View File

@@ -0,0 +1,129 @@
<template>
<div>
<el-form ref="form" :model="form" label-width="120px" label-position="left">
<el-form-item label="操作密码">
<el-input
v-model="form.password"
type="number"
@input="jiantingshuru"
:disabled="disabled"
:placeholder="disabled ? '******' : '请输入操作密码'"
style="width: 200px"
></el-input>
<el-button type="primary" @click="resetting">重置</el-button>
</el-form-item>
<el-form-item label="安全手机号">
{{ form.phone | phoneFilter }}
</el-form-item>
<el-form-item label="验证码">
<el-input
v-model="form.prepareAmount"
placeholder="点击发送"
style="width: 200px"
></el-input>
<el-button type="primary" @click="onSubmit">发送</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitHandle">保存</el-button>
</el-form-item>
</el-form>
<hr />
<el-form ref="form" :model="form" label-width="120px" label-position="left">
<el-form-item label="校验安全密码">
<el-checkbox v-model="form.isReturn">退款</el-checkbox>
<el-checkbox v-model="form.isMemberIn">会员充值</el-checkbox>
<el-checkbox v-model="form.isMemberReturn">会员退款</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitHandles">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import ShopApi from "@/api/account/shop";
export default {
data() {
return {
disabled: true,
form: {},
};
},
mounted() {
this.getinfo();
},
methods: {
jiantingshuru(e) {
this.form.password = e.substr(0, 6);
},
// 获取用户信息
async getinfo() {
const res = await ShopApi.get();
this.form = res;
this.form.isReturn = this.form.isReturn == 1 ? true : false;
this.form.isMemberIn = this.form.isMemberIn == 1 ? true : false;
this.form.isMemberReturn = this.form.isMemberReturn == 1 ? true : false;
},
async submitHandle() {
if (!this.form.prepareAmount) {
this.$message({
message: "请输入验证码",
});
return;
}
if (!this.form.password) {
this.$message({
message: "请输入密码",
});
return;
}
const res = await modfiyUserInfo({
code: this.form.prepareAmount,
pwd: md5(this.form.password),
});
console.log(222);
this.form.prepareAmount = "";
this.form.password = "******";
this.disabled = true;
this.$message({
message: "修改成功",
type: "success",
});
},
async submitHandles() {
const res = await tbShopInfoPUT({
// code: this.form.prepareAmount,
// id: this.form.id,
// status:this.form.status,
...this.form,
isReturn: this.form.isReturn == true ? 1 : 0,
isMemberIn: this.form.isMemberIn == true ? 1 : 0,
isMemberReturn: this.form.isMemberReturn == true ? 1 : 0,
});
this.$message({
message: "修改成功",
type: "success",
});
},
resetting() {
this.form.password = "";
this.disabled = false;
},
async onSubmit() {
const res = await sendMsg();
this.$message({
message: "发送成功",
type: "success",
});
},
},
filters: {
phoneFilter(d) {
let str = d + "";
return str.substr(0, 3) + "***" + str.substr(-4);
},
},
};
</script>

562
src/views/shop/config/components/shopInfo.vue Normal file
View File

@@ -0,0 +1,562 @@
<template>
<div>
<div>
<el-form ref="form" :model="form" :rules="rules" label-width="160px" 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">
<single-image-upload
style="width: 80px; height: 80px"
v-model="form.logo"
></single-image-upload>
</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">
<single-image-upload
style="width: 80px; height: 80px"
v-model="form.shopQrcode"
></single-image-upload>
</div>
</el-form-item>
<el-form-item label="店铺小程序码">
<div class="img_box">
<el-image
:src="form.smallQrcode || img_download_error"
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 value="munchies">快餐版（先支付后下单）</el-radio>
<el-radio value="restaurant">餐饮版（先下单后支付）</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="就餐模式「多选」">
<el-checkbox-group v-model="form.eatModel">
<el-checkbox value="dine-in">堂食自取</el-checkbox>
<el-checkbox value="take-out">允许打包</el-checkbox>
</el-checkbox-group>
</el-form-item>
<!-- <el-form-item label="积分群体">
<el-radio-group v-model="form.consumeColony">
<el-radio label="all">所有</el-radio>
<el-radio label="vip">仅针对会员</el-radio>
</el-radio-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 gutter="6">
<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="place" @click="chooseAddressShow">
选择坐标
</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="营业时间">
<div class="u-flex gap-2" style="width: 50%">
<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>
</div>
</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
class="u-m-l-10"
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.isMemberPrice"
:active-value="1"
::inactive-value="0"
></el-switch>
<!-- <div style="color: #999;">是否允许用户在小程序端支付订单</div> -->
</el-form-item>
<el-form-item label="是否开启会员余额支付">
<el-switch
v-model.trim="form.isAccountPay"
: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-input
type="textarea"
v-model.trim="form.bookingSms"
placeholder="请输入台桌预订短信"
style="width: 500px"
></el-input>
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio :value="1">营业中</el-radio>
<el-radio :value="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>
<ChooseAddress ref="refChooseAddress" @choose="chooseAddressConfirm"></ChooseAddress>
<el-dialog
v-model="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>
<template #tip>
<div style="display: block" class="el-upload__tip">请勿上传违法文件，且文件不超过15M</div>
</template>
</el-upload>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="doSubmit">确认</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
import { ElMessage } from "element-plus";
import QRCode from "qrcode";
import img_download_error from "@/assets/images/img_download_error.png";
import ShopApi from "@/api/account/shop";
// import { tbShopInfo, tbShopInfoPut } from "@/api/user";
// import { geocode } from "@/api/shop";
export default {
data() {
return {
img_download_error,
showUpload: false,
uploadIndex: 1,
startTime: "",
endTime: "",
formLoading: false,
form: {
eatModel: [],
paymentQrcode: "",
consumeColony: "all",
},
rules: {
shopName: [
{
required: true,
message: " ",
trigger: "blur",
},
],
phone: [
{
required: true,
message: " ",
trigger: "blur",
},
],
settleTime: [
{
required: true,
message: " ",
trigger: "blur",
},
],
},
fileList: [],
files: [],
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: {
chooseAddressConfirm(e) {
console.log(e);
this.$refs.refChooseAddress.close();
this.selectLocationHandle(e);
},
chooseAddressShow() {
this.$refs.refChooseAddress.open();
},
// 下载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.location.lng;
this.form.lat = item.location.lat;
this.form.address = item.address;
const position = `${item.location.lng},${item.location.lat}`;
this.form.provinces = item.pname;
this.form.cities = item.cityname;
this.form.districts = item.adname;
},
async tbShopInfo() {
try {
const shopId = localStorage.getItem("shopId");
const res = await ShopApi.get();
this.form = { ...res, eatModel: res.eatModel.split(",") };
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 ShopApi.edit({
...this.form,
eatModel: this.form.eatModel.join(","),
});
this.formLoading = false;
ElMessage.success({
title: "成功",
message: "提交成功",
});
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>

27
src/views/shop/config/index.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div class="app-container">
<div class="u-m-10 bg-fff u-p-20">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="店铺信息" name="1"></el-tab-pane>
<el-tab-pane label="安全设置" name="4"></el-tab-pane>
<el-tab-pane label="跳转小程序" name="6" v-if="shopId == 1"></el-tab-pane>
<el-tab-pane label="通知中心" name="7"></el-tab-pane>
</el-tabs>
<shopInfo v-if="activeName == 1" />
<safe v-if="activeName == 4" />
<!-- <goxcx v-if="activeName == 6" />
<notifications v-if="activeName == 7" /> -->
</div>
</div>
</template>
<script setup>
import shopInfo from "./components/shopInfo.vue";
import safe from "./components/safe.vue";
const state = reactive({
activeName: "1",
shopId: localStorage.getItem("shopId"),
});
const { activeName, shopId } = toRefs(state);
</script>