Task：礼品赠送/送礼、分享。收礼
This commit is contained in:
modendeveloper
@@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<u-popup :show="show" mode="center" round="16">
|
||||
<u-popup :show="show" @close="close" mode="center" round="16" closeable>
|
||||
<view class="dialog-container">
|
||||
<view class="dialog-title">填写收货地址</view>
|
||||
|
||||
<u-form :model="form" ref="uForm" labelPosition="left">
|
||||
<u-form-item label="姓名" prop="name" borderBottom>
|
||||
<u-input v-model="form.name" placeholder="请输入姓名" border="none"/>
|
||||
<u-form :model="form" ref="uForm" labelPosition="left" labelWidth="100">
|
||||
<u-form-item label="姓名:">
|
||||
<u-input v-model="userAddress.realName" placeholder="请输入姓名" required border="none"/>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="联系电话" prop="phone" borderBottom>
|
||||
<u-input v-model="form.phone" placeholder="请输入联系电话" border="none"/>
|
||||
<u-form-item label="联系电话:" >
|
||||
<u-input v-model="userAddress.phone" placeholder="请输入联系电话" required border="none"/>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="所在地区" prop="region" borderBottom>
|
||||
<u-form-item label="所在地区:" >
|
||||
<CitySelect
|
||||
ref="cityselect"
|
||||
:defaultValue="addressText"
|
||||
@@ -21,11 +21,35 @@
|
||||
></CitySelect>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="详细地址" prop="address" borderBottom>
|
||||
<u-input v-model="form.address" placeholder="请输入详细地址" border="none" />
|
||||
<u-form-item label="详细地址:">
|
||||
<u-input v-model="userAddress.detail" placeholder="请输入详细地址" required border="none" />
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
|
||||
<view class="address-analysis-wrap">
|
||||
<view class="inp">
|
||||
<textarea
|
||||
v-model.trim="addressInput"
|
||||
placeholder="请粘贴收件人手机号、姓名、收货地址并用空格区分，系统将自动识别地址信息"
|
||||
placeholder-style="font-size:24rpx;color:#C2C5CC;"
|
||||
class="inp-textarea"
|
||||
/>
|
||||
</view>
|
||||
<view class="btn-wrap">
|
||||
<view
|
||||
class="txt"
|
||||
@click="clearHandle"
|
||||
>
|
||||
清空
|
||||
</view>
|
||||
<view
|
||||
:class="addressInput ? '' : 'disable'"
|
||||
class="btn"
|
||||
@click="distinguishHandle"
|
||||
>
|
||||
识别
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dialog-footer">
|
||||
<u-button type="primary" color="#C52733" shape="circle" @click="handleSave">立即保存</u-button>
|
||||
</view>
|
||||
@@ -35,6 +59,9 @@
|
||||
|
||||
<script>
|
||||
import CitySelect from '@/components/CitySelect'
|
||||
import config from '@/utils/mapConfig'
|
||||
import attrs, { chs_extphone, required } from '@/utils/validate'
|
||||
import { validatorDefaultCatch } from '@/utils/dialog'
|
||||
import { getAddress, getCity, postAddress, analysisAddress } from '@/api/user'
|
||||
import { isWeixin } from '@/utils'
|
||||
export default {
|
||||
@@ -44,7 +71,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
district: [],
|
||||
id: 0,
|
||||
id: null,
|
||||
// 是否选择地址模式：0-不是，1-来源订单创建页面，2-来源购物车
|
||||
choosMode: 0,
|
||||
userAddress: {
|
||||
@@ -83,26 +110,124 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules);
|
||||
},
|
||||
methods: {
|
||||
clearHandle() {
|
||||
if (!this.addressInput) return
|
||||
this.addressInput = ''
|
||||
},
|
||||
// 识别
|
||||
distinguishHandle() {
|
||||
if (!this.addressInput) return
|
||||
uni.showLoading()
|
||||
analysisAddress({
|
||||
content: this.addressInput
|
||||
}).then((res) => {
|
||||
uni.hideLoading()
|
||||
console.log(res)
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.address = {
|
||||
province: data.province || '',
|
||||
city: data.city || '',
|
||||
district: data.district || '',
|
||||
city_id: data.cityId
|
||||
}
|
||||
this.userAddress.realName = data.realName || ''
|
||||
this.userAddress.phone = data.phone || ''
|
||||
this.userAddress.detail = data.detail || ''
|
||||
this.addressText = `${this.address.province} ${this.address.city} ${this.address.district}`
|
||||
}
|
||||
}).catch((err) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: err.msg + '',
|
||||
icon: 'none',
|
||||
mask: false,
|
||||
duration: 1500
|
||||
})
|
||||
})
|
||||
},
|
||||
open() {
|
||||
this.show = true
|
||||
this.getUserAddress()
|
||||
this.getCityList()
|
||||
},
|
||||
result() {
|
||||
|
||||
close() {
|
||||
this.show = false
|
||||
},
|
||||
result(values) {
|
||||
this.address = {
|
||||
province: values.province.name || "",
|
||||
city: values.city.name || "",
|
||||
district: values.district.name || "",
|
||||
city_id: values.city.id
|
||||
};
|
||||
this.addressText = `${this.address.province} ${this.address.city} ${this.address.district}`;
|
||||
// this.addressText =
|
||||
// this.address.province + this.address.city + this.address.district;
|
||||
},
|
||||
handleRegionConfirm(e) {
|
||||
this.form.region = e.province.label + ' ' + e.city.label + ' ' + e.area.label
|
||||
},
|
||||
handleSave() {
|
||||
this.$refs.uForm.validate(valid => {
|
||||
if (valid) {
|
||||
// 这里处理保存逻辑
|
||||
this.$emit('save', this.form)
|
||||
this.show = false
|
||||
}
|
||||
})
|
||||
async handleSave() {
|
||||
const name = this.userAddress.realName || ''
|
||||
const phone = this.userAddress.phone || ''
|
||||
const addressText = this.addressText || ''
|
||||
const detail = this.userAddress.detail || ''
|
||||
const isDefault = this.userAddress.isDefault
|
||||
if (phone.length < 11) {
|
||||
uni.showToast({
|
||||
title: "请输入11位手机号码",
|
||||
icon: "none"
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await this.$validator({
|
||||
name: [
|
||||
required(required.message("姓名")),
|
||||
attrs.range([2, 16], attrs.range.message("姓名"))
|
||||
],
|
||||
phone: [
|
||||
required(required.message("联系电话")),
|
||||
chs_extphone(chs_extphone.message())
|
||||
//chs_phone(chs_phone.message())
|
||||
],
|
||||
addressText: [required("请选择地址")],
|
||||
detail: [required(required.message("具体地址"))]
|
||||
}).validate({name, phone, addressText, detail});
|
||||
} catch (e) {
|
||||
return validatorDefaultCatch(e);
|
||||
}
|
||||
try {
|
||||
let that = this,
|
||||
data = {
|
||||
id: that.id,
|
||||
real_name: name,
|
||||
phone: phone,
|
||||
address: this.address,
|
||||
detail: detail,
|
||||
is_default: isDefault ? true : false,
|
||||
post_code: ""
|
||||
};
|
||||
postAddress(data).then((res) => {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
this.$emit('save', res.data.id)
|
||||
});
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: err.msg || err.response.data.msg || err.response.data.message,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
//获取当前定位地址
|
||||
getCurAddress() {
|
||||
@@ -235,38 +360,48 @@ export default {
|
||||
that.$dialog.error(err.msg);
|
||||
});
|
||||
},
|
||||
getUserAddress: function () {
|
||||
if (!this.id) return false;
|
||||
let that = this;
|
||||
getAddress(that.id).then(res => {
|
||||
that.userAddress = res.data;
|
||||
that.addressText = res.data.province + " " + res.data.city + " " + res.data.district;
|
||||
that.address.province = res.data.province;
|
||||
that.address.city = res.data.city;
|
||||
that.address.district = res.data.district;
|
||||
|
||||
if (that.district.length > 0) {
|
||||
//设置city_id
|
||||
var pIdx = that.getIndex(that.address.province, that.district);
|
||||
if (pIdx > -1) {
|
||||
var citys = that.district[pIdx].c;
|
||||
var cIdx = that.getIndex(that.address.city, citys);
|
||||
if (cIdx > -1) {
|
||||
var city = citys[cIdx];
|
||||
that.address.city_id = city.v;
|
||||
console.log('city_id:' + city.v);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getAddress() {
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.address {
|
||||
text {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.address-analysis-wrap {
|
||||
padding: 20rpx;
|
||||
margin: 20rpx;
|
||||
border-radius: 15rpx;
|
||||
background-color: #fff;
|
||||
font-size: 24rpx;
|
||||
.inp-textarea {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
}
|
||||
.btn-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin: 20rpx 0 0 0;
|
||||
.txt {
|
||||
color: #999;
|
||||
}
|
||||
.btn {
|
||||
padding: 12rpx 25rpx;
|
||||
margin: 0 0 0 20rpx;
|
||||
border-radius: 8rpx;
|
||||
color: #fff;
|
||||
background-color: #FE5261;
|
||||
&.disable {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog-container {
|
||||
width: 600rpx;
|
||||
padding: 40rpx;
|
||||
|
||||
Reference in New Issue
Block a user