完成地址管理页面
This commit is contained in:
parent
cb4a10d8ed
commit
7a80e64e7f
|
|
@ -79,5 +79,15 @@
|
|||
},
|
||||
"mp-qq" : {
|
||||
"usingComponents" : true
|
||||
}
|
||||
},
|
||||
"h5": {
|
||||
"sdkConfigs": {
|
||||
"maps" : {
|
||||
"qqmap" : {
|
||||
// 腾讯地图秘钥 https://lbs.qq.com/dev/console/key/manage
|
||||
"key" : "PB3BZ-PB76J-HRSF2-KJ2QJ-CI2Z2-5TFTJ"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/address/add",
|
||||
"path": "pages/address/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新增地址"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
<template>
|
||||
<app-layout headerBackgroundColor="#00418c" textColor="light">
|
||||
<view class="add" @click="add">新增</view>
|
||||
</app-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppLayout from "@/components/layout/layout";
|
||||
export default {
|
||||
name: "address-add",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
AppLayout,
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {},
|
||||
onReady() {},
|
||||
onReachBottom() {},
|
||||
onPullDownRefresh() {},
|
||||
methods: {
|
||||
add() {
|
||||
this.getOpenerEventChannel().emit("insertId", 99);
|
||||
uni.navigateBack();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -1,45 +1,250 @@
|
|||
<template>
|
||||
<app-layout headerBackgroundColor="#00418c" textColor="light">
|
||||
<view class="btn" @click="finish">完成</view>
|
||||
<view class="btn" @click="add">新增</view>
|
||||
<app-layout
|
||||
headerBackgroundColor="#F6F6F6"
|
||||
title="我的地址"
|
||||
textColor="dark"
|
||||
backgroundColor="#F6F6F6"
|
||||
>
|
||||
<view class="address-group">
|
||||
<view
|
||||
class="address-item"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
>
|
||||
<view class="address-box" @click="selectAddress(item)">
|
||||
<view class="checkbox">
|
||||
<widget-check-box
|
||||
:size="52"
|
||||
:checked="chooseAddressId == item.id"
|
||||
/>
|
||||
</view>
|
||||
<view class="item-box">
|
||||
<view class="address-text limit-line clamp-1">
|
||||
<text v-if="item.isDefault" class="default-icon"
|
||||
>默认</text
|
||||
><text class="text">{{ item.address }}</text>
|
||||
</view>
|
||||
<view class="address-detail limit-line clamp-1">
|
||||
<text>{{ item.detail }}</text>
|
||||
</view>
|
||||
<view class="contact limit-line clamp-1">
|
||||
<text class="name">{{ item.name }}</text>
|
||||
<text class="mobile">{{ item.mobile }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="edit" @click="editAddress(item.id)">
|
||||
<text class="iconfont icon-bianji"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="bottom-components"
|
||||
:style="{ bottom: config.safeAreaInsets.bottom + 'px' }"
|
||||
>
|
||||
<view class="btn get-wechat-address" @click="getWechatAddress">
|
||||
<text class="text">获取微信收货地址</text>
|
||||
</view>
|
||||
<view class="btn add-address" @click="addAddress">
|
||||
<text class="text">新增地址</text>
|
||||
</view>
|
||||
</view>
|
||||
</app-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppLayout from "@/components/layout/layout";
|
||||
import WidgetCheckBox from "@/components/widgets/checkbox";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "member-address",
|
||||
data() {
|
||||
return {
|
||||
selectId: 0,
|
||||
openType: "list",
|
||||
chooseAddressId: 0,
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
isDefault: false,
|
||||
address: "四川省绵阳市高新区",
|
||||
detail: "火炬东路110号",
|
||||
name: "李（先生）",
|
||||
mobile: "18200000001",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
isDefault: false,
|
||||
address: "四川省绵阳市高新区",
|
||||
detail: "火炬东路110号",
|
||||
name: "李（先生）",
|
||||
mobile: "18200000001",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
isDefault: true,
|
||||
address: "四川省绵阳市高新区",
|
||||
detail: "火炬东路110号",
|
||||
name: "李（先生）",
|
||||
mobile: "18200000001",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AppLayout,
|
||||
WidgetCheckBox,
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
config: (state) => state.system.config,
|
||||
}),
|
||||
},
|
||||
onLoad(e) {
|
||||
if (e.openType) {
|
||||
this.openType = e.openType;
|
||||
}
|
||||
if (e.id) {
|
||||
this.chooseAddressId = e.id;
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {},
|
||||
onReady() {},
|
||||
onReachBottom() {},
|
||||
onPullDownRefresh() {},
|
||||
methods: {
|
||||
add() {
|
||||
let t = this;
|
||||
uni.navigateTo({
|
||||
url: "/pages/address/add",
|
||||
events: {
|
||||
insertId(id) {
|
||||
t.selectId = id
|
||||
},
|
||||
selectAddress(address) {
|
||||
if (this.openType == "choose") {
|
||||
this.getOpenerEventChannel().emit("setAddress", address);
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
this.editAddress(address.id);
|
||||
}
|
||||
},
|
||||
getWechatAddress() {
|
||||
console.log("获取微信地址");
|
||||
uni.chooseAddress({
|
||||
success: (d) => {
|
||||
console.log(d);
|
||||
},
|
||||
fail: (error) => {
|
||||
console.log(error);
|
||||
},
|
||||
});
|
||||
},
|
||||
finish() {
|
||||
this.getOpenerEventChannel().emit("setAddressId", this.selectId);
|
||||
uni.navigateBack();
|
||||
addAddress() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/address/edit",
|
||||
});
|
||||
},
|
||||
editAddress(id) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/address/edit?id=" + id,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.address-group {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 18rpx;
|
||||
.address-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 35rpx 30rpx;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
.edit {
|
||||
width: 50rpx;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
.iconfont {
|
||||
color: #8b9beb;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.address-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
.checkbox {
|
||||
width: 75rpx;
|
||||
}
|
||||
.item-box {
|
||||
width: 530rpx;
|
||||
.address-text,
|
||||
.address-detail {
|
||||
font-size: 30rpx;
|
||||
color: #2d2d2d;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.address-detail {
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
.default-icon {
|
||||
display: inline-block;
|
||||
width: 60rpx;
|
||||
height: 30rpx;
|
||||
background: rgba(139, 155, 235, 0.32);
|
||||
border: 1px solid #8194f2;
|
||||
font-size: 24rpx;
|
||||
color: #8194f2;
|
||||
text-align: center;
|
||||
margin-right: 18rpx;
|
||||
line-height: 28rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.contact {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
line-height: 28rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-components {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
max-width: 750px;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
padding: 0 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.btn {
|
||||
width: 310rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 38rpx;
|
||||
text-align: center;
|
||||
line-height: 76rpx;
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.btn.get-wechat-address {
|
||||
background: #8b9beb;
|
||||
.text {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.btn.add-address {
|
||||
background: rgba(139, 155, 235, 0);
|
||||
border: 1px solid #4b65ed;
|
||||
box-sizing: border-box;
|
||||
.text {
|
||||
color: #8b9beb;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,258 @@
|
|||
<template>
|
||||
<app-layout
|
||||
headerBackgroundColor="#F6F6F6"
|
||||
textColor="dark"
|
||||
:title="pageTitle"
|
||||
backgroundColor="#F6F6F6"
|
||||
>
|
||||
<widget-tips
|
||||
text="个人信息仅用于发布需求，隐私信息完全保密"
|
||||
textColor="#ffa800"
|
||||
/>
|
||||
<view class="form-container">
|
||||
<view class="input-item">
|
||||
<view class="title-box">
|
||||
<text class="title">服务地址</text>
|
||||
</view>
|
||||
<view class="input-box map" @click="chooseLocation">
|
||||
<view
|
||||
class="address-text limit-line clamp-1"
|
||||
:class="{ active: address }"
|
||||
>
|
||||
{{ address ? address : "点击选择服务地址" }}
|
||||
</view>
|
||||
<text class="iconfont icon-dingwei"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<view class="title-box">
|
||||
<text class="title">门牌号</text>
|
||||
</view>
|
||||
<view class="input-box">
|
||||
<input
|
||||
class="input"
|
||||
v-model="detail"
|
||||
placeholder="请输入详细地址，如8栋5单元18a"
|
||||
placeholder-class="input-placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<view class="title-box">
|
||||
<text class="title">联系人</text>
|
||||
</view>
|
||||
<view class="input-box">
|
||||
<input
|
||||
class="input"
|
||||
v-model="name"
|
||||
placeholder="请输入姓名"
|
||||
placeholder-class="input-placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<view class="title-box">
|
||||
<text class="title">性别</text>
|
||||
</view>
|
||||
<view class="input-box">
|
||||
<view class="gender-select">
|
||||
<view
|
||||
class="item"
|
||||
:class="[gender == 1 ? 'active' : '']"
|
||||
@click="gender = 1"
|
||||
>
|
||||
<text class="text">先生</text>
|
||||
</view>
|
||||
<view
|
||||
class="item"
|
||||
:class="[gender == 2 ? 'active' : '']"
|
||||
@click="gender = 2"
|
||||
>
|
||||
<text class="text">女士</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-item">
|
||||
<view class="title-box">
|
||||
<text class="title">手机号码</text>
|
||||
</view>
|
||||
<view class="input-box">
|
||||
<input
|
||||
class="input"
|
||||
v-model="mobile"
|
||||
placeholder="请输入手机号码"
|
||||
placeholder-class="input-placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-item default-address">
|
||||
<view class="default-box">
|
||||
<text class="title">设为默认地址</text>
|
||||
</view>
|
||||
<view class="default-icon-box" @click="isDefault = !isDefault">
|
||||
<widget-switch :open="isDefault" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="save-btn-box">
|
||||
<view class="btn" @click="save">保存</view>
|
||||
</view>
|
||||
</app-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppLayout from "@/components/layout/layout";
|
||||
import WidgetTips from "@/components/widgets/tips";
|
||||
import WidgetSwitch from "@/components/widgets/switch";
|
||||
export default {
|
||||
name: "address-add",
|
||||
data() {
|
||||
return {
|
||||
pageTitle: "新增地址",
|
||||
id: 0,
|
||||
address: "",
|
||||
detail: "",
|
||||
gender: 1,
|
||||
isDefault: false,
|
||||
name: "",
|
||||
mobile: "",
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AppLayout,
|
||||
WidgetTips,
|
||||
WidgetSwitch,
|
||||
},
|
||||
onLoad(e) {
|
||||
if (e.id) {
|
||||
this.pageTitle = "编辑地址";
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.pageTitle,
|
||||
});
|
||||
}
|
||||
},
|
||||
onShow() {},
|
||||
onReady() {},
|
||||
onReachBottom() {},
|
||||
onPullDownRefresh() {},
|
||||
methods: {
|
||||
save() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
chooseLocation() {
|
||||
const t = this;
|
||||
uni.chooseLocation({
|
||||
success: ({ name, address, longitude, latitude }) => {
|
||||
t.address = address;
|
||||
t.detail = name;
|
||||
},
|
||||
fail: (error) => {},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.form-container {
|
||||
width: 710rpx;
|
||||
background-color: #fff;
|
||||
margin: 20rpx auto 0 auto;
|
||||
}
|
||||
.input-item {
|
||||
width: 100%;
|
||||
height: 105rpx;
|
||||
border-bottom: 2rpx solid #e8e7e7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
line-height: 30rpx;
|
||||
.default-box,
|
||||
.title-box {
|
||||
line-height: 0;
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
line-height: 30rpx;
|
||||
color: #2d2d2d;
|
||||
}
|
||||
}
|
||||
.title-box {
|
||||
width: 150rpx;
|
||||
}
|
||||
.input-box {
|
||||
width: 500rpx;
|
||||
position: relative;
|
||||
.input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.input-placeholder {
|
||||
color: #c9c9c9;
|
||||
}
|
||||
}
|
||||
.default-box {
|
||||
width: 180rpx;
|
||||
}
|
||||
}
|
||||
.input-item.default-address {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.input-box.map {
|
||||
.address-text {
|
||||
font-size: 28rpx;
|
||||
color: #c9c9c9;
|
||||
box-sizing: border-box;
|
||||
padding-right: 40rpx;
|
||||
}
|
||||
.address-text.active {
|
||||
color: #000000;
|
||||
}
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 35rpx;
|
||||
color: #8194f2;
|
||||
}
|
||||
}
|
||||
.gender-select {
|
||||
display: flex;
|
||||
.item {
|
||||
width: 116rpx;
|
||||
height: 50rpx;
|
||||
background: rgba(139, 155, 235, 0);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #c9c9c9;
|
||||
text-align: center;
|
||||
margin-right: 15rpx;
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
color: #2d2d2d;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
}
|
||||
.item.active {
|
||||
border: 1px solid #8b9beb;
|
||||
background: rgba(139, 155, 235, 0.33);
|
||||
.text {
|
||||
color: #8194f2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.save-btn-box {
|
||||
width: 100%;
|
||||
margin-top: 58rpx;
|
||||
.btn {
|
||||
width: 570rpx;
|
||||
height: 98rpx;
|
||||
background: #8b9beb;
|
||||
border-radius: 49rpx;
|
||||
margin: 0 auto;
|
||||
font-size: 36rpx;
|
||||
text-align: center;
|
||||
line-height: 98rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -48,9 +48,9 @@
|
|||
</view>
|
||||
<view class="switch-container">
|
||||
<text class="price">¥ 6.00</text>
|
||||
<text @click="insurance = !insurance">
|
||||
<view @click="insurance = !insurance">
|
||||
<widget-switch :open="insurance" />
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="demand">
|
||||
|
|
@ -63,9 +63,9 @@
|
|||
/>
|
||||
</view>
|
||||
<view class="agreement-container">
|
||||
<text @click="isAgree = !isAgree">
|
||||
<view @click="isAgree = !isAgree">
|
||||
<agreement :agree="isAgree" />
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
|
|
@ -135,11 +135,15 @@ export default {
|
|||
this.datetime = e.detail.value;
|
||||
},
|
||||
selectAddress() {
|
||||
const that = this;
|
||||
uni.navigateTo({
|
||||
url: "/pages/address/address",
|
||||
url:
|
||||
"/pages/address/address?openType=choose&id=" +
|
||||
that.addressId,
|
||||
events: {
|
||||
setAddressId: function (data) {
|
||||
console.log(data);
|
||||
setAddress(address) {
|
||||
that.addressId = address.id;
|
||||
that.addressText = address.address + address.detail;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue