Browse Source

format(cjx): 优化抽卡页面代码格式和布局

- 调整了部分 HTML标签的换行方式,提高代码可读性
- 修复了一些小的 UI 样式问题,如积分奖励文字排版- 优化了部分 JavaScript 代码格式,如 if 条件和方法定义
- 调整了 CSS 样式的书写格式,提高一致性
mws 4 months ago
parent
commit
6e165c9b48
1 changed files with 87 additions and 76 deletions
  1. 87 76
      pages/cjx/index/index.vue

+ 87 - 76
pages/cjx/index/index.vue

@@ -19,7 +19,8 @@
 					</u-col>
 					<u-col span="4">
 						<image class="logo-rules"
-							src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/rules.png" @click="openDetail"/>
+							src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/rules.png"
+							@click="openDetail" />
 					</u-col>
 				</u-row>
 			</view>
@@ -63,7 +64,8 @@
 											<view v-show="item.prizeType == 1" class="card-text-1">现金红包</view>
 											<view v-show="item.prizeType == 1" class="card-money">¥{{item.money/100}}
 											</view>
-											<view v-show="item.prizeType == 1" class="card-text-2">已存入您的<br/>微信零钱</view>
+											<view v-show="item.prizeType == 1" class="card-text-2">已存入您的<br />微信零钱
+											</view>
 
 											<view v-show="item.prizeType == 2" class="card-text-1">再来一包</view>
 											<view v-show="item.prizeType == 2" class="card-img-item">
@@ -71,9 +73,9 @@
 											</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 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>
@@ -82,61 +84,68 @@
 					</template>
 
 				</view>
-        <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="card-logo-popup">
-                <image class="card_logo"
-                       src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo_2.png"
-                       mode="heightFix" />
-              </view>
-              <view v-show="prizeJson.prizeType == 1 || prizeJson.prize_type == 1" class="popup_text1">现金红包</view>
-              <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 == 1 || prizeJson.prize_type == 1" class="popup_img"
-                       src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/money.png"
-                       mode="heightFix" />
-                <image v-show="prizeJson.prizeType == 2 || prizeJson.prize_type == 2" 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 == 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>
-
-
-          </view>
-        </u-popup>
-
-        <u-popup :show="showUnWin" :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="card-logo-popup">
-                <image class="card_logo"
-                       src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo_2.png"
-                       mode="heightFix" />
-              </view>
-              <view class="popup_text1"></view>
-              <view class="center">
-                <image class="popup_img"
-                       src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/regret.png"
-                       mode="heightFix" />
-              </view>
-
-              <view class="center pupup_text3">本次抽卡未中奖,下次继续!</view>
-            </view>
-
-          </view>
-        </u-popup>
+				<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="card-logo-popup">
+								<image class="card_logo"
+									src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo_2.png"
+									mode="heightFix" />
+							</view>
+							<view v-show="prizeJson.prizeType == 1 || prizeJson.prize_type == 1" class="popup_text1">
+								现金红包</view>
+							<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 == 1 || prizeJson.prize_type == 1" class="popup_img"
+									src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/money.png"
+									mode="heightFix" />
+								<image v-show="prizeJson.prizeType == 2 || prizeJson.prize_type == 2" 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 == 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>
+
+
+					</view>
+				</u-popup>
+
+				<u-popup :show="showUnWin" :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="card-logo-popup">
+								<image class="card_logo"
+									src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo_2.png"
+									mode="heightFix" />
+							</view>
+							<view class="popup_text1"></view>
+							<view class="center">
+								<image class="popup_img"
+									src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/regret.png"
+									mode="heightFix" />
+							</view>
+
+							<view class="center pupup_text3">本次抽卡未中奖,下次继续!</view>
+						</view>
+
+					</view>
+				</u-popup>
 			</view>
 		</view>
 
@@ -192,7 +201,7 @@
 						money: '',
 						prizeType: '',
 						isFlipping: false,
-            point: ''
+						point: ''
 					},
 					{
 						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/two.png',
@@ -205,7 +214,7 @@
 						money: '',
 						prizeType: '',
 						isFlipping: false,
-            point: ''
+						point: ''
 					},
 					{
 						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/three.png',
@@ -218,7 +227,7 @@
 						money: '',
 						prizeType: '',
 						isFlipping: false,
-            point: ''
+						point: ''
 					},
 					{
 						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/four.png',
@@ -231,7 +240,7 @@
 						money: '',
 						prizeType: '',
 						isFlipping: false,
-            point: ''
+						point: ''
 					},
 					{
 						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/five.png',
@@ -244,7 +253,7 @@
 						money: '',
 						prizeType: '',
 						isFlipping: false,
-            point: ''
+						point: ''
 					},
 					{
 						front: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/six.png',
@@ -257,7 +266,7 @@
 						money: '',
 						prizeType: '',
 						isFlipping: false,
-            point: ''
+						point: ''
 
 					}
 				],
@@ -266,7 +275,7 @@
 				saveData: {},
 				scanCode: '',
 				saveStatus: true,
-				fankaStatu:false,
+				fankaStatu: false,
 			}
 		},
 		onLoad() {
@@ -291,7 +300,7 @@
 			}
 		},
 		methods: {
-			openDetail(){
+			openDetail() {
 				uni.navigateTo({
 					url: '/pages/cjx/index/rules'
 				});
@@ -309,7 +318,7 @@
 					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.cards[i].point = list['card' + i].point;
 				}
 				this.$forceUpdate();
 
@@ -349,7 +358,7 @@
 				this.showWin = false
 			},
 			flipCard(idx) {
-				if(this.fankaStatu){
+				if (this.fankaStatu) {
 					return;
 				}
 				if (this.cards[idx].flipped) {
@@ -412,7 +421,7 @@
 							that.totalDetail[i].prize_type;
 						that.cards[i].img = that.totalDetail[i].img;
 						that.cards[i].money = that.totalDetail[i].money;
-            that.cards[i].point = that.totalDetail[i].point;
+						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;
@@ -725,11 +734,12 @@
 		font-size: 36rpx;
 		color: #FF31C2;
 	}
-  .card-point {
-    font-weight: 500;
-    font-size: 36rpx;
-    color: yellow;
-  }
+
+	.card-point {
+		font-weight: 500;
+		font-size: 36rpx;
+		color: yellow;
+	}
 
 	.card-text-1 {
 		font-weight: 500;
@@ -791,6 +801,7 @@
 		margin-top: 150rpx;
 
 	}
+
 	.pupup_text3 {
 		font-weight: bold;
 		font-size: 30rpx;