696 lines
17 KiB
Vue
696 lines
17 KiB
Vue
<template>
|
||
<view class="page-wrapper">
|
||
<view class="page-cell">
|
||
<view class="label">头像</view>
|
||
<view class="right">
|
||
<up-avatar
|
||
class="fileImg"
|
||
:src="vdata.shopInfo.coverImg ? vdata.shopInfo.coverImg : ''"
|
||
mode="aspectFill"
|
||
></up-avatar>
|
||
<view class="file" @tap="chooseAndUploadAvatar('coverImg')"></view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="page-cell m" @tap="updateValue('商户名称','shopName',vdata.shopInfo.shopName)"> -->
|
||
<view
|
||
class="page-cell m"
|
||
@tap="
|
||
go.to('PAGES_SHOP_EDITVAL', {
|
||
name: 'shopName',
|
||
value: vdata.shopInfo.shopName,
|
||
})
|
||
"
|
||
>
|
||
<view class="label">商户名称</view>
|
||
<view class="right">
|
||
<view>{{ vdata.shopInfo.shopName }}</view>
|
||
<up-icon name="arrow-right" color="#999999" size="15"></up-icon>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="page-cell m"
|
||
@tap="
|
||
go.to('PAGES_SHOP_EDITVAL', {
|
||
name: 'phone',
|
||
value: vdata.shopInfo.phone,
|
||
})
|
||
"
|
||
>
|
||
<view class="label">商户电话</view>
|
||
<view class="right">
|
||
<view>{{ vdata.shopInfo.phone }}</view>
|
||
<up-icon name="arrow-right" color="#999999" size="15"></up-icon>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="page-cell m" >
|
||
<view class="label">到期时间</view>
|
||
<view class="right"><view>{{ vdata.shopInfo.realname }}</view><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
|
||
</view> -->
|
||
<view class="page-cell m">
|
||
<view class="label">营业状态</view>
|
||
<view class="right">
|
||
<up-switch
|
||
v-model="vdata.shopInfo.status"
|
||
size="20"
|
||
:inactiveValue="2"
|
||
:activeValue="1"
|
||
activeColor="#0FC161"
|
||
@change="switchChange('status')"
|
||
></up-switch>
|
||
</view>
|
||
</view>
|
||
<view class="page-cell m" @tap="showMap">
|
||
<view class="label">门店详细地址</view>
|
||
<view class="right">
|
||
<view>{{ vdata.shopInfo.address }}</view>
|
||
<up-icon name="arrow-right" color="#999999" size="15"></up-icon>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="page-cell">
|
||
<view class="label">堂食功能</view>
|
||
<view class="right"><up-switch v-model="vdata.dineIn" size="20" activeColor="#0FC161" @change="switchChange('eatModel')"></up-switch></view>
|
||
</view> -->
|
||
<view class="page-cell">
|
||
<view class="label">允许打包</view>
|
||
<view class="right"
|
||
><up-switch
|
||
v-model="vdata.takeout"
|
||
size="20"
|
||
activeColor="#0FC161"
|
||
@change="switchChange('eatModel')"
|
||
></up-switch
|
||
></view>
|
||
</view>
|
||
<view class="page-cell m">
|
||
<view class="label">是否开启会员余额支付</view>
|
||
<view class="right">
|
||
<up-switch
|
||
v-model="vdata.shopInfo.isAccountPay"
|
||
size="20"
|
||
:inactiveValue="0"
|
||
:activeValue="1"
|
||
activeColor="#0FC161"
|
||
@change="switchChange('isAccountPay')"
|
||
></up-switch>
|
||
</view>
|
||
</view>
|
||
<view class="page-cell m" style="display: block">
|
||
<view class="u-flex u-row-between">
|
||
<view class="label">点餐电子围栏</view>
|
||
<view class="right"
|
||
><up-switch
|
||
v-model="vdata.shopInfo.isOrderFence"
|
||
size="20"
|
||
:inactiveValue="0"
|
||
:activeValue="1"
|
||
activeColor="#0FC161"
|
||
@change="switchChange('isOrderFence')"
|
||
></up-switch
|
||
></view>
|
||
</view>
|
||
<view class="u-m-t-6 color-666 u-font-24"
|
||
>开启后，用户只能在店铺附近两公里范围内点餐</view
|
||
>
|
||
</view>
|
||
|
||
<!-- <view class="page-cell m">
|
||
<view class="label">是否开启会员价支付</view>
|
||
<view class="right">
|
||
<up-switch
|
||
v-model="vdata.shopInfo.isMemberPrice"
|
||
size="20"
|
||
:inactiveValue="0"
|
||
:activeValue="1"
|
||
activeColor="#0FC161"
|
||
@change="switchChange('isMemberPrice')"
|
||
></up-switch>
|
||
</view>
|
||
</view> -->
|
||
<view class="page-cell">
|
||
<view class="label">
|
||
桌位费
|
||
<view
|
||
v-if="!vdata.isTableFee"
|
||
class="tableFee"
|
||
@tap="
|
||
go.to('PAGES_SHOP_EDITVAL', {
|
||
name: 'tableFee',
|
||
value: vdata.shopInfo.tableFee,
|
||
})
|
||
"
|
||
>
|
||
{{ vdata.shopInfo.tableFee }}
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view>
|
||
<up-checkbox-group>
|
||
<up-checkbox
|
||
label="免桌位费"
|
||
v-model:checked="vdata.isTableFee"
|
||
activeColor="#0FC161"
|
||
shape="circle"
|
||
@change="isTableFeeChange"
|
||
></up-checkbox>
|
||
</up-checkbox-group>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="page-cell">
|
||
<view class="label">台桌清理类型</view>
|
||
<view class="right">
|
||
<up-radio-group v-model="vdata.shopInfo.tableClearType" placement="row" @change="tableClearChange">
|
||
<up-radio label="自动" name="auto" :customStyle="{ marginRight: '10px' }" activeColor="#0FC161"></up-radio>
|
||
<up-radio label="手动" name="hand" :customStyle="{ marginRight: '10px' }" activeColor="#0FC161"></up-radio>
|
||
</up-radio-group>
|
||
</view>
|
||
</view>
|
||
<view class="page-cell">
|
||
<view class="label">
|
||
自动清台时间
|
||
</view>
|
||
<view class="right">
|
||
|
||
</view>
|
||
</view> -->
|
||
<view class="page-cell m">
|
||
<view class="label">付费模式</view>
|
||
<view class="right">
|
||
<up-radio-group v-model="vdata.shopInfo.registerType" placement="row">
|
||
<up-radio
|
||
:customStyle="{ marginRight: '10px' }"
|
||
v-for="(item, index) in vdata.registerTypeList"
|
||
:key="index"
|
||
:label="item.name"
|
||
:name="item.value"
|
||
activeColor="#0FC161"
|
||
@change="radioChange"
|
||
></up-radio>
|
||
</up-radio-group>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="page-cell"
|
||
@tap="
|
||
go.to('PAGES_SHOP_QRCODE', {
|
||
paymentQrcode: vdata.shopInfo.paymentQrcode,
|
||
})
|
||
"
|
||
>
|
||
<view class="label">店铺收款码</view>
|
||
<view class="right"
|
||
><up-icon name="arrow-right" color="#999999" size="15"></up-icon
|
||
></view>
|
||
</view>
|
||
|
||
<!-- <view class="cutShop" @tap="go.to('PAGES_SHOP_LIST')">切换门店</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted } from "vue";
|
||
import { onShow } from "@dcloudio/uni-app";
|
||
import go from "@/commons/utils/go.js";
|
||
import { uploadFile } from "@/http/api/index.js";
|
||
import {
|
||
getShopInfo,
|
||
editShopInfo,
|
||
getShopExtend,
|
||
editShopExtend,
|
||
} from "@/http/api/shop.js";
|
||
|
||
const vdata = reactive({
|
||
shopInfo: {
|
||
status: 2,
|
||
isAccountPay: 0,
|
||
isMemberPrice: 0,
|
||
},
|
||
extendList: [],
|
||
registerTypeList: [
|
||
{ name: "先付费", value: "before" },
|
||
{ name: "后付费", value: "after" },
|
||
],
|
||
extendIndex: 0,
|
||
extendInfo: {},
|
||
dineIn: false,
|
||
takeout: false,
|
||
isTableFee: false,
|
||
label: "",
|
||
type: "",
|
||
inputValue: "",
|
||
});
|
||
onMounted(() => {
|
||
shopExtend();
|
||
});
|
||
|
||
onShow(() => {
|
||
shopInfo();
|
||
uni.$on("refreshPreviousPage", (params) => {
|
||
// 这里执行刷新数据的操作，例如重新调用API获取数据
|
||
refreshData(params);
|
||
});
|
||
});
|
||
|
||
/**
|
||
* 输入内容修改
|
||
*/
|
||
let refreshData = (e) => {
|
||
let params = {
|
||
id: vdata.shopInfo.id,
|
||
};
|
||
params[e.name] = e.value;
|
||
vdata.type = e.name;
|
||
vdata.inputValue = e.value;
|
||
updateShopInfo(params, "input");
|
||
};
|
||
|
||
/**
|
||
* 获取店铺信息
|
||
*/
|
||
const shopInfo = () => {
|
||
getShopInfo({ id: uni.getStorageSync("shopInfo").id }).then((res) => {
|
||
vdata.isTableFee = res.isTableFee == 1 ? true : false;
|
||
if (res.eatModel.split(",").indexOf("dine-in") != -1) {
|
||
vdata.dineIn = true;
|
||
}
|
||
if (res.eatModel.split(",").indexOf("take-out") != -1) {
|
||
vdata.takeout = true;
|
||
}
|
||
vdata.shopInfo = res;
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 获取店铺图片
|
||
*/
|
||
let shopExtend = () => {
|
||
getShopExtend().then((res) => {
|
||
if (res && res.length > 0) {
|
||
vdata.extendList = res;
|
||
vdata.extendIndex = 0;
|
||
vdata.extendInfo = res[0];
|
||
}
|
||
});
|
||
};
|
||
|
||
// 台桌清理模式修改
|
||
function tableClearChange(n) {
|
||
let params = {
|
||
id: vdata.shopInfo.id,
|
||
tableClearType: n,
|
||
};
|
||
updateShopInfo(params);
|
||
}
|
||
|
||
/**
|
||
* 付费模式修改
|
||
*/
|
||
let radioChange = (n) => {
|
||
let params = {
|
||
id: vdata.shopInfo.id,
|
||
registerType: n,
|
||
};
|
||
updateShopInfo(params);
|
||
};
|
||
|
||
/**
|
||
* 修改
|
||
*/
|
||
let updateShopInfo = (params, type) => {
|
||
editShopInfo(params).then((res) => {
|
||
if (res) {
|
||
uni.showToast({
|
||
title: "修改成功",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "修改失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
if (type && type == "input") {
|
||
vdata.shopInfo[vdata.type] = vdata.inputValue;
|
||
}
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 修改店铺图片
|
||
*/
|
||
let updateShopExtend = () => {
|
||
editShopExtend({
|
||
autokey: vdata.extendInfo.autoKey,
|
||
value: vdata.extendInfo.value,
|
||
}).then((res) => {});
|
||
};
|
||
|
||
/**
|
||
* 上传头像
|
||
*/
|
||
let chooseAndUploadAvatar = (type) => {
|
||
// 选择图片
|
||
uni.chooseImage({
|
||
count: 1, // 默认为1，只选择一张图片
|
||
sizeType: ["original", "compressed"], // 图片质量，原图或压缩
|
||
sourceType: ["album", "camera"], // 图片来源，相册或相机
|
||
success: (res) => {
|
||
let file = res.tempFiles[0];
|
||
uploadFile(file)
|
||
.then((res) => {
|
||
if (type == "coverImg") {
|
||
vdata.shopInfo.coverImg = res;
|
||
let params = {
|
||
id: vdata.shopInfo.id,
|
||
coverImg: vdata.shopInfo.coverImg,
|
||
};
|
||
updateShopInfo(params);
|
||
}
|
||
if (type == "extendUp") {
|
||
vdata.extendInfo.value = res;
|
||
updateShopExtend();
|
||
}
|
||
})
|
||
.catch((res) => {
|
||
if (res.errMsg) {
|
||
uni.showToast({
|
||
title: "图片大小超出限制",
|
||
icon: "error",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
fail: (chooseImageError) => {
|
||
// 选择图片失败处理逻辑
|
||
console.log("choose image fail:", chooseImageError);
|
||
},
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 店铺图片TAB切换
|
||
*/
|
||
let extendTabClick = (item, index) => {
|
||
vdata.extendInfo = item;
|
||
vdata.extendIndex = index;
|
||
};
|
||
|
||
/**
|
||
* 是否免桌位费
|
||
*/
|
||
let isTableFeeChange = (e) => {
|
||
if (e) {
|
||
vdata.isTableFee = true;
|
||
} else {
|
||
vdata.isTableFee = false;
|
||
}
|
||
switchChange("isTableFee");
|
||
};
|
||
|
||
/**
|
||
* 修改
|
||
*/
|
||
let switchChange = (type) => {
|
||
let params = {
|
||
id: vdata.shopInfo.id,
|
||
};
|
||
switch (type) {
|
||
case "address":
|
||
params.lng = vdata.shopInfo.lng;
|
||
params.lat = vdata.shopInfo.lat;
|
||
params.address = vdata.shopInfo.address;
|
||
break;
|
||
case "status":
|
||
params.status = vdata.shopInfo.status;
|
||
break;
|
||
case "eatModel":
|
||
params.eatModel = [];
|
||
if (vdata.dineIn) {
|
||
params.eatModel.push("dine-in");
|
||
}
|
||
if (vdata.takeout) {
|
||
params.eatModel.push("take-out");
|
||
}
|
||
params.eatModel = params.eatModel.join(",");
|
||
break;
|
||
case "isAccountPay":
|
||
params.isAccountPay = vdata.shopInfo.isAccountPay;
|
||
break;
|
||
case "isMemberPrice":
|
||
params.isMemberPrice = vdata.shopInfo.isMemberPrice;
|
||
break;
|
||
case "isTableFee":
|
||
if (vdata.isTableFee) {
|
||
params.isTableFee = 1;
|
||
} else {
|
||
params.isTableFee = 0;
|
||
}
|
||
break;
|
||
case "isOrderFence":
|
||
params.isOrderFence = vdata.shopInfo.isOrderFence;
|
||
break;
|
||
}
|
||
updateShopInfo(params);
|
||
};
|
||
|
||
/**
|
||
* 选择地图
|
||
*/
|
||
let showMap = () => {
|
||
// 本地 测试选择
|
||
// 打开地图
|
||
|
||
uni.chooseLocation({
|
||
// type: 'wgs84',
|
||
success: function (res) {
|
||
vdata.shopInfo.lng = res.longitude.toFixed(6); // IOS 小程序中： 经纬度12位。
|
||
vdata.shopInfo.lat = res.latitude.toFixed(6);
|
||
vdata.shopInfo.address = res.name;
|
||
switchChange("address");
|
||
},
|
||
fail: function (err) {
|
||
console.log(err);
|
||
// uni.showToast({
|
||
// title:err,
|
||
// icon:'error'
|
||
// })
|
||
},
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-wrapper {
|
||
background-color: #f8f8f8;
|
||
padding-bottom: 32rpx;
|
||
.page-cell {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 32rpx 28rpx;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
.label {
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
margin-right: 20rpx;
|
||
.tableFee {
|
||
width: 186rpx;
|
||
height: 54rpx;
|
||
line-height: 54rpx;
|
||
margin-left: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
border: 2rpx solid #e5e5e5;
|
||
text-align: left;
|
||
padding: 0 18rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.extendList {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 24rpx;
|
||
.extendTab {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
.extendTab_item {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 4rpx;
|
||
border: 2rpx solid #e5e5e5;
|
||
margin-right: 20rpx;
|
||
}
|
||
.active {
|
||
background: #318afe;
|
||
border: 2rpx solid #318afe;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.extend_content {
|
||
display: flex;
|
||
margin-top: 32rpx;
|
||
.preview {
|
||
min-width: 146rpx;
|
||
height: 342rpx;
|
||
position: relative;
|
||
margin-right: 32rpx;
|
||
background-color: #f7f7f7;
|
||
::v-deep .bg,
|
||
::v-deep .bg .u-image,
|
||
::v-deep .bg .u-image__image {
|
||
width: 146rpx !important;
|
||
height: 342rpx !important;
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
|
||
::v-deep .index_bg .u-image,
|
||
::v-deep .index_bg .u-image__image {
|
||
width: 146rpx !important;
|
||
height: 242rpx !important;
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
|
||
::v-deep .my_bg .u-image,
|
||
::v-deep .my_bg .u-image__image {
|
||
width: 146rpx !important;
|
||
height: 90rpx !important;
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
|
||
::v-deep .member_bg .u-image,
|
||
::v-deep .member_bg .u-image__image {
|
||
width: 34rpx !important;
|
||
height: 63rpx !important;
|
||
position: absolute;
|
||
top: 22rpx;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
border-radius: 5rpx !important;
|
||
}
|
||
|
||
::v-deep .shopinfo_bg .u-image,
|
||
::v-deep .shopinfo_bg .u-image__image {
|
||
width: 146rpx !important;
|
||
height: 50rpx !important;
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
::v-deep .bg.ticket_logo,
|
||
::v-deep .bg.ticket_logo .u-image,
|
||
::v-deep .bg.ticket_logo .u-image__image {
|
||
width: 359rpx !important;
|
||
height: 232rpx !important;
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
::v-deep .ticket_logo.img .u-image,
|
||
::v-deep .ticket_logo.img .u-image__image {
|
||
width: 146rpx !important;
|
||
height: 50rpx !important;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 10rpx;
|
||
}
|
||
|
||
.shopinfo_bg_f {
|
||
width: 146rpx;
|
||
height: 290rpx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
.extend_img {
|
||
display: flex;
|
||
flex-direction: column;
|
||
.extend_title {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.fileUp {
|
||
width: 148rpx;
|
||
height: 148rpx;
|
||
position: relative;
|
||
.file {
|
||
width: 148rpx;
|
||
height: 148rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
}
|
||
::v-deep .u-image,
|
||
::v-deep .u-image__image {
|
||
width: 148rpx !important;
|
||
height: 148rpx !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.column {
|
||
flex-direction: column;
|
||
.label {
|
||
align-self: flex-start;
|
||
}
|
||
}
|
||
.m {
|
||
margin-bottom: 12rpx;
|
||
}
|
||
.cutShop {
|
||
width: 530rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background: #318afe;
|
||
border-radius: 56rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
margin: 48rpx auto 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
position: relative;
|
||
|
||
.file {
|
||
width: 112rpx;
|
||
height: 112rpx;
|
||
line-height: 112rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
}
|
||
|
||
.fileImg {
|
||
width: 112rpx !important;
|
||
height: 112rpx !important;
|
||
::v-deep .u-avatar__image {
|
||
width: 112rpx !important;
|
||
height: 112rpx !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|