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

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;