技术圈个人主页优化

components/user/jishuin/topicCell.vue

@@ -1,195 +1,326 @@
 <template>
-  <div class="bindMobile">
-    <el-dialog
-      title="绑定手机号"
-      :visible.sync="isShowToast"
-      width="520px"
-      :center="true">
-      <div class="bindMobileContent">
-        <div class="phoneNum">
-          <p class="name">手机号</p>
-          <el-input v-model="phone" placeholder="请输入手机号" class="input-with-select">
-            <el-select v-model="preMobile" slot="prepend" placeholder="请选择" style="width: 140px;">
-              <el-option
-                v-for="(item,index) in selectList"
-                :key="index+'sda'"
-                :label="item.name"
-                :value="item.pre">
-              </el-option>
-            </el-select>
-            <div slot="append" @click="getCode" :class="{sendBtn: true, ok: !interval}">
-                {{interval ? `${timeLoop}重新发送` : "发送验证码"}}
-            </div>
-          </el-input>
+  <div class="topicCell" :class="{topicCellMobile: mobile}" @click="clickArt(art, index)">
+    <div class="leftArea" :class="{noePic: !art.cover_url}">
+      <div class="topicTitle">
+        {{art.title}}
+      </div>
+      <div class="bottomArea">
+        <div class="left" >
+          <div class="userInfo">
+            <img :src="info.icon_url">
+            <div>{{info.nickname}}</div>
+          </div>
+          <div class="publishTime">
+            <div>{{formatPublichTime(art.updated_at)}}</div>
+          </div>
         </div>
-        <div class="codeNum">
-          <div class="name">验证码</div>
-          <el-input placeholder="请输入验证码" v-model="scode"/>
+        <div class="right">
+          <div class="zan">
+            <div class="icon"/>
+            <div class="num">{{art.like_count}}</div>
+          </div>
+          <div class="comment">
+            <div class="icon" />
+            <div class="num">{{art.reply_count}}</div>
+          </div>
         </div>
       </div>
-      <span slot="footer" class="dialog-footer">
-    <el-button @click="isShowToast = false">取 消</el-button>
-    <el-button type="primary" @click="bindMobile">确 定</el-button>
-  </span>
-    </el-dialog>
+    </div>
+    <div class="rightArea" v-if="art.cover_url">
+      <img :src="art.cover_url">
+    </div>
   </div>
 </template>
 
 <script>
-  const Max_Time = 60
   export default {
-    props: [ "source" ],
+    props: [ "art", "formatPublichTime", "mobile", "info" ],
     components: {},
     data() {
       return {
-        phone: "",
-        scode: "",
-        isShowToast: false,
-        timeLoop: Max_Time,
-        preMobile: "+86",
-        selectList: [],
-        interval: null,
-      };
+
+      }
     },
     computed: {},
     created() {
-      this.getMobilePre()
     },
     mounted() {
     },
     methods: {
-      open() {
-        this.isShowToast = true
-      },
-      close() {
-        this.isShowToast = false
+      /**
+       * 点击文章
+       */
+      clickArt(art, index) {
+        location.href = `/p/${art.id}.html`;
       },
-      handleSubmit() {
+    }
+  };
+</script>
 
-      },
+<style lang="scss" scoped>
+  @import "../../../assets/css/scssCommon.scss";
+  .topicCell {
+    margin: 0 auto;
+    width:738px;
+    height:174px;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 0px 0px rgba(0,0,0,0.1);
 
-      /** 发送验证码 **/
-      getCode() {
-        const {phone, preMobile} = this
-        if ( (phone.toString().length != 11 && preMobile == 0 )
-          || (preMobile > 0 && !/^\d{8,15}$/.exec(phone)) ) {
-          this.$message.warning('请输入正确的手机号码');
-          return false;
-        }
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 30px 20px;
 
-        if (this.interval) {
-          this.$message.info('请1分钟后再次发送')
-          return false
-        }
+    .leftArea {
+      width: 528px;
+      height: 114px;
+      display: flex;
+      justify-content: space-between;
+      align-items: left;
+      flex-direction: column;
 
-        let newPhone =  preMobile + '-' + phone;
-        this.$axios.post('/api/user/check_mobile_exist', {mobile: newPhone}).then(res=>{
-          if (Number(res.data.status) === 1 && !res.data.data.exist) {
-            this.sendCode()
-          }
-        })
-      },
+      &.noePic {
+        width: 100%;
+        padding-right: 0;
+      }
 
-      /** 发送验证码 **/
-      sendCode() {
-        this.timeLoop = Max_Time
-        const {phone, preMobile} = this
-        let newPhone =  phone;
-        if (preMobile !== '+86') {
-          newPhone =  preMobile + '-' + phone;
-        }
-        this.$axios.post('/api/user/send_mobile_auth_code', {
-          mobile: newPhone
-        }).then(res=>{
-          if (Number(res.data.status) === 1) {
-            this.interval = setInterval(()=>{
-              this.timeLoop--
-              if (this.timeLoop <= 0) {
-                clearInterval(this.interval)
-                this.interval = null
-              }
-            }, 1000)
+      .topicTitle {
+        height: 50px;
+        font-size: 18px;
+        font-weight:600;
+        color:rgba(51,51,51,1);
+        line-height: 25px;
+        width: 100%;
+        text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        word-break: break-all;
+      }
+
+      .bottomArea {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          .userInfo {
+            display: flex;
+            align-items: center;
+            img {
+              width: 24px;
+              height: 24px;
+              border-radius: 50%;
+            }
+            div {
+              margin-left: 4px;
+              height:17px;
+              font-size:12px;
+              font-weight:500;
+              color:rgba(34,34,34,1);
+              line-height:17px;
+            }
           }
-        })
-      },
+          .publishTime {
+            margin-left: 10px;
+            padding-left: 10px;
+            height:17px;
+            font-size:12px;
+            font-weight:400;
+            color:rgba(218,218,218,1);
+            line-height:17px;
+            border-left: 1px solid #ededed;
+            /*transform-origin:left center;*/
+            /*transform: scale(0.83);*/
+            word-break: keep-all;
+            white-space: nowrap;
 
-      /** 获取数据 -- 手机号码前缀 **/
-      getMobilePre() {
-        this.$axios.get('/api/user/get_mobile_pre_arr').then(res=>{
-          if (Number(res.data.status) === 1) {
-            let list = res.data.data && res.data.data.mobilePreArr || [{id: 0, name: "中国 +86", pre: "+86"}]
-            this.selectList = list
           }
-        })
-      },
-      /** 开始绑定手机号 **/
-      bindMobile() {
-        const {phone, preMobile, scode} = this
-        let newPhone =  preMobile + '-' + phone;
-        this.$axios.post('/api/user/update_info', {
-          login_mobile: newPhone,
-          auth_code: scode
-        }).then(res=>{
-          if (Number(res.data.status) === 1) {
-            this.updateUserInfo()
-            this.close()
+        }
+        .right {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          .zan, .comment {
+            margin-left: 23px;
+            display: flex;
+            align-items: center;
+            .icon {
+              width: 16px;
+              height: 16px;
+              background: url("~@/assets/quan/icon/zan.png") no-repeat;
+              background-size: cover;
+            }
+            .num {
+              margin-left: 1px;
+              height:18px;
+              font-size:13px;
+              font-weight:500;
+              color:rgba(153,153,153,1);
+              line-height:18px;
+              word-break: keep-all;
+              white-space: nowrap;
+            }
+          }
+          .comment {
+            margin-left: 12px;
+            .icon {
+              background: url("~@/assets/quan/icon/common.png") no-repeat;
+              background-size: cover;
+            }
           }
-        })
+        }
       }
     }
-  };
-</script>
+    .rightArea {
+      flex-shrink: 0;
+      font-size: 0;
+      width:154px;
+      height:114px;
+      img {
+        width:154px;
+        height:114px;
+        border-radius:2px;
+      }
+    }
+  }
+  .topicCellMobile {
+    margin: 0 auto;
+    width: pxtovw(355);
+    height: pxtovw(118);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: pxtovw(10) 0 pxtovw(19) 0;
+
+    .leftArea {
+      width: pxtovw(226);
+      height: pxtovw(89);
+      display: flex;
+      justify-content: space-between;
+      align-items: left;
+      flex-direction: column;
+
+      &.noePic {
+        width: 100%;
+        padding-right: 0;
+      }
+
+      .topicTitle {
+        height: pxtovw(42);
+        font-size:pxtovw(14);
+        font-weight:600;
+        color:rgba(51,51,51,1);
+        line-height:pxtovw(21);
+        width: 100%;
+        text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        word-break: break-all;
+      }
 
-<style lang="scss">
-  .bindMobile {
-    .bindMobileContent {
-      .phoneNum, .codeNum {
-        margin-top: 20px;
+      .bottomArea {
+        width: 100%;
         display: flex;
+        justify-content: space-between;
         align-items: center;
-        .name {
-          flex-shrink: 0;
-          font-size: 14px;
-          font-weight: 500;
-          color: #19222e;
-          line-height: 20px;
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          .userInfo {
+            display: flex;
+            align-items: center;
+            img {
+              width: pxtovw(17);
+              height: pxtovw(17);
+              border-radius: 50%;
+            }
+            div {
+              margin-left: pxtovw(5);
+              height:pxtovw(14);
+              font-size:pxtovw(10);
+              font-weight:500;
+              color:rgba(102,102,102,1);
+              line-height:pxtovw(14);
+              transform-origin:left center;
+              transform: scale(0.83);
+              word-break: keep-all;
+              white-space: nowrap;
+            }
+          }
+          .publishTime {
+            margin-left: pxtovw(4);
+            padding-left: pxtovw(10);
+            height:pxtovw(14);
+            font-size:pxtovw(10);
+            font-weight:400;
+            color:rgba(218,218,218,1);
+            line-height:pxtovw(14);
+            border-left: 1px solid #ededed;
+            transform-origin:left center;
+            transform: scale(0.83);
+            word-break: keep-all;
+            white-space: nowrap;
+            max-width: pxtovw(80);
+          }
         }
-        .el-input {
-          flex-grow: 1;
-          margin-left: 10px;
-
-          .el-input-group__append {
-            background-color: transparent;
-            border: none;
-            padding: 0;
-
-            .sendBtn {
-              background-color: #F5F7FA;
-              color: #909399;
-              vertical-align: middle;
-              display: table-cell;
-              position: relative;
-              border: 1px solid #DCDFE6;
-              border-radius: 4px;
-              padding: 10px 20px;
-              width: 1px;
+        .right {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          .zan, .comment {
+            display: flex;
+            align-items: center;
+            .icon {
+              width: pxtovw(13);
+              height: pxtovw(13);
+              background: url("~@/assets/quan/icon/zan.png") no-repeat;
+              background-size: cover;
+            }
+            .num {
+              margin-left: pxtovw(2);
+              font-size:10px;
+              font-weight:500;
+              color:rgba(153,153,153,1);
+              line-height:14px;
+              transform-origin:left center;
+              transform: scale(0.83);
+              word-break: keep-all;
               white-space: nowrap;
-              cursor: pointer;
-              border-top-left-radius: 0;
-              border-bottom-left-radius: 0;
-
-              &.ok {
-                background-color: #308EFF;
-                color: #fff;
-                vertical-align: middle;
-                display: table-cell;
-                position: relative;
-                border: 1px solid #308EFF;
-              }
+            }
+          }
+          .comment {
+            margin-left: pxtovw(8);
+            .icon {
+              background: url("~@/assets/quan/icon/common.png") no-repeat;
+              background-size: cover;
             }
           }
         }
       }
     }
+    .rightArea {
+      flex-shrink: 0;
+      font-size: 0;
+      width: pxtovw(120);
+      height: pxtovw(89);
+      img {
+        width: pxtovw(120);
+        height: pxtovw(89);
+      }
+    }
   }
 </style>

pages/user/_id/_type.vue

@@ -60,66 +60,14 @@
             </div>
 
             <div class="article-list">
-              <template v-for="(art, index) of list">
-                <div class="article have-img flex" v-if="art.cover_url" @click="clickArt(art, index)">
-                  <div class="article-left">
-                    <div class="article-title">
-                      {{art.title}}
-                    </div>
-                    <div class="article-desc">
-                      <!-- {{art.intro}} -->
-                    </div>
-                    <div class="source align-center">
-                      <div class="live-source align-center">
-                        <img :src="info.icon_url">
-                        <div>{{info.nickname}}</div>
-                      </div>
-                      <div class="live-time gray-153">
-                        <div>{{formatPublichTime(art.updated_at)}}</div>
-                      </div>
-                      <div class="live-time gray-153 align-center">
-                        <img class="icon" src="@/assets/quan/icon/zan.png" />
-                        <div>{{art.like_count}}</div>
-                      </div>
-                      <div class="live-people gray-153 align-center">
-                        <img class="icon" src="@/assets/quan/icon/common.png" />
-                        <div>{{art.reply_count}}</div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="article-right">
-                    <img :src="art.cover_url">
-                  </div>
-                </div>
-                <!-- 无图 -->
-                <div class="article no-img" v-else @click="clickArt(art, index)">
-                  <div class="article-title">
-                    {{art.title}}
-                  </div>
-                  <div class="article-desc">
-                    <!-- {{art.intro}} -->
-                  </div>
-                  <div class="source align-center">
-                    <div class="live-source align-center">
-                      <img :src="info.icon_url">
-                      <div>{{info.nickname}}</div>
-                    </div>
-                    <div class="live-time gray-153">
-                      <div>{{formatPublichTime(art.updated_at)}}</div>
-                    </div>
-                    <div class="live-time gray-153 align-center">
-                      <img class="icon" src="@/assets/quan/icon/zan.png"></img>
-                      <div>{{art.like_count}}</div>
-                    </div>
-                    <div class="live-people gray-153 align-center">
-                      <img class="icon" src="@/assets/quan/icon/common.png"></img>
-                      <div>{{art.reply_count}}</div>
-                    </div>
-                  </div>
-                </div>
-              </template>
-
-
+                <TopicCell
+                  v-for="(art, index) of list"
+                  :art="art"
+                  :mobile="mobile"
+                  :info="info"
+                  :key="art.id + 'art' + index"
+                  :formatPublichTime="formatPublichTime"
+                ></TopicCell>
             </div>
           </div>
         </div>
@@ -265,6 +213,7 @@
 </template>
 <script>
   import WxMixin from "@/mixins/wx";
+  import TopicCell from "@/components/user/jishuin/topicCell"
   import "@/assets/css/user/mui.min.css"
   import {
     Toast,
@@ -276,10 +225,8 @@
   let page = 1;
 
   export default {
-    // components: {
-    //   'ali-player': VueAliplayer,
-    // },
     layout: "opacity_header",
+    components: {TopicCell},
     head() {
       const {
         canonical = "", title = "", keywords = "", description = "", h1 = ""
@@ -317,13 +264,7 @@
       };
     },
     mixins: [WxMixin],
-    async asyncData({
-      $axios,
-      params,
-      req,
-      app
-    }) {
-      console.log("*****")
+    async asyncData({ $axios, params, req, app }) {
       let id = params.id;
       let headers = req && req.headers;
       let res = await $axios.$post(
@@ -331,12 +272,7 @@
           headers
         }
       );
-      const {
-        headers: {
-          host
-        },
-        url
-      } = req
+      const { headers: { host }, url } = req
       //拼接canonical
       let canonical = ""
       if (host.indexOf('local') !== -1) {
@@ -443,7 +379,6 @@
                   description: value
                 }
               ).then((res) => {
-
                 if (res.status >= 0) {
                   let info = that.info
                   info.jishuquan_description = value
@@ -685,12 +620,7 @@
                         this.goLogin(1, true);
                       }
                     },
-                    /**
-                     * 点击文章
-                     */
-                    clickArt(art, index) {
-                      location.href = `/p/${art.id}.html`;
-                    },
+
                     /**
                      * 监听滚动
                      */