<template>
|
<!-- 收获地址列表 -->
|
<view class="p15 container-address">
|
<no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
|
|
<!-- 循环 -->
|
<view v-for="(item,index) of list" :key="index" class="location-each">
|
<view class="flex">
|
<view class="container-info">
|
<view class="flex">
|
<view class="name">{{item.name || '-'}}</view>
|
<view class="tel">{{item.tel||'-'}}</view>
|
</view>
|
<view class="address">
|
{{item.address}}
|
|
</view>
|
</view>
|
<!-- <view class="h-line"></view> -->
|
<view class="edit" @click="()=>{
|
this.submitForm = {
|
...item
|
}
|
openAddressForm()
|
}">
|
<uni-icons type="compose" class="icon" color="#666666"></uni-icons>
|
</view>
|
</view>
|
<view class="v-line"></view>
|
<view class="flex">
|
<view class="flex" @click="changeDefaultAddress(item,index)">
|
<!-- <label class="radio flex" > -->
|
<!-- <radio value="r1" :checked="item.defaulted" disabled
|
style="transform:scale(0.6)" v-if="item.defaulted" />
|
<radio value="r1"
|
style="transform:scale(0.6)" :checked="item.defaulted" v-if="!item.defaulted" @change="changeDefaultAddress(item,index)"/>
|
-->
|
|
<!-- </label> -->
|
<view class="radio m-t-2 m-r-10" :class="[item.defaulted?'select':'']">
|
|
</view>
|
<span class="desc">{{item.defaulted?'默认地址:':'当前地址:'}}{{item.schoolAreaStr||''}}
|
{{item.blockStr||''}}
|
{{item.room||''}}</span>
|
<!-- 当前地址/默认地址勾选 -->
|
</view>
|
<view class="desc del t-red" @click="deleteAddress(item)">
|
删除
|
</view>
|
<view class="desc del t-green m-l-10" v-if="source==='select'" @click="selectAddress(item)">
|
选择此地址
|
</view>
|
</view>
|
|
</view>
|
<view style="height: 92rpx;width: 690rpx;">
|
|
</view>
|
<view class="button-green button-fixed-bottom" style="width: 690rpx;line-height: 92rpx;height: 92rpx;" @click=" ()=>{
|
delete this.submitForm.id
|
this.submitForm['name'] = ''
|
this.submitForm['tel'] = ''
|
this.submitForm['tel'] = ''
|
this.submitForm['area'] = ''
|
|
openAddressForm()
|
}">添加收货地址</view>
|
|
<uni-popup ref="popup_form" type="top" :mask-click="false">
|
<view class="popup-address-form">
|
<view class="close-parent">
|
{{submitForm.id?'新增':'编辑'}}收货地址
|
<uni-icons class="close" type="closeempty" @click="closeAddressForm"></uni-icons>
|
</view>
|
<!--收货人、手机号、校区、详细地址 -->
|
<view class="submit form">
|
<view class="form-item">
|
<view class="form-item-label require">
|
收货人
|
</view>
|
<view class="form-item-value">
|
<input v-model="submitForm.name" placeholder="请输入收货人" class="form-input"></input>
|
</view>
|
</view>
|
<view class="form-item">
|
<view class="form-item-label require">
|
请选择收获地址
|
</view>
|
<view class="form-item-value">
|
<input v-model="submitForm.room" placeholder="请选择收获地址" disabled class="form-input"></input>
|
<!-- todo 点击定位 -->
|
</view>
|
</view>
|
<view class="form-item">
|
<view class="form-item-label require">
|
详细地址
|
</view>
|
<view class="form-item-value">
|
<input v-model="submitForm.address" placeholder="请输入详细地址" class="form-input"></input>
|
|
</view>
|
</view>
|
<view class="form-item">
|
<view class="form-item-label">
|
是否默认
|
</view>
|
<view class="form-item-value">
|
<radio value="r1" :checked="submitForm.defaulted"
|
@click="submitForm.defaulted=!submitForm.defaulted"
|
style="transform:scale(0.6);margin-top: -8rpx;" />
|
</view>
|
</view>
|
</view>
|
|
<view class="button-green m-t-15" @click="saveOrUpdateAddress">保存</view>
|
</view>
|
</uni-popup>
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
async onPullDownRefresh() {
|
this.page.current = 0
|
await this.getList()
|
uni.stopPullDownRefresh()
|
},
|
async onLoad(options) {
|
// this.list = [{}, {}]
|
this.source = options.source || ''
|
this.listApi = '/api/address/customer/list'
|
await this.getList()
|
|
},
|
data() {
|
return {
|
source: '',
|
submitForm: {
|
name: '',
|
tel: '',
|
address: '',
|
schoolArea: '',
|
block: '',
|
room: '',
|
defaulted: false
|
},
|
};
|
},
|
methods: {
|
async changeDefaultAddress(item, index) {
|
if (item.defaulted) {
|
return
|
}
|
this.$nextTick(() => {
|
// item.defaulted = false
|
// this.$set(item,'defaulted',false)
|
this.$message.confirm('确定设置此地址为默认地址吗').then(async res => {
|
this.$message.showLoading()
|
var {
|
code
|
} = await this.$http.request('post', '/api/address/customer/default/' +
|
item.id, {})
|
this.$message.hideLoading()
|
if (code == 0) {
|
for (var dto of this.list) {
|
dto.defaulted = false
|
}
|
this.$message.showToast('设置成功')
|
item.defaulted = true
|
this.$store.commit('setDefaultAddress', {
|
...item
|
})
|
|
}
|
}, err => {
|
this.$nextTick(() => {
|
this.list[index].defaulted = false
|
this.$forceUpdate()
|
console.log('err', err, this.list[index])
|
})
|
|
|
})
|
})
|
},
|
async selectAddress(item) {
|
await this.$message.confirm('确定选择此地址作为收获地址吗')
|
//携带，然后返回
|
this.$store.commit('setDefaultAddress', {
|
...item
|
})
|
this.backpage()
|
},
|
async deleteAddress(item) {
|
await this.$message.confirm('确定删除此地址吗')
|
this.$message.showLoading()
|
var {
|
code
|
} = await this.$http.request('get', '/api/address/customer/delete/' + item.id, {})
|
this.$message.hideLoading()
|
if (code == 0) {
|
this.$message.showToast('删除成功')
|
setTimeout(() => {
|
this.page.current = 1
|
this.getList()
|
}, 500)
|
}
|
},
|
async openAddressForm() {
|
if (this.submitForm.id) {
|
this.$message.showLoading()
|
var {
|
data
|
} = await this.$http.request('get', '/api/address/customer/get/' + this.submitForm.id, {})
|
|
|
if (data) {
|
this.submitForm = {
|
...this.submitForm,
|
...data
|
}
|
this.blockIndex = -1
|
this.schoolIndex = -1
|
}
|
this.$message.hideLoading()
|
} else {
|
this.submitForm = {
|
name: this.currentInfo && this.currentInfo.nickName || '',
|
tel: this.currentInfo && this.currentInfo.tel || '',
|
address: '',
|
schoolArea: '',
|
block: '',
|
room: '',
|
defaulted: false
|
}
|
this.schoolIndex = -1
|
this.blockIndex = -1
|
this.blocks = []
|
}
|
|
this.$refs.popup_form.open()
|
|
},
|
closeAddressForm() {
|
this.$refs.popup_form.close()
|
|
},
|
async saveOrUpdateAddress() {
|
if (!this.checkFormValues(this.submitForm, ['tel', 'name', 'address'])) {
|
this.$message.showToast('字段未填写完整')
|
return
|
}
|
this.$message.showLoading()
|
const {
|
code
|
} = await this.$http.request('post', '/api/address/customer/' + (this.submitForm.id ? 'edit' :
|
'new'), {
|
data: this.submitForm
|
})
|
this.$message.hideLoading()
|
if (code == 0) {
|
this.$refs.popup_form.close()
|
this.$message.showToast(this.submitForm.id ? '修改成功' : '新增成功')
|
|
setTimeout(() => {
|
this.page.current = 1
|
this.getList()
|
}, 300)
|
}
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container-address {
|
.popup-address-form {
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
// width: 690rpx;
|
height: 882rpx;
|
margin-top: 120rpx;
|
margin-left: 30rpx;
|
margin-right: 30rpx;
|
padding: 24rpx 36rpx;
|
|
.submit {
|
margin-top: 30rpx;
|
|
.form-input {
|
height: 36rpx;
|
line-height: 36rpx;
|
}
|
}
|
}
|
|
.location-each {
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
margin-bottom: 24rpx;
|
padding: 36rpx;
|
|
.name {
|
font-size: 32rpx;
|
color: #000000;
|
line-height: 44rpx;
|
text-align: left;
|
font-style: normal;
|
}
|
|
.tel {
|
font-size: 28rpx;
|
color: #666666;
|
line-height: 40rpx;
|
text-align: left;
|
font-style: normal;
|
padding-top: 4rpx;
|
margin-left: 20rpx;
|
}
|
|
.address {
|
font-size: 24rpx;
|
color: #000000;
|
line-height: 34rpx;
|
text-align: left;
|
font-style: normal;
|
}
|
|
.desc {
|
font-size: 24rpx;
|
color: #666666;
|
line-height: 34rpx;
|
text-align: left;
|
font-style: normal;
|
}
|
|
.del {
|
// vertical-align: baseline;
|
margin-left: auto;
|
margin-right: 6rpx;
|
margin-top: 4rpx;
|
}
|
|
.container-info {
|
max-width: 540rpx;
|
}
|
|
.h-line {
|
width: 2rpx;
|
height: 46rpx;
|
background-color: #EEEEEE;
|
margin-left: 28rpx;
|
margin-right: 24rpx;
|
}
|
|
.v-line {
|
width: 638rpx;
|
height: 2rpx;
|
// border: 2rpx solid #EEEEEE;
|
background-color: #EEEEEE;
|
margin-top: 24rpx;
|
margin-bottom: 24rpx;
|
}
|
|
.edit {
|
// min-width: 80rpx;
|
width: fit-content;
|
margin-left: auto;
|
margin-right: 0rpx;
|
display: flex;
|
position: relative;
|
|
.icon {
|
// margin: 0 auto;
|
// mar
|
margin-left: auto;
|
margin-right: auto;
|
margin-top: 20rpx;
|
display: block;
|
|
}
|
}
|
|
.edit::before {
|
content: " ";
|
width: 2rpx;
|
height: 46rpx;
|
background-color: #EEEEEE;
|
position: absolute;
|
left: -24rpx;
|
top: 20rpx;
|
}
|
}
|
}
|
</style>
|
