✨ feat(客户端): 书籍详情页完善相关功能

 import { createApp } from 'vue';
-import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh } from 'vant';
+import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker } from 'vant';
 import router from './router';
 import App from './App.vue';
 import axios from './utils/axios';
@@ -28,6 +28,8 @@ app.use(NumberKeyboard);
 app.use(Lazyload);
 app.use(List);
 app.use(PullRefresh);
+app.use(Popup);
+app.use(Picker);
 
 app.use(ConfigProvider);
 

@@ -3,7 +3,8 @@
     <div class="modify-top"></div>
     <div class="book-detail">
       <div style="text-align: center;">
-        <van-image width="220" height="220" src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed" />
+        <van-image width="220" height="220"
+          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed" />
       </div>
       <div class="book-intro">
         <p class="book-post">逃家小兔绘本</p>
@@ -12,8 +13,12 @@
           一场爱的捉迷藏就此展开了
         </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" /></div>
-          <div v-else @click="onToggle(true)" class="book-toggle-icon">折叠&nbsp;<van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_up" /></div>
+          <div v-if="isToggle" @click="onToggle(false)" class="book-toggle-icon">展开&nbsp;
+            <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" />
+          </div>
+          <div v-else @click="onToggle(true)" class="book-toggle-icon">折叠&nbsp;
+            <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_up" />
+          </div>
         </div>
       </div>
 
@@ -35,15 +40,15 @@
       <div class="book-video-language">
         <van-row>
           <van-col span="6">
-            <div class="uncheck">普通话</div>
+            <div @click="toggleLanguage" :class="[check_mandarin ? 'checked' : 'uncheck']">普通话</div>
           </van-col>
           <van-col span="6">
-            <div class="checked">方言</div>
+            <div @click="toggleLanguage" :class="[check_localism ? 'checked' : 'uncheck']">方言</div>
           </van-col>
-          <van-col span="12">
+          <van-col span="12" v-if="check_localism" @click="showPicker = true">
             <div class="choose-wrapper">
               <div class="text">
-                &nbsp;所有方言
+                &nbsp;{{ chooseLanguage.text }}
               </div>
               <div class="icon">
                 <van-icon name="arrow-down" />&nbsp;
@@ -51,29 +56,34 @@
             </div>
           </van-col>
         </van-row>
+        <van-popup v-model:show="showPicker" round position="bottom">
+          <van-picker
+            :columns="columns"
+            :columns-field-names="{ text: 'text', value: 'val', children: 'children' }"
+            @cancel="showPicker = false"
+            @confirm="onConfirm"
+          />
+        </van-popup>
       </div>
 
       <div class="book-video-list">
-        <van-list
-          v-model:loading="loading"
-          :finished="finished"
-          finished-text="没有更多了"
-          @load="onLoad">
-          <div v-for="item in list" :key="item" style="height: 3rem;" >{{ item }}</div>
+        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+          <div v-for="item in list" :key="item" style="height: 3rem;">{{ item }}</div>
         </van-list>
       </div>
     </div>
     <div style="height: 5rem;"></div>
     <div class="book-bar">
-      <div class="text">
-      <van-icon :name="icon_subscribed" size="1.25rem" style="margin: 0 auto;" />
+      <div @click="onSubscribe" class="text">
+        <van-icon v-if="!is_subscribe" :name="icon_subscribed" size="1.25rem" style="margin: 0 auto;" />
+        <van-icon v-else :name="icon_unsubscribe" size="1.25rem" style="margin: 0 auto;" />
         <span style="font-size: 0.85rem;">订阅</span>
       </div>
       <div class="button">
-        <my-button type="custom" :custom-style="styleObject1">爱心捐书</my-button>
+        <my-button @on-click="payFor" type="custom" :custom-style="styleObject1">爱心捐书</my-button>
       </div>
       <div class="button">
-        <my-button type="custom" :custom-style="styleObject2">上传作品</my-button>
+        <my-button @on-click="uploadVideo" type="custom" :custom-style="styleObject2">上传作品</my-button>
       </div>
     </div>
     <to-me @on-click="gotoMe()"></to-me>
@@ -99,33 +109,64 @@ import { Toast } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
 
-  // 自定义按钮颜色样式
-  const styleObject1 = reactive({
+// 自定义按钮颜色样式
+const styleObject1 = reactive({
   backgroundColor: '#FFFFFF',
   color: '#713610',
   borderColor: '#713610'
-  })
-  const styleObject2 = reactive({
+})
+const styleObject2 = reactive({
   backgroundColor: '#F9D95C',
   color: '#713610',
   borderColor: '#F9D95C'
-  })
+})
 
-  const items = reactive([])
+const items = reactive([])
 
-  const gotoMe = () => {
+const gotoMe = () => {
   console.warn('跳转我的地址');
-  }
+}
 
-  // 判断是否显示简介的展开图标
-  let hasToggle = ref(false); // 判断是否有展开文字，默认没有
-  let isToggle = ref(true); // 判断展开状态，默认展开
+// 判断是否显示简介的展开图标
+const hasToggle = ref(false); // 判断是否有展开文字，默认没有
+const isToggle = ref(true); // 判断展开状态，默认展开
 
-  const onToggle = (v) => { // 展开/折叠
+const onToggle = (v) => { // 展开/折叠
   isToggle.value = v
+}
+
+// 切换视频语言
+const check_mandarin = ref(true);
+const check_localism = ref(false);
+const chooseLanguage = ref({ text: '普通话', val: '00' }); // 默认选中普通话
+const toggleLanguage = () => {
+  check_mandarin.value = !check_mandarin.value;
+  check_localism.value = !check_localism.value;
+  // 修改默认语言绑定数据
+  if (check_localism.value) {
+    chooseLanguage.value = { text: columns[0]['text'], val: columns[0]['val'] }
+  } else {
+    chooseLanguage.value = { text: '普通话', val: '00' };
   }
+}
+// 方言选择项
+const columns = [
+  { text: '所有方言', val: '00' },
+  { text: '沪语', val: '01' },
+  { text: '粤语', val: '02' },
+];
+
+const showPicker = ref(false);
 
-  onMounted(() => {
+const onConfirm = ({ selectedOptions }) => {
+  showPicker.value = false;
+  chooseLanguage.value = {
+    text: selectedOptions[0].text,
+    val: selectedOptions[0].val
+  }
+};
+
+onMounted(() => {
   // 判断是否显示简介的展开图标
   hasToggle.value = tools.hasEllipsis('book-intro');
   for (let index = 0; index < 20; index++) {
@@ -134,14 +175,14 @@ const $router = useRouter();
       avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg'
     })
   }
-  })
+})
 
-  // 处理书籍下作品列表
-  const list = ref([]);
-  const loading = ref(false);
-  const finished = ref(false);
+// 处理书籍下作品列表
+const list = ref([]);
+const loading = ref(false);
+const finished = ref(false);
 
-  const onLoad = () => {
+const onLoad = () => {
   // 异步更新数据
   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
   setTimeout(() => {
@@ -157,7 +198,23 @@ const $router = useRouter();
       finished.value = true;
     }
   }, 1000);
-  };
+};
+
+// 书籍订阅
+let is_subscribe = ref(false);
+const onSubscribe = () => {
+    is_subscribe.value = !is_subscribe.value
+}
+
+// 爱心捐书
+const payFor = () => {
+    console.warn('弹出框');
+}
+
+// 上传作品
+const uploadVideo = () => {
+    console.warn('跳转页面');
+}
 </script>
 
 <script>
@@ -165,12 +222,12 @@ import mixin from 'common/mixin';
 
 export default {
   mixins: [mixin.init],
-  data () {
+  data() {
     return {
 
     }
   },
-  mounted () {
+  mounted() {
 
   },
   methods: {
@@ -181,8 +238,10 @@ export default {
 
 <style lang="less" scoped>
 @import url('@css/content-bg.less');
-  .book-detail-page {
+
+.book-detail-page {
   overflow: auto;
+
   .book-detail {
     margin: 1rem;
     margin-top: 1.25rem;
@@ -190,29 +249,36 @@ export default {
     border-radius: 10px;
     background-color: rgba(255, 255, 255, 1);
     box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
+
     .book-intro {
       padding: 1rem;
+
       .book-post {
         color: #222222;
         font-size: 1.25rem;
         font-weight: bold;
       }
+
       #book-intro {
         color: #333333;
         margin-top: 0.25rem;
       }
+
       .book-toggle-icon {
         text-align: right;
         color: #713610;
         font-size: 1rem;
       }
     }
+
     .book-video-title {
       background-color: #F7F7F7;
       padding: 1rem 1.5rem;
     }
+
     .book-video-language {
       padding: 1rem;
+
       .uncheck {
         background: #F7F7F7;
         border-radius: 15px;
@@ -221,6 +287,7 @@ export default {
         color: #222222;
         margin: 0 0.25rem;
       }
+
       .checked {
         background: #F9D95C;
         border-radius: 15px;
@@ -229,6 +296,7 @@ export default {
         color: #222222;
         margin: 0 0.25rem;
       }
+
       .choose-wrapper {
         background: #F7F7F7;
         border-radius: 15px;
@@ -236,11 +304,13 @@ export default {
         text-align: center;
         color: #B0B0B0;
         margin: 0 0.25rem;
+
         .text {
           display: inline-block;
           text-align: left;
           width: 80%;
         }
+
         .icon {
           display: inline-block;
           text-align: right;
@@ -248,11 +318,13 @@ export default {
         }
       }
     }
+
     .book-video-list {
       height: 20rem;
       overflow: scroll;
     }
   }
+
   .book-bar {
     position: fixed;
     right: 0;
@@ -263,6 +335,7 @@ export default {
     box-sizing: content-box;
     background-color: white;
     padding: 1rem;
+
     .text {
       display: flex;
       flex-direction: column;
@@ -271,6 +344,7 @@ export default {
       color: #713610;
       text-align: center;
     }
+
     .button {
       display: flex;
       flex-direction: column;
@@ -279,5 +353,5 @@ export default {
       padding: 0 0.5rem;
     }
   }
-  }
+}
 </style>
\ No newline at end of file