✨ feat(教师视频，家长视频): API联调

hookehuyr
Commit 2f3d1d46c67c9caf8e1cacaae78beffa19e1a854 2f3d1d46 1 parent a4aebdd8
Showing 5 changed files with 154 additions and 104 deletions
src/components/BVideoCard/index.vue
src/composables/useUnwatchList.js
src/composables/useVideoList.js
src/views/business/auditVideo.vue
src/views/business/myVideo.vue
--- a/src/components/BVideoCard/index.vue
View file @2f3d1d4
+++ b/src/components/BVideoCard/index.vue
View file @2f3d1d4
@@ -3,38 +3,35 @@
     <div v-if="status === 'PROCESS'" class="status">
       <van-image v-if="item.status === 'ENABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;"
         :src="icon_enable" />
-      <van-image v-if="item.status === 'REFUSE'" round width="6rem" height="6rem" style="vertical-align: bottom;"
+      <van-image v-if="item.status === 'DISABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;"
         :src="icon_refuse" />
       <van-image v-if="item.status === 'APPLY'" round width="6rem" height="6rem" style="vertical-align: bottom;"
         :src="icon_apply" />
     </div>
-    <div class="video-div" :id="'mui-player-' + item.case_id">
+    <div class="video-div" :id="'mui-player-' + item.id">
     </div>
+    <div class="control-bar">
       <div>
         <div class="video-bar">
           <van-row align="center">
             <van-col span="8">
-            <van-image round width="2rem" height="2rem" style="vertical-align: middle;"
+              <van-image round width="2rem" height="2rem" style="vertical-align: middle;" :src="item.cover" />&nbsp;
-              src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />&nbsp;
+              <span style="font-size: 1.05rem; vertical-align: middle;">{{ item.name }}</span>
-            <span style="font-size: 1.05rem; vertical-align: middle;">王忆慈</span>
             </van-col>
             <van-col span="16">
-            <div style="color: #999999; text-align: right;">杨浦民办科技幼稚园 ｜ 藏语</div>
+              <div style="color: #999999; text-align: right;">{{ item.book_name }} ｜ {{ item.localism_type }}</div>
             </van-col>
           </van-row>
         </div>
       </div>
       <div v-if="status === 'PROCESS'" style="margin-top: 1rem;">
-      <div v-if="item.status === 'REFUSE'" style="padding: 0 1rem 1rem 1rem; font-size: 0.85rem;">
+        <div v-if="item.status === 'DISABLE'" style="padding: 0 1rem 1rem 1rem; font-size: 0.85rem;">
           <p style="color: #999999; margin-bottom: 0.25rem;">老师留言：</p>
-        <p>下次我们继续加油，争取有更好的表现哦～</p>
+          <p>{{ item.check_note }}</p>
         </div>
       </div>
       <div class="book-intro">
-      <div id="book-intro" :class="{ 'van-multi-ellipsis--l3': isToggle }">
+        <div id="book-intro" :class="{ 'van-multi-ellipsis--l3': isToggle }">{{ item.note }}</div>
-        从前有一只小兔子，总是想要离家出走。有一天他对妈妈说：“我要跑走啦！”“如果你跑走了我就去追你，因为你是我的小宝贝呀！”妈妈说。
-        一场爱的捉迷藏就此展开了
-      </div>
         <div v-if="hasToggle">
           <div v-if="isToggle" @click="onToggle(false)" class="book-toggle-icon">展开&nbsp;
             <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" />
@@ -59,23 +56,29 @@
         </van-row>
       </div>
     </div>
+  </div>
   <van-overlay :show="showNotice" z-index="1000">
     <div class="wrapper" @click.stop>
       <div class="block">
-        <div style="position: absolute; top: -2rem; right: 1rem; font-size: 1.5rem;"><van-icon name="close" color="#FFFFFF" @click="closeNotice" /></div>
+        <div style="position: absolute; top: -2rem; right: 1rem; font-size: 1.5rem;">
-        <div class="van-hairline--bottom" style="color: #222222; font-size: 1.25rem; font-weight: bold; text-align: center; padding-bottom: 1rem;">作品审核建议</div>
+          <van-icon name="close" color="#FFFFFF" @click="closeNotice" />
+        </div>
+        <div class="van-hairline--bottom"
+          style="color: #222222; font-size: 1.25rem; font-weight: bold; text-align: center; padding-bottom: 1rem;">
+          作品审核建议</div>
         <div>
-          <van-field v-model="message" rows="2" autosize label="" type="textarea" maxlength="200" placeholder="请填写您对小朋友的温馨鼓励" show-word-limit />
+          <van-field v-model="message" rows="2" autosize label="" type="textarea" maxlength="200"
+            placeholder="请填写您对小朋友的温馨鼓励" show-word-limit />
         </div>
         <div style="margin: 3rem 0;">
-          <my-button @on-click="onConfirm" type="primary">确定</my-button>
+          <my-button @on-click="handleAudit('disable')" type="primary">确定</my-button>
         </div>
       </div>
     </div>
   </van-overlay>
-  <van-dialog v-model:show="show" title="温馨提示" show-cancel-button confirmButtonColor="#F9D95C" @confirm="onPassConfirm">
+  <van-dialog v-model:show="show" title="温馨提示" show-cancel-button confirmButtonColor="#F9D95C" @confirm="handleAudit('enable')">
     <div style="padding: 1rem; text-align: center;">是否确认审核通过该视频 ？</div>
   </van-dialog>
 </template>
@@ -84,6 +87,7 @@
 import icon_up from '@images/icon-guanbi@2x.png'
 import icon_down from '@images/icon-zhankai@2x.png'
+// TODO: 让娜娜做一张不是透明的看看效果
 import icon_refuse from '@images/icon-jujue@2x.png'
 import icon_apply from '@images/icon-shenhe@2x.png'
 import icon_enable from '@images/icon-tongguo@2x.png'
@@ -92,10 +96,12 @@ import MyButton from '@/components/MyButton/index.vue'
 import { ref, reactive, onMounted, nextTick, watch, onUpdated } from 'vue'
 import 'mui-player/dist/mui-player.min.css'
 import MuiPlayer from 'mui-player'
+import axios from '@/utils/axios';
 import _ from 'lodash';
 import tools from '@/common/tool'
 import { useRoute, useRouter } from 'vue-router'
+import { Toast } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
@@ -107,32 +113,6 @@ const onToggle = (v) => { // 展开/折叠
   isToggle.value = v
 }
-const showNotice = ref(false)
-const onConfirm = () => {
-  showNotice.value = false;
-}
-const closeNotice = () => {
-  showNotice.value = false;
-}
-
-const show = ref(false);
-
-const onRefuse = () => {
-  showNotice.value = true;
-}
-const onPass = () => {
-  show.value = true;
-}
-const onPassConfirm = () => { // 审核通过视频
-    console.warn('审核通过视频');
-}
-const message = ref('')
-
-const props = defineProps({
-  item: Object,
-  status: String
-})
-
 onMounted(() => {
   // 判断是否显示简介的展开图标
   nextTick(() => {
@@ -144,10 +124,14 @@ onMounted(() => {
 <script>
 export default {
-  // props: ['item', 'status'],
+  props: ['item', 'status'],
   data() {
     return {
-      detail: {}
+      detail: {},
+      mp: '',
+      message: '',
+      showNotice: false,
+      show: false
     }
   },
   created() {
@@ -155,10 +139,10 @@ export default {
   mounted() {
     setTimeout(() => {
       var mp = new MuiPlayer({
-        container: '#mui-player-' + this.item.case_id,
+        container: '#mui-player-' + this.item.id,
         title: this.item.title,
-        src: this.item.video.url,
+        src: this.item.video,
-        poster: this.item.cover.url,
+        poster: this.item.cover,
         autoFit: false,
         videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
           { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
@@ -166,16 +150,43 @@ export default {
           { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
         ]
       })
+      this.mp = mp;
       this.detail = _.cloneDeep(this.item)
     }, 500);
   },
   methods: {
-    setLike() {
+    closeNotice() {
-      this.detail.liked = !this.detail.liked
+      this.showNotice = false;
+    },
+    onRefuse() { // 不通过审核
+      this.showNotice = true;
+    },
+    onPass() { // 通过审核
+      this.show = true;
     },
-    setComment() {
+    handleAudit (status) {
-      console.warn('跳转详情页，移动到留言页');
+      axios.post('/srv/?a=check_prod', {
-      console.warn(this.detail.case_id);
+        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);
+          Toast({
+            icon: 'close',
+            message: res.data.msg
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err); 
+      })
     }
   }
 }
--- a/src/composables/useUnwatchList.js
View file @2f3d1d4
+++ b/src/composables/useUnwatchList.js
View file @2f3d1d4
@@ -27,6 +27,7 @@ export const useUnwatchList = () => {
       .then(res => {
         if (res.data.code === 1) {
           prod_list.value = _.concat(prod_list.value, res.data.data.prod);
+          prod_list.value = _.uniqBy(prod_list.value, 'id');
           offset.value = prod_list.value.length;
           loading.value = false;
           // 数据全部加载完成
--- a/src/composables/useVideoList.js
View file @2f3d1d4
+++ b/src/composables/useVideoList.js
View file @2f3d1d4
@@ -102,6 +102,7 @@ export const useVideoList = ($route) => {
         if (res.data.code === 1) {
           bookInfo.value = res.data.data;
           prod_list.value = _.concat(prod_list.value, res.data.data.prod_list);
+          prod_list.value = _.uniqBy(prod_list.value, 'id');
           offset.value = prod_list.value.length;
           loading.value = false;
           // 数据全部加载完成
--- a/src/views/business/auditVideo.vue
View file @2f3d1d4
+++ b/src/views/business/auditVideo.vue
View file @2f3d1d4
@@ -2,10 +2,10 @@
   <div class="">
     <van-tabs v-model:active="active" sticky @click-tab="onClickTab" color="#F9D95C" background="#F7F7F7"
       title-active-color="#222222" title-inactive-color="#777777">
-      <van-tab title="待审核" badge="24" :title-style="titleStyle">
+      <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">
-            <template v-for="item in dataList" :key="item" style="height: 3rem;">
+            <template v-for="item in prod_list" :key="item" style="height: 3rem;">
               <b-video-card :item="item" status="PENDING"></b-video-card>
             </template>
           </van-list>
@@ -14,7 +14,7 @@
       <van-tab title="已审核" :title-style="titleStyle">
         <template v-if="active">
           <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-            <template v-for="item in dataList1" :key="item" style="height: 3rem;">
+            <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>
@@ -25,54 +25,98 @@
 </template>
 <script setup>
-import dataList from '@/mock/video_list'
-import dataList1 from '@/mock/video_list1'
 import BVideoCard from '@/components/BVideoCard/index.vue'
 import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
-import $ from 'jquery'
+import _ from 'lodash'
 import { Toast } from 'vant';
+
 const $route = useRoute();
 const $router = useRouter();
+
 const titleStyle = {
   fontSize: '1rem'
 }
+
+/**
+ * 重载刷新程序
+ */
+const onReload = (v) => {
+  status.value = v
+  offset.value = 0
+  prod_list.value = []
+  loading.value = true;
+  finished.value = false;
+  onLoad()
+}
+
 const active = ref(0)
 let tabStatus = ref('PENDING')
-const onClickTab = () => {
+
-    console.warn(0);
+const onClickTab = (v) => {
+  if (!v.name) {
+    onReload('apply')
+  } else {
+    onReload('checked')
+  }
 }
+// 绑定页面数据
+const status = ref('apply');
+const prod_num = ref('');
+const prod_list = ref([]);
+const limit = ref(10)
+const offset = ref(0)
+
 // 处理书籍下作品列表
-const list = ref([]);
 const loading = ref(false);
 const finished = ref(false);
+/**
+ * 向下滚动查询数据
+ */
 const onLoad = () => {
   // 异步更新数据
-  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  axios.get('/srv/?a=check_prod_list', {
-  setTimeout(() => {
+    params: {
-    for (let i = 0; i < 20; i++) {
+      status: status.value,
-      list.value.push(list.value.length + 1);
+      limit: limit.value,
+      offset: offset.value
     }
-
+  })
-    // 加载状态结束
+    .then(res => {
+      if (res.data.code === 1) {
+        prod_num.value = res.data.data.prod_num;
+        _.each(res.data.data.prod, item => {
+          item.status = item.status.toUpperCase()
+        })
+        prod_list.value = _.concat(prod_list.value, res.data.data.prod);
+        prod_list.value = _.uniqBy(prod_list.value, 'id');
+        offset.value = prod_list.value.length;
         loading.value = false;
-
         // 数据全部加载完成
-    if (list.value.length >= 100) {
+        if (!res.data.data.prod.length) {
+          // 加载状态结束
           finished.value = true;
         }
-  }, 1000);
+      } else {
+        console.warn(res);
+        Toast({
+          icon: 'close',
+          message: res.data.msg
+        });
+      }
+    })
+    .catch(err => {
+      console.error(err);
+    })
 };
-  onMounted(() => {
-  })
 </script>
 <script>
@@ -80,12 +124,12 @@ import mixin from 'common/mixin';
 export default {
   mixins: [mixin.init],
-  data () {
+  data() {
     return {
     }
   },
-  mounted () {
+  mounted() {
   },
   methods: {
@@ -98,6 +142,7 @@ export default {
 :global(.van-badge--top-right) {
   right: -10px;
 }
+
 :global(.van-sticky--fixed) {
   z-index: 1000;
 }
--- a/src/views/business/myVideo.vue
View file @2f3d1d4
+++ b/src/views/business/myVideo.vue
View file @2f3d1d4
 <template>
   <div class="">
-    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+    <template v-for="item in kgProdList" :key="item" style="height: 3rem;">
-      <template v-for="item in dataList" :key="item" style="height: 3rem;">
       <b-video-card :item="item"></b-video-card>
     </template>
-    </van-list>
+    <div style="height: 2rem;"></div>
   </div>
 </template>
 <script setup>
-import dataList from '@/mock/video_list'
 import BVideoCard from '@/components/BVideoCard/index.vue'
 import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
-import $ from 'jquery'
+import _ from 'lodash'
 import { Toast } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
 // 处理书籍下作品列表
-const list = ref([]);
+const kgProdList = ref([])
-const loading = ref(false);
+axios.get('/srv/?a=kg_prod_list')
-const finished = ref(false);
+.then(res => {
-
+  if (res.data.code === 1) {
-const onLoad = () => {
+    _.each(res.data.data.prod, item => {
-  // 异步更新数据
+      item.status = item.status.toUpperCase()
-  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
-  setTimeout(() => {
-    for (let i = 0; i < 20; i++) {
-      list.value.push(list.value.length + 1);
-    }
-
-    // 加载状态结束
-    loading.value = false;
-
-    // 数据全部加载完成
-    if (list.value.length >= 100) {
-      finished.value = true;
-    }
-  }, 1000);
-};
-
-  onMounted(() => {
-    
     })
+    kgProdList.value = res.data.data.prod;
+  } else {
+    console.warn(res);
+    Toast({
+      icon: 'close',
+      message: res.data.msg
+    });
+  }
+})
+.catch(err => {
+  console.error(err); 
+})
 </script>
 <script>