liwei

src/components/buy/inviteFriends.vue

+<template>
+  <div class="invite-friends">
+    <div class="invite-friends header">
+      <img src="../../assets/inviteFriends/img_bg.png" alt />
+    </div>
+    <div class="invite-friends cell">
+      <img src="../../assets/inviteFriends/img_title1.png" alt />
+      <p class="cell-content money">
+        <span>100</span>
+        <span>元</span>
+      </p>
+      <p class="cell-content people">
+        <span>10</span>
+        <span>人</span>
+      </p>
+      <div class="invite-record-btn" @click="lookMyInviteRecords">
+        <p>查看我的邀请记录</p>
+        <img src="../../assets/inviteFriends/icon_back.png" />
+      </div>
+    </div>
+    <div class="invite-friends cell">
+      <img src="../../assets/inviteFriends/img_title2.png" alt />
+    </div>
+    <div class="invite-friends cell">
+      <img src="../../assets/inviteFriends/img_title3.png" alt />
+    </div>
+    <div class="invite-friends cell">
+      <img src="../../assets/inviteFriends/img_title4.png" alt />
+    </div>
+    <div class="invite-friends cell" ref="inviteRecord">
+      <img src="../../assets/inviteFriends/img_title5.png" alt />
+      <div class="invite-record-list">
+        <div class="container">
+          <div class="record-content">
+            <div class="record-title">
+              <span>邀请记录</span>
+              <span>购买时间</span>
+            </div>
+            <div class="no-record" v-if="records.length == 0">您还没有成功邀请好友，快去邀请吧！</div>
+            <ul class="record" v-if="records.length > 0">
+              <li v-for="(item,index) in records" :key="index">
+                <p>{{item.name}}</p>
+                <p>{{item.buy_date}}</p>
+              </li>
+            </ul>
+            <div class="look-more-record" @click="lookMoreRecord" v-if="records.length >=6">
+              <p>查看更多</p>
+              <img src="../../assets/inviteFriends/icon_back.png" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="invite-friends cell">
+      <img src="../../assets/inviteFriends/img_title6.png" alt />
+    </div>
+  </div>
+</template>
+<script>
+// import Vue from "vue";
+// import { Image } from "vant";
+// Vue.use(Image);
+export default {
+  name: "inviteFriends",
+  components: {},
+  data() {
+    return {
+      records: [
+        {
+          name: "test",
+          buy_date: "2019.7.5"
+        },
+        {
+          name: "test",
+          buy_date: "2019.7.5"
+        },
+        {
+          name: "test",
+          buy_date: "2019.7.5"
+        },
+        {
+          name: "test",
+          buy_date: "2019.7.5"
+        },
+        {
+          name: "test11111111111111111111111111",
+          buy_date: "2019.7.5"
+        },
+        {
+          name: "test",
+          buy_date: "2019.7.5"
+        }
+      ]
+    };
+  },
+  methods: {
+    lookMyInviteRecords() {
+      this.$refs.inviteRecord.scrollIntoView();
+    },
+    lookMoreRecord() {}
+  }
+};
+</script>
+<style lang="less" scoped>
+@import "../../util/public";
+@tocurrentvw : 1/2 * @toVw;
+@tocurrentvh : 1/2 * @toVh;
+.invite-friends {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: #fedbcd;
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .header {
+    width: 100%;
+  }
+  .cell {
+    width: 676 * @tocurrentvw;
+    margin: 10 * @tocurrentvh auto 64 * @tocurrentvh;
+    position: relative;
+    .cell-content {
+      position: absolute;
+      width: 40%;
+      font-size: 72 * @tocurrentvw;
+      font-weight: bold;
+      color: #eb7162;
+      display: flex;
+      letter-spacing: 1vw;
+
+      span {
+        &:nth-child(1) {
+          flex: 1;
+          text-align: right;
+        }
+        &:nth-child(2) {
+          flex: 1;
+          font-weight: 500;
+          font-size: 30 * @tocurrentvw;
+          padding-top: 0.8vh;
+          margin-left: 0.2vw;
+        }
+      }
+    }
+    .cell-content.money {
+      top: 24vw;
+      left: 9vw;
+    }
+    .cell-content.people {
+      top: 24vw;
+      right: -1vw;
+    }
+    .invite-record-btn {
+      position: absolute;
+      width: 100%;
+      color: #eb7162;
+      display: flex;
+      align-items: center;
+      font-size: 26 * @tocurrentvw;
+      bottom: 26 * @tocurrentvh;
+      p {
+        margin-left: 28%;
+      }
+      img {
+        margin-right: 35%;
+        display: block;
+        width: 12 * @tocurrentvw;
+        height: 20 * @tocurrentvh;
+      }
+    }
+    .invite-record-list {
+      width: 676 * @tocurrentvw;
+      // height: 592 * @tocurrentvh;
+      border-radius: 10 * @tocurrentvw;
+      background-color: #fff;
+      margin-top: 40 * @tocurrentvh;
+      .container {
+        border: 1px dotted #ee8273;
+        width: 654 * @tocurrentvw;
+        // height: 570 * @tocurrentvh;
+        margin: 10 * @tocurrentvh 10 * @tocurrentvw;
+        border-radius: 10 * @tocurrentvw;
+        .record-content {
+          margin: 19 * @tocurrentvh 15 * @tocurrentvw;
+          margin-bottom: 0;
+          width: 626 * @tocurrentvw;
+          .no-record {
+            height: 76 * @tocurrentvh;
+            line-height: 76 * @tocurrentvh;
+            text-align: center;
+            font-size: 28 * @tocurrentvw;
+          }
+          .record-title {
+            height: 76 * @tocurrentvh;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            background-color: #fbebe3;
+            border-radius: 5 * @tocurrentvw;
+            font-size: 28 * @tocurrentvw;
+            font-weight: 400;
+            color: #eb7162;
+          }
+          ul {
+            max-height: 390 * @tocurrentvh;
+            overflow: hidden;
+            li {
+              height: 65 * @tocurrentvh;
+              width: 100%;
+              display: flex;
+              align-items: center;
+              border-radius: 5 * @tocurrentvw;
+              font-size: 28 * @tocurrentvw;
+              font-weight: 400;
+              color: #696765;
+              &:nth-child(odd) {
+                background-color: #fff;
+              }
+              &:nth-child(even) {
+                background-color: #fffaf8;
+              }
+              p {
+                text-align: center;
+                width: 40%;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+            }
+          }
+          .look-more-record {
+            height: 65 * @tocurrentvh;
+            width: 100%;
+            font-size: 26 * @tocurrentvw;
+            color: #eb7162;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            img {
+              // display: none;
+              position: absolute;
+              width: 12 * @tocurrentvw;
+              height: 20 * @tocurrentvh;
+              transform: translatex(80 * @tocurrentvw);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+

src/components/index.vue

@@ -1327,6 +1327,7 @@ export default {
     margin-top: 18 * @toVw;
     margin-right: 19*@toVw;
     position: relative;
+    margin-left: 0;
     img{width: 146 * @toVw;height:146 * @toVw;position: absolute;top: 0;left: 37 * @toVw;border-radius:73 * @toVw ; }
     .white{position: absolute;background: white;width: 26 * @toVw;height: 26 * @toVw;border-radius: 13 * @toVw;top:61.5 * @toVw ; left: 98 * @toVw;}
     .text{

src/router/index.js

@@ -308,6 +308,15 @@ const router = new Router({
         noNew: true,
       }
     },
+    {
+      path: '/inviteFriends',
+      name: 'inviteFriends',
+      component: e => require(['@/components/buy/inviteFriends'], e),//
+      meta: {
+        deep: 0,
+        noNew: true,
+      }
+    },
     {
       path: '/activityInvite',
       name: 'activityInvite',

src/service/index.js

@@ -15,7 +15,7 @@ axios.interceptors.request.use(
   config => {
     // 获取token
     // process.env.versionTime
-    let versiontime = '07021621'
+    let versiontime = '07021707'
     const token = localStorage.getItem('cc_token');
     // 设置参数格式
     if (!config.headers['Content-Type']) {