智能柜扫码开门之前的商品列表查看页

src/pages.json

@@ -340,6 +340,13 @@
 			"pages": [
 				{
 					"path": "buy",
+					"style": {
+						"navigationBarTitleText": "购买",
+						"disableScroll": true
+					}
+				},
+				{
+					"path": "openDoor",
 					"style": {
 						"navigationBarTitleText": "选择支付方式",
 						"disableScroll": true
@@ -524,13 +531,13 @@
 				"iconPath": "",
 				"selectedIconPath": ""
 			}
-//		,
-//			{
-//				"pagePath": "pages/integrated/index",
-//				"text": "综合服务",
-//				"iconPath": "static/tabbar/integrated.png",
-//				"selectedIconPath": "static/tabbar/integrated-select.png"
-//			}
+			//		,
+			//			{
+			//				"pagePath": "pages/integrated/index",
+			//				"text": "综合服务",
+			//				"iconPath": "static/tabbar/integrated.png",
+			//				"selectedIconPath": "static/tabbar/integrated-select.png"
+			//			}
 		]
 	}
 }

src/pages/cabinet/buy.vue

@@ -1,93 +1,47 @@
 <template>
-	<crud-layout bg="/static/page/blue-bg.png">
-		<view class="bg-white rounded-20rpx my-20rpx font-bold">
-			<z-tabs
-				:list="[
-					{ name: '浙政钉支付', value: 1 },
-					{ name: '支付宝支付', value: 2, disabled: true },
-				]"
-				bar-width="150"
-				:active-style="{
-					fontSize: '30rpx',
-				}"
-				:inactive-style="{
-					fontSize: '30rpx',
-				}"
-				@change="payMethodTabChange"
-			/>
+	<crud-layout mainIsScroll bg="/static/page/blue-bg.png">
+		<view class="w-full flex flex-wrap p-2">
+			<view class="w-1/3 h-340rpx text-center p-1" v-for="(item, index) in state.cabinetList" :key="index">
+				<view class="bg-transparent rounded-lg overflow-hidden">
+					<image
+						class="w-180rpx h-180rpx rounded-md object-cover"
+						:src="item.spuDetail.pic"
+						@click.stop="hooks.usePreviewImage(item.spuDetail.pic)"
+					/>
+					<view class="text-sm">{{ item.spuDetail.name }}</view>
+					<view class="text-red-500 text-sm">¥{{ displayPrice(item.spuDetail.price) }}</view>
+				</view>
+			</view>
 		</view>
-
-		<tm-sheet v-if="!state.isUseDoor && state.isUseDoorTip" borderWidth="2" :margin="[0, 20]" padding="10" color="#0094FF22">
-			<view class="flex items-center justify-between pl-4">
-				<tm-text font-size="30 " color="#0779FD">{{ state.isUseDoorTip }}</tm-text>
-				<tm-button size="s" @click="goRecharge">去充值</tm-button>
+		<view class="open-door-btn-wrapper fixed bottom-40 left-0 right-0 flex justify-center items-center">
+			<view class="ripple-container">
+				<view class="ripple"></view>
+				<view class="ripple"></view>
+				<view class="ripple"></view>
 			</view>
-		</tm-sheet>
-
-		<tm-sheet margin="0">
-			<tm-text font-size="30">购买须知：</tm-text>
-			<view class="flex items-center p-10rpx">
-				<image class="w-50rpx h-50rpx mr-3" src="@/static/page/印章.svg" />
-				<view>
-					<view class="second-text-26">第一步</view>
-					<tm-text font-size="28">购买需消费钱包余额大于100元</tm-text>
-				</view>
+			<view
+				class="open-door-btn w-200rpx h-200rpx rounded-full bg-#0779FD77 overflow-hidden flex flex-col justify-center items-center shadow-lg"
+				@click="goOpenDoor"
+			>
+				<image class="w-80rpx h-80rpx" src="@/static/page/开门.svg" />
+				<text class="font-bold">开 门</text>
 			</view>
-			<view class="flex items-center p-10rpx">
-				<image class="w-50rpx h-50rpx mr-3" src="@/static/page/开门.svg" />
-				<view>
-					<view class="second-text-26">第二步</view>
-					<tm-text font-size="28">开门之后选取商品并关门</tm-text>
-				</view>
-			</view>
-			<view class="flex items-center p-10rpx">
-				<image class="w-50rpx h-50rpx mr-3" src="@/static/page/支付.svg" />
-				<view>
-					<view class="second-text-26">第三步</view>
-					<tm-text font-size="28">关门后自动结算</tm-text>
-				</view>
-			</view>
-		</tm-sheet>
-
-		<template #main-bottom>
-			<view class="m-30rpx">
-				<tm-button block @click="openDoor" :disabled="!state.isUseDoor">开 门</tm-button>
-			</view>
-		</template>
-
-		<tm-modal
-			v-model:show="state.show"
-			:overlayClick="false"
-			title="你是否同意授权"
-			position="bottom"
-			:showCancel="true"
-			height="800rpx"
-			cancelText="拒绝"
-			confirmText="同意"
-			@confirm="appAuthHardDoor(1)"
-			@cancel="appAuthHardDoor(0)"
-		>
-			<tm-text color="#999999">{{ state.authDesc }}</tm-text>
-		</tm-modal>
+		</view>
 	</crud-layout>
 </template>
 
 <script setup lang="ts">
 import { reactive } from "vue"
 import { onLoad, onShow } from "@dcloudio/uni-app"
-import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
 import { router } from "@/sheep"
-import walletApi from "@/sheep/api/wallet"
-import hardApi from "@/sheep/api/hard"
+import { doorApi } from "@/sheep/api"
+import { hooks } from "@/sheep"
+import { displayPrice } from "@/sheep/utils/formatMoney"
 
-const state = reactive({
-	isUseDoor: false,
-	isUseDoorTip: "",
-	show: false,
+const state = reactive<any>({
 	hardDoorId: "",
 	cabinetNo: "",
-	authDesc: "",
-	authId: "",
+	cabinetList: [],
 })
 
 onLoad((options: any) => {
@@ -99,72 +53,90 @@ onLoad((options: any) => {
 })
 
 onShow(async () => {
-	// 检查钱包余额
-	try {
-		uni.showLoading({ title: "加载中", mask: true })
-		const res = await walletApi.isUseDoor()
-		if (res.code == 0) {
-			if (res.data) {
-				state.isUseDoor = false
-				state.isUseDoorTip = res.data
-			} else {
-				state.isUseDoor = true
-			}
-			return
-		}
-		state.isUseDoor = false
-	} catch (error: any) {
-		uni.showToast({ title: error, icon: "none" })
-		state.isUseDoor = false
-	} finally {
+	let detail = { hardId: "" }
+	// 获取柜门详情
+	uni.showLoading({ title: "加载中...", mask: true })
+	const doorDetailRes = await doorApi.hardDoorDetail({ hardDoorId: state.hardDoorId })
+	if (doorDetailRes.code == 0) {
+		detail = doorDetailRes.data
 		uni.hideLoading()
+	} else {
+		return uni.hideLoading()
 	}
+
+	let cabinetList = []
+	// 获取柜子商品列表
+	uni.showLoading({ title: "加载中", mask: true })
+	const cabinetListRes = await doorApi.cabinetList({ hardId: detail.hardId, cabinetNo: state.cabinetNo })
+	if (cabinetListRes.code == 0) {
+		cabinetList = cabinetListRes.data
+		uni.hideLoading()
+	} else {
+		return uni.hideLoading()
+	}
+
+	const arr: any = []
+	cabinetList.map((item: any, index: number) => {
+		item[index + 1].map((v: any) => {
+			if (v.spuDetail) arr.push(v)
+		})
+	})
+
+	state.cabinetList = arr
 })
 
-// 去充值
-const goRecharge = () => {
-	router.jump("/pages/wallet/list", {}, 1)
-}
-
-// 开门
-const openDoor = async () => {
-	if (!state.isUseDoor) return
-
-	// 获取协议内容
-	try {
-		uni.showLoading({ title: "加载中", mask: true })
-		const res = await hardApi.appGetAuthHardDoor({ doorHardId: state.hardDoorId, cabinetNo: state.cabinetNo })
-		if (res.code == 0) {
-			state.show = true
-			state.authDesc = res.data.authDesc
-			state.authId = res.data.authId
-		}
-	} catch (error: any) {
-		uni.showToast({ title: error, icon: "none" })
-	} finally {
-		uni.hideLoading()
-	}
-}
-
-// 支付方式tab改变
-const payMethodTabChange = (e: number) => {}
-
-// 确认或拒绝协议
-const appAuthHardDoor = async (type: 1 | 0) => {
-	try {
-		uni.showLoading({ title: type ? "授权中" : "加载中", mask: true })
-		const res = await hardApi.appAuthHardDoor({
-			authId: state.authId,
-			authStatus: type ? 1 : 0,
-		})
-		if (res.code == 0) {
-			if (type) uni.showToast({ title: "授权成功", icon: "none" })
-			state.show = false
-		}
-	} catch (error: any) {
-		uni.showToast({ title: error, icon: "none" })
-	} finally {
-		uni.hideLoading()
-	}
+// 去开门
+const goOpenDoor = () => {
+	router.jump("/pages/cabinet/openDoor", { hardDoorId: state.hardDoorId, cabinetNo: state.cabinetNo })
 }
 </script>
+
+<style lang="scss" scoped>
+.open-door-btn-wrapper {
+	.open-door-btn {
+		position: relative;
+		z-index: 2;
+		transition: transform 0.2s;
+
+		&:active {
+			transform: scale(0.95);
+		}
+	}
+
+	.ripple-container {
+		position: absolute;
+		width: 200rpx;
+		height: 200rpx;
+		z-index: 1;
+	}
+
+	.ripple {
+		position: absolute;
+		width: 200rpx;
+		height: 200rpx;
+		border-radius: 50%;
+		border: 2px solid rgba(7, 121, 253);
+		animation: ripple 1s linear infinite;
+		opacity: 0;
+
+		&:nth-child(2) {
+			animation-delay: 0.6s;
+		}
+
+		&:nth-child(3) {
+			animation-delay: 1.2s;
+		}
+	}
+}
+
+@keyframes ripple {
+	0% {
+		transform: scale(1);
+		opacity: 0.5;
+	}
+	100% {
+		transform: scale(1.5);
+		opacity: 0;
+	}
+}
+</style>

src/pages/cabinet/openDoor.vue

@@ -0,0 +1,170 @@
+<template>
+	<crud-layout bg="/static/page/blue-bg.png">
+		<view class="bg-white rounded-20rpx my-20rpx font-bold">
+			<z-tabs
+				:list="[
+					{ name: '浙政钉支付', value: 1 },
+					{ name: '支付宝支付', value: 2, disabled: true },
+				]"
+				bar-width="150"
+				:active-style="{
+					fontSize: '30rpx',
+				}"
+				:inactive-style="{
+					fontSize: '30rpx',
+				}"
+				@change="payMethodTabChange"
+			/>
+		</view>
+
+		<tm-sheet v-if="!state.isUseDoor && state.isUseDoorTip" borderWidth="2" :margin="[0, 20]" padding="10" color="#0094FF22">
+			<view class="flex items-center justify-between pl-4">
+				<tm-text font-size="30 " color="#0779FD">{{ state.isUseDoorTip }}</tm-text>
+				<tm-button size="s" @click="goRecharge">去充值</tm-button>
+			</view>
+		</tm-sheet>
+
+		<tm-sheet margin="0">
+			<tm-text font-size="30">购买须知：</tm-text>
+			<view class="flex items-center p-10rpx">
+				<image class="w-50rpx h-50rpx mr-3" src="@/static/page/印章.svg" />
+				<view>
+					<view class="second-text-26">第一步</view>
+					<tm-text font-size="28">购买需消费钱包余额大于100元</tm-text>
+				</view>
+			</view>
+			<view class="flex items-center p-10rpx">
+				<image class="w-50rpx h-50rpx mr-3" src="@/static/page/开门.svg" />
+				<view>
+					<view class="second-text-26">第二步</view>
+					<tm-text font-size="28">开门之后选取商品并关门</tm-text>
+				</view>
+			</view>
+			<view class="flex items-center p-10rpx">
+				<image class="w-50rpx h-50rpx mr-3" src="@/static/page/支付.svg" />
+				<view>
+					<view class="second-text-26">第三步</view>
+					<tm-text font-size="28">关门后自动结算</tm-text>
+				</view>
+			</view>
+		</tm-sheet>
+
+		<template #main-bottom>
+			<view class="m-30rpx">
+				<tm-button block @click="openDoor" :disabled="!state.isUseDoor">开 门</tm-button>
+			</view>
+		</template>
+
+		<tm-modal
+			v-model:show="state.show"
+			:overlayClick="false"
+			title="你是否同意授权"
+			position="bottom"
+			:showCancel="true"
+			height="800rpx"
+			cancelText="拒绝"
+			confirmText="同意"
+			@confirm="appAuthHardDoor(1)"
+			@cancel="appAuthHardDoor(0)"
+		>
+			<tm-text color="#999999">{{ state.authDesc }}</tm-text>
+		</tm-modal>
+	</crud-layout>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue"
+import { onLoad, onShow } from "@dcloudio/uni-app"
+import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
+import { router } from "@/sheep"
+import walletApi from "@/sheep/api/wallet"
+import hardApi from "@/sheep/api/hard"
+
+const state = reactive({
+	isUseDoor: false,
+	isUseDoorTip: "",
+	show: false,
+	hardDoorId: "",
+	cabinetNo: "",
+	authDesc: "",
+	authId: "",
+})
+
+onLoad((options: any) => {
+	if (!options) return
+	const { hardDoorId, cabinetNo } = options
+	if (!hardDoorId || !cabinetNo) return
+	state.hardDoorId = hardDoorId
+	state.cabinetNo = cabinetNo
+})
+
+onShow(async () => {
+	// 检查钱包余额
+	try {
+		uni.showLoading({ title: "加载中", mask: true })
+		const res = await walletApi.isUseDoor()
+		if (res.code == 0) {
+			if (res.data) {
+				state.isUseDoor = false
+				state.isUseDoorTip = res.data
+			} else {
+				state.isUseDoor = true
+			}
+			return
+		}
+		state.isUseDoor = false
+	} catch (error: any) {
+		uni.showToast({ title: error, icon: "none" })
+		state.isUseDoor = false
+	} finally {
+		uni.hideLoading()
+	}
+})
+
+// 去充值
+const goRecharge = () => {
+	router.jump("/pages/wallet/list", {}, 1)
+}
+
+// 开门
+const openDoor = async () => {
+	if (!state.isUseDoor) return
+
+	// 获取协议内容
+	try {
+		uni.showLoading({ title: "加载中", mask: true })
+		const res = await hardApi.appGetAuthHardDoor({ doorHardId: state.hardDoorId, cabinetNo: state.cabinetNo })
+		if (res.code == 0) {
+			state.show = true
+			state.authDesc = res.data.authDesc
+			state.authId = res.data.authId
+		}
+	} catch (error: any) {
+		uni.showToast({ title: error, icon: "none" })
+	} finally {
+		uni.hideLoading()
+	}
+}
+
+// 支付方式tab改变
+const payMethodTabChange = (e: number) => {}
+
+// 确认或拒绝协议
+const appAuthHardDoor = async (type: 1 | 0) => {
+	try {
+		uni.showLoading({ title: type ? "授权中" : "加载中", mask: true })
+		const res = await hardApi.appAuthHardDoor({
+			authId: state.authId,
+			authStatus: type ? 1 : 0,
+		})
+		if (res.code == 0) {
+			if (type) uni.showToast({ title: "授权成功", icon: "none" })
+			state.show = false
+		}
+	} catch (error: any) {
+		uni.showToast({ title: error, icon: "none" })
+	} finally {
+		uni.hideLoading()
+	}
+}
+</script>

src/pages/tabbar/my.vue

@@ -297,9 +297,9 @@ const scanCode = {
 			// 开发环境模拟扫码
 			// const testQrCode = "eyJpZCI6IjE4OTYxNTcyMDc2NDQwNTM1MDYiLCJuYW1lIjoi5rWL6K+V5ZWG5oi3In0=" // 线上-测试超市-收款二维码
 			// const testQrCode = "eyJpZCI6IjE5MDU4MTY3NTEwNDM0NTI5MzAiLCJuYW1lIjoi5paw5Y6/5bqc6LaF5biCIn0=" // 邓本地-测试环境-新县府超市收款二维码
-			// const testQrCode = "eyJoYXJkRG9vcklkIjoiMTkxNDI0MjgzMDkyOTk4OTYzNCIsImNhYmluZXRObyI6IjEifQ==" // 测试智能柜柜门二维码
-			const testQrCode = "http://192.168.101.45:8889/h5/#/pages/pay/scanPay?id=1905816751043452930&name=测试新县府超市" // 邓本地-测试环境-新县府超市收款二维码
-			// const testQrCode = "http://192.168.101.45:8889/h5/#/pages/pay/scanPay?hardDoorId=1914242830929989634&cabinetNo=1" // 测试智能柜柜门二维码
+			// const testQrCode = "eyJoYXJkRG9vcklkIjoiMTkxMzE1NzA4MDQxODI5NTgwOSIsImNhYmluZXRObyI6IjEifQ==" // 邓本地-测试单门智能柜柜门二维码
+			// const testQrCode = "http://192.168.101.45:8889/h5/#/pages/pay/scanPay?id=1905816751043452930&name=测试新县府超市" // 邓本地-测试环境-新县府超市收款二维码
+			const testQrCode = "http://192.168.101.45:8889/h5/#/pages/pay/scanPay?hardDoorId=1913157080418295809&cabinetNo=1" // 测试智能柜柜门二维码
 			uni.showModal({ content: "开发环境不是浙政钉和诗画环境，扫码仅供测试，收款商家为测试商户超市" })
 
 			return testQrCode