feat(xhc): 添加小和醇槟榔小程序功能模块

- 在tabbar_common.vue中添加小和醇品牌名称映射
- 新建意见反馈页面feedback.vue，实现用户反馈表单功能
- 新建验证码验证页面authCode.vue，实现扫码抽奖验证流程
- 新建中奖结果页面claim.vue，展示扫码查询结果和奖励信息
- 新建主页面index.vue，实现翻卡抽奖游戏功能和奖励展示
- 集成自定义tabbar组件支持小和醇页面导航
- 添加配套样式文件和API接口调用逻辑

components/tabbar_common.vue

@@ -170,6 +170,8 @@
             return '梅山古镇';
           case 'qilang':
             return '七榔';
+          case 'xhc':
+            return '小和醇';
           default:
             return '超吉炫';
         }

pages.json

@@ -225,7 +225,8 @@
 			}
 
 		]
-	},{
+	},
+	{
 		"root": "pages/qilang",
 		"pages": [
 			{
@@ -304,7 +305,94 @@
 				"path" : "error",
 				"style" :
 				{
-					"navigationBarTitleText" : "超吉炫",
+					"navigationBarTitleText" : "七榔槟榔",
+					"navigationStyle": "custom"
+				}
+			}
+
+		]
+	},
+
+	{
+		"root": "pages/xhc",
+		"pages": [
+			{
+				"path" : "index/rules",
+				"style" :
+				{
+					"navigationBarTitleText" : "活动规则",
+					"navigationStyle": "custom"
+				}
+			},
+			{
+				"path" : "record/record",
+				"style" :
+				{
+					"navigationBarTitleText" : "扫码记录",
+					"navigationStyle": "custom"
+				}
+			},
+			{
+				"path" : "index/index",
+				"style" :
+				{
+					"navigationBarTitleText" : "",
+					"navigationStyle": "custom"
+				}
+			},
+			{
+				"path" : "index/authCode",
+				"style" :
+				{
+					"navigationBarTitleText" : "",
+					"navigationStyle": "custom"
+				}
+			},
+			{
+				"path" : "my/my",
+				"style" :
+				{
+					"navigationBarTitleText" : "",
+					"navigationStyle": "custom"
+				}
+			},
+			{
+				"path" : "index/claim",
+				"style" :
+				{
+					"navigationBarTitleText" : "中奖记录",
+					"navigationStyle": "custom"
+				}
+			},
+			{
+				"path" : "introduction/introduction",
+				"style" :
+				{
+					"navigationBarTitleText" : "公司简介",
+					"navigationStyle": "custom"
+				}
+			},
+			{
+				"path" : "feedback/feedback",
+				"style" :
+				{
+					"navigationBarTitleText" : "意见反馈",
+					"navigationStyle": "custom"
+				}
+			},
+			{
+				"path" : "traceability/traceability",
+				"style" :
+				{
+					"navigationBarTitleText" : "七榔槟榔",
+					"navigationStyle": "custom"
+				}
+			},
+			{
+				"path" : "error",
+				"style" :
+				{
+					"navigationBarTitleText" : "七榔槟榔",
 					"navigationStyle": "custom"
 				}
 			}

pages/xhc/error.vue

@@ -0,0 +1,137 @@
+<template>
+  <view class="intro-page common">
+    <view class="top-class"></view>
+    <view class="title">
+      七榔槟榔
+    </view>
+    <view class="head">
+      <u-row class="row-class"  justify="flex-end">
+        <u-col span="4">
+          <image class="logo-rules" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/qilang/common/rules.png"  />
+        </u-col>
+      </u-row>
+    </view>
+
+
+    <view class="content">
+      <view class="title-1">
+
+      </view>
+
+      <view class="detail">
+        <view class="text-detail">
+          您所查询的是七榔槟榔，是正牌产品，感谢您的购买!
+        </view>
+        <view class="text-one">
+        </view>
+        <view class="text-one">
+          {{msg}}
+        </view>
+      </view>
+    </view>
+    <CustomTabbar />
+
+  </view>
+</template>
+
+<script>
+export default {
+
+  data() {
+    return {
+      msg: "未知错误"
+    }
+  },
+  onLoad: function(options) {
+    if (options.msg){
+      this.msg = options.msg;
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+	@import url('../../static/scss/common_xhc.css');
+
+.row-class {
+  height: 80rpx;
+}
+
+.theme-text {
+  height: 10vh;
+  text-align: center;
+  line-height: 11vh;
+
+  .textImage {
+    height: 80rpx;
+    width: 400rpx;
+  }
+}
+.title-1{
+  text-align: center;
+  color: #A7001C;
+  font-size: 18px;
+  letter-spacing: 4px;
+  font-weight: 600;
+}
+
+.winning-picture{
+  height: 460rpx;
+  background-image: url(https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiZj.png);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  // align-items: center;     /* 垂直居中 */
+}
+.detail{
+  border-radius: 10rpx;
+  padding: 10rpx;
+  margin: 30vh 40rpx 20rpx;
+  height: 20vh;
+  background: #FDE2B1;
+  border: 4px solid #FB911B;
+}
+.text-detail{
+  font-weight: 500;
+  font-size: 28rpx;
+  color: #000000;
+  margin-bottom: 10rpx;
+  padding: 20rpx;
+}
+
+.text-one{
+  font-weight: 400;
+  font-size: 26rpx;
+  color: #901710 ;
+  margin-bottom: 10rpx;
+  padding: 20rpx;
+
+}
+.detail-btn{
+  text-align: center;
+  color: #F9D395;
+  height: 60rpx;
+  line-height: 60rpx;
+  margin-right: 20rpx;
+  font-size: 13px;
+  background-color: #901710;
+  padding: 3px;
+  border-radius: 5px;
+
+}
+.center-image {
+  height: 280rpx;
+  object-fit: contain;     /* 保持图片的宽高比，确保不会被拉伸或裁切 */
+}
+::v-deep .detail-btn span {
+  background-color: #8E1813;
+  padding: 4rpx;
+  border-radius: 8rpx;
+  font-weight: 400;
+  font-size: 26rpx;
+}
+</style>

pages/xhc/feedback/feedback.vue

@@ -0,0 +1,206 @@
+<template>
+	<view class="intro-page common">
+    <view class="top-class"></view>
+    <view class="title">
+      <view class="logo-container">
+        <image class="logo-text" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png"  />
+      </view>
+      <view class="title-1">
+        <view class="title-image-2"></view>
+      </view>
+    </view>
+    <view class="head">
+      <u-row class="row-class"  justify="flex-end">
+        <u-col span="4">
+          <image class="logo-rules-2" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/rules.png"  />
+        </u-col>
+      </u-row>
+    </view>
+
+		<view class="content-2">
+      <view class="content-title">
+        意见反馈
+      </view>
+			<view class="content_text">
+        <view class="intro-content">
+        <view style ="margin-top: 30rpx"> 七榔槟榔消费者反馈表 </view>
+        <view> 亲爱的消费者： </view>
+        <view> 感谢您选择小和醇槟榔！为了能给您带来更优质的产品和服务体验，我们诚挚地邀请您填写这份反馈表。您的宝贵意见对我们至关重要，我们会认真对待每一条反馈。若您的建议被采纳，将有机会获得超吉炫精心准备的礼品哦！
+        </view>
+        </view>
+				<view class="from">
+					<view class="filter-btn-group">
+						<view class="row-text">留言类型：</view>
+						<view v-for="(item, idx) in filterOptions" :key="idx"
+							:class="['filter-btn', filterStatus === item.value ? 'active' : '']"
+							@click="onFilterChange(item.value)">
+							{{ item.label }}
+						</view>
+					</view>
+					<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
+						<u-form-item label="留言人姓名:" prop="userInfo.name" ref="item1">
+							<u--input v-model="model1.userInfo.name" border="none" color="#F8D994"></u--input>
+						</u-form-item>
+
+						<u-form-item label="联系电话:" prop="userInfo.tel" ref="item1">
+							<u--input v-model="model1.userInfo.tel" border="none" color="#F8D994"></u--input>
+						</u-form-item>
+
+						<u-form-item label="E-mail:" prop="userInfo.mail" ref="item1">
+							<u--input v-model="model1.userInfo.mail" border="none" color="#F8D994"></u--input>
+						</u-form-item>
+
+						<u-form-item label="留言:" ref="item1">
+							<u--textarea v-model="model1.userInfo.liuyan" border="none" color="#F8D994"></u--textarea>
+						</u-form-item>
+
+					</u--form>
+				</view>
+			</view>
+
+		</view>
+    <view class="return_view" style="justify-content: space-around;">
+      <view class="return-button" @click="saveData">保存</view>
+      <view class="return-button" @click="goBack">返回</view>
+    </view>
+		<u-toast ref="uToast"></u-toast>
+
+	</view>
+</template>
+
+<script>
+import {
+  feed
+} from '@/api/scan'
+import feedbackMixin from '@/mixins/feedbackMixin.js'
+
+export default {
+  mixins: [feedbackMixin],
+  methods: {
+    saveData() {
+      // 调用 mixin 中的方法，传入特定的 API 函数
+      this.baseSaveData(feed, (data) => {
+        // 可以在这里添加特定的成功回调处理
+      });
+    },
+    goBack() {
+      this.baseGoBack();
+    },
+    openDetail() {
+      this.baseOpenDetail("xhc");
+    },
+    onFilterChange(val) {
+      this.baseOnFilterChange(val);
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+	@import url('../../../static/scss/common_xhc.css');
+
+	.row-class {
+		height: 80rpx;
+	}
+	.cardTop{
+		background-image:
+			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/yjfk.png");
+	}
+
+	.theme-text {
+		height: 10vh;
+		text-align: center;
+		line-height: 11vh;
+
+		.textImage {
+			height: 80rpx;
+			width: 400rpx;
+		}
+	}
+
+
+	::v-deep .u-form-item__body__left {
+		width: 160rpx !important;
+
+
+	}
+
+	::v-deep .u-form-item__body__left__content__label {
+		font-weight: bold;
+		font-size: 26rpx !important;
+		color: #F8D994 !important;
+	}
+
+	::v-deep .u-form-item__body__right {
+		border: 1px solid #FCEFCB !important;
+	}
+
+	::v-deep .u-textarea {
+		background-color: rgba(0, 0, 0, 0) !important;
+		
+	}
+	::v-deep .u-textarea__field{
+		color:#fff !important;
+	}
+
+	::v-deep .u-form-item__body {
+		display: flex;
+		flex-direction: row;
+		padding: 0 0 !important;
+		padding-top: 10rpx !important;
+	}
+
+	::v-deep .u-form-item__body__right__message {
+		margin-left: 160rpx !important;
+	}
+
+	.filter-btn-group {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		gap: 24rpx;
+		margin: 10rpx 0 10rpx 0;
+	}
+
+	.filter-btn {
+		padding: 4rpx 20rpx;
+		border: 2rpx solid #FCEFCB;
+		color: #FCEFCB ;
+		font-size: 28rpx;
+		transition: all 0.2s;
+		margin-left: 10rpx;
+	}
+
+	.filter-btn.active {
+		background: #F8D994 ;
+		color: #000000;
+		border: 2rpx solid #F8D994 ;
+	}
+
+	.row-text {
+		font-weight: bold;
+		font-size: 26rpx;
+		color: #F8D994;
+	}
+
+	.content {
+		height: 69vh;
+		overflow: auto;
+    padding: 32rpx 24rpx 24rpx 24rpx;
+    margin: 10vh 32rpx 0;
+    border-radius: 48px;
+    background: #FDE2B1;
+    border: 6px solid #FB911b;
+  }
+
+	.savaBtn {
+		margin-top: 10px;
+		font-weight: 600;
+	}
+
+	.intro-content {
+		font-weight: 500;
+		font-size: 28rpx;
+		color: #F8D994;
+
+	}
+</style>

pages/xhc/index/authCode.vue

@@ -0,0 +1,242 @@
+<template>
+  <view class="intro-page common">
+    <view class="top-class"></view>
+    <view class="title">
+      <view class="logo-container">
+        <image class="logo-text" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png"  />
+      </view>
+      <view class="title-1">
+        <view class="title-image"></view>
+      </view>
+    </view>
+    <view class="head">
+      <image class="logo-rules" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/rules.png"  />
+    </view>
+    <view class="head-ttile">
+      <view class="head-ttile-img">
+        <image class="ttile-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/bgi_3.png" mode="heightFix"/>
+      </view>
+      <view class="head-ttile-text">
+        正宗海南·醇香浓郁
+      </view>
+    </view>
+
+
+		<view class="content-index">
+      <view class="title-1">
+        <view class="content_imgView">
+          <image style="height: 500rpx" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/commodity.png"
+                 mode="heightFix" />
+        </view>
+      </view>
+
+			<view class="detail">
+				<view class="text-detail">
+					您所查询的是海南小和醇贸易有限公司荣誉出品的精制槟榔，是正牌产品，感谢您的购买!
+				</view>
+				<view class="" style="padding: 20rpx;">
+					<u-row class="row-class">
+						<u-col span="9">
+							<u--input placeholder="输入包装内侧验证码" border="surround" v-model="value" color="#293993" ></u--input>
+						</u-col>
+						<u-col span="3">
+							<u-button text="开始抽奖" class="custom-style" color="#293993" @click="startDraw" ></u-button>
+						</u-col>
+
+					</u-row>
+				</view>
+				<view class="hint">
+					实物大奖:如您中实物，请凭中奖外包袋兑奖，谢谢！
+				</view>
+
+			</view>
+		</view>
+		<u-toast ref="uToast"></u-toast>
+		<CustomTabbar />
+
+	</view>
+</template>
+
+<script>
+	import {
+		getScanData,
+		confirmCode
+	} from '@/api/scan'
+	import CustomTabbar from '@/components/tabbar_common.vue';
+	export default {
+		components: {
+			CustomTabbar
+		},
+		data() {
+			return {
+				scanUserData: {},
+				prizeJson: {},
+				value: '',
+				scanCode: ''
+			}
+		},
+		onLoad() {
+			this.scanCode = uni.getStorageSync('scanCode');
+
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack();
+			},
+			openDetail() {
+				uni.navigateTo({
+					url: '/pages/xhc/index/rules'
+				});
+			},
+			startDraw() {
+				confirmCode(this.scanCode, this.value).then(res => {
+					if (res.code === 0) {
+						getScanData(this.scanCode).then(res => {
+							if (res.code === 0) {
+								// 获取当前页面路径
+								const pages = getCurrentPages();
+								const currentPage = pages[pages.length - 1];
+								const route = currentPage.route;
+								const dirPath = route.substring(0, route.lastIndexOf('/'));
+								let url = '/' + dirPath + '/index';
+								uni.setStorageSync('scanDetail', res.data);
+								uni.redirectTo({
+									url: url
+								})
+							}else {
+                let params = {
+                  type: "error",
+                  title: "失败",
+                  message: res.msg,
+                  iconUrl: "https://uviewui.com/demo/toast/error.png",
+                }
+                this.$refs.uToast.show({
+                  ...params
+                });
+              }
+						})
+					} else {
+						let params = {
+							type: "error",
+							title: "失败",
+							message: res.msg,
+							iconUrl: "https://uviewui.com/demo/toast/error.png",
+						}
+						this.$refs.uToast.show({
+							...params
+						});
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import url('../../../static/scss/common_xhc.css');
+
+	.row-class {
+		height: 60rpx;
+	}
+
+	.theme-text {
+		height: 10vh;
+		text-align: center;
+		line-height: 11vh;
+
+		.textImage {
+			height: 80rpx;
+			width: 400rpx;
+		}
+	}
+
+	.title-1 {
+		text-align: center;
+		color: #A7001C;
+		font-size: 18px;
+		letter-spacing: 4px;
+		font-weight: 600;
+	}
+
+	.winning-picture {
+		height: 460rpx;
+		background-image: url(https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiZj.png);
+		background-size: contain;
+		background-position: center;
+		background-repeat: no-repeat;
+		display: flex;
+		justify-content: center;
+		/* 水平居中 */
+		// align-items: center;     /* 垂直居中 */
+	}
+
+	.detail {
+		margin: 20rpx 40rpx;
+		border-radius: 10rpx;
+		padding: 10rpx;
+		height: 20vh;
+    background: #FDE2B1;
+    border: 4px solid #FB911B;
+	}
+
+	.text-detail {
+		margin-top: 20rpx;
+		margin-bottom: 10rpx;
+		padding: 0px 10px;
+		font-weight: 600;
+		font-size: 26rpx;
+		color: #3D3D3D;
+	}
+
+	.text-one {
+		font-weight: 400;
+		font-size: 26rpx;
+		color: #293993 ;
+		margin-bottom: 10rpx;
+
+	}
+
+	.detail-btn {
+		text-align: center;
+		color: #F9D395;
+		height: 60rpx;
+		line-height: 60rpx;
+		margin-right: 20rpx;
+		font-size: 13px;
+		background-color: #901710;
+		padding: 3px;
+		border-radius: 5px;
+
+	}
+
+	.center-image {
+		height: 280rpx;
+		object-fit: contain;
+		/* 保持图片的宽高比，确保不会被拉伸或裁切 */
+	}
+
+	::v-deep .detail-btn span {
+		background-color: #8E1813;
+		padding: 4rpx;
+		border-radius: 8rpx;
+		font-weight: 400;
+		font-size: 26rpx;
+	}
+
+	.hint {
+		font-weight: 500;
+		font-size: 24rpx;
+		color: #F94C28 ;
+		text-align: center;
+	}
+
+	.custom-style {
+		height: 74rpx;
+	}
+  .content {
+    margin-top: 16vh;
+  }
+  ::v-deep .u-border{
+    border-color: #293993 !important;
+  }
+</style>

pages/xhc/index/claim.vue

@@ -0,0 +1,178 @@
+<template>
+	<view class="intro-page common">
+		<view class="top-class"></view>
+		<view class="title">
+      <view class="logo-container">
+        <image class="logo-text" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png"  />
+      </view>
+      <view class="title-1">
+        <view class="title-image"></view>
+      </view>
+		</view>
+		<view class="head">
+				<image class="logo-rules" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/rules.png"  />
+		</view>
+    <view class="head-ttile">
+      <view class="head-ttile-img">
+        <image class="ttile-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/bgi_3.png" mode="heightFix"/>
+      </view>
+      <view class="head-ttile-text">
+        正宗海南·醇香浓郁
+      </view>
+    </view>
+
+		<view class="content-index">
+			<view class="title-1">
+        <view class="content_imgView">
+          <image style="height: 400rpx" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/commodity.png"
+                 mode="heightFix" />
+        </view>
+        <view class="content_imgView">
+          <image class="img_3" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/commodity_dz.png"
+                 mode=" " />
+        </view>
+			</view>
+
+			<view class="detail">
+				<view class="text-detail">
+          您所查询的是七榔系列槟榔，是正牌产品，感谢您的购买!
+				</view>
+				<view class="text-one">
+					此二维码已参与过活动!
+				</view>
+				<view class="text-one">
+					首次扫码者: {{scanUserData.openid}}
+				</view>
+				<view class="text-one">
+					首次扫码时间: {{scanUserData.scan_time}}
+				</view>
+				<view class="text-one">
+					获得奖励: {{prizeJson.prize_type == 0 ? '谢谢惠顾' : prizeJson.prize_type == 1 ? prizeJson.money/100 + '元现金红包' : prizeJson.prize_type == 4 ? "积分奖励":"加"+prizeJson.price+"元,"+prizeJson.title+""+prizeJson.prize_name  }}
+				</view>
+			</view>
+		</view>
+		<CustomTabbar />
+
+	</view>
+</template>
+
+<script>
+	import CustomTabbar from '@/components/tabbar_common.vue';
+	export default {
+		components: {
+			CustomTabbar
+		},
+		data() {
+			return {
+				scanUserData:{},
+				prizeJson:{}
+			}
+		},
+		onLoad() {
+		  let scanDetail = uni.getStorageSync('scanDetail');
+		  this.scanUserData = scanDetail.result.scanInfo;
+		  this.prizeJson = scanDetail.prizeJson;
+		  console.log(scanDetail);
+
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack();
+			},
+			openDetail(){
+				uni.navigateTo({
+					url: '/pages/xhc/index/rules'
+				});
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import url('../../../static/scss/common_xhc.css');
+
+	.row-class {
+		height: 80rpx;
+	}
+  .content-index {
+    margin-top: 8vh;
+  }
+
+	.theme-text {
+		height: 10vh;
+		text-align: center;
+		line-height: 11vh;
+
+		.textImage {
+			height: 80rpx;
+			width: 400rpx;
+		}
+	}
+	.title-1{
+		text-align: center;
+		color: #A7001C;
+		font-size: 18px;
+		letter-spacing: 4px;
+		font-weight: 600;
+	}
+
+    .winning-picture{
+		height: 460rpx;
+		background-image: url(https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiZj.png);
+		background-size: contain;
+		background-position: center;
+		background-repeat: no-repeat;
+		display: flex;
+		justify-content: center; /* 水平居中 */
+		// align-items: center;     /* 垂直居中 */
+	}
+	.detail{
+		margin: 100rpx 40rpx;
+		border-radius: 10rpx;
+		padding: 10rpx;
+    background: #FDE2B1;
+    border-radius: 8px;
+    border: 4px solid #FB911B;
+	}
+	.text-detail{
+		font-weight: 600;
+		font-size: 28rpx;
+		color: #3D3D3D;;
+		margin-bottom: 10rpx;
+	}
+
+	.text-one{
+		font-weight: 400;
+		font-size: 26rpx;
+		color: #3D3D3D; ;
+		margin-bottom: 10rpx;
+
+	}
+	.detail-btn{
+		text-align: center;
+	    color: #F9D395;
+	    height: 60rpx;
+	    line-height: 60rpx;
+	    margin-right: 20rpx;
+	    font-size: 13px;
+	    background-color: #901710;
+	    padding: 3px;
+	    border-radius: 5px;
+
+	}
+	.center-image {
+		height: 280rpx;
+	    object-fit: contain;     /* 保持图片的宽高比，确保不会被拉伸或裁切 */
+	}
+	::v-deep .detail-btn span {
+	    background-color: #8E1813;
+	    padding: 4rpx;
+	    border-radius: 8rpx;
+	    font-weight: 400;
+	    font-size: 26rpx;
+	}
+	
+
+
+</style>

pages/xhc/index/index.vue

@@ -0,0 +1,816 @@
+<template>
+	<view class="common">
+		<view class="body">
+      <view class="top-class"></view>
+      <view class="title">
+        <view class="logo-container">
+          <image class="logo-text"  src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png"  />
+        </view>
+        <view class="title-1">
+          <view class="title-image"></view>
+        </view>
+      </view>
+      <view class="head">
+        <image class="logo-rules" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/rules.png"  />
+      </view>
+      <view class="head-ttile">
+        <view class="head-ttile-img">
+          <image class="ttile-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/bgi_3.png" mode="heightFix"/>
+        </view>
+        <view class="head-ttile-text">
+          正宗海南·醇香浓郁
+        </view>
+      </view>
+
+			<view class="content">
+				<view class="chouka" style="width: 100%;">
+
+					<template>
+						<!-- 卡片区 -->
+						<view class="cards">
+							<view class="card" v-for="(item, idx) in cards" :key="idx" @click="flipCard(idx)"
+								:class="{ 'flipping': item.isFlipping, 'flipped': item.flipped }">
+								<view v-if="item.checkStauts" class="select-tag">
+									已选
+								</view>
+								<view class="card-inner">
+									<view class="card-front">
+										<image class="card-img" :src="item.front" mode="scaleToFill"></image>
+									</view>
+									<view class="card-back">
+										<image class="card-img" :src="item.back" mode="scaleToFill"></image>
+										<view class="card-back-text">
+                      <view v-show="item.prizeType == 0" class="card-img-item">
+                        <image style="height:100rpx"
+                               src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/money.png"
+                               mode="heightFix"></image>
+                      </view>
+                      <view v-show="item.prizeType == 0" class="card-money" style="left: 90rpx;color: #3B3638">空
+                      </view>
+                      <view v-show="item.prizeType == 0" class="card-text-2">很遗憾！
+                      </view>
+                      <view v-show="item.prizeType == 1" class="card-img-item">
+                        <image style="height:100rpx"
+                          src=""
+                          mode="heightFix"></image>
+                      </view>
+											<view v-show="item.prizeType == 1" class="card-money">￥{{item.money/100}}
+											</view>
+											<view v-show="item.prizeType == 1" class="card-text-2">现金红包
+											</view>
+
+											<view v-show="item.prizeType == 2" class="card-text-1">凭外袋，赠本品槟榔一袋</view>
+											<view v-show="item.prizeType == 2 && item.img !== '' " class="card-img-item">
+												<image style="height:100rpx" :src="item.img" mode="heightFix"></image>
+											</view>
+                      <view v-show="item.prizeType == 2" class="card-text-2">再来一包
+                      </view>
+
+											<view v-show="item.prizeType == 4" class="card-text-1">谢谢惠顾</view>
+											<view v-show="item.prizeType == 4" class="card-point">积分+{{item.point}}</view>
+											<view v-show="item.prizeType == 4" class="card-text-2">积分已累计</view>
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</template>
+
+				</view>
+        <view class="popup-win">
+          <u-popup :show="showWin" :round="10" mode="center" @close="close" @open="open" >
+            <view class="popup-flex">
+              <view class="popup-content-scroll">
+
+
+                <view v-show="prizeJson.prizeType == 2 || prizeJson.prize_type == 2" class="popup_text1">
+                  凭外袋，赠本品槟榔一袋</view>
+                <view v-show="prizeJson.prizeType == 4 || prizeJson.prize_type == 4" class="popup_text1">
+                  活动积分奖励</view>
+                <view class="center">
+                  <image v-show="(prizeJson.prizeType == 2 || prizeJson.prize_type == 2) &&  prizeJson.img != '' " class="popup_img"
+                         :src="prizeJson.img" mode="heightFix" />
+                </view>
+                <view v-show="prizeJson.prizeType == 1 || prizeJson.prize_type == 1"
+                      class="center pupup_textMoney">
+                  ￥{{prizeJson.money/100}}</view>
+                <view  v-show="prizeJson.prizeType == 1 || prizeJson.prize_type == 1"
+                    class="center pupup_text2">
+                  红包将存入您的</view>
+                <view v-show="prizeJson.prizeType == 1 || prizeJson.prize_type == 1"
+                      class="center pupup_text2">
+                  微信零钱！</view>
+                <view class="popup_text1_2" v-show="prizeJson.prizeType == 1 || prizeJson.prize_type == 1" >
+                  现金红包</view>
+                <view v-show="prizeJson.prizeType == 2 || prizeJson.prize_type == 2"
+                      class="center pupup_text3">
+                  请凭包装袋到购买门店兑换！</view>
+                <view style="text-align: center;margin: 50px 0px 30px 0px;color: #FF9800;" v-show="prizeJson.prizeType == 2 || prizeJson.prize_type == 2" >
+                  再来一包</view>
+                <view v-show="prizeJson.prizeType == 4 || prizeJson.prize_type == 4">
+                  <view class="center jf_text">+ {{prizeJson.point}}积分</view>
+                  <view class="center">
+
+                  </view>
+                  <view class="center pupup_text3">
+                    所获积分可前往积分商城兑换商品
+                  </view>
+                </view>
+                <view class="confirm-btn-container">
+                  <view class="confirm-btn" @click="close">我知道了</view>
+                </view>
+              </view>
+
+
+            </view>
+          </u-popup>
+        </view>
+				<view class="popup-unWin">
+          <u-popup :show="showUnWin" :round="10" mode="center" @close="close" @open="open" >
+            <view class="popup-flex">
+              <view class="popup-content-scroll">
+                <view class="popup_text1"></view>
+                <view class="center" style = "margin-top: 72px">
+                  <view class="card-money" style="left: 235rpx;top:90px;color: #3B3638">空 </view>
+                  <image class="popup_img"
+                         src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/money.png"
+                         mode="heightFix" />
+                </view>
+
+                <view class="center">
+                 本次抽卡未中奖
+                </view>
+                <view class="center" style = "margin-bottom: 38rpx">
+                  下次继续
+                </view>
+                <view class="center pupup_text3">很遗憾！</view>
+                <view class="confirm-btn-container">
+                  <view class="confirm-btn" @click="close">我知道了</view>
+                </view>
+              </view>
+
+            </view>
+          </u-popup>
+				</view>
+
+
+			</view>
+		</view>
+
+		<CustomTabbar />
+	</view>
+</template>
+
+<script>
+	import CustomTabbar from '@/components/tabbar_common.vue';
+	import {
+		addWinDetail,
+		saveCardData
+	} from '@/api/scan'
+	export default {
+		components: {
+			CustomTabbar
+		},
+		data() {
+			return {
+
+				rules: {
+					'userInfo.name': {
+						type: 'string',
+						required: true,
+						message: '请填写姓名',
+						trigger: ['blur', 'change']
+					},
+					'userInfo.tel': {
+						type: 'string',
+						required: true,
+						message: '请填写手机号',
+						trigger: ['blur', 'change']
+					},
+				},
+				model1: {
+					userInfo: {
+						name: '',
+						tel: '',
+						qrcodeId: ''
+					},
+				},
+				showUnWin: false,
+				showWin: true,
+
+				cards: [{
+						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/one.png',
+						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/card_img.png',
+						flipped: false,
+						prizeName: '',
+						title: '',
+						checkStauts: false,
+						img: '',
+						money: '',
+						prizeType: '',
+						isFlipping: false,
+						point: '',
+						price: ''
+					},
+					{
+						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/two.png',
+						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/card_img.png',
+						flipped: false,
+						prizeName: '',
+						title: '',
+						checkStauts: false,
+						img: '',
+						money: '',
+						prizeType: '',
+						isFlipping: false,
+						point: '',
+						price: ''
+					},
+					{
+						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/three.png',
+						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/card_img.png',
+						flipped: false,
+						prizeName: '',
+						title: '',
+						checkStauts: false,
+						img: '',
+						money: '',
+						prizeType: '',
+						isFlipping: false,
+						point: '',
+						price: ''
+					},
+					{
+						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/four.png',
+						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/card_img.png',
+						flipped: false,
+						prizeName: '',
+						title: '',
+						checkStauts: false,
+						img: '',
+						money: '',
+						prizeType: '',
+						isFlipping: false,
+						point: '',
+						price: ''
+					},
+					{
+						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/five.png',
+						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/card_img.png',
+						flipped: false,
+						prizeName: '',
+						title: '',
+						checkStauts: false,
+						img: '',
+						money: '',
+						prizeType: '',
+						isFlipping: false,
+						point: '',
+						price: ''
+					},
+					{
+						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/six.png',
+						back: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/card_img.png',
+						flipped: false,
+						prizeName: '',
+						title: '',
+						checkStauts: false,
+						img: '',
+						money: '',
+						prizeType: '',
+						isFlipping: false,
+						point: '',
+						price: ''
+
+					}
+				],
+				totalDetail: '',
+				prizeJson: {},
+				saveData: {},
+				scanCode: '',
+				saveStatus: true,
+				fankaStatu: false,
+			}
+		},
+		onLoad() {
+			let scanDetail = uni.getStorageSync('scanDetail');
+			this.scanCode = uni.getStorageSync('scanCode');
+			this.model1.userInfo.qrcodeId = this.scanCode;
+
+			this.prizeJson = scanDetail.prizeJson;
+			console.log("----------------------------");
+			console.log(this.prizeJson);
+			let planDetail = JSON.parse(scanDetail.planDetail);
+			while (planDetail.length < 5) {
+				planDetail.push({
+					'prizeType': 0,
+					'money': 0
+				})
+			}
+			this.totalDetail = planDetail;
+			console.log(planDetail);
+			if (scanDetail.result.click) {
+				this.initCardData(scanDetail.clickJson);
+			}
+		},
+		methods: {
+
+			openDetail() {
+				uni.navigateTo({
+					url: '/pages/xhc/index/rules'
+				});
+			},
+			initCardData(clickJson) {
+				let list = JSON.parse(clickJson);
+				for (let i = 0; i < this.cards.length; i++) {
+					if (i == list.index) {
+						this.cards[i].checkStauts = true
+					}
+					this.cards[i].img = list['card' + i].img;
+					this.cards[i].price = list['card' + i].price;
+					this.cards[i].flipped = true;
+					this.cards[i].prizeType = list['card' + i].prize_type == undefined ? list['card' + i].prizeType : list[
+						'card' + i].prize_type;
+					this.cards[i].money = list['card' + i].money;
+					this.cards[i].prizeName = list['card' + i].prizeName == undefined ? list['card' + i].prize_name : list[
+						'card' + i].prizeName;
+					this.cards[i].point = list['card' + i].point;
+				}
+				this.$forceUpdate();
+
+			},
+			addWinDetail() {
+				let that = this;
+				this.$refs.uForm.validate().then(res => {
+					addWinDetail(that.model1.userInfo).then(data => {
+						this.showWin = false;
+						if (data.code == 0) {
+							that.saveStatus = false;
+							// uni.redirectTo({
+							// 	url: '/pages/lgz/index/claim' // 目标页面路径
+							// })
+							let params = {
+								type: "success",
+								title: "成功主题(带图标)",
+								message: "提交成功",
+								iconUrl: "https://uviewui.com/demo/toast/success.png",
+							}
+							that.$refs.uToast.show({
+								...params
+							});
+						} else {
+
+						}
+					})
+				}).catch(errors => {
+
+				})
+			},
+			open() {
+				// console.log('open');
+			},
+			close() {
+				this.showUnWin = false;
+				this.showWin = false
+			},
+			flipCard(idx) {
+				if (this.fankaStatu) {
+					return;
+				}
+				if (this.cards[idx].flipped) {
+					return;
+				}
+				this.fankaStatu = true;
+				setTimeout(() => {
+
+					if (this.prizeJson.prizeType == 0 || this.prizeJson.prize_type == 0) {
+						this.showUnWin = true;
+					}
+
+					if ((this.prizeJson.prizeType == 1 || this.prizeJson.prize_type == 1 ||
+							this.prizeJson.prizeType == 2 || this.prizeJson.prize_type == 2 ||
+							this.prizeJson.prizeType == 4 || this.prizeJson.prize_type == 4) &&
+						this.saveStatus) {
+						this.showWin = true;
+					}
+				}, 2500); //弹框延迟3.5秒后显示弹框
+
+				// 标记被点击的卡牌正在翻转
+				this.cards[idx].isFlipping = true;
+				this.cards[idx].checkStauts = true;
+
+				let that = this;
+				// 延迟翻转其他卡牌
+				setTimeout(() => {
+					that.cards[idx].flipped = true;
+					that.cards[idx].isFlipping = false;
+
+					// 其他未翻转的卡牌延迟2秒后同时翻转
+					setTimeout(() => {
+						that.cards.forEach((card, index) => {
+							if (index !== idx && !card.flipped) {
+								card.isFlipping = true;
+								that.$forceUpdate();
+							}
+						});
+
+						// 所有其他卡牌同时翻转
+						setTimeout(() => {
+							that.cards.forEach((card, index) => {
+								if (index !== idx && !card.flipped) {
+									card.flipped = true;
+									card.isFlipping = false;
+									that.$forceUpdate();
+								}
+							});
+						}, 300); // 与其他卡牌翻转动画保持一致
+					}, 1000); // 延迟2秒翻转其他卡牌
+
+
+					// 处理数据逻辑
+					that.totalDetail.splice(idx, 0, this.prizeJson);
+					that.saveData.index = idx;
+// 修改这段代码，添加数组长度检查
+          for (let i = 0; i < that.totalDetail.length; i++) {
+            // 确保 cards 数组在索引 i 处有元素
+            if (that.cards[i]) {
+              that.saveData['card' + i] = that.totalDetail[i];
+
+              that.cards[i].prizeType = that.totalDetail[i].prize_type == undefined ?
+                  that.totalDetail[i].prizeType :
+                  that.totalDetail[i].prize_type;
+              that.cards[i].img = that.totalDetail[i].img;
+              that.cards[i].price = that.totalDetail[i].price;
+              that.cards[i].money = that.totalDetail[i].money;
+              that.cards[i].point = that.totalDetail[i].point;
+              that.cards[i].prizeName = that.totalDetail[i].prizeName == undefined ?
+                  that.totalDetail[i].prize_name :
+                  that.totalDetail[i].prizeName;
+            }
+          }
+
+					that.saveAllCardData();
+				}, 100);
+			},
+			saveAllCardData() {
+				let jsonStr = JSON.stringify(this.saveData);
+				saveCardData(this.scanCode, jsonStr).then(res => {
+					console.log(res)
+				})
+			},
+			// 图片加载错误处理
+			onImageError(e) {
+				console.log('图片加载失败', e);
+				// 可以在这里添加加载失败后的处理逻辑
+			},
+			// 图片加载成功处理
+			onImageLoad(e) {
+				console.log('图片加载成功', e);
+			}
+		}
+	}
+</script>
+
+<style>
+  @import url('../../../static/scss/common_xhc.css');
+
+
+	.content {
+		height: 60vh;
+		border-radius: 10rpx;
+    padding: 10rpx 24rpx;
+		overflow: auto;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+  }
+
+
+	.cards {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 30rpx;
+		width: 100%;
+	}
+
+	.card {
+		width: 100%;
+		height: 310rpx;
+		position: relative;
+		background: none;
+		border-radius: 16rpx;
+		margin: 0;
+		perspective: 1000px;
+	}
+
+	.card-inner {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		transition: transform 0.8s cubic-bezier(0.5, 1.5, 0.5, 1);
+		transform-style: preserve-3d;
+	}
+
+	.card.flipping .card-inner {
+		transform: rotateY(180deg);
+	}
+
+	.card.flipped .card-inner {
+		transform: rotateY(180deg);
+	}
+
+	.card-front,
+	.card-back {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		backface-visibility: hidden;
+	}
+
+	.card-back {
+		transform: rotateY(180deg);
+	}
+
+	.card-back-text {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		width: 100%;
+		text-align: center;
+		color: #ffffff;
+		font-weight: bold;
+		font-size: 28rpx;
+		transform: translateY(-50%);
+		z-index: 2;
+		pointer-events: none;
+	}
+
+
+	.card-img {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+
+
+	::v-deep .popup-win .u-popup__content {
+		height: 600rpx;
+		width: 500rpx;
+		background-color: rgba(0, 0, 0, 0) !important;
+		background-image:
+			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/card_img.png");
+		background-size: 100% 100%;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+  ::v-deep .popup-unWin .u-popup__content {
+    height: 600rpx;
+    width: 500rpx;
+    background-color: rgba(0, 0, 0, 0) !important;
+    background-image:
+        url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/card_img.png");
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+	::v-deep .u-popup__content__close--top-right {
+		top: 510rpx !important;
+		right: 245rpx !important;
+		color: #ffffff;
+	}
+
+
+	::v-deep .u-form-item__body {
+		padding: 8rpx;
+	}
+
+	::v-deep uni-view.u-form-item__body__left {
+		background: #AD7F55;
+		border-radius: 5px 0px 0px 5px;
+		border: 2px solid #63462B;
+		border-right: none;
+	}
+
+	::v-deep .u-form-item__body__right {
+		background-color: #fff;
+		border-radius: 0px 5px 5px 0px;
+		border: 2px solid #63462B;
+	}
+
+	::v-deep uni-text.u-form-item__body__left__content__label {
+		color: #fff !important;
+		padding-left: 4px;
+		letter-spacing: 2px;
+	}
+
+	.popup-flex {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+
+	}
+
+	.popup-content-scroll {
+		flex: 1;
+    height: 100%;
+	}
+
+
+
+	::v-deep .u-swiper {
+		background-color: rgba(0, 0, 0, 0) !important;
+		padding: 0px 20rpx !important;
+		width: 90%;
+	}
+
+	::v-deep .u-col-4 {
+		display: flex !important;
+		justify-content: center !important;
+		/* 水平居中 */
+		align-items: center !important;
+		/* 垂直居中 */
+	}
+
+	::v-deep .right-col .u-col-4 {
+		display: flex !important;
+		justify-content: flex-end !important;
+		/* 水平居中 */
+		align-items: center !important;
+		/* 垂直居中 */
+	}
+
+
+	.select-tag {
+		position: absolute;
+		right: 0px;
+
+		font-weight: 400;
+		font-size: 20rpx;
+		color: #FFFFFF;
+		width: 40px;
+		text-align: center;
+		background-color: #11BC64;
+		height: 15px;
+		border-radius: 3px;
+		line-height: 15px;
+		z-index: 5;
+	}
+
+
+
+	.card-img-item {
+		height: 100rpx;
+		display: flex;
+		justify-content: center;
+	}
+
+	.card-money {
+		font-weight: 500;
+		font-size: 36rpx;
+		color: #FF31C2;
+    position: absolute;
+    top: 10rpx;
+    left: 24px;
+	}
+
+	.card-point {
+		font-weight: 500;
+		font-size: 36rpx;
+		color: yellow;
+	}
+
+	.card-text-1 {
+		font-weight: 500;
+		font-size: 30rpx;
+		color: #000000;
+    margin: 10rpx;
+	}
+
+	.card-text-2 {
+		font-weight: 500;
+		font-size: 22rpx;
+		color: #FB911B;
+	}
+
+	.popup-title {
+		width: 320rpx;
+		height: 60rpx;
+		background: linear-gradient(45deg, #A767DF, #E7CFFF, #6B51D5, #F6ECFC);
+		border-radius: 30rpx;
+		text-align: center;
+		margin-top: -20px;
+		margin-left: 96rpx;
+		line-height: 60rpx;
+		font-weight: bold;
+		font-size: 36rpx;
+		color: #000000;
+	}
+
+	.card_logo {
+		height: 80rpx;
+	}
+
+
+	.jf_text {
+		font-weight: bold;
+		font-size: 50rpx;
+		color: #F94C28 ;
+    margin-top: 10rpx;
+	}
+
+	.card-logo-popup {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.popup_text1 {
+		font-weight: bold;
+		font-size: 36rpx;
+		color: #FB911B;
+		text-align: center;
+    margin-top: 36%;
+	}
+  .popup_text1_2 {
+    font-weight: bold;
+    font-size: 36rpx;
+    color: #FB911B;
+    text-align: center;
+    margin: 68rpx;
+  }
+
+	.center {
+		display: flex;
+		justify-content: center;
+	}
+
+	.popup_img {
+		height: 120rpx;
+		margin-top: -32rpx;
+	}
+
+	.pupup_text2 {
+		font-weight: bold;
+		font-size: 30rpx;
+    color: #FF6B6B;
+    margin-top: 10rpx;
+
+	}
+
+	.pupup_text3 {
+		font-weight: bold;
+		font-size: 30rpx;
+		color: #FF6B6B;
+		margin-top: 20rpx;
+	}
+
+	.pupup_textMoney {
+		font-weight: 500;
+		font-size: 46rpx;
+		color: #FF6B6B;
+    margin-top: 150rpx;
+	}
+
+  .confirm-btn-container {
+    display: flex;
+    justify-content: center;
+
+  }
+  .popup-unWin .confirm-btn-container{
+    margin-top: 50rpx;
+  }
+
+  .confirm-btn {
+    width: 200rpx;
+    height: 70rpx;
+    background-color: #FF982F;
+    color: #4C2003;
+    border-radius: 35rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32rpx;
+    font-weight: bold;
+  }
+
+  .card-title {
+    display: flex;
+    justify-content: center;
+  }
+  .red-title-box {
+    background-color: #FF982F;
+    color: #FFFFFF;
+    text-align: center;
+    padding: 20rpx;
+    border-radius: 10rpx;
+    font-weight: bold;
+    font-size: 28rpx;
+    width: auto;
+    height: 16rpx;
+    line-height: 16rpx;
+    margin: 0rpx 0 15rpx;
+  }
+
+
+
+</style>

pages/xhc/index/rules.vue

@@ -0,0 +1,229 @@
+<template>
+	<view class="common">
+		<view class="body">
+      <view class="top-class"></view>
+      <view class="title">
+        <view class="logo-container">
+          <image class="logo-text" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png"  />
+        </view>
+        <view class="title-1">
+          <view class="title-image-2"></view>
+        </view>
+      </view>
+      <view class="head">
+        <u-row class="row-class"  justify="flex-end">
+          <u-col span="4">
+            <image class="logo-rules-2" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/rules.png"  />
+          </u-col>
+        </u-row>
+      </view>
+
+
+			<view class="content-2">
+        <view class="content-title">
+          活动规则
+        </view>
+
+				<view class="content_text">
+					<view class="h1" style="margin-top: 40rpx;">
+						.活动规则
+					</view>
+					<view class="text_1">
+						凡购买我司产品，扫描外包装背后二维码，即有机会参与优惠活动，赢取优惠或实物礼品。
+					</view>
+					<view class="h1">
+						.扫码有效时间
+					</view>
+					<view class="text_1">
+						本产品生产日期开始有效期内可以扫码参与优惠活动。
+					</view>
+					<view class="h1">
+						.扫码次数
+					</view>
+					<view class="text_1">
+						每个微信号，单日扫码活动以5次为限。
+					</view>
+					<view class="h1">
+						.活动参与方式
+					</view>
+					<view class="text_1">
+						1.通过手机扫描外包装背面二维码，进入优惠界面。
+					</view>
+					<view class="text_1">
+						2.撕开包装，输入内侧验证码参与优惠活动。
+					</view>
+					<view class="h1">
+						.活动奖品
+					</view>
+					<u-row   class="row-class" customStyle="margin-bottom: 5px" v-for="(item, index) in planDetails">
+						<u-col span="12" textAlign ="left" >
+							<view class=" item-text">{{item.prize_name}}</view>
+						</u-col>
+					</u-row>
+
+				</view>
+
+
+			</view>
+      <view class="return_view">
+        <view class="return-button" @click="goBack">返回</view>
+      </view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+
+	import {
+		getRule
+	} from '@/api/scan'
+	export default {
+
+		data() {
+			return {
+				scanCode: '',
+				planDetails: []
+			}
+		},
+		onLoad() {
+			this.scanCode = uni.getStorageSync('scanCode');
+			this.initRuleData();
+
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack();
+			},
+			initRuleData() {
+				getRule(this.scanCode).then(res => {
+					console.log(res)
+					if (res.code == 0) {
+						this.planDetails = res.data.planDetails;
+					}
+				})
+			}
+
+		}
+	}
+</script>
+
+<style>
+@import url('../../../static/scss/common_xhc.css');
+
+	.row-class {
+		height: 80rpx;
+	}
+
+	.item-text{
+		font-weight: 500;
+		font-size: 30rpx;
+		color:  #EC6B25;
+	}
+
+
+	.content {
+		height: 65vh;
+		padding: 10rpx 24rpx;
+		overflow: auto;
+		align-items: center;
+		justify-content: center;
+    border-radius: 48px;
+    background: #FDE2B1;
+    border: 6px solid #FB911b;
+    margin: 10vh 40rpx 0rpx;
+
+	}
+
+
+
+	::v-deep .u-popup__content {
+		height: 720rpx;
+		width: 600rpx;
+		background-color: rgba(0, 0, 0, 0) !important;
+		background-image:
+			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiPopup.png");
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+
+	::v-deep .u-popup__content__close--top-right {
+		top: 720rpx !important;
+		right: 288rpx !important;
+	}
+
+
+	::v-deep .u-form-item__body {
+		padding: 8rpx;
+	}
+
+	::v-deep uni-view.u-form-item__body__left {
+		background: #AD7F55;
+		border-radius: 5px 0px 0px 5px;
+		border: 2px solid #63462B;
+		border-right: none;
+	}
+
+	::v-deep .u-form-item__body__right {
+		background-color: #fff;
+		border-radius: 0px 5px 5px 0px;
+		border: 2px solid #63462B;
+	}
+
+	::v-deep uni-text.u-form-item__body__left__content__label {
+		color: #fff !important;
+		padding-left: 4px;
+		letter-spacing: 2px;
+	}
+
+	.popup-flex {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		/* 或具体高度如340px，确保撑满弹窗 */
+		min-width: 600rpx;
+	}
+
+	.popup-content-scroll {
+		flex: 1;
+	}
+
+	.popup-footer {
+		flex-shrink: 0;
+		padding: 0rpx 0 60rpx 0px;
+		text-align: center;
+		background: transparent;
+		/* 可选，确保无背景遮挡 */
+	}
+
+
+	::v-deep .u-swiper {
+		background-color: rgba(0, 0, 0, 0) !important;
+		padding: 0px 20rpx !important;
+		width: 90%;
+	}
+
+
+	::v-deep .right-col .u-col-4 {
+		display: flex !important;
+		justify-content: flex-end !important;
+		/* 水平居中 */
+		align-items: center !important;
+		/* 垂直居中 */
+	}
+
+	.h1 {
+		font-weight: bold;
+		font-size: 28rpx;
+		color: #F8D994;
+		margin-bottom: 10rpx;
+	}
+
+	.text_1 {
+		font-weight: 400;
+		font-size: 12px;
+		color: #F8D994;
+		margin-bottom: 10rpx;
+	}
+</style>

pages/xhc/introduction/introduction.vue

@@ -0,0 +1,106 @@
+<template>
+	<view class="common">
+		<view class="body">
+      <view class="top-class"></view>
+      <view class="title">
+        <view class="logo-container">
+          <image class="logo-text" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png"  />
+        </view>
+        <view class="title-1">
+          <view class="title-image-2"></view>
+        </view>
+      </view>
+      <view class="head">
+        <u-row class="row-class"  justify="flex-end">
+          <u-col span="4">
+            <image class="logo-rules-2" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/rules.png"  />
+          </u-col>
+        </u-row>
+      </view>
+			<view class="content-2">
+
+          <view class="content-title">
+            公司简介
+          </view>
+					<view class="content_text">
+              <view class="js-content">
+
+              </view>
+
+					</view>
+
+
+			</view>
+      <view class="return_view">
+        <view class="return-button"  @click="goBack()">返回</view>
+      </view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack();
+			},
+			openDetail(){
+				uni.navigateTo({
+					url: '/pages/qilang/index/rules'
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+@import url('../../../static/scss/common_xhc.css');
+
+	.row-class {
+		height: 80rpx;
+	}
+	.logo-rules{
+		width: 140rpx;
+	}
+
+  .content_text{
+    height: calc(100% - 80rpx);
+    overflow: auto;
+  }
+	.content {
+		height: 69vh;
+		border-radius: 10rpx;
+    padding: 10rpx 24rpx;
+		overflow: auto;
+		align-items: center;
+		justify-content: center;
+    border-radius: 48px;
+    background: #FDE2B1;
+    border: 6px solid #FB911b;
+    margin: 10vh 40rpx 0rpx;
+  }
+
+  .js-content{
+    background-image: url(https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/jieshao.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 100%;
+  }
+
+  ::v-deep .u-text__value{
+    text-indent: 2em !important; /* 首行缩进两个汉字宽度 */
+  }
+
+.text{
+  color: #3D3D3D;font-size: 13px;text-indent: 2em;
+}
+</style>

pages/xhc/my/my.vue

@@ -0,0 +1,182 @@
+<template>
+	<view class="intro-page common">
+    <view class="top-class"></view>
+    <view class="title">
+      <view class="logo-container">
+        <image class="logo-text" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png"  />
+      </view>
+      <view class="title-1">
+        <view class="title-image-2"></view>
+      </view>
+    </view>
+    <view class="head">
+      <u-row class="row-class"  justify="flex-end">
+        <u-col span="4">
+          <image class="logo-rules-2" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/rules.png"  />
+        </u-col>
+      </u-row>
+    </view>
+
+		<view class="content-2">
+      <view class="content-title">
+        个人中心
+      </view>
+			<view  style = "margin-top: 100rpx">
+				<u-row customStyle="margin-bottom: 10px">
+					<u-col span="4">
+						<image class="tubiao"
+							:src="image"
+							mode="aspectFit" />
+					</u-col>
+					<u-col span="8">
+						<view class="jf_phone">
+							{{userPhone}}
+						</view>
+					</u-col>
+
+				</u-row>
+			</view>
+      <view class="content_title">
+        我的服务
+		  </view>
+			<view class="">
+				<u-row style="height: 200rpx;">
+					<u-col span="4" textAlign="center" @click="jumpScanLog">
+						<image class="tubiao" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/qilang/scan.png" mode="aspectFit" />
+						<view class="text-class">
+							扫码记录
+						</view>
+					</u-col>
+				</u-row>
+			</view>
+
+
+		</view>
+    <view class="return_view">
+      <view class="return-button" @click="goBack()">返回</view>
+    </view>
+	</view>
+</template>
+
+<script>
+	import CustomTabbar from '@/components/tabbar_common.vue';
+	import {
+		getMiniCustomerUserInfo
+	} from '@/api/scan';
+	export default {
+		components: {
+			CustomTabbar
+		},
+		data() {
+			return {
+				userPhone: '',
+				point: 0,
+        image:'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png'
+			}
+		},
+		onLoad() {
+			this.initUserData();
+		},
+		methods: {
+      openDetail() {
+        uni.navigateTo({
+          url: '/pages/xhc/index/rules'
+        });
+      },
+			initUserData() {
+				let that = this;
+				getMiniCustomerUserInfo().then(res => {
+
+					if (res.code === 0) {
+						that.userPhone = res.data.phone;
+						that.point = res.data.point;
+            // 验证图片路径是否为有效字符串，避免将布尔值当作路径
+            if (typeof res.data.image === 'string' && res.data.image !== '' && res.data.image != null && res.data.image.startsWith('http')){
+              that.image = res.data.image;
+            } else {
+              // 如果不是有效的图片路径，使用默认图片
+              that.image = 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png';
+            }
+						console.log(that.point);
+					}
+				})
+			},
+			goBack() {
+				uni.navigateBack();
+			},
+			jumpScanLog() {
+				uni.navigateTo({
+					url: '/pages/xhc/record/record'
+				});
+			},
+      // 图片加载错误处理
+      onImageError(e) {
+        console.log('图片加载失败', e);
+        // 可以在这里设置默认图片
+        this.image = 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png';
+      },
+      // 图片加载成功处理
+      onImageLoad(e) {
+        console.log('图片加载成功', e);
+      },
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import url('../../../static/scss/common_xhc.css');
+
+	.row-class {
+		height: 80rpx;
+	}
+	.content_text {
+		height: calc(100% - 300rpx);
+	}
+  .content_title {
+    font-weight: 700;
+    font-size: 38rpx;
+    color: #F8D994;
+    margin-bottom: 10rpx;
+    margin-left: 30rpx;
+  }
+
+
+	.content {
+		height: 64vh;
+		border-radius: 10rpx;
+    margin: 16vh 40rpx 0vh 40rpx;
+		padding: 10rpx 24rpx;
+		overflow: auto;
+		align-items: center;
+		justify-content: center;
+    border-radius: 48px;
+    background: #FDE2B1;
+    border: 6px solid #FB911b;
+	}
+
+	.tubiao {
+		background-size: cover;
+		/* 确保背景图片自适应填充整个容器 */
+		background-position: center;
+		/* 背景图片居中显示 */
+		background-repeat: no-repeat;
+		/* 防止背景图重复 */
+		height: 120rpx;
+		width: 100%;
+	}
+
+	.text-class {
+    font-weight: 600;
+    font-size: 16px;
+    color: #FDE2B1;
+	}
+
+	.jf_phone {
+		font-weight: bold;
+		font-size: 30rpx;
+		color: #000000;
+		margin-bottom: 10rpx;
+	}
+
+</style>

pages/xhc/record/record.vue

@@ -0,0 +1,248 @@
+<template>
+	<view class="intro-page common">
+    <view class="top-class"></view>
+    <view class="title">
+      <view class="logo-container">
+        <image class="logo-text" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png"  />
+      </view>
+      <view class="title-1">
+        <view class="title-image-2"></view>
+      </view>
+    </view>
+    <view class="head">
+      <u-row class="row-class"  justify="flex-end">
+        <u-col span="4">
+          <image class="logo-rules-2" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/rules.png"  />
+        </u-col>
+      </u-row>
+    </view>
+
+		<!-- 公司简介内容卡片 -->
+		<view class="content-2">
+      <view class="content-title">
+        扫码记录
+      </view>
+			<view class="content_text">
+				<view class="filter-btn-group "  style="margin: 30rpx 0rpx">
+					<view class="row-text">发放状态：</view>
+					<view v-for="(item, idx) in filterOptions" :key="idx"
+						:class="['filter-btn', filterStatus === item.value ? 'active' : '']"
+						@click="onFilterChange(item.value)">
+						{{ item.label }}
+					</view>
+				</view>
+				<view class="filter-btn-group list-title">
+					<view class="son">
+						奖品名称
+					</view>
+					<view class="son">
+						中奖时间
+					</view>
+					<view class="son">
+						兑换状态
+					</view>
+
+					<view>
+						操作
+					</view>
+				</view>
+				<view class="content-list">
+					<image v-if="list == null || list.length == 0 " style="height: 240rpx;margin-top: 140rpx"
+						src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/qilang/noData.png"
+						mode="heightFix"></image>
+					<template v-for="(item, index) in list">
+						<view class="row-one" :key="index">
+							<view class="filter-btn-group">
+                <view class="son" v-if="item.prize_type === 2">
+                  再来一包
+                </view>
+                <view class="son" v-else-if="item.prize_type === 4">
+                  {{item.prize_detail}}积分
+                </view>
+                <view class="son" v-else>
+                  {{ item.prize_name }}
+                </view>
+								<view class="son">
+									{{ item.zhongjiang_time }}
+								</view>
+								<view class="son">
+									{{ item.duijiang_status }}
+								</view>
+								<view class="detail-btn" @click="toggleDetail(index)">
+									详情
+								</view>
+							</view>
+
+							<!-- 只有当 detailVisible 为 true 时才显示 detail 部分 -->
+							<view class="detail" v-if="item.detailVisible">
+								<view class="text-one">
+									详情：{{item.prize_detail}}
+								</view>
+								<view class="text-two">
+									发放时间：{{ item.send_time != undefined ? item.send_time : '--'  }} <!-- 这里可以填入合适的数据 -->
+								</view>
+							</view>
+						</view>
+					</template>
+
+				</view>
+			</view>
+
+		</view>
+    <view class="return_view">
+      <view class="return-button"  @click="goBack">返回</view>
+    </view>
+
+	</view>
+</template>
+
+<script>
+import {
+  scanQuery
+} from '@/api/scan'
+import recordMixin from '@/mixins/recordMixin.js'
+
+export default {
+  mixins: [recordMixin],
+  onLoad() {
+    this.scanCode = uni.getStorageSync('scanCode');
+    // 调用 mixin 中的通用方法
+    this.baseInitGetlist(scanQuery);
+  },
+  methods: {
+    onFilterChange(val) {
+      this.filterStatus = val;
+      this.baseInitGetlist(scanQuery);
+    },
+    initGetlist() {
+      // 调用 mixin 中的通用方法
+      this.baseInitGetlist(scanQuery);
+    },
+    openDetail() {
+      uni.navigateTo({
+        url: '/pages/xhc/index/rules'
+      });
+    },
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import url('../../../static/scss/common_xhc.css');
+
+	.row-class {
+		height: 80rpx;
+	}
+	.cardTop{
+		background-image:
+			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/smjl.png");
+	}
+
+	.theme-text {
+		height: 10vh;
+		text-align: center;
+		line-height: 11vh;
+
+		.textImage {
+			height: 80rpx;
+			width: 400rpx;
+		}
+	}
+
+	.content {
+		height: 68vh;
+		padding: 10rpx 24rpx;
+		overflow: auto;
+		align-items: center;
+		justify-content: center;
+    border-radius: 48px;
+    background: #FDE2B1;
+    border: 6px solid #FB911b;
+    margin: 10vh 40rpx 0rpx;
+
+	}
+
+	.filter-btn-group {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		gap: 24rpx;
+		margin: 10rpx 0 10rpx 0;
+	}
+
+	.filter-btn {
+		padding: 4rpx 20rpx;
+		border: 2rpx solid #F8D994;
+		color: #F8D994;
+		font-size: 28rpx;
+		transition: all 0.2s;
+	}
+
+	.filter-btn.active {
+		background: #F8D994;
+		color: #000000;
+		border: 2rpx solid #f9f9f9;
+	}
+
+	.row-text {
+		font-weight: bold;
+		font-size: 14px;
+		color: #F8D994 ;
+	}
+
+	.list-title {
+		font-weight: bold;
+		font-size: 28rpx;
+		color: #F8D994 ;
+	}
+
+	.son {
+		width: 140rpx;
+	}
+
+	.row-one {
+		font-weight: 400;
+		font-size: 28rpx;
+		color: #ff9800 ;
+	}
+
+	.detail {
+		background-image: url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/qilang/detailImg.png");
+		background-size: cover;
+		/* 确保背景图片自适应填充整个容器 */
+		background-position: inherit;
+		/* 背景图片居中显示 */
+		background-repeat: no-repeat;
+		/* 防止背景图重复 */
+		height: 134rpx;
+
+		.text-one {
+			height: 70rpx;
+			line-height: 90rpx;
+			text-align: left;
+			margin-left: 20rpx;
+		}
+
+		.text-two {
+			text-align: left;
+			height: 60rpx;
+			line-height: 60rpx;
+			margin-left: 20rpx;
+
+		}
+
+	}
+
+
+
+	.detail-btn {
+		color: #F94C28;
+	}
+
+	.content-list {
+		overflow: auto;
+		text-align: center;
+		height: calc(100% - 160rpx);
+	}
+</style>

pages/xhc/traceability/traceability.vue

@@ -0,0 +1,192 @@
+<template>
+	<view class="intro-page common">
+		<view class="top-class"></view>
+    <view class="title">
+      <view class="logo-container">
+        <image class="logo-text" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png"  />
+      </view>
+      <view class="title-1">
+        <view class="title-image-2"></view>
+      </view>
+    </view>
+    <view class="head">
+      <u-row class="row-class"  justify="flex-end">
+        <u-col span="4">
+          <image class="logo-rules-2" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/rules.png"  />
+        </u-col>
+      </u-row>
+    </view>
+
+		<!-- 公司简介内容卡片 -->
+		<view class="content-2">
+      <view class="content-title">
+        产品溯源
+      </view>
+
+			<view class="content_text">
+				<view class="content_imgView">
+					<image class="img_2" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/commodity_1.png"
+						mode="heightFix" />
+				</view>
+
+        <u-row class="row-class" customStyle="margin-bottom: 5px">
+					<u-col span="4">
+						<view class="item-left item-text">产品名称</view>
+					</u-col>
+					<u-col span="8">
+						<view class="item-text-value">{{info.productName}}</view>
+					</u-col>
+				</u-row>
+				<u-row class="row-class" customStyle="margin-bottom: 5px">
+					<u-col span="4">
+						<view class="item-left item-text">商标名称</view>
+					</u-col>
+					<u-col span="8">
+						<view class="item-text-value">小和醇槟榔</view>
+					</u-col>
+				</u-row>
+				<u-row class="row-class" customStyle="margin-bottom: 5px">
+					<u-col span="4">
+						<view class="item-left item-text">产品类型</view>
+					</u-col>
+					<u-col span="8">
+						<view class="item-text-value">槟榔制品</view>
+					</u-col>
+				</u-row>
+				<u-row class="row-class" customStyle="margin-bottom: 5px">
+					<u-col span="4">
+						<view class="item-left item-text">生产日期</view>
+					</u-col>
+					<u-col span="8">
+						<view class="item-text-value">见包装喷码区</view>
+					</u-col>
+				</u-row>
+				<u-row class="row-class" customStyle="margin-bottom: 5px">
+					<u-col span="4">
+						<view class="item-left item-text">批&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</view>
+					</u-col>
+					<u-col span="8">
+						<view class="item-text-value">{{info.pici}}</view>
+					</u-col>
+				</u-row>
+				<u-row class="row-class" customStyle="margin-bottom: 5px">
+					<u-col span="4">
+						<view class="item-left item-text">保&nbsp;&nbsp;质&nbsp;&nbsp;期</view>
+					</u-col>
+					<u-col span="8">
+						<view class="item-text-value">18个月</view>
+					</u-col>
+				</u-row>
+				<u-row class="row-class" customStyle="margin-bottom: 5px">
+					<u-col span="4">
+						<view class="item-left item-text">出&nbsp;&nbsp;品&nbsp;&nbsp;商</view>
+					</u-col>
+					<u-col span="8">
+						<view class="item-text-value">武汉市胜昌经贸有限公司</view>
+					</u-col>
+				</u-row>
+<!-- 				<u-row class="row-class" customStyle="margin-bottom: 5px">
+					<u-col span="4">
+						<view class="item-left item-text">销售市场</view>
+					</u-col>
+					<u-col span="8">
+						<view class="item-text">湖南长沙</view>
+					</u-col>
+				</u-row> -->
+<!-- 				<u-row class="row-class" customStyle="margin-bottom: 5px">
+					<u-col span="4">
+						<view class="item-left item-text">生产厂址</view>
+					</u-col>
+					<u-col span="8">
+						<view class="item-text">湖南湘潭市湘潭县</view>
+					</u-col>
+				</u-row> -->
+			</view>
+
+
+		</view>
+    <view class="return_view">
+      <view class="return-button" @click="goBack">返回</view>
+    </view>
+
+	</view>
+</template>
+
+<script>
+import {
+  suyuanData
+} from '@/api/scan'
+import traceabilityMixin from '@/mixins/traceabilityMixin.js'
+
+export default {
+  mixins: [traceabilityMixin],
+  onLoad() {
+    this.scanCode = uni.getStorageSync('scanCode');
+    // 调用 mixin 中的方法
+    this.initData(suyuanData);
+  },
+  methods: {
+    // 不再需要定义 initData 方法，使用 mixin 中的方法
+    openDetail(){
+      uni.navigateTo({
+        url: '/pages/xhc/index/rules'
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import url('../../../static/scss/common_xhc.css');
+
+	.row-class {
+		height: 60rpx;
+	}
+
+	.theme-text {
+		height: 10vh;
+		text-align: center;
+		line-height: 11vh;
+
+		.textImage {
+			height: 80rpx;
+			width: 400rpx;
+		}
+	}
+
+
+	::v-deep .item-left {
+		border-radius: 6rpx !important;
+		text-align: center;
+		width: 160rpx !important;
+	}
+
+	.item-text {
+		font-weight: 600;
+		font-size: 30rpx;
+		color: #F8D994;
+	}
+  .item-text-value{
+    font-weight: 600;
+    font-size: 30rpx;
+    color: #FCEFCB;
+  }
+
+
+
+
+
+	.img_2{
+		height: 280rpx;
+	}
+	.img_3{
+		height: 210rpx;
+		width: 350rpx;
+		margin-top: -150rpx;
+	}
+	.content_imgView{
+        margin-top: 40rpx;
+		display: flex;
+		justify-content: center;
+	}
+</style>

static/scss/common_xhc.css

@@ -0,0 +1,263 @@
+.common {
+	height: 100vh;
+	width: 100vw;
+	background-image:
+		url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/bgi.png");
+	/* 使用绝对路径 */
+	background-size: 100% 100%;
+	/* 确保背景图片自适应填充整个容器 */
+	background-position: center;
+	/* 背景图片居中显示 */
+	background-repeat: no-repeat;
+	/* 防止背景图重复 */
+	overflow: auto;
+}
+
+.top-class {
+	height: 5vh;
+}
+
+.head {
+	height: 4vh;
+	line-height: 4vh;
+}
+
+.body {
+	height: calc(100vh - 160rpx);
+}
+
+.title {
+	font-weight: bold;
+	font-size: 40rpx;
+	color: #FFFFFF;
+	text-align: center;
+	height: 6vh;
+	line-height: 6vh;
+}
+.head {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.logo-rules {
+	height: 160rpx;
+	width: 54rpx;
+	display: block;
+	margin-right: 20rpx;
+	margin-top: 50rpx;
+}
+.logo-rules-2 {
+	height: 160rpx;
+	width: 54rpx;
+	display: block;
+	margin-right: 150rpx;
+	margin-top: 50rpx;
+}
+.logo-text{
+	height: 60rpx;
+	width: 140rpx;
+}
+
+.logo-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 20rpx 0;
+}
+
+.logo-container image {
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
+}
+
+.title-image {
+	width: 600rpx;
+	height: 100rpx;
+	background-image: url(https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/textImg.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+	margin: 0 auto;
+}
+.title-image-2 {
+	width: 500rpx;
+	height: 70rpx;
+	background-image: url(https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/textImg.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+	margin: 0 auto;
+}
+
+.footer-btn {
+	position: fixed;
+	/* 固定位置 */
+	left: 0;
+	/* 距离页面左侧为0 */
+	bottom: 30rpx;
+	/* 距离页面底部为0 */
+	width: 100%;
+	/* 宽度为100%，确保按钮横跨整个底部 */
+	display: flex;
+	/* 启用 Flexbox 布局 */
+	justify-content: center;
+	/* 水平居中 */
+	align-items: center;
+	/* 垂直居中 */
+	z-index: 999;
+	/* 确保按钮在最上层 */
+}
+
+.return-button {
+	width: 120rpx;
+	border: none;
+	color: #000000;
+	font-weight: 600;
+	font-size: 26rpx;
+	text-align: center;
+	letter-spacing: 4rpx;
+	/* 设置文字间距为2px */
+	font-weight: 600;
+	height: 50rpx;
+	line-height: 50rpx;
+	border-radius: 8rpx;
+	cursor: pointer;
+	/* 鼠标指针效果 */
+	background: #FFBD70;
+	border-radius: 20rpx;
+
+}
+
+.return_view {
+	display: flex;
+	justify-content: center;
+	height: 30px;
+	margin-top: 30rpx;
+}
+
+.content_text{
+	height: calc(100% - 80rpx);
+	overflow: auto;
+	margin-top: 30rpx;
+
+}
+
+.row-class {
+	height: 80rpx;
+}
+
+
+.logo-img {
+	background-size: cover;
+	/* 确保背景图片自适应填充整个容器 */
+	background-position: center;
+	/* 背景图片居中显示 */
+	background-repeat: no-repeat;
+	/* 防止背景图重复 */
+	height: 100rpx;
+	width: 62%;
+	margin-right: 80rpx;
+}
+
+.commodity-img {
+	background-size: cover;
+	/* 确保背景图片自适应填充整个容器 */
+	background-position: center;
+	/* 背景图片居中显示 */
+	background-repeat: no-repeat;
+	/* 防止背景图重复 */
+	height: 72rpx;
+	width: 100%;
+}
+
+.topImg{
+	display: flex;
+	justify-content: center;
+	margin-top: 120rpx;
+}
+
+.topImg .img_1{
+	height: 100rpx;
+	margin-top: 20rpx;
+}
+
+.topImg .img_2{
+	height: 80rpx;
+}
+
+.cardTop{
+	margin-bottom: 10rpx;
+	background-image:
+		url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/title_bgi.png");
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+	height: 80rpx;
+	margin-top: 40rpx;
+}
+
+
+.head-ttile {
+	width: 100%;
+	margin: 20rpx 0;
+	text-align: center; /* 确保内容居中 */
+	position: relative;
+}
+
+.head-ttile-img {
+	position: relative;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.ttile-img{
+	z-index: 1;
+	height: 70rpx;
+	width: auto;
+}
+
+.head-ttile-text {
+	position: absolute;
+	top: 8px;
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+	color: #fff;
+	font-size: 28rpx;
+	font-weight: bold;
+	text-align: center;
+}
+.img_3{
+	height: 240rpx;
+	width: 460rpx;
+	margin-top: -150rpx;
+}
+
+
+.content-index {
+	margin-top: 8vh;
+}
+
+
+.content-2 {
+	height: 62vh;
+	padding: 10rpx 24rpx;
+	overflow: auto;
+	align-items: center;
+	justify-content: center;
+	background-image: url(https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/bgi_2.png);
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	margin: 3vh 40rpx 0rpx;
+}
+
+.content-title{
+	text-align: center;
+	font-size: 30rpx;
+	font-weight: 700;
+	margin-top: 10rpx;
+}