添加次卡规则

subPackages/pages/cardBag/cardBag.js

@@ -18,6 +18,8 @@ Page({
     storeId: wx.getStorageSync('store_id'),
     couponType: ['抵扣券', '满减券', '全额减免', '卡券'], //卡券类型 优惠券类型，1直接抵扣券，2满减券，3全额减免券，4卡券
     couponList: [], //优惠券列表
+    isExplain:false,//详情开关
+    explainIndex:0,
   },
 
   /**
@@ -201,6 +203,13 @@ Page({
       url: '/pages/shoppingMall/shoppingMall',
     })
   },
+    // 打开次卡说明
+    openExplain(e){
+      this.setData({
+        isExplain:!this.data.isExplain,
+        explainIndex:e.currentTarget.dataset.index
+      })
+    },
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

subPackages/pages/cardBag/cardBag.wxml

@@ -12,6 +12,7 @@
 <scroll-view wx:if="{{current==1}}" class="scroll" scroll-y bindscrolltolower="toLower" enable-flex="true">
     <view class="content">
       <view class="conItem" wx:for="{{list}}" data-status = '{{item.status}}' data-id="{{item.id}}" wx:key="index" bindtap="jumpCard" >
+      <view class="conItemTop">
         <view class="leftLine {{item.status!=1?'leftLineDe':''}}"></view>
         <view class="right">
           <view class="titleFrequency">
@@ -31,12 +32,23 @@
             <view class="toUse finish" wx:if="{{item.status==0}}">已使用</view>
             <view class="toUse finish" wx:if="{{item.status==-1}}">已过期</view>
             <view class="toUse finish" wx:if="{{item.status==-2}}">已注销</view>
+            <view class="explainIcon" data-index="{{index}}" catchtap="openExplain">
+                <image wx:if='{{isExplain&&explainIndex==index}}' src="../../../images/icon_up.png"></image>
+                <image wx:else src="../../../images/icon_arrow_gray.png"></image>
+              </view>
           </view>
         </view>
         <view class="cardBg">
           <image src="{{item.status!=1?'https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220610/de_icon.png':'https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220610/cardBg.png'}}"></image>
         </view>
       </view>
+      <view class="explain" wx:if="{{isExplain&&explainIndex==index}}">
+        <view>使用说明:</view>
+        <view>1、请注意，此次卡或优惠券仅在规定的有效期限内有效。过期后将无法使用，请确保在有效期内充分利用。</view>
+        <view>2、此次卡或优惠券一经使用，将不退款、不找零、不兑换现金。并在使用前确认您的需求。</view>
+        <view>3、每位顾客仅限本人使用，以确保公平使用，请遵循相关规定。</view>
+      </view>
+      </view>
       <view class="loading" hidden="{{!loadMore}}">正在载入更多...</view>
       <view class="loading" hidden="{{!loadAll}}">已加载全部</view>
       <view class="no-data" style="display: {{list.length == 0 ? 'block' : 'none'}};">暂无数据~</view>
@@ -78,7 +90,17 @@
     <view class="coupon-redio" wx:if="{{item.status==2}}">
     已过期
     </view>
+    <view class="explainIcon" data-index="{{index}}" catchtap="openExplain">
+          <image wx:if='{{isExplain&&explainIndex==index}}' src="../../../images/icon_up.png"></image>
+          <image wx:else src="../../../images/icon_arrow_gray.png"></image>
+        </view>
     </view>
   </view>
   </view>
+  <view class="explain" wx:if="{{isExplain&&explainIndex==index}}">
+    <view>使用说明:</view>
+    <view>1、请注意，此次卡或优惠券仅在规定的有效期限内有效。过期后将无法使用，请确保在有效期内充分利用。</view>
+    <view>2、此次卡或优惠券一经使用，将不退款、不找零、不兑换现金。并在使用前确认您的需求。</view>
+    <view>3、每位顾客仅限本人使用，以确保公平使用，请遵循相关规定。</view>
+  </view>
 </view>

subPackages/pages/cardBag/cardBag.wxss

@@ -64,16 +64,30 @@
 }
 
 .conItem{
+  margin: 40rpx 30rpx;
+}
+.conItem .conItemTop{
+  display: flex;
+  flex-direction: row;
   background-color: #FFF;
   border-radius: 16rpx;
   width: 690rpx;
   height: 154rpx;
-  flex-direction: row;
-  display: flex;
-  margin: 40rpx 30rpx;
   position: relative;
 }
-
+.explain{
+  margin: 0 auto;
+  margin-top: 10rpx;
+  background-color: #FFF;
+  border-radius: 16rpx;
+  width: 690rpx;
+  padding: 20rpx;
+  font-size: 20rpx;
+  box-sizing:border-box
+}
+.explain view{
+  margin-bottom: 10rpx;
+}
 .leftLine{
   background-color: #FA7D22;
   border-radius: 16rpx 0rpx 0rpx 16rpx;
@@ -256,6 +270,7 @@
 
 .coupon-right {
   flex: 1;
+  width: 400rpx;
   height: 100%;
   padding-left: 30rpx;
 }
@@ -362,4 +377,13 @@
   width: 99rpx;
   height: 38rpx;
   border-radius: 12px 0px 12px 0px;
+}
+.explainIcon{
+  z-index: 999;
+}
+.explainIcon image{
+  width: 54rpx;
+  height: 44rpx;
+  margin-left: 20rpx;
+  margin-top: 8rpx;
 }