Forráskód Böngészése

个人中心优惠券列表样式调整

kk.shi 3 éve
szülő
commit
585ad0df22
2 módosított fájl, 144 hozzáadás és 17 törlés
  1. 34 17
      pages/luckDraw/profile.wxml
  2. 110 0
      pages/luckDraw/profile.wxss

+ 34 - 17
pages/luckDraw/profile.wxml

@@ -14,37 +14,54 @@
         <view class="luck-draw-cjh"><view class="luck-draw-cj"></view></view>
       </view>
       <!-- 奖品 -->
-      <view class="luck-draw-prize">
+      <view class="luck-draw-prize" catchtap="toDetail">
         <view class="luck-draw-pn">{{productNum}}</view>
         <view class="luck-draw-pz">奖品</view>
       </view>
     </view>
     <view class="luck-draw-theme">
       <!-- 折扣券 -->
-      <view class="luck-draw-content" wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}" catchtap="toDetail">
+      <view class="luck-draw-content" wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}" catchtap="toDetail" wx:if="{{item.couponType == 'D'}}">
+        <view class="luck-draw-words">
+          <view class="luck-draw-discount1">
+            <view class="luck-draw-zkz4">3.6</view>
+            <view class="luck-draw-zkz5">折</view>
+          </view>
+          <view class="luck-draw-discount2">
+            <view class="luck-draw-zkz1">{{item.goodsName}}</view>
+           <view class="luck-draw-mj">
+            <view class="luck-draw-zkz21"></view>
+            <view class="luck-draw-zkz2">{{item.couponTitle}}</view>
+            <view class="luck-draw-zkz22"></view>
+           </view>
+            <view class="luck-draw-zkz3">{{item.couponBeginTimestamp}}-{{item.couponEndTimestamp}}</view>
+          </view>
+        </view>
         <image class="image_zk" src="/images/luck-draw/coupon1.png" />
         <image class="image_zk_un" src="/images/luck-draw/coupon_use_now.png" />
-        <view class="luck-draw-zkz1">{{item.goodsName}}</view>
-        <view class="luck-draw-zkz21"></view>
-        <view class="luck-draw-zkz2">{{item.couponTitle}}</view>
-        <view class="luck-draw-zkz22"></view>
-        <view class="luck-draw-zkz3">{{item.couponBeginTimestamp}}-{{item.couponEndTimestamp}}</view>
-        <view class="luck-draw-zkz4">7</view>
-        <view class="luck-draw-zkz5">折</view>
       </view>
       <!-- 代金券 -->
-      <view class="luck-draw-content">
+      <view class="luck-draw-content" wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}" catchtap="toDetail" wx:if="{{item.couponType == 'C'}}">
         <image class="image_zk" src="/images/luck-draw/cash_coupon.png" />
         <image class="image_zk_un" src="/images/luck-draw/cc_use_now.png" />
-        <view class="luck-draw-zkz1">鲜果茶品活动代金券</view>
-        <view class="luck-draw-zkz21"></view>
-        <view class="luck-draw-zkz2">满199使用</view>
-        <view class="luck-draw-zkz22"></view>
-        <view class="luck-draw-zkz3">2021.10.10-2022.01.02</view>
-        <view class="luck-draw-djz4">¥</view>
-        <view class="luck-draw-djz5">10</view>
+        <view class="luck-draw-words">
+          <view class="luck-draw-discount1">
+            <view class="luck-draw-djz4">¥</view>
+            <view class="luck-draw-djz5">10</view>
+          </view>
+          <view class="luck-draw-discount2">
+            <view class="luck-draw-zkz1">{{item.goodsName}}</view>
+           <view class="luck-draw-mj">
+            <view class="luck-draw-zkz21"></view>
+            <view class="luck-draw-zkz2">{{item.couponTitle}}</view>
+            <view class="luck-draw-zkz22"></view>
+           </view>
+            <view class="luck-draw-zkz3">{{item.couponBeginTimestamp}}-{{item.couponEndTimestamp}}</view>
+          </view>
+        </view>
       </view>
       
+      
     </view>
 </view>
 

+ 110 - 0
pages/luckDraw/profile.wxss

@@ -2,6 +2,7 @@
 .personal{
   width: 750rpx;
   height: auto;
+  padding-bottom: 119rpx;
 }
 
 .head-bg{
@@ -72,3 +73,112 @@
   border-radius: 4rpx;
   margin: 10rpx auto;
 }
+
+.luck-draw-content{
+  width: 708rpx;
+  height: 220rpx;
+  position: relative;
+  margin: 0 auto 20rpx;
+}
+.image_zk{
+  width: 708rpx;
+  height: 220rpx;
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+}
+
+.image_zk_un{
+  display: inline-block;
+  width: 162rpx;
+  height: 56rpx;
+  position:absolute;
+  z-index: 2;
+  bottom: 70rpx;
+  right: 26rpx;
+}
+.luck-draw-discount1,.luck-draw-discount2,.luck-draw-zkz4,.luck-draw-zkz5,.luck-draw-zkz21,.luck-draw-zkz22,.luck-draw-zkz2,.luck-draw-djz4,.luck-draw-djz5{
+  display: inline-block;
+}
+.luck-draw-words{
+  position:relative;
+  z-index: 2;
+  width: 708rpx;
+  height: 220rpx;
+  display: flex;
+  flex-direction: row;
+}
+.luck-draw-discount1{
+  width: 208rpx;
+  height: 100%;
+  text-align: center;
+  line-height: 220rpx;
+}
+.luck-draw-discount1 view:nth-child(1) {
+  position: relative;
+  top: 60rpx;
+}
+
+.luck-draw-discount1 view:nth-child(2) {
+  position: relative;
+  top: 60rpx;
+}
+
+.luck-draw-discount2{
+  width: 500rpx;
+  height: 100%;
+}
+
+.luck-draw-zkz4,.luck-draw-djz5{
+  font-size: 118rpx;
+  font-family: Impact;
+  font-weight: 400;
+  color: #443E5B;
+  line-height: 142rpx;
+}
+
+.luck-draw-zkz5,.luck-draw-djz4{
+  font-size: 40rpx;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #443E5B;
+  line-height: 48rpx;
+}
+
+.luck-draw-zkz1{
+  font-size: 40rpx;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  color: #443E5B;
+  line-height: 32rpx;
+  margin-top: 48rpx;
+  margin-left: 48rpx;
+}
+.luck-draw-mj{
+  margin-left: 48rpx;
+  margin-top: 20rpx;
+  margin-bottom: 20rpx;
+}
+.luck-draw-zkz2{
+  font-size: 26rpx;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #443E5B;
+  line-height: 32rpx;
+}
+.luck-draw-zkz21,.luck-draw-zkz22{
+  width: 14rpx;
+  height: 14rpx;
+  background: #443E5B;
+  transform:rotate(45deg);
+  margin: 0 10rpx;
+}
+.luck-draw-zkz3{
+  font-size: 26rpx;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #443E5B;
+  line-height: 32rpx;
+  margin-left: 48rpx;
+}