You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
293 lines
8.6 KiB
293 lines
8.6 KiB
<template> |
|
<view class="addAddress absolute"> |
|
<view class="header"> |
|
<cu-custom :isBack="true" :isCenter="true"> |
|
<block slot="backText"> |
|
<view class="backImg"> |
|
<image src="@/static/images/back-btn.png" mode=""></image> |
|
</view> |
|
</block> |
|
<block slot="content"> |
|
<view class="tab-title">新增收货地址</view> |
|
</block> |
|
</cu-custom> |
|
</view> |
|
|
|
<view class="list"> |
|
<view class="item acea-row row-between-wrapper"> |
|
<view class="name">姓名</view> |
|
<input type="text" placeholder="请输入姓名" v-model="userAddress.realName" required /> |
|
</view> |
|
<view class="item acea-row row-between-wrapper"> |
|
<view class="name">联系电话</view> |
|
<input type="text" placeholder="请输入联系电话" v-model="userAddress.phone" required /> |
|
</view> |
|
<view class="item acea-row row-between-wrapper"> |
|
<view class="name">所在地区</view> |
|
<view class="picker"> |
|
<!-- <view class="picker acea-row row-between-wrapper select-value form-control"> --> |
|
<!-- <view class="address"> --> |
|
<CitySelect ref="cityselect" :defaultValue="defaultAddress" @callback="result" :items="district"></CitySelect> |
|
<!-- </view> --> |
|
<!-- <view class="iconfont icon-dizhi font-color-red"></view> --> |
|
</view> |
|
</view> |
|
<view class="item acea-row"> |
|
<view class="name" style="margin-top: 12rpx;">详细地址</view> |
|
<textarea v-model="userAddress.detail" placeholder="如街道、社区、小区、门牌号" placeholder-style="color: #999999;font-weight:450;line-height:38rpx;" required /> |
|
<!-- <input type="text" placeholder="如街道、社区、小区、门牌号" v-model="userAddress.detail" required /> --> |
|
</view> |
|
</view> |
|
<view class="default acea-row row-middle"> |
|
<view class="acea-row row-between-wrapper"> |
|
<text>地址标签</text> |
|
<view class="tag-box acea-row"> |
|
<view :class="tagType == '1'?'on':''" @click="changeTag('1')">家</view> |
|
<view :class="tagType == '2'?'on':''" @click="changeTag('2')">学校</view> |
|
<view :class="tagType == '3'?'on':''" @click="changeTag('3')">公司</view> |
|
</view> |
|
</view> |
|
<!-- <view class="select-btn"> --> |
|
<view class="checkbox-wrapper acea-row row-between-wrapper"> |
|
<text class="def">设为默认</text> |
|
<checkbox-group @change="ChangeIsDefault"> |
|
<!-- <label class="well-check"> --> |
|
<checkbox :value="userAddress.isDefault == 1 ? 'checked' : ''" :checked="userAddress.isDefault ? true : false"></checkbox> |
|
<!-- </label> --> |
|
</checkbox-group> |
|
</view> |
|
<!-- </view> --> |
|
</view> |
|
|
|
<view class="keepBnt" @tap="submit">立即保存</view> |
|
<view class="keepBnt" style="background:#D8D8D8;color:#999999;" @click="cancel">取消</view> |
|
<!-- <view class="wechatAddress" v-if="isWechat && !id" @click="getAddress">导入微信地址</view> --> |
|
</view> |
|
</template> |
|
|
|
<script type="text/babel"> |
|
import CitySelect from '@/components/CitySelect' |
|
import { getAddress, postAddress, getCity } from '@/api/user' |
|
import attrs, { required, chs_phone } from '@/utils/validate' |
|
import { validatorDefaultCatch } from '@/utils/dialog' |
|
// import { openAddress } from "@/libs/wechat"; |
|
import { isWeixin } from '@/utils' |
|
|
|
export default { |
|
name: 'AddAddress', |
|
components: { |
|
CitySelect, |
|
}, |
|
data() { |
|
return { |
|
district: [], |
|
id: 0, |
|
userAddress: { isDefault: 0 }, |
|
address: {}, |
|
isWechat: isWeixin(), |
|
defaultAddress: {}, |
|
addressText: '', |
|
tagType: '', |
|
} |
|
}, |
|
mounted: function() { |
|
let id = this.$yroute.query.id |
|
this.id = id |
|
this.getUserAddress() |
|
this.getCityList() |
|
}, |
|
watch: { |
|
addressText(nextModel2) { |
|
console.log(nextModel2, 8585858585) |
|
}, |
|
}, |
|
methods: { |
|
getCityList: function() { |
|
let that = this |
|
getCity() |
|
.then(res => { |
|
that.district = res.data |
|
that.ready = true |
|
}) |
|
.catch(err => { |
|
uni.showToast({ |
|
title: err.msg, |
|
icon: 'none', |
|
duration: 2000, |
|
}) |
|
}) |
|
}, |
|
getUserAddress: function() { |
|
if (!this.id) return false |
|
let that = this |
|
getAddress(that.id).then(res => { |
|
that.userAddress = res.data |
|
that.defaultAddress = { |
|
province: { |
|
n: res.data.province, |
|
}, |
|
city: { |
|
n: res.data.city, |
|
}, |
|
district: { |
|
n: res.data.district, |
|
}, |
|
} |
|
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 |
|
}) |
|
}, |
|
changeTag(type) { |
|
if(this.tagType == type) { |
|
this.tagType = ''; |
|
} else { |
|
this.tagType = type; |
|
} |
|
}, |
|
getAddress() {}, |
|
async submit() { |
|
let name = this.userAddress.realName, |
|
phone = this.userAddress.phone, |
|
addressText = this.addressText, |
|
detail = this.userAddress.detail, |
|
isDefault = this.userAddress.isDefault |
|
try { |
|
await this.$validator({ |
|
name: [required(required.message('姓名')), attrs.range([2, 16], attrs.range.message('姓名'))], |
|
phone: [required(required.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(function() { |
|
if (that.id) { |
|
uni.showToast({ |
|
title: '修改成功', |
|
icon: 'none', |
|
duration: 2000, |
|
}) |
|
} else { |
|
uni.showToast({ |
|
title: '操作成功', |
|
icon: 'none', |
|
duration: 2000, |
|
}) |
|
// uni.showToast({ |
|
// title: "已取消绑定", |
|
// icon: "none", |
|
// duration: 2000 |
|
// }); |
|
// that.$yrouter.replace({ |
|
// path: "/pages/user/PersonalData/index" |
|
// }); |
|
} |
|
that.$yrouter.back() |
|
}) |
|
} catch (err) { |
|
uni.showToast({ |
|
title: err.msg || err.response.data.msg || err.response.data.message, |
|
icon: 'none', |
|
duration: 2000, |
|
}) |
|
} |
|
}, |
|
cancel() { |
|
this.$yrouter.back(); |
|
}, |
|
ChangeIsDefault: function() { |
|
this.userAddress.isDefault = !this.userAddress.isDefault |
|
}, |
|
result(values) { |
|
console.log(this) |
|
console.log(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; |
|
}, |
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.header { |
|
.tab-title { |
|
font-size: 32rpx; |
|
font-family: PingFang SC; |
|
font-weight: 600; |
|
color: #2DB5AE; |
|
line-height: 42rpx; |
|
} |
|
.backImg { |
|
width: 88rpx; |
|
height: 62rpx; |
|
padding-left: 26rpx; |
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
|
|
.address { |
|
text { |
|
width: 100%; |
|
display: block; |
|
} |
|
} |
|
|
|
.addAddress .list .item textarea { |
|
width: 506rpx; |
|
height: 144rpx; |
|
font-size: 26rpx; |
|
line-height: 38rpx; |
|
background: #F1F1F1; |
|
border-radius: 16rpx; |
|
padding: 12rpx; |
|
} |
|
|
|
.addAddress .tag-box { |
|
width: 530rpx; |
|
padding-left: 26rpx; |
|
view { |
|
padding: 0rpx 24rpx; |
|
height: 62rpx; |
|
background: #F1F1F1; |
|
border-radius: 16rpx; |
|
font-size: 26rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #999999; |
|
line-height: 62rpx; |
|
margin-right: 20rpx; |
|
} |
|
.on { |
|
background: #2DB5AE; |
|
color: #FFFFFF; |
|
} |
|
} |
|
.addAddress .default .checkbox-wrapper { |
|
padding-top: 30rpx; |
|
width: 100%; |
|
} |
|
</style>
|
|
|