创建的活动动作弹框逻辑优化，遮罩问题

hookehuyr
Commit 54cd3977942df84052c8722b0eb8fd3f774eac80 54cd3977 1 parent c7d32bc4
Showing 2 changed files with 107 additions and 91 deletions
src/components/activity-card.vue
src/pages/myCreateActivity/index.vue
--- a/src/components/activity-card.vue
View file @54cd397
+++ b/src/components/activity-card.vue
View file @54cd397
 <!--
  * @Date: 2022-09-20 15:39:37
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-26 14:20:33
+ * @LastEditTime: 2022-10-26 17:20:34
  * @FilePath: /swx/src/components/activity-card.vue
  * @Description: 活动卡片组件
 -->
@@ -60,7 +60,6 @@
     </view>
   </view>
   <van-toast id="van-toast" />
-  <van-dialog id="van-dialog" />
 </template>
 <script setup>
@@ -68,10 +67,8 @@ import { ref, defineProps, computed } from 'vue'
 import icon_address from '@/images/icon/address@2x.png'
 import Taro from '@tarojs/taro'
 import * as dayjs from 'dayjs'
-import { copyActivityAPI } from '@/api/Activity/index'
 import Toast from '@/components/vant-weapp/toast/toast';
-import Dialog from '@vant/weapp/dist/dialog/dialog';
+import Dialog from '@/components/vant-weapp/dialog/dialog';
-import { endActivityAPI, delActivityAPI } from '@/api/Activity/index';
 const props = defineProps({
   data: Object,
@@ -109,98 +106,25 @@ const goTo = (id, status) => {
 }
 const emit = defineEmits(['on-handle']);
-const copyActivity = async (id) => {
+
-  Dialog.confirm({
+// 复制活动
-    title: '温馨提示',
+const copyActivity = (id) => {
-    message: '是否确认复制活动？',
+  emit('on-handle', { id, type: 'copy' });
-    confirmButtonColor: '#199A74'
-  })
-    .then(async () => {
-      // 复制活动
-      const { code, data } = await copyActivityAPI({ i: id });
-      if (code) {
-        Toast({
-          duration: 1000,
-          type: 'success',
-          message: '复制成功',
-          onClose: () => {
-            emit('on-handle', id);
-          },
-        });
-      }
-    })
-    .catch(() => {
-      // on cancel
-    });
 }
 // 编辑活动
 const editActivity = ({ id }) => {
-  Dialog.confirm({
+  emit('on-handle', { id, type: 'edit' });
-    title: '温馨提示',
-    message: '是否确认编辑活动？',
-    confirmButtonColor: '#199A74'
-  })
-    .then(async () => {
-      Taro.navigateTo({
-        url: '../createActivity/index?id=' + id + '&type=edit'
-      })
-    })
-    .catch(() => {
-      // on cancel
-    });
 }
 // 结束活动
 const finishActivity = ({ id }) => {
-  Dialog.confirm({
+  emit('on-handle', { id, type: 'finish' });
-    title: '温馨提示',
-    message: '是否确认结束活动？',
-    confirmButtonColor: '#199A74'
-  })
-    .then(async () => {
-      // 结束活动
-      const { code, data } = await endActivityAPI({ i: id });
-      if (code) {
-        Toast({
-          duration: 1000,
-          type: 'success',
-          message: '结束成功',
-          onClose: () => {
-            emit('on-handle', id);
-          },
-        });
-      }
-    })
-    .catch(() => {
-      // on cancel
-    });
 }
 // 删除活动
 const delActivity = ({ id }) => {
-  Dialog.confirm({
+  emit('on-handle', { id, type: 'delete' });
-    title: '温馨提示',
-    message: '是否确认删除活动？',
-    confirmButtonColor: '#199A74'
-  })
-    .then(async () => {
-      // 复制活动
-      const { code, data } = await delActivityAPI({ i: id });
-      if (code) {
-        Toast({
-          duration: 1000,
-          type: 'success',
-          message: '删除成功',
-          onClose: () => {
-            emit('on-handle', id);
-          },
-        });
-      }
-    })
-    .catch(() => {
-      // on cancel
-    });
 }
 </script>
--- a/src/pages/myCreateActivity/index.vue
View file @54cd397
+++ b/src/pages/myCreateActivity/index.vue
View file @54cd397
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-26 15:21:16
+ * @LastEditTime: 2022-10-26 17:29:34
  * @FilePath: /swx/src/pages/myCreateActivity/index.vue
  * @Description: 创建的活动页面
 -->
@@ -68,9 +68,9 @@
         </view>
       </view>
       <scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower">
-        <view style="">
+        <!-- <view style=""> -->
           <activity-card @on-handle="onHandle" v-for="(item, index) in activity_list" :key="index" :data="item" status="creator" style="margin-bottom: 1rem;"></activity-card>
-        </view>
+        <!-- </view> -->
       </scroll-view>
       <view style="height: 3rem;"></view>
     </view>
@@ -89,6 +89,10 @@
   </van-popup>
   <van-toast id="van-toast" />
+  <van-dialog title="温馨提示" :show="copy_show" :show-cancel-button="true" message="是否确认复制活动？" confirm-button-color="#199A74" @confirm="onCopyConfirm" @cancel="onCopyCancel"></van-dialog>
+  <van-dialog title="温馨提示" :show="edit_show" :show-cancel-button="true" message="是否确认编辑活动？" confirm-button-color="#199A74" @confirm="onEditConfirm" @cancel="onEditCancel"></van-dialog>
+  <van-dialog title="温馨提示" :show="finish_show" :show-cancel-button="true" message="是否确认结束活动？" confirm-button-color="#199A74" @confirm="onFinishConfirm" @cancel="onFinishCancel"></van-dialog>
+  <van-dialog title="温馨提示" :show="delete_show" :show-cancel-button="true" message="是否确认删除活动？" confirm-button-color="#199A74" @confirm="onDeleteConfirm" @cancel="onDeleteCancel"></van-dialog>
 </template>
 <script setup>
@@ -109,12 +113,12 @@ import Toast from '@/components/vant-weapp/toast/toast';
 <script>
 import "./index.less";
-import { addListAPI } from '@/api/Activity/index';
 import { $ } from '@tarojs/extend'
 import mixin from '@/utils/mixin';
 import { getCurrentPageParam } from "@/utils/weapp";
 import { hostListAPI } from '@/api/Host/index'
 import * as dayjs from 'dayjs'
+import { addListAPI, endActivityAPI, delActivityAPI, copyActivityAPI } from '@/api/Activity/index';
 export default {
   name: "myCreateActivityPage",
@@ -191,7 +195,12 @@ export default {
       check_status: false,
       filter_time: '',
       server_time: '',
-      defaultIndex: 0
+      defaultIndex: 0,
+      activity_id: '',
+      edit_show: false,
+      copy_show: false,
+      finish_show: false,
+      delete_show: false,
     };
   },
   methods: {
@@ -293,12 +302,95 @@ export default {
       this.page = 0;
       this.getList();
     },
-    onHandle () { // 活动操作后回调
+    onHandle ({ id, type }) { // 活动操作后回调
+      this.activity_id = id;
+      if (type === 'edit') {
+        this.edit_show = true;
+      }
+      if (type === 'copy') {
+        this.copy_show = true;
+      }
+      if (type === 'finish') {
+        this.finish_show = true;
+      }
+      if (type === 'delete') {
+        this.delete_show = true;
+      }
+    },
+    onEditConfirm () {
+      this.edit_show = false;
+      Taro.navigateTo({
+        url: '../createActivity/index?id=' + this.activity_id + '&type=edit'
+      })
+    },
+    onEditCancel () {
+      this.edit_show = false;
+    },
+    async onFinishConfirm () {
+      const { code, data } = await endActivityAPI({ i: this.activity_id });
+      if (code) {
+        Toast({
+          duration: 1000,
+          type: 'success',
+          message: '结束成功',
+          onClose: () => {
+            this.finish_show = false;
             // 查询数据
             this.activity_list = [];
             this.flag = true;
             this.page = 0;
             this.getList();
+          },
+        });
+      }
+    },
+    onFinishCancel () {
+      this.activity_id = '';
+      this.finish_show = false;
+    },
+    async onDeleteConfirm () {
+      const { code, data } = await delActivityAPI({ i: this.activity_id });
+      if (code) {
+        Toast({
+          duration: 1000,
+          type: 'success',
+          message: '删除成功',
+          onClose: () => {
+            this.delete_show = false;
+            // 查询数据
+            this.activity_list = [];
+            this.flag = true;
+            this.page = 0;
+            this.getList();
+          },
+        });
+      }
+    },
+    onDeleteCancel () {
+      this.activity_id = '';
+      this.delete_show = false;
+    },
+    async onCopyConfirm () {
+      const { code, data } = await copyActivityAPI({ i: this.activity_id });
+      if (code) {
+        Toast({
+          duration: 1000,
+          type: 'success',
+          message: '复制成功',
+          onClose: () => {
+            this.copy_show = false;
+            // 查询数据
+            this.activity_list = [];
+            this.flag = true;
+            this.page = 0;
+            this.getList();
+          },
+        });
+      }
+    },
+    onCopyCancel () {
+      this.activity_id = '';
+      this.copy_show = false;
     }
   },
 };