|
|
<template> <!-- 编辑/添加地址 --> <view class="container flex-center flex-column"> <global-loading /> <!-- #ifdef MP-WEIXIN --><!-- <view class="wxAddress flex-items flex-end" v-if="type == 1">--><!-- <view class="wxBtnBox flex-items" @click="addAddressWx">--><!-- <image class="" src="http://36.138.125.206:8081/ceres-local-file/static/images/withdraw.png"></image>--><!-- </view>--><!-- </view>--> <!-- #endif --> <view class="addressBack-box"> <view class="consignee-box bor-line-D3D4DE"> <input v-model="addressData.username" maxlength="20" class="fs32" placeholder-class="consignee" :placeholder="$t('common.returnperson')" /> </view> <view class="iphoneNum-box bor-line-D3D4DE"> <input type="number" v-model="addressData.phone" maxlength="11" class="fs32" placeholder-class="iphoneNum" :placeholder="$t('common.login_phone_mode')" /> </view> <view @click="locationClick" class="location-box bor-line-D3D4DE flex-row-plus flex-sp-between flex-items"> <view class="fs32 location">{{$t('common.location')}}</view> <view class="locationBox"><!-- <city-select v-model="locationShowFalg" @city-change="cityChange"></city-select>--> <u-picker-cere mode="region" v-model="locationShowFalg" @confirm="cityChange" :default-region='addressData.defaultRegion' title="所在地"></u-picker-cere> <text class="fs32" v-model="addressData.ssqText">{{addressData.ssqText}}</text> <image class="arrow mar-left-20 mar-top-8" src="http://36.138.125.206:8081/ceres-local-file/image/icon_common_grey_forward.png"></image> </view> </view> <view class="detailAddress-box"> <input class="fs32" v-model="addressData.address" maxlength="60" placeholder-class="detailAddress" :placeholder="$t('common.location_detail_hint')" /> </view> </view> <view class="addressTagBack-box"> <view @click="addressTagClick" class="addressTag-box bor-line-D3D4DE flex-row-plus flex-sp-between flex-items"> <view class="fs32 addressTag">{{$t('common.addresstag')}}</view> <view class="flex-items"> <text class="fs32" v-model="tag">{{tag}}</text> <image class="arrow mar-left-20 mar-top-8" src="http://36.138.125.206:8081/ceres-local-file/image/address_add_forward.png"></image> </view> </view> <view class="defaultState-box flex-row-plus flex-sp-between flex-items"> <view class="fs32 defaultState">{{$t('common.addressdefault')}}</view> <u-switch v-model="ifDefault" active-color="#252744" inactive-color="#bcbdc6"></u-switch> </view> </view> <view class="deleteAddress-box" @click="delAddress" v-if="type == 2"> <text class="font-color-F54639">{{$t('common.deleteaddress')}}</text> </view> <view class="saveAddress-box"> <view class="saveAddress" v-if="type == 1 || type == 3" @click="addAddressClick">{{$t('common.save')}}</view> <view class="saveAddress" v-else @click="saveAddressClick">{{$t('common.save')}}</view> </view> <!-- 所在地弹窗 --> <!-- <u-select v-model="locationShowFalg" safe-area-inset-bottom="true" mode="mutil-column-auto" :list="locationList" @confirm="locationConfirm" title="所在地"></u-select> --> <!-- 所在地弹窗 --><!-- <u-select v-model="addressTagShowFalg" mode="single-column" :list="addressTagList" @confirm="addressTagconfirm" title="地址标签"></u-select>--> <u-picker-cere mode="selector" v-model="addressTagShowFalg" :range="addressTagList" range-key="label" @confirm="addressTagconfirm" title="地址标签" :default-selector="[addressTagIndex]"></u-picker-cere> </view></template>
<script>// import citySelect from './u-city-select.vue';
const NET = require('../../utils/request')const API = require('../../config/api') export default { // components: {
// citySelect
// },
data() { return { show: false, type: 1, // 1.添加新地址 2.编辑收货地址
locationShowFalg:false, locationList: [], locationName:'', provinceName:'', cityName:'', districtName:'', addressTagList: [ { value: '1', label: this.$t('common.home') }, { value: '2', label: this.$t('common.company') }, { value: '3', label: this.$t('common.school') } ], addressTagShowFalg:false, areaList:[], username:'', phone:'', ssqText:'', address:'', tag:'', ifDefault: 0, province:'', city:'', area:'', id:'', ordertype:0, editAddress:{}, addressTagIndex: 0, // defaultRegion: [],
addressData: { username: '', phone: '', ssqText: '', address: '', defaultRegion: [], city:'', province:'', } } }, onLoad(options) { this.type = options.type if(options.ordertype == 1){ this.ordertype = 1 } let receiveId = options.receiveId this.id = receiveId if(this.type == 2){ // uni.showLoading({
// mask: true,
// title: '请稍后...',
// })
NET.request(API.receiveGetInfo,{receiveId:receiveId},"GET").then(res => { this.editAddress = res.data this.addressData.username = this.editAddress.receiveName this.addressData.phone = this.editAddress.receivePhone this.addressData.ssqText = this.editAddress.receiveAdress this.addressData.address = this.editAddress.address this.tag = this.editAddress.label for(let i=0;i<this.addressTagList.length;i++){ if(this.addressTagList[i].label === this.tag){ this.addressTagIndex = i } } this.ifDefault = this.editAddress.ifDefault this.addressData.defaultRegion = this.addressData.ssqText.split("-") this.addressData.province = this.addressData.defaultRegion[0] this.addressData.city = this.addressData.defaultRegion[1] this.addressData.area = this.addressData.defaultRegion[2] this.addressData.id = this.editAddress.receiveId uni.hideLoading() }).catch(res => {
}) } if (this.type == 3) { let obj = JSON.parse(options.wxAddressData) this.addressData = obj // this.username = obj.username
// this.phone = obj.phone
// this.ssqText = obj.ssqText
// this.defaultRegion = obj.defaultRegion
// this.address = obj.address
// this.province = obj.provinceName
// this.city = obj.cityName
} if(this.editAddress != ''){ uni.removeStorageSync('editAddress') } }, methods: { cityChange(e) { this.addressData.ssqText = e.province.label + '-' + e.city.label + '-' + e.area.label; this.addressData.province = e.province.label this.addressData.city = e.city.label this.addressData.area = e.area.label }, locationClick(){ this.locationShowFalg = true }, locationConfirm(e) { this.provinceName = e[0].label this.cityName = e[1].label this.districtName = e[2].label this.locationDot = '·' }, addressTagClick(){ this.addressTagShowFalg = true }, addressTagconfirm(index){ this.tag = this.addressTagList[index].label }, //编辑地址
saveAddressClick(){ let phoneCodeVerification = /^[1][3-9][0-9]{9}$/; if(this.addressData.username==''){ uni.showToast({ title: this.$t('common.returnperson_empty'), duration: 2000, icon:'none' }); }else if(this.addressData.phone ==''){ uni.showToast({ title: this.$t('common.phonenumber_empty'), duration: 2000, icon:'none' }); }else if(!phoneCodeVerification.test(this.addressData.phone)){ uni.showToast({ title: this.$t('common.phonenumber_error'), duration: 2000, icon:'none' }); }else if(this.addressData.province==''||this.addressData.city==''){ uni.showToast({ title: this.$t('common.location_empty'), duration: 2000, icon:'none' }); }else if(this.addressData.address==''){ uni.showToast({ title: this.$t('common.location_detail_empty'), duration: 2000, icon:'none' }); }else{ NET.request(API.AddresUpdate,{ receiveId: this.id, receiveName: this.addressData.username, receivePhone: this.addressData.phone, receiveAdress: this.addressData.ssqText, address:this.addressData.address, label:this.tag, ifDefault:this.ifDefault ? 1 : 0 },'POST').then(res => { uni.navigateBack({ delta: 1 }); uni.removeStorageSync('editAddress'); }).catch(res => {
}) }
}, //新增地址
addAddressClick(){ let phoneCodeVerification = /^[1][3-9][0-9]{9}$/; if(this.addressData.username==''){ uni.showToast({ title: this.$t('common.returnperson_empty'), duration: 2000, icon:'none' }); }else if(this.addressData.phone==''){ uni.showToast({ title: this.$t('common.phonenumber_empty'), duration: 2000, icon:'none' }); }else if(!phoneCodeVerification.test(this.addressData.phone)){ uni.showToast({ title: this.$t('common.phonenumber_error'), duration: 2000, icon:'none' }); }else if(this.addressData.province==''||this.addressData.city==''){ uni.showToast({ title: this.$t('common.location_empty'), duration: 2000, icon:'none' }); }else if(this.addressData.address==''){ uni.showToast({ title: this.$t('common.location_detail_empty'), duration: 2000, icon:'none' }); }else{ NET.request(API.AddresAdd, { receiveName: this.addressData.username, receivePhone: this.addressData.phone, receiveAdress: this.addressData.ssqText, address:this.addressData.address, label:this.tag, ifDefault: this.ifDefault ? 1 : 0 },'POST').then(res => { if(this.ordertype == 1){ uni.setStorageSync('receiveItem', res.data) uni.navigateBack({ delta: 2 }); }else{ uni.navigateBack({ delta: 1 }); } }).catch(res => {
}) } }, // addAddressWx() {
// let self = this
// uni.chooseAddress({
// success(res){
// self.username = res.userName
// self.phone = res.telNumber
// self.ssqText = `${res.provinceName}-${res.cityName}-${res.countyName}`
// self.defaultRegion = self.ssqText.split("-")
// self.address = res.detailInfo
// self.province = res.provinceName
// self.city = res.cityName
// }
// })
// },
//删除地址
delAddress(){ uni.showModal({ title: this.$t('common.notice_dialog_title'), content: this.$t('common.removeaddress_tips'), confirmText:this.$t('common.sure'), cancelText:this.$t('common.cancel'), success: (res)=> { if (res.confirm) { this.subm() } else if (res.cancel) { } } }) }, subm(){ NET.request(API.AddresDelete,{ receiveId: this.id },'POST').then(res => { if(res.code === "200"){ uni.navigateBack({ delta: 1 }); } }).catch(res => {
}) } } }</script>
<style lang="scss"> page{ background-color: #FAFAFA; } .container{ .addressBack-box{ background-color: #FFFFFF; padding: 30upx 30upx; .consignee-box{ padding-bottom: 36upx; width: 690upx; margin-top: 20upx; .consignee{ color: #90919C; font-size: 32rpx; } } .iphoneNum-box{ padding-bottom: 36upx; width: 690upx; margin-top: 36upx; .iphoneNum{ color: #90919C; font-size: 32rpx; } } .location-box{ padding-bottom: 36upx; width: 690upx; margin-top: 36upx; .location{ color: #90919C; font-size: 32rpx; } .locationBox { display: flex; align-items: center; } } .detailAddress-box{ padding-bottom: 36upx; width: 690upx; margin-top: 36upx; input{ width: 100%; } .detailAddress{ color: #90919C; font-size: 32rpx; } } } .addressTagBack-box{ background-color: #FFFFFF; padding: 30upx 30upx; margin-top: 20upx; .addressTag-box{ padding-bottom: 36upx; width: 690upx; .addressTag{ color: #90919C; font-size: 32rpx; } } .defaultState-box{ padding-bottom: 10upx; width: 690upx; margin-top: 36upx; .defaultState{ color: #90919C; font-size: 32rpx; } } } .arrow{ width: 16rpx; height: 28rpx; } .saveAddress-box{ position: fixed; bottom: 50upx; left: 30upx; .saveAddress{ width: 690upx; height: 98upx; text-align: center; line-height: 98upx; background: #252744; border-radius: 50rpx; color: #FFFFFF; } } .wxAddress { height: 80rpx; text-align: center; line-height: 80rpx; color: #90919C; .wxBtnBox { width: 100rpx; height: 80rpx; image { width: 80rpx; height: 80rpx; } } } } .deleteAddress-box{ background-color: #FFFFFF; padding: 30upx 30upx; margin-top: 20upx; } .content{ font-size: 35rpx; width: 500rpx; .btn{ margin-bottom: 20rpx; width: 200rpx; background-image: linear-gradient( 135deg, #FFA100 10%, #FF7911 100%); } }</style><style scoped>.addressBack-box /deep/ .u-tab-item{ color: #C5AA7B !important; font-weight: 400 !important;}.addressBack-box /deep/ .u-tab-bar { background-color: #C5AA7B !important;}</style>
|
