From 021ab22ef9e0c1d858fd8058a9d2ecdd006c8240 Mon Sep 17 00:00:00 2001
From: wangkesi <wangkesi@3ncto.com>
Date: Tue, 30 Oct 2018 12:31:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E5=8C=BA=E5=8E=BF?=
 =?UTF-8?q?=E5=88=A4=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/popup-picker.vue |  34 ++++--
 src/router/index.js             |   7 +-
 src/view/demo.vue               | 197 +++++++++++++++-----------------
 src/view/home.vue               | 158 +++++--------------------
 4 files changed, 155 insertions(+), 241 deletions(-)

diff --git a/src/components/popup-picker.vue b/src/components/popup-picker.vue
index 565c3d5..7009718 100644
--- a/src/components/popup-picker.vue
+++ b/src/components/popup-picker.vue
@@ -1,9 +1,9 @@
 <template>
-    <popup>
+    <popup v-model="show" @on-show="setValue" @on-hide="cancel">
         <div class="picke-address">
             <div class="status-btn">
-                <a class="cel-btn">取消</a>
-                <a class="complete-btn">完成</a>
+                <a class="cel-btn" @click="cancel">取消</a>
+                <a class="complete-btn" @click="confirm">完成</a>
             </div>
             <picker :data='dataList' :columns=3 v-model="valueList"></picker>
         </div>
@@ -19,20 +19,38 @@ export default {
     props: {
         dataList: {
             type: Array,
-            default: []
+            default: function() {
+                return [];
+            }
         },
         value: {
             type: Array,
-            default: []
+            default: function() {
+                return [];
+            }
+        },
+        show: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
         return {
-            valueList: this.value
+            valueList: this.value.slice()
         };
     },
-    computed: {},
-    methods: {}
+    methods: {
+        confirm() {
+            const value = this.valueList.slice();
+            this.$emit("confirm", value);
+        },
+        setValue() {
+            this.valueList = this.value.slice();
+        },
+        cancel() {
+            this.$emit("cancel");
+        }
+    }
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/router/index.js b/src/router/index.js
index 65445b4..843f57d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -87,7 +87,12 @@ let router = new Router({
         },
         {
             path: "/picker",
-            component: resolve => require(["@/components/popup-picker.vue"], resolve)
+            component: resolve =>
+                require(["@/components/popup-picker.vue"], resolve)
+        },
+        {
+            path: "/demo",
+            component: resolve => require(["@/view/demo.vue"], resolve)
         }
     ]
 });
diff --git a/src/view/demo.vue b/src/view/demo.vue
index 12931ab..adafc28 100644
--- a/src/view/demo.vue
+++ b/src/view/demo.vue
@@ -1,110 +1,103 @@
 <template>
-		<div>
-			<group title="set position">
-		      	<x-switch title="left(100% width)" v-model="show"></x-switch>
-		    </group>
-			<div title="Default popup"  @click=" show = true" >点击看看</div>
-			<popup v-model="show">
-		        <div class="popup0">
-		        	<div><a>取消</a><a>完成</a></div>
-		         	<picker :data='year7' :columns=3 v-model='year7Value' @on-change='change' ref="picker1"></picker>
-		        </div>
-		    </popup>
-		</div>
+    <popup-picker :show="show" :data-list="year7" :value="year7Value" @confirm="confirm" @cancel="cancel"></popup-picker>
 </template>
 
 <script>
-	import { Group,Picker,Popup,XSwitch} from 'vux'
-	export default {
-		data() {
-			return {
-				show: true,
-				year7: [
-				{
-					name: '中国',
-					value: 'china',
-					parent: 0
-				}, {
-					name: '美国',
-					value: 'USA',
-					parent: 0
-				}, {
-					name: '广东',
-					value: 'china001',
-					parent: 'china'
-				}, {
-					name: '广西',
-					value: 'china002',
-					parent: 'china'
-				}, {
-					name: '美国001',
-					value: 'usa001',
-					parent: 'USA'
-				}, {
-					name: '美国002',
-					value: 'usa002',
-					parent: 'USA'
-				}, {
-					name: '广州',
-					value: 'gz',
-					parent: 'china001'
-				}, {
-					name: '深圳',
-					value: 'sz',
-					parent: 'china001'
-				}, {
-					name: '广西001',
-					value: 'gz',
-					parent: 'china002'
-				}, {
-					name: '广西002',
-					value: 'sz',
-					parent: 'china002'
-				}, {
-					name: '美国001_001',
-					value: '0003',
-					parent: 'usa001'
-				}, {
-					name: '美国001_002',
-					value: '0004',
-					parent: 'usa001'
-				}, {
-					name: '美国002_001',
-					value: '0005',
-					parent: 'usa002'
-				}, {
-					name: '美国002_002',
-					value: '0006',
-					parent: 'usa002'
-				}],
-				year7Value: ['USA','usa002','0006'],
-				goodsList: []
-			};
-		},
-		components: {
-			Picker,
-			Group,
-			XSwitch,
-			Popup
-		},
-		watch: {
-
-		},
-		methods: {
-			change (name) {
-		      	console.log('new Value', name)
-		   	},
-		   	getGoodsList (){
-		   		
-		   	}
-		   	
-		},
-		mounted() {
-			
-		}
-	};
+import popupPicker from "../components/popup-picker.vue";
+export default {
+    data() {
+        return {
+            show: true,
+            year7: [
+                {
+                    name: "中国",
+                    value: "china",
+                    parent: 0
+                },
+                {
+                    name: "美国",
+                    value: "USA",
+                    parent: 0
+                },
+                {
+                    name: "广东",
+                    value: "china001",
+                    parent: "china"
+                },
+                {
+                    name: "广西",
+                    value: "china002",
+                    parent: "china"
+                },
+                {
+                    name: "美国001",
+                    value: "usa001",
+                    parent: "USA"
+                },
+                {
+                    name: "美国002",
+                    value: "usa002",
+                    parent: "USA"
+                },
+                {
+                    name: "广州",
+                    value: "gz",
+                    parent: "china001"
+                },
+                {
+                    name: "深圳",
+                    value: "sz",
+                    parent: "china001"
+                },
+                {
+                    name: "广西001",
+                    value: "gz",
+                    parent: "china002"
+                },
+                {
+                    name: "广西002",
+                    value: "sz",
+                    parent: "china002"
+                },
+                {
+                    name: "美国001_001",
+                    value: "0003",
+                    parent: "usa001"
+                },
+                {
+                    name: "美国001_002",
+                    value: "0004",
+                    parent: "usa001"
+                },
+                {
+                    name: "美国002_001",
+                    value: "0005",
+                    parent: "usa002"
+                },
+                {
+                    name: "美国002_002",
+                    value: "0006",
+                    parent: "usa002"
+                }
+            ],
+            year7Value: ["USA", "usa002", "0006"]
+        };
+    },
+    components: {
+        "popup-picker": popupPicker
+    },
+    watch: {},
+    methods: {
+        confirm(list) {
+            console.log(list);
+        },
+        cancel() {
+            this.show = false;
+        }
+    },
+    mounted() {}
+};
 </script>
 
 <style>
-
 </style>
\ No newline at end of file
diff --git a/src/view/home.vue b/src/view/home.vue
index a53a551..36378ed 100644
--- a/src/view/home.vue
+++ b/src/view/home.vue
@@ -96,16 +96,7 @@
         <div class="page-bottom">
             <routerFooter></routerFooter>
         </div>
-
-        <popup v-model="show" @on-hide="popup">
-            <div class="picke-address">
-                <div class="status-btn">
-                    <a class="cel-btn" @click="setShow">取消</a>
-                    <a class="complete-btn" @click="getName()">完成</a>
-                </div>
-                <picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker>
-            </div>
-        </popup>
+        <popup-picker :show="show" @cancel="cancel" @confirm="confirm" :data-list="addressData" :value="addressValue"></popup-picker>
         <div class="Loading-box">
             <loading v-model="showLoading" text="loading"></loading>
         </div>
@@ -121,11 +112,19 @@
 <script>
 import homeApi from "../models/home-model.js";
 import configs from "../configs";
-import { Alert, Toast, Popup, Picker, Loading } from "vux";
+import { Alert, Toast, Loading } from "vux";
 import routerFooter from "../components/nav-bottom";
+import popupPicker from "../components/popup-picker.vue";
 
 var locationUrl = configs.locationUrl;
 export default {
+    components: {
+        Toast,
+        routerFooter,
+        Loading,
+        Alert,
+        "popup-picker": popupPicker
+    },
     data() {
         return {
             show: false,
@@ -133,7 +132,11 @@ export default {
             merchantNo: 2, //商户编号 默认值 不需要去掉
             districtId: "440106000", //区id 默认值 不需要去掉
             addressData: [],
-            addressValue: [],
+            addressValue: [
+                "440000000&广东省",
+                "440100000&广州市",
+                "440106000&天河区&2"
+            ],
             bannerImgList: [], //轮播图
             activityImgList: [], // 广告图
             iconList: [], // 图标列表
@@ -158,58 +161,23 @@ export default {
             state: 0
         };
     },
-    components: {
-        Toast,
-        Popup,
-        Picker,
-        routerFooter,
-        Loading,
-        Alert
-    },
     watch: {
         $route(to, from) {
             // this.getCityName();
         }
     },
     methods: {
-        //监听地区选择的完成按钮
-        getName() {
-            this.state = 0;
-            let arr = this.addressValue[2].split("&") || "";
+        //确定时保存记录
+        confirm(list) {
+            let arr = list[2].split("&") || "";
             this.districtId = arr[0];
             this.merchantNo = arr[2];
             this.getGoodsList(); //加载商品列表
             this.defaultCity = arr[1];
-            this.show = false;
-            console.log(this.addressValue);
-            localStorage.setItem("cityName", this.addressValue);
+            this.addressValue = list.slice();
+            localStorage.setItem("cityName", list);
             this.ShareWenXin();
-        },
-        //获取本地存储上的地区信息
-        getCityName() {
-            let name = localStorage.getItem("cityName") || "";
-            //本地存储不在 则赋予默认值
-            if (!name) {
-                this.defaultCity = "天河区";
-                //商户编号
-                this.merchantNo = 2;
-                //区id
-                this.districtId = "440106000";
-                return;
-            }
-            //440000000&广东省,440100000&广州市,440106000&天河区&2
-            let arr = name.split(",");
-            this.addressValue = arr;
-            let cityNameArr = arr[2].split("&");
-            this.districtId = cityNameArr[0];
-            this.defaultCity = cityNameArr[1];
-            this.merchantNo = cityNameArr[2];
-        },
-        //获取城市名称
-        change(name) {
-            if (this.flag) {
-                this.addressValue = name;
-            }
+            this.show = false;
         },
         //加载商品列表
         getGoodsList() {
@@ -247,63 +215,9 @@ export default {
                 });
             });
         },
-        //加载地址数据
-        getAddress() {
-            homeApi.getAddress().then(res => {
-                if (res.code == 0) {
-                    this.addressData = res.data;
-                } else {
-                    this.$vux.toast.text(res.msg, "middle");
-                }
-            });
-        },
-        //获取默认地址信息
-        // getdefaultAddress() {
-        //     homeApi.getdefaultAddress().then(res => {
-        //         if (res.code == 0) {
-        //             //如果获取的信息不存在 将从本地存储上拿
-        //             if (!res.data) {
-        //                 this.show = true;
-        //                 this.getCityName();
-        //             } else {
-        //                 this.defaultCity = res.data.districtName;
-        //                 this.districtId = res.data.districtId;
-        //                 this.merchantNo = res.data.merchantNo;
-        //                 this.addressValue = [];
-        //                 this.addressValue.push(res.data.provinceId);
-        //                 this.addressValue.push(res.data.cityId);
-        //                 this.addressValue.push(res.data.districtId);
-        //             }
-        //         } else {
-        //             this.$vux.toast.text(res.msg, "middle");
-        //         }
-        //         this.getGoodsList();
-        //     });
-        // },
-        popup() {
-            let str = localStorage.getItem("cityName") || "";
-            if (
-                !str &&
-                (this.state == -1 || this.state == 2 || this.state == 1)
-            ) {
-                this.defaultCity = "天河区";
-                //商户编号
-                this.merchantNo = 2;
-                //区id
-                this.districtId = "440106000";
-                this.addressValue = [
-                    "440000000&广东省",
-                    "440100000&广州市",
-                    "440106000&天河区&2"
-                ];
-                this.getGoodsList();
-            } else if (this.state == 2 || this.state == 1) {
-                this.getGoodsList();
-            }
-            // this.show = false;
-        },
-        setShow() {
+        cancel() {
             let str = localStorage.getItem("cityName") || "";
+            //首次取消也需要请求
             if (
                 !str &&
                 (this.state == -1 || this.state == 2 || this.state == 1)
@@ -349,9 +263,7 @@ export default {
             return new Promise((resolve, reject) => {
                 homeApi
                     .getLocation({
-                        // provinceId: this.provinceId,
                         cityId: this.cityId ? this.cityId : ""
-                        // districtId: this.districtId
                     })
                     .then(res => {
                         if (res.data.allAddress && res.data.userAddress) {
@@ -361,16 +273,18 @@ export default {
                             if (data.userAddress.type == 1) {
                                 this.address =
                                     data.userAddress.cityName +
-                                    data.userAddress.districtName
+                                    (data.userAddress.districtName
                                         ? data.userAddress.districtName
-                                        : "";
+                                        : "");
                                 this.alertShow = true;
                             } else if (data.userAddress.type == 2) {
                                 this.$vux.confirm.show({
                                     title: "自动定位地址：",
                                     content:
                                         data.userAddress.cityName +
-                                        data.userAddress.districtName,
+                                        (data.userAddress.districtName
+                                            ? data.userAddress.districtName
+                                            : ""),
                                     cancelText: "切换地址",
                                     onCancel: () => {
                                         this.show = true;
@@ -436,7 +350,6 @@ export default {
             if (!str) {
             } else {
                 let arr = str.split(",");
-                console.log(arr);
                 this.addressValue = arr;
                 this.provinceId = arr[0].split("&")[0];
                 this.cityId = arr[1].split("&")[0];
@@ -741,21 +654,6 @@ export default {
     background: rgba(255, 255, 255, 1);
     z-index: 130;
 }
-.picke-address .status-btn {
-    display: flex;
-    height: 0.8rem;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 0.3rem;
-}
-.picke-address .status-btn a {
-    padding: 0.3rem;
-    color: #888;
-}
-.picke-address .status-btn a.complete-btn {
-    color: #1aad19;
-}
-
 .Loading-box .weui-toast {
     width: 100%;
     min-height: 100% !important;