510 lines
11 KiB
Vue
510 lines
11 KiB
Vue
<!-- 修改地址 -->
|
|
<template>
|
|
<navbar_neadVue title="修改地址" background_color="#ffffff"></navbar_neadVue>
|
|
|
|
<view style="position: fixed; z-index: -1; background-color: #fbfbfb; top: 0; bottom: 0;left: 0;right: 0;"></view>
|
|
|
|
|
|
<view>
|
|
<up-toast ref="uToastRef"></up-toast>
|
|
<up-cell-group title-bg-color="rgb(243, 244, 246)">
|
|
</up-cell-group>
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="boxview">
|
|
<text>收货人</text>
|
|
<view style="viewindex">
|
|
<input v-model="form.name" placeholder="名字" class="Ninput" placeholder-class="plainput" />
|
|
<text v-if="phoneError" class="error">{{ phoneError }}</text>
|
|
</view>
|
|
</view>
|
|
<view style="height: 47rpx;"></view>
|
|
<view class="boxview">
|
|
<text>手机号码</text>
|
|
<view style="viewindex">
|
|
<input v-model="form.phone" placeholder="手机号" style="margin-left: 38rpx;" class="Ninput"
|
|
placeholder-class="plainput" />
|
|
<text v-if="phoneError" class="error">{{ phoneError }}</text>
|
|
</view>
|
|
</view>
|
|
<view style="height: 47rpx;"></view>
|
|
<view class="boxview">
|
|
<text style="vertical-align: middle;">所在地区</text>
|
|
<view style="viewindex">
|
|
<picker mode="multiSelector" class="pickerclass" :range="range" :value="value" @change="onPickerChange"
|
|
@columnchange="onColumnChange">
|
|
<view style="float: right; margin: 20rpx;">
|
|
<image style="width: 16rpx;height: 27rpx;" src="../../static/images/sign/rig.png"></image>
|
|
</view>
|
|
<view :class="['picker', { 'active-text': isPickerTapped }]">
|
|
{{ displayText }}
|
|
</view>
|
|
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view style="height: 47rpx;"></view>
|
|
<view class="boxview">
|
|
<text style="margin-top: 10rpx;">详细地址</text>
|
|
<view style="viewindex">
|
|
<textarea v-model="form.detailedAddress" maxlength="200" class="textarea"
|
|
placeholder-class="textareaclass" placeholder="小区楼栋/村落名称"></textarea>
|
|
<text v-if="phoneError" class="error">{{ phoneError }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="havebottom">
|
|
<image v-if="IsHave == true" @click="IsShow()" class="havebottomimage"
|
|
src="../../static/images/sign/isH.png"></image>
|
|
<image v-else @click="IsShow()" class="havebottomimage" src="../../static/images/sign/IsHave.png"></image>
|
|
<text :class="IsHave == true ? 'havebotomisshowtext':'havebottomtext'">常用地址</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="butview" @click="submitForm()">
|
|
<view class="but">
|
|
<text>保存</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
reactive,
|
|
ref,
|
|
watch,
|
|
getCurrentInstance,
|
|
onMounted,
|
|
computed
|
|
} from "vue";
|
|
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance();
|
|
|
|
import navbar_neadVue from "@/pages/common/navbar/navbar_nead.vue";
|
|
import {
|
|
addressData
|
|
} from "./data";
|
|
|
|
import {
|
|
listSignAddress,
|
|
getSignAddress,
|
|
delSignAddress,
|
|
addSignAddress,
|
|
updateSignAddress,
|
|
listSignAddressUser,
|
|
listSignAddressid
|
|
} from "@/api/signln/SignAddress/SignAddress";
|
|
|
|
const IsHave = ref(false)
|
|
|
|
// 定义响应式数据
|
|
const title = ref('');
|
|
const description = ref('');
|
|
const closable = ref(true);
|
|
const IsAlert = ref(false)
|
|
const phoneError = ref('');
|
|
|
|
const form = ref({
|
|
name: null,
|
|
phone: null,
|
|
address: null,
|
|
detailedAddress: null,
|
|
inCommonUse: null,
|
|
userId: null
|
|
});
|
|
import {
|
|
useRouter,
|
|
useRoute
|
|
} from 'vue-router';
|
|
const route = useRoute();
|
|
//接受返回的addressid
|
|
onMounted(() => {
|
|
console.log(route.query.id)
|
|
|
|
function getList() {
|
|
form.id = route.query.id;
|
|
if (route.query.id != undefined) {
|
|
listSignAddressid(form).then(response => {
|
|
form.value = response;
|
|
displayText.value = response.address;
|
|
console.log(response)
|
|
});
|
|
}
|
|
}
|
|
getList();
|
|
});
|
|
|
|
|
|
function IsShow() {
|
|
IsHave.value = !IsHave.value;
|
|
}
|
|
|
|
const show = ref(false);
|
|
const list = ref([{
|
|
type: 'error',
|
|
icon: false,
|
|
title: '失败主题',
|
|
message: "一弦一柱思华年",
|
|
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
|
|
}])
|
|
|
|
// 计算属性
|
|
const getIcon = computed(() => {
|
|
return path => {
|
|
return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
|
|
}
|
|
});
|
|
|
|
// 方法
|
|
const uToastRef = ref(null)
|
|
|
|
function showToast(params) {
|
|
uToastRef.value.show({
|
|
...params,
|
|
complete() {
|
|
params.url && uni.navigateTo({
|
|
url: params.url
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
const range = ref([
|
|
[],
|
|
[],
|
|
[]
|
|
]);
|
|
const value = ref([0, 0, 0]);
|
|
const displayText = ref('请选择地址');
|
|
|
|
const isPickerTapped = ref(false);
|
|
const initRange = () => {
|
|
const provinces = addressData.map(province => province.name);
|
|
const cities = addressData[0].cities.map(city => city.name);
|
|
const districts = addressData[0].cities[0].districts;
|
|
|
|
range.value = [provinces, cities, districts];
|
|
};
|
|
|
|
const onColumnChange = (event) => {
|
|
const column = event.detail.column;
|
|
const val = event.detail.value;
|
|
|
|
let updatedRange = [...range.value];
|
|
let selectedValues = [...value.value];
|
|
|
|
selectedValues[column] = val;
|
|
|
|
if (column === 0) {
|
|
const selectedProvince = addressData[val];
|
|
const cities = selectedProvince.cities.map(city => city.name);
|
|
const districts = selectedProvince.cities[0].districts;
|
|
|
|
updatedRange[1] = cities;
|
|
updatedRange[2] = districts;
|
|
selectedValues[1] = 0;
|
|
selectedValues[2] = 0;
|
|
} else if (column === 1) {
|
|
const selectedProvinceIndex = selectedValues[0];
|
|
const selectedProvince = addressData[selectedProvinceIndex];
|
|
const selectedCity = selectedProvince.cities[val];
|
|
const districts = selectedCity.districts;
|
|
|
|
updatedRange[2] = districts;
|
|
selectedValues[2] = 0;
|
|
}
|
|
|
|
range.value = updatedRange;
|
|
value.value = selectedValues;
|
|
};
|
|
|
|
const onPickerChange = (event) => {
|
|
const selectedValues = event.detail.value;
|
|
const selectedProvince = addressData[selectedValues[0]].name;
|
|
const selectedCity = addressData[selectedValues[0]].cities[selectedValues[1]].name;
|
|
const selectedDistrict = addressData[selectedValues[0]].cities[selectedValues[1]].districts[selectedValues[2]];
|
|
|
|
|
|
displayText.value = `${selectedProvince} ${selectedCity} ${selectedDistrict}`;
|
|
isPickerTapped.value = true;
|
|
|
|
form.value.address = displayText.value;
|
|
|
|
};
|
|
|
|
const onPickerTap = () => {
|
|
isPickerTapped.value = true;
|
|
};
|
|
|
|
initRange();
|
|
|
|
// 监听 phone 的变化
|
|
watch(form.value, (newvalue, oldvalue) => {
|
|
validatePhone();
|
|
if (newvalue) {
|
|
phoneError.value = '';
|
|
}
|
|
});
|
|
|
|
const validatePhone = () => {
|
|
|
|
// if (form.value.name == null || form.value.name.length == 0) {
|
|
// phoneError.value = "手机号码不能为空";
|
|
// }
|
|
|
|
if (form.value.name == null) {
|
|
phoneError.value = "手机号码不能为空";
|
|
}
|
|
if (form.value.phone == null) {
|
|
phoneError.value = "手机号码不能为空";
|
|
}
|
|
if (form.value.detailedAddress == null) {
|
|
phoneError.value = "手机号码不能为空";
|
|
}
|
|
};
|
|
|
|
|
|
function submitForm() {
|
|
|
|
var ls = list.value[0];
|
|
if (form.value.name == null || form.value.name.lenght == 0) {
|
|
ls.message = "收货人姓名不能为空";
|
|
showToast(ls);
|
|
return;
|
|
}
|
|
if (form.value.phone == null || form.value.name.phone == 0) {
|
|
ls.message = "手机号码不能为空";
|
|
showToast(ls);
|
|
return;
|
|
}
|
|
const regex = /^1[3-9]\d{9}$/;
|
|
if (!regex.test(form.value.phone)) {
|
|
ls.message = "手机号码格式错误";
|
|
showToast(ls);
|
|
return;
|
|
}
|
|
if (form.value.address == null) {
|
|
ls.message = "选择省、市、区";
|
|
showToast(ls);
|
|
return;
|
|
}
|
|
if (form.value.detailedAddress == null || form.value.name.detailedAddress == 0) {
|
|
ls.message = "详细地址不能为空";
|
|
showToast(ls);
|
|
return;
|
|
}
|
|
|
|
|
|
if (IsHave.value == false) {
|
|
form.value.inCommonUse = 0;
|
|
} else {
|
|
form.value.inCommonUse = 1;
|
|
}
|
|
updateSignAddress(form.value).then(response => {
|
|
if (response.code == 200) {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
//将值设置为 success 或者直接不用写icon这个参数
|
|
icon: 'success',
|
|
//显示持续时间为 2秒
|
|
duration: 2000
|
|
})
|
|
|
|
proxy.$tab.navigateTo("/pages/signln/signaddress")
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: '保存失败',
|
|
//将值设置为 success 或者直接不用写icon这个参数
|
|
icon: 'errory',
|
|
//显示持续时间为 2秒
|
|
duration: 2000
|
|
})
|
|
}
|
|
getList();
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import '@/pages/common/navbar/navbar.css';
|
|
|
|
.error {
|
|
position: fixed;
|
|
color: red;
|
|
left: 200rpx;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.butview {
|
|
width: 750rpx;
|
|
height: 136rpx;
|
|
background: #ffffff;
|
|
position: absolute;
|
|
bottom: 68rpx;
|
|
}
|
|
|
|
.but {
|
|
width: 686rpx;
|
|
height: 88rpx;
|
|
border-radius: 44rpx 44rpx 44rpx 44rpx;
|
|
background: #c0f0ec;
|
|
margin-left: 32rpx;
|
|
}
|
|
|
|
.but>text {
|
|
font-weight: 600;
|
|
width: 123rpx;
|
|
height: 30rpx;
|
|
font-size: 30rpx;
|
|
text-align: left;
|
|
color: #00CCBE;
|
|
display: block;
|
|
margin: auto;
|
|
line-height: 88rpx;
|
|
margin-top: 22rpx;
|
|
}
|
|
|
|
.box {
|
|
width: 702rpx;
|
|
height: 676rpx;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
background: #ffffff;
|
|
margin: 24rpx;
|
|
}
|
|
|
|
.havebottom {
|
|
margin-left: 24rpx;
|
|
margin-top: 50rpx;
|
|
}
|
|
|
|
.havebottomimage {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.havebottomtext {
|
|
font-weight: Regular;
|
|
width: 111rpx;
|
|
height: 28rpx;
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
color: #999999;
|
|
margin-left: 12rpx;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.havebotomisshowtext {
|
|
font-weight: Regular;
|
|
width: 111rpx;
|
|
height: 28rpx;
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
color: #00CCBE;
|
|
margin-left: 12rpx;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.viewindex {
|
|
width: 502rpx;
|
|
height: 68rpx;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
|
|
}
|
|
|
|
.Ninput {
|
|
width: 502rpx;
|
|
height: 68rpx;
|
|
padding-left: 24rpx;
|
|
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
vertical-align: middle;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
background: #f6f6f6;
|
|
|
|
margin-left: 66rpx;
|
|
}
|
|
|
|
.plainput {
|
|
font-weight: Regular;
|
|
/* width: 56rpx; */
|
|
/* height: 28rpx; */
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
color: #B9B9B9;
|
|
}
|
|
|
|
.boxview {
|
|
display: flex;
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.boxview>text {
|
|
display: block;
|
|
margin: auto 0;
|
|
|
|
font-weight: 600;
|
|
/* width: 86rpx; */
|
|
height: 30rpx;
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
color: #000000;
|
|
}
|
|
|
|
.textareaclass {
|
|
width: 502rpx;
|
|
height: 200rpx;
|
|
font-weight: Regular;
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
color: #B9B9B9;
|
|
}
|
|
|
|
.textarea {
|
|
width: 502rpx;
|
|
height: 200rpx;
|
|
padding-left: 24rpx;
|
|
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
vertical-align: middle;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
background: #f6f6f6;
|
|
|
|
margin-left: 38rpx;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.picker {
|
|
|
|
line-height: 68rpx;
|
|
vertical-align: middle;
|
|
/* color: #000000; */
|
|
padding-left: 24rpx;
|
|
}
|
|
|
|
.pickerclass {
|
|
width: 502rpx;
|
|
height: 68rpx;
|
|
border-radius: 24px 24px 24px 24px;
|
|
background: #f6f6f6;
|
|
margin-top: 8rpx;
|
|
margin-left: 38rpx;
|
|
color: #B9B9B9;
|
|
}
|
|
|
|
.picker.active-text {
|
|
color: #000000;
|
|
/* 点击后的提示文字颜色 */
|
|
}
|
|
</style> |