mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 02:47:25 +08:00
426 lines
11 KiB
Vue
426 lines
11 KiB
Vue
<template>
|
||
<view class="add-address">
|
||
<u-form :model="form" ref="uForm" error-type="toast" :rules="rules">
|
||
<u-form-item label="收货人" label-width="130" prop="name" :border-bottom="true">
|
||
<u-input
|
||
v-model="form.name"
|
||
border="none"
|
||
input-align="right"
|
||
clearable
|
||
placeholder="请输入收货人姓名"
|
||
/>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="手机号码" label-width="130" prop="mobile" :border-bottom="true">
|
||
<u-input
|
||
v-model="form.mobile"
|
||
type="number"
|
||
maxlength="11"
|
||
border="none"
|
||
input-align="right"
|
||
placeholder="请输入收货人手机号码"
|
||
/>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="所在区域" label-width="130" prop="___path" :border-bottom="true">
|
||
<view class="form-value" @click="showPicker">
|
||
{{ form.___path || '请选择所在地区' }}
|
||
</view>
|
||
<template #right>
|
||
<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
|
||
</template>
|
||
</u-form-item>
|
||
|
||
<u-form-item class="detailAddress" label="详细地址" label-width="130" prop="detail" :border-bottom="true">
|
||
<u-input
|
||
type="textarea"
|
||
v-model="form.detail"
|
||
maxlength="100"
|
||
height="150"
|
||
border="none"
|
||
placeholder="街道楼牌号等"
|
||
/>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="地址别名" label-width="130" :border-bottom="false">
|
||
<u-input
|
||
v-model="form.alias"
|
||
border="none"
|
||
input-align="right"
|
||
placeholder="请输入地址别名"
|
||
/>
|
||
</u-form-item>
|
||
|
||
<view class="default-row">
|
||
<u-checkbox
|
||
usedAlone
|
||
shape="circle"
|
||
size="30"
|
||
:active-color="lightColor"
|
||
v-model:checked="form.isDefault"
|
||
label="设为默认地址"
|
||
></u-checkbox>
|
||
</view>
|
||
|
||
<view class="saveBtn" @click="save">保存</view>
|
||
</u-form>
|
||
|
||
<m-city
|
||
:provinceData="list"
|
||
headTitle="区域选择"
|
||
ref="cityPicker"
|
||
@funcValue="getpickerParentValue"
|
||
pickerSize="4"
|
||
></m-city>
|
||
|
||
<uniMap v-if="mapFlag" @close="closeMap" @callback="callBackAddress" />
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { addAddress, editAddress, getAddressDetail } from "@/api/address.js";
|
||
import city from "@/components/m-city/m-city.vue";
|
||
import uniMap from "@/components/uniMap";
|
||
import permision from "@/js_sdk/wa-permission/permission.js";
|
||
export default {
|
||
components: {
|
||
"m-city": city,
|
||
uniMap,
|
||
},
|
||
onShow() {
|
||
// 判断当前系统权限定位是否开启
|
||
},
|
||
methods: {
|
||
// 关闭地图
|
||
closeMap() {
|
||
this.mapFlag = false;
|
||
},
|
||
// 打开地图并访问权限
|
||
clickUniMap() {
|
||
// #ifdef APP-PLUS
|
||
if (plus.os.name == "iOS") {
|
||
// ios系统
|
||
permision.judgeIosPermission("location")
|
||
? (this.mapFlag = true)
|
||
: this.refuseMap();
|
||
} else {
|
||
// 安卓
|
||
this.requestAndroidPermission(
|
||
"android.permission.ACCESS_FINE_LOCATION"
|
||
);
|
||
}
|
||
// #endif
|
||
|
||
// #ifndef APP-PLUS
|
||
this.mapFlag = true;
|
||
// #endif
|
||
},
|
||
|
||
// 如果拒绝权限 提示区设置
|
||
refuseMap() {
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "您已拒绝定位,请开启",
|
||
confirmText: "去设置",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
//打开授权设置
|
||
// #ifndef MP-WEIXIN
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
if (res.platform == "ios") {
|
||
//IOS
|
||
plus.runtime.openURL("app-settings://");
|
||
} else if (res.platform == "android") {
|
||
//安卓
|
||
let main = plus.android.runtimeMainActivity();
|
||
let Intent = plus.android.importClass(
|
||
"android.content.Intent"
|
||
);
|
||
let mIntent = new Intent("android.settings.ACTION_SETTINGS");
|
||
main.startActivity(mIntent);
|
||
}
|
||
},
|
||
});
|
||
// #endif
|
||
}
|
||
},
|
||
});
|
||
},
|
||
|
||
// 获取安卓是否拥有地址权限
|
||
async requestAndroidPermission(permisionID) {
|
||
var result = await permision.requestAndroidPermission(permisionID);
|
||
|
||
if (result == 1) {
|
||
this.mapFlag = true;
|
||
} else {
|
||
this.refuseMap();
|
||
}
|
||
},
|
||
|
||
// 选择地址后数据的回调
|
||
callBackAddress(val) {
|
||
console.log(val)
|
||
uni.showLoading({
|
||
title: "加载中",
|
||
});
|
||
|
||
if (val.regeocode && val) {
|
||
let address = val.regeocode;
|
||
this.form.detail = address.formatted_address; //地址详情
|
||
this.form.___path = val.data.result.name;
|
||
this.form.consigneeAddressIdPath = val.data.result.id; // 地址id分割
|
||
this.form.consigneeAddressPath = val.data.result.name; //地址名称， '，'分割
|
||
this.form.lat = val.latitude; //纬度
|
||
this.form.lon = val.longitude; //经度
|
||
uni.hideLoading();
|
||
}
|
||
|
||
this.mapFlag = !this.mapFlag; //关闭地图
|
||
},
|
||
|
||
// 保存当前 地址
|
||
save() {
|
||
this.$refs.uForm.validate().then(() => {
|
||
const params = { ...this.form };
|
||
delete params.___path;
|
||
|
||
if (Array.isArray(params.consigneeAddressIdPath)) {
|
||
params.consigneeAddressIdPath = params.consigneeAddressIdPath.join(",");
|
||
}
|
||
if (Array.isArray(params.consigneeAddressPath)) {
|
||
params.consigneeAddressPath = params.consigneeAddressPath.join(",");
|
||
}
|
||
|
||
if (!params.id) {
|
||
addAddress(params).then((res) => {
|
||
if (res.data.success) {
|
||
uni.navigateBack();
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.message || "保存失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
delete params.updateBy;
|
||
delete params.updateTime;
|
||
editAddress(params).then((res) => {
|
||
if (res.data.success) {
|
||
uni.navigateBack();
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.message || "保存失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}).catch(() => {});
|
||
},
|
||
|
||
// 三级地址联动回调
|
||
getpickerParentValue(e) {
|
||
// 将需要绑定的地址设置为空，并赋值
|
||
this.form.consigneeAddressIdPath = [];
|
||
this.form.consigneeAddressPath = [];
|
||
let name = "";
|
||
|
||
e.forEach((item, index) => {
|
||
if (item.id) {
|
||
// 遍历数据
|
||
this.form.consigneeAddressIdPath.push(item.id);
|
||
this.form.consigneeAddressPath.push(item.localName);
|
||
name += item.localName;
|
||
this.form.___path = name;
|
||
}
|
||
if (index == e.length - 1) {
|
||
//如果是最后一个
|
||
let _town = item.children.filter((_child) => {
|
||
return _child.id == item.id;
|
||
});
|
||
|
||
this.form.lat = _town[0].center.split(",")[1];
|
||
this.form.lon = _town[0].center.split(",")[0];
|
||
}
|
||
});
|
||
},
|
||
|
||
// 显示三级地址联动
|
||
showPicker() {
|
||
this.$refs.cityPicker.show();
|
||
},
|
||
},
|
||
mounted() {},
|
||
data() {
|
||
return {
|
||
lightColor: this.$lightColor, //高亮颜色
|
||
mapFlag: false, // 地图选择开
|
||
routerVal: "",
|
||
form: {
|
||
detail: "", //地址详情
|
||
name: "", //收货人姓名
|
||
mobile: "", //手机号码
|
||
consigneeAddressIdPath: [], //地址id
|
||
consigneeAddressPath: [], //地址名字
|
||
___path: "", //所在区域
|
||
isDefault: false, //是否默认地址
|
||
},
|
||
// 表单提交校验规则
|
||
rules: {
|
||
name: [
|
||
{
|
||
required: true,
|
||
message: "收货人姓名不能为空",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
mobile: [
|
||
{
|
||
required: true,
|
||
message: "手机号码不能为空",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
return this.$u.test.mobile(value);
|
||
},
|
||
message: "手机号码不正确",
|
||
trigger: ["change", "blur"],
|
||
},
|
||
],
|
||
___path: [
|
||
{
|
||
required: true,
|
||
message: "请选择所在区域",
|
||
trigger: ["change"],
|
||
},
|
||
],
|
||
detail: [
|
||
{
|
||
required: true,
|
||
message: "请填写详细地址",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
},
|
||
list: [
|
||
{
|
||
id: "",
|
||
localName: "请选择",
|
||
children: [],
|
||
},
|
||
],
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
uni.showLoading({
|
||
title: "加载中",
|
||
});
|
||
this.routerVal = option;
|
||
// 如果当前是编辑地址,则需要查询出地址详情信息
|
||
if (option.id) {
|
||
getAddressDetail(option.id).then((res) => {
|
||
const params = res.data.result;
|
||
params.___path = params.consigneeAddressPath;
|
||
this["form"] = params;
|
||
|
||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||
});
|
||
}
|
||
uni.hideLoading();
|
||
},
|
||
// 初始化rules必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||
onReady() {
|
||
this.$refs.uForm.setRules(this.rules);
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
page {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.add-address {
|
||
min-height: 100vh;
|
||
background: #fff;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
:deep(.u-form-item) {
|
||
padding: 0 30rpx;
|
||
min-height: 100rpx;
|
||
}
|
||
|
||
:deep(.u-form-item__body) {
|
||
min-height: 100rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
:deep(.u-form-item__body__left__content__label) {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
}
|
||
|
||
:deep(.u-form-item__body__right__content__slot) {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
:deep(.u-input) {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
:deep(.u-input__content__field-wrapper__field) {
|
||
font-size: 28rpx !important;
|
||
color: #666 !important;
|
||
}
|
||
|
||
.form-value {
|
||
width: 100%;
|
||
text-align: right;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.detailAddress {
|
||
:deep(.u-form-item__body) {
|
||
align-items: flex-start;
|
||
padding-top: 24rpx;
|
||
padding-bottom: 24rpx;
|
||
min-height: auto;
|
||
}
|
||
|
||
:deep(.u-form-item__body__left) {
|
||
padding-top: 8rpx;
|
||
}
|
||
|
||
:deep(.u-form-item__body__right__content__slot) {
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
}
|
||
}
|
||
|
||
.default-row {
|
||
padding: 24rpx 30rpx;
|
||
}
|
||
|
||
:deep(.default-row .u-checkbox__label) {
|
||
font-size: 28rpx;
|
||
color: $font-color-light;
|
||
}
|
||
|
||
.saveBtn {
|
||
margin: 40rpx 30rpx 0;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
background: $light-color;
|
||
color: #fff;
|
||
border-radius: 40rpx;
|
||
}
|
||
</style> |