|
|
@@ -1,53 +1,86 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <form @submit="formSubmit">
|
|
|
- <view class='addAddress'>
|
|
|
- <view class="pad30">
|
|
|
- <view class='default acea-row row-middle borderRadius15'>
|
|
|
- <uni-easyinput type="textarea" v-model="addressValue" placeholder="粘贴地址信息,自动拆分姓名、电话和地址" @blur="identify()" />
|
|
|
- <!-- <input v-model="addressValue" type="text" placeholder="粘贴地址信息,自动拆分姓名、电话和地址"
|
|
|
- placeholder-class='placeholder' style="width:100%;"
|
|
|
- @blur="identify()"> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="pad30 mt-22">
|
|
|
- <view class='list borderRadius15'>
|
|
|
- <view class='item acea-row row-between-wrapper'>
|
|
|
- <view class='name'>姓名</view>
|
|
|
- <input type='text' placeholder='请输入姓名' name='real_name' v-model="userAddress.real_name"
|
|
|
- placeholder-class='placeholder' />
|
|
|
- </view>
|
|
|
- <view class='item acea-row row-between-wrapper'>
|
|
|
- <view class='name'>联系电话</view>
|
|
|
- <input type='number' placeholder='请输入联系电话' name="phone" v-model='userAddress.phone'
|
|
|
- placeholder-class='placeholder' pattern="\d*" />
|
|
|
+ <uni-popup ref="popup" type="bottom">
|
|
|
+ <view class="container">
|
|
|
+ <div class="tit">
|
|
|
+ <text class="close">关闭</text>
|
|
|
+ </div>
|
|
|
+ <form @submit="formSubmit" v-if="isadd">
|
|
|
+ <view class='addAddress'>
|
|
|
+ <view class="pad30">
|
|
|
+ <view class='default acea-row row-middle borderRadius15'>
|
|
|
+ <uni-easyinput type="textarea" v-model="addressValue" placeholder="粘贴地址信息,自动拆分姓名、电话和地址" @blur="identify()" />
|
|
|
</view>
|
|
|
- <view class='item acea-row row-between-wrapper'>
|
|
|
- <view class='name'>所在地区</view>
|
|
|
- <view class="address acea-row row-between">
|
|
|
- <input type='text' placeholder='请填写具体地址' name='region' placeholder-class='placeholder'
|
|
|
- v-model='userAddress.region' class="detail" />
|
|
|
+ </view>
|
|
|
+ <view class="pad30 mt-22">
|
|
|
+ <view class='list borderRadius15'>
|
|
|
+ <view class='item acea-row row-between-wrapper'>
|
|
|
+ <view class='name'>姓名</view>
|
|
|
+ <input type='text' placeholder='请输入姓名' name='real_name' v-model="userAddress.real_name"
|
|
|
+ placeholder-class='placeholder' />
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class='item acea-row row-between-wrapper'>
|
|
|
- <view class='name'>详细地址</view>
|
|
|
- <view class="address">
|
|
|
- <input type='text' placeholder='请填写具体地址' name='detail' placeholder-class='placeholder'
|
|
|
- v-model='userAddress.detail' class="detail" />
|
|
|
+ <view class='item acea-row row-between-wrapper'>
|
|
|
+ <view class='name'>联系电话</view>
|
|
|
+ <input type='number' placeholder='请输入联系电话' name="phone" v-model='userAddress.phone'
|
|
|
+ placeholder-class='placeholder' pattern="\d*" />
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class='item acea-row row-between-wrapper'>
|
|
|
- <view class='name'>详细地址</view>
|
|
|
- <view class="address">
|
|
|
- <uni-data-checkbox v-model="is_default" :localdata="range"></uni-data-checkbox>
|
|
|
+ <view class='item acea-row row-between-wrapper'>
|
|
|
+ <view class='name'>所在地区</view>
|
|
|
+ <view class="address acea-row row-between">
|
|
|
+ <input type='text' placeholder='请填写具体地址' name='region' placeholder-class='placeholder'
|
|
|
+ v-model='userAddress.region' class="detail" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class='item acea-row row-between-wrapper'>
|
|
|
+ <view class='name'>详细地址</view>
|
|
|
+ <view class="address">
|
|
|
+ <input type='text' placeholder='请填写具体地址' name='detail' placeholder-class='placeholder'
|
|
|
+ v-model='userAddress.detail' class="detail" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class='item acea-row row-between-wrapper'>
|
|
|
+ <view class='name'>详细地址</view>
|
|
|
+ <view class="address">
|
|
|
+ <uni-data-checkbox v-model="is_default" :localdata="range"></uni-data-checkbox>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <button class='keepBnt bg-color' form-type="submit">立即保存</button>
|
|
|
+ </view>
|
|
|
+ </form>
|
|
|
+
|
|
|
+ <div class="editaddress" v-else>
|
|
|
+ <view class="addbar" @click="isadd = true">
|
|
|
+ <text class="iconfont sp"></text>
|
|
|
+ <text class="sp">添加地址</text>
|
|
|
</view>
|
|
|
- <button class='keepBnt bg-color' form-type="submit">立即保存</button>
|
|
|
- </view>
|
|
|
- </form>
|
|
|
- </view>
|
|
|
+ <uni-swipe-action class="swipeAction">
|
|
|
+ <uni-swipe-action-item class="swipeAction_item" v-for="(i,s) in addressList" :key="s">
|
|
|
+ <view class="addressLi clearfix" @click="onSelect(i,s)">
|
|
|
+ <view class="addressLi_l">
|
|
|
+ <text v-if="i.status != 1" class="iconfont"></text>
|
|
|
+ <text v-else class="iconfont pitchOn"></text>
|
|
|
+ </view>
|
|
|
+ <view class="addressLi_r">
|
|
|
+ <view class="user">
|
|
|
+ <text class="name">{{i.name}}</text>
|
|
|
+ <text>{{i.mobile}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="address">{{i.address}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <template v-slot:right>
|
|
|
+ <view class="btns clearfix">
|
|
|
+ <view class="btn edit"><text class="iconfont"></text></view>
|
|
|
+ <view class="btn del"><text class="iconfont"></text></view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </uni-swipe-action-item>
|
|
|
+ </uni-swipe-action>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { get, post, u_post } from "@/request/api.js";
|
|
|
@@ -65,14 +98,15 @@ var appEv = app.$vm.$options;
|
|
|
}, //地址详情
|
|
|
addressValue:"",
|
|
|
is_default: 0, //是否设为默认地址
|
|
|
- range: [{"value": 0,"text": "否" },{"value": 1,"text": "是"}]
|
|
|
+ range: [{"value": 0,"text": "否" },{"value": 1,"text": "是"}],
|
|
|
+
|
|
|
+ isadd: false,
|
|
|
+ addressList: [],
|
|
|
}
|
|
|
},
|
|
|
- components:{
|
|
|
-
|
|
|
- },
|
|
|
- onLoad(){
|
|
|
-
|
|
|
+ components:{},
|
|
|
+ created () {
|
|
|
+ this.loadAddress();
|
|
|
},
|
|
|
methods: {
|
|
|
identify(){
|
|
|
@@ -101,11 +135,47 @@ var appEv = app.$vm.$options;
|
|
|
if (res.code === 0) {
|
|
|
appEv.errTips(res.msg);
|
|
|
setTimeout(() => {
|
|
|
- uni.navigateBack();
|
|
|
+ // uni.navigateBack();
|
|
|
+ this.$emit('addressConfirm');
|
|
|
+ this.close();
|
|
|
}, 1500);
|
|
|
}
|
|
|
})
|
|
|
- // this.$emit('addressConfirm',this.userAddress)
|
|
|
+ },
|
|
|
+ // 获取用户地址
|
|
|
+ loadAddress(){
|
|
|
+ post("user/addressList").then(res => {
|
|
|
+ if(res.code === 0){
|
|
|
+ this.addressList = res.data.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onSelect(i,s){
|
|
|
+ this.addressList.forEach(e => {
|
|
|
+ e.status = "0";
|
|
|
+ });
|
|
|
+ this.addressList[s].status = "1";
|
|
|
+ this.editAddress();
|
|
|
+ },
|
|
|
+ editAddress(){
|
|
|
+ this.addressList.forEach((e,s) => {
|
|
|
+ post("user/editAddress",{
|
|
|
+ ...e, is_default: e.status
|
|
|
+ }).then(res=>{
|
|
|
+ if(this.addressList.length == s+1){
|
|
|
+ this.$emit('addressConfirm');
|
|
|
+ this.close();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ open(type) {
|
|
|
+ this.$refs.popup.open('bottom')
|
|
|
+ if(type == "add") this.isadd = true
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.$refs.popup.close()
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
@@ -113,8 +183,9 @@ var appEv = app.$vm.$options;
|
|
|
<style lang="scss" scoped>
|
|
|
.container{
|
|
|
background-color: #f5f5f5;
|
|
|
- height: 100vh;
|
|
|
- padding-top:30rpx;
|
|
|
+ height: 70vh;
|
|
|
+ // padding:30rpx 0;
|
|
|
+ border-radius: 30rpx 30rpx 0 0;
|
|
|
}
|
|
|
|
|
|
.pad30 {
|
|
|
@@ -233,6 +304,96 @@ var appEv = app.$vm.$options;
|
|
|
margin-top: 22rpx;
|
|
|
}
|
|
|
.bg-color {
|
|
|
- background-color: #dd524d;
|
|
|
+ background-color: #2DB389;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addbar{
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 50rpx;
|
|
|
+ padding: 36rpx 0;
|
|
|
+ .iconfont{
|
|
|
+ font-size: 46rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ .sp{
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swipeAction{
|
|
|
+ // padding: 20rpx 30rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ .addressLi{
|
|
|
+ .addressLi_l{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .iconfont{
|
|
|
+ color: #666;
|
|
|
+ font-size: 38rpx;
|
|
|
+ }
|
|
|
+ .pitchOn{
|
|
|
+ color: #1989fa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .addressLi_r{
|
|
|
+ width: calc(100% - 80rpx);
|
|
|
+ }
|
|
|
+ .addressLi_l,.addressLi_r{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .user{
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+ .name{
|
|
|
+ // font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ .address{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swipeAction_item{
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btns{
|
|
|
+ .btn{
|
|
|
+ float: left;
|
|
|
+ display:flex;
|
|
|
+ justify-content : center;
|
|
|
+ align-items : center;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 36rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .edit{
|
|
|
+ background: rgba(25,137,250,0.5);
|
|
|
+ }
|
|
|
+ .del{
|
|
|
+ background: rgba(238,10,36,0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .uni-swipe_box{
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tit{
|
|
|
+ padding: 10rpx 0;
|
|
|
+ .close{
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|