Explorar el Código

fix: 活动详情 优化

Cooklalala hace 1 año
padre
commit
d4a73ee8ac
Se han modificado 2 ficheros con 157 adiciones y 98 borrados
  1. 104 73
      orderPages/activityDetail/activityDetail.vue
  2. 53 25
      orderPages/activityDetail/index.rpx.scss

+ 104 - 73
orderPages/activityDetail/activityDetail.vue

@@ -45,95 +45,98 @@
           </view>
         </view>
       </view>
-      <!--          <view class="out1">-->
-      <!--            <view class="flex-col top1">-->
-      <!--              <view class="flex-row justify-center title">-->
-      <!--                <text>退款策略(模块标题)</text>-->
-      <!--              </view>-->
-      <!--              <view class="flex-row">-->
-      <!--                <text>-->
-      <!--                  活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述活动描述-->
-      <!--                </text>-->
-      <!--              </view>-->
-      <!--            </view>-->
-      <!--          </view>-->
       <view class="out2" v-if="activity.couponList">
         <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.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 }}
+            </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>
-
-              <!--            <view class="ticketMsg 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>-->
+              <text v-else class="remarkText">该优惠券暂无使用说明</text>
             </view>
           </view>
         </view>
-
-        <!--              <view class="flex-row justify-between link">-->
-        <!--                <text>跳转一</text>-->
-        <!--                <u-icon  name="arrow-right" color="" size="12"></u-icon>-->
-        <!--              </view>-->
-
-        <!--              <view class="flex-row justify-between link">-->
-        <!--                <text>跳转一</text>-->
-        <!--                <u-icon name="arrow-right" color="" size="12"></u-icon>-->
-        <!--              </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="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 class="ticketMsg">
-                适用门店:{{ i.useStoreDesc || '' }}
+            </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>
@@ -149,7 +152,6 @@
               <text class="money">{{ i.reachPrice }}</text>
               <text class="desc">储值额度</text>
             </view>
-
             <view class="h-center-content flex-col justify-around">
               <view class="h-value">
                 <text>{{ i.name }}</text>
@@ -160,7 +162,7 @@
       </view>
     </view>
 
-    <view class="flex-row justify-center inBtnView">
+    <view v-if="!isShareMax" class="flex-row justify-center inBtnView">
       <view class="inBtn" @click="beforeCommitOrder" v-if="!isActivityCheck">立即参与</view>
       <view class="inBtn" v-else>已参与</view>
     </view>
@@ -187,6 +189,7 @@ export default {
   },
   data() {
     return {
+      showRemarkId: '',
       userInfo: {},
       subOrderNo: '',
       id: '',
@@ -202,6 +205,7 @@ export default {
       isShare: false,
       inviteUserId: null,
       inviteOrderId: null,
+      isShareMax:false,
     }
   },
 
@@ -263,10 +267,36 @@ export default {
     this.listServiceObject()
   },
   methods: {
+    showRemark(item) {
+      if (this.showRemarkId == item.id) {
+        this.showRemarkId = ''
+
+      } else {
+        this.showRemarkId = item.id
+
+      }
+    },
     // 查询服务对像信息列表
     listServiceObject() {
       let serviceObjectList = []
       this.$api.listServiceObject(this.reqParm).then((res) => {
+        if (this.isShare) {
+          if (res.data.data.length === 0) {
+            uni.showToast({
+              duration: 2500,
+              title: '当前账号没有服务对象,即将跳转服务对象绑定',
+              icon: 'none',
+            });
+            setTimeout(() => {
+              uni.hideToast();
+              //关闭提示后跳转
+              uni.navigateTo({
+                url: '/myPages/serviceObjectFaceAuth/index'
+              })
+            }, 1500)
+          }
+        }
+
         res.data.data.forEach(i => {
           if (i.isSelf != 1) {
             serviceObjectList.push(i)
@@ -336,6 +366,7 @@ export default {
         activityId: this.activity.id,
         storeId: this.storeId,
         inviteUserId: this.inviteUserId,
+        inviteOrderId: this.inviteOrderId,
         techNo: this.techNo
       }).then(res => {
         console.log('++++++++++++++++++订单提交+++++++++++', res)
@@ -375,13 +406,13 @@ export default {
         this.$set(this.activity)
         if (this.isShare) {
           console.log(this.activity)
-          if (this.activity.shareMax !== 0 && this.activity.shareMax < this.activity.shareCount) {
-            this.isShare = false
+          if (this.activity.shareMax > 0 && this.activity.shareMax <= this.activity.shareCount) {
             uni.showToast({
               duration: 3000,
-              title: '已经超出最大分享次数',
+              title: '当前链接已经超出最大分享次数',
               icon: 'none'
             });
+            this.isShareMax = true
           }
         }
       })

+ 53 - 25
orderPages/activityDetail/index.rpx.scss

@@ -1,17 +1,19 @@
-.page{
+.page {
   height: 100vh;
 }
-.content{
+
+.content {
   display: flex;
   flex: 1;
   overflow: auto;
 }
 
-.out1{
+.out1 {
   background: #ffffff;
   padding: 0 32rpx;
 }
-.top{
+
+.top {
   background: #ffffff;
   padding: 20rpx 0;
   font-size: 28rpx;
@@ -20,7 +22,7 @@
   border-bottom: 2rpx solid #f1f1f1;
 }
 
-.top1{
+.top1 {
   background: #ffffff;
   padding: 20rpx 0;
   font-size: 28rpx;
@@ -28,27 +30,37 @@
   line-height: 50rpx;
 }
 
-.title{
+.title {
   font-size: 30rpx;
   font-weight: bold;
   color: #000000;
 }
 
-.price{
+.price {
   font-size: 32rpx;
   font-weight: bold;
   color: #ed569f;
 }
 
-.out2{
+.itemTitle {
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+  line-height: 36rpx;
+  margin-left: 24rpx;
+}
+
+.out2 {
   background: #f7f7f7;
   padding: 0 32rpx 30rpx 32rpx;
 }
-.ticket{
+
+.ticket {
   padding: 20rpx 0;
 }
 
-.ticketList{
+.ticketList {
   width: 686rpx;
   height: 188rpx;
   margin-top: 24rpx;
@@ -56,11 +68,13 @@
   background-repeat: no-repeat;
   background-size: cover;
 }
-.h-text{
+
+.h-text {
   width: 200rpx;
   height: 188rpx;
 }
-.money{
+
+.money {
   height: 52rpx;
   font-size: 36rpx;
   font-family: DINAlternate-Bold, DINAlternate;
@@ -69,7 +83,8 @@
   line-height: 52rpx;
   text-align: center;
 }
-.desc{
+
+.desc {
   height: 36rpx;
   font-size: 20rpx;
   font-weight: 400;
@@ -77,21 +92,22 @@
   line-height: 36rpx;
   text-align: center;
 }
-.h-center-content{
 
+
+.h-center-content {
   height: 188rpx;
 }
 
-.h-value{
+.h-value {
   font-size: 28rpx;
   font-weight: bold;
   color: #333333;
   line-height: 44rpx;
-  margin-top: 24rpx;
+  //margin-top: 24rpx;
   margin-left: 24rpx;
 }
 
-.ticketMsg{
+.ticketMsg {
   font-size: 24rpx;
   font-weight: 400;
   color: #999999;
@@ -99,11 +115,12 @@
   margin-left: 24rpx;
 }
 
-.h-right-content{
+.h-right-content {
   width: 188rpx;
   height: 188rpx;
 }
-.btn{
+
+.btn {
   width: 156rpx;
   height: 64rpx;
   background: #93D21A;
@@ -116,20 +133,20 @@
   text-align: center;
 }
 
-.link{
+.link {
   background: #FFFFFF;
- padding: 10rpx 24rpx;
+  padding: 10rpx 24rpx;
   margin-top: 20rpx;
   line-height: 60rpx;
   font-size: 28rpx;
   color: #999999;
 }
 
-.inBtnView{
+.inBtnView {
   height: 150rpx;
 }
 
-.inBtn{
+.inBtn {
   background: #FFE05C;
   width: 686rpx;
   height: 90rpx;
@@ -143,9 +160,20 @@
   font-weight: bold;
 }
 
-.activityKey{
+.activityKey {
   width: 140rpx;
 }
-.activityValue{
+
+.activityValue {
   flex: 1;
 }
+.remark{
+  width: 646rpx;
+  font-size: 25rpx;
+  line-height: 40rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  padding: 20rpx;
+  text-indent: 2em;
+  color: #999999;
+}