forked from angelo/web-retail-h5
295 lines
7.4 KiB
Vue
295 lines
7.4 KiB
Vue
|
<!--
|
|||
|
|
* @Descripttion:
|
|||
|
|
* @version:
|
|||
|
|
* @Author: 王三华
|
|||
|
|
* @Date: 2023-05-18 14:42:53
|
|||
|
|
-->
|
|||
|
|
<template>
|
|||
|
|
<view class="main">
|
|||
|
|
<view class="contents">
|
|||
|
|
<u-form :model="addressForm"
|
|||
|
|
labelWidth="auto"
|
|||
|
|
ref="uForm">
|
|||
|
|
<view class="view-class">
|
|||
|
|
<u-form-item :label="$t('MY_ORD_10')"
|
|||
|
|
label-width="100px"
|
|||
|
|
prop="accountName">
|
|||
|
|
<u-input v-model.trim="addressForm.accountName"
|
|||
|
|
placeholder-class="place-class"
|
|||
|
|
class="border-color"
|
|||
|
|
placeholder="请输入收货人姓名" />
|
|||
|
|
|
|||
|
|
</u-form-item>
|
|||
|
|
</view>
|
|||
|
|
<view class="view-class">
|
|||
|
|
<u-form-item :label="$t('w_0052')"
|
|||
|
|
label-width="100px"
|
|||
|
|
prop="phone">
|
|||
|
|
<u-input v-model.trim="addressForm.phone"
|
|||
|
|
placeholder-class="place-class"
|
|||
|
|
maxlength="20"
|
|||
|
|
type="number"
|
|||
|
|
class="border-color"
|
|||
|
|
placeholder="请输入联系方式" />
|
|||
|
|
|
|||
|
|
</u-form-item>
|
|||
|
|
</view>
|
|||
|
|
<view class="view-class"
|
|||
|
|
@click="getDiqu">
|
|||
|
|
<u-form-item :label="$t('w_0068')"
|
|||
|
|
label-width="100px"
|
|||
|
|
prop="address">
|
|||
|
|
<view v-if="address"
|
|||
|
|
style="font-size: 28rpx;color: #333;margin-left: 20rpx;">{{address}}</view>
|
|||
|
|
<view style="margin-left: 20rpx;font-size: 28rpx;color: rgb(192, 196, 204);"
|
|||
|
|
v-else>请选择收货地址</view>
|
|||
|
|
</u-form-item>
|
|||
|
|
<view class="drop">
|
|||
|
|
<image src="@/static/images/drop.png"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="view-class">
|
|||
|
|
<u-form-item :label="$t('S_C_27')"
|
|||
|
|
class="label-style"
|
|||
|
|
label-width="100px"
|
|||
|
|
prop="address">
|
|||
|
|
<u-textarea v-model.trim="addressForm.address"
|
|||
|
|
placeholder-class="place-class"
|
|||
|
|
class="border-color"
|
|||
|
|
maxlength="200"
|
|||
|
|
:placeholder="$t('w_0070')" />
|
|||
|
|
|
|||
|
|
</u-form-item>
|
|||
|
|
</view>
|
|||
|
|
</u-form>
|
|||
|
|
</view>
|
|||
|
|
<v-address ref="address"
|
|||
|
|
@getAddressData="AddressData"
|
|||
|
|
:defaultCode="defaultCode"
|
|||
|
|
@addressData="addressData"></v-address>
|
|||
|
|
<u-button type="success"
|
|||
|
|
shape="circle"
|
|||
|
|
class="btn"
|
|||
|
|
@click="submit">{{$t('w_0035')}}</u-button>
|
|||
|
|
<view style="height: 20rpx;"></view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as api from '@/config/login.js'
|
|||
|
|
import { setToken } from '@/config/auth.js'
|
|||
|
|
import address from '@/components/address.vue'
|
|||
|
|
import store from '@/store'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
userInfo: '',
|
|||
|
|
check: false,
|
|||
|
|
address: '',
|
|||
|
|
defaultCode: [],
|
|||
|
|
urls: '/member/api/maker-space/update-file',
|
|||
|
|
addressForm: {
|
|||
|
|
accountName: '',
|
|||
|
|
phone: '',
|
|||
|
|
pkProvince: '',
|
|||
|
|
pkCity: '',
|
|||
|
|
pkCounty: '',
|
|||
|
|
address: '',
|
|||
|
|
pkId: '',
|
|||
|
|
},
|
|||
|
|
rules: {
|
|||
|
|
accountName: [
|
|||
|
|
{
|
|||
|
|
// 必填项
|
|||
|
|
required: true,
|
|||
|
|
// 提示内容（会出现在u-form-item内的底部）
|
|||
|
|
message: '姓名不能为空',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
address: [
|
|||
|
|
{
|
|||
|
|
// 必填项
|
|||
|
|
required: true,
|
|||
|
|
// 提示内容（会出现在u-form-item内的底部）
|
|||
|
|
message: '详细地址不能为空',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
pkProvince: [
|
|||
|
|
{
|
|||
|
|
// 必填项
|
|||
|
|
required: true,
|
|||
|
|
// 提示内容（会出现在u-form-item内的底部）
|
|||
|
|
message: '地址不能为空',
|
|||
|
|
|
|||
|
|
trigger: ['change'],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
phone: [
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
message: '请输入手机号',
|
|||
|
|
trigger: ['blur'],
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// validator: (rule, value, callback) => {
|
|||
|
|
// return this.$u.test.mobile(value);
|
|||
|
|
// },
|
|||
|
|
// message: "手机号格式不正确",
|
|||
|
|
// trigger: ["blur"],
|
|||
|
|
// },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.addressForm = JSON.parse(option.obj)
|
|||
|
|
let that =this
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
that.defaultCode = [
|
|||
|
|
that.addressForm.pkProvince,
|
|||
|
|
that.addressForm.pkCity,
|
|||
|
|
that.addressForm.pkCounty || '',
|
|||
|
|
]
|
|||
|
|
},200)
|
|||
|
|
this.userInfo = uni.getStorageSync('User')
|
|||
|
|
},
|
|||
|
|
onReady() {
|
|||
|
|
this.$refs.uForm.setRules(this.rules)
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
'v-address': address,
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
AddressData(name) {
|
|||
|
|
this.address = name
|
|||
|
|
},
|
|||
|
|
submit() {
|
|||
|
|
this.$refs.uForm.validate().then((res) => {
|
|||
|
|
api.saveGiftAddress(this.addressForm).then((res) => {
|
|||
|
|
if (res.code == '200') {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none',
|
|||
|
|
success() {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack(1)
|
|||
|
|
}, 2000)
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getDiqu() {
|
|||
|
|
this.$refs.address.setShow()
|
|||
|
|
},
|
|||
|
|
addressData(diqu, obj) {
|
|||
|
|
this.address = diqu
|
|||
|
|
this.addressForm.pkProvince = obj.province
|
|||
|
|
this.addressForm.pkCity = obj.city
|
|||
|
|
this.addressForm.pkCounty = obj.county
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
// this.getPostAge()
|
|||
|
|
// this.queryAdressPostage()
|
|||
|
|
},
|
|||
|
|
getAddressData(e) {
|
|||
|
|
console.error(e)
|
|||
|
|
},
|
|||
|
|
// getAddress(id){
|
|||
|
|
// api.getAddress(id).then(res => {
|
|||
|
|
// if (res) {
|
|||
|
|
// this.addressForm={
|
|||
|
|
// accountName: res.data.accountName,
|
|||
|
|
// phone: res.data.phone,
|
|||
|
|
// pkProvince: res.data.pkProvince,
|
|||
|
|
// pkCity: res.data.pkCity,
|
|||
|
|
// pkCounty: res.data.pkCounty || '',
|
|||
|
|
// pkId: res.data.pkId,
|
|||
|
|
// address: res.data.address,
|
|||
|
|
// }
|
|||
|
|
// this.defaultCode = [
|
|||
|
|
// res.data.pkProvince,
|
|||
|
|
// res.data.pkCity,
|
|||
|
|
// res.data.pkCounty || '',
|
|||
|
|
// ]
|
|||
|
|
// }
|
|||
|
|
// }).catch(error => {
|
|||
|
|
// reject(error)
|
|||
|
|
// })
|
|||
|
|
// },
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
/deep/ .u-form-item__body__right__message {
|
|||
|
|
margin-left: 215rpx !important;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
.drop {
|
|||
|
|
image {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.check {
|
|||
|
|
position: relative;
|
|||
|
|
view {
|
|||
|
|
width: 36rpx;
|
|||
|
|
height: 36rpx;
|
|||
|
|
border: 1rpx solid #dddddd;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-top: 25rpx;
|
|||
|
|
}
|
|||
|
|
image {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0rpx;
|
|||
|
|
top: 25rpx;
|
|||
|
|
// margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.flex-s {
|
|||
|
|
justify-content: space-between;
|
|||
|
|
display: flex;
|
|||
|
|
height: 90rpx;
|
|||
|
|
line-height: 90rpx;
|
|||
|
|
}
|
|||
|
|
.label-style {
|
|||
|
|
display: block !important;
|
|||
|
|
}
|
|||
|
|
/deep/ .label-style .u-form-item__body__left {
|
|||
|
|
display: block !important;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
.uni-textarea {
|
|||
|
|
height: 100rpx;
|
|||
|
|
}
|
|||
|
|
.view-class {
|
|||
|
|
border-bottom: 1rpx solid #eee;
|
|||
|
|
margin: 0 30rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.border-color {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
page {
|
|||
|
|
background-color: #f2f2f2;
|
|||
|
|
}
|
|||
|
|
.contents {
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
.btn {
|
|||
|
|
background-color: #fb3024;
|
|||
|
|
border: none;
|
|||
|
|
height: 92rpx;
|
|||
|
|
line-height: 92rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
margin: 40rpx auto;
|
|||
|
|
width: 690rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|