|
@@ -0,0 +1,172 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="container">
|
|
|
|
+ <uni-forms class="form" :rules="rules" ref="form" :modelValue="form" label-width="80px" label-align="right">
|
|
|
|
+ <uni-forms-item label="姓名" required name="name">
|
|
|
|
+ <uni-easyinput v-model="form.name" placeholder="请输入姓名" />
|
|
|
|
+ </uni-forms-item>
|
|
|
|
+ <uni-forms-item label="手机号" required name="tel">
|
|
|
|
+ <uni-easyinput v-model="form.tel" placeholder="请输手机号" />
|
|
|
|
+ </uni-forms-item>
|
|
|
|
+ <uni-forms-item label="选择地址" required name="areaCode">
|
|
|
|
+ <picker mode="region" @change="onchange">
|
|
|
|
+ <!-- <uni-easyinput v-model="form.name" placeholder="请输入姓名" /> -->
|
|
|
|
+ <view class="inputBox" v-if="form.areaCode">{{form.province}}/{{form.city}}/{{form.county}}</view>
|
|
|
|
+ <view class="inputBox" v-else>
|
|
|
|
+ 点击选择地址
|
|
|
|
+ </view>
|
|
|
|
+ </picker>
|
|
|
|
+ </uni-forms-item>
|
|
|
|
+ <uni-forms-item label="详细地址" required name="addressDetail">
|
|
|
|
+ <uni-easyinput type="textarea" v-model="form.addressDetail" placeholder="请输详细地址" />
|
|
|
|
+ </uni-forms-item>
|
|
|
|
+ <uni-forms-item label="设为默认地址" required name="isDefault">
|
|
|
|
+ <switch :checked="form.isDefault == 1" @change="switchChange" style="transform:scale(0.7)" />
|
|
|
|
+ </uni-forms-item>
|
|
|
|
+ </uni-forms>
|
|
|
|
+ <view class="bottom">
|
|
|
|
+ <button class="m_button" type="default" @click="save">保存</button>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import {
|
|
|
|
+ addressSaveApi,
|
|
|
|
+ addressDetailApi
|
|
|
|
+ } from "@/api/address.js"
|
|
|
|
+ export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ address: [],
|
|
|
|
+ form: {
|
|
|
|
+ "id": null,
|
|
|
|
+ "areaCode": null,
|
|
|
|
+ "name": null, //姓名
|
|
|
|
+ "province": null, //省
|
|
|
|
+ "city": null, //市
|
|
|
|
+ "county": null, //县区
|
|
|
|
+ "addressDetail": null, //详细地址
|
|
|
|
+ "tel": null, //电话
|
|
|
|
+ "isDefault": 0,
|
|
|
|
+ },
|
|
|
|
+ rules: {
|
|
|
|
+ name: {
|
|
|
|
+ rules: [{
|
|
|
|
+ required: true,
|
|
|
|
+ errorMessage: '姓名不能为空'
|
|
|
|
+ }]
|
|
|
|
+ },
|
|
|
|
+ tel: {
|
|
|
|
+ rules: [{
|
|
|
|
+ required: true,
|
|
|
|
+ errorMessage: '手机号不能为空'
|
|
|
|
+ }]
|
|
|
|
+ },
|
|
|
|
+ areaCode: {
|
|
|
|
+ rules: [{
|
|
|
|
+ required: true,
|
|
|
|
+ errorMessage: '请选择地址'
|
|
|
|
+ }]
|
|
|
|
+ },
|
|
|
|
+ addressDetail: {
|
|
|
|
+ rules: [{
|
|
|
|
+ required: true,
|
|
|
|
+ errorMessage: '详细地址不能为空'
|
|
|
|
+ }]
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onLoad(option) {
|
|
|
|
+ console.log(option, 'option')
|
|
|
|
+ if (option.id) {
|
|
|
|
+ let params = {
|
|
|
|
+ id: option.id
|
|
|
|
+ }
|
|
|
|
+ addressDetailApi(params).then(res => {
|
|
|
|
+ console.log(res, 'res')
|
|
|
|
+ this.form = {
|
|
|
|
+ ...res.data
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onShow() {},
|
|
|
|
+ methods: {
|
|
|
|
+ onchange(value) {
|
|
|
|
+ console.log(value, 'value')
|
|
|
|
+ this.form.areaCode = value.detail.code[2]
|
|
|
|
+ this.form.province = value.detail.value[0]
|
|
|
|
+
|
|
|
|
+ if (value.detail.value[0] == value.detail.value[1]) {
|
|
|
|
+ this.form.city = "市辖区"
|
|
|
|
+ } else {
|
|
|
|
+ this.form.city = value.detail.value[1]
|
|
|
|
+ }
|
|
|
|
+ this.form.county = value.detail.value[2]
|
|
|
|
+ },
|
|
|
|
+ switchChange(value) {
|
|
|
|
+ console.log(value, 'value')
|
|
|
|
+ if (value.detail.value) {
|
|
|
|
+ this.form.isDefault = 1
|
|
|
|
+ } else {
|
|
|
|
+ this.form.isDefault = 0
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ save() {
|
|
|
|
+ let _this = this
|
|
|
|
+ console.log(this.form, 'this.form')
|
|
|
|
+ this.$refs.form.validate().then(val => {
|
|
|
|
+ addressSaveApi(this.form).then(res => {
|
|
|
|
+ console.log(res, '提交新增地址')
|
|
|
|
+ wx.navigateTo({
|
|
|
|
+ url: "/pages/addressManage/addressManage"
|
|
|
|
+ })
|
|
|
|
+ wx.showToast({
|
|
|
|
+ title: '保存成功'
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ }).catch(err => {
|
|
|
|
+ console.log('err', err);
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+ .container {
|
|
|
|
+ background: #fff;
|
|
|
|
+ padding: 20px;
|
|
|
|
+
|
|
|
|
+ .form {
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .inputBox {
|
|
|
|
+ border: 1px solid #F0F0F0;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ height: 35px;
|
|
|
|
+ line-height: 35px;
|
|
|
|
+ padding-left: 10px;
|
|
|
|
+ color: #333;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bottom {
|
|
|
|
+ position: fixed;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ padding: 20px 0;
|
|
|
|
+ text-align: center;
|
|
|
|
+ width: calc(100% - 40px);
|
|
|
|
+
|
|
|
|
+ .m_button {
|
|
|
|
+ height: 36px;
|
|
|
|
+ width: 40vw;
|
|
|
|
+ line-height: 36px;
|
|
|
|
+ border-radius: 18px;
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|