会员地址管理CRUD

yudao-ui-app/app.scss

@@ -1,6 +1,8 @@
 /* 页面公共scss */
 .container {
 	background-color: $custom-bg-color;
+  margin: 0;
+  padding: 0;
 	box-sizing: border-box;
 	height: 100%;
 }

yudao-ui-app/pages.json

@@ -67,13 +67,13 @@
       }
     },
     {
-      "path": "pages/address/add",
+      "path": "pages/address/create",
       "style": {
         "navigationBarTitleText": "新增地址"
       }
     },
     {
-      "path": "pages/address/edit",
+      "path": "pages/address/update",
       "style": {
         "navigationBarTitleText": "修改地址"
       }

yudao-ui-app/pages/address/add.vue

@@ -1,17 +0,0 @@
-<template>
-  <view class="container"> </view>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      title: ''
-    }
-  },
-  onLoad() {},
-  methods: {}
-}
-</script>
-
-<style lang="scss" scoped></style>

yudao-ui-app/pages/address/create.vue

@@ -0,0 +1,148 @@
+<template>
+  <view class="container">
+    <view class="address-box">
+      <u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
+        <u-form-item label="收件人名称" prop="name" labelWidth="90" borderBottom ref="item-name">
+          <u-input type="text" maxlength="11" v-model="formData.name" clearable placeholder="请填写收件人名称" border="none"></u-input>
+        </u-form-item>
+
+        <u-form-item label="手机号" prop="mobile" labelWidth="90" borderBottom ref="item-mobile">
+          <u-input type="number" maxlength="11" v-model="formData.mobile" clearable placeholder="请填写手机号" border="none"></u-input>
+        </u-form-item>
+
+        <u-form-item label="省市地区" prop="areaText" labelWidth="90" borderBottom @click=" regionVisible = true; hideKeyboard()" ref="item-areaText">
+          <u--input v-model="formData.areaText" disabled disabledColor="#ffffff" placeholder="请选择省市地区" border="none"></u--input>
+          <u-icon slot="right" name="arrow-right"></u-icon>
+          <w-picker :visible.sync="regionVisible" mode="region" :value="defaultRegion" default-type="value" :hide-area="false" @confirm="onConfirm($event, 'region')" @cancel="onCancel" ref="region"></w-picker>
+        </u-form-item>
+
+        <u-form-item label="详细地址" prop="detail" labelWidth="90" borderBottom ref="item-detail">
+          <u--textarea placeholder="请输入街道门牌号不低于6个字" v-model="formData.detail" count></u--textarea>
+        </u-form-item>
+
+        <u-form-item label="默认地址" prop="type" labelWidth="90" borderBottom ref="item-type">
+          <u-radio-group v-model="formData.type">
+            <u-radio :customStyle="{ marginRight: '16px' }" v-for="(item, index) in typeList" :key="index" :label="item.name" :name="item.value"></u-radio>
+          </u-radio-group>
+        </u-form-item>
+
+        <view class="btn-group">
+          <u-button type="primary" text="保存地址" customStyle="margin-top: 50px" @click="handleSubmit"></u-button>
+        </view>
+      </u--form>
+    </view>
+  </view>
+</template>
+
+<script>
+import { createAddress } from '../../api/address'
+
+export default {
+  data() {
+    return {
+      regionVisible: false,
+      defaultRegion: ['110000', '110100', '110101'],
+      typeList: [
+        {
+          name: '是',
+          value: 1
+        },
+        {
+          name: '否',
+          value: 2
+        }
+      ],
+      formData: {
+        name: '',
+        mobile: '',
+        areaText: '',
+        areaCode: '',
+        detail: '',
+        detailAddress: '',
+        type: 1
+      },
+      rules: {
+        name: [
+          {
+            type: 'string',
+            min: 2,
+            max: 12,
+            required: true,
+            message: '请填写收件人名称',
+            trigger: ['blur', 'change']
+          },
+          {
+            message: '收件人名称不能为空',
+            // 触发器可以同时用blur和change
+            trigger: ['change', 'blur']
+          }
+        ],
+        mobile: [
+          {
+            type: 'integer',
+            required: true,
+            message: '请填写手机号',
+            trigger: ['blur', 'change']
+          },
+          {
+            // 自定义验证函数，见上说明
+            validator: (rule, value, callback) => {
+              // 上面有说，返回true表示校验通过，返回false表示不通过
+              // uni.$u.test.mobile()就是返回true或者false的
+              return uni.$u.test.mobile(value)
+            },
+            message: '手机号码不正确',
+            // 触发器可以同时用blur和change
+            trigger: ['change', 'blur']
+          }
+        ],
+        areaText: {
+          type: 'string',
+          required: true,
+          message: '请选择省市地区',
+          trigger: ['blur', 'change']
+        },
+        detailAddress: {
+          type: 'string',
+          min: 6,
+          max: 30,
+          required: true,
+          message: '请填写详细地址',
+          trigger: ['blur', 'change']
+        }
+      }
+    }
+  },
+  onLoad() {},
+  methods: {
+    onConfirm(res) {
+      this.formData.areaText = res.result
+      this.formData.areaCode = res.value[2]
+    },
+    onCancel() {},
+    hideKeyboard() {
+      uni.hideKeyboard()
+    },
+    handleSubmit() {
+      this.$refs.form.validate().then(res => {
+        this.formData.detailAddress = this.formData.areaText + this.formData.detail
+        console.log(this.formData)
+        createAddress(this.formData).then(res => {
+          uni.$u.toast('地址已保存')
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 1000)
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.address-box {
+  width: 690rpx;
+  margin: 0 auto;
+  padding-top: 30rpx;
+}
+</style>

yudao-ui-app/pages/address/edit.vue

@@ -1,17 +0,0 @@
-<template>
-  <view class="container"> </view>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      title: ''
-    }
-  },
-  onLoad() {},
-  methods: {}
-}
-</script>
-
-<style lang="scss" scoped></style>

yudao-ui-app/pages/address/list.vue

@@ -1,17 +1,116 @@
 <template>
-  <view class="container"> </view>
+  <view class="container">
+    <view class="address-list" v-for="(item, index) in addressList" :key="item.id">
+      <view class="address-item" @click="handleClick" @longpress="handleLongPress(item)">
+        <view class="left">
+          <u-avatar :text="item.name ? item.name.slice(0, 1) : 'U'" fontSize="18" randomBgColor></u-avatar>
+        </view>
+        <view class="middle">
+          <view class="info">
+            <view class="name">{{ item.name }}</view>
+            <view class="mobile">{{ item.mobile }}</view>
+            <u-tag class="type" v-if="item.type === 1" text="默认" plain size="mini" type="success"></u-tag>
+          </view>
+          <view class="detail">
+            <u--text :lines="2" size="14" color="#939393" :text="item.detailAddress"></u--text>
+          </view>
+        </view>
+        <navigator class="right" :url="`/pages/address/update?addressId=${item.id}`" open-type="navigate" hover-class="none">
+          <u-icon name="edit-pen" size="28"></u-icon>
+        </navigator>
+      </view>
+    </view>
+
+    <navigator class="fixed-btn-box" url="/pages/address/create" open-type="navigate" hover-class="none">
+      <u-button type="primary" size="large" text="新增地址"></u-button>
+    </navigator>
+    <u-safe-bottom customStyle="background: #ffffff"></u-safe-bottom>
+  </view>
 </template>
 
 <script>
+import { getAddressList, deleteAddress } from '../../api/address'
+
 export default {
   data() {
     return {
-      title: ''
+      addressList: []
     }
   },
   onLoad() {},
-  methods: {}
+  onShow() {
+    this.loadAddressListData()
+  },
+  methods: {
+    loadAddressListData() {
+      getAddressList().then(res => {
+        this.addressList = res.data
+      })
+    },
+    handleLongPress(item) {
+      uni.showModal({
+        title: '提示',
+        content: `删除收件人[${item.name}${item.mobile}]\n地址：${item.detailAddress.slice(0, 5)}......${item.detailAddress.slice(-6)}？`,
+        success: res => {
+          if (res.confirm) {
+            deleteAddress({ id: item.id }).then(res => {
+              uni.$u.toast('地址已删除')
+              this.loadAddressListData();
+            })
+          } else if (res.cancel) {
+            //console.log('用户点击取消')
+          }
+        }
+      })
+    },
+    handleClick(){
+      // TODO 提交订单时选择地址逻辑
+    }
+  }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.address-list {
+  .address-item {
+    padding: 10rpx 0;
+    border-bottom: $custom-border-style;
+    @include flex-space-between;
+    .left {
+      margin: 20rpx;
+    }
+    .middle {
+      flex: 1;
+      margin: 20rpx;
+      @include flex(column);
+      .info {
+        @include flex-left;
+        .name {
+          font-size: 30rpx;
+          font-weight: 700;
+        }
+        .mobile {
+          font-size: 28rpx;
+          margin-left: 15rpx;
+        }
+        .type {
+          margin-left: 15rpx;
+        }
+      }
+      .detail {
+        margin-top: 10rpx;
+      }
+    }
+    .right {
+      margin: 20rpx;
+    }
+  }
+}
+
+.fixed-btn-box {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 750rpx;
+}
+</style>

yudao-ui-app/pages/address/update.vue

@@ -0,0 +1,178 @@
+<template>
+  <view class="container">
+    <view class="address-box">
+      <u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
+        <u-form-item label="收件人名称" prop="name" labelWidth="90" borderBottom ref="item-name">
+          <u-input type="text" maxlength="11" v-model="formData.name" clearable placeholder="请填写收件人名称" border="none"></u-input>
+        </u-form-item>
+
+        <u-form-item label="手机号" prop="mobile" labelWidth="90" borderBottom ref="item-mobile">
+          <u-input type="number" maxlength="11" v-model="formData.mobile" clearable placeholder="请填写手机号" border="none"></u-input>
+        </u-form-item>
+
+        <u-form-item label="省市地区" prop="areaText" labelWidth="90" borderBottom @click=" regionVisible = true; hideKeyboard()" ref="item-areaText">
+          <u--input v-model="formData.areaText" disabled disabledColor="#ffffff" placeholder="请选择省市地区" border="none"></u--input>
+          <u-icon slot="right" name="arrow-right"></u-icon>
+          <w-picker :visible.sync="regionVisible" mode="region" :value="defaultRegion" default-type="value" :hide-area="false" @confirm="onConfirm($event, 'region')" @cancel="onCancel" ref="region"></w-picker>
+        </u-form-item>
+
+        <u-form-item label="详细地址" prop="detail" labelWidth="90" borderBottom ref="item-detail">
+          <u--textarea placeholder="请输入街道门牌号不低于6个字" v-model="formData.detail" count></u--textarea>
+        </u-form-item>
+
+        <u-form-item label="默认地址" prop="type" labelWidth="90" borderBottom ref="item-type">
+          <u-radio-group v-model="formData.type">
+            <u-radio :customStyle="{ marginRight: '16px' }" v-for="(item, index) in typeList" :key="index" :label="item.name" :name="item.value"></u-radio>
+          </u-radio-group>
+        </u-form-item>
+
+        <view class="btn-group">
+          <u-button type="primary" text="更新地址" customStyle="margin-top: 50px" @click="handleSubmit"></u-button>
+        </view>
+      </u--form>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getAddressById, updateAddress } from '../../api/address'
+
+export default {
+  data() {
+    return {
+      id: '',
+      regionVisible: false,
+      defaultRegion: ['110000', '110100', '110101'],
+      typeList: [
+        {
+          name: '是',
+          value: 1
+        },
+        {
+          name: '否',
+          value: 2
+        }
+      ],
+      formData: {
+        id: '',
+        name: '',
+        mobile: '',
+        areaText: '',
+        areaCode: '',
+        detail: '',
+        detailAddress: '',
+        type: 1
+      },
+      rules: {
+        name: [
+          {
+            type: 'string',
+            min: 2,
+            max: 12,
+            required: true,
+            message: '请填写收件人名称',
+            trigger: ['blur', 'change']
+          },
+          {
+            message: '收件人名称不能为空',
+            // 触发器可以同时用blur和change
+            trigger: ['change', 'blur']
+          }
+        ],
+        mobile: [
+          {
+            type: 'integer',
+            required: true,
+            message: '请填写手机号',
+            trigger: ['blur', 'change']
+          },
+          {
+            // 自定义验证函数，见上说明
+            validator: (rule, value, callback) => {
+              // 上面有说，返回true表示校验通过，返回false表示不通过
+              // uni.$u.test.mobile()就是返回true或者false的
+              return uni.$u.test.mobile(value)
+            },
+            message: '手机号码不正确',
+            // 触发器可以同时用blur和change
+            trigger: ['change', 'blur']
+          }
+        ],
+        areaText: {
+          type: 'string',
+          required: true,
+          message: '请选择省市地区',
+          trigger: ['blur', 'change']
+        },
+        detailAddress: {
+          type: 'string',
+          min: 6,
+          max: 30,
+          required: true,
+          message: '请填写详细地址',
+          trigger: ['blur', 'change']
+        }
+      }
+    }
+  },
+  onLoad(e) {
+    if (!e.addressId) {
+      uni.$u.toast('请求参数错误')
+    } else {
+      this.id = e.addressId
+      this.loadAddressData()
+    }
+  },
+  methods: {
+    loadAddressData() {
+      getAddressById({ id: this.id }).then(res => {
+        this.formData = res.data
+        this.initRegionData()
+      })
+    },
+    initRegionData(){
+      //回显 【省市地区】 和 【详细地址】 信息
+      if (this.formData.areaCode) {
+        const areaCode = this.formData.areaCode + ''
+        //通过地区code反解析出【省-市-地区】code
+        this.defaultRegion.splice(0, 3, areaCode.substring(0,2).padEnd(6, '0'), areaCode.substring(0,4).padEnd(6, '0'), areaCode)
+        this.$nextTick(res => {
+          let areaText = this.$refs.region._data.result.result
+          this.formData.areaText = areaText
+          //通过从完整详细地址除去【省-市-地区】得到后半段地址信息
+          this.formData.detail = this.formData.detailAddress.replace(areaText, '')
+          this.$forceUpdate();
+        })
+      }
+    },
+    onConfirm(res) {
+      this.formData.areaText = res.result
+      this.formData.areaCode = res.value[2]
+    },
+    onCancel() {},
+    hideKeyboard() {
+      uni.hideKeyboard()
+    },
+    handleSubmit() {
+      this.$refs.form.validate().then(res => {
+        this.formData.detailAddress = this.formData.areaText + this.formData.detail
+        console.log(this.formData)
+        updateAddress(this.formData).then(res => {
+          uni.$u.toast('地址已更新')
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 1000)
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.address-box {
+  width: 690rpx;
+  margin: 0 auto;
+  padding-top: 30rpx;
+}
+</style>