空页面

src/pages/news.vue

@@ -9,6 +9,10 @@
         <news-info></news-info>
         <news-info :dot="1"></news-info>
         <news-info></news-info>
+
+        <van-empty image="/native/imgs/kong_png_xiaoxiliebiao.png" description="你还没有任何消息哦～">
+            <van-button type="primary" block>去逛逛</van-button>
+        </van-empty>
     </div>
 </template>
 

src/pages/setting.vue

@@ -11,14 +11,19 @@
             </van-cell>
             <van-cell title="昵称" value="粉条" is-link />
             <van-cell title="性别" is-link @click="chooseSex" />
-            <van-cell title="地区" is-link @click="$refs.area.init()">
-                <span>{{ province }}{{ city }}{{ region }}</span>
+            <van-cell title="地区" is-link :class="{ not: !city }" @click="$refs.area.init()">
+                <span>{{ province }}{{ city || '未设置' }}</span>
             </van-cell>
             <van-cell title="收货地址" is-link />
-            <van-cell title="手机号" class="not" value="未绑定" is-link />
+            <van-cell title="手机号" class="not" is-link>
+                <span>未绑定</span>
+                <van-button type="primary" open-type="getPhoneNumber" @getphonenumber="getphonenumber"
+                    >授权手机号</van-button
+                >
+            </van-cell>
         </van-cell-group>
 
-        <area-select ref="area" :province.sync="province" :city.sync="city" :region.sync="region"></area-select>
+        <area-select ref="area" :province.sync="province" :city.sync="city" :columnsNum="2"></area-select>
     </div>
 </template>
 
@@ -45,6 +50,9 @@ export default {
                     console.log(res.errMsg);
                 }
             });
+        },
+        getphonenumber(e) {
+            console.log(e);
         }
     }
 };
@@ -59,6 +67,16 @@ export default {
     .van-cell__value {
         font-size: 16px;
     }
+
+    .van-button {
+        position: absolute;
+        top: 12px;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        opacity: 0;
+        --button-small-height: 64px !important;
+    }
 }
 
 /deep/ .not {

src/styles/vanIndex.less

@@ -14,3 +14,24 @@
     --grid-item-text-color: #000;
     --grid-item-text-font-size: 14px;
 }
+
+.van-empty {
+    .van-empty__image {
+        width: 260px;
+        height: 190px;
+    }
+    .van-empty__description {
+        font-size: 13px;
+        color: #939599;
+        line-height: 22px;
+        margin-top: 0;
+    }
+
+    .van-empty__bottom {
+        margin-top: 56px;
+    }
+
+    .van-button {
+        width: 290px;
+    }
+}