添加地址

src/pageSubs/address/add.vue

@@ -4,29 +4,191 @@
  * @Author: dream
  * @Date: 2021-03-26 14:16:05
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 14:16:58
+ * @LastEditTime: 2021-03-31 12:06:38
 -->
 <template>
-	<view>Add Address</view>
+	<view class="add-address-main">
+    <view class="form-item">
+      <view class="form-label">收货人</view>
+      <view class="form-content">
+        <input v-model="detail.name" placeholder="填写姓名" />
+      </view>
+    </view>
+    <view class="form-item">
+      <view class="form-label">手机号</view>
+      <view class="form-content">
+        <input v-model="detail.phone" placeholder="填写手机号" />
+      </view>
+    </view>
+    <view class="form-item">
+      <view class="form-label">所在地区</view>
+      <view class="form-content" @click="chooseLocaltion">
+        <block v-if="!detail.localtion.address">
+          <view class="u-flex u-row-right">
+            <view class="u-m-r-8">请选择</view>
+            <view class="enter-icon iph-icon-enter"></view>
+          </view>
+        </block>
+        <block v-else>
+          <view class="u-flex u-row-between">
+            <view>{{detail.localtion.address}}</view>
+            <view class="enter-icon iph-icon-enter"></view>
+          </view>
+        </block>
+      </view>
+      <!-- <view class="form-content">
+        <picker mode="region" :value="detail.localtion" @change="changeLocaltion">
+          <block v-if="!detail.localtion.value">
+            <view class="u-flex u-row-right">
+              <view class="u-m-r-8">请选择</view>
+              <view class="enter-icon iph-icon-enter"></view>
+            </view>
+          </block>
+          <block v-else>
+            <view>{{detail.localtion.value.join(' ')}}</view>
+          </block>
+        </picker>
+      </view> -->
+    </view>
+    <view class="form-item">
+      <view class="form-label">详细地址</view>
+      <view class="form-content">
+        <input v-model="detail.address" placeholder="街道、楼牌号等" />
+      </view>
+    </view>
+    <view class="form-item">
+      <view class="form-label">默认地址</view>
+      <view class="form-content u-flex u-row-right">
+        <u-switch v-model="detail.checked" size="50" active-color="#1677FF"></u-switch>
+      </view>
+    </view>
+    <iph-fixed-bottom>
+      <view class="footer iph-bg-fff">
+        <button class="save-btn">保存</button>
+      </view>
+    </iph-fixed-bottom>
+    <u-select v-model="isShowSelect" mode="mutil-column-auto" :list="provincesList" @confirm="confirmAddress"></u-select>
+  </view>
 </template>
 
 <script>
+import iphFixedBottom from '../../components/iphFixedBottom.vue'
 export default {
+  components: { iphFixedBottom },
   name: 'addAddress',
   data () {
     return {
-
+      isShowSelect: false,
+      provincesList: [{
+        value: 1,
+        label: '浙江省',
+        children: [
+          {
+            value: 2,
+            label: '杭州市',
+            children: [
+              {
+                value: 3,
+                label: '滨江区'
+              },
+              {
+                value: 4,
+                label: '江干区'
+              }
+            ]
+          },
+          {
+            value: 5,
+            label: '台州市',
+            children: [
+              {
+                value: 6,
+                label: '天台县'
+              },
+              {
+                value: 7,
+                label: '椒江区'
+              }
+            ]
+          }
+        ]
+      }],
+      detail: {
+        name: '',
+        phone: '',
+        localtion: {},
+        address: '',
+        checked: false
+      }
     }
   },
-  onLoad () {
-
-  },
   methods: {
-
+    changeLocaltion ({ detail }) {
+      console.log(detail)
+      this.detail.localtion = detail
+    },
+    chooseLocaltion () {
+      this.isShowSelect = true
+      // uni.chooseLocation({
+      //   success: (res) => {
+      //     console.log(res)
+      //     this.detail.localtion = res
+      //   }
+      // })
+    },
+    confirmAddress (val) {
+      this.detail.localtion = {
+        address: val.map(item => { return item.label }).join(' ')
+      }
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.add-address-main {
+  .form-item {
+    display: flex;
+    align-items: center;
+    padding: 32px;
+    font-size: 28px;
+    line-height: 40px;
+    background-color: $iph-standby-bg;
+    &::after {
+      border: 1px solid $iph-border-base;
+    }
+    &:last-child {
+      &::after {
+        border-color: transparent;
+      }
+    }
+    .form-label {
+      margin-right: 32px;
+      width: 112px;
+      font-weight: 500;
+    }
+    .form-content {
+      flex: 1;
+      .enter-icon {
+        width: 20px;
+        height: 20px;
+      }
+      .default-switch {
+        width: 92px;
+        height: 54px;
+      }
+    }
+  }
+  .footer {
+    padding: 24px;
+    .save-btn {
+      padding: 22px 0;
+      height: 88px;
+      line-height: 44px;
+      font-size: 32px;
+      color: $iph-standby-text;
+      background-color: $u-type-primary;
+    }
+  }
+}
 </style>