Jelajahi Sumber

feat(cjx): 积分商城功能开发

- 在首页添加积分商城入口
- 实现积分商城页面,包括用户信息展示和积分显示
- 修改登录逻辑,存储用户手机号和积分信息
- 优化错误页面布局,增加超吉炫产品介绍
-调整抽奖弹窗样式,增加积分奖励提示
mws 4 bulan lalu
induk
melakukan
88b0270445
6 mengubah file dengan 259 tambahan dan 193 penghapusan
  1. 1 0
      components/tabbar_cjx.vue
  2. 141 157
      pages/cjx/error.vue
  3. 1 1
      pages/cjx/index/claim.vue
  4. 34 8
      pages/cjx/index/index.vue
  5. 52 12
      pages/cjx/my/my.vue
  6. 30 15
      pages/login.vue

+ 1 - 0
components/tabbar_cjx.vue

@@ -110,6 +110,7 @@
 					getUserInfo(this.loginDate).then(res => {
 						if (res.code === 0) {
 							uni.setStorageSync('Authorization-status', true);
+              uni.setStorageSync('userPhone', res.data.mobile);
 							this.showTabbar = false;
 							this.handleTabSwitch(this.selectedIndex);
 						} else {

+ 141 - 157
pages/cjx/error.vue

@@ -1,167 +1,151 @@
 <template>
-	<view class="intro-page common">
-		<view class="top-class"></view>
-		<view class="title">
-			超吉炫
-		</view>
-		<view class="head">
-			<u-row class="row-class">
-				<u-col span="4">
-					<image class="logo-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo.png" mode="aspectFit" />
-				</u-col>
-				<u-col span="4">
-					<image class="commodity-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/commodity.png" mode="aspectFit" />
-				</u-col>
-				<u-col span="4">
-					 <image class="logo-rules" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/rules.png"  />	
-				</u-col>
-			</u-row>
-		</view>
-		<view class="topImg">
-			 <image class="img_1" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/topImg.png" mode="heightFix" />	
-		</view>
-		<view class="topImg">
-			 <image class="img_2" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/topImg_2.png" mode="heightFix" />	
-		</view>
-		<!-- 公司简介内容卡片 -->
-		<view class="content">
-			<view class="title-1">
-		
-			</view>
-		
-			<view class="detail">
-				 <view class="" style="color: #fff;">
-					{{msg}}
-				 </view>	
-			</view>
-		</view>
-
-	</view>
+  <view class="intro-page common">
+    <view class="top-class"></view>
+    <view class="title">
+      超吉炫
+    </view>
+    <view class="head">
+      <u-row class="row-class">
+        <u-col span="4">
+          <image class="logo-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo.png" mode="aspectFit" />
+        </u-col>
+        <u-col span="4">
+          <image class="commodity-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/commodity.png" mode="aspectFit" />
+        </u-col>
+        <u-col span="4">
+          <image class="logo-rules" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/rules.png"  />
+        </u-col>
+      </u-row>
+    </view>
+
+    <view class="topImg">
+      <image class="img_1" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/topImg.png" mode="heightFix" />
+    </view>
+    <view class="topImg">
+      <image class="img_2" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/topImg_2.png" mode="heightFix" />
+    </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: {
-			
-		}
-	}
+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_cjx.css');
 
-
-	.theme-text {
-		height: 10vh;
-		text-align: center;
-		line-height: 11vh;
-
-		.textImage {
-			height: 80rpx;
-			width: 400rpx;
-		}
-	}
-
-	.intro-card {
-		margin: 0 32rpx;
-		padding: 32rpx 24rpx 24rpx 24rpx;
-		background: rgba(131, 100, 71, 0.5);
-		border-radius: 10rpx;
-
-
-		.intro-view {
-			border: 1px solid #341B10;
-			padding: 10px;
-			margin: 10px;
-			position: relative;
-			
-
-			.intro-label {
-				background-image:
-					url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/label.png");
-				/* 使用绝对路径 */
-				background-size: contain;
-				background-repeat: no-repeat;
-				width: 220rpx;
-				height: 120rpx;
-				position: absolute;
-				margin-top: -70rpx;
-				align-content: center;
-
-				.label-title {
-					font-weight: bold;
-					font-size: 30rpx;
-					color: #341B10;
-					text-align: center;
-					margin-left: 10px;
-					height: 120rpx;
-					line-height: 110rpx;
-				}
-			}
-
-			.intro-content {
-				font-size: 28rpx;
-				color: #5c4322;
-				line-height: 1.8;
-				margin: 20rpx 0px;
-				text-align: justify;
-				height: 50vh;
-				align-content: center;
-			}
-
-			.company-img {
-				width: 100%;
-				height: 260rpx;
-				border-radius: 12rpx;
-				object-fit: cover;
-				margin-top: 10rpx;
-				background: #eee;
-			}
-		}
-
-	}
-	.winning-picture{
-		height: 480rpx;
-		background-image: url(https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiZj.png);
-		background-size: contain;
-		background-position: center;
-		background-repeat: no-repeat;
-		align-content: center;
-		text-align: center;
-	}
-	
-	.center-image {
-		height: 100rpx;
-	    object-fit: contain;     /* 保持图片的宽高比,确保不会被拉伸或裁切 */
-		padding-top: 140rpx;
-	}
-	
-	.content {
-		height: 52vh;
-		border-radius: 10rpx;
-		margin: 20rpx 40rpx;
-		padding: 10rpx 24rpx;
-		overflow: auto;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-image:
-			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/cardBgi.png");
-		background-size: cover;
-		background-position: center;
-		background-repeat: no-repeat;
-	}
-	
-
+.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{
+  margin: 20rpx 40rpx;
+  border-radius: 10rpx;
+  padding: 10rpx;
+  margin-top: 30vh;
+  background-image:
+      url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/cardBgi.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.text-detail{
+  font-weight: 500;
+  font-size: 28rpx;
+  color: #F6F6F9;
+  margin-bottom: 10rpx;
+  padding: 20rpx;
+}
+
+.text-one{
+  font-weight: 400;
+  font-size: 26rpx;
+  color: #FF31C2 ;
+  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>

+ 1 - 1
pages/cjx/index/claim.vue

@@ -31,7 +31,7 @@
 
 			<view class="detail">
 				<view class="text-detail">
-					您所查询的是海南超吉炫科技有限公司荣誉出品的槟榔系列产品,感谢您的购买!
+          您所查询的是超吉炫“新型低纤”精致槟榔,是正牌产品,感谢您的购买!
 				</view>
 				<view class="text-one">
 					此二维码已参与过活动!

+ 34 - 8
pages/cjx/index/index.vue

@@ -87,7 +87,8 @@
 				<u-popup :show="showWin" :round="10" mode="center" @close="close" @open="open" :closeable='true'>
 					<view class="popup-flex">
 						<view class="popup-content-scroll">
-							<view class="popup-title">恭喜您,中奖啦</view>
+							<view class="popup-title" v-if="prizeJson.prizeType == 4 || prizeJson.prize_type == 4" >恭喜您,抽中积分</view>
+							<view class="popup-title" v-else>恭喜您,中奖啦</view>
 							<view class="card-logo-popup">
 								<image class="card_logo"
 									src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo_2.png"
@@ -98,7 +99,7 @@
 							<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>
 							<view class="center">
 								<image v-show="prizeJson.prizeType == 1 || prizeJson.prize_type == 1" class="popup_img"
 									src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/money.png"
@@ -115,9 +116,18 @@
 							<view v-show="prizeJson.prizeType == 2 || prizeJson.prize_type == 2"
 								class="center pupup_text3">
 								请凭包装袋到购买门店兑换!</view>
-							<view v-show="prizeJson.prizeType == 4 || prizeJson.prize_type == 4"
-								class="center pupup_text3">
-								积分已累计!</view>
+							<view v-show="prizeJson.prizeType == 4 || prizeJson.prize_type == 4">
+								<view class="center jf_text">+ {{prizeJson.point}}</view>
+								<view class="center">
+									<image class="card_jf" @click="goShop"
+										src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/shop.png"
+										mode="heightFix" />
+								</view>
+								<view class="center pupup_text3">
+									所获积分可前往积分商城兑换商品
+								</view>
+								
+							</view>
 						</view>
 
 
@@ -300,6 +310,11 @@
 			}
 		},
 		methods: {
+			goShop(){
+				uni.navigateTo({
+					url: '/pages/cjx/shop/shop?type=0'
+				});
+			},
 			openDetail() {
 				uni.navigateTo({
 					url: '/pages/cjx/index/rules'
@@ -371,8 +386,10 @@
 						this.showUnWin = true;
 					}
 
-					if ((this.prizeJson.prizeType == 1 || this.prizeJson.prize_type == 1 || this.prizeJson
-							.prizeType == 2 || this.prizeJson.prize_type == 2) && this.saveStatus) {
+					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秒后显示弹框
@@ -444,7 +461,6 @@
 <style>
 	@import url('../../../static/scss/common_cjx.css');
 
-
 	.text {
 		height: 10vh;
 		text-align: center;
@@ -770,6 +786,16 @@
 	.card_logo {
 		height: 80rpx;
 	}
+	.card_jf {
+		height: 120rpx;
+	}
+
+    .jf_text{
+		font-weight: bold;
+		font-size: 50rpx;
+		color: #E22ADD;
+		margin: 20rpx 0px;
+	}
 
 	.card-logo-popup {
 		display: flex;

+ 52 - 12
pages/cjx/my/my.vue

@@ -34,6 +34,22 @@
 			<view class="cardTop" >
 				
 			</view>
+			<view class="">
+			  <u-row customStyle="margin-bottom: 10px">
+					<u-col span="4">
+						<image class="tubiao" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo3.png" mode="aspectFit" />
+					</u-col>
+					<u-col span="8">
+						<view class="jf_phone">
+							{{userPhone}}
+						</view>
+            <view class="text-class">
+              我的积分: <span class="point">{{ point }} </span>
+						</view>
+					</u-col>
+						
+				</u-row>
+			</view>	
 			<view class="content_text">
 				<u-row style="height: 200rpx;">
 					<u-col span="4" textAlign="center" @click="jumpScanLog">
@@ -42,12 +58,12 @@
 							扫码记录
 						</view>
 					</u-col>
-<!--					<u-col span="4" textAlign="center" @click="jumpScanAddress">-->
-<!--						<image class="tubiao" src="/static/images/tabbar/cjx/scan.png" mode="aspectFit" />-->
-<!--						<view class="">-->
-<!--							业务管理-->
-<!--						</view>-->
-<!--					</u-col>-->
+					<u-col span="4" textAlign="center" @click="jumpScanAddress">
+						<image class="tubiao" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/shopIco.png" mode="aspectFit" />
+						<view class="text-class">
+							积分商城
+						</view>
+					</u-col>
 					<u-col span="4">
 				
 					</u-col>
@@ -68,6 +84,16 @@
 		components: {
 			CustomTabbar
 		},
+    data() {
+      return {
+        userPhone: '',
+        point: 0
+      }
+    },
+    onLoad() {
+      this.userPhone = uni.getStorageSync('userPhone');
+      this.point = uni.getStorageSync('point');
+    },
 		methods: {
 			goBack() {
 				uni.navigateBack();
@@ -79,7 +105,7 @@
 			},
 			jumpScanAddress(){
 				uni.navigateTo({
-					url: '/pages/hexiao/login?uid=14'
+					url: '/pages/cjx/shop/shop?type=0'
 				});
 			}
 
@@ -93,7 +119,9 @@
 	.row-class {
 		height: 80rpx;
 	}
-
+	.content_text{
+		height: calc(100% - 370rpx);
+	}	
 	.theme-text {
 		height: 10vh;
 		text-align: center;
@@ -200,10 +228,22 @@
 		/* 背景图片居中显示 */
 		background-repeat: no-repeat;
 		/* 防止背景图重复 */
-		height: 100rpx;
+		height: 120rpx;
 		width: 100%;
 	}
-	.text-class{
-		color: #fff;
-	}
+  .text-class{
+    color: #fff;
+  }
+  .jf_phone{
+    font-weight: bold;
+    font-size: 30rpx;
+    color: #F5F5F5;
+    color: #fff;
+    margin-bottom: 10rpx;
+  }
+  .point{
+    font-weight: bold;
+    font-size: 30rpx;
+    color: #E22ADD;
+  }
 </style>

+ 30 - 15
pages/login.vue

@@ -55,25 +55,40 @@
  									if (res.data.isWxAuth == 1) {
  										uni.setStorageSync('Authorization-status', true);
  									}
+									uni.setStorageSync('userPhone', res.data.mobile);
+									uni.setStorageSync('point', res.data.point);
  									that.scanCode = res.data.qrCode;
  									setToken(res.data.sessionId)
  									that.path = res.data.page_path;
  									that.verify();
  								} else {
- 								  if(res.code === 98){
-                    uni.showToast({ title: '请重新扫描二维码进入页面', icon: 'none' });
-                  }else{
-                    console.log('登录失败!' + res.msg);
-                  }
+ 									if (res.code === 98) {
+ 										uni.showToast({
+ 											title: '请重新扫描二维码进入页面',
+ 											icon: 'none'
+ 										});
+ 									} else {
+										uni.showToast({
+											title: res.msg,
+											icon: 'none'
+										});
+ 										console.log('登录失败!' + res.msg);
+ 									}
  								}
  							})
  						} else {
  							console.log('登录失败!' + res.errMsg);
-              uni.showToast({ title: res.msg || '登录失败', icon: 'none' });
+ 							uni.showToast({
+ 								title: res.msg || '登录失败',
+ 								icon: 'none'
+ 							});
  						}
  					},
  					fail(err) {
-            uni.showToast({ title: err.msg || '登录失败', icon: 'none' });
+ 						uni.showToast({
+ 							title: err.msg || '登录失败',
+ 							icon: 'none'
+ 						});
  						console.log('登录失败', err);
  					}
  				});
@@ -91,16 +106,16 @@
  						}
 
  						getScanData(this.scanCode).then(res => {
-							let url;
+ 							let url;
  							if (res.code === 0) {
- 								 url = '/pages/' + this.path + '/index/' + res.data.url;
- 								 uni.setStorageSync('scanDetail', res.data);
+ 								url = '/pages/' + this.path + '/index/' + res.data.url;
+ 								uni.setStorageSync('scanDetail', res.data);
  							} else {
-								 url = '/pages/' + this.path + '/error?msg=' + res.msg;
+ 								url = '/pages/' + this.path + '/error?msg=' + res.msg;
  							}
-							uni.redirectTo({
-								url: url // 目标页面路径
-							})
+ 							uni.redirectTo({
+ 								url: url // 目标页面路径
+ 							})
  						})
 
  					} else {
@@ -113,4 +128,4 @@
  			}
  		}
  	}
- </script>
+ </script>