<template> <view style="padding-top: 30rpx;"> <view class="paybox"> <view class="paybox_title"> <image src="../../static/team/user.png" mode="widthFix" style="width: 52rpx;margin-right: 20rpx;" /> 确认收货人信息 </view> <view class="paybox-top"> <view class="title"> <text>收货人</text> <text class="star">*</text> </view> <input v-model="address.username" type="text" class="paybox-input" placeholder-class="input_placeholder" placeholder="请填写真实姓名" /> </view> <view class="paybox-top"> <view class="title"> <text>手机号</text> <text class="star">*</text> </view> <input v-model="address.mobile" type="number" class="paybox-input" placeholder-class="input_placeholder" placeholder="请填写手机号码" maxlength="11" /> </view> <view class="paybox-top"> <view class="title"> <text>省市区</text> <text class="star">*</text> </view> <view class="picker flexB" @tap="choosePicker"> <view :style="{ color: local ? '#333' : '#cbcbcb' }">{{ local ? local : '请选择所在地区' }}</view> <text class="iconfont iconzhcc_xiangxiajiantou"></text> </view> </view> <view class="paybox-bottom" style="border: none;"> <view class="title"> <text>详细地址</text> <text class="star">*</text> </view> <view class="textpaybox"> <textarea v-model="address.address" type="text" placeholder="请填写详细地址" class="paybox-input" placeholder-class="input_placeholder" /> </view> </view> </view> <view v-if="title" class="toptitle"> 若信息不准确,请手动修改。 </view> <view class="bottom"><view v-throttle="2000" class="bottom-btn" @click="save">保存地址</view></view> <w-picker ref="Selector" mode="region" :defaultVal="pickerDefaultVal" themeColor="#F76454" @confirm="onConfirm" /> </view> </template> <script> import WPicker from '@/components/w-picker/w-picker.vue'; import cityData from '@/components/citypicker/city-data/city.js'; import areaData from '@/components/citypicker/city-data/area.js'; import cityPicker from '@/components/citypicker/city-picker.vue'; import provinceData from '@/components/citypicker/city-data/province.js'; import{ GetEnrollUserAddress, UpdateAddAddress } from '@/apis/szy.js'; export default { components: { WPicker, cityPicker }, data() { return { local: '', title: false, address: { username: '', mobile: '', province: '', city: '', area: '', address: '', }, pickerDefaultVal: ['河南省', '郑州市', '金水区'] } }, onLoad() { this.getAddress() }, methods: { // 获取地址信息 getAddress() { GetEnrollUserAddress().then(res => { if (res.code === 200) { if (res.data.province) { this.address = res.data const data = res.data this.local =`${data.province}-${data.city}-${data.area}` this.pickerDefaultVal = [ data.province, data.city, data.area ] this.title = true } else { this.title = false } } else { uni.showModal({ content: res.message || '获取失败', showCancel: false }) } }) }, choosePicker() { // 显示地址选择器 this.$refs.Selector.show(); }, onConfirm(e) { // 选择地址选择器 this.local = `${e.checkArr[0]}-${e.checkArr[1]}-${e.checkArr[2]}`; this.address.province = e.checkArr[0]; this.address.city = e.checkArr[1]; this.address.area = e.checkArr[2]; }, save() { console.log(this.address) // 保存/修改地址 if (!this.address.username.match(/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/)) { // 校验姓名 uni.toast('真实姓名不符合要求'); return; } if (!this.address.mobile.match(/^1\d{10}$/)) { // 校验手机号 uni.toast('手机号码不符合要求'); return; } if (!this.local.trim().length) { // 校验是否选择地区 uni.toast('请选择所在地区'); return; } if (!this.address.address.trim().length) { // 校验是否填写详细地址 uni.toast('详细地址不能为空'); return; } const address = { username: this.address.username, mobile: this.address.mobile, province: this.address.province, city: this.address.city, area: this.address.area, address: this.address.address, }; uni.showLoading({ mask: true }); UpdateAddAddress(address).then(res => { if (res.code === 200) { uni.toast('保存成功') } else { uni.showModal({ content: res.message || '提交失败', showCancel: false }) } }) }, } } </script> <style lang="scss" scoped> .toptitle { font-size: 32rpx; font-weight: bold; color: #FF0000; margin-top: 54rpx; text-align: center; } .paybox { margin: 0 24rpx; background-color: #fff; border-radius: 24rpx; &_title { display: flex; align-items: center; font-size: 36rpx; font-weight: bold; color: #333333; padding: 32rpx 0 0 24rpx; } &-input { font-size: 30rpx; min-height: 126rpx; width: 75%; margin-left: 20rpx; } &-top { min-height: 128rpx; margin: 0 30rpx; paybox-sizing: border-paybox; border-bottom: 2rpx solid #eeeeee; display: flex; justify-content: flex-start; align-items: center; .title { font-size: 34rpx; font-weight: bold; .star { color: $base-color; margin-left: 10rpx; font-size: 40rpx; } } .picker { width: 75%; min-height: 128rpx; margin-left: 20rpx; font-size: 30rpx; .iconfont { color: #cbcbcb; } } .input_placeholder { font-size: 30rpx; color: #cbcbcb; } } &-bottom { height: 166rpx; padding: 20rpx 30rpx; paybox-sizing: border-paybox; border-bottom: 2rpx solid #eeeeee; display: flex; justify-content: flex-start; align-items: flex-start; .title { font-size: 34rpx; font-weight: bold; .star { color: $base-color; margin-left: 10rpx; font-size: 40rpx; } } .input_placeholder { font-size: 30rpx; color: #cbcbcb; } .textpaybox { height: 166rpx; .paybox-input { width: 440rpx; height: 120rpx; font-size: 30rpx; } } } } .bottom { position: fixed; bottom: 0; width: 100%; height: 100rpx; padding: 6rpx 30rpx; background-color: #fff; border-top: 1px solid #eeeeee; &-btn { color: #fff; text-align: center; font-size: 32rpx; font-weight: bold; line-height: 88rpx; height: 88rpx; background: linear-gradient(90deg, #F30000 0%, #FE4815 100%); opacity: 1; border-radius: 44px; } } </style>