新增点餐首页和商品列表的轮播图

2025-12-10 09:13:23 +08:00
parent 1e43269f65
commit 43e9f544e4
4 changed files with 802 additions and 815 deletions
--- a/pages/index/indexs.vue
+++ b/pages/index/indexs.vue
@@ -1,13 +1,14 @@
 <template>
 	<view class="content">
-		<view
-			class="contentbox"
-			:style="
-				'background:url(' +
-				(shopExtend ? shopExtend[0].value : 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/shuangbackground.png') +
-				') no-repeat center center / cover'
-			"
-		>
+		<view class="contentbox">
+			<template v-if="shopExtend.length">
+				<image class="bg" :src="shopExtend[0].value" mode="aspectFill" v-if="!isJsonArrayString(shopExtend[0].value)"></image>
+				<swiper class="swiper" autoplay circular v-else>
+					<swiper-item class="swiper-item" v-for="item in JSON.parse(shopExtend[0].value)">
+						<image class="swiper-bg" :src="item"></image>
+					</swiper-item>
+				</swiper>
+			</template>
 			<view class="contentboxitem flex-between">
 				<view class="contentboxitemleft flex-colum" @click="scanCodehandle(0)">
 					<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/Xdiancan.png" mode="aspectFill"></image>
@@ -61,6 +62,7 @@
 <script setup>
 import { getMemberConfig, getRechargeConfig } from '@/common/api/index/index.js';
 import { ref, reactive, defineProps, defineEmits, onMounted } from 'vue';
+import { isJsonArrayString } from '@/utils/util.js';

 // 定义接收的属性
 const props = defineProps({
@@ -175,13 +177,31 @@ defineExpose({
 page {
 	background: #f6f8fa;
 }
-
+.swiper {
+	width: 100%;
+	height: 100%;
+	.swiper-item {
+		width: 100%;
+		height: 100%;
+		.swiper-bg {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
 .content {
 	.contentbox {
 		position: relative;
 		width: 100%;
 		height: 1046rpx;
-		padding: 0 24rpx;
+		.bg {
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: -1;
+		}

 		.contentboxitem {
 			position: absolute;
--- a/pages/product/index.vue
+++ b/pages/product/index.vue
@@ -3,11 +3,22 @@
 		<Nav />
 		<!-- 顶部面板 -->
 		<view class="top--panel" :class="{ grayscale: !isBusinessTime }">
+			<template v-if="shopExtend">
 				<image
 					class="panelimgbackground"
 					:src="shopExtend ? shopExtend.value : 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopDetails/topBanner.png'"
 					mode="aspectFill"
+					v-if="!isJsonArrayString(shopExtend.value)"
 				></image>
+				<swiper class="panelimgbackground" autoplay indicator-dots circular v-else>
+					<swiper-item v-for="(item, index) in JSON.parse(shopExtend.value)" :key="index">
+						<image :src="item" mode="aspectFill"></image>
+					</swiper-item>
+				</swiper>
+			</template>
+			<template v-else>
+				<image class="panelimgbackground" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopDetails/topBanner.png" mode="aspectFill"></image>
+			</template>
 			<view class="panelone flex-start">
 				<view class="u-flex u-flex-y-center">
 					<text>
@@ -556,7 +567,7 @@
 import xbSwiperPreview from '@/components/xb-swiper-preview/index.vue';
 //价格计算辅助函数
 // import * as limitUtils from '@/utils/order-utils.js';
-import {limitUtils }  from 'ysk-utils'
+import { limitUtils } from 'ysk-utils';
 import BigNumber from 'bignumber.js';

 import GoodsPrice from '@/components/goods-price.vue';
@@ -578,7 +589,7 @@ import Loading from '@/components/Loading.vue';
 import dayjs from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
 dayjs.extend(isBetween);
-import { filterNumberInput } from '@/utils/util.js';
+import { filterNumberInput, isJsonArrayString } from '@/utils/util.js';
 import { APIproductqueryShop } from '@/common/api/member.js';
 import { getDistance } from '@/utils/address.js';

@@ -680,9 +691,18 @@ const callChildMethod = () => {
 	}
 };

-try {
-	const shopExtend = uni.cache.get('shopTable').shopExtendMap.shopinfo_bg;
-} catch (error) {}
+// const shopExtend = ref(uni.cache.get('shopTable').shopExtendMap.shopinfo_bg);
+// console.log('shopExtend', shopExtend);
+
+// 分步取值 + 每层兜底，避免某一环不存在导致 undefined
+const shopExtendShopTable = uni.cache.get('shopTable') || {}; // 兜底空对象
+const shopExtendMap = shopExtendShopTable.shopExtendMap || {}; // 兜底空对象
+// 最终声明：即使 shopinfo_bg 不存在，也兜底为空字符串/默认值
+const shopExtend = ref(shopExtendMap.shopinfo_bg || '');
+
+// try {
+// 	const shopExtend = uni.cache.get('shopTable').shopExtendMap.shopinfo_bg;
+// } catch (error) {}

 // 计算高度
 const navScroll = ref(null);
@@ -1342,7 +1362,7 @@ const singleclick = async (item, i) => {
 	} else if (item.suitNum >= cartNumberFloat && i === '-') {
 		suitNum = item.cartNumber;
 	}
-	const sendMsg={
+	const sendMsg = {
 		type: 'shopping',
 		suitNum: item.suitNum,
 		table_code: uni.cache.get('tableCode'),
@@ -1355,9 +1375,9 @@ const singleclick = async (item, i) => {
 		is_print: 1,
 		product_type: item.type,
 		is_time_discount: item.is_time_discount
-	}
-	if(item.cartListId){
-		sendMsg.id=item.cartListId;
+	};
+	if (item.cartListId) {
+		sendMsg.id = item.cartListId;
 	}
 	websocketsendMessage(sendMsg);
 };
@@ -2102,7 +2122,7 @@ function returnLimitPrice(item) {
 }

 onShow(async () => {
-	isAutoClose=true
+	isAutoClose = true;
 	// 监听页面显示和隐藏
 	useSocket.setOnMessage(onMessage);
 	useSocket.onShowconnect();
@@ -2124,21 +2144,20 @@ onShow(async () => {

 //是否自动关闭socket
 let isAutoClose = true;
-function closeSocket(){
-	if(isAutoClose){
+function closeSocket() {
+	if (isAutoClose) {
 		useSocket.closeSocket();
 	}
 	useSocket.setOnMessage(() => {});
-
 }
 onHide(() => {
-	closeSocket()
+	closeSocket();
 });
 onUnload(() => {
-	closeSocket()
+	closeSocket();
 });

-const oldOrder=ref(null)
+const oldOrder = ref(null);
 onMounted(async () => {
 	await proxy.$onLaunched;
 	// 获取当前页面栈
@@ -2195,9 +2214,9 @@ function toHistory() {
 	isAutoClose = false;
 	const tableCode = uni.cache.get('tableCode');
 	const shopId = uni.cache.get('shopId');
-	let url= `/pages/order/confirm-order?tableCode=${tableCode}&shopId=${shopId}`
-	const res=oldOrder.value;
-	console.log('toHistory',res);
+	let url = `/pages/order/confirm-order?tableCode=${tableCode}&shopId=${shopId}`;
+	const res = oldOrder.value;
+	console.log('toHistory', res);
 	// if (res && res.id && shopInfo.registerType == 'after') {
 	// 	url+='&orderId='+res.id
 	// }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/utils/util.js
+++ b/utils/util.js
@@ -306,12 +306,16 @@ export function checkPermission(permissionType) {
 				success: (res) => {
 					const authSetting = res.authSetting || {};
 					const isGranted = authSetting[platformPermission] === true;
-          const status = isGranted
-            ? "granted"
-            : authSetting[platformPermission] === false
-            ? "denied"
-            : "undetermined";
-          resolve({ granted: isGranted, status, platform: "weixin" });
+					const status = isGranted ?
+						"granted" :
+						authSetting[platformPermission] === false ?
+						"denied" :
+						"undetermined";
+					resolve({
+						granted: isGranted,
+						status,
+						platform: "weixin"
+					});
 				},
 				fail: (err) => reject(err),
 			});
@@ -342,7 +346,11 @@ export function checkPermission(permissionType) {
 		else if (platform === "ios" && typeof plus !== "undefined") {
 			try {
 				// iOS 权限需通过原生 API 检查（以相机为例，其他权限类似）
-        const result = { granted: false, status: "denied", platform: "ios" };
+				const result = {
+					granted: false,
+					status: "denied",
+					platform: "ios"
+				};

 				if (permissionType === "camera") {
 					// 相机权限检查（iOS 需调用 AVCaptureDevice）
@@ -353,11 +361,11 @@ export function checkPermission(permissionType) {
 					// 0: notDetermined（未请求）, 1: restricted（受限制）, 2: denied（拒绝）, 3: authorized（授权）
 					result.granted = authStatus === 3;
 					result.status =
-            authStatus === 3
-              ? "granted"
-              : authStatus === 0
-              ? "undetermined"
-              : "denied";
+						authStatus === 3 ?
+						"granted" :
+						authStatus === 0 ?
+						"undetermined" :
+						"denied";
 				}
 				// 可扩展其他 iOS 权限（如定位、麦克风等）
 				else if (permissionType === "location") {
@@ -366,11 +374,11 @@ export function checkPermission(permissionType) {
 					// CLAuthorizationStatus 枚举值：
 					// 0: notDetermined, 1: restricted, 2: denied, 3: authorizedAlways, 4: authorizedWhenInUse
 					result.granted = authStatus === 3 || authStatus === 4;
-          result.status = result.granted
-            ? "granted"
-            : authStatus === 0
-            ? "undetermined"
-            : "denied";
+					result.status = result.granted ?
+						"granted" :
+						authStatus === 0 ?
+						"undetermined" :
+						"denied";
 				}

 				resolve(result);
@@ -381,7 +389,9 @@ export function checkPermission(permissionType) {
 		// 4. H5 平台（浏览器权限）
 		else if (typeof navigator !== "undefined" && navigator.permissions) {
 			navigator.permissions
-        .query({ name: platformPermission })
+				.query({
+					name: platformPermission
+				})
 				.then((permissionStatus) => {
 					resolve({
 						granted: permissionStatus.state === "granted",
@@ -397,3 +407,30 @@ export function checkPermission(permissionType) {
 		}
 	});
 }
+
+/**
+ * 判断字符串是否为合法的 JSON 数组
+ * @param {string} str - 待判断的字符串
+ * @returns {boolean} true=是JSON数组字符串 / false=普通字符串/其他
+ */
+export function isJsonArrayString(str) {
+	// 1. 非字符串直接返回 false
+	if (typeof str !== 'string') {
+		return false;
+	}
+
+	// 2. 空字符串返回 false（根据业务可调整）
+	if (str.trim() === '') {
+		return false;
+	}
+
+	try {
+		// 3. 尝试解析 JSON
+		const parsed = JSON.parse(str);
+		// 4. 校验解析结果是否为数组
+		return Array.isArray(parsed);
+	} catch (e) {
+		// 解析失败（普通字符串/非法 JSON）→ 返回 false
+		return false;
+	}
+}