province-frame

@@ -60,13 +60,24 @@ exports.addressAct = (req, res, next) => {
     }).catch(next);
 };
 
+/**
+ * 新版地区选择
+ */
 exports.addressActVue = (req, res) => {
     res.render('address/address-act-vue', {
-        vue: true
+        vue: true,
+        localCss: true
     });
 };
 
 /**
+ * TODO DELETE 模拟省数据
+ */
+exports.provinces = (req, res) => {
+    res.json({ "provinces": [{ "name": "北京", "id": "1" }, { "name": "上海", "id": "2" }, { "name": "天津", "id": "3" }, { "name": "重庆", "id": "4" }, { "name": "河北", "id": "5" }, { "name": "山西", "id": "6" }, { "name": "河南", "id": "7" }, { "name": "辽宁", "id": "8" }, { "name": "吉林", "id": "9" }, { "name": "黑龙江", "id": "10" }, { "name": "内蒙古", "id": "11" }, { "name": "江苏", "id": "12" }, { "name": "山东", "id": "13" }, { "name": "安徽", "id": "14" }, { "name": "浙江", "id": "15" }, { "name": "福建", "id": "16" }, { "name": "湖北", "id": "17" }, { "name": "湖南", "id": "18" }, { "name": "广东", "id": "19" }, { "name": "广西", "id": "20" }, { "name": "江西", "id": "21" }, { "name": "四川", "id": "22" }, { "name": "海南", "id": "23" }, { "name": "贵州", "id": "24" }, { "name": "云南", "id": "25" }, { "name": "西藏", "id": "26" }, { "name": "陕西", "id": "27" }, { "name": "甘肃", "id": "28" }, { "name": "青海", "id": "29" }, { "name": "宁夏", "id": "30" }, { "name": "新疆", "id": "31" }, { "name": "台湾", "id": "32" }, { "name": "钓鱼岛", "id": "84" }, { "name": "港澳", "id": "52993" }] });
+};
+
+/**
  * 修改地址或者添加新地址
  * @param req
  * @param res
@@ -200,6 +211,6 @@ exports.locationList = (req, res, next) => {
     addressModel.locationList({
         uid: req.user.uid
     }).then(result => {
-        res.render('address/location-list', Object.assign(result, {layout: false}));
+        res.render('address/location-list', Object.assign(result, { layout: false }));
     }).catch(next);
 };

@@ -133,5 +133,6 @@ router.get('/installment/delBankCard', installment.delBankCard); // 删除绑定
 router.get('/installment/setMasterCard', installment.setMasterCard); // 切换主卡
 
 router.get('/address-vact', addressController.addressActVue); // 地址添加页面
+router.get('/provinces.json', addressController.provinces); // TODO 模拟省数据
 
 module.exports = router;

 <template>
-    <div class="vue-header">
-
-    </div>
+    <header class="yoho-header">
+        <a :href="headerBack" class="iconfont nav-back">&#xe610;</a>
+        <span v-if="showBtn" class="iconfont nav-home">&#xe638;</span>
+        <p class="nav-title">{{headerText}}</p>
+    </header>
 </template>
 <style>
-   .vue-header {
-       height: 90px;
-       background-image: linear-gradient(#323232, #414141);
-   }
+
 </style>
 <script>
 
     module.exports = {
+        props: {
+            headerBack: String,
+            headerText: String,
+            showBtn: Boolean
+        },
         data(){
-            return{
-                msg:'hello vue'
-            }
+            return {};
         }
     };
 

 <template>
     <div>
-        <header-component></header-component>
-        {{msg}}
+        <header-component header-text="地区选择" :show-btn="false">
+        </header-component>
+        <ul class="head-address-ul">
+            <li class="head-address-li">请选择</li>
+            <li></li>
+            <li></li>
+            <li></li>
+        </ul>
+        <div class="address-container">
+            <div class="address-content">
+                <ul class="address-ul">
+                    <li v-for="province in provinces">{{province.name}}</li>
+                </ul>
+            </div>
+        </div>
     </div>
 </template>
 <style>
     body {
         margin: 0;
     }
+
+    .head-address-ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        overflow: hidden;
+        background-color: white;
+        font-size: 24px;
+
+        li {
+            width: 25%;
+            display: block;
+            float: left;
+            height: 80px;
+            position: relative;
+            line-height: 80px;
+            text-align: center;
+        }
+
+        .head-address-li {
+            color: #f23030;
+        }
+
+        .head-address-li:after {
+            width: 60%;
+            height: 1px;
+            border-bottom: 2px solid #f23030;
+            position: absolute;
+            bottom: 1px;
+            left: 50%;
+            content: '';
+            margin-left: -30%;
+        }
+    }
+
+    .head-address-ul:after {
+        content: '';
+        width: 100%;
+        height: 1px;
+        position: absolute;
+        border-bottom: 1px solid #e3e5e9;
+        left: 0px;
+        bottom: 0px;
+        transform: scaleY(0.5);
+        -webkit-transform: scaleY(0.5);
+    }
+
+    .address-container {
+        margin: 0px;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+
+        .address-content {
+            transform: translate(0px, 0px) translateZ(0px);
+            height: 960px;
+
+            .address-ul {
+                padding: 0;
+                margin: 0;
+                list-style: none;
+                height: 100%;
+                overflow: auto;
+                font-size: 24px;
+                color: #232326;
+
+                li {
+                    height: 80px;
+                    line-height: 80px;
+                    padding-left: 10px;
+                    position: relative;
+                    overflow: hidden;
+                }
+
+                li:after {
+                    content: '';
+                    width: 100%;
+                    height: 1px;
+                    position: absolute;
+                    border-bottom: 1px solid #e3e5e9;
+                    left: 0px;
+                    bottom: 0px;
+                    transform: scaleY(0.5);
+                    -webkit-transform: scaleY(0.5);
+                }
+            }
+        }
+    }
 </style>
 <script>
     let headerComponent = require('common/header.vue');
 
     module.exports = {
-        data(){
-            return{
-                msg:'hello vue'
-            }
+        data() {
+            return {
+                provinces:[]
+            };
         },
         components: {
             headerComponent
+        },
+        methods: {
+            selectProvince() {
+                $.get('/home/provinces.json', resultData => {
+                    this.provinces = resultData.provinces;
+                });
+            }
+        },
+        created: function() {
+            this.selectProvince();
         }
     };