✨ feat(B端视频审核): 微信vue3兼容写法问题

hookehuyr
Commit 45477ee63455110d7c357a2b58d2186a39558fcd 45477ee6 1 parent 18181562
Showing 2 changed files with 69 additions and 46 deletions
src/components/BVideoCard/index.vue
src/views/business/auditVideo.vue
--- a/src/components/BVideoCard/index.vue
View file @45477ee
+++ b/src/components/BVideoCard/index.vue
View file @45477ee
@@ -66,7 +66,7 @@
         </div>
         <div class="van-hairline--bottom"
           style="color: #222222; font-size: 1.25rem; font-weight: bold; text-align: center; padding-bottom: 1rem;">
-          作品审核建议</div>
+          作品不通过</div>
         <div>
           <van-field v-model="message" rows="2" autosize label="" type="textarea" maxlength="200"
             placeholder="请填写您对小朋友的温馨鼓励" show-word-limit />
@@ -104,6 +104,12 @@ import { Toast } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
+const props = defineProps({
+  item: Object,
+  status: String,
+});
+const emit = defineEmits(['on-click']);
+
 // 判断是否显示简介的展开图标
 const hasToggle = ref(false); // 判断是否有展开文字，默认没有
 const isToggle = ref(true); // 判断展开状态，默认展开
@@ -119,19 +125,57 @@ onMounted(() => {
   })
 })
+// 审核视频通过/不通过弹框
+const showNotice = ref(false);
+const show = ref(false);
+const message = ref('');
+const onPass = () => { // 通过审核
+  show.value = true;
+}
+const onCancel = () => {
+  show.value = false;
+}
+
+const closeNotice = () => {
+  showNotice.value = false;
+}
+const onRefuse = () => { // 不通过审核
+  showNotice.value = true;
+}
+const handleAudit = (status) => {
+  axios.post('/srv/?a=check_prod', {
+    prod_id: props.item.id,
+    status,
+    check_note: message.value,
+  })
+  .then(res => {
+    if (res.data.code === 1) {
+      Toast.success('操作成功');
+      message.value = '';
+      showNotice.value = false;
+      show.value = false;
+      emit('on-click', props.item.id);
+    } else {
+      console.warn(res);
+      if (!res.data.show) return false;
+      Toast({
+        icon: 'close',
+        message: res.data.msg
+      });
+    }
+  })
+  .catch(err => {
+    console.error(err); 
+  })
+}
 </script>
 <script>
-// FIXME: VUE2写法
 export default {
-  props: ['item', 'status'],
   data() {
     return {
       detail: {},
       mp: '',
-      message: '',
-      showNotice: false,
-      show: false
     }
   },
   created() {
@@ -165,43 +209,6 @@ export default {
     }, 500);
   },
   methods: {
-    closeNotice() {
-      this.showNotice = false;
-    },
-    onRefuse() { // 不通过审核
-      this.showNotice = true;
-    },
-    onPass() { // 通过审核
-      this.show = true;
-    },
-    handleAudit (status) {
-      axios.post('/srv/?a=check_prod', {
-        prod_id: this.detail.id,
-        status,
-        check_note: this.message,
-      })
-      .then(res => {
-        if (res.data.code === 1) {
-          Toast.success('操作成功');
-          this.message = '';
-          this.showNotice = false;
-          this.show = false;
-        } else {
-          console.warn(res);
-          if (!res.data.show) return false;
-          Toast({
-            icon: 'close',
-            message: res.data.msg
-          });
-        }
-      })
-      .catch(err => {
-        console.error(err); 
-      })
-    },
-    onCancel () {
-      this.show = false;
-    }
   }
 }
 </script>
--- a/src/views/business/auditVideo.vue
View file @45477ee
+++ b/src/views/business/auditVideo.vue
View file @45477ee
@@ -4,20 +4,30 @@
       title-active-color="#222222" title-inactive-color="#777777">
       <van-tab title="待审核" :badge="prod_num" :title-style="titleStyle">
         <template v-if="!active">
-          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+          <van-list v-model:loading="loading" :finished="finished" :finished-text="prod_list.length ? '没有更多了' : ''" @load="onLoad">
             <template v-for="item in prod_list" :key="item" style="height: 3rem;">
-              <b-video-card :item="item" status="PENDING"></b-video-card>
+              <b-video-card :item="item" status="PENDING" @on-click="onClick"></b-video-card>
             </template>
           </van-list>
+          <van-empty v-if="!prod_list.length"
+            class="custom-image"
+            :image="no_image"
+            description="暂无审核信息"
+          />
         </template>
       </van-tab>
       <van-tab title="已审核" :title-style="titleStyle">
         <template v-if="active">
-          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+          <van-list v-model:loading="loading" :finished="finished" :finished-text="prod_list.length ? '没有更多了' : ''" @load="onLoad">
             <template v-for="item in prod_list" :key="item" style="height: 3rem;">
               <b-video-card :item="item" status="PROCESS"></b-video-card>
             </template>
           </van-list>
+          <van-empty v-if="!prod_list.length"
+            class="custom-image"
+            :image="no_image"
+            description="暂无审核信息"
+          />
         </template>
       </van-tab>
     </van-tabs>
@@ -26,6 +36,7 @@
 <script setup>
 import BVideoCard from '@/components/BVideoCard/index.vue'
+import no_image from '@images/que-shuju@2x.png'
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -112,6 +123,11 @@ const onLoad = () => {
     })
 };
+// 审核请求操作后回调
+const onClick = (id) => {
+  prod_num.value--;
+  _.remove(prod_list.value, item => item.id === id);
+}
 </script>