|
|
@@ -1,407 +1,446 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <view class="inner">
|
|
|
- <view class="address-box">
|
|
|
- <textarea class="textarea" v-model="content" placeholder="请粘贴或输入文本,点击'识别'自动识别姓名、电话、地址,格式:深圳市龙岗区坂田街道长坑路西2巷2号202 黄大大 18888888888" />
|
|
|
- <view class="btns" >
|
|
|
- <view class="btn parse" @click="parseAddress()">识别</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="form-box">
|
|
|
-
|
|
|
- <view class="form-item">
|
|
|
- <text class="label">联系人</text>
|
|
|
- <input type="text" v-model="form.realName" maxlength="10" placeholder="姓名" class="form-input" />
|
|
|
- </view>
|
|
|
- <view class="form-item">
|
|
|
- <text class="label">手机号</text>
|
|
|
- <input type="number" v-model="form.phone" maxlength="11" placeholder="手机号" class="form-input" />
|
|
|
- </view>
|
|
|
- <view class="form-item">
|
|
|
- <text class="label">所在地区</text>
|
|
|
- <picker :value="multiIndex" class="birth-picker" mode="multiSelector" range-key="n" :range="addressList" @change="pickerChange" @columnchange="pickerColumnchange">
|
|
|
- <view class="right-box">
|
|
|
- <view class="input-box">
|
|
|
- <input type="text" v-model="form.address" placeholder="请选择" class="form-input" disabled="disabled" />
|
|
|
- </view>
|
|
|
- <image class="arrow" src="../../static/images/arrow_gray.png" mode=""></image>
|
|
|
- </view>
|
|
|
- </picker>
|
|
|
- </view>
|
|
|
- <view class="form-item">
|
|
|
- <text class="label">详细地址</text>
|
|
|
- <textarea class="form-textarea" v-model="form.detail" placeholder="请输入详细地址" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 设为默认地址 -->
|
|
|
- <view class="setting-box">
|
|
|
- <text class="label">设为默认地址</text>
|
|
|
- <evan-switch v-model="isDefault" activeColor="#2BC7B9" inactiveColor="rgba(0, 0, 0, 0.1)"></evan-switch>
|
|
|
+ <view class="inner">
|
|
|
+ <view class="address-box">
|
|
|
+ <textarea class="textarea" v-model="content"
|
|
|
+ placeholder="请粘贴或输入文本,点击'识别'自动识别姓名、电话、地址,格式:深圳市龙岗区坂田街道长坑路西2巷2号202 黄大大 18888888888" />
|
|
|
+ <view class="btns">
|
|
|
+ <view class="btn parse" @click="parseAddress()">识别</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="btn-box">
|
|
|
- <view class="sub-btn" @click="submit()">保存地址</view>
|
|
|
+ <view class="form-box">
|
|
|
+
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="label">联系人</text>
|
|
|
+ <input type="text" v-model="form.realName" maxlength="10" placeholder="姓名" class="form-input" />
|
|
|
+ </view>
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="label">手机号</text>
|
|
|
+ <input type="number" v-model="form.phone" maxlength="11" placeholder="手机号" class="form-input" />
|
|
|
+ </view>
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="label">所在地区</text>
|
|
|
+ <picker :value="multiIndex" class="birth-picker" mode="multiSelector" range-key="n"
|
|
|
+ :range="addressList" @change="pickerChange" @columnchange="pickerColumnchange">
|
|
|
+ <view class="right-box">
|
|
|
+ <view class="input-box">
|
|
|
+ <input type="text" v-model="form.address" placeholder="请选择" class="form-input"
|
|
|
+ disabled="disabled" />
|
|
|
+ </view>
|
|
|
+ <image class="arrow" src="../../static/images/arrow_gray.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="label">详细地址</text>
|
|
|
+ <textarea class="form-textarea" v-model="form.detail" placeholder="请输入详细地址" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 设为默认地址 -->
|
|
|
+ <view class="setting-box">
|
|
|
+ <text class="label">设为默认地址</text>
|
|
|
+ <evan-switch v-model="isDefault" activeColor="#2BC7B9" inactiveColor="rgba(0, 0, 0, 0.1)"></evan-switch>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn-box">
|
|
|
+ <view class="sub-btn" @click="submit()">保存地址</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
- import {parseAddress,getCity,getCitys,getAddressById,addAddress,editAddress} from '@/api/address'
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ parseAddress,
|
|
|
+ getCity,
|
|
|
+ getCitys,
|
|
|
+ getAddressById,
|
|
|
+ addAddress,
|
|
|
+ editAddress
|
|
|
+ } from '@/api/address'
|
|
|
import EvanSwitch from '@/components/evan-switch/evan-switch.vue'
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- EvanSwitch
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ EvanSwitch
|
|
|
},
|
|
|
data() {
|
|
|
- return {
|
|
|
- content:null,
|
|
|
- type:null,
|
|
|
- id:null,
|
|
|
- isDefault: false,
|
|
|
- addressList:[[],[],[]],
|
|
|
- multiIndex:[0,0,0],
|
|
|
- address:[],
|
|
|
- form: {
|
|
|
- realName:null,
|
|
|
- phone:null,
|
|
|
- detail:null,
|
|
|
- address: null,
|
|
|
- isDefault: 0,
|
|
|
+ return {
|
|
|
+ content: null,
|
|
|
+ type: null,
|
|
|
+ id: null,
|
|
|
+ isDefault: false,
|
|
|
+ addressList: [
|
|
|
+ [],
|
|
|
+ [],
|
|
|
+ []
|
|
|
+ ],
|
|
|
+ multiIndex: [0, 0, 0],
|
|
|
+ address: [],
|
|
|
+ form: {
|
|
|
+ realName: null,
|
|
|
+ phone: null,
|
|
|
+ detail: null,
|
|
|
+ address: null,
|
|
|
+ isDefault: 0,
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.type=option.type;
|
|
|
- if(this.type=='edit'){
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title:"修改收货地址"
|
|
|
- })
|
|
|
- this.id=option.id;
|
|
|
- this.getAddressById();
|
|
|
- }
|
|
|
- else{
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title:"新增收货地址"
|
|
|
- })
|
|
|
- }
|
|
|
- this.getCitys()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- parseAddress(){
|
|
|
- if(this.content==null||this.content==""){
|
|
|
- uni.showToast({
icon:'none',
title: '请输入地址信息',
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- var data={content:this.content};
|
|
|
- parseAddress(data).then(
|
|
|
- res => {
|
|
|
- if(res.code==200){
|
|
|
- this.form.realName=res.data.name
|
|
|
- this.form.phone=res.data.mobile
|
|
|
- this.form.address=res.data.provinceName+res.data.cityName+res.data.expAreaName
|
|
|
- this.form.province=res.data.provinceName
|
|
|
- this.form.city=res.data.cityName
|
|
|
- this.form.district=res.data.expAreaName
|
|
|
- this.form.detail=res.data.streetName+res.data.address
|
|
|
- this.form.detail=this.form.detail.replace(/\s+/g,"");
|
|
|
- }else{
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: res.msg,
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- },
|
|
|
- getAddressById(){
|
|
|
- var data={id:this.id};
|
|
|
- getAddressById(data).then(
|
|
|
- res => {
|
|
|
- if(res.code==200){
|
|
|
- this.form=res.data;
|
|
|
- this.isDefault=this.form.isDefault==1?true:false;
|
|
|
- this.form.address=this.form.province+this.form.city+this.form.district
|
|
|
- }else{
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: res.msg,
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- },
|
|
|
- submit(){
|
|
|
- if(this.type=="add"){
|
|
|
- this.addAddress()
|
|
|
- }
|
|
|
- else if(this.type=="edit"){
|
|
|
- this.editAddress()
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- editAddress(){
|
|
|
- this.form.isDefault=this.isDefault?1:0
|
|
|
- editAddress(this.form).then(
|
|
|
- res => {
|
|
|
- if(res.code==200){
|
|
|
- uni.showToast({
|
|
|
- icon:'success',
|
|
|
- title: "操作成功",
|
|
|
- });
|
|
|
- setTimeout(function() {
|
|
|
- uni.$emit('refreshAddress');
|
|
|
- uni.navigateBack({
|
|
|
- delta: 1
|
|
|
- })
|
|
|
- }, 500);
|
|
|
- }else{
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: res.msg,
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- },
|
|
|
- addAddress(){
|
|
|
- this.form.isDefault=this.isDefault?1:0
|
|
|
- addAddress(this.form).then(
|
|
|
- res => {
|
|
|
- if(res.code==200){
|
|
|
- uni.showToast({
|
|
|
- icon:'success',
|
|
|
- title: "操作成功",
|
|
|
- });
|
|
|
- setTimeout(function() {
|
|
|
- uni.$emit('refreshAddress');
|
|
|
- uni.navigateBack({
|
|
|
- delta: 1
|
|
|
- })
|
|
|
- }, 500);
|
|
|
- }else{
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: res.msg,
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- },
|
|
|
- // 地区选择
|
|
|
- pickerChange(e) {
|
|
|
- this.multiIndex = e.detail.value;
|
|
|
- // 数组内的下标
|
|
|
- // 获取一级类目
|
|
|
- // 获取二级类目
|
|
|
- // 获取三级类目
|
|
|
- this.form.address=this.addressList[0][this.multiIndex[0]].n+this.addressList[1][this.multiIndex[1]].n+this.addressList[2][this.multiIndex[2]].n
|
|
|
- this.form.province=this.addressList[0][this.multiIndex[0]].n
|
|
|
- this.form.city=this.addressList[1][this.multiIndex[1]].n
|
|
|
- this.form.district=this.addressList[2][this.multiIndex[2]].n
|
|
|
- this.form.cityId=this.addressList[1][this.multiIndex[1]].v;
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- pickerColumnchange(e){
|
|
|
- // 第一列滑动
|
|
|
- if(e.detail.column === 0){
|
|
|
- this.multiIndex[0] = e.detail.value
|
|
|
- // console.log('第一列滑动');
|
|
|
- this.addressList[1] = this.address[this.multiIndex[0]].c;
|
|
|
- this.addressList[2] = this.address[this.multiIndex[0]].c[0].c
|
|
|
- // 第一列滑动 第二列 和第三列 都变为第一个
|
|
|
- this.multiIndex.splice(1, 1, 0)
|
|
|
- this.multiIndex.splice(2, 1, 0)
|
|
|
- }
|
|
|
- // 第二列滑动
|
|
|
- if(e.detail.column === 1){
|
|
|
- this.multiIndex[1] = e.detail.value
|
|
|
- // console.log('第二列滑动');
|
|
|
- // console.log(this.multiIndex)
|
|
|
- this.addressList[2] = this.address[this.multiIndex[0]].c[this.multiIndex[1]].c
|
|
|
- // 第二列 滑动 第三列 变成第一个
|
|
|
- this.multiIndex.splice(2, 1, 0)
|
|
|
- }
|
|
|
- // 第三列滑动
|
|
|
- if(e.detail.column === 2){
|
|
|
- this.multiIndex[2] = e.detail.value
|
|
|
- }
|
|
|
- },
|
|
|
- getCitys(){
|
|
|
- getCitys().then(
|
|
|
- res => {
|
|
|
- if(res.code==200){
|
|
|
- this.address=res.data
|
|
|
- for(var i=0; i<this.address.length; i++){
|
|
|
- this.addressList[0].push(this.address[i])
|
|
|
- }
|
|
|
- for(var i=0; i<this.address[0].c.length; i++){
|
|
|
- this.addressList[1].push(this.address[0].c[i])
|
|
|
- }
|
|
|
- for(var i=0; i<this.address[0].c[0].c.length; i++){
|
|
|
- this.addressList[2].push(this.address[0].c[0].c[i])
|
|
|
- }
|
|
|
- }else{
|
|
|
- uni.showToast({
|
|
|
- icon:'none',
|
|
|
- title: "请求失败",
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.getCitys()
|
|
|
+ this.type = option.type;
|
|
|
+ if (this.type == 'edit') {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: "修改收货地址"
|
|
|
+ })
|
|
|
+ this.id = option.id;
|
|
|
+ this.getAddressById();
|
|
|
+ } else {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: "新增收货地址"
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ parseAddress() {
|
|
|
+ if (this.content == null || this.content == "") {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请输入地址信息',
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var data = {
|
|
|
+ content: this.content
|
|
|
+ };
|
|
|
+ parseAddress(data).then(
|
|
|
+ res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.form.realName = res.data.name
|
|
|
+ this.form.phone = res.data.mobile
|
|
|
+ this.form.address = res.data.provinceName + res.data.cityName + res.data.expAreaName
|
|
|
+ this.form.province = res.data.provinceName
|
|
|
+ this.form.city = res.data.cityName
|
|
|
+ this.form.district = res.data.expAreaName
|
|
|
+ this.form.detail = res.data.streetName + res.data.address
|
|
|
+ this.form.detail = this.form.detail.replace(/\s+/g, "");
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ getAddressById() {
|
|
|
+ var data = {
|
|
|
+ id: this.id
|
|
|
+ };
|
|
|
+ getAddressById(data).then(
|
|
|
+ res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.form = res.data;
|
|
|
+ this.isDefault = this.form.isDefault == 1 ? true : false;
|
|
|
+ this.form.address = this.form.province + this.form.city + this.form.district
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (this.type == "add") {
|
|
|
+ this.addAddress()
|
|
|
+ } else if (this.type == "edit") {
|
|
|
+ this.editAddress()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ editAddress() {
|
|
|
+ this.form.isDefault = this.isDefault ? 1 : 0
|
|
|
+ editAddress(this.form).then(
|
|
|
+ res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'success',
|
|
|
+ title: "操作成功",
|
|
|
+ });
|
|
|
+ setTimeout(function() {
|
|
|
+ uni.$emit('refreshAddress');
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ }, 500);
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ addAddress() {
|
|
|
+ this.form.isDefault = this.isDefault ? 1 : 0
|
|
|
+ addAddress(this.form).then(
|
|
|
+ res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'success',
|
|
|
+ title: "操作成功",
|
|
|
+ });
|
|
|
+ setTimeout(function() {
|
|
|
+ uni.$emit('refreshAddress');
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ }, 500);
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 地区选择
|
|
|
+ pickerChange(e) {
|
|
|
+ this.multiIndex = e.detail.value;
|
|
|
+ // 数组内的下标
|
|
|
+ // 获取一级类目
|
|
|
+ // 获取二级类目
|
|
|
+ // 获取三级类目
|
|
|
+ this.form.address = this.addressList[0][this.multiIndex[0]].n + this.addressList[1][this.multiIndex[1]].n +
|
|
|
+ this.addressList[2][this.multiIndex[2]].n
|
|
|
+ this.form.province = this.addressList[0][this.multiIndex[0]].n
|
|
|
+ this.form.city = this.addressList[1][this.multiIndex[1]].n
|
|
|
+ this.form.district = this.addressList[2][this.multiIndex[2]].n
|
|
|
+ this.form.cityId = this.addressList[1][this.multiIndex[1]].v;
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ pickerColumnchange(e) {
|
|
|
+ // 第一列滑动
|
|
|
+ if (e.detail.column === 0) {
|
|
|
+ this.multiIndex[0] = e.detail.value
|
|
|
+ // console.log('第一列滑动');
|
|
|
+ this.addressList[1] = this.address[this.multiIndex[0]].c;
|
|
|
+ this.addressList[2] = this.address[this.multiIndex[0]].c[0].c
|
|
|
+ // 第一列滑动 第二列 和第三列 都变为第一个
|
|
|
+ this.multiIndex.splice(1, 1, 0)
|
|
|
+ this.multiIndex.splice(2, 1, 0)
|
|
|
+ }
|
|
|
+ // 第二列滑动
|
|
|
+ if (e.detail.column === 1) {
|
|
|
+ this.multiIndex[1] = e.detail.value
|
|
|
+ // console.log('第二列滑动');
|
|
|
+ // console.log(this.multiIndex)
|
|
|
+ this.addressList[2] = this.address[this.multiIndex[0]].c[this.multiIndex[1]].c
|
|
|
+ // 第二列 滑动 第三列 变成第一个
|
|
|
+ this.multiIndex.splice(2, 1, 0)
|
|
|
+ }
|
|
|
+ // 第三列滑动
|
|
|
+ if (e.detail.column === 2) {
|
|
|
+ this.multiIndex[2] = e.detail.value
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCitys() {
|
|
|
+ getCitys().then(
|
|
|
+ res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.address = res.data
|
|
|
+ for (var i = 0; i < this.address.length; i++) {
|
|
|
+ this.addressList[0].push(this.address[i])
|
|
|
+ }
|
|
|
+ for (var i = 0; i < this.address[0].c.length; i++) {
|
|
|
+ this.addressList[1].push(this.address[0].c[i])
|
|
|
+ }
|
|
|
+ for (var i = 0; i < this.address[0].c[0].c.length; i++) {
|
|
|
+ this.addressList[2].push(this.address[0].c[0].c[i])
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: "请求失败",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- page{
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .content{
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .inner{
|
|
|
- height: calc(100% - 120upx);
|
|
|
- padding: 20upx;
|
|
|
- .address-box{
|
|
|
- padding: 30upx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 16upx;
|
|
|
- margin-bottom: 20upx;
|
|
|
- position: relative;
|
|
|
- .textarea{
|
|
|
- width: 100%;
|
|
|
- height: 200upx;
|
|
|
- font-size: 30upx;
|
|
|
- color: #999999;
|
|
|
- padding-bottom:100rpx;
|
|
|
- }
|
|
|
- .btns{
|
|
|
- right:10rpx;
|
|
|
- bottom:10rpx;
|
|
|
- position: absolute;
|
|
|
- .btn{
|
|
|
- width: 155upx;
|
|
|
- height: 64upx;
|
|
|
- line-height: 64upx;
|
|
|
- font-size: 26upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- text-align: center;
|
|
|
- border-radius: 32upx;
|
|
|
- &.parse{
|
|
|
- background: #2BC7B9;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .form-box{
|
|
|
- padding: 0 30upx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 16upx;
|
|
|
- .form-item{
|
|
|
- padding: 30upx 0;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- border-bottom: 1px solid #F1F1F1;
|
|
|
- &:last-child{
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
- .label{
|
|
|
- width: 180upx;
|
|
|
- text-align: left;
|
|
|
- font-size: 30upx;
|
|
|
- line-height: 44upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #222222;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
- input{
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .form-input{
|
|
|
- font-size: 30upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .form-textarea{
|
|
|
- font-size: 30upx;
|
|
|
- color: #999999;
|
|
|
- height: 100upx;
|
|
|
- padding: 4upx 0;
|
|
|
- }
|
|
|
-
|
|
|
- .birth-picker {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .right-box{
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .input-box{
|
|
|
- width: 470upx;
|
|
|
- }
|
|
|
- .arrow{
|
|
|
- width: 13upx;
|
|
|
- height: 23upx;
|
|
|
- margin-left: 20upx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .setting-box{
|
|
|
- height: 88upx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 16upx;
|
|
|
- margin-top: 20upx;
|
|
|
- padding: 0 30upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .label{
|
|
|
- font-size: 28upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #111111;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-box{
|
|
|
- height: 120upx;
|
|
|
- padding: 0 30upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: #FFFFFF;
|
|
|
- .sub-btn{
|
|
|
- width: 100%;
|
|
|
- height: 88upx;
|
|
|
- line-height: 88upx;
|
|
|
- text-align: center;
|
|
|
- font-size: 30upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #FFFFFF;
|
|
|
- background: #2BC7B9;
|
|
|
- border-radius: 44upx;
|
|
|
- }
|
|
|
- }
|
|
|
+ page {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .inner {
|
|
|
+ height: calc(100% - 120upx);
|
|
|
+ padding: 20upx;
|
|
|
+
|
|
|
+ .address-box {
|
|
|
+ padding: 30upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .textarea {
|
|
|
+ width: 100%;
|
|
|
+ height: 200upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #999999;
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btns {
|
|
|
+ right: 10rpx;
|
|
|
+ bottom: 10rpx;
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 155upx;
|
|
|
+ height: 64upx;
|
|
|
+ line-height: 64upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 32upx;
|
|
|
+
|
|
|
+ &.parse {
|
|
|
+ background: #2BC7B9;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-box {
|
|
|
+ padding: 0 30upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16upx;
|
|
|
+
|
|
|
+ .form-item {
|
|
|
+ padding: 30upx 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ border-bottom: 1px solid #F1F1F1;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ width: 180upx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 30upx;
|
|
|
+ line-height: 44upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #222222;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ input {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-input {
|
|
|
+ font-size: 30upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-textarea {
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #999999;
|
|
|
+ height: 100upx;
|
|
|
+ padding: 4upx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .birth-picker {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .input-box {
|
|
|
+ width: 470upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow {
|
|
|
+ width: 13upx;
|
|
|
+ height: 23upx;
|
|
|
+ margin-left: 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .setting-box {
|
|
|
+ height: 88upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16upx;
|
|
|
+ margin-top: 20upx;
|
|
|
+ padding: 0 30upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111111;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-box {
|
|
|
+ height: 120upx;
|
|
|
+ padding: 0 30upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #FFFFFF;
|
|
|
+
|
|
|
+ .sub-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 88upx;
|
|
|
+ line-height: 88upx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: #2BC7B9;
|
|
|
+ border-radius: 44upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|