168 lines
5.1 KiB
Vue
168 lines
5.1 KiB
Vue
<template>
|
||
<app-layout :title="pageTitle">
|
||
<view class="tips-container">
|
||
<widget-tips text="个人信息仅用于发布需求，隐私信息完全保密" textColor="#ffa800" />
|
||
</view>
|
||
<view class="form-container">
|
||
<view class="input-item">
|
||
<view class="title-box">
|
||
<text>服务地址</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>门牌号</text>
|
||
</view>
|
||
<view class="input-box">
|
||
<input
|
||
class="input"
|
||
v-model="detail"
|
||
placeholder="请输入详细地址，如8栋5单元18a"
|
||
placeholder-class="form-input-placeholder"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="input-item">
|
||
<view class="title-box">
|
||
<text>联系人</text>
|
||
</view>
|
||
<view class="input-box">
|
||
<input class="input" v-model="name" placeholder="请输入姓名" placeholder-class="form-input-placeholder" />
|
||
</view>
|
||
</view>
|
||
<view class="input-item">
|
||
<view class="title-box">
|
||
<text>性别</text>
|
||
</view>
|
||
<view class="input-box">
|
||
<view class="checkbox">
|
||
<view class="checkbox-item" :class="[gender == 1 ? 'active' : '']" @click="gender = 1">
|
||
<text>先生</text>
|
||
</view>
|
||
<view class="checkbox-item" :class="[gender == 2 ? 'active' : '']" @click="gender = 2">
|
||
<text>女士</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="input-item">
|
||
<view class="title-box">
|
||
<text>手机号码</text>
|
||
</view>
|
||
<view class="input-box">
|
||
<input
|
||
class="input"
|
||
v-model="mobile"
|
||
placeholder="请输入手机号码"
|
||
placeholder-class="form-input-placeholder"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="input-item default-address">
|
||
<view class="title-box">
|
||
<text>设为默认地址</text>
|
||
</view>
|
||
<view class="input-box" @click="isDefault = !isDefault">
|
||
<widget-switch :open="isDefault" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="save-form-btn">
|
||
<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>
|
||
.tips-container {
|
||
width: 710rpx;
|
||
margin: 0 auto;
|
||
}
|
||
.input-item.default-address {
|
||
justify-content: space-between;
|
||
.title-box {
|
||
width: 180rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.input-box {
|
||
width: auto;
|
||
}
|
||
}
|
||
.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: 25rpx;
|
||
right: 0;
|
||
font-size: 35rpx;
|
||
color: #8194f2;
|
||
}
|
||
}
|
||
</style> |