forked from angelo/web-retail-h5
546 lines
14 KiB
Vue
546 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<view class="main">
|
|||
|
|
<view class="contents">
|
|||
|
|
<!-- <view class="top_text">
|
|||
|
|
{{$t('MY_CK_31')}}
|
|||
|
|
</view> -->
|
|||
|
|
<u-form :model="addressForm"
|
|||
|
|
labelWidth="auto"
|
|||
|
|
ref="uForm">
|
|||
|
|
<view class="view-class">
|
|||
|
|
<u-form-item :label="$t('MY_ORD_1')"
|
|||
|
|
label-width="150rpx"
|
|||
|
|
prop="orderCode">
|
|||
|
|
<u--input v-model="addressForm.orderCode"
|
|||
|
|
disabled
|
|||
|
|
disabledColor="#ffffff"
|
|||
|
|
placeholder="请选择"
|
|||
|
|
border="none"></u--input>
|
|||
|
|
</u-form-item>
|
|||
|
|
</view>
|
|||
|
|
<view class="view-class">
|
|||
|
|
<u-form-item :label="$t('MY_ORD_10')"
|
|||
|
|
label-width="150rpx"
|
|||
|
|
prop="newRecName">
|
|||
|
|
<u-input v-model="addressForm.newRecName"
|
|||
|
|
placeholder-class="place-class"
|
|||
|
|
class="border-color"
|
|||
|
|
:placeholder="$t('S_C_70')" />
|
|||
|
|
|
|||
|
|
</u-form-item>
|
|||
|
|
</view>
|
|||
|
|
<view class="view-class">
|
|||
|
|
<u-form-item :label="$t('w_0052')"
|
|||
|
|
label-width="150rpx"
|
|||
|
|
prop="newRecPhone">
|
|||
|
|
<u-input v-model="addressForm.newRecPhone"
|
|||
|
|
placeholder-class="place-class"
|
|||
|
|
:maxlength="userInfo.pkSettleCountry == 1?11:20"
|
|||
|
|
class="border-color"
|
|||
|
|
:placeholder="$t('S_C_70')" />
|
|||
|
|
|
|||
|
|
</u-form-item>
|
|||
|
|
</view>
|
|||
|
|
<view class="view-class"
|
|||
|
|
@click="getDiqu">
|
|||
|
|
<u-form-item :label="$t('w_0068')"
|
|||
|
|
label-width="150rpx"
|
|||
|
|
prop="address">
|
|||
|
|
<view v-if="address"
|
|||
|
|
style="font-size: 28rpx;color: #333;margin-left: 20rpx;">{{address}}</view>
|
|||
|
|
<view style="margin-left: 20rpx;font-size: 28rpx;color: rgb(192, 196, 204);"
|
|||
|
|
v-else>请选择收货地址
|
|||
|
|
</view>
|
|||
|
|
</u-form-item>
|
|||
|
|
<view class="drop">
|
|||
|
|
<image src="../../../static/images/drop.png"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="view-class">
|
|||
|
|
<u-form-item :label="$t('S_C_27')"
|
|||
|
|
class="label-style"
|
|||
|
|
label-width="150rpx"
|
|||
|
|
prop="newRecAddress">
|
|||
|
|
<u-textarea v-model="addressForm.newRecAddress"
|
|||
|
|
placeholder-class="place-class"
|
|||
|
|
maxlength="200"
|
|||
|
|
class="border-color"
|
|||
|
|
:placeholder="$t('w_0070')" />
|
|||
|
|
|
|||
|
|
</u-form-item>
|
|||
|
|
<view class="lis_address"
|
|||
|
|
v-if="addressList.length>0">
|
|||
|
|
<view class="lis_title">{{$t('w_0073')}}</view>
|
|||
|
|
<view class="">
|
|||
|
|
<u-radio-group @change="groupChange"
|
|||
|
|
placement="column"
|
|||
|
|
v-model="choiceValue"
|
|||
|
|
iconPlacement="left">
|
|||
|
|
<div v-for="(item, index) in addressList"
|
|||
|
|
:key="index"
|
|||
|
|
class="custom-radio-label">
|
|||
|
|
<u-radio :name="item.pkId"
|
|||
|
|
activeColor="#FB3024"></u-radio>
|
|||
|
|
<div class="custom-label-content">
|
|||
|
|
<view class="label_name">{{ item.recName }}</view>
|
|||
|
|
<view class="label_phone">{{ item.recPhone }}</view>
|
|||
|
|
<view class="label_address">{{ item.recArea }}</view>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</u-radio-group>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="view-class">
|
|||
|
|
<u-form-item :label="$t('MY_CK_34')"
|
|||
|
|
label-width="150rpx"
|
|||
|
|
prop="newPostage">
|
|||
|
|
<u--input v-model="addressForm.newPostage"
|
|||
|
|
disabled
|
|||
|
|
disabledColor="#ffffff"
|
|||
|
|
placeholder=""
|
|||
|
|
border="none"></u--input>
|
|||
|
|
</u-form-item>
|
|||
|
|
</view>
|
|||
|
|
<view class="view-class">
|
|||
|
|
<u-form-item :label="$t('MY_WAL_22')"
|
|||
|
|
label-width="150rpx"
|
|||
|
|
prop="selfRemark">
|
|||
|
|
<u-input v-model="addressForm.selfRemark"
|
|||
|
|
placeholder-class="place-class"
|
|||
|
|
class="border-color"
|
|||
|
|
:placeholder="$t('S_C_70')" />
|
|||
|
|
|
|||
|
|
</u-form-item>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</u-form>
|
|||
|
|
</view>
|
|||
|
|
<v-address ref="address"
|
|||
|
|
@getAddressData="AddressData"
|
|||
|
|
:defaultCode="defaultCode"
|
|||
|
|
@addressData="addressData"></v-address>
|
|||
|
|
<u-button type="success"
|
|||
|
|
shape="circle"
|
|||
|
|
class="btn"
|
|||
|
|
@click="submit">{{$t('w_0035')}}</u-button>
|
|||
|
|
<u-popup class="thePopup"
|
|||
|
|
:show="successShow"
|
|||
|
|
mode="center"
|
|||
|
|
@close="successShow = false">
|
|||
|
|
<view class="successPopup">
|
|||
|
|
|
|||
|
|
<view class="poupTop">
|
|||
|
|
<view class="theiconbox">
|
|||
|
|
<u-icon name="checkbox-mark"
|
|||
|
|
color="#ffffff"
|
|||
|
|
size="26"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="theicontitle">
|
|||
|
|
{{$t('MY_CK_35')}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="poupContent">
|
|||
|
|
{{$t('MY_CK_36')}}
|
|||
|
|
<view>
|
|||
|
|
{{$t('MY_CK_28')}}：400-111-2818
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="poupContent">
|
|||
|
|
{{$t('MY_CK_36')}}</br>
|
|||
|
|
{{$t('MY_CK_28')}}：400-111-2818
|
|||
|
|
</view> -->
|
|||
|
|
<view class="poupBtn"
|
|||
|
|
@click="sureBtn">
|
|||
|
|
{{$t('w_0035')}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as api from '@/config/login.js'
|
|||
|
|
import * as sel from '@/config/selfService.js'
|
|||
|
|
import { setToken } from '@/config/auth.js'
|
|||
|
|
import address from '@/components/address.vue'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
userInfo: '',
|
|||
|
|
check: false,
|
|||
|
|
address: '',
|
|||
|
|
defaultCode: [],
|
|||
|
|
urls: '/member/api/maker-space/update-file',
|
|||
|
|
addressForm: {
|
|||
|
|
orderCode: '',
|
|||
|
|
newRecName: '',
|
|||
|
|
newRecPhone: '',
|
|||
|
|
newRecProvince: '',
|
|||
|
|
newRecCity: '',
|
|||
|
|
newRecCounty: '',
|
|||
|
|
newRecAddress: '',
|
|||
|
|
newPostage: '',
|
|||
|
|
selfRemark: '',
|
|||
|
|
},
|
|||
|
|
choiceValue: '',
|
|||
|
|
successShow: false,
|
|||
|
|
addressList: [],
|
|||
|
|
rules: {
|
|||
|
|
newRecName: [
|
|||
|
|
{
|
|||
|
|
// 必填项
|
|||
|
|
required: true,
|
|||
|
|
// 提示内容（会出现在u-form-item内的底部）
|
|||
|
|
message: this.$t('S_C_70'),
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
newRecAddress: [
|
|||
|
|
{
|
|||
|
|
// 必填项
|
|||
|
|
required: true,
|
|||
|
|
// 提示内容（会出现在u-form-item内的底部）
|
|||
|
|
message: this.$t('S_C_70'),
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
newRecProvince: [
|
|||
|
|
{
|
|||
|
|
// 必填项
|
|||
|
|
required: true,
|
|||
|
|
// 提示内容（会出现在u-form-item内的底部）
|
|||
|
|
message: this.$t('S_C_70'),
|
|||
|
|
|
|||
|
|
trigger: ['change'],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
newRecPhone: [
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
message: this.$t('S_C_70'),
|
|||
|
|
trigger: ['blur'],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
validator: (rule, value, callback) => {
|
|||
|
|
return this.$u.test.mobile(value)
|
|||
|
|
},
|
|||
|
|
message: this.$t('MY_WAL_47'),
|
|||
|
|
trigger: ['blur'],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
let query = JSON.parse(options.obj)
|
|||
|
|
// console.log(12, JSON.parse(query)) // 输出携带的参数对象
|
|||
|
|
this.addressForm = query
|
|||
|
|
|
|||
|
|
if (query.recCountyVal) {
|
|||
|
|
this.address =
|
|||
|
|
query.recProvinceVal + query.recCityVal + query.recCountyVal
|
|||
|
|
} else {
|
|||
|
|
this.address = query.recProvinceVal + query.recCityVal
|
|||
|
|
}
|
|||
|
|
this.addressForm.newRecName = query.recName
|
|||
|
|
this.addressForm.newRecPhone = query.recPhone
|
|||
|
|
this.addressForm.newRecAddress = query.recAddress
|
|||
|
|
this.addressForm.newRecProvince = query.recProvince
|
|||
|
|
this.addressForm.newRecCity = query.recCity
|
|||
|
|
this.addressForm.newRecCounty = query.recCounty
|
|||
|
|
this.addressForm.newPostage = query.postage
|
|||
|
|
this.addressForm.specialArea = query.specialArea
|
|||
|
|
this.getAddressList()
|
|||
|
|
this.userInfo = uni.getStorageSync('User')
|
|||
|
|
},
|
|||
|
|
onReady() {
|
|||
|
|
this.$refs.uForm.setRules(this.rules)
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
'v-address': address,
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
groupChange(value) {
|
|||
|
|
this.addressList.forEach((ele) => {
|
|||
|
|
if (value == ele.pkId) {
|
|||
|
|
this.$set(this.addressForm, 'newRecName', ele.recName)
|
|||
|
|
this.$set(this.addressForm, 'newRecPhone', ele.recPhone)
|
|||
|
|
this.$set(this.addressForm, 'newRecAddress', ele.recAddress)
|
|||
|
|
this.$set(this.addressForm, 'newRecProvince', ele.recProvince)
|
|||
|
|
this.$set(this.addressForm, 'newRecCity', ele.recCity)
|
|||
|
|
this.$set(this.addressForm, 'newRecCounty', ele.recCounty)
|
|||
|
|
if (ele.recCountyVal) {
|
|||
|
|
this.address =
|
|||
|
|
ele.recProvinceVal + ele.recCityVal + ele.recCountyVal
|
|||
|
|
} else {
|
|||
|
|
this.address = ele.recProvinceVal + ele.recCityVal
|
|||
|
|
}
|
|||
|
|
this.getPostAge()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//邮费
|
|||
|
|
getPostAge() {
|
|||
|
|
let postageData = {
|
|||
|
|
recProvince: this.addressForm.newRecProvince,
|
|||
|
|
recCity: this.addressForm.newRecCity,
|
|||
|
|
orderCode: this.addressForm.orderCode,
|
|||
|
|
specialArea: this.addressForm.specialArea,
|
|||
|
|
deliveryWay: this.addressForm.deliveryWay,
|
|||
|
|
tranType: this.addressForm.tranType,
|
|||
|
|
orderItemsParams: this.addressForm.orderItemsParams,
|
|||
|
|
}
|
|||
|
|
sel.queryAdressPostage(postageData).then((res) => {
|
|||
|
|
this.$set(this.addressForm, 'newPostage', res.data.postage)
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getAddressList() {
|
|||
|
|
sel.addressList({}).then((res) => {
|
|||
|
|
this.addressList = res.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
AddressData(name) {
|
|||
|
|
this.address = name
|
|||
|
|
},
|
|||
|
|
submit() {
|
|||
|
|
this.$refs.uForm.validate().then((res) => {
|
|||
|
|
sel.saveSelfAddress(this.addressForm).then((res) => {
|
|||
|
|
if (res.code == '200') {
|
|||
|
|
// uni.showToast({
|
|||
|
|
// title: res.msg,
|
|||
|
|
// icon: 'none',
|
|||
|
|
// success() {
|
|||
|
|
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
this.successShow = true
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
sureBtn() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
getDiqu() {
|
|||
|
|
this.$refs.address.setShow()
|
|||
|
|
},
|
|||
|
|
addressData(diqu, obj) {
|
|||
|
|
this.address = diqu
|
|||
|
|
this.addressForm.newRecProvince = obj.province
|
|||
|
|
this.addressForm.newRecCity = obj.city
|
|||
|
|
this.addressForm.newRecCounty = obj.county
|
|||
|
|
this.getPostAge()
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
},
|
|||
|
|
getAddressData(e) {
|
|||
|
|
console.error(e)
|
|||
|
|
},
|
|||
|
|
// getAddress(id) {
|
|||
|
|
// api.getAddress(id).then(res => {
|
|||
|
|
// if (res) {
|
|||
|
|
// this.addressForm = {
|
|||
|
|
// recName: res.data.recName,
|
|||
|
|
// recPhone: res.data.recPhone,
|
|||
|
|
// recProvince: res.data.recProvince,
|
|||
|
|
// recCity: res.data.recCity,
|
|||
|
|
// recCounty: res.data.recCounty || '',
|
|||
|
|
// pkId: res.data.pkId,
|
|||
|
|
// recAddress: res.data.recAddress,
|
|||
|
|
// }
|
|||
|
|
// this.defaultCode = [
|
|||
|
|
// res.data.recProvince,
|
|||
|
|
// res.data.recCity,
|
|||
|
|
// res.data.recCounty || '',
|
|||
|
|
// ]
|
|||
|
|
// }
|
|||
|
|
// }).catch(error => {
|
|||
|
|
// reject(error)
|
|||
|
|
// })
|
|||
|
|
// },
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.custom-radio-label {
|
|||
|
|
display: flex;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-label-content {
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
|
|||
|
|
.label_name {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-family: Source Han Sans CN;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label_phone {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-family: Source Han Sans CN;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label_address {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-family: Source Han Sans CN;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/ .u-form-item__body__right__message {
|
|||
|
|
margin-left: 215rpx !important;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.drop {
|
|||
|
|
image {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 30rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.check {
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
view {
|
|||
|
|
width: 36rpx;
|
|||
|
|
height: 36rpx;
|
|||
|
|
border: 1rpx solid #dddddd;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-top: 25rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0rpx;
|
|||
|
|
top: 25rpx;
|
|||
|
|
// margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lis_address {
|
|||
|
|
background: rgba(231, 20, 26, 0.08);
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
padding: 20rpx 26rpx;
|
|||
|
|
|
|||
|
|
.lis_title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-family: Source Han Sans CN;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #fb3024;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label-style {
|
|||
|
|
display: block !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/ .label-style .u-form-item__body__left {
|
|||
|
|
display: block !important;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-textarea {
|
|||
|
|
height: 100rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view-class {
|
|||
|
|
border-bottom: 1rpx solid #eee;
|
|||
|
|
margin: 0 30rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.border-color {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
page {
|
|||
|
|
background-color: #f2f2f2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contents {
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
.top_text {
|
|||
|
|
padding: 30rpx 40rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-family: Source Han Sans CN;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
background-color: #fb3024;
|
|||
|
|
border: none;
|
|||
|
|
height: 92rpx;
|
|||
|
|
line-height: 92rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
margin: 40rpx auto;
|
|||
|
|
width: 690rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.successPopup {
|
|||
|
|
width: 560rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 26rpx 60rpx;
|
|||
|
|
|
|||
|
|
.poupTop {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.theiconbox {
|
|||
|
|
background-color: #029b00;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-content: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theicontitle {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-family: Source Han Sans CN;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 13rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poupContent {
|
|||
|
|
margin-top: 50rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-family: Source Han Sans CN;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poupBtn {
|
|||
|
|
background: #fb3024;
|
|||
|
|
border-radius: 39rpx;
|
|||
|
|
padding: 26rpx 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #ffffff;
|
|||
|
|
margin-top: 70rpx;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .thePopup .u-popup__content {
|
|||
|
|
background-color: rgba(0, 0, 0, 0);
|
|||
|
|
}
|
|||
|
|
</style>
|