通过微信开发者工具 商城模板 创建新小程序
This commit is contained in:
191
mini-program/pages/usercenter/address/list/index.js
Normal file
191
mini-program/pages/usercenter/address/list/index.js
Normal file
@@ -0,0 +1,191 @@
|
||||
/* eslint-disable no-param-reassign */
|
||||
import { fetchDeliveryAddressList } from '../../../../services/address/fetchAddress';
|
||||
import Toast from 'tdesign-miniprogram/toast/index';
|
||||
import { resolveAddress, rejectAddress } from './util';
|
||||
import { getAddressPromise } from '../edit/util';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
addressList: [],
|
||||
deleteID: '',
|
||||
showDeleteConfirm: false,
|
||||
isOrderSure: false,
|
||||
},
|
||||
|
||||
/** 选择模式 */
|
||||
selectMode: false,
|
||||
/** 是否已经选择地址，不置为true的话页面离开时会触发取消选择行为 */
|
||||
hasSelect: false,
|
||||
|
||||
onLoad(query) {
|
||||
const { selectMode = '', isOrderSure = '', id = '' } = query;
|
||||
this.setData({
|
||||
isOrderSure: !!isOrderSure,
|
||||
id,
|
||||
});
|
||||
this.selectMode = !!selectMode;
|
||||
this.init();
|
||||
},
|
||||
|
||||
init() {
|
||||
this.getAddressList();
|
||||
},
|
||||
onUnload() {
|
||||
if (this.selectMode && !this.hasSelect) {
|
||||
rejectAddress();
|
||||
}
|
||||
},
|
||||
getAddressList() {
|
||||
const { id } = this.data;
|
||||
fetchDeliveryAddressList().then((addressList) => {
|
||||
addressList.forEach((address) => {
|
||||
if (address.id === id) {
|
||||
address.checked = true;
|
||||
}
|
||||
});
|
||||
this.setData({ addressList });
|
||||
});
|
||||
},
|
||||
getWXAddressHandle() {
|
||||
wx.chooseAddress({
|
||||
success: (res) => {
|
||||
if (res.errMsg.indexOf('ok') === -1) {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: res.errMsg,
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '添加成功',
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
const { length: len } = this.data.addressList;
|
||||
this.setData({
|
||||
[`addressList[${len}]`]: {
|
||||
name: res.userName,
|
||||
phoneNumber: res.telNumber,
|
||||
address: `${res.provinceName}${res.cityName}${res.countryName}${res.detailInfo}`,
|
||||
isDefault: 0,
|
||||
tag: '微信地址',
|
||||
id: len,
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
confirmDeleteHandle({ detail }) {
|
||||
const { id } = detail || {};
|
||||
if (id !== undefined) {
|
||||
this.setData({ deleteID: id, showDeleteConfirm: true });
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '地址删除成功',
|
||||
theme: 'success',
|
||||
duration: 1000,
|
||||
});
|
||||
} else {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '需要组件库发新版才能拿到地址ID',
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
},
|
||||
deleteAddressHandle(e) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
this.setData({
|
||||
addressList: this.data.addressList.filter((address) => address.id !== id),
|
||||
deleteID: '',
|
||||
showDeleteConfirm: false,
|
||||
});
|
||||
},
|
||||
editAddressHandle({ detail }) {
|
||||
this.waitForNewAddress();
|
||||
|
||||
const { id } = detail || {};
|
||||
wx.navigateTo({ url: `/pages/usercenter/address/edit/index?id=${id}` });
|
||||
},
|
||||
selectHandle({ detail }) {
|
||||
if (this.selectMode) {
|
||||
this.hasSelect = true;
|
||||
resolveAddress(detail);
|
||||
wx.navigateBack({ delta: 1 });
|
||||
} else {
|
||||
this.editAddressHandle({ detail });
|
||||
}
|
||||
},
|
||||
createHandle() {
|
||||
this.waitForNewAddress();
|
||||
wx.navigateTo({ url: '/pages/usercenter/address/edit/index' });
|
||||
},
|
||||
|
||||
waitForNewAddress() {
|
||||
getAddressPromise()
|
||||
.then((newAddress) => {
|
||||
let addressList = [...this.data.addressList];
|
||||
|
||||
newAddress.phoneNumber = newAddress.phone;
|
||||
newAddress.address = `${newAddress.provinceName}${newAddress.cityName}${newAddress.districtName}${newAddress.detailAddress}`;
|
||||
newAddress.tag = newAddress.addressTag;
|
||||
|
||||
if (!newAddress.addressId) {
|
||||
newAddress.id = `${addressList.length}`;
|
||||
newAddress.addressId = `${addressList.length}`;
|
||||
|
||||
if (newAddress.isDefault === 1) {
|
||||
addressList = addressList.map((address) => {
|
||||
address.isDefault = 0;
|
||||
|
||||
return address;
|
||||
});
|
||||
} else {
|
||||
newAddress.isDefault = 0;
|
||||
}
|
||||
|
||||
addressList.push(newAddress);
|
||||
} else {
|
||||
addressList = addressList.map((address) => {
|
||||
if (address.addressId === newAddress.addressId) {
|
||||
return newAddress;
|
||||
}
|
||||
return address;
|
||||
});
|
||||
}
|
||||
|
||||
addressList.sort((prevAddress, nextAddress) => {
|
||||
if (prevAddress.isDefault && !nextAddress.isDefault) {
|
||||
return -1;
|
||||
}
|
||||
if (!prevAddress.isDefault && nextAddress.isDefault) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
this.setData({
|
||||
addressList: addressList,
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
if (e.message !== 'cancel') {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '地址编辑发生错误',
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
11
mini-program/pages/usercenter/address/list/index.json
Normal file
11
mini-program/pages/usercenter/address/list/index.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"navigationBarTitleText": "收货地址",
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-image": "/components/webp-image/index",
|
||||
"t-toast": "tdesign-miniprogram/toast/toast",
|
||||
"t-address-item": "../../components/ui-address-item/index",
|
||||
"t-location": "../../components/t-location/index",
|
||||
"t-empty": "tdesign-miniprogram/empty/empty"
|
||||
}
|
||||
}
|
||||
49
mini-program/pages/usercenter/address/list/index.wxml
Normal file
49
mini-program/pages/usercenter/address/list/index.wxml
Normal file
@@ -0,0 +1,49 @@
|
||||
<view class="address-container">
|
||||
<view class="address-list" wx:if="{{addressList.length > 0}}">
|
||||
<block
|
||||
wx:for="{{addressList}}"
|
||||
wx:for-index="index"
|
||||
wx:for-item="address"
|
||||
wx:key="addressId"
|
||||
>
|
||||
<t-address-item
|
||||
isDrawLine="{{index+1 !== addressList.length}}"
|
||||
extra-space="{{extraSpace}}"
|
||||
class-prefix="ym"
|
||||
address="{{address}}"
|
||||
data-id="{{address.id}}"
|
||||
bind:onSelect="selectHandle"
|
||||
bind:onDelete="deleteAddressHandle"
|
||||
bind:onEdit="editAddressHandle"
|
||||
/>
|
||||
</block>
|
||||
</view>
|
||||
<view wx:else class="no-address">
|
||||
<t-empty icon="" description="暂无收货地址，赶快添加吧" />
|
||||
</view>
|
||||
<view class="bottom-fixed">
|
||||
<view class="btn-wrap">
|
||||
<t-location
|
||||
title="微信地址导入"
|
||||
isOrderSure="{{isOrderSure}}"
|
||||
isDisabledBtn="{{addressList.length >= 20}}"
|
||||
navigateUrl="/pages/usercenter/address/edit/index"
|
||||
navigateEvent="onWeixinAddressPassed"
|
||||
t-class="location-btn"
|
||||
isCustomStyle="{{true}}"
|
||||
bind:navigate="waitForNewAddress"
|
||||
/>
|
||||
<view class="address-btn {{addressList.length >= 20 ? 'btn-default':''}}" bind:tap="createHandle">
|
||||
<t-icon
|
||||
name="add"
|
||||
size="48rpx"
|
||||
color="#fff"
|
||||
t-class="custom-class"
|
||||
/>
|
||||
<text>新建收货地址</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer" wx:if="{{addressList.length >= 20}}">最多支持添加20个收货地址</view>
|
||||
</view>
|
||||
</view>
|
||||
<t-toast id="t-toast" />
|
||||
109
mini-program/pages/usercenter/address/list/index.wxss
Normal file
109
mini-program/pages/usercenter/address/list/index.wxss
Normal file
@@ -0,0 +1,109 @@
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
height: 100%;
|
||||
}
|
||||
.address-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 172rpx);
|
||||
}
|
||||
.address-container .address-list {
|
||||
font-size: 24rpx;
|
||||
background-color: #ffffff;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.address-list .no-address {
|
||||
width: 750rpx;
|
||||
padding-top: 30vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.address-list .no-address__icon {
|
||||
width: 224rpx;
|
||||
height: 224rpx;
|
||||
}
|
||||
.address-list .no-address__text {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #999999;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.address-container .bottom-fixed {
|
||||
border-top: 1rpx solid #e5e5e5;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12rpx 32rpx calc(env(safe-area-inset-bottom) + 12rpx) 32rpx;
|
||||
}
|
||||
.address-container .btn-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.address-container .btn-wrap .location-btn {
|
||||
width: 332rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
color: #333;
|
||||
position: relative;
|
||||
}
|
||||
.address-container .btn-wrap .location-btn::after {
|
||||
content: '';
|
||||
position: absolute; /* 把父视图设置为relative，方便定位*/
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 88rpx;
|
||||
border: #dddddd 2rpx solid;
|
||||
}
|
||||
.address-container .btn-wrap .address-btn {
|
||||
width: 332rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fa4126;
|
||||
border-radius: 44rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.address-container .btn-wrap .btn-default {
|
||||
background: #c6c6c6;
|
||||
}
|
||||
.address-container .bottom-fixed .footer {
|
||||
margin-top: 10rpx;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #ff2525;
|
||||
line-height: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
.address-container .message {
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
.address-container .custom-class {
|
||||
margin-right: 12rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
31
mini-program/pages/usercenter/address/list/util.js
Normal file
31
mini-program/pages/usercenter/address/list/util.js
Normal file
@@ -0,0 +1,31 @@
|
||||
let addressPromise = [];
|
||||
|
||||
/** 获取一个地址选择Promise */
|
||||
export const getAddressPromise = () => {
|
||||
let resolver;
|
||||
let rejecter;
|
||||
const nextPromise = new Promise((resolve, reject) => {
|
||||
resolver = resolve;
|
||||
rejecter = reject;
|
||||
});
|
||||
|
||||
addressPromise.push({ resolver, rejecter });
|
||||
|
||||
return nextPromise;
|
||||
};
|
||||
|
||||
/** 用户选择了一个地址 */
|
||||
export const resolveAddress = (address) => {
|
||||
const allAddress = [...addressPromise];
|
||||
addressPromise = [];
|
||||
|
||||
allAddress.forEach(({ resolver }) => resolver(address));
|
||||
};
|
||||
|
||||
/** 用户没有选择任何地址只是返回上一页了 */
|
||||
export const rejectAddress = () => {
|
||||
const allAddress = [...addressPromise];
|
||||
addressPromise = [];
|
||||
|
||||
allAddress.forEach(({ rejecter }) => rejecter(new Error('cancel')));
|
||||
};
|
||||
Reference in New Issue
Block a user