first commit
This commit is contained in:
267
pages/address/list.vue
Normal file
267
pages/address/list.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<view class="address">
|
||||
<wd-navbar title="地址管理" safeAreaInsetTop left-arrow @click-left="back"></wd-navbar>
|
||||
|
||||
<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
|
||||
<view style="padding: 30rpx">
|
||||
<view class="address-a" @click="back_A(item)" v-for="(item, index) in dataList" :key="index">
|
||||
<view class="top">
|
||||
<view class="top-a">
|
||||
<view>{{ item.receiverName }}</view>
|
||||
<view>{{ item.receiverPhone }}</view>
|
||||
</view>
|
||||
<view class="top-b">{{ item.receiverArea }} {{ item.receiverAddress }}</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="bottom-r">
|
||||
<view @click.stop="deleAddress(item)">删除</view>
|
||||
<view style="margin-left: 50rpx" @click.stop="tn(`./add?id=${item.id}`)">编辑</view>
|
||||
<view @click.stop="copyAddress(item)" style="margin: 0 50rpx">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</z-paging>
|
||||
|
||||
<view class="bottom-btn">
|
||||
<view class="button-a" @click="tn('./add')">新增收货地址</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import api from '@/api/index';
|
||||
import { ref, computed } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
|
||||
const paging = ref(null);
|
||||
const type = ref(null);
|
||||
const dataList = ref([]);
|
||||
|
||||
onLoad((options: any) => {
|
||||
type.value = options.type;
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
paging.value.reload();
|
||||
});
|
||||
|
||||
const queryList = (pageNo, pageSize) => {
|
||||
api.addressPage({ pageNo, pageSize })
|
||||
.then((res: any) => {
|
||||
paging.value.complete(res.list);
|
||||
})
|
||||
.catch((res) => {
|
||||
paging.value.complete(false);
|
||||
});
|
||||
};
|
||||
|
||||
const back = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const tn = (e) => {
|
||||
uni.navigateTo({
|
||||
url: e
|
||||
});
|
||||
};
|
||||
|
||||
const back_A = (e) => {
|
||||
if (type.value == 1) {
|
||||
uni.$emit('address', e);
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const deleAddress = (data) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否确认删除?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
api.addressDel({ id: data.id }).then((res) => {
|
||||
paging.value.reload();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const copyAddress = (data) => {
|
||||
let aaa = `收货人:${data.receiverName}
|
||||
手机号码:${data.receiverPhone}
|
||||
所在地区:${data.receiverArea}
|
||||
详细地址:${data.receiverAddress}`;
|
||||
uni.setClipboardData({
|
||||
data: aaa,
|
||||
success: function () {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// export default {
|
||||
// data() {
|
||||
// return {
|
||||
// list: [],
|
||||
// type: null
|
||||
// };
|
||||
// },
|
||||
// onLoad(option) {
|
||||
// this.type = option.type;
|
||||
// this.getList();
|
||||
// },
|
||||
// methods: {
|
||||
// getList() {
|
||||
// // addressList().then((res) => {
|
||||
// // this.list = res;
|
||||
// // });
|
||||
// },
|
||||
|
||||
// copyAddress(data) {
|
||||
// let aaa = `收货人:${data.realName}
|
||||
// 手机号码:${data.phone}
|
||||
// 所在地区:${data.province}${data.city}${data.district}
|
||||
// 详细地址:${data.detail}`;
|
||||
// uni.setClipboardData({
|
||||
// data: aaa,
|
||||
// success: function () {
|
||||
// console.log('success');
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
// back_A(e) {
|
||||
// if (this.type == 1) {
|
||||
// uni.$emit('address', e);
|
||||
// uni.navigateBack();
|
||||
// } else {
|
||||
// return;
|
||||
// }
|
||||
// },
|
||||
// deleAddress(data) {
|
||||
// uni.showModal({
|
||||
// title: '提示',
|
||||
// content: '是否确认删除?',
|
||||
// success: (res) => {
|
||||
// if (res.confirm) {
|
||||
// addressDel({ id: data.id }).then((res) => {
|
||||
// this.getList();
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
// tn(e) {
|
||||
// wx.chooseAddress({
|
||||
// success: (res) => {
|
||||
// addressSave({
|
||||
// realName: res.userName,
|
||||
// phone: res.telNumber,
|
||||
// province: res.provinceName,
|
||||
// city: res.cityName,
|
||||
// district: res.countyName,
|
||||
// detail: res.detailInfo
|
||||
// }).then((res) => {
|
||||
// this.getList();
|
||||
// });
|
||||
// console.log(res);
|
||||
// },
|
||||
// fail: (err) => {
|
||||
// console.log(err);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.address {
|
||||
.address-a {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 2rpx 21rpx 0px rgba(184, 184, 184, 0.35);
|
||||
border-radius: 17rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.top {
|
||||
padding: 40rpx;
|
||||
border-bottom: 1rpx solid #f3f3f3;
|
||||
|
||||
.top-a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #222222;
|
||||
margin-bottom: 45rpx;
|
||||
}
|
||||
|
||||
.top-b {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding: 35rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.bottom-che {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.bottom-r {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-btn {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
padding: 30rpx;
|
||||
background-color: #ffffff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
box-shadow: 0px 6rpx 16rpx 2rpx rgba(170, 170, 170, 0.35);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.button-a {
|
||||
width: 690rpx;
|
||||
height: 90rpx;
|
||||
background: #799675;
|
||||
border-radius: 15rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #ffffff;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user