159 lines
4.3 KiB
Vue
159 lines
4.3 KiB
Vue
<template>
|
|
<view>
|
|
<u-row @click="handleAddressChoose(1)" custom-style="position:relative;gap:30rpx;" align="top"
|
|
>
|
|
<view style="flex-shrink:0;">
|
|
<image style="height: 50rpx;width: 42rpx;" :src="getCdnUrl(`post/ji.png`)"></image>
|
|
</view>
|
|
<view style="flex: 1;flex-shrink:1;overflow: auto;">
|
|
<view>
|
|
<view v-if="modelInfo.sender && modelInfo.sender.name" style="word-wrap: break-word;">
|
|
<text class="font-weight pr-10">{{modelInfo.sender.name}}</text>
|
|
<text class="font-weight">{{modelInfo.sender.phone}}</text>
|
|
</view>
|
|
<template v-else>
|
|
<text class="font-weight">寄件人信息</text>
|
|
</template>
|
|
</view>
|
|
<view style="margin: 8rpx 0 0 0;">
|
|
<u-text :text="sendDetail" size="26" color="#999"></u-text>
|
|
</view>
|
|
</view>
|
|
<view v-if="!disabled" class="flex-column-center" style="flex-shrink:0;">
|
|
<image style="height: 32rpx;width: 28rpx;" :src="getCdnUrl(`post/adress.png`)">
|
|
</image>
|
|
<u-text align="center" text="地址薄" size="26" :bold="true"
|
|
margin="8rpx 0 0 0"></u-text>
|
|
</view>
|
|
<view style="position: absolute;left: 20rpx;bottom: -20rpx;top: 46rpx;">
|
|
<u-line custom-style="height:100%;" direction="col" dashed="true"></u-line>
|
|
</view>
|
|
</u-row>
|
|
|
|
<view style="padding-left: 76rpx;">
|
|
<u-line margin="20rpx 0"></u-line>
|
|
</view>
|
|
|
|
<u-row @click="handleAddressChoose(2)" custom-style="position:relative;gap:30rpx;" align="top"
|
|
>
|
|
<view style="position: absolute;left: 20rpx;top: -20rpx;bottom: 100%;">
|
|
<u-line custom-style="height:100%;" direction="col" dashed="true"></u-line>
|
|
</view>
|
|
<view style="flex-shrink:0;">
|
|
<image style="height: 50rpx;width: 42rpx;" :src="getCdnUrl(`post/shou.png`)">
|
|
</image>
|
|
</view>
|
|
<view style="flex: 1;flex-shrink:1;overflow: auto;">
|
|
<view >
|
|
<view v-if="modelInfo.reciever && modelInfo.reciever.name" style="word-wrap: break-word;">
|
|
<text class="font-weight pr-10">{{modelInfo.reciever.name}}</text>
|
|
<text class="font-weight">{{modelInfo.reciever.phone}}</text>
|
|
</view>
|
|
<template v-else>
|
|
<text class="font-weight">收件人信息</text>
|
|
</template>
|
|
</view>
|
|
<view style="margin: 8rpx 0 0 0;">
|
|
<u-text :text="recieverDetail" size="26" color="#999"></u-text>
|
|
</view>
|
|
</view>
|
|
<view v-if="!disabled" class="flex-column-center" style="flex-shrink:0;">
|
|
<image style="height: 32rpx;width: 28rpx;" :src="getCdnUrl(`post/adress.png`)">
|
|
</image>
|
|
<u-text align="center" text="地址薄" size="26" :bold="true"
|
|
margin="8rpx 0 0 0"></u-text>
|
|
</view>
|
|
</u-row>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { pageEventNames } from "@/common/enum"
|
|
import { getAddressDetail } from "@/common/util"
|
|
|
|
export default {
|
|
computed: {
|
|
modelInfo: {
|
|
get(){
|
|
return this.value
|
|
}
|
|
},
|
|
sendDetail: {
|
|
get(){
|
|
const { sender: item } = this.modelInfo
|
|
return getAddressDetail(item) || '请填写寄件人国家、姓名，电话'
|
|
}
|
|
},
|
|
recieverDetail: {
|
|
get(){
|
|
const { reciever: item } = this.modelInfo
|
|
return getAddressDetail(item) || '请填写收件人国家、姓名，电话'
|
|
}
|
|
},
|
|
},
|
|
props: {
|
|
value: {
|
|
default () {
|
|
return { }
|
|
}
|
|
},
|
|
disabled: {
|
|
default () {
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
created() {
|
|
this.initEvent()
|
|
},
|
|
onHide() {
|
|
|
|
},
|
|
unmounted() {
|
|
uni.$off(pageEventNames.chooseAddress, this.chooseAddressEventBack)
|
|
},
|
|
|
|
methods: {
|
|
handleAddressChoose(type) { // 1 寄件地址 2收件地址
|
|
if(!this.disabled){
|
|
this.goto(`address/list?tab=${type}&type=choose`)
|
|
}
|
|
},
|
|
initEvent() {
|
|
if(!this.disabled) {
|
|
uni.$on(pageEventNames.chooseAddress, this.chooseAddressEventBack)
|
|
}
|
|
},
|
|
chooseAddressEventBack({ data, queryOption }){
|
|
const { tab } = queryOption
|
|
let isChange = false
|
|
let oldData = {}
|
|
if(tab == 1) {
|
|
oldData = JSON.parse(JSON.stringify(this.modelInfo.sender))
|
|
this.modelInfo.sender = data
|
|
}
|
|
if(tab == 2) {
|
|
oldData = JSON.parse(JSON.stringify(this.modelInfo.sender))
|
|
this.modelInfo.reciever = data
|
|
}
|
|
if(oldData.id != data.id) {
|
|
this.$emit("onChange", this.modelInfo)
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.shet-cont{
|
|
padding: 10rpx 0 30rpx 0;
|
|
}
|
|
.jsfm-item{
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
</style> |