窍笔介绍页面设计

src/router/index.js

@@ -58,6 +58,16 @@ const routes = [
         },
         component: () => import('@/views/home/components/downLoad/introduction/index.vue'),
       },
+      {
+        path: '/moreMessage',
+        name: 'moreMessage',
+        meta: {
+          // title: '首页',
+          sign: 'moreMessage',
+          belong: 'moreMessage'
+        },
+        component: () => import('@/views/moreMessage/index.vue'),
+      },
     ]
   }
 

src/views/home/components/downLoad/downLoad.vue

@@ -11,9 +11,9 @@
         </div>
     </div>
     <div class="tool">
-      <div class="version">{{ version.versionNum }}</div>
-      <div class="fun" @click="getIntroduction">功能介绍</div>
-      <!-- <div class="more" @click="more">了解更多</div> -->
+      <!-- <div class="version">{{ version.versionNum }}</div>
+      <div class="fun" @click="getIntroduction">功能介绍</div> -->
+      <div class="more" @click="more">了解更多</div>
     </div>
 
   </div>

src/views/moreMessage/components/functionIntroduction.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="functionIntroduction height_100">
+        <div class="introduction_item title" v-if="documents.length>1">
+            <div v-for="(item,index) in documents" :key="index+'a'" class="title_item" @click="documentIndex = index">{{ (index + 1) + '、' + item.name }}
+                <div v-if="index<documents.length-1" class="line"></div>
+            </div>
+        </div>
+        <div class="introduction_item" >
+            <iframe id="checkIframe" :src="getUrl(documents[documentIndex])" frameborder="0" width="100%" ></iframe>
+        </div>
+    </div>
+</template>
+
+<script>
+import mixin from './mixins/index'
+export default {
+  components: {},
+  mixins:[mixin],
+  props: {},
+  data() {
+    return {
+        documentIndex:0,
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.functionIntroduction{
+    width: 1300px;
+    margin: auto;
+    .introduction_item{
+        height: 100%;
+        background: white;
+        width: 75%;
+        margin: auto;
+        .title{
+            line-height: 35px;
+            font-weight: bold;
+            // color: white;
+            color: black;
+        }
+        #checkIframe{
+            height: 100%;
+        }
+        
+    }
+}
+</style>

src/views/moreMessage/components/mixins/index.js

@@ -0,0 +1,69 @@
+import { Base64 } from 'js-base64';
+export default{
+    data() {
+        return {
+            files:[],
+            documents:[],
+            videos:[],
+            baseUrl:'https://qiaobi-ai.com/static/',
+        }
+    },
+    created() {
+        this.init()
+    },
+    mounted() {
+        
+    },
+    methods: {
+        async init(){
+            await this.getIntroduction()
+        },
+        async getIntroduction(){
+            let url = `/static/qiaobiConfig.json`
+            await fetch(url).then(res =>  res.json() ).then(data => {
+                if(data && data.length){
+                    data.forEach(item => {
+                        let type = this.getFileType(item)
+                        if(type == 'mp4'){
+                            this.videos.push(
+                                {
+                                    type:type,
+                                    url:item,
+                                    name:item.slice(0, item.length - type.length - 1)
+                                }
+                            )
+                        }else{
+                            this.documents.push(
+                                {
+                                    type:type,
+                                    url:item,
+                                    name:item.slice(0, item.length - type.length - 1)
+                                }
+                            ) 
+                        }
+                        this.files.push(
+                            {
+                                type:type,
+                                url:item,
+                                name:item.slice(0, item.length - type.length - 1)
+                            }
+                        )
+                    });
+                }
+            })
+        },
+        getFileType(file){
+            let arr = file.split('.')
+            if(arr && arr.length>0){
+                return arr[arr.length-1]  
+            }
+            return '';
+        },
+        getUrl(file){
+            if(!file){
+                return
+            }
+            return `https://xsip.cn/onlinePreview/onlinePreview?url=` + encodeURIComponent(Base64.encode(this.baseUrl+file.url))
+        },
+    },
+}

src/views/moreMessage/components/versionMessage.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="versionMessage">
+        <div class="title">窍笔撰写辅助软件历史更新记录</div>
+        <div class="infinite-list-wrapper">
+            <ul
+                class="list"
+                v-infinite-scroll="load"
+                infinite-scroll-disabled="disabled">
+                <li v-for="item in versionList" :key="item.id" class="list-item">
+                    <div class="num">版本号：{{ item.versionNum }}</div>
+                    <div class="time">更新日期：{{ item.publishTime }}</div>
+                    <div class="remark">
+                        <div>更新要点</div>
+                        <div v-if="item.remark">{{ item.remark }}</div>
+                        <div v-else class="wu">无</div>
+                    </div>
+                </li>
+            </ul>
+            <p v-if="loading">加载中...</p>
+            <p v-if="noMore">没有更多了</p>
+        </div>
+    </div>
+  
+</template>
+
+<script>
+export default {
+    components: {},
+    props: {},
+    data () {
+        return {
+            versionList: [],
+            queryParams:{
+                current:0,
+                size:10,
+                status: "3"
+            },
+            loading: false,
+            noMore:false
+        }
+    },
+    watch: {},
+    computed: {
+        disabled () {
+            return this.loading || this.noMore
+        }
+    },
+    mounted() {},
+    methods: {
+        load () {
+            this.loading = true
+            this.queryParams.current += 1
+            this.$api.getVersionList(this.queryParams).then(response=>{
+                if(response.code == 200){
+                    this.versionList.push(...response.data.records)
+                    if(this.versionList.length == response.data.total){
+                        this.noMore = true
+                    }
+                    this.loading = false
+                }
+            }).catch(error=>{
+                this.loading = false
+            })
+        }
+    },
+};
+</script>
+<style lang="scss" scoped>
+.versionMessage{
+    width: 50%;
+    height: calc(100% - 30px);
+    margin: auto;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    box-shadow:  0 0 10px  rgb(102, 102, 102);
+    border-radius: 8px;
+    padding: 10px 15px;
+    text-align: left;
+    .title{
+        font-size: 18px;
+        font-weight: bold;
+        width: 100%;
+    }
+    .infinite-list-wrapper{
+        width: 100%;
+        overflow:auto;
+        height: calc(100vh - 280px);
+        div{
+            padding: 5px 0;
+            font-weight: bold;
+        }
+        .num{
+            color:red;
+        }
+        .wu{
+            color: rgb(170, 163, 163);
+            font-size: 15px;
+            font-weight: normal;
+        }
+    }
+}
+</style>

src/views/moreMessage/components/videoShow.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="video">
+        <el-carousel :interval="4000" type="card" :loop="false" :autoplay="false" trigger="click" arrow="always" height="calc(100vh - 300px)">
+            <el-carousel-item v-for="item in videos" :key="item.url">
+                <myVideo :url="`${baseUrl}${item.url}`" title=""></myVideo>
+            </el-carousel-item>
+        </el-carousel>
+    </div>
+</template>
+
+<script>
+import  mixin  from './mixins/index.js';
+export default {
+  components: {},
+  mixins:[mixin],
+  props: {},
+  data() {
+    return {
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.video{
+    padding-top: 20px;
+}
+</style>

src/views/moreMessage/components/vipPrice.vue

@@ -0,0 +1,21 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/moreMessage/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="height_100">
+    <moreMessage></moreMessage>
+  </div>
+</template>
+
+<script>
+import moreMessage from './moreMessage.vue';
+export default {
+  components: {
+    moreMessage
+  },
+  props: {},
+  data() {
+    return {
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/moreMessage/moreMessage.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="height_100 moreMessage">
+    <div class="head">
+        <div class="logo">
+            <el-image :src="require('@/assets/image/logo3.png')" class="img" fit="contain"></el-image>
+        </div>
+    </div>
+    
+    <div class="content">
+        <div class="menu">
+            <div v-for="item in components" :key="item.component" :class="currentClick == item.component?'isClick':''" @click="checkMessage(item.component)">{{ item.name }}</div>
+        </div>
+        <div v-for="item in components" :key="item.component" v-show="currentClick == item.component" class="content_item">
+            <component :is='item.component'></component>
+        </div>
+    </div>
+    <div class="foot">
+        copyright©窍笔软件技术（深圳）有限公司
+    </div>
+  </div>
+</template>
+
+<script>
+import versionMessage from './components/versionMessage.vue'
+import functionIntroduction from './components/functionIntroduction.vue'
+import videoShow from './components/videoShow.vue'
+import vipPrice from './components/vipPrice.vue'
+export default {
+  components: {
+    versionMessage,
+    functionIntroduction,
+    videoShow,
+    vipPrice
+  },
+  props: {},
+  data() {
+    return {
+        components:[
+            {
+                component:'versionMessage',
+                name:'版本信息',
+            },
+            {
+                component:'functionIntroduction',
+                name:'功能介绍'
+            },
+            {
+                component:'videoShow',
+                name:'视频演示'
+            },
+            {
+                component:'vipPrice',
+                name:'会员价格'
+            }
+        ],
+        currentClick:'versionMessage',
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {
+    checkMessage(currentClick){
+        this.currentClick = currentClick
+    }
+  },
+};
+</script>
+<style lang="scss">
+.moreMessage{
+    .el-carousel__indicators button {
+        background-color: #424a5b;
+    }
+    .el-carousel__button{
+        height: 15px;
+        width: 15px;
+        border-radius: 15px;
+    }
+}
+</style>
+<style lang="scss" scoped>
+.moreMessage{
+    display: flex;
+    flex-direction: column;
+    .head{
+        height: 120px;
+        background: #457ccd;
+        .logo{
+            margin: 20px 0 0 20px;
+            height: 80px;
+            width: fit-content;
+            z-index: 9999;
+            .img{
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+    .menu{
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        z-index: 9999;
+        margin-top: -25px;
+        div{
+            background: white;
+            border-radius: 8px;
+            padding: 15px 50px;
+            color: black;
+            font-weight: bold;
+            font-size: 20px;
+            box-shadow:  0 0 10px  rgb(102, 102, 102);
+            cursor: pointer;
+            &:hover{
+                background: #d4d4d4;
+            }
+        }
+        .isClick{
+            background: #d4d4d4;
+        }
+    }
+    .content{
+        flex: 1;
+        background: white;
+        .content_item{
+            margin-top: 15px;
+            height: calc(100% - 40px);
+        }
+    }
+    .foot{
+        text-align: center;
+        padding: 20px;
+        background: white;
+    }
+}
+
+</style>