优化弹框

activityPages/specialDetail/specialDetail.vue

@@ -5,7 +5,7 @@
         <view class="notice">
           <van-notice-bar color="#FFFFFF" background="#FE9000" text="专项调研行程持续更新中，满五家即开团，欢迎点击感兴趣预报名" />
         </view>
-        <view class="inform-btn" @click="specialFollow">{{ isFollow ? "取消通知" : "新调研通知" }}</view>
+        <view class="inform-btn" @click="specialFollow">{{ specialIsFollow ? "取消通知" : "新调研通知" }}</view>
       </view>
       <view class="content">
         <view class="dialog-title" :class="1 == 1 ? 'brackets-title' : ''">{{ detailData.ResearchTheme }}</view>
@@ -21,6 +21,10 @@
           <view class="network-left">预期时间：</view>
           <view class="network-right">{{ detailData.ActivityTimeText }}</view>
         </view>
+        <view class="network">
+          <view class="network-left">开始时间：</view>
+          <view class="network-right">{{ detailData.ActivityTimeText }}</view>
+        </view>
         <view class="network">
           <view class="network-left">调研形式：</view>
           <view class="network-right">
@@ -44,6 +48,11 @@
             <view class="network-right">{{ detailData.Label }}</view>
           </view>
         </block>
+        <view class="reminder-item">
+          <image v-if="1 == '预报名'" class="item" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Y_apply.png"></image>
+          <image v-if="'行程' === '行程'" class="item" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/confirm_XC.png"></image>
+          <image @click="reminderTextHandler(item)" class="reminder" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/reminder_icon.png"></image>
+        </view>
       </view>
       <view class="" style="height: 50rpx"></view>
       <view class="look-Trip" @click="lookImg">
@@ -61,17 +70,23 @@
     </view>
     <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
     <u-modal
-      v-model="goFollowShow"
+      v-model="specialGoFollowShow"
       :content-style="{ fontSize: '32rpx' }"
-      :show-cancel-button="false"
+      :show-cancel-button="!specialIsHintShow"
       confirm-text="知道了"
       @cancel="isCancelBtn = false"
+      :show-confirm-button="!specialIsHintShow"
       :show-title="false"
       :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
       :confirm-style="{ fontWeight: '700' }"
+      :mask-close-able="specialIsHintShow"
     >
       <view class="slot-content">
-        <rich-text :nodes="accounts"></rich-text>
+        <block v-if="1 == 1">
+          <text>感谢参与，本次报名会扣除一次贵司在弘则的调研点数。</text>
+          <text class="light-hint">由于每场活动人数有限，如果不能参加请提前48小时取消，未及时取消导致影响其他客户报名将会维持扣点。</text>
+        </block>
+        <rich-text v-else :nodes="specialAccounts"></rich-text>
       </view>
     </u-modal>
   </view>
@@ -81,6 +96,7 @@
 import { activity, User } from "@/config/api.js";
 import jurisdiction from "../activityDetail/jurisdiction/components.vue";
 import freeCharge from "@/components/freeCharge";
+import specialMixins from "@/components/activity/specialMixins";
 let app = getApp({ allowDefault: true });
 export default {
   data() {
@@ -92,15 +108,14 @@ export default {
       sellerMobile: "",
       sellerName: "", //销售名称
       msgType: "",
-      isFollow: false,
-      accounts: `您已开启【专项调研】新活动通知<br/><br/>请关注【查研观向小助手】公众号，及时获取微信消息提醒`,
-      goFollowShow: false,
+      specialIsFollow: false,
     };
   },
   components: {
     jurisdiction,
     freeCharge,
   },
+  mixins: [specialMixins],
   watch: {
     haveAuth: {
       handler() {
@@ -116,7 +131,7 @@ export default {
     async getActivityDetail() {
       const res = await activity.getSpecialDetailList({ ActivityId: this.id });
       if (res.Ret == 200) {
-        this.isFollow = res.Data.IsFollow;
+        this.specialIsFollow = res.Data.IsFollow;
         this.haveAuth = res.Data.HasPermission;
         this.industryMsg = res.Data.PopupMsg;
         this.sellerMobile = res.Data.SellerMobile;
@@ -179,7 +194,7 @@ export default {
     },
     //新调研通知
     async specialFollow() {
-      if (this.isFollow) {
+      if (this.specialIsFollow) {
         uni.showModal({
           content: "您要取消【专项调研】新活动通知吗？",
           confirmColor: "#3385FF",
@@ -188,7 +203,7 @@ export default {
             if (res.confirm) {
               const res = await activity.postSpecialFollow();
               if (res.Ret === 200) {
-                this.isFollow = !this.isFollow;
+                this.specialIsFollow = !this.specialIsFollow;
               }
             }
           },
@@ -196,14 +211,14 @@ export default {
       } else {
         const res = await activity.postSpecialFollow();
         if (res.Ret === 200) {
-          this.isFollow = !this.isFollow;
-          this.goFollowShow = true;
+          this.specialIsFollow = !this.specialIsFollow;
+          this.specialGoFollowShow = true;
         }
       }
     },
   },
   onLoad(option) {
-    this.id = option.id || '';
+    this.id = option.id || "";
   },
   async onShow() {
     await this.$store.dispatch("checkHandle");
@@ -278,6 +293,7 @@ export default {
     margin-bottom: -20rpx;
     color: #333333;
     font-size: 28rpx;
+    position: relative;
     view {
       padding-left: 20rpx;
     }
@@ -292,7 +308,27 @@ export default {
       display: inline-block;
       color: #2c83ff;
     }
-
+    .reminder-item {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 204rpx;
+      height: 118rpx;
+      z-index: 9;
+      .item {
+        width: 100%;
+        height: 100%;
+      }
+      .reminder {
+        position: absolute;
+        top: 0rpx;
+        right: 0rpx;
+        width: 28rpx;
+        height: 28rpx;
+        z-index: 10;
+        padding: 10rpx 10rpx 20rpx 20rpx;
+      }
+    }
     .dialog-title {
       width: 682rpx;
       padding: 20rpx;

activityPages/specialResearchPage/specialResearchPage.vue

@@ -4,7 +4,7 @@
       <view class="notice">
         <van-notice-bar color="#FFFFFF" background="#FE9000" text="专项调研行程持续更新中，满五家即开团，欢迎点击感兴趣预报名" />
       </view>
-      <view class="inform-btn" @click="specialFollow">{{ isFollow ? "取消通知" : "新调研通知" }}</view>
+      <view class="inform-btn" @click="specialFollow">{{ specialIsFollow ? "取消通知" : "新调研通知" }}</view>
     </view>
     <!-- 活动列表 -->
     <view>
@@ -31,9 +31,15 @@
                 <text @click="lookImg(item)">行程安排</text>
                 <text class="button" v-if="item.IsSignup !== 1" @click="interest(item)">感兴趣</text>
                 <text class="button" @click="beNotInterested(item)" v-else>已预报名</text>
+                <text class="button" @click="applyOfcancel(item)">感兴趣</text>
               </view>
             </view>
           </view>
+          <view class="reminder-item">
+            <image v-if="1 == '预报名'" class="item" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Y_apply.png"></image>
+            <image v-if="'行程' === '行程'" class="item" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/confirm_XC.png"></image>
+            <image @click="reminderTextHandler(item)" class="reminder" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/reminder_icon.png"></image>
+          </view>
         </view>
         <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
       </view>
@@ -42,17 +48,23 @@
     </view>
     <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
     <u-modal
-      v-model="goFollowShow"
+      v-model="specialGoFollowShow"
       :content-style="{ fontSize: '32rpx' }"
-      :show-cancel-button="false"
+      :show-cancel-button="!specialIsHintShow"
       confirm-text="知道了"
       @cancel="isCancelBtn = false"
+      :show-confirm-button="!specialIsHintShow"
       :show-title="false"
       :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
       :confirm-style="{ fontWeight: '700' }"
+      :mask-close-able="specialIsHintShow"
     >
       <view class="slot-content">
-        <rich-text :nodes="accounts"></rich-text>
+        <block v-if="1 == 1">
+          <text>感谢参与，本次报名会扣除一次贵司在弘则的调研点数。</text>
+          <text class="light-hint">由于每场活动人数有限，如果不能参加请提前48小时取消，未及时取消导致影响其他客户报名将会维持扣点。</text>
+        </block>
+        <rich-text v-else :nodes="specialAccounts"></rich-text>
       </view>
     </u-modal>
   </view>
@@ -62,6 +74,7 @@
 import { activity, User } from "@/config/api.js";
 import { Throttle } from "@/config/util.js";
 import freeCharge from "@/components/freeCharge";
+import specialMixins from "@/components/activity/specialMixins";
 export default {
   data() {
     return {
@@ -75,11 +88,12 @@ export default {
         loading: "加载中",
         nomore: "已经到底了",
       },
-      isFollow: false,
-      accounts: `您已开启【专项调研】新活动通知<br/><br/>请关注【查研观向小助手】公众号，及时获取微信消息提醒`,
-      goFollowShow: false,
+      specialIsFollow: false,
+      specialAccounts: `您已开启【专项调研】新活动通知<br/><br/>请关注【查研观向小助手】公众号，及时获取微信消息提醒`,
+      specialGoFollowShow: false,
     };
   },
+  mixins: [specialMixins],
   components: {
     freeCharge,
   },
@@ -91,7 +105,7 @@ export default {
         CurrentIndex: this.page_no,
       });
       if (res.Ret === 200) {
-        this.isFollow = res.Data.IsFollow;
+        this.specialIsFollow = res.Data.IsFollow;
         this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
         if (this.page_no === 1) {
           this.collectList = res.Data.List || [];
@@ -149,7 +163,7 @@ export default {
     },
     //新调研通知
     async specialFollow() {
-      if (this.isFollow) {
+      if (this.specialIsFollow) {
         uni.showModal({
           content: "您要取消【专项调研】新活动通知吗？",
           confirmColor: "#3385FF",
@@ -158,7 +172,7 @@ export default {
             if (res.confirm) {
               const res = await activity.postSpecialFollow();
               if (res.Ret === 200) {
-                this.isFollow = !this.isFollow;
+                this.specialIsFollow = !this.specialIsFollow;
               }
             }
           },
@@ -166,8 +180,8 @@ export default {
       } else {
         const res = await activity.postSpecialFollow();
         if (res.Ret === 200) {
-          this.isFollow = !this.isFollow;
-          this.goFollowShow = true;
+          this.specialIsFollow = !this.specialIsFollow;
+          this.specialGoFollowShow = true;
         }
       }
     },

components/activity/indexActivity.scss

@@ -165,4 +165,34 @@
       font-size: 32rpx;
       border-bottom: 1rpx solid #ebebeb;
     }
+  }
+  .special-research {
+    .light-hint {
+      color: #999;
+      font-size: 24rpx;
+    }
+    .collect-ltem {
+      position: relative;
+      .reminder-item {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 204rpx;
+        height: 118rpx;
+        z-index: 9;
+        .item {
+          width: 100%;
+          height: 100%;
+        }
+        .reminder {
+          position: absolute;
+          top: 0rpx;
+          right: 0rpx;
+          width: 28rpx;
+          height: 28rpx;
+          z-index: 10;
+          padding: 10rpx 10rpx 20rpx 20rpx;
+        }
+      }
+    }
   }

components/activity/specialMixins.js

@@ -0,0 +1,42 @@
+import { activity, User } from "@/config/api.js";
+export default {
+  data() {
+    return {
+      specialIsHintShow: false, // 按钮的显示
+      specialGoFollowShow: false, //弹框的隐藏显示
+      specialAccounts: `您已开启【专项调研】新活动通知<br/><br/>请关注【查研观向小助手】公众号，及时获取微信消息提醒`,
+      specialIsFollow: false, //是否关注
+    };
+  },
+  methods: {
+    //点击小icon
+    reminderTextHandler(item) {
+      this.specialIsHintShow = true;
+      this.specialGoFollowShow = true;
+      this.specialAccounts = "此类调研时间安排已经确定，点击报名后按人次扣除对应机构的服务点数。由于每场活动人数有限，如果不能参加请提前48小时取消，未及时取消导致影响其他客户报名将会维持扣点。";
+    },
+    //报名或者取消报名
+    applyOfcancel(item) {
+      const str = item.ActivityTime.replace(/-/g, "/");
+      const date = new Date(str);
+      const times = date.getTime();
+      const num = new Date().getTime();
+      let twoDays = times - num <= 3600000 * 48;
+      uni.showModal({
+        content: twoDays ? "活动开始前48小时内，取消报名仍会维持扣点，确定要取消报名吗？" : "您要取消此次专项调研的预报名吗？",
+        confirmColor: "#3385FF",
+        cancelColor: "#606266",
+        success: async (res) => {
+          if (res.confirm) {
+            const res = await activity.postSpecialSignupAdd({
+              ActivityId: item.ActivityId,
+            });
+            if (res.Ret === 200) {
+              item.IsSignup = 0;
+            }
+          }
+        },
+      });
+    },
+  },
+};

components/modalDialog.vue

@@ -423,7 +423,7 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style  lang="scss">
 .slot-content {
   width: 100%;
   padding: 50rpx;