认证

src/components/creator/CreatorInfo.vue

@@ -8,13 +8,7 @@
         }"
         class="info"
     >
-        <van-image
-            :width="size === 'large' ? 88 : 70"
-            :height="size === 'large' ? 88 : 70"
-            :src="getImg(info.avatar)"
-            fit="cover"
-            radius="100"
-        />
+        <van-image :width="66" :height="66" :src="getImg(info.avatar)" fit="cover" radius="100" />
 
         <img v-if="rank" class="NOImg" :src="NOInfo.img1" alt="" />
 
@@ -35,18 +29,19 @@
                     <span>已售</span>
                     <span>{{ info.sales }}</span>
                 </div>
-                <van-button
-                    @click.prevent="follow"
-                    :class="{ follow: info.follow }"
-                    plain
-                    type="primary"
-                    size="mini"
-                    round
-                >
-                    {{ info.follow ? (isFollow ? '互相关注' : '已关注') : '关注' }}
-                </van-button>
             </div>
         </div>
+
+        <van-button
+            @click.prevent="follow"
+            :class="{ follow: info.follow }"
+            :plain="info.follow"
+            type="primary"
+            size="mini"
+            round
+        >
+            {{ info.follow ? (isFollow ? '互相关注' : '已关注') : '关注' }}
+        </van-button>
     </router-link>
 </template>
 
@@ -126,12 +121,12 @@ export default {
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        height: 80px;
+        height: 60px;
 
         .text1 {
-            font-size: @font2;
+            font-size: 16px;
             color: @text0;
-            line-height: 24px;
+            line-height: 22px;
         }
 
         .text2 {
@@ -167,22 +162,6 @@ export default {
                 }
             }
 
-            .van-button--mini {
-                min-width: 70px;
-                border: solid 0px transparent;
-                padding: 1px;
-                background-image: linear-gradient(@bg3, @bg3), linear-gradient(135deg, @prim, @warn);
-                background-origin: border-box;
-                box-sizing: border-box;
-                background-clip: content-box, border-box;
-                font-size: @font1;
-
-                &.follow {
-                    background-image: linear-gradient(@bg3, @bg3), linear-gradient(135deg, @text3, @text3);
-                    color: @text3;
-                }
-            }
-
             .text4 {
                 span {
                     font-size: @font1;
@@ -208,6 +187,21 @@ export default {
         left: 12px;
         top: 15px;
     }
+
+    .van-button--mini {
+        min-width: 60px;
+        font-size: @font1;
+        font-size: 14px;
+        height: 28px;
+        border-radius: 4px;
+        border-width: 0;
+        background-image: none;
+
+        &.follow {
+            color: @text3;
+            background-image: none;
+        }
+    }
 }
 
 .info + .info {
@@ -215,11 +209,11 @@ export default {
     &::before {
         content: '';
         position: absolute;
-        left: 20px;
-        right: 20px;
+        left: 15px;
+        right: 0px;
         top: 0;
         height: 1px;
-        background-color: @bg3;
+        background-color: #ffffff10;
     }
 }
 </style>

src/mixins/common.js

@@ -145,7 +145,7 @@ export default {
                         if (this.authStatus === '认证中' || this.authStatus === '认证失败') {
                             this.$router.push('/waiting');
                         } else if (this.authStatus === '未认证') {
-                            this.$router.push('/Authentication');
+                            this.$router.push('/verified');
                         }
                     });
                 return Promise.reject();

src/router/index.js

@@ -155,7 +155,7 @@ const routes = [
         component: () => import('../views/account/Login.vue'),
         meta: {
             pageType: Page.Login,
-            title: '登录',
+            title: ' ',
             tabColor: '#181818'
         }
     },
@@ -199,7 +199,10 @@ const routes = [
     {
         path: '/verified',
         name: 'userVerified',
-        component: () => import('../views/account/Verified.vue')
+        component: () => import('../views/account/Verified.vue'),
+        meta: {
+            title: ' '
+        }
     },
     {
         path: '/verifiedSuc',
@@ -554,7 +557,7 @@ const routes = [
         name: 'mineBanks',
         component: () => import('../views/user/Banks.vue'),
         meta: {
-            title: '拉索宇宙'
+            title: '我的银行卡'
         }
     },
     {

src/styles/app.less

@@ -24,7 +24,7 @@
     --van-divider-border-color: #939599;
     --van-divider-text-color: @tabBorder;
     --van-divider-margin: 0;
-    --van-field-error-message-color: @prim;
+    --van-field-error-message-color: #FC2F55;
     --van-action-sheet-item-text-color: #000;
     --van-uploader-upload-active-color: transparent;
     --van-uploader-upload-background-color: transparent;
@@ -42,6 +42,7 @@
     --van-dialog-background-color: #1e222c;
     --van-button-default-background-color: transparent;
     --van-dialog-message-font-size: 17px;
+    --van-dialog-has-title-message-text-color: #fff;
 }
 
 [contenteditable='true'],

src/styles/common/theme.less

@@ -4,10 +4,10 @@
 @danger: #f56c6c;
 @warn: #28B6FF;
 @textP: #28B6FF;
-@text0: #000000;
+@text0: #ffffff;
 @text1: #323233;
 @text2: #606266;
-@text3: #939599;
+@text3: #8C8E93;
 @text4: #939599;
 @border1: #dcdfe6;
 @border2: #f2f3f5;

src/views/Mine.vue

@@ -74,7 +74,7 @@
             <div class="user-list" v-if="isLogin">
                 <div class="user-text" @click="$router.push('/store')">藏品数 {{ assetNum }}</div>
                 <div class="user-text" @click="$router.push('/mineFollows')">关注数 {{ userInfo.follows }}</div>
-                <div class="user-text" @click="$router.push('/mineFollowers')">粉丝数 {{ userInfo.followers }}</div>
+                <div class="user-text" @click="$router.push('/mineFollows?pageType=follower')">粉丝数 {{ userInfo.followers }}</div>
             </div>
             <div class="order-card">
                 <div class="order-info" @click="$router.push('/orders')">

src/views/account/Verified.vue

@@ -1,190 +1,43 @@
 <template>
-    <!-- <TopNavigation/> -->
-    <div class="content">
-        <div class="real_name_authentication">实名认证</div>
-        <div class="real_name_authentication_tip">认证成功后不能修改，请使用本人身份信息完成认证</div>
-        <van-form @submit="submit" @failed="failed" ref="form">
-            <!-- 姓名 -->
-            <van-field
-                label="姓名"
-                name="姓名"
-                placeholder="请输入您真实姓名"
-                v-model="form.realName"
-                :rules="[{ required: true, message: '请输入您真实姓名' }]"
-            >
-            </van-field>
-            <!-- 手机号 -->
-            <van-field
-                type="tel"
-                label="手机号码"
-                name="手机号码"
-                placeholder="请输入您的手机号码"
-                v-model="form.phone"
-                :maxlength="11"
-                :rules="[
-                    { required: true, message: '请输入您的手机号码' },
-                    {
-                        pattern: phonePattern,
-                        message: '手机号码格式错误'
-                    }
-                ]"
-            >
-            </van-field>
-            <!-- 身份证号 -->
-            <van-field
-                label="身份证号"
-                name="身份证号"
-                placeholder="请输入身份证号"
-                v-model="form.idNo"
-                :rules="[
-                    { required: true, message: '请输入身份证号' },
-                    {
-                        pattern: IDPattern,
-                        message: '身份证号格式错误'
-                    }
-                ]"
-            >
-            </van-field>
-            <!-- 身份证正面 -->
-            <!-- <van-field
-                label="身份证照片（正面照）"
-                name="正面照"
-                v-model="form.idFront"
-                class="img"
-                :rules="[
-                    {
-                        validator: val => {
-                            return !!this.form.idFront;
-                        },
-                        message: '请上传身份证正面照片'
-                    }
-                ]"
-            >
-                <template #input>
-                    <div class="img-content">
-                        <img v-if="form.idFront === ''" :src="require('@assets/png-shangchuan@3x.png')" alt="" class="img-content_con"/>
-                        <van-image v-else :src="form.idFront" fit="cover" width="160px" height="160px"/>
-                        <div class="img-content_con_text" v-if="form.idFront === ''">点击上传</div>
-                        <van-uploader name="idFront" result-type="file" :after-read="afterRead" />
-                    </div>
-                </template>
-            </van-field> -->
-            <!-- 身份证反面 -->
-            <!-- <van-field
-                label="身份证照片（反面照）"
-                name="反面照"
-                v-model="form.idBack"
-                class="img"
-                :rules="[
-                    {
-                        validator: val => {
-                            return !!this.form.idBack;
-                        },
-                        message: '请上传身份证反面照片'
-                    }
-                ]"
-            >
-                <template #input>
-                    <div class="img-content">
-                        <img v-if="form.idBack === ''" :src="require('@assets/png-shangchuan@3x.png')" alt="" class="img-content_con"/>
-                        <van-image v-else :src="form.idBack" fit="cover" width="160px" height="160px"/>
-                        <div class="img-content_con_text" v-if="form.idBack === ''">点击上传</div>
-                        <van-uploader name="idBack" result-type="file" :after-read="afterRead" />
-                    </div>
-                </template>
-            </van-field> -->
-            <div class="next_step" ref="btn">
-                <div @click="submit" class="next_step_con">
-                    提交审核
-                </div>
-            </div>
-        </van-form>
-        <!-- <van-field
-        v-model="userName"
-        name="姓名"
-        label="姓名"
-        placeholder="请输入您真实姓名"
-        />
-        <van-field
-        v-model="userPhone"
-        name="手机号码"
-        label="手机号码"
-        placeholder="请输入您的手机号码"
-        :rules="[{ required: true, message: '请填写手机号码' }]"
-        />
-        <van-field
-        v-model="userId"
-        name="身份证号"
-        label="身份证号"
-        placeholder="请输入18位身份证号"
-        :rules="[{ required: true, message: '请填写身份证号' }]"
-        /> -->
-    </div>
-    <!-- <div class="login">
+    <div class="login">
         <div class="tabs">
-            <div class="text1">个人认证</div>
+            <div class="text1">实名认证</div>
             <div class="text2">
-                <span>账户实名认证后不能修改，</span>
-                <span>请使用本人身份信息完成认证</span>
+                <span>认证成功后不能修改，请使用本人身份信息完</span>
+                <!-- <span>请使用本人身份信息完成认证</span> -->
             </div>
         </div>
 
         <van-form @submit="submit" @failed="failed" ref="form">
-            <van-field
-                label="姓名"
-                name="姓名"
-                placeholder="请输入您真实姓名"
-                v-model="form.realName"
-                :rules="[{ required: true, message: '请输入您真实姓名' }]"
-            >
-            </van-field>
-
-            <van-field
-                type="tel"
-                label="手机号码"
-                name="手机号码"
-                placeholder="请输入您的手机号码"
-                v-model="form.phone"
-                :maxlength="11"
-                :rules="[
-                    { required: true, message: '请输入您的手机号码' },
-                    {
-                        pattern: phonePattern,
-                        message: '手机号码格式错误'
-                    }
-                ]"
-            >
-            </van-field>
-
-            <van-field
-                label="电子邮箱"
-                name="电子邮箱"
-                placeholder="请输入电子邮箱"
-                v-model="form.email"
-                :rules="[
-                    { required: true, message: '请输入电子邮箱' },
-                    {
-                        pattern: emailPattern,
-                        message: '电子邮箱格式错误'
-                    }
-                ]"
-            >
-            </van-field>
-
-            <van-field
-                label="身份证号"
-                name="身份证号"
-                placeholder="请输入身份证号"
-                v-model="form.idNo"
-                :rules="[
-                    { required: true, message: '请输入身份证号' },
-                    {
-                        pattern: IDPattern,
-                        message: '身份证号格式错误'
-                    }
-                ]"
-            >
-            </van-field>
+            <van-cell-group>
+                <van-field
+                    label="真实姓名"
+                    name="真实姓名"
+                    placeholder="请填写真实姓名"
+                    v-model="form.realName"
+                    input-align="right"
+                    clearable
+                    :rules="[{ required: true, message: '请输入您真实姓名' }]"
+                >
+                </van-field>
+                <van-field
+                    label="身份证号"
+                    name="身份证号"
+                    placeholder="请填写身份证号"
+                    v-model="form.idNo"
+                    input-align="right"
+                    clearable
+                    :border="false"
+                    :rules="[
+                        { required: true, message: '请输入身份证号' },
+                        {
+                            pattern: IDPattern,
+                            message: '身份证号格式错误'
+                        }
+                    ]"
+                >
+                </van-field>
+            </van-cell-group>
 
             <van-field
                 label="身份证照片（正面照）"
@@ -241,20 +94,17 @@
                 </van-button>
             </div>
         </van-form>
-    </div> -->
+    </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import phone from '../../mixins/phone';
-// import TopNavigation from "../../components/TopNavigation.vue"
 export default {
     computed: {
         ...mapState(['userInfo'])
     },
-    components: {
-        // TopNavigation
-    },
+
     mixins: [phone],
     data() {
         return {
@@ -266,8 +116,8 @@ export default {
                 phone: '',
                 email: '',
                 idNo: '',
-                // idFront: '',
-                // idBack: '',
+                idFront: '',
+                idBack: '',
                 status: ''
             },
             btn: null
@@ -306,7 +156,7 @@ export default {
                 });
         },
         afterRead(file, e) {
-            this.updateFile(file).then(img => {
+            this.updateFile(file, 'id', 1000).then(img => {
                 this.form[e.name] = img;
             });
         },
@@ -318,29 +168,39 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.content{
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        background: @bg;
-        // margin-top: 44px;
-        padding: 16px;
-        padding-bottom: 0;
-        box-sizing: border-box;
-        .real_name_authentication{
-            font-size: 20px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #FFFFFF;
-            margin-bottom: 6px;
-        }
-        .real_name_authentication_tip{
-            font-size: 12px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #FFCA5E;
-            margin-bottom: 30px;
+.login {
+    padding: 10px 16px 150px;
+    background-color: #fff;
+}
+@text0: #202020;
+@text3: #747474;
+.tabs {
+    padding-bottom: 12px;
+    .text1 {
+        font-size: 20px;
+        font-weight: bold;
+        color: @text0;
+        line-height: 30px;
+    }
+    .text2 {
+        font-size: 12px;
+        color: @text3;
+        line-height: 22px;
+        margin-top: 4px;
+        span {
+            &:nth-child(2) {
+                color: @prim;
+            }
         }
+    }
+}
+.van-cell::after {
+    border-bottom-color: @tabBorder;
+}
+
+.icon {
+    display: block;
+    margin-top: 12px;
 }
 /deep/ .van-form {
     // margin-top: 28px;
@@ -350,64 +210,46 @@ export default {
         .van-field__left-icon {
             margin-right: 8px;
         }
+
+        &::after{
+            left: 16px;
+        }
     }
+
     .van-field__body {
-        height: 56px;
+        height: 70px;
         align-items: center;
-        border-bottom: 1px solid rgba(95, 100, 111,.2);
-    }
-    .van-field__body:nth-of-type(4){
-        margin-top: 22px;
-        border-bottom: none;
-        width: 160px;
-        height: 160px;
-        border-radius: 8px;
-        opacity: 0.2;
-        border: 1px solid #5F646F;
     }
+
     .van-field__label {
-        font-size: 14px;
-        // font-weight: bold;
-        color: #FFFFFF;
-        line-height: 24px;
-        margin-top: 16px;
+        font-size: 16px;
+        color: #606060;
+        line-height: 22px;
+        margin-top: 25px;
     }
-    .van-field__control{
-        color: #FFFFFF;
-        background-color: @bg;
-    }
-}
-/deep/ .van-cell:after{
-    border-bottom: none;
 }
-@bottom: 6px;
-.next_step{
-        width: 100%;
-        height: 56px;
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        padding: 8px 16px;
-        box-sizing: border-box;
-        background: #15152D;
-        padding-bottom: calc(@bottom+ constant(safe-area-inset-bottom));
-        padding-bottom: calc(@bottom + env(safe-area-inset-bottom));
-        .next_step_con{
-            width: 100%;
-            height: 40px;
-            background: #28B6FF;
-            border-radius: 8px;
-            line-height: 40px;
-            text-align: center;
-            font-size: 16px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #FFFFFF;
-        }
+.button {
+    margin-top: 60px;
+
+    .del {
+        margin-top: 20px;
+        border-color: @text0;
+    }
+
+    .sure {
+        color: @bg !important;
+    }
+
+    .van-button {
+        font-weight: bold;
     }
-/deep/ .van-button{
-    background-color: #28B6FF;
 }
+
+.sub-code {
+    padding-right: 0;
+    border-width: 0;
+}
+
 .img {
     display: flex;
     padding: 20px 0 10px;
@@ -421,17 +263,9 @@ export default {
         min-width: 86px;
     }
 }
-/deep/ .van-uploader__input{
-    border-radius: 8px;
-}
+
 .img-content {
     position: relative;
-    width: 160px;
-    height: 160px;
-    // background-color: #5F646F;
-    // border-radius: 8px;
-    // opacity: 0.2;
-    // border: 1px dashed #5F646F;
     /deep/.van-uploader {
         position: absolute;
         left: 0;
@@ -442,44 +276,38 @@ export default {
             height: 160px;
         }
     }
-    .iD_card_upload_con_img{
-        width: 24px;
-        height: 24px;
-        margin: 56px 0 6px 68px;
-    }
-    .iD_card_upload_con_text{
-        font-size: 12px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #5F646F;
-        margin-left: 56px;
-    }
-    .img-content_con{
-        width: 160px;
-        height: 160px;
-    }
-    .img-content_con_text{
-            font-size: 12px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #5F646F;
-            position: absolute;
-            top: 87px;
-            left: 57px;
-        }
 }
+
+.button {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: @bg2;
+    padding: 6px 42px;
+    z-index: 20;
+    .bottom(6px);
+    border-top: 1px solid @tabBorder;
+}
+
 /deep/.img {
     &.van-cell {
-        margin-top: 10px;
+        margin-top: 20px;
         .van-field__body {
             height: 160px;
-            border-bottom: none;
-            margin-top: 10px;
         }
         .van-field__label {
-            margin-top: 0px;
+            margin-top: 5px;
         }
     }
 }
 
+/deep/.van-field__control {
+    font-size: 16px !important;
+    color: @text0;
+}
+
+/deep/.van-field__error-message {
+    text-align: right;
+}
 </style>

src/views/creator/List.vue

@@ -102,7 +102,7 @@ export default {
 
 <style lang="less" scoped>
 .follow {
-    background-color: @bg3;
+    background-color: @bg;
     padding-bottom: 100px;
 }
 /deep/.van-tabs__nav--line.van-tabs__nav--complete {
@@ -149,15 +149,5 @@ export default {
 .van-tabs {
     background-color: @bg;
 }
-.info {
-    background-color: @bg;
-
-    /deep/.van-button--mini {
-        background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @prim, @warn) !important;
 
-        &.follow {
-            background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3) !important;
-        }
-    }
-}
 </style>

src/views/user/Banks.vue

@@ -1,16 +1,18 @@
 <template>
     <div class="page">
-        <div class="page_top">我的银行卡</div>
-        <div class="page_tip">成功绑定后不能修改</div>
         <div class="add" @click="add" v-if="list.length === 0">
             <img src="@assets/png-tianjia.png" alt="" />
             <span>添加银行卡</span>
+            <div class="tips">
+                <img src="@assets/safe.png" alt="" />
+                <span>信息加密处理，保护个人隐私不泄密</span>
+            </div>
         </div>
         <div class="list">
             <van-swipe-cell :name="index" v-for="(item, index) in list" :key="index" :before-close="beforeClose">
                 <div class="bank_info">
                     <div class="bank_info_left">
-                        <div class="text1">{{item.bankName}}</div>
+                        <div class="text1">{{ item.bankName }}</div>
                         <div class="text2">{{ item.cardTypeDesc }}</div>
                     </div>
                     <div class="bank_info_right">
@@ -140,6 +142,8 @@ export default {
         line-height: 17px;
     }
     .add {
+        background-color: @bg2;
+        border-radius: 12px;
         .flex-col();
         padding: 60px 0;
         align-items: center;
@@ -153,57 +157,75 @@ export default {
             line-height: 24px;
             margin-top: 17px;
         }
+
+        .tips {
+            .flex();
+            margin-top: 6px;
+            img {
+                width: 16px;
+                height: 16px;
+                display: flex;
+            }
+            span {
+                font-size: 12px;
+                color: #ffffff40;
+                line-height: 18px;
+                margin-top: 0;
+                margin-left: 1px;
+            }
+        }
     }
     .van-swipe-cell {
         height: 100px;
-        background: #29293f;
+        background: @bg2;
         border-radius: 12px;
-        margin-top: 30px;
+        // margin-top: 30px;
         padding-top: 20px;
         box-sizing: border-box;
-        .bank_info{
+        margin-bottom: 16px;
+        .bank_info {
             height: 80px;
             display: flex;
             justify-content: space-between;
             .bank_info_left {
-            margin-left: 16px;
-            color: #ffffff;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            .text1 {
-                font-size: 14px;
-                line-height: 24px;
-                margin-bottom: 2px;
-            }
-            .text2 {
-                font-size: 10px;
-                line-height: 10px;
-            }
-        }
-        .bank_info_right {
-            position: relative;
-            .text3 {
-                margin-right: 16px;
-                font-size: 14px;
+                margin-left: 16px;
+                color: #ffffff;
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
-                color: #ffffff;
-                line-height: 24px;
+                .text1 {
+                    font-size: 14px;
+                    line-height: 24px;
+                    margin-bottom: 2px;
+                }
+                .text2 {
+                    font-size: 10px;
+                    line-height: 10px;
+                }
             }
-            .bank_info_right_img {
-                width: 166px;
-                height: 68px;
-                position: absolute;
-                bottom: 0px;
-                right: 0px;
+            .bank_info_right {
+                position: relative;
+                .text3 {
+                    margin-right: 16px;
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #ffffff;
+                    line-height: 24px;
+                }
+                .bank_info_right_img {
+                    width: 166px;
+                    height: 68px;
+                    position: absolute;
+                    bottom: 0px;
+                    right: 0px;
+                }
             }
         }
-        }
         /deep/.van-swipe-cell__right {
-        padding: 12px 0 30px 16px;
-        box-sizing: border-box;
-        display: flex;
-    }
+            padding: 12px 0 30px 16px;
+            box-sizing: border-box;
+            display: flex;
+        }
     }
 }
 // .van-swipe-cell {
@@ -263,4 +285,4 @@ export default {
 //         font-size: @font1;
 //     }
 // }
-</style>
+</style>

src/views/user/Follows.vue

@@ -1,23 +1,24 @@
 <template>
     <div class="follow">
         <van-sticky :offset-top="46">
-            <van-tabs v-model="pageType" line-width="34" line-height="2" color="#ffffff">
-                <van-tab title="关注"></van-tab>
-                <van-tab title="粉丝"></van-tab>
+            <van-tabs @change="init" v-model:active="pageType" line-width="34" line-height="2" color="#ffffff">
+                <van-tab :title="'关注 ' + (userInfo.follows ? userInfo.follows : '')" name="follow"></van-tab>
+                <van-tab :title="'粉丝 ' + (userInfo.followers ? userInfo.followers : '')" name="follower"></van-tab>
             </van-tabs>
         </van-sticky>
         <div class="list">
             <template v-for="(item, index) in list" :key="index">
                 <creator-info v-model:info="list[index]" @update:info="init"></creator-info>
             </template>
-            <van-empty v-if="empty" description="你还没有关注别人哦～" :image="require('@assets/kong_png_gaunzhu.png')">
-                <div class="empty-tips">这里将展示你在拉索的粉丝用户</div>
+            <van-empty v-if="empty" :description="emptyText.name" :image="require('@assets/kong_png_gaunzhu.png')">
+                <div class="empty-tips">{{ emptyText.sub }}</div>
             </van-empty>
         </div>
     </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import CreatorInfo from '../../components/creator/CreatorInfo.vue';
 export default {
     components: { CreatorInfo },
@@ -26,10 +27,24 @@ export default {
         return {
             list: [],
             empty: false,
-            pageType: 'follow'
+            pageType: 'follow',
+            emptyInfo: {
+                follow: {
+                    name: '你还没有关注别人哦～',
+                    sub: '这里将展示你在拉索的关注的用户'
+                },
+                follower: {
+                    name: '你还没有粉丝哦~',
+                    sub: '这里将展示你在拉索的粉丝用户'
+                }
+            }
         };
     },
     computed: {
+        ...mapState(['userInfo']),
+        emptyText() {
+            return this.emptyInfo[this.pageType];
+        },
         showList() {
             return [...this.list].filter(item => {
                 return item.follow;
@@ -37,6 +52,9 @@ export default {
         }
     },
     mounted() {
+        if (this.$route.query.pageType) {
+            this.pageType = this.$route.query.pageType;
+        }
         this.init();
     },
     methods: {
@@ -46,11 +64,30 @@ export default {
                 forbidClick: true
             });
             this.empty = false;
-            this.$http.get('/user/myFollows').then(res => {
-                this.list = res;
-                this.empty = res.length === 0;
-                this.$toast.clear();
-            });
+            this.list = [];
+            if (this.pageType === 'follow') {
+                this.$http
+                    .get('/user/myFollows')
+                    .then(res => {
+                        this.list = res;
+                        this.empty = res.length === 0;
+                        this.$toast.clear();
+                    })
+                    .catch(e => {
+                        this.$toast(e.error);
+                    });
+            } else {
+                this.$http
+                    .get('/user/myFollowers')
+                    .then(res => {
+                        this.list = res;
+                        this.empty = res.length === 0;
+                        this.$toast.clear();
+                    })
+                    .catch(e => {
+                        this.$toast(e.error);
+                    });
+            }
         }
     }
 };
@@ -73,15 +110,4 @@ export default {
         line-height: 30px;
     }
 }
-.info {
-    background-color: @bg;
-
-    /deep/.van-button--mini {
-        background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @prim, @warn) !important;
-
-        &.follow {
-            background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3) !important;
-        }
-    }
-}
 </style>