店铺详情修改

2024-09-18 16:27:53 +08:00
parent 4a6de0a22b
commit d13405ee3f
7 changed files with 983 additions and 10 deletions
--- a/pages/shopSetUp/index.vue
+++ b/pages/shopSetUp/index.vue
@@ -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:''"></up-avatar>
+			<view class="file" @tap="chooseAndUploadAvatar('coverImg')"></view>
+      </view>
+    </view>
+    <view class="page-cell m" @tap="updateValue('商户名称','shopName',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="updateValue('商户电话','phone',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="updateValue('桌位费','tableFee',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><up-icon name="arrow-right" color="#999999" size="15"></up-icon>
+		</view>
+	</view>
+	<view class="page-cell" @tap="go.to('PAGES_SHOP_QRCODE')">
+		<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">
+					<up-image class="index_bg" v-if="'index_bg' == vdata.extendInfo.autokey"  :src="vdata.extendInfo.value"></up-image>
+					<up-image class="my_bg" v-if="'my_bg' == vdata.extendInfo.autokey"  :src="vdata.extendInfo.value"></up-image>
+					<up-image class="bg" 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>
+					<up-image class="member_bg" v-if="'member_bg' == vdata.extendInfo.autokey"  :src="vdata.extendInfo.value"></up-image>
+					<up-image class="shopinfo_bg" v-if="'shopinfo_bg' == vdata.extendInfo.autokey"  :src="vdata.extendInfo.value"></up-image>
+					<view class="shopinfo_bg_f" v-if="'shopinfo_bg' == vdata.extendInfo.autokey"></view>
+					<up-image class="bg" :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/'+vdata.extendInfo.autokey+'.png'" ></up-image>
+				</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>
+  
+  <!-- 弹层 -->
+  <uni-popup ref="popupRef" type="dialog">
+    <uni-popup-dialog :before-close="true" mode="input" :title="`请输入${vdata.label}`" @confirm="confirmFunc" @close="popupRef.close()">
+      <template #default>
+        <uni-forms ref="formRef">
+          <uni-forms-item label="" name="singleInputVal">
+            <uni-easyinput :inputBorder="false" :type="vdata.inputType" v-model="vdata.inputValue" :placeholder="`最多输入${vdata.maxLength}个字`" :maxlength="vdata.maxLength" />
+          </uni-forms-item>
+        </uni-forms>
+      </template>
+    </uni-popup-dialog>
+  </uni-popup>
+  
+</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'
+
+const jeepayPopupInputRef = ref()
+const popupRef = ref()
+const uploadImg = ref()
+const phone = ref(null)
+const vdata = reactive({
+	shopInfo: {},
+	extendList: [],
+	extendIndex: 0,
+	extendInfo: {},
+	dineIn: false,
+	takeout: false,
+	isTableFee: false,
+	label: "",
+	type: "",
+	inputValue: "",
+	inputType: "text",
+	maxLength: '999',
+
+})
+
+onMounted(() => {
+	shopExtend();
+})
+
+onShow(() => {
+	shopInfo();
+})
+
+/**
+ * 获取店铺信息
+ */
+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 updateShopInfo = (params,type) => {
+	editShopInfo(params).then((res) => {
+		if (type && type == "input") { 
+			console.log(vdata.type)
+			switch ( vdata.type ){
+				case "shopName":
+					vdata.shopInfo.shopName = vdata.inputValue;
+					break;
+				case "phone":
+					vdata.shopInfo.phone = vdata.inputValue;
+					break;
+				case "tableFee":
+					vdata.shopInfo.tableFee = vdata.inputValue;
+					break;
+			}
+		}
+		popupRef.value.close()
+	})
+}
+
+/**
+ * 修改
+ */
+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 updateValue = ( label , type , value) => {
+	vdata.label = label;
+	vdata.type = type;
+	vdata.inputValue = value;
+	switch ( vdata.type ){
+		case "shopName":
+			vdata.inputType = 'text';
+			vdata.maxLength = 999;
+			break;
+		case "phone":
+			vdata.inputType = 'tel';
+			vdata.maxLength = 12;
+			break;
+		case "tableFee":
+			vdata.inputType = 'number';
+			vdata.maxLength = 12;
+			break;
+	}
+	popupRef.value.open()
+}
+
+/**
+ * 确认修改
+ */
+let confirmFunc = () => {
+	let params = {
+		id : vdata.shopInfo.id,
+	}
+	switch ( vdata.type ){
+		case "shopName":
+			params.shopName = vdata.inputValue;
+			break;
+		case "phone":
+			params.phone = vdata.inputValue;
+			break;
+		case "tableFee":
+			params.tableFee = vdata.inputValue;
+			break;
+	}
+	updateShopInfo(params,'input');
+}
+
+/**
+ * 是否免桌位费
+ */
+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 "isUseVip":
+			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 = () => {
+	// 本地 测试选择
+	// return test();
+	// 打开地图 && 获取省市县
+	uni.chooseLocation().then((res) => {
+		console.log(res);
+		vdata.shopInfo.lng = res.longitude.toFixed(6); // IOS 小程序中：  经纬度12位。
+		vdata.shopInfo.lat = res.latitude.toFixed(6);
+		vdata.shopInfo.address = res.name;
+		switchChange('address')
+	});
+}
+
+
+</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;
+				.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>