同步代码
This commit is contained in:
GaoHao
567
pages/shopSetUp/index.vue
Normal file
567
pages/shopSetUp/index.vue
Normal file
@@ -0,0 +1,567 @@
|
||||
<template>
|
||||
<view class="page-wrapper">
|
||||
<view class="page-cell">
|
||||
<view class="label">头像</view>
|
||||
<view class="right" @tap="uploadImg.preview()">
|
||||
<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.isUseVip" size="20" :inactiveValue="0" :activeValue="1" activeColor="#0FC161" @change="switchChange('isUseVip')"></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 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"
|
||||
@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="page-cell column" >
|
||||
<view class="label">店铺图片</view>
|
||||
<view class="extendList">
|
||||
<view class="extendTab">
|
||||
<view class="extendTab_item"
|
||||
v-for="(item,index) in vdata.extendList" :key="index"
|
||||
:class="{'active':vdata.extendIndex==index}"
|
||||
@click="extendTabClick(item,index)"
|
||||
>{{item.title}}</view>
|
||||
</view>
|
||||
<view class="extend_content">
|
||||
<view class="preview">
|
||||
<view class="index_bg"><up-image v-if="'index_bg' == vdata.extendInfo.autokey" :src="vdata.extendInfo.value"></up-image></view>
|
||||
<view class="my_bg"><up-image v-if="'my_bg' == vdata.extendInfo.autokey" :src="vdata.extendInfo.value"></up-image></view>
|
||||
<view class="bg"><up-image v-if="'member_bg' == vdata.extendInfo.autokey" :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/'+vdata.extendInfo.autokey+'1.png'" ></up-image></view>
|
||||
<view class="member_bg"><up-image v-if="'member_bg' == vdata.extendInfo.autokey" :src="vdata.extendInfo.value"></up-image></view>
|
||||
<view class="shopinfo_bg"><up-image v-if="'shopinfo_bg' == vdata.extendInfo.autokey" :src="vdata.extendInfo.value"></up-image></view>
|
||||
<view class="shopinfo_bg_f" v-if="'shopinfo_bg' == vdata.extendInfo.autokey"></view>
|
||||
<view class="bg"><up-image v-if="vdata.extendInfo.autokey" :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/'+vdata.extendInfo.autokey+'.png'" ></up-image></view>
|
||||
</view>
|
||||
<view class="extend_img">
|
||||
<view class="extend_title">{{vdata.extendInfo.title}}背景图片</view>
|
||||
<view class="fileUp">
|
||||
<up-image :src="vdata.extendInfo.value"></up-image>
|
||||
<view class="file" @tap="chooseAndUploadAvatar('extendUp')"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</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 { getShopInfo , editShopInfo, getShopExtend, editShopExtend } from '@/http/yskApi/shop.js'
|
||||
import storageManage from '@/commons/utils/storageManage.js'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import infoBox from '@/commons/utils/infoBox.js'
|
||||
import { $uploadFile } from '@/http/yskApi/file.js'
|
||||
import { forIn } from 'lodash';
|
||||
|
||||
const uploadImg = ref()
|
||||
const phone = ref(null)
|
||||
const vdata = reactive({
|
||||
shopInfo: {
|
||||
status: 2,
|
||||
isUseVip: 0,
|
||||
},
|
||||
extendList: [],
|
||||
registerTypeList: [
|
||||
{name: "先付费", value: "munchies"},
|
||||
{name: "后付费", value: "restaurant"}
|
||||
],
|
||||
extendIndex: 0,
|
||||
extendInfo: {},
|
||||
dineIn: false,
|
||||
takeout: false,
|
||||
isTableFee: false,
|
||||
label: "",
|
||||
type: "",
|
||||
inputValue: "",
|
||||
inputType: "text",
|
||||
maxLength: '999',
|
||||
|
||||
})
|
||||
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(storageManage.shopId()).then((res) => {
|
||||
vdata.isTableFee = res.isTableFee == 1 ? true: false;
|
||||
if (res.eatModel.join(",").indexOf("dine-in") != -1) {
|
||||
vdata.dineIn = true
|
||||
}
|
||||
if (res.eatModel.join(",").indexOf("take-out") != -1) {
|
||||
vdata.takeout = true
|
||||
}
|
||||
vdata.shopInfo = res;
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取店铺图片
|
||||
*/
|
||||
let shopExtend = () => {
|
||||
getShopExtend({
|
||||
autokey: "index_bg",
|
||||
}).then((res) => {
|
||||
if ( res.content && res.content.length > 0 ) {
|
||||
vdata.extendList = res.content;
|
||||
vdata.extendIndex = 0;
|
||||
vdata.extendInfo = res.content[0];
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 付费模式修改
|
||||
*/
|
||||
let radioChange = (n) => {
|
||||
console.log('radioChange', n);
|
||||
let params = {
|
||||
id : vdata.shopInfo.id,
|
||||
registerType : n,
|
||||
}
|
||||
updateShopInfo(params)
|
||||
};
|
||||
|
||||
/**
|
||||
* 修改
|
||||
*/
|
||||
let updateShopInfo = (params,type) => {
|
||||
editShopInfo(params).then((res) => {
|
||||
if (type && type == "input") {
|
||||
vdata.shopInfo[vdata.type] = vdata.inputValue;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改店铺图片
|
||||
*/
|
||||
let updateShopExtend = () => {
|
||||
editShopExtend(vdata.extendInfo).then((res) => {
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 上传头像
|
||||
*/
|
||||
let chooseAndUploadAvatar = ( type ) => {
|
||||
// 选择图片
|
||||
uni.chooseImage({
|
||||
count: 1, // 默认为1，只选择一张图片
|
||||
sizeType: ['original', 'compressed'], // 图片质量，原图或压缩
|
||||
sourceType: ['album', 'camera'], // 图片来源，相册或相机
|
||||
success: (res) => {
|
||||
let file = res.tempFiles[0];
|
||||
console.log(res)
|
||||
$uploadFile(file).then(res => {
|
||||
console.log(res);
|
||||
if ( type == "coverImg") {
|
||||
vdata.shopInfo.coverImg = res.data[0];
|
||||
let params = {
|
||||
id : vdata.shopInfo.id,
|
||||
coverImg : vdata.shopInfo.coverImg,
|
||||
}
|
||||
updateShopInfo(params)
|
||||
}
|
||||
if ( type == "extendUp") {
|
||||
vdata.extendInfo.value = res.data[0];
|
||||
updateShopExtend()
|
||||
}
|
||||
|
||||
}).catch(res=>{
|
||||
console.log(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');
|
||||
}
|
||||
break;
|
||||
case "isUseVip":
|
||||
params.isUseVip = vdata.shopInfo.isUseVip;
|
||||
break;
|
||||
case "isTableFee":
|
||||
if ( vdata.isTableFee ) {
|
||||
params.isTableFee = 1;
|
||||
} else {
|
||||
params.isTableFee = 0;
|
||||
}
|
||||
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: space-around;
|
||||
.extendTab_item{
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 4rpx;
|
||||
border: 2rpx solid #E5E5E5;
|
||||
}
|
||||
.active{
|
||||
background: #318AFE;
|
||||
border: 2rpx solid #318AFE;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.extend_content{
|
||||
display: flex;
|
||||
margin-top: 32rpx;
|
||||
.preview{
|
||||
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: 134rpx!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;
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user