|
|
@@ -1,77 +1,111 @@
|
|
|
<template>
|
|
|
<view class="page-container">
|
|
|
- <view class="location-bar">
|
|
|
- <view class="location-content">
|
|
|
- <u-icon name="map" color="#666" size="20"></u-icon>
|
|
|
- <text class="location-text">信达国际金融中心</text>
|
|
|
- </view>
|
|
|
- <u-icon name="arrow-right" color="#999" size="14"></u-icon>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="main-card">
|
|
|
- <view class="card-header">
|
|
|
- <text class="header-title">虚拟地址</text>
|
|
|
- <view class="add-btn" @click="addAddress">
|
|
|
- <u-icon name="plus" color="#19be6b" size="14"></u-icon>
|
|
|
+ <view class="location-card" @click="chooseLocation">
|
|
|
+ <view class="left-content">
|
|
|
+ <u-icon name="map-fill" color="#1ecbc3" size="24"></u-icon>
|
|
|
+ <view class="info">
|
|
|
+ <text class="label">我的位置</text>
|
|
|
+ <text class="value">{{ currentLocation }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <u-icon name="arrow-right" color="#999" size="16"></u-icon>
|
|
|
+ </view>
|
|
|
|
|
|
- <u-line color="#f0f0f0"></u-line>
|
|
|
-
|
|
|
- <view class="address-list">
|
|
|
- <u-radio-group v-model="selectedValue" placement="column" iconPlacement="left">
|
|
|
- <view class="list-item" v-for="(item, index) in addressList" :key="item.id">
|
|
|
- <view class="item-left" @click="selectItem(item.id)">
|
|
|
- <u-radio :name="item.id" activeColor="#2b9b86" />
|
|
|
- <text class="item-text">{{ item.name }}</text>
|
|
|
- </view>
|
|
|
+ <view class="list-title">
|
|
|
+ <text>虚拟地址</text>
|
|
|
+ <text class="more" @click="goToAdd">新增虚拟地址</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="address-list">
|
|
|
+ <u-radio-group v-model="selected" placement="column" activeColor="#0879FF" @change="onChange">
|
|
|
+ <view
|
|
|
+ class="address-item"
|
|
|
+ v-for="(item, index) in addressList"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <view class="check-icon">
|
|
|
+ <u-radio :name="item.id" />
|
|
|
+ </view>
|
|
|
|
|
|
- <view class="item-right" @click.stop="deleteItem(index)">
|
|
|
- <u-icon name="trash" color="#dd524d" size="22"></u-icon>
|
|
|
- </view>
|
|
|
+ <view class="address-info">
|
|
|
+ <view class="name">{{ item.name }}</view>
|
|
|
+ <view class="detail">{{ item.address }}</view>
|
|
|
</view>
|
|
|
- </u-radio-group>
|
|
|
|
|
|
- <view v-if="addressList.length === 0" class="empty-tip">
|
|
|
- 暂无地址，请添加
|
|
|
+ <view class="delete-btn" @click.stop="onDelete(item)">
|
|
|
+ <u-icon name="trash" color="#999" size="22"></u-icon>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </u-radio-group>
|
|
|
+ </view>
|
|
|
|
|
|
- <view class="btn-group">
|
|
|
- <button class="custom-btn btn-back" @click="goBack">返回</button>
|
|
|
- <button class="custom-btn btn-save" @click="saveData">保存</button>
|
|
|
- </view>
|
|
|
+ <u-gap height="100"></u-gap>
|
|
|
+
|
|
|
+ <view class="footer-bar">
|
|
|
+ <u-button
|
|
|
+ text="保存"
|
|
|
+ color="#1ecbc3"
|
|
|
+ shape="circle"
|
|
|
+ size="large"
|
|
|
+ customStyle="height: 48px; font-size: 16px;"
|
|
|
+ @click="onSave"
|
|
|
+ ></u-button>
|
|
|
</view>
|
|
|
+
|
|
|
+ <u-modal
|
|
|
+ :show="isShow"
|
|
|
+ title=""
|
|
|
+ content="确定要删除该地址吗？"
|
|
|
+ showCancelButton
|
|
|
+ confirmColor="#1ecbc3"
|
|
|
+ @confirm="onDelete"
|
|
|
+ @cancel="isShow = false"
|
|
|
+ ></u-modal>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
- getInfo
|
|
|
+ getInfo,
|
|
|
+ getJsLocation,
|
|
|
} from '@/api/index';
|
|
|
import {
|
|
|
netVirtualAddrAdd,
|
|
|
+ netVirtualAddrDel,
|
|
|
getVirtualAddrByPhone
|
|
|
} from '@/api/address';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
query: {},
|
|
|
- // 选中的值
|
|
|
- selectedValue: 1,
|
|
|
- // 模拟数据列表
|
|
|
+ selected: '',
|
|
|
+ currentLocation: '信达国际金融中心',
|
|
|
+ isShow: false,
|
|
|
+ // 数据
|
|
|
addressList: [
|
|
|
- { id: 1, name: '太原市小店区xxx' },
|
|
|
- { id: 2, name: '晋中市榆次区xxx' }
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: '信达国际金融中心',
|
|
|
+ address: '山西省太原市万柏林区迎泽西大街86号',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: '信达国际金融中心',
|
|
|
+ address: '山西省太原市万柏林区迎泽西大街86号',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: '信达国际金融中心',
|
|
|
+ address: '山西省太原市万柏林区迎泽西大街86号',
|
|
|
+ }
|
|
|
]
|
|
|
- };
|
|
|
+ }
|
|
|
},
|
|
|
onLoad(query) {
|
|
|
this.query = query;
|
|
|
},
|
|
|
onShow() {
|
|
|
// this.getData();
|
|
|
- this.getUData();
|
|
|
},
|
|
|
methods: {
|
|
|
getData() {
|
|
|
@@ -79,23 +113,63 @@ export default {
|
|
|
// console.log(1, res)
|
|
|
});
|
|
|
},
|
|
|
- getUData() {
|
|
|
- getInfo().then(res => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- this.userInfo = res.data.data;
|
|
|
+ // 选择地址（单选逻辑）
|
|
|
+ onChange(e) {
|
|
|
+ console.log(e)
|
|
|
+ },
|
|
|
+ // 点击我的位置
|
|
|
+ chooseLocation() {
|
|
|
+ console.log('点击我的位置');
|
|
|
+ },
|
|
|
+ // 删除确认
|
|
|
+ onDelete(item) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定要删除该地址吗？',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ netVirtualAddrDel({ id: item.id }).then(res => {
|
|
|
+ uni.$u.toast(res.data.msg);
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
+ // this.isShow = true;
|
|
|
},
|
|
|
- // 点击文字也能选中
|
|
|
- selectItem(id) {
|
|
|
- this.selectedValue = id;
|
|
|
+ // 点击保存
|
|
|
+ onSave() {
|
|
|
+ const selected = this.addressList.find(item => item.id === this.selected);
|
|
|
+ if(selected) {
|
|
|
+ console.log('保存选中的地址:', selected);
|
|
|
+ // let params = {
|
|
|
+ // name: selected.name,
|
|
|
+ // address: selected.address,
|
|
|
+ // latitude: selected.latitude,
|
|
|
+ // longitude: selected.longitude,
|
|
|
+ // cOpenId: uni.getStorageSync('wx_copenid')
|
|
|
+ // }
|
|
|
+ // // 更新商户的位置
|
|
|
+ // getJsLocation(params).then(res => {
|
|
|
+ // uni.navigateBack();
|
|
|
+ // });
|
|
|
+ } else {
|
|
|
+ uni.$u.toast('请选择一个地址');
|
|
|
+ }
|
|
|
},
|
|
|
- // 添加地址
|
|
|
- addAddress() {
|
|
|
+ // 跳转新增
|
|
|
+ goToAdd() {
|
|
|
uni.chooseLocation({
|
|
|
success: res => {
|
|
|
console.log(res)
|
|
|
- return;
|
|
|
+ // address: "融创长风壹号东门北120米"
|
|
|
+ // distance: 57
|
|
|
+ // errMsg: "chooseLocation:ok"
|
|
|
+ // latitude: 37.826281
|
|
|
+ // longitude: 112.516064
|
|
|
+ // name: "中国电信融创长风壹号营业厅"
|
|
|
let params = {
|
|
|
name: res.name,
|
|
|
address: res.address,
|
|
|
@@ -115,159 +189,104 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
- },
|
|
|
- // 删除条目
|
|
|
- deleteItem(index) {
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '确定要删除该地址吗？',
|
|
|
- success: (res) => {
|
|
|
- if (res.confirm) {
|
|
|
- this.addressList.splice(index, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 返回
|
|
|
- goBack() {
|
|
|
- uni.navigateBack();
|
|
|
- },
|
|
|
- // 保存
|
|
|
- saveData() {
|
|
|
- console.log('当前选中ID:', this.selectedValue);
|
|
|
- uni.showToast({ title: '保存成功', icon: 'success' });
|
|
|
}
|
|
|
}
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-$theme-color: #2b9b86;
|
|
|
-$bg-color: #e6fafa;
|
|
|
-
|
|
|
.page-container {
|
|
|
min-height: 100vh;
|
|
|
- padding: 24rpx;
|
|
|
- background-color: $bg-color;
|
|
|
-}
|
|
|
+ padding: 20rpx;
|
|
|
+ padding-bottom: 120rpx;
|
|
|
+ background-color: #F6F7F9;
|
|
|
|
|
|
-.location-bar {
|
|
|
- padding: 20rpx 24rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
- background-color: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .location-content {
|
|
|
+ .location-card {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.02);
|
|
|
|
|
|
- .location-text {
|
|
|
- margin-left: 10rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333;
|
|
|
+ .left-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .info {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.main-card {
|
|
|
- min-height: 500rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
- padding: 20rpx 24rpx;
|
|
|
- background-color: #fff;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- position: relative;
|
|
|
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
-}
|
|
|
|
|
|
-.card-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
- .header-title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .add-btn {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- border: 2rpx solid $theme-color;
|
|
|
- border-radius: 8rpx;
|
|
|
+ .list-title {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
align-items: center;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.address-list {
|
|
|
- flex: 1;
|
|
|
- margin-top: 10rpx;
|
|
|
-}
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
-.list-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 24rpx 0;
|
|
|
- border-bottom: 1rpx solid #f5f5f5;
|
|
|
+ .more {
|
|
|
+ color: #1ecbc3;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .item-left {
|
|
|
+ .address-item {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .item-text {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
+ box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.02);
|
|
|
+ transition: opacity 0.2s;
|
|
|
|
|
|
- .item-right {
|
|
|
- padding-left: 20rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.empty-tip {
|
|
|
- text-align: center;
|
|
|
- color: #999;
|
|
|
- padding-top: 50rpx;
|
|
|
-}
|
|
|
+ .check-icon {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
|
|
|
-.btn-group {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 40rpx;
|
|
|
- padding-bottom: 10rpx;
|
|
|
-}
|
|
|
+ .address-info {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
|
-.custom-btn {
|
|
|
- width: 45%;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- border: none;
|
|
|
+ .name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &::after {
|
|
|
- border: none;
|
|
|
+ .delete-btn {
|
|
|
+ padding: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-.btn-back {
|
|
|
- background-color: #fff;
|
|
|
- color: $theme-color;
|
|
|
- border: 2rpx solid $theme-color;
|
|
|
-}
|
|
|
-
|
|
|
-.btn-save {
|
|
|
- background-color: $theme-color;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
</style>
|
郭鹏飞