Главная Обзор Помощь
Регистрация Вход
jiaweiqi
/
qw_customer
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

简单优化页面

panjiahao 10 месяцев назад
Родитель
a3a852f72e
Сommit
d7453792ca
10 измененных файлов с 842 добавлено и 609 удалено
Разделённый вид Показать статистику Diff
  1. 30 22
      public/index.html
  2. 2 4
      serves/axios.js
  3. 16 22
      src/App.vue
  4. 42 38
      src/router/index.js
  5. 49 46
      src/views/Fuzeren/GetMyId.vue
  6. 192 189
      src/views/userindex/indexpage/ArticleIndex.vue
  7. 165 0
      src/views/userindex/indexpage/ListIndex.vue
  8. 202 153
      src/views/userindex/indexpage/UserIndex.vue
  9. 90 81
      src/views/userindex/my/MyForward.vue
  10. 54 54
      src/views/userindex/my/MyIndex.vue

+ 30 - 22
public/index.html
Просмотреть файл 

@@ -1,24 +1,32 @@
 
 <!DOCTYPE html>
 
 <html lang="">
 
-
 
-<head>
 
-  <meta charset="utf-8">
 
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
-  <title>
 
-    <%= htmlWebpackPlugin.options.title %>
 
-  </title>
 
-</head>
 
-<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
 
-<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>
 
-<body>
 
-  <noscript>
 
-    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
 
-        Please enable it to continue.</strong>
 
-  </noscript>
 
-  <div id="app"></div>
 
-  <!-- built files will be auto injected -->
 
-</body>
 
-
 
-</html>
 
+  <head>
 
+    <meta charset="utf-8" />
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+    <meta
 
+      name="viewport"
 
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
 
+    />
 
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 
+    <title><%= htmlWebpackPlugin.options.title %></title>
 
+  </head>
 
+  <script
 
+    src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"
 
+    referrerpolicy="origin"
 
+  ></script>
 
+  <script
 
+    src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"
 
+    referrerpolicy="origin"
 
+  ></script>
 
+  <body>
 
+    <noscript>
 
+      <strong
 
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
 
+        properly without JavaScript enabled. Please enable it to
 
+        continue.</strong
 
+      >
 
+    </noscript>
 
+    <div id="app"></div>
 
+    <!-- built files will be auto injected -->
 
+  </body>
 
+</html>

+ 2 - 4
serves/axios.js
Просмотреть файл 

@@ -2,9 +2,9 @@ import axios from "axios";
 
 // import { gettoken } from "../services/token";
 
 // axios.defaults.withCredentials=true;
 
 const instance = axios.create({
 
-  baseURL: 'http://192.168.2.164:8899', //请求的基础地址
 
+  // baseURL: 'http://192.168.2.164:8899', //请求的基础地址
 
   // baseURL: window.location.origin + "/backend",
 
-  // baseURL: 'https://scrm.zzliaoyuan.com/backend', //请求的基础地址
 
+  baseURL: "https://scrm.zzliaoyuan.com/backend", //请求的基础地址
 
   timeout: 60000, //请求超时的时间
 
 });
 
 //发一个get请求
 
@@ -18,7 +18,6 @@ export default instance;
 
 // Add a request interceptor
 
 //全局请求拦截，发起网络请求之前执行
 
 instance.interceptors.request.use(
 
-
 
   function (config) {
 
     // Do something before request is sent
 
     // config.headers.Authorization = gettoken();
 
@@ -28,7 +27,6 @@ instance.interceptors.request.use(
 
     // Do something with request error
 
     return Promise.reject(error);
 
   }
 
-
 
 );
 
 
 // Add a response interceptor

+ 16 - 22
src/App.vue
Просмотреть файл 

@@ -1,46 +1,40 @@
 
 <template>
 
   <div id="app">
 
     <router-view class="main" />
 
-    <Tabbar v-show='isshowNav'
 
-            route
 
-            v-model="active">
 
-      <TabbarItem :to="{ name: 'index' }"
 
-                  icon="home-o">首页</TabbarItem>
 
-      <TabbarItem :to="{ name: 'myindex' }"
 
-                  icon="friends-o">我的</TabbarItem>
 
+    <Tabbar v-show="isshowNav" route v-model="active">
 
+      <TabbarItem :to="{ name: 'index' }" icon="home-o">首页</TabbarItem>
 
+      <TabbarItem :to="{ name: 'myindex' }" icon="friends-o">我的</TabbarItem>
 
     </Tabbar>
 
   </div>
 
 </template>
 
 <script>
 
 // import  {wxShareAppMessage} from "../common/common.js"
 
-import { Tabbar, TabbarItem } from 'vant';
 
+import { Tabbar, TabbarItem } from "vant";
 
 export default {
 
-  data () {
 
+  data() {
 
     return {
 
       active: 0,
 
-    }
 
-  },
 
-  mounted () {
 
-
 
+    };
 
   },
 
+  mounted() {},
 
   computed: {
 
-    isshowNav () {
 
-      console.log('观察tarbar', this.$route.meta.hideNav)
 
-      return this.$route.meta.hideNav
 
-    }
 
+    isshowNav() {
 
+      // console.log('观察tarbar', this.$route.meta.hideNav)
 
+      return this.$route.meta.hideNav;
 
+    },
 
   },
 
   components: {
 
-    Tabbar, TabbarItem
 
+    Tabbar,
 
+    TabbarItem,
 
   },
 
 
-  methods: {
 
-  },
 
+  methods: {},
 
   // watch: {
 
   // toShare(shareData){
 
   //     wxShareAppMessage(shareData)
 
   //  }
 
   // }
 
-}
 
+};
 
 </script>
 
 <style lang="scss">
 
 // @import url(@/assets/icon/iconfont.css;);
 
@@ -79,7 +73,7 @@ body {
 
 .van-tabbar {
 
   height: 7rem !important;
 
 }
 
-.van-tabbar-item{
 
+.van-tabbar-item {
 
   font-size: 1.4rem !important;
 
 }
 
 .van-tabbar-item .van-icon {

+ 42 - 38
src/router/index.js
Просмотреть файл 

@@ -1,69 +1,73 @@
 
-import Vue from 'vue'
 
-import VueRouter from 'vue-router'
 
+import Vue from "vue";
 
+import VueRouter from "vue-router";
 
 
-
 
-Vue.use(VueRouter)
 
+Vue.use(VueRouter);
 
 
 const routes = [
 
   {
 
-    path: '/',
 
-    name: 'fuzeren',
 
-    component: () => import('../views/Fuzeren/FuzerenView.vue')
 
+    path: "/",
 
+    name: "fuzeren",
 
+    component: () => import("../views/Fuzeren/FuzerenView.vue"),
 
   },
 
   //首页
 
   {
 
-    path: '/index',
 
-    name: 'index',
 
-    component: () => import('../views/userindex/indexpage/UserIndex.vue'),
 
+    path: "/index",
 
+    name: "index",
 
+    component: () => import("../views/userindex/indexpage/UserIndex.vue"),
 
     meta: {
 
-      hideNav: true
 
-    }
 
+      hideNav: true,
 
+    },
 
   },
 
   // 文章页
 
   {
 
-    path: '/textpage',
 
-    name: 'textpage',
 
-    component: () => import('../views/userindex/indexpage/ArticleIndex.vue'),
 
-
 
+    path: "/textpage",
 
+    name: "textpage",
 
+    component: () => import("../views/userindex/indexpage/ArticleIndex.vue"),
 
+  },
 
+  {
 
+    path: "/lists",
 
+    name: "lists",
 
+    component: () => import("../views/userindex/indexpage/ListIndex.vue"),
 
   },
 
   // 我的
 
   {
 
-    path: '/myindex',
 
-    name: 'myindex',
 
-    component: () => import('../views/userindex/my/MyIndex.vue'),
 
+    path: "/myindex",
 
+    name: "myindex",
 
+    component: () => import("../views/userindex/my/MyIndex.vue"),
 
     meta: {
 
-      hideNav: true
 
-    }
 
+      hideNav: true,
 
+    },
 
   },
 
   // 我的转发
 
   {
 
-    path: '/myforward',
 
-    name: 'myforward',
 
-    component: () => import('../views/userindex/my/MyForward.vue')
 
+    path: "/myforward",
 
+    name: "myforward",
 
+    component: () => import("../views/userindex/my/MyForward.vue"),
 
   },
 
   //跳转空页面获取code
 
   {
 
-    path: '/GetMyId',
 
-    name: 'GetMyId',
 
-    component: () => import('../views/Fuzeren/GetMyId.vue')
 
+    path: "/GetMyId",
 
+    name: "GetMyId",
 
+    component: () => import("../views/Fuzeren/GetMyId.vue"),
 
   },
 
   //GetUserIndex 页面获取code
 
   {
 
-    path: '/GetUserIndex',
 
-    name: 'GetUserIndex',
 
-    component: () => import('../views/userindex/indexpage/GetUserIndexMyid.vue')
 
+    path: "/GetUserIndex",
 
+    name: "GetUserIndex",
 
+    component: () =>
 
+      import("../views/userindex/indexpage/GetUserIndexMyid.vue"),
 
   },
 
   // 我的转发详情
 
   {
 
-    path: '/myforwarddetail',
 
-    name: 'myforwarddetail',
 
-    component: () => import('../views/userindex/my/MyForwarddetail.vue')
 
+    path: "/myforwarddetail",
 
+    name: "myforwarddetail",
 
+    component: () => import("../views/userindex/my/MyForwarddetail.vue"),
 
   },
 
-]
 
+];
 
 const router = new VueRouter({
 
-  mode: 'hash',
 
+  mode: "hash",
 
   base: process.env.BASE_URL,
 
-  routes
 
-})
 
+  routes,
 
+});
 
 
-export default router
 
+export default router;

+ 49 - 46
src/views/Fuzeren/GetMyId.vue
Просмотреть файл 

@@ -1,57 +1,60 @@
 
 <template>
 
-    <div></div>
 
+  <div></div>
 
 </template>
 
 <script>
 
-import { get } from '../../../serves/axios';
 
+import { get } from "../../../serves/axios";
 
 
-export default{
 
-    data(){
 
-        return{
 
-          corpid:''
 
-        }
 
-    },
 
-    created(){
 
-
 
-    },
 
-    mounted(){
 
-      // this.getCorpId()
 
-    },
 
-    methods:{
 
-      //获取corpid
 
-      getCorpId(){
 
-        get('/api/customer/chat_side/corpid/').then(res=>{
 
-          if(res.code==2000){
 
-            this.corpid=res.data.corpid
 
-            if(this.corpid && this.corpid!==''&&this.corpid!=='undefind'){
 
-              this.setCode()
 
-            }
 
+export default {
 
+  data() {
 
+    return {
 
+      corpid: "",
 
+    };
 
+  },
 
+  created() {},
 
+  mounted() {
 
+    this.getCorpId();
 
+  },
 
+  methods: {
 
+    //获取corpid
 
+    getCorpId() {
 
+      get("/api/customer/chat_side/corpid/").then((res) => {
 
+        if (res.code == 2000) {
 
+          this.corpid = res.data.corpid;
 
+          if (this.corpid && this.corpid !== "" && this.corpid !== "undefind") {
 
+            this.setCode();
 
           }
 
-        })
 
-      },
 
-      //截取链接中的code
 
-      getQuery(){
 
-        let { search } =window.location;
 
-        if(!search){
 
-          return {};
 
-        }
 
-        search=search.slice(1);
 
-        let query = search.split("&");
 
-        query = query.map(item=>item.split('='))
 
-        return Object.fromEntries(query)
 
-      },
 
-      //设置code
 
-      setCode(){
 
-        let query = this.getQuery()
 
-        if(!query.code){
 
-            return window.location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.corpid}&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_base&state=STATE&agentid=AGENTID#wechat_redirect`
 
-        }else{
 
-            this.$router.push({name:'fuzeren',query:{auth_code:query.code}})
 
         }
 
+      });
 
+    },
 
+    //截取链接中的code
 
+    getQuery() {
 
+      let { search } = window.location;
 
+      if (!search) {
 
+        return {};
 
       }
 
+      search = search.slice(1);
 
+      let query = search.split("&");
 
+      query = query.map((item) => item.split("="));
 
+      return Object.fromEntries(query);
 
     },
 
-    components:{
 
-
 
+    //设置code
 
+    setCode() {
 
+      let query = this.getQuery();
 
+      if (!query.code) {
 
+        return (window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
 
+          this.corpid
 
+        }&redirect_uri=${encodeURIComponent(
 
+          window.location.href
 
+        )}&response_type=code&scope=snsapi_base&state=STATE&agentid=AGENTID#wechat_redirect`);
 
+      } else {
 
+        this.$router.push({
 
+          name: "fuzeren",
 
+          query: { auth_code: query.code },
 
+        });
 
+      }
 
     },
 
-}
 
+  },
 
+  components: {},
 
+};
 
 </script>
 
 <style lang="scss"></style>

+ 192 - 189
src/views/userindex/indexpage/ArticleIndex.vue
Просмотреть файл 

@@ -1,197 +1,201 @@
 
 <template>
 
   <div style="overflow: hidden">
 
-
 
     <Sticky>
 
       <NavBar
 
-              @click-left="onClickLeft"
 
-              left-arrow
 
-              left-text="返回"
 
-              title="文章详情"
 
+        @click-left="onClickLeft"
 
+        left-arrow
 
+        left-text="返回"
 
+        title="文章详情"
 
       >
 
         <template #right>
 
-        <span
 
-                @click="clkgood"
 
-                id="clickgood">
 
-      <icon name="like-o" v-if="!isgood"/>
 
-      <icon color="red" name="like" v-else/>
 
+          <span @click="clkgood" id="clickgood">
 
+            <icon name="like-o" v-if="!isgood" />
 
+            <icon color="red" name="like" v-else />
 
           </span>
 
         </template>
 
       </NavBar>
 
     </Sticky>
 
 
-
 
     <div class="indexbox">
 
       <Panel :desc="textdetaildata.creator_name" :title="textdetaildata.title">
 
         <div>
 
-          <div class="container" style="overflow: hidden"
 
-               v-html="textdetaildata.content">
 
-          </div>
 
+          <div
 
+            class="container"
 
+            style="overflow: hidden"
 
+            v-html="textdetaildata.content"
 
+          ></div>
 
           <div class="like">
 
             <span>发布日期:{{ textdetaildata.create_datetime }}</span>
 
             <span>阅读量:{{ textdetaildata.read_count }}</span>
 
-
 
           </div>
 
-
 
         </div>
 
 
         <template #footer>
 
-          <div class="contacts" v-if="myId?true:false">
 
+          <div class="contacts" v-if="myId ? true : false">
 
             <div>
 
-              <h1>{{ menuberinfo }}</h1>
 
+              <h1 style="font-size: 1.5rem">{{ menuberinfo }}</h1>
 
               <div>
 
                 <span @click="showPopup" class="iconfont icon-weixin"></span>
 
                 <span @click="callPhone" class="iconfont icon-dianhua"></span>
 
               </div>
 
             </div>
 
-            <popup :style="{ height: '60%',width:'80vw' }"
 
-                   closeable
 
-                   close-icon="close"
 
-                   v-model="show">
 
+            <popup
 
+              :style="{ height: '60%', width: '80vw' }"
 
+              closeable
 
+              close-icon="close"
 
+              v-model="show"
 
+            >
 
               <div id="qrcode">
 
                 <div class="top-color">
 
-                  <img :src=avatar
 
-                       alt=""
 
-                  >
 
-
 
+                  <img :src="avatar" alt="" />
 
                 </div>
 
                 <div class="qrcodeimg">
 
-                  <span ></span>
 
-                  <img :src=qrcode
 
-                       alt="" >
 
-                  <p >长按识别二维码，添加 <ww-open-data type="userName" :openid=myId />企业微信</p>
 
+                  <span></span>
 
+                  <img :src="qrcode" alt="" />
 
+                  <p>
 
+                    长按识别二维码，添加
 
+                    <ww-open-data type="userName" :openid="myId" />企业微信
 
+                  </p>
 
                 </div>
 
-
 
               </div>
 
             </popup>
 
             <div>
 
-              <img :src=avatar
 
-                   alt=""
 
-                   style="width: 15vw;height: 15vw;border-radius: 50%;">
 
+              <img
 
+                :src="avatar"
 
+                alt=""
 
+                style="width: 15vw; height: 15vw; border-radius: 50%"
 
+              />
 
             </div>
 
           </div>
 
         </template>
 
       </Panel>
 
-
 
-
 
     </div>
 
   </div>
 
 </template>
 
 <script>
 
-  import {
 
-    getArticleCategoryDetail,
 
-    clkgoodInfo,
 
-    getMember,
 
-    getShareParmas,
 
-    getparameter,
 
-    postShareinfo
 
-  } from "../../../../serves/prove";
 
-  import {Popup, NavBar, Toast, Panel, icon, Sticky} from "vant";
 
-  import storage from '../../../util/sessionStorage.js'
 
+import {
 
+  getArticleCategoryDetail,
 
+  clkgoodInfo,
 
+  getMember,
 
+  getShareParmas,
 
+  getparameter,
 
+  postShareinfo,
 
+} from "../../../../serves/prove";
 
+import { Popup, NavBar, Toast, Panel, icon, Sticky } from "vant";
 
+import storage from "../../../util/sessionStorage.js";
 
 
 export default {
 
-  data () {
 
+  data() {
 
     return {
 
       textdetaildata: {},
 
       article_id: "",
 
-      isgood: '',
 
+      isgood: "",
 
       show: false,
 
-      menuberinfo: '',
 
-      avatar: '',
 
-      qrcode: '',
 
-      phone: '',
 
-      myId: '',
 
+      menuberinfo: "",
 
+      avatar: "",
 
+      qrcode: "",
 
+      phone: "",
 
+      myId: "",
 
       shareData: {
 
-        title: '',
 
-        desc: '',
 
-        link: '',
 
-        imgUrl: ''
 
-      }
 
-    }
 
+        title: "",
 
+        desc: "",
 
+        link: "",
 
+        imgUrl: "",
 
+      },
 
+    };
 
   },
 
   components: {
 
-    Popup, NavBar, Panel, icon, Sticky
 
+    Popup,
 
+    NavBar,
 
+    Panel,
 
+    icon,
 
+    Sticky,
 
   },
 
   created() {
 
-    if (!this.$route.query.id || this.$route.query.id === "" || this.$route.query.id === "undefined") {
 
+    if (
 
+      !this.$route.query.id ||
 
+      this.$route.query.id === "" ||
 
+      this.$route.query.id === "undefined"
 
+    ) {
 
       Toast("页面参数错误");
 
-      return false
 
+      return false;
 
     }
 
     this.article_id = this.$route.query.id;
 
     if (!this.myId) {
 
-      this.myId = storage.getLocalstorage('user_id')
 
+      this.myId = storage.getLocalstorage("user_id");
 
     }
 
-    if (this.myId != null && this.myId !== '' && this.myId !== 'undefined') {
 
-      this.getMemberapi(this.myId)
 
+    if (this.myId != null && this.myId !== "" && this.myId !== "undefined") {
 
+      this.getMemberapi(this.myId);
 
     }
 
     // this.myId = 'WeiQiJia'
 
-    this.getUserIdparameter({'url': location.href.split('#')[0]})
 
+    this.getUserIdparameter({ url: location.href.split("#")[0] });
 
   },
 
-  mounted () {
 
+  mounted() {
 
     this.textdetailapi(this.article_id, this.myId);
 
   },
 
   methods: {
 
     //底部弹出
 
-    showPopup () {
 
+    showPopup() {
 
       this.show = true;
 
     },
 
     //点赞接口
 
-    clkgood () {
 
+    clkgood() {
 
       if (this.isgood) {
 
-        Toast.fail('不能取消点赞');
 
+        Toast.fail("不能取消点赞");
 
       } else {
 
-        clkgoodInfo(this.article_id, this.myId)
 
-        this.isgood = true
 
-        Toast.success('点赞成功');
 
+        clkgoodInfo(this.article_id, this.myId);
 
+        this.isgood = true;
 
+        Toast.success("点赞成功");
 
       }
 
-
 
     },
 
     //文章详情接口
 
-    async textdetailapi (id, userId) {
 
+    async textdetailapi(id, userId) {
 
       const res = await getArticleCategoryDetail(id, userId);
 
       if (res.code === 2000) {
 
         this.textdetaildata = res.data;
 
         this.isgood = res.data.like;
 
       }
 
-
 
     },
 
     onClickLeft() {
 
-      this.$router.go(-1)
 
+      this.$router.go(-1);
 
     },
 
     //分享到对话框
 
-    shareDialogue () {
 
+    shareDialogue() {
 
       window.wx.invoke(
 
-        "shareAppMessage", {
 
-        title: '', // 分享标题
 
-        desc: '', // 分享描述
 
-        link: '', // 分享链接
 
-        imgUrl: '', // 分享封面
 
-        enableIdTrans: 0, // 是否开启id转译，不填默认为0
 
-      }, function (res) {
 
-        if (res.err_msg === "shareAppMessage:ok") {
 
-          //正确处理
 
-        } else {
 
-          //错误处理
 
+        "shareAppMessage",
 
+        {
 
+          title: "", // 分享标题
 
+          desc: "", // 分享描述
 
+          link: "", // 分享链接
 
+          imgUrl: "", // 分享封面
 
+          enableIdTrans: 0, // 是否开启id转译，不填默认为0
 
+        },
 
+        function (res) {
 
+          if (res.err_msg === "shareAppMessage:ok") {
 
+            //正确处理
 
+          } else {
 
+            //错误处理
 
+          }
 
         }
 
-      }
 
       );
 
     },
 
     //获取个人信息  //WeiQiJia
 
-    async getMemberapi (user_id) {
 
-      const res = await getMember(user_id)
 
+    async getMemberapi(user_id) {
 
+      const res = await getMember(user_id);
 
       if (res.code === 2000) {
 
-        this.menuberinfo = res.data.name
 
-        this.avatar = res.data.avatar
 
-        this.phone = res.data.tel
 
-        this.qrcode = res.data.qrcode
 
+        this.menuberinfo = res.data.name;
 
+        this.avatar = res.data.avatar;
 
+        this.phone = res.data.tel;
 
+        this.qrcode = res.data.qrcode;
 
       }
 
     },
 
     //打电话
 
-    callPhone () {
 
-      window.location.href = 'tel:'+ this.phone
 
+    callPhone() {
 
+      window.location.href = "tel:" + this.phone;
 
     },
 
     //获取分享参数 在wx.ready执行分享的事件分享到朋友/朋友圈等
 
-    async getShareParmasinfo (id,myId) {
 
-      const res = await getShareParmas(id,myId);
 
+    async getShareParmasinfo(id, myId) {
 
+      const res = await getShareParmas(id, myId);
 
       let { title, desc, link, image } = res.data;
 
       this.shareData.title = title;
 
       this.shareData.desc = desc;
 
@@ -204,17 +208,17 @@ export default {
 
         imgUrl: image, // 分享图标
 
         enableIdTrans: 0, // 是否开启id转译，不填默认为0
 
         success: function () {
 
-            postShareinfo({'article':id,'userid':myId})
 
+          postShareinfo({ article: id, userid: myId });
 
           // 用户确认分享后执行的回调函数
 
         },
 
         error: function (res) {
 
-          if (res.errMsg.indexOf('no permission') > 0) {
 
-            alert.log('未agentConfig')
 
+          if (res.errMsg.indexOf("no permission") > 0) {
 
+            alert.log("未agentConfig");
 
           }
 
         },
 
         cancel: function () {
 
           // 用户取消分享后执行的回调函数
 
-        }
 
+        },
 
       });
 
       window.wx.onMenuShareTimeline({
 
         title: title, // 分享标题
 
@@ -222,16 +226,16 @@ export default {
 
         imgUrl: image, // 分享图标
 
         enableIdTrans: 0, // 是否开启id转译，不填默认为0
 
         success: function () {
 
-          postShareinfo({'article':id,'userid':myId})
 
+          postShareinfo({ article: id, userid: myId });
 
         },
 
         error: function (res) {
 
-          if (res.errMsg.indexOf('no permission') > 0) {
 
-            alert('未agentConfig')
 
+          if (res.errMsg.indexOf("no permission") > 0) {
 
+            alert("未agentConfig");
 
           }
 
         },
 
         cancel: function () {
 
           // 用户取消分享后执行的回调函数
 
-        }
 
+        },
 
       });
 
       window.wx.onMenuShareWechat({
 
         title: title, // 分享标题
 
@@ -240,106 +244,108 @@ export default {
 
         imgUrl: image, // 分享图标
 
         enableIdTrans: 0, // 是否开启id转译，不填默认为0
 
         success: function () {
 
-          postShareinfo({'article':id,'userid':myId})
 
+          postShareinfo({ article: id, userid: myId });
 
         },
 
         error: function (res) {
 
-          if (res.errMsg.indexOf('no permission') > 0) {
 
-            alert('未agentConfig')
 
+          if (res.errMsg.indexOf("no permission") > 0) {
 
+            alert("未agentConfig");
 
           }
 
         },
 
         cancel: function () {
 
           // 用户取消分享后执行的回调函数
 
-        }
 
+        },
 
       });
 
-
 
     },
 
     //config
 
-    async getUserIdparameter (url) {
 
-      let result = await getparameter(url)
 
+    async getUserIdparameter(url) {
 
+      let result = await getparameter(url);
 
       if (result.code !== 2000) {
 
-          Toast(result.msg)
 
-          return false;
 
+        Toast(result.msg);
 
+        return false;
 
       }
 
-      let { appId, agentid, timestamp, nonceStr, signature, agent_signature } = result.data;
 
+      let { appId, agentid, timestamp, nonceStr, signature, agent_signature } =
 
+        result.data;
 
       this._Config(appId, timestamp, nonceStr, signature)
 
-          .then(data=> {
 
-              return this.getShareParmasinfo(this.article_id, this.myId)
 
-          })
 
-          .catch(data => {
 
-              Toast(data)
 
-          })
 
-    },
 
-    _Config (appId, timestamp, nonceStr, signature) {
 
-        return new Promise(function (resolve, reject) {
 
-            const wx = window.wx;
 
-            if (!wx) {
 
-                reject("企业微信apk引入失败，尝试刷新页面！")
 
-            }
 
-            wx.config({
 
-                beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
 
-                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
 
-                appId: appId, // 必填，企业微信的corpID
 
-                timestamp: timestamp, // 必填，生成签名的时间戳
 
-                nonceStr: nonceStr, // 必填，生成签名的随机串
 
-                signature: signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
 
-                jsApiList: ["agentConfig", "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareWechat"], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
 
-            });
 
-            wx.ready(function () {
 
-                resolve()
 
-            });
 
-            wx.error(function (res) {
 
-                reject("注入权限验证失败")
 
-            })
 
+        .then((data) => {
 
+          return this.getShareParmasinfo(this.article_id, this.myId);
 
         })
 
+        .catch((data) => {
 
+          Toast(data);
 
+        });
 
+    },
 
+    _Config(appId, timestamp, nonceStr, signature) {
 
+      return new Promise(function (resolve, reject) {
 
+        const wx = window.wx;
 
+        if (!wx) {
 
+          reject("企业微信apk引入失败，尝试刷新页面！");
 
+        }
 
+        wx.config({
 
+          beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
 
+          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
 
+          appId: appId, // 必填，企业微信的corpID
 
+          timestamp: timestamp, // 必填，生成签名的时间戳
 
+          nonceStr: nonceStr, // 必填，生成签名的随机串
 
+          signature: signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
 
+          jsApiList: [
 
+            "agentConfig",
 
+            "onMenuShareTimeline",
 
+            "onMenuShareAppMessage",
 
+            "onMenuShareWechat",
 
+          ], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
 
+        });
 
+        wx.ready(function () {
 
+          resolve();
 
+        });
 
+        wx.error(function (res) {
 
+          reject("注入权限验证失败");
 
+        });
 
+      });
 
     },
 
     _agentConfig(appId, agentid, timestamp, nonceStr, agent_signature) {
 
       return new Promise(function (resolve, reject) {
 
-      const wx = window.wx;
 
+        const wx = window.wx;
 
         if (!wx) {
 
-            reject("企业微信apk引入失败，尝试刷新页面！")
 
+          reject("企业微信apk引入失败，尝试刷新页面！");
 
         }
 
         wx.agentConfig({
 
-            corpid: appId, // 必填，企业微信的corpid，必须与当前登录的企业一致
 
-            agentid: agentid, // 必填，企业微信的应用id （e.g. 1000247）
 
-            timestamp: timestamp, // 必填，生成签名的时间戳
 
-            nonceStr: nonceStr, // 必填，生成签名的随机串
 
-            signature: agent_signature,// 必填，签名，见附录-JS-SDK使用权限签名算法
 
-            jsApiList: ['getContext', 'getCurExternalContact'], //必填，传入需要使用的接口名称
 
-            success: function (res) {
 
-                resolve()
 
-            },
 
-            fail: function (res) {
 
-                if (res.errMsg.indexOf('function not exist') > -1) {
 
-                    reject("版本过低请升级")
 
-                } else {
 
-                  reject("应用注入权限验证失败")
 
-                }
 
+          corpid: appId, // 必填，企业微信的corpid，必须与当前登录的企业一致
 
+          agentid: agentid, // 必填，企业微信的应用id （e.g. 1000247）
 
+          timestamp: timestamp, // 必填，生成签名的时间戳
 
+          nonceStr: nonceStr, // 必填，生成签名的随机串
 
+          signature: agent_signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
 
+          jsApiList: ["getContext", "getCurExternalContact"], //必填，传入需要使用的接口名称
 
+          success: function (res) {
 
+            resolve();
 
+          },
 
+          fail: function (res) {
 
+            if (res.errMsg.indexOf("function not exist") > -1) {
 
+              reject("版本过低请升级");
 
+            } else {
 
+              reject("应用注入权限验证失败");
 
             }
 
-        })
 
-      })
 
+          },
 
+        });
 
+      });
 
     },
 
   },
 
-}
 
+};
 
 </script>
 
 <style lang="scss">
 
+img {
 
+  max-width: 100%;
 
+  max-height: 100%;
 
+}
 
 
+.indexbox {
 
+  width: 90vw;
 
+  // height: 0vh !important;
 
+  margin: 0 auto;
 
+  box-sizing: border-box;
 
+  overflow-y: auto;
 
 
-  img {
 
-    max-width: 100%;
 
-    max-height: 100%;
 
-  }
 
-
 
-  .indexbox {
 
-    width: 90vw;
 
-    // height: 0vh !important;
 
-    margin: 0 auto;
 
-    padding-top: 2rem;
 
-    box-sizing: border-box;
 
-    overflow-y: auto;
 
-
 
-    .imgStyle {
 
-      position: absolute;
 
-      display: flex;
 
+  .imgStyle {
 
+    position: absolute;
 
+    display: flex;
 
     left: -1vw;
 
     width: 18vw;
 
     margin-left: 1vw;
 
@@ -381,7 +387,7 @@ export default {
 
       justify-content: center;
 
       align-items: center;
 
 
-      .qrcodeimg{
 
+      .qrcodeimg {
 
         width: 100%;
 
         flex: 1;
 
         display: flex;
 
@@ -394,20 +400,20 @@ export default {
 
           width: 50vw;
 
           height: 50vw;
 
         }
 
-        span{
 
+        span {
 
           display: block;
 
           width: 80%;
 
           height: 1rem;
 
           border-radius: 30px;
 
           background: linear-gradient(to right, #a1c4fd, #c2e9fb);
 
         }
 
-        p{
 
+        p {
 
           font-size: 1rem;
 
           margin-top: 10px;
 
         }
 
       }
 
       .top-color {
 
-        width:100%;
 
+        width: 100%;
 
         height: 10rem;
 
         background-image: linear-gradient(to bottom, #3974c7, #f2f4f8);
 
         display: flex;
 
@@ -421,7 +427,6 @@ export default {
 
           height: 6rem;
 
           border-radius: 50%;
 
         }
 
-
 
       }
 
     }
 
 
@@ -499,6 +504,4 @@ export default {
 
 .pith {
 
   background: gray !important;
 
 }
 
-
 
-
 
 </style>

+ 165 - 0
src/views/userindex/indexpage/ListIndex.vue
Просмотреть файл 

@@ -0,0 +1,165 @@
 
+<template>
 
+  <div>
 
+    <Sticky>
 
+      <NavBar
 
+        @click-left="$router.go(-1)"
 
+        left-arrow
 
+        left-text="返回"
 
+        :title="$route.query.title"
 
+      >
 
+      </NavBar>
 
+    </Sticky>
 
+
 
+    <div class="indexbox">
 
+      <div class="title">
 
+        <list
 
+          v-model="loading"
 
+          :finished="finished"
 
+          finished-text="没有更多了"
 
+          @load="onLoad($route.query.id)"
 
+        >
 
+          <div
 
+            @click="wenzhangdetail(item.id)"
 
+            class="card"
 
+            v-for="item in articledata"
 
+            :key="item.id"
 
+          >
 
+            <p style="width: 20vw; height: 20vw">
 
+              <img
 
+                style="width: 100%; height: 100%"
 
+                :src="item.cover_url"
 
+                alt=""
 
+              />
 
+            </p>
 
+            <div class="cardtit">
 
+              <h4>{{ item.title }}</h4>
 
+              <p>{{ item.intro }}</p>
 
+              <p>
 
+                <span>{{ item.creator_name }}</span
 
+                ><span>{{ item.create_datetime }}</span>
 
+              </p>
 
+            </div>
 
+          </div>
 
+        </list>
 
+      </div>
 
+      <div style="height: 10rem"></div>
 
+    </div>
 
+  </div>
 
+</template>
 
+<script>
 
+import { list, NavBar, Sticky } from "vant";
 
+import { getArticleCategoryList } from "../../../../serves/prove";
 
+export default {
 
+  data() {
 
+    return {
 
+      articledata: [], //文章内容
 
+      loading: false,
 
+      finished: false,
 
+      page: 1,
 
+      limit: 10,
 
+    };
 
+  },
 
+  //   Tab,Tabs,List,
 
+  components: {
 
+    list,
 
+    Sticky,
 
+    NavBar,
 
+  },
 
+  async created() {
 
+    await this.indexcategoryapi(this.$route.query.id, this.limit, this.page);
 
+  },
 
+  mounted() {},
 
+  methods: {
 
+    //文章列表数据
 
+    async indexcategoryapi(id, limit, page) {
 
+      const res = await getArticleCategoryList(id, limit, page);
 
+      this.articledata = res.data.data;
 
+      if (this.articledata.length < res.data.data.length) {
 
+        this.loading = false;
 
+      } else {
 
+        this.finished = true;
 
+      }
 
+    },
 
+    wenzhangdetail(id) {
 
+      this.$router.push({ name: "textpage", query: { id } });
 
+    },
 
+    //触底刷新
 
+    async onLoad(id) {
 
+      this.loading = true;
 
+      this.page++;
 
+      const res = await getArticleCategoryList(id, this.limit, this.page);
 
+      if (res.code === 2000) {
 
+        this.articledata = [...this.articledata, ...res.data.data];
 
+        if (res.data.data.length < 1) {
 
+          this.finished = true;
 
+        }
 
+      }
 
+    },
 
+  },
 
+};
 
+</script>
 
+<style scoped lang="scss">
 
+//swiper
 
+.indexbox {
 
+  width: 90vw;
 
+  margin: 0 auto;
 
+  box-sizing: border-box;
 
+  //标签内容
 
+  .title {
 
+    font-size: 1.4rem !important;
 
+    .card {
 
+      margin-top: 2rem;
 
+      width: 100%;
 
+      // height: 8rem;
 
+      display: flex;
 
+      margin-bottom: 5vw;
 
+      // justify-content: space-between;
 
+
 
+      .cardtit {
 
+        width: 70%;
 
+        display: flex;
 
+        flex-direction: column;
 
+        box-sizing: border-box;
 
+        padding-left: 2vw;
 
+
 
+        h4 {
 
+          color: black;
 
+          font-size: 1.2rem;
 
+          display: -webkit-box;
 
+          -webkit-line-clamp: 1;
 
+          /* 显示两行文本 */
 
+          -webkit-box-orient: vertical;
 
+          overflow: hidden;
 
+          text-overflow: ellipsis;
 
+        }
 
+
 
+        p:nth-child(2) {
 
+          font-size: 1rem;
 
+          color: gray;
 
+          display: -webkit-box;
 
+          -webkit-line-clamp: 1;
 
+          /* 显示两行文本 */
 
+          -webkit-box-orient: vertical;
 
+          overflow: hidden;
 
+          text-overflow: ellipsis;
 
+          box-sizing: border-box;
 
+          padding-top: 3vw;
 
+        }
 
+
 
+        p:nth-child(3) {
 
+          font-size: 1rem;
 
+          display: flex;
 
+          justify-content: space-between;
 
+          text-overflow: ellipsis;
 
+          box-sizing: border-box;
 
+          padding-top: 3vw;
 
+        }
 
+      }
 
+
 
+      img {
 
+        width: 30%;
 
+      }
 
+    }
 
+  }
 
+}
 
+</style>

+ 202 - 153
src/views/userindex/indexpage/UserIndex.vue
Просмотреть файл 

@@ -1,160 +1,177 @@
 
 <template>
 
   <div class="indexbox">
 
     <div class="banner">
 
-      <swipe class="my-swipe"
 
-             :autoplay="2000"
 
-             indicator-color="white">
 
-        <swipe-item v-for="(item, index) in swiperimg"
 
-                    :key="index"><img :src="item"
 
-               alt=""></swipe-item>
 
-
 
+      <swipe class="my-swipe" :autoplay="2000" indicator-color="white">
 
+        <swipe-item v-for="(item, index) in swiperimg" :key="index"
 
+          ><img :src="item" alt=""
 
+        /></swipe-item>
 
       </swipe>
 
     </div>
 
     <div class="title">
 
       <Divider>客服顾问</Divider>
 
-      <div class="contacts" v-if="myId?true:false">
 
+      <div class="contacts" v-if="myId ? true : false">
 
         <div>
 
-          <h1>{{ menuberinfo?menuberinfo:'未授权'}}</h1>
 
-          <div >
 
+          <h1 style="font-size: 1.5rem">
 
+            {{ menuberinfo ? menuberinfo : "未授权" }}
 
+          </h1>
 
+          <div>
 
             <span @click="showPopup" class="iconfont icon-weixin"></span>
 
             <span @click="callPhone" class="iconfont icon-dianhua"></span>
 
           </div>
 
         </div>
 
-        <popup :style="{ height: '60%',width:'80vw' }"
 
-               closeable
 
-               close-icon="close"
 
-               v-model="show">
 
+        <popup
 
+          :style="{ height: '400px', width: '80vw' }"
 
+          closeable
 
+          close-icon="close"
 
+          v-model="show"
 
+        >
 
           <div id="qrcode">
 
             <div class="top-color">
 
-              <img :src=avatar
 
-                   alt=""
 
-              >
 
+              <img :src="avatar" alt="" />
 
             </div>
 
             <div class="qrcodeimg">
 
-              <span ></span>
 
-              <img :src=qrcode
 
-                   alt="">
 
-              <p >长按识别二维码，添加 <ww-open-data type="userName" :openid=myId />企业微信</p>
 
+              <span></span>
 
+              <img :src="qrcode" alt="" />
 
+              <p>
 
+                长按识别二维码，添加
 
+                <ww-open-data type="userName" :openid="myId" />企业微信
 
+              </p>
 
             </div>
 
           </div>
 
         </popup>
 
         <div>
 
-          <img :src=avatar
 
-               alt=""
 
-               style="width: 15vw;height: 15vw;border-radius: 50%;">
 
+          <img
 
+            :src="avatar"
 
+            alt=""
 
+            style="width: 15vw; height: 15vw; border-radius: 50%"
 
+          />
 
         </div>
 
       </div>
 
       <Divider>精选文章</Divider>
 
-      <tabs @click="onClick"
 
-            v-model="active"
 
-            animated
 
-            sticky
 
-            color="blue">
 
-        <tab v-for="item in category"
 
-             :title="item.name"
 
-             :key="item.id">
 
-          <list v-model="loading"
 
-                :finished="finished"
 
-                finished-text="没有更多了"
 
-                @load="onLoad(item.id)">
 
-            <div @click="wenzhangdetail(item.id)"
 
-                 class="card"
 
-                 v-for="item in articledata"
 
-                 :key="item.id">
 
-                 <p style="width: 20vw; height: 20vw;">  <img style="width: 100%; height: 100%; " :src="item.cover_url"
 
-                   alt=""></p>
 
-              <div class="cardtit">
 
-                <h4>{{ item.title }}</h4>
 
-                <p>{{ item.intro }}</p>
 
-                <p><span>{{ item.creator_name
 
-                }}</span><span>{{ item.create_datetime }}</span></p>
 
-              </div>
 
+      <div>
 
+        <template v-for="item in category">
 
+          <div class="Text" :key="item.id" v-if="item.name != '全部'">
 
+            <div class="TextHead">
 
+              <span
 
+                ><h4>{{ item.name }}</h4></span
 
+              >
 
+              <p @click="Jump(item.id, item.name)">查看更多</p>
 
             </div>
 
-          </list>
 
-        </tab>
 
-      </tabs>
 
-    </div>
 
-    <div>
 
+
 
+            <span
 
+              v-if="!articledata.find((e) => e.category_name == item.name)"
 
+              style="color: #a3a3a3; font-size: 1rem"
 
+              >暂无更多文章，去看看其他的吧</span
 
+            >
 
+            <template v-for="(items, index) in articledata">
 
+              <div
 
+                @click="wenzhangdetail(items.id)"
 
+                class="TextMain"
 
+                :key="items.id"
 
+                v-if="items.category_name == item.name && index <= 4"
 
+              >
 
+                <span class="TextTitle">{{ items.title }}</span>
 
+                <p class="TextDesc">{{ items.intro }}</p>
 
+                <span class="TextTime">{{
 
+                  items.creator_name + items.create_datetime
 
+                }}</span>
 
+              </div>
 
+            </template>
 
+          </div>
 
+        </template>
 
+      </div>
 
     </div>
 
+    <div style="height: 10rem"></div>
 
   </div>
 
 </template>
 
 <script>
 
-import { Swipe, SwipeItem, Tab, Tabs, List, Toast, Divider,popup } from 'vant';
 
-import sessionStorage from "../../../util/sessionStorage.js"
 
-import {getSwiperUrl, articleCategory, getArticleCategoryList, getUser_Id, getMember} from "../../../../serves/prove";
 
+//  Tab, Tabs, List,
 
+import { Swipe, SwipeItem, Toast, Divider, popup } from "vant";
 
+import sessionStorage from "../../../util/sessionStorage.js";
 
+import {
 
+  getSwiperUrl,
 
+  articleCategory,
 
+  getArticleCategoryList,
 
+  getUser_Id,
 
+  getMember,
 
+} from "../../../../serves/prove";
 
 import storage from "@/util/sessionStorage"; //indexswiperInfo, 有用=》getUser_Id
 
 export default {
 
-  data () {
 
+  data() {
 
     return {
 
       active: 0,
 
-      swiperimg: [],//轮播图
 
-      category: [],//文章分类
 
-      articledata: [],//文章内容
 
+      swiperimg: [], //轮播图
 
+      category: [], //文章分类
 
+      articledata: [], //文章内容
 
       loading: false,
 
       finished: false,
 
       page: 1,
 
       limit: 10,
 
-      id: '',
 
-      myId:'',
 
-      show:false,
 
-      menuberinfo: '',
 
-      avatar: '',
 
-      qrcode: '',
 
-      phone:'',
 
-    }
 
+      id: "",
 
+      myId: "",
 
+      show: false,
 
+      menuberinfo: "",
 
+      avatar: "",
 
+      qrcode: "",
 
+      phone: "",
 
+    };
 
   },
 
+  //   Tab,Tabs,List,
 
   components: {
 
-    Swipe, SwipeItem, Tab, Tabs, List, Divider,popup
 
+    Swipe,
 
+    SwipeItem,
 
+
 
+    Divider,
 
+    popup,
 
   },
 
-  async created () {
 
-      if(!this.myId){
 
-        this.myId = storage.getLocalstorage('user_id')
 
-      }
 
-      if (this.myId != null && this.myId !== '' && this.myId !== 'undefined') {
 
-        this.getMemberapi(this.myId)
 
+  async created() {
 
+    if (!this.myId) {
 
+      this.myId = storage.getLocalstorage("user_id");
 
+    }
 
+    if (this.myId != null && this.myId !== "" && this.myId !== "undefined") {
 
+      this.getMemberapi(this.myId);
 
+    }
 
+    // this.myId='WeiQiJia'
 
+    let auth_code = "";
 
+    if (this.$route.query.auth_code) {
 
+      auth_code = this.$route.query.auth_code;
 
+    }
 
+    if (!auth_code) {
 
+      let userid = sessionStorage.getLocalstorage("user_id");
 
+      if (userid && userid !== undefined && userid !== "") {
 
+        this.myId = userid;
 
+      } else {
 
+        this.$router.push({ name: "GetUserIndex" });
 
       }
 
-      // this.myId='WeiQiJia'
 
-      let auth_code = "";
 
-      if (this.$route.query.auth_code) {
 
-          auth_code = this.$route.query.auth_code
 
+    } else {
 
+      let result = await getUser_Id(auth_code);
 
+      if (result.code !== 2000) {
 
+        Toast(result.msg);
 
+        return false;
 
       }
 
-      if (!auth_code) {
 
-          let userid = sessionStorage.getLocalstorage("user_id");
 
-          if (userid && userid !== undefined && userid !== "") {
 
-              this.myId = userid
 
-          } else {
 
-              this.$router.push({ name: 'GetUserIndex' })
 
-          }
 
-      } else {
 
-          let result = await getUser_Id(auth_code);
 
-          if (result.code !== 2000) {
 
-              Toast(result.msg)
 
-              return false
 
-          }
 
-          let { user_id } = result.data;
 
-          this.myId = user_id;
 
-          sessionStorage.setLocalstorage('user_id', user_id);
 
-       }
 
-      // this.myId ='WeiQiJia';
 
-
 
+      let { user_id } = result.data;
 
+      this.myId = user_id;
 
+      sessionStorage.setLocalstorage("user_id", user_id);
 
+    }
 
+    // this.myId ='WeiQiJia';
 
   },
 
-  mounted () {
 
-    this.indexswiperapi()
 
-    this.indexcategoryapi(this.id, this.limit, this.page)
 
-    this.getSwiperUrlapi()
 
+  mounted() {
 
+    this.indexswiperapi();
 
+    this.indexcategoryapi(this.id, this.limit, this.page);
 
+    this.getSwiperUrlapi();
 
   },
 
   methods: {
 
     //轮播图和文章分类数据接口
 
-    async indexswiperapi () {
 
-      const res = await articleCategory()
 
+    async indexswiperapi() {
 
+      const res = await articleCategory();
 
       if (res.code === 2000) {
 
         this.category = res.data;
 
       } else {
 
-        Toast('获取数据失败')
 
+        Toast("获取数据失败");
 
       }
 
     },
 
-    async getMemberapi (user_id) {
 
-      const res = await getMember(user_id)
 
+    async getMemberapi(user_id) {
 
+      const res = await getMember(user_id);
 
       if (res.code === 2000) {
 
         this.menuberinfo = res.data.name;
 
         this.avatar = res.data.avatar;
 
@@ -163,53 +180,37 @@ export default {
 
       }
 
     },
 
     //轮播图url
 
-    async getSwiperUrlapi () {
 
-      const res = await getSwiperUrl()
 
+    async getSwiperUrlapi() {
 
+      const res = await getSwiperUrl();
 
       if (res.code === 2000) {
 
-        this.swiperimg = res.data
 
+        this.swiperimg = res.data;
 
       }
 
     },
 
     //文章列表数据
 
-    async indexcategoryapi (id, limit, page) {
 
-      const res = await getArticleCategoryList(id, limit, page)
 
+    async indexcategoryapi(id, limit, page) {
 
+      const res = await getArticleCategoryList(id, limit, page);
 
       this.articledata = res.data.data;
 
       if (this.articledata.length < res.data.data.length) {
 
-        this.loading = false
 
+        this.loading = false;
 
       } else {
 
-        this.finished = true
 
+        this.finished = true;
 
       }
 
     },
 
-    showPopup () {
 
+    showPopup() {
 
       this.show = true;
 
     },
 
     //打电话
 
-    callPhone(){
 
-      window.location.href='tel:'+ this.phone
 
+    callPhone() {
 
+      window.location.href = "tel:" + this.phone;
 
     },
 
-    onClick (name, title) {
 
-      this.page = 1
 
-      const targetid = this.category.find(obj => obj.name === title)
 
-      this.indexcategoryapi(targetid.id, this.limit, this.page)
 
+    wenzhangdetail(id) {
 
+      this.$router.push({ name: "textpage", query: { id } });
 
     },
 
-    wenzhangdetail (id) {
 
-      this.$router.push({ name: 'textpage', query: { id } }
 
-      )
 
+    Jump(id, title) {
 
+      this.$router.push({ name: "lists", query: { id, title } });
 
     },
 
-    //触底刷新
 
-    async onLoad (id) {
 
-      this.loading = true;
 
-      this.page++
 
-      const res = await getArticleCategoryList(id, this.limit, this.page)
 
-      if (res.code === 2000) {
 
-        this.articledata = [...this.articledata, ...res.data.data]
 
-        if (res.data.data.length < 1) {
 
-          this.finished = true
 
-        }
 
-      }
 
-    }
 
-
 
-  }
 
-}
 
+  },
 
+};
 
 </script>
 
 <style>
 
 .van-tabs__wrap {
 
@@ -219,20 +220,18 @@ export default {
 
   line-height: 5rem;
 
   font-size: 1.4rem;
 
 }
 
-.van-list__finished-text{
 
+.van-list__finished-text {
 
   font-size: 1.4rem;
 
   margin-top: 1rem;
 
 }
 
 </style>
 
-<style scoped  lang="scss">
 
+<style scoped lang="scss">
 
 //swiper
 
 .indexbox {
 
   width: 90vw;
 
-  height: 100vh;
 
   margin: 0 auto;
 
-  padding-top: 2rem;
 
+  padding-top: 1rem;
 
   box-sizing: border-box;
 
-
 
   //轮播图
 
   .banner {
 
     width: 100%;
 
@@ -268,7 +267,7 @@ export default {
 
       justify-content: center;
 
       align-items: center;
 
 
-      .qrcodeimg{
 
+      .qrcodeimg {
 
         width: 100%;
 
         flex: 1;
 
         display: flex;
 
@@ -281,20 +280,20 @@ export default {
 
           width: 50vw;
 
           height: 50vw;
 
         }
 
-        span{
 
+        span {
 
           display: block;
 
           width: 80%;
 
           height: 1rem;
 
           border-radius: 30px;
 
           background: linear-gradient(to right, #a1c4fd, #c2e9fb);
 
         }
 
-        p{
 
+        p {
 
           font-size: 1rem;
 
           margin-top: 10px;
 
         }
 
       }
 
       .top-color {
 
-        width:100%;
 
+        width: 100%;
 
         height: 10rem;
 
         background-image: linear-gradient(to bottom, #3974c7, #f2f4f8);
 
         display: flex;
 
@@ -308,7 +307,6 @@ export default {
 
           height: 6rem;
 
           border-radius: 50%;
 
         }
 
-
 
       }
 
     }
 
 
@@ -339,7 +337,7 @@ export default {
 
   .title {
 
     padding-top: 2rem;
 
     font-size: 1.4rem !important;
 
-    .van-tab__text{
 
+    .van-tab__text {
 
       font-size: 1.4rem !important;
 
     }
 
     .card {
 
@@ -366,7 +364,6 @@ export default {
 
           -webkit-box-orient: vertical;
 
           overflow: hidden;
 
           text-overflow: ellipsis;
 
-
 
         }
 
 
         p:nth-child(2) {
 
@@ -379,7 +376,7 @@ export default {
 
           overflow: hidden;
 
           text-overflow: ellipsis;
 
           box-sizing: border-box;
 
-        padding-top: 3vw;
 
+          padding-top: 3vw;
 
         }
 
 
         p:nth-child(3) {
 
@@ -388,7 +385,7 @@ export default {
 
           justify-content: space-between;
 
           text-overflow: ellipsis;
 
           box-sizing: border-box;
 
-        padding-top: 3vw;
 
+          padding-top: 3vw;
 
         }
 
       }
 
 
@@ -398,4 +395,56 @@ export default {
 
     }
 
   }
 
 }
 
+.Text {
 
+  // border: 1px solid #cecece;
 
+  padding: 0.2rem;
 
+  margin: 1rem 0;
 
+  background-color: #eef2f844;
 
+  .TextHead {
 
+    margin-bottom: 0.7rem;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    span {
 
+      display: inline-block;
 
+      padding: 0.3rem 1rem 0.3rem 0.3rem;
 
+      border-radius: 0 0 1.6rem 0;
 
+      background-image: linear-gradient(to right, #a9c9f5a9, #d1daeb88);
 
+    }
 
+    p {
 
+      font-size: 1.2rem;
 
+      margin-right: 1rem;
 
+      color: #a3a3a3;
 
+    }
 
+  }
 
+  .TextMain {
 
+    display: flex;
 
+    flex-direction: column;
 
+    padding: 0.3rem 0.2rem;
 
+    border-bottom: 1px solid #ececec;
 
+    margin: 0.5rem 0;
 
+    .TextTitle {
 
+      margin: 0.5rem 0;
 
+      font-size: 1.4rem;
 
+      font-weight: 600;
 
+    }
 
+    .TextDesc {
 
+      background-color: #c9ddfa8a;
 
+      border-radius: 0.2rem;
 
+      border: 0.1rem solid #a9c9f5;
 
+      padding: 0.1rem;
 
+      font-size: 1.1rem;
 
+      color: #5a5a5a;
 
+      overflow: hidden;
 
+      text-overflow: ellipsis;
 
+      display: -webkit-box;
 
+      -webkit-line-clamp: 3;
 
+      -webkit-box-orient: vertical;
 
+    }
 
+    .TextTime {
 
+      margin-top: 0.5rem;
 
+      font-size: 0.9rem;
 
+      color: #b9b9b9;
 
+    }
 
+  }
 
+}
 
 </style>

+ 90 - 81
src/views/userindex/my/MyForward.vue
Просмотреть файл 

@@ -2,54 +2,57 @@
 
   <div>
 
     <Sticky>
 
       <NavBar
 
-              @click-left="onClickLeft"
 
-              left-arrow
 
-              left-text="返回"
 
-              title="我的转发"
 
+        @click-left="onClickLeft"
 
+        left-arrow
 
+        left-text="返回"
 
+        title="我的转发"
 
       >
 
       </NavBar>
 
     </Sticky>
 
-  <div class="indexbox">
 
-    <div>
 
-      <tabs @click="onClick"
 
-            v-model="active"
 
-            sticky
 
-            animated
 
-            color="blue">
 
-        <tab v-for="item in category"
 
-             :key="item.id"
 
-             :title="item.name">
 
-          <list v-model="loading"
 
-                :finished="finished"
 
-                finished-text="没有更多了"
 
-                @load="onLoad(item.id)">
 
-            <div v-for="item in forwarddata"
 
-                 :key="item.id"
 
-                 class="card">
 
-              <div class="titile">
 
-                <h2 @click="gomyforwarddetail(item.article,item.id,item.count,item.title,item.cover)">{{ item.title }}</h2>
 
-                <p>{{ item.count }}人阅读</p>
 
+    <div class="indexbox">
 
+      <div>
 
+        <tabs @click="onClick" v-model="active" sticky animated color="blue">
 
+          <tab v-for="item in category" :key="item.id" :title="item.name">
 
+            <list
 
+              v-model="loading"
 
+              :finished="finished"
 
+              finished-text="没有更多了"
 
+              @load="onLoad(item.id)"
 
+            >
 
+              <div v-for="item in forwarddata" :key="item.id" class="card">
 
+                <div class="titile">
 
+                  <h2
 
+                    @click="
 
+                      gomyforwarddetail(
 
+                        item.article,
 
+                        item.id,
 
+                        item.count,
 
+                        item.title,
 
+                        item.cover
 
+                      )
 
+                    "
 
+                  >
 
+                    {{ item.title }}
 
+                  </h2>
 
+                  <p>{{ item.count }}人阅读</p>
 
+                </div>
 
+                <img :src="item.cover" alt="" />
 
               </div>
 
-              <img :src="item.cover"
 
-                   alt="">
 
-            </div>
 
-            <div class="nameres">
 
-            </div>
 
-
 
-          </list>
 
-        </tab>
 
-      </tabs>
 
+              <div class="nameres"></div>
 
+            </list>
 
+          </tab>
 
+        </tabs>
 
+      </div>
 
     </div>
 
   </div>
 
-  </div>
 
 </template>
 
 <script>
 
-import { Tab, Tabs, List, Toast,NavBar,Sticky } from 'vant';
 
-import { getUserForwardList, articleCategory, } from "../../../../serves/prove";
 
-import storage from "../../../util/sessionStorage"
 
+import { Tab, Tabs, List, Toast, NavBar, Sticky } from "vant";
 
+import { getUserForwardList, articleCategory } from "../../../../serves/prove";
 
+import storage from "../../../util/sessionStorage";
 
 // import { query } from 'quill';
 
 export default {
 
-  data () {
 
+  data() {
 
     return {
 
       active: 0,
 
       category: [],
 
@@ -58,93 +61,99 @@ export default {
 
       finished: false,
 
       limit: 10,
 
       page: 1,
 
-      myId: '',
 
-      data: ''
 
-    }
 
+      myId: "",
 
+      data: "",
 
+    };
 
   },
 
   components: {
 
-    Tab, Tabs, List,NavBar,Sticky
 
+    Tab,
 
+    Tabs,
 
+    List,
 
+    NavBar,
 
+    Sticky,
 
   },
 
-  created () {
 
+  created() {
 
     this.getCategory();
 
     if (!this.myId) {
 
-      this.myId = storage.getLocalstorage('user_id')
 
+      this.myId = storage.getLocalstorage("user_id");
 
     }
 
-    if (this.myId != null && this.myId !== '' && this.myId !== 'undefined') {
 
-      this.forwardapi(this.myId, '', this.limit, this.page)
 
+    if (this.myId != null && this.myId !== "" && this.myId !== "undefined") {
 
+      this.forwardapi(this.myId, "", this.limit, this.page);
 
     }
 
     // this.myId='WeiQiJia'
 
   },
 
-  mounted () { },
 
+  mounted() {},
 
   methods: {
 
     //点击分类
 
-    async getCategory () {
 
-      const res = await articleCategory()
 
+    async getCategory() {
 
+      const res = await articleCategory();
 
       if (res.code === 2000) {
 
         this.category = res.data;
 
       } else {
 
-        Toast('获取数据失败')
 
+        Toast("获取数据失败");
 
       }
 
     },
 
-    onClick (name, title) {
 
-      this.page = 1
 
-      const targetid = this.category.find(obj => obj.name === title)
 
-      this.forwardapi(this.myId, targetid.id, this.limit, this.page)  //需要传入user_id
 
+    onClick(name, title) {
 
+      this.page = 1;
 
+      const targetid = this.category.find((obj) => obj.name === title);
 
+      this.forwardapi(this.myId, targetid.id, this.limit, this.page); //需要传入user_id
 
     },
 
     //触底刷新
 
-    async onLoad (id) {
 
+    async onLoad(id) {
 
       this.loading = true;
 
-      this.page++
 
-      const res = await getUserForwardList(this.myId, id, this.limt, this.page)
 
+      this.page++;
 
+      const res = await getUserForwardList(this.myId, id, this.limt, this.page);
 
       if (res.code === 2000) {
 
-        this.forwarddata = [...this.forwarddata, ...res.data.data]
 
+        this.forwarddata = [...this.forwarddata, ...res.data.data];
 
         if (res.data.data.length < 1) {
 
-          this.finished = true
 
+          this.finished = true;
 
         }
 
       }
 
     },
 
     //获取转发列表数据
 
-    async forwardapi (user_id, id, limit, page) {
 
+    async forwardapi(user_id, id, limit, page) {
 
       if (id != null && id !== undefined) {
 
-        const res = await getUserForwardList(user_id, id, limit, page)
 
-        this.forwarddata = res.data.data
 
+        const res = await getUserForwardList(user_id, id, limit, page);
 
+        this.forwarddata = res.data.data;
 
         if (this.forwarddata.length < res.data.data.length) {
 
-          this.loading = false
 
+          this.loading = false;
 
         } else {
 
-          this.finished = true
 
+          this.finished = true;
 
         }
 
       }
 
     },
 
     //点击标题跳转转发详情
 
-    gomyforwarddetail (id,Tid,count,title,cover) {
 
-      this.$router.push({name:'myforwarddetail',query:{id:id,Tid:Tid,count:count,title:title,cover:cover}})
 
+    gomyforwarddetail(id, Tid, count, title, cover) {
 
+      this.$router.push({
 
+        name: "myforwarddetail",
 
+        query: { id: id, Tid: Tid, count: count, title: title, cover: cover },
 
+      });
 
     },
 
     //返回上级
 
-    onClickLeft () {
 
-      this.$router.go(-1)
 
-    }
 
-
 
+    onClickLeft() {
 
+      this.$router.go(-1);
 
+    },
 
   },
 
-}
 
+};
 
 </script>
 
 <style>
 
 .van-tabs__wrap {
 
   height: 3rem !important;
 
   font-size: 1.4rem !important;
 
 }
 
-.van-tab__text{
 
+.van-tab__text {
 
   font-size: 1.4rem;
 
 }
 
 .van-tab {
 
   line-height: 5rem;
 
 }
 
-.van-loading__text{
 
+.van-loading__text {
 
   font-size: 1.4rem;
 
 }
 
 .van-tab__text--ellipsis {
 
   font-size: 1.4rem !important;
 
 }
 
-.van-list__finished-text{
 
+.van-list__finished-text {
 
   font-size: 1.4rem !important;
 
   margin-top: 1rem;
 
 }
 
@@ -159,7 +168,7 @@ export default {
 
   display: flex;
 
   flex-direction: column;
 
   .imgStyle {
 
-    position:absolute;
 
+    position: absolute;
 
     display: flex;
 
     left: -1vw;
 
     width: 18vw;
 
@@ -174,7 +183,7 @@ export default {
 
   .card {
 
     width: 100%;
 
     height: 17vw;
 
-margin-top: 2vh;
 
+    margin-top: 2vh;
 
     margin-bottom: 2vh;
 
     box-sizing: content-box;
 
     display: flex;
 
@@ -200,11 +209,11 @@ margin-top: 2vh;
 
       h2 {
 
         font-size: 1.4rem;
 
         display: -webkit-box;
 
-          -webkit-line-clamp: 1;
 
-          /* 显示两行文本 */
 
-          -webkit-box-orient: vertical;
 
-          overflow: hidden;
 
-          text-overflow: ellipsis;
 
+        -webkit-line-clamp: 1;
 
+        /* 显示两行文本 */
 
+        -webkit-box-orient: vertical;
 
+        overflow: hidden;
 
+        text-overflow: ellipsis;
 
       }
 
     }
 
   }

+ 54 - 54
src/views/userindex/my/MyIndex.vue
Просмотреть файл 

@@ -1,80 +1,83 @@
 
 <template>
 
   <div class="myindex">
 
-    <div class="contacts" v-if="myId?true:false">
 
+    <div class="contacts" v-if="myId ? true : false">
 
       <div>
 
-        <h1>{{ menuberinfo?menuberinfo:'未授权'}}</h1>
 
-        <div style="margin-bottom: 3vw;">
 
+        <h1 style="font-size: 1.5rem">
 
+          {{ menuberinfo ? menuberinfo : "未授权" }}
 
+        </h1>
 
+        <div style="margin-bottom: 3vw">
 
           <span @click="showPopup" class="iconfont icon-weixin"></span>
 
           <span @click="callPhone" class="iconfont icon-dianhua"></span>
 
         </div>
 
       </div>
 
-      <popup :style="{ height: '60%',width:'80vw' }"
 
-             closeable
 
-             close-icon="close"
 
-             v-model="show">
 
+      <popup
 
+        :style="{ height: '60%', width: '80vw' }"
 
+        closeable
 
+        close-icon="close"
 
+        v-model="show"
 
+      >
 
         <div id="qrcode">
 
           <div class="top-color">
 
-            <img :src=avatar
 
-                 alt=""
 
-            >
 
-
 
+            <img :src="avatar" alt="" />
 
           </div>
 
           <div class="qrcodeimg">
 
-            <span ></span>
 
-            <img :src=qrcode
 
-                 alt="">
 
-            <p >长按识别二维码，添加 <ww-open-data type="userName" :openid=myId />企业微信</p>
 
+            <span></span>
 
+            <img :src="qrcode" alt="" />
 
+            <p>
 
+              长按识别二维码，添加
 
+              <ww-open-data type="userName" :openid="myId" />企业微信
 
+            </p>
 
           </div>
 
-
 
         </div>
 
       </popup>
 
       <div>
 
-        <img :src=avatar
 
-             alt=""
 
-             style="width: 15vw;height: 15vw;border-radius: 50%;">
 
+        <img
 
+          :src="avatar"
 
+          alt=""
 
+          style="width: 15vw; height: 15vw; border-radius: 50%"
 
+        />
 
       </div>
 
     </div>
 
     <Divider></Divider>
 
     <div>
 
       <Cell title="我的转发" is-link to="myforward" />
 
     </div>
 
-
 
   </div>
 
 </template>
 
 <script>
 
-  import { Popup, Cell,Divider} from 'vant'
 
-import storage from '../../../util/sessionStorage'
 
-import { getMember } from '../../../../serves/prove'
 
+import { Popup, Cell, Divider } from "vant";
 
+import storage from "../../../util/sessionStorage";
 
+import { getMember } from "../../../../serves/prove";
 
 export default {
 
-  data () {
 
+  data() {
 
     return {
 
-      myId: '',
 
-      menuberinfo: '',
 
-      avatar: '',
 
-      qrcode: '',
 
-      phone:'',
 
-      show: false
 
-    }
 
+      myId: "",
 
+      menuberinfo: "",
 
+      avatar: "",
 
+      qrcode: "",
 
+      phone: "",
 
+      show: false,
 
+    };
 
   },
 
   components: {
 
- Popup, Cell,Divider
 
+    Popup,
 
+    Cell,
 
+    Divider,
 
   },
 
-  created () {
 
-    if(!this.myId){
 
-      this.myId = storage.getLocalstorage('user_id')
 
+  created() {
 
+    if (!this.myId) {
 
+      this.myId = storage.getLocalstorage("user_id");
 
     }
 
-    if (this.myId != null && this.myId !== '' && this.myId !== 'undefined') {
 
-      this.getMemberapi(this.myId)
 
+    if (this.myId != null && this.myId !== "" && this.myId !== "undefined") {
 
+      this.getMemberapi(this.myId);
 
     }
 
     // this.myId='WeiQiJia'
 
   },
 
-  mounted () {
 
-
 
-  },
 
+  mounted() {},
 
   methods: {
 
     //获取个人信息  //WeiQiJia
 
-    async getMemberapi (user_id) {
 
-      const res = await getMember(user_id)
 
+    async getMemberapi(user_id) {
 
+      const res = await getMember(user_id);
 
       if (res.code === 2000) {
 
         this.menuberinfo = res.data.name;
 
         this.avatar = res.data.avatar;
 
@@ -84,17 +87,15 @@ export default {
 
     },
 
     //点击微信
 
     //底部弹出
 
-    showPopup () {
 
+    showPopup() {
 
       this.show = true;
 
     },
 
     //打电话
 
-    callPhone(){
 
-      window.location.href='tel:'+ this.phone
 
-    }
 
-
 
+    callPhone() {
 
+      window.location.href = "tel:" + this.phone;
 
+    },
 
   },
 
-
 
-}
 
+};
 
 </script>
 
 <style lang="scss" scoped>
 
 .myindex {
 
@@ -120,7 +121,7 @@ export default {
 
       justify-content: center;
 
       align-items: center;
 
 
-      .qrcodeimg{
 
+      .qrcodeimg {
 
         width: 100%;
 
         flex: 1;
 
         display: flex;
 
@@ -133,20 +134,20 @@ export default {
 
           width: 50vw;
 
           height: 50vw;
 
         }
 
-        span{
 
+        span {
 
           display: block;
 
           width: 80%;
 
           height: 1rem;
 
           border-radius: 30px;
 
           background: linear-gradient(to right, #a1c4fd, #c2e9fb);
 
         }
 
-        p{
 
+        p {
 
           font-size: 1rem;
 
           margin-top: 10px;
 
         }
 
       }
 
       .top-color {
 
-        width:100%;
 
+        width: 100%;
 
         height: 10rem;
 
         background-image: linear-gradient(to bottom, #3974c7, #f2f4f8);
 
         display: flex;
 
@@ -160,7 +161,6 @@ export default {
 
           height: 6rem;
 
           border-radius: 50%;
 
         }
 
-
 
       }
 
     }