fix: 活动详情 优化

myPages/myActivityDetail/index.rpx.scss

@@ -88,7 +88,7 @@
   font-weight: bold;
   color: #333333;
   line-height: 44rpx;
-  margin-top: 24rpx;
+  //margin-top: 24rpx;
   margin-left: 24rpx;
 }
 
@@ -149,4 +149,21 @@
 .activityValue{
   flex: 1;
 }
-
+.itemTitle {
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+  line-height: 36rpx;
+  margin-left: 24rpx;
+}
+.remark{
+  width: 646rpx;
+  font-size: 25rpx;
+  line-height: 40rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  padding: 20rpx;
+  text-indent: 2em;
+  color: #999999;
+}

myPages/myActivityDetail/myActivityDetail.vue

@@ -15,8 +15,7 @@
               <text>活动时间：</text>
             </view>
             <view>
-              <text v-if="activity.valid == 2">{{ activity.validBeginTime.substring(0, 10) }} 至
-                {{ activity.validEndTime.substring(0, 10) }}
+              <text v-if="activity.valid == 2">{{ activity.validBeginTime.substring(0, 10) }} 至 {{ activity.validEndTime.substring(0, 10) }}
               </text>
               <text v-else>长期有效</text>
             </view>
@@ -52,64 +51,93 @@
           <view class="flex-row justify-center title">
             <text>赠送优惠券</text>
           </view>
-
-          <view class="flex-row ticketList" v-for="(i,index) in activity.couponList">
-            <view class="h-text flex-col justify-center ">
-              <text class="money" v-if="i.discountsType == 2">{{ i.discount }}折</text>
-              <text class="money" v-else>{{ i.discountsPrice }}</text>
-              <text class="desc">满{{ i.reachPrice }}可用</text>
-            </view>
-
-            <view class="h-center-content flex-col justify-around">
-              <view class="h-value">
-                <text>{{ i.name }}</text>
+          <view v-for="(item,index) in activity.couponList">
+            <view class="flex-row ticketList">
+              <view class="row-list flex-row justify-start">
+                <view class="h-text flex-col justify-center ">
+                  <view class="money">
+                    <text class="money" v-if="item.discountsType == 2">{{ item.discount }}折</text>
+                    <text class="money" v-else>{{ `减` + item.discountsPrice }}</text>
+                  </view>
+                  <view class="desc">
+                    <text>满{{ item.reachPrice }}可用</text>
+                  </view>
+                </view>
+                <view class="h-center-content flex-col justify-around">
+                  <view class="h-value">
+                    <text>{{ item.name }}</text>
+                  </view>
+                  <view class="itemTitle">
+                    使用次数：{{ item.degree }}
+                  </view>
+                  <view class="itemTitle">
+                    <text v-if="item.validType == 1">领取后{{ item.effectiveDays }}天内有效</text>
+                    <view v-else>
+                      <view>使用期限：{{ item.startTime.substring(0, 10) }}</view>
+                      <view> 至 {{ item.endTime.substring(0, 10) }}</view>
+                    </view>
+                  </view>
+                  <view class="itemTitle flex-row">
+                    <text @click.stop="showRemark(item)">使用规则</text>
+                    <u-icon v-if="item.id == showRemarkId" name="arrow-down-fill" color="" size="12"></u-icon>
+                    <u-icon v-else name="play-right-fill" color="" size="12"></u-icon>
+                  </view>
+                </view>
               </view>
-              <!--            <view class="ticketMsg">-->
-              <!--              使用平台：-->
-              <!--              <text>全平台</text>-->
-              <!--            </view>-->
-
-              <view class="ticketMsg">
-                可用次数/总次数：{{ i.degree }}/{{ i.totalDegree }}
+            </view>
+            <view v-if="showRemarkId == item.id" class="remark" style="text-indent:unset">
+              <view>
+                可用门店:
+                <text>{{ item.useStoreDesc }}</text>
               </view>
-              <view class="ticketMsg">
-                服务项目：{{ i.useServiceDesc }}
+              <view>
+                适用项目:
+                <text>{{ item.useServiceDesc }}</text>
               </view>
-              <view class="ticketMsg">
-                <text v-if="i.validType == 1">领取后{{ i.effectiveDays }}天内有效</text>
-                <view v-else>
-                  <view>使用期限：{{ i.startTime.substring(0, 10) }} 至 {{ i.endTime.substring(0, 10) }}</view>
-                </view>
+              <view v-if="item.remark !=null">
+                使用说明:
+                <text>{{ item.remark }}</text>
               </view>
+              <text v-else class="remarkText">该优惠券暂无使用说明</text>
             </view>
-
           </view>
         </view>
-
-
       </view>
       <view class="out2" v-if="activity.equityList">
         <view class="flex-col ticket">
           <view class="flex-row justify-center title">
             <text>赠送权益卡</text>
           </view>
-
-          <view class="flex-row ticketList" v-for="(i,index) in activity.equityList">
-            <view class="h-text flex-col justify-center ">
-              <text class="money">{{ i.faceValue }}</text>
-              <text class="desc">权益价</text>
-            </view>
-
-            <view class="h-center-content flex-col justify-around">
-              <view class="h-value">
-                <text>{{ i.title }}</text>
+          <view v-for="(i,index) in activity.equityList">
+            <view class="flex-row ticketList">
+              <view class="h-text flex-col justify-center ">
+                <text class="money">{{ i.faceValue }}</text>
+                <text class="desc">权益价</text>
               </view>
-              <view class="ticketMsg">
-                适用门店：{{ i.useStoreDesc || '' }}
+              <view class="h-center-content flex-col justify-around">
+                <view class="h-value">
+                  <text>{{ i.title }}</text>
+                </view>
+                <view class="ticketMsg">
+                  领取后{{ i.effectiveDays }}天内有效
+                </view>
+                <view class="itemTitle flex-row">
+                  <text @click.stop="showRemark(i)">使用规则</text>
+                  <u-icon v-if="i.id == showRemarkId" name="arrow-down-fill" color="" size="12"></u-icon>
+                  <u-icon v-else name="play-right-fill" color="" size="12"></u-icon>
+                </view>
+              </view>
+            </view>
+            <view v-if="showRemarkId == i.id" class="remark" style="text-indent:unset">
+              <view>
+                可用门店:
+                <text>{{ i.useStoreDesc }}</text>
               </view>
-              <view class="ticketMsg">
-                领取后{{ i.effectiveDays }}天内有效
+              <view v-if="i.description !=null">
+                使用说明:
+                <text>{{ i.description }}</text>
               </view>
+              <text v-else class="remarkText">该权益卡暂无使用说明</text>
             </view>
           </view>
         </view>
@@ -148,6 +176,7 @@ export default {
       activityOrderId: '',
       activity: {},
       facePhotoUrl: '',
+      showRemarkId:''
     }
   },
   computed: {
@@ -184,6 +213,15 @@ export default {
     return shareobj //一定要返回对象
   },
   methods: {
+    showRemark(item) {
+      if (this.showRemarkId == item.id) {
+        this.showRemarkId = ''
+
+      } else {
+        this.showRemarkId = item.id
+
+      }
+    },
     // 获取图片
     getImgUrlByBannerOssId(items) {
       this.$api.getImgUrlByOssId({ossId: items}).then(res => {

orderPages/activityDetail/activityDetail.vue

@@ -20,8 +20,7 @@
               <text>活动时间：</text>
             </view>
             <view>
-              <text v-if="activity.valid == 2">{{ activity.validBeginTime.substring(0, 10) }} 至
-                {{ activity.validEndTime.substring(0, 10) }}
+              <text v-if="activity.valid == 2">{{ activity.validBeginTime.substring(0, 10) }} 至 {{ activity.validEndTime.substring(0, 10) }}
               </text>
               <text v-else>长期有效</text>
             </view>