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.
274 lines
7.1 KiB
274 lines
7.1 KiB
<template>
|
|
<view class="wrapper">
|
|
<view>
|
|
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed :title="titleText"></uni-nav-bar>
|
|
</view>
|
|
<view class="qn-form-item">
|
|
<view class="label"><text class="label__text">收货人</text></view>
|
|
<view class="value">
|
|
<qn-easyinput
|
|
:maxlength="20"
|
|
@blur="showCompany"
|
|
v-model="form.receiver"
|
|
:inputBorder="false"
|
|
text="left"
|
|
placeholder="请填写收货人姓名"
|
|
></qn-easyinput>
|
|
</view>
|
|
</view>
|
|
<view class="qn-form-item">
|
|
<view class="label"><text class="label__text">手机号</text></view>
|
|
<view class="value">
|
|
<qn-easyinput
|
|
:maxlength="11"
|
|
type="number"
|
|
v-model="form.receiverMobile"
|
|
:inputBorder="false"
|
|
text="left"
|
|
placeholder="请填写收货人手机号"
|
|
></qn-easyinput>
|
|
</view>
|
|
</view>
|
|
<view class="qn-form-item">
|
|
<view class="label"><text class="label__text">所在地区</text></view>
|
|
<view class="value">
|
|
<qn-data-picker
|
|
:readonly="hasSelected"
|
|
text="left"
|
|
:border="false"
|
|
class="qn-picker"
|
|
placeholder="点击选择"
|
|
popup-title="请选择城市"
|
|
:map="{ text: 'name', value: 'id' }"
|
|
@change="onAreaChange"
|
|
:clear-icon="true"
|
|
:localdata="items"
|
|
>
|
|
<text v-if="form.districtId">{{ `${form.provinceName || ''}/${form.cityName || ''}/${form.districtName || ''}/${form.streetName || ''}` }}</text>
|
|
</qn-data-picker>
|
|
</view>
|
|
</view>
|
|
<view class="qn-form-item">
|
|
<view class="label"><text class="label__text">详细地址</text></view>
|
|
<view class="value">
|
|
<qn-easyinput
|
|
:maxlength="120"
|
|
@blur="showCompany"
|
|
v-model="form.detail"
|
|
:inputBorder="false"
|
|
text="left"
|
|
placeholder="街道/门牌号/小区/乡镇/村等"
|
|
></qn-easyinput>
|
|
</view>
|
|
</view>
|
|
<uGap></uGap>
|
|
<view class="default-address">
|
|
<view>
|
|
<view class="title">设置为默认地址</view>
|
|
<view class="tip">提醒：每次下单会默认使用该地址</view>
|
|
</view>
|
|
<view><switch :checked="form.isDefault == 1" @change="switchChange" style="transform: scale(0.8)" /></view>
|
|
</view>
|
|
<qn-footer fixed height="120rpx">
|
|
<view class="button-area">
|
|
<view class="button button__submit" @click="addTap"><text class="text" style="color: white">保存</text></view>
|
|
</view>
|
|
</qn-footer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uGap from '@/components/u-gap/u-gap.vue'
|
|
import { getArea } from '@/apis/commonApi.js'
|
|
import { back } from '@/utils/hook.js'
|
|
import qnFooter from '@/components/qn-footer/qn-footer.vue'
|
|
import qnDataPicker from '@/components/qn-data-picker/qn-data-picker.vue'
|
|
import { createAddress, getAddressDetail } from '@/apis/addressManageApi.js'
|
|
export default {
|
|
components: { uGap, qnFooter, qnDataPicker },
|
|
data() {
|
|
return {
|
|
form: {
|
|
cityId: '',
|
|
cityName: '',
|
|
detail: '',
|
|
districtId: '',
|
|
districtName: '',
|
|
enterpriseId: this.$store.state.companyInfo.id,
|
|
id: '',
|
|
isDefault: '0',
|
|
provinceId: '',
|
|
provinceName: '',
|
|
receiver: '',
|
|
receiverMobile: '',
|
|
streetId: '',
|
|
streetName: ''
|
|
},
|
|
hasSelected: false,
|
|
items: [],
|
|
id: null
|
|
}
|
|
},
|
|
mounted() {
|
|
getArea().then((res) => {
|
|
if (res) {
|
|
this.items = res
|
|
}
|
|
})
|
|
},
|
|
onLoad(option) {
|
|
this.titleText = option.type
|
|
if (option.id) {
|
|
this.id = option.id
|
|
this.getAddressDetail()
|
|
}
|
|
},
|
|
methods: {
|
|
back,
|
|
// 通过id查询收货地址
|
|
getAddressDetail() {
|
|
getAddressDetail({ id: this.id }).then((res) => {
|
|
// console.log('收货地址详情', res)
|
|
if (res) {
|
|
this.form = Object.assign({}, res)
|
|
}
|
|
})
|
|
},
|
|
onAreaChange(e) {
|
|
if (e.detail.value && e.detail.value.length > 0) {
|
|
const [province, city, district, street] = e.detail.value
|
|
this.form.provinceId = province.value
|
|
this.form.provinceName = province.text
|
|
this.form.cityId = city.value
|
|
this.form.cityName = city.text
|
|
this.form.districtId = district.value
|
|
this.form.districtName = district.text
|
|
this.form.streetId = street.value
|
|
this.form.streetName = street.text
|
|
} else {
|
|
this.form.provinceId = null
|
|
this.form.provinceName = null
|
|
this.form.cityId = null
|
|
this.form.cityName = null
|
|
this.form.districtId = null
|
|
this.form.districtName = null
|
|
this.form.streetId = null
|
|
this.form.streetName = null
|
|
}
|
|
},
|
|
// 设置默认地址
|
|
switchChange(e) {
|
|
this.form.isDefault = e.target.value ? '1' : '0'
|
|
},
|
|
// 保存
|
|
addTap() {
|
|
createAddress(this.form).then((res) => {
|
|
if (res) {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success'
|
|
})
|
|
setTimeout(() => {
|
|
back()
|
|
}, 1000)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wrapper {
|
|
.wrapper-title {
|
|
width: 100%;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
}
|
|
.qn-form-item {
|
|
width: 750rpx;
|
|
padding: 0rpx 32rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
// justify-content: space-between;
|
|
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
|
|
min-height: 88rpx;
|
|
.label {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-right: 20rpx;
|
|
.label__text {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
.value {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.default-address {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0rpx 32rpx;
|
|
height: 133rpx;
|
|
background: #ffffff;
|
|
.title {
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
}
|
|
.tip {
|
|
padding-top: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #888888;
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
.button-area {
|
|
width: 750rpx;
|
|
padding: 0 32rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
// justify-content: space-between;
|
|
.button {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 10rpx;
|
|
.text {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.button__cancel {
|
|
width: 270rpx;
|
|
height: 88rpx;
|
|
border: 2rpx solid #979797;
|
|
}
|
|
.button__submit {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: #007aff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|