mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2025-12-18 08:25:55 +08:00
commit message
This commit is contained in:
Chopper
358
pages/mine/address/add.vue
Normal file
358
pages/mine/address/add.vue
Normal file
@@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<view class="add-address">
|
||||
<div class="uForm">
|
||||
<u-form :border-bottom="false" :model="form" ref="uForm" :error-type="['toast']" :rule="rules">
|
||||
<view class="selectAddress" @click="clickUniMap">
|
||||
选择收货地址
|
||||
</view>
|
||||
<u-form-item class="border" label="收货人" label-width="130" prop="name">
|
||||
<u-input v-model="form.name" placeholder="请输入收货人姓名" />
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="手机号码" label-width="130" prop="mobile">
|
||||
<u-input v-model="form.mobile" type="number" maxlength="11" placeholder="请输入收货人手机号码" />
|
||||
</u-form-item>
|
||||
<u-form-item label="所在区域" label-width="130" prop="___path">
|
||||
<u-input v-model="form.___path" type="select" @click="showPicker" placeholder="请选择所在地区" />
|
||||
</u-form-item>
|
||||
<u-form-item class="detailAddress" label="详细地址" label-width="130" prop="detail">
|
||||
<u-input type="textarea" v-model="form.detail" maxlength="100" height="150" placeholder="街道楼牌号等" />
|
||||
</u-form-item>
|
||||
<u-form-item label="地址别名" label-width="130">
|
||||
<u-input v-model="form.alias" placeholder="请输入地址别名" />
|
||||
</u-form-item>
|
||||
<u-checkbox-group shape="circle" size="30">
|
||||
<u-checkbox :active-color="lightColor" v-model="form.isDefault">设为默认地址</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
|
||||
<div class="saveBtn" @click="save">保存</div>
|
||||
</u-form>
|
||||
|
||||
<m-city :provinceData="list" headTitle="区域选择" ref="cityPicker" @funcValue="getpickerParentValue" pickerSize="4"></m-city>
|
||||
|
||||
<uniMap v-if="mapFlage" @close="closeMap" @callback="callBackAddress" />
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { addAddress, editAddress, getAddressDetail } from "@/api/address.js";
|
||||
import gkcity from "@/components/m-city/m-city.vue";
|
||||
import uniMap from "./uniMap";
|
||||
import permision from "@/js_sdk/wa-permission/permission.js";
|
||||
export default {
|
||||
components: {
|
||||
"m-city": gkcity,
|
||||
uniMap,
|
||||
},
|
||||
onShow() {
|
||||
// 判断当前系统权限定位是否开启
|
||||
},
|
||||
methods: {
|
||||
// 关闭地图
|
||||
closeMap() {
|
||||
this.mapFlage = false;
|
||||
},
|
||||
// 打开地图并访问权限
|
||||
clickUniMap() {
|
||||
// #ifdef APP-PLUS
|
||||
if (plus.os.name == "iOS") {
|
||||
// ios系统
|
||||
permision.judgeIosPermission("location")
|
||||
? (this.mapFlage = true)
|
||||
: this.refuseMapOuther() ;
|
||||
} else {
|
||||
// 安卓
|
||||
this.requestAndroidPermission(
|
||||
"android.permission.ACCESS_FINE_LOCATION"
|
||||
);
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-PLUS
|
||||
this.mapFlage = true;
|
||||
// #endif
|
||||
},
|
||||
|
||||
// 如果拒绝权限 提示区设置
|
||||
refuseMapOuther() {
|
||||
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.mapFlage = true;
|
||||
} else {
|
||||
this.refuseMapOuther();
|
||||
}
|
||||
},
|
||||
|
||||
callBackAddress(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.mapFlage = !this.mapFlage;
|
||||
},
|
||||
save() {
|
||||
this.$refs.uForm.validate((valid) => {
|
||||
if (valid) {
|
||||
let pages = getCurrentPages(); //获取页面栈
|
||||
let beforePage = pages[pages.length - 2]; //上个页面
|
||||
console.log(beforePage);
|
||||
if (!this.form.id) {
|
||||
delete this.form.___path;
|
||||
addAddress(this.form).then((res) => {
|
||||
if (res.data.success) {
|
||||
if (this.routerVal.type == "order") {
|
||||
uni.redirectTo({
|
||||
url: `/pages/mine/address/address?way=${this.routerVal.way}`,
|
||||
});
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: `/pages/mine/address/addressManage`,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
delete this.form.___path;
|
||||
delete this.form.updateBy;
|
||||
delete this.form.updateTime;
|
||||
editAddress(this.form).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.navigateTo({
|
||||
url: `/${beforePage.route}`,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("验证失败");
|
||||
}
|
||||
});
|
||||
},
|
||||
getpickerParentValue(e) {
|
||||
this.form.consigneeAddressIdPath = [];
|
||||
this.form.consigneeAddressPath = [];
|
||||
let name = "";
|
||||
e.forEach((item, index) => {
|
||||
console.log(item);
|
||||
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(",")[0];
|
||||
this.form.lon = _town[0].center.split(",")[1];
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
showPicker() {
|
||||
this.$refs.cityPicker.show();
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
lightColor: this.$lightColor,
|
||||
addSyncData: "",
|
||||
mapFlage: false,
|
||||
longitude: "",
|
||||
markers: [],
|
||||
latitude: "",
|
||||
routerVal: "",
|
||||
show: false,
|
||||
form: {
|
||||
detail: "",
|
||||
name: "",
|
||||
mobile: "",
|
||||
consigneeAddressIdPath: [],
|
||||
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.$set(this, "form", params);
|
||||
|
||||
uni.hideLoading();
|
||||
});
|
||||
}
|
||||
uni.hideLoading();
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.detailAddress {
|
||||
/deep/ .u-form-item--left {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
.saveBtn,
|
||||
.selectAddress {
|
||||
height: 70rpx;
|
||||
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
background: $aider-light-color;
|
||||
color: #fff;
|
||||
width: 70%;
|
||||
margin: 40rpx auto 0 auto;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.selectAddress {
|
||||
margin-top: 40rpx;
|
||||
background: #fff;
|
||||
|
||||
color: $aider-light-color;
|
||||
border: 2rpx solid $aider-light-color;
|
||||
}
|
||||
|
||||
.uForm {
|
||||
width: 94%;
|
||||
overflow: hidden;
|
||||
left: 3%;
|
||||
position: relative;
|
||||
top: 2%;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 0 0 40rpx 0;
|
||||
}
|
||||
.add-address {
|
||||
width: 100%;
|
||||
padding-top: 3%;
|
||||
|
||||
/deep/ .u-form-item {
|
||||
background-color: #fff;
|
||||
padding: 24rpx 30rpx;
|
||||
}
|
||||
.u-btn {
|
||||
margin: 30rpx 30rpx 0 30rpx;
|
||||
background-color: $main-color;
|
||||
}
|
||||
|
||||
/deep/.u-checkbox {
|
||||
margin: 30rpx 30rpx 0 30rpx;
|
||||
|
||||
.u-label-class.u-checkbox__label {
|
||||
color: $font-color-light;
|
||||
font-size: $font-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .u-checkbox__label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
343
pages/mine/address/address.vue
Normal file
343
pages/mine/address/address.vue
Normal file
@@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<view class="address">
|
||||
<view class="bar"></view>
|
||||
<empty v-if="empty"></empty>
|
||||
<view class="list" v-else>
|
||||
<view class="item c-content" v-for="(item, index) in addressList" :key="index">
|
||||
<view class="basic" @click="selectAddressData(item)">
|
||||
<text>{{ item.name }}</text>
|
||||
<text>{{ item.mobile }}</text>
|
||||
<text class="default" v-show="item.isDefault">默认</text>
|
||||
<view>
|
||||
<div class="region">
|
||||
<span v-if="item.consigneeAddressPath[0]">{{
|
||||
item.consigneeAddressPath[0]
|
||||
}}</span>
|
||||
<span v-if="item.consigneeAddressPath[1]">{{
|
||||
item.consigneeAddressPath[1]
|
||||
}}</span>
|
||||
<span v-if="item.consigneeAddressPath[2]">{{
|
||||
item.consigneeAddressPath[2]
|
||||
}}</span>
|
||||
<span v-if="item.consigneeAddressPath[3]">{{
|
||||
item.consigneeAddressPath[3]
|
||||
}}</span>
|
||||
<span>
|
||||
{{ item.detail }}
|
||||
</span>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<view class="edit">
|
||||
<view class="relative" @click="setDefault(item)">
|
||||
<view v-if="item.isDefault" class="alifont icon-xuanzhong"></view>
|
||||
<text v-else class="unchecked"></text>
|
||||
<text>{{ item.isDefault ? "默认地址" : "设为默认" }}</text>
|
||||
</view>
|
||||
<view class="relative">
|
||||
<view class="alifont icon-bianji-copy"></view>
|
||||
<text class="mr-40" @click="addAddress(item.id)">编辑</text>
|
||||
<view class="alifont icon-lajitong"></view>
|
||||
<text @click="delAddress(item.id)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 100px"></view>
|
||||
</view>
|
||||
<button type="default" class="btn" @click="addAddress('')">
|
||||
<u-icon name="plus-circle"></u-icon>
|
||||
添加新收货人
|
||||
</button>
|
||||
<u-action-sheet :list="delList" :tips="tips" v-model="showAction" @click="deleteAddressMessage"></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Trade from "@/api/trade";
|
||||
import * as API_Address from "@/api/address.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ifOnShow: false, //组件加载为true 离开为false
|
||||
activeClass: "activeClass",
|
||||
addressList: [],
|
||||
showAction: false,
|
||||
empty: false,
|
||||
delList: [
|
||||
{
|
||||
text: "确定",
|
||||
},
|
||||
],
|
||||
tips: {
|
||||
text: "确定要删除该收货人信息吗？",
|
||||
},
|
||||
delId: "",
|
||||
addid: "",
|
||||
routerVal: "",
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 50,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
onLoad: function (val) {
|
||||
this.routerVal = val;
|
||||
},
|
||||
onShow() {
|
||||
this.addressList = [];
|
||||
this.getAddressList();
|
||||
},
|
||||
onHide() {},
|
||||
onBackPress(e) {
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/fillorder?way=" + this.routerVal.way,
|
||||
});
|
||||
return true;
|
||||
},
|
||||
|
||||
methods: {
|
||||
async selectAddressData(val) {
|
||||
await API_Trade.setAddressId(val.id, this.routerVal.way);
|
||||
|
||||
uni.redirectTo({
|
||||
url: `/pages/order/fillorder?way=${this.routerVal.way}`,
|
||||
});
|
||||
},
|
||||
//获取地址列表
|
||||
getAddressList() {
|
||||
uni.showLoading();
|
||||
|
||||
API_Address.getAddressList(
|
||||
this.params.pageNumber,
|
||||
this.params.pageSize
|
||||
).then((res) => {
|
||||
console.log("加载");
|
||||
if (res.data.result.records.length == 0) {
|
||||
this.empty = true;
|
||||
} else {
|
||||
res.data.result.records.forEach((item) => {
|
||||
item.consigneeAddressPath = item.consigneeAddressPath.split(",");
|
||||
});
|
||||
|
||||
this.$set(this, "addressList", res.data.result.records);
|
||||
|
||||
|
||||
console.log(this.addressList);
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
//删除地址
|
||||
delAddress(id) {
|
||||
this.delId = id;
|
||||
this.showAction = true;
|
||||
},
|
||||
deleteAddressMessage() {
|
||||
API_Address.deleteAddress(this.delId).then((res) => {
|
||||
if (res.statusCode == 200) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "删除成功",
|
||||
});
|
||||
this.getAddressList();
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: res.data.message,
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//新建。编辑地址
|
||||
addAddress(id) {
|
||||
console.log("点击");
|
||||
if (id) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/mine/address/add?id=" +
|
||||
id +
|
||||
"&way=" +
|
||||
this.routerVal.way +
|
||||
"&type=order",
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/mine/address/add?way=" + this.routerVal.way + "&type=order",
|
||||
});
|
||||
}
|
||||
},
|
||||
//设为默认地址
|
||||
setDefault(item) {
|
||||
delete item.updateBy;
|
||||
delete item.updateTime;
|
||||
delete item.deleteFlag;
|
||||
|
||||
item.isDefault ? "" : (item.isDefault = !item.isDefault);
|
||||
|
||||
API_Address.editAddress(item).then((res) => {
|
||||
uni.showToast({
|
||||
title: "设置默认地址成功",
|
||||
icon: "none",
|
||||
});
|
||||
this.getAddressList();
|
||||
});
|
||||
},
|
||||
|
||||
// 地址id
|
||||
addId(params) {
|
||||
API_Trade.setAddressId(params.address_id).then((res) => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.active {
|
||||
background: #f19736;
|
||||
}
|
||||
|
||||
.alifont {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.region {
|
||||
span {
|
||||
margin: 0 4rpx !important;
|
||||
}
|
||||
}
|
||||
.address {
|
||||
.bar {
|
||||
height: 20rpx;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background: url("/pages/floor/imgs/line.png") no-repeat;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(1, 0.8);
|
||||
}
|
||||
.default {
|
||||
border: 1px solid #ff6262;
|
||||
color: #ff6262;
|
||||
font-size: 22rpx;
|
||||
border-radius: 6rpx;
|
||||
align-self: center;
|
||||
padding: 2rpx 20rpx;
|
||||
}
|
||||
.list {
|
||||
.item:hover {
|
||||
background: #ededed;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-top: 20rpx;
|
||||
font-size: $font-base;
|
||||
color: #666;
|
||||
|
||||
.basic {
|
||||
padding: 30rpx;
|
||||
line-height: 1.5em;
|
||||
border-bottom: 1px solid $border-color-light;
|
||||
|
||||
:nth-child(2) {
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
:nth-child(4) {
|
||||
color: $font-color-light;
|
||||
font-size: $font-sm;
|
||||
|
||||
margin-top: 10rpx;
|
||||
|
||||
text:nth-child(2) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
height: 80rpx;
|
||||
font-size: $font-sm;
|
||||
color: $font-color-light;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.unchecked {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #e0e0e0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 8rpx;
|
||||
position: relative;
|
||||
top: -2rpx;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
view:nth-child(1) {
|
||||
view:nth-child(1) {
|
||||
font-size: $font-base;
|
||||
color: $main-color;
|
||||
margin-right: 8rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
text {
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
|
||||
.alifont {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.icon-bianji-copy {
|
||||
font-size: 28rpx;
|
||||
position: relative;
|
||||
top: 2rpx;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.icon-lajitong {
|
||||
position: relative;
|
||||
top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.mr-40 {
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: $light-color;
|
||||
position: fixed;
|
||||
width: 690rpx;
|
||||
bottom: 60rpx;
|
||||
height: 80rpx;
|
||||
left: 30rpx;
|
||||
font-size: 30rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
.u-icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
329
pages/mine/address/addressManage.vue
Normal file
329
pages/mine/address/addressManage.vue
Normal file
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<view class="address">
|
||||
<view class="bar"></view>
|
||||
<empty v-if="empty"></empty>
|
||||
<view class="list" v-else>
|
||||
<view class="item c-content" v-for="(item, index) in addressList" :key="index">
|
||||
|
||||
<view class="basic">
|
||||
<text>{{ item.name }}</text>
|
||||
<text>{{ item.mobile }}</text>
|
||||
<text class="default" v-show="item.isDefault">默认</text>
|
||||
<view>
|
||||
<div class="region">
|
||||
<span v-if="item.consigneeAddressPath[0]">{{
|
||||
item.consigneeAddressPath[0]
|
||||
}}</span>
|
||||
<span v-if="item.consigneeAddressPath[1]">{{
|
||||
item.consigneeAddressPath[1]
|
||||
}}</span>
|
||||
<span v-if="item.consigneeAddressPath[2]">{{
|
||||
item.consigneeAddressPath[2]
|
||||
}}</span>
|
||||
|
||||
<span v-if="item.consigneeAddressPath[3]">{{
|
||||
item.consigneeAddressPath[3]
|
||||
}}</span>
|
||||
<span>
|
||||
{{ item.detail }}
|
||||
</span>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<view class="edit">
|
||||
<view class="relative" @click="setDefault(item)">
|
||||
<view v-if="item.isDefault" class="alifont icon-xuanzhong"></view>
|
||||
<text v-else class="unchecked"></text>
|
||||
<text>{{ item.isDefault ? "默认地址" : "设为默认" }}</text>
|
||||
</view>
|
||||
<view class="relative">
|
||||
<view class="alifont icon-bianji-copy"></view>
|
||||
<text class="mr-40" @click="addAddress(item.id)">编辑</text>
|
||||
<view class="alifont icon-lajitong"></view>
|
||||
<text @click="delAddress(item.id)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 100px"></view>
|
||||
</view>
|
||||
|
||||
<button type="default" class="btn" @click="addAddress('')">
|
||||
<u-icon name="plus-circle"></u-icon>
|
||||
添加新收货人
|
||||
</button>
|
||||
|
||||
<u-action-sheet :list="delList" :tips="tips" v-model="showAction" @click="deleteAddressMessage"></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Trade from "@/api/trade";
|
||||
import * as API_Address from "@/api/address.js";
|
||||
import storage from "@/utils/storage.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeClass: "activeClass",
|
||||
addressList: [],
|
||||
showAction: false,
|
||||
empty: false,
|
||||
delList: [
|
||||
{
|
||||
text: "确定",
|
||||
},
|
||||
],
|
||||
tips: {
|
||||
text: "确定要删除该收货人信息吗？",
|
||||
},
|
||||
delId: "",
|
||||
addid: "",
|
||||
routerVal: "",
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 1000,
|
||||
},
|
||||
};
|
||||
},
|
||||
// 返回上一级
|
||||
onBackPress(e) {
|
||||
uni.switchTab({
|
||||
url: "/pages/tabbar/user/my",
|
||||
});
|
||||
return true;
|
||||
},
|
||||
onLoad: function (val) {
|
||||
this.routerVal = val;
|
||||
},
|
||||
onShow() {
|
||||
let userInfo = storage.getUserInfo();
|
||||
|
||||
if (userInfo && userInfo.id) {
|
||||
this.getAddressList();
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getAddressList();
|
||||
uni.stopPullDownRefresh();
|
||||
},
|
||||
methods: {
|
||||
//获取地址列表
|
||||
getAddressList() {
|
||||
uni.showLoading();
|
||||
|
||||
API_Address.getAddressList(
|
||||
this.params.pageNumber,
|
||||
this.params.pageSize
|
||||
).then((res) => {
|
||||
if (res.data.result.records.length == 0) {
|
||||
this.empty = true;
|
||||
} else {
|
||||
res.data.result.records.forEach((item) => {
|
||||
item.consigneeAddressPath = item.consigneeAddressPath.split(",");
|
||||
});
|
||||
|
||||
this.addressList = res.data.result.records;
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
//删除地址
|
||||
delAddress(id) {
|
||||
this.delId = id;
|
||||
this.showAction = true;
|
||||
},
|
||||
deleteAddressMessage() {
|
||||
API_Address.deleteAddress(this.delId).then((res) => {
|
||||
if (res.statusCode == 200) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "删除成功",
|
||||
});
|
||||
this.getAddressList();
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: res.data.message,
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//新建。编辑地址
|
||||
addAddress(id) {
|
||||
if (id) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/address/add?id=" + id,
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/address/add",
|
||||
});
|
||||
}
|
||||
},
|
||||
//设为默认地址
|
||||
setDefault(item) {
|
||||
delete item.updateBy;
|
||||
delete item.updateTime;
|
||||
delete item.deleteFlag;
|
||||
|
||||
item.isDefault ? "" : (item.isDefault = !item.isDefault);
|
||||
|
||||
API_Address.editAddress(item).then((res) => {
|
||||
uni.showToast({
|
||||
title: "设置默认地址成功",
|
||||
icon: "none",
|
||||
});
|
||||
this.getAddressList();
|
||||
});
|
||||
},
|
||||
|
||||
// 地址id
|
||||
addId(params) {
|
||||
API_Trade.setAddressId(params.address_id).then((res) => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.active {
|
||||
background: #f19736;
|
||||
}
|
||||
|
||||
.alifont {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.region {
|
||||
span {
|
||||
margin: 0 4rpx !important;
|
||||
}
|
||||
}
|
||||
.address {
|
||||
.bar {
|
||||
height: 20rpx;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background: url("/pages/floor/imgs/line.png") no-repeat;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(1, 0.8);
|
||||
}
|
||||
.default {
|
||||
border: 1px solid #ff6262;
|
||||
color: #ff6262;
|
||||
font-size: 22rpx;
|
||||
border-radius: 6rpx;
|
||||
align-self: center;
|
||||
padding: 2rpx 20rpx;
|
||||
}
|
||||
.list {
|
||||
.item {
|
||||
margin-top: 20rpx;
|
||||
font-size: $font-base;
|
||||
color: #666;
|
||||
|
||||
.basic {
|
||||
padding: 30rpx;
|
||||
line-height: 1.5em;
|
||||
border-bottom: 1px solid $border-color-light;
|
||||
|
||||
:nth-child(2) {
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
:nth-child(4) {
|
||||
color: $font-color-light;
|
||||
font-size: $font-sm;
|
||||
|
||||
margin-top: 10rpx;
|
||||
|
||||
text:nth-child(2) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
height: 80rpx;
|
||||
font-size: $font-sm;
|
||||
color: $font-color-light;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.unchecked {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #e0e0e0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 8rpx;
|
||||
position: relative;
|
||||
top: -2rpx;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
view:nth-child(1) {
|
||||
view:nth-child(1) {
|
||||
font-size: $font-base;
|
||||
color: $main-color;
|
||||
margin-right: 8rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
text {
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
|
||||
.alifont {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.icon-bianji-copy {
|
||||
font-size: 28rpx;
|
||||
position: relative;
|
||||
top: 2rpx;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.icon-lajitong {
|
||||
position: relative;
|
||||
top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.mr-40 {
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: $light-color;
|
||||
position: fixed;
|
||||
width: 690rpx;
|
||||
bottom: 60rpx;
|
||||
height: 80rpx;
|
||||
left: 30rpx;
|
||||
font-size: 30rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
.u-icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
pages/mine/address/map.vue
Normal file
66
pages/mine/address/map.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
|
||||
|
||||
|
||||
<!-- 自定义地图组件 -->
|
||||
<map
|
||||
class="map"
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
scale="18"
|
||||
:markers="markers"
|
||||
:show-location="true"
|
||||
@markertap="markertap"
|
||||
@updated="mapUpdated"
|
||||
@tap="closeMapMarker"
|
||||
></map>
|
||||
</template>
|
||||
<script>
|
||||
import amap from "@/js_sdk/amap-wx.130.js";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
this.initMap();
|
||||
},
|
||||
methods: {
|
||||
markertap() {},
|
||||
mapUpdated() {},
|
||||
closeMapMarker() {},
|
||||
|
||||
// 初始化地图
|
||||
initMap() {
|
||||
this.amapPlugin = new amap.AMapWX({
|
||||
key: "c03fe63e4ed7cfc6612304b3f46c19b5", //该key 是在高德中申请的微信小程序key
|
||||
});
|
||||
|
||||
this.amapPlugin.getRegeo({
|
||||
type: "gcj02", //map 组件使用的经纬度是国测局坐标， type 为 gcj02
|
||||
|
||||
success: function (res) {
|
||||
const latitude = res[0].latitude;
|
||||
|
||||
const longitude = res[0].longitude;
|
||||
|
||||
that.longitude = longitude;
|
||||
|
||||
that.latitude = latitude;
|
||||
|
||||
that.mapInfo = res[0];
|
||||
},
|
||||
|
||||
fail: (res) => {
|
||||
console.log(JSON.stringify(res));
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
106
pages/mine/address/uniMap.vue
Normal file
106
pages/mine/address/uniMap.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template></template>
|
||||
<script>
|
||||
import { getAddressCode } from "@/api/address";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化地图并且调用
|
||||
initMap() {
|
||||
let that = this;
|
||||
uni.chooseLocation({
|
||||
success: function (res) {
|
||||
/**获取地址详情地址 */
|
||||
that.posToCity(res.latitude, res.longitude).then((val) => {
|
||||
/**获取地址code */
|
||||
getAddressCode(
|
||||
val.regeocode.addressComponent.citycode,
|
||||
val.regeocode.addressComponent.township
|
||||
).then((code) => {
|
||||
that.$emit("callback", { ...val, ...res, ...code });
|
||||
that.$emit("close");
|
||||
});
|
||||
});
|
||||
},
|
||||
fail() {
|
||||
that.$emit("close");
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 根据当前客户端判断
|
||||
init() {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.wechatMap();
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.initMap();
|
||||
// #endif
|
||||
},
|
||||
|
||||
// 如果是微信小程序单独走微信小程序授权模式
|
||||
wechatMap() {
|
||||
let that = this;
|
||||
uni.authorize({
|
||||
scope: "scope.userLocation",
|
||||
success() {
|
||||
// 允许授权
|
||||
that.initMap();
|
||||
},
|
||||
fail() {
|
||||
//拒绝授权
|
||||
uni.showModal({
|
||||
content: "检测到您没打开获取地址功能权限，是否去设置打开？",
|
||||
confirmText: "确认",
|
||||
cancelText: "取消",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.openSetting({
|
||||
success: (res) => {
|
||||
that.initMap();
|
||||
},
|
||||
});
|
||||
} else {
|
||||
that.$emit("close");
|
||||
return false;
|
||||
}
|
||||
},
|
||||
});
|
||||
return false;
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
posToCity(latitude, longitude) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: `https://restapi.amap.com/v3/geocode/regeo`,
|
||||
method: "GET",
|
||||
data: {
|
||||
key: "d649892b3937a5ad20b76dacb2bcb5bd", //web服务的key
|
||||
location: `${longitude},${latitude}`,
|
||||
},
|
||||
success: ({ data }) => {
|
||||
const { status, info, regeocode } = data;
|
||||
if (status === "1") {
|
||||
resolve(data);
|
||||
} else {
|
||||
reject(info);
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user