first commit
This commit is contained in:
PC-202306242200\Administrator
252
pages/address/add.vue
Normal file
252
pages/address/add.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<view class="address-add">
|
||||
<wd-navbar title="新增地址" safeAreaInsetTop left-arrow @click-left="back"></wd-navbar>
|
||||
|
||||
<view class="from-address">
|
||||
<view class="title">收货人</view>
|
||||
<view class="content">
|
||||
<wd-input type="text" no-border v-model="from.receiverName" placeholder="请输入收货人姓名" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="from-address">
|
||||
<view class="title">手机号</view>
|
||||
<view class="content">
|
||||
<wd-input type="number" no-border v-model="from.receiverPhone" placeholder="请输入手机号" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="from-address">
|
||||
<view class="title">所在地区</view>
|
||||
<view class="content">
|
||||
<wd-input type="text" no-border v-model="from.receiverArea" placeholder="请输入省市区" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="from-address">
|
||||
<view class="title">详细地址</view>
|
||||
<view class="content">
|
||||
<wd-input type="text" no-border v-model="from.receiverAddress" placeholder="请输入详细地址" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="from-address" style="margin-top: 30rpx; justify-content: space-between">
|
||||
<view class="title" style="width: 300rpx">设置为默认地址</view>
|
||||
<view>
|
||||
<wd-switch v-model="from.isDefault" size="20px" />
|
||||
<!-- <up-switch v-model="from.is_default" size="20" activeColor="#7ADE77" :activeValue="1" :inactiveValue="0"></up-switch> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-btn">
|
||||
<view class="button-a" @click="add_Address">保存</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import api from '@/api/index';
|
||||
import { ref, computed } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
|
||||
onLoad((options) => {
|
||||
if(options.id){
|
||||
api.addressInfo({ id: options.id }).then((res) => {
|
||||
// 1. 处理接口返回数据（假设有效数据在 res.data 中）
|
||||
const resData = res || {}; // 避免空数据报错
|
||||
resData.isDefault = resData.isDefault ? true : false;
|
||||
|
||||
// 2. 筛选：只取 from 中已有的字段
|
||||
const formKeys = Object.keys(from.value); // from 的所有键（如 receiverName、receiverPhone 等）
|
||||
const updateData = {};
|
||||
formKeys.forEach((key) => {
|
||||
if (resData.hasOwnProperty(key)) {
|
||||
// 仅当接口数据有该字段时才取
|
||||
updateData[key] = resData[key];
|
||||
}
|
||||
});
|
||||
// 3. 合并到 from.value（覆盖已有字段，保留默认值）
|
||||
Object.assign(from.value, updateData);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
const from = ref({
|
||||
receiverName: '',
|
||||
receiverPhone: '',
|
||||
receiverArea: '',
|
||||
receiverAddress: '',
|
||||
isDefault: true,
|
||||
status: 0,
|
||||
id: ''
|
||||
});
|
||||
|
||||
const add_Address = () => {
|
||||
let data = JSON.parse(JSON.stringify(from.value));
|
||||
data.isDefault = data.isDefault ? 1 : 0;
|
||||
|
||||
if(data.id){
|
||||
api.addressUp(data).then((res) => {
|
||||
uni.navigateBack();
|
||||
});
|
||||
}else{
|
||||
api.addressAdd(data).then((res) => {
|
||||
uni.navigateBack();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
const back = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
// export default {
|
||||
// data() {
|
||||
// return {
|
||||
// value: '',
|
||||
// styles: {
|
||||
// color: '#2979FF',
|
||||
// borderColor: '#fff'
|
||||
// },
|
||||
// classes: '请选择',
|
||||
// dataTree: [],
|
||||
// from: {
|
||||
// realName: '',
|
||||
// phone: '',
|
||||
// city: '',
|
||||
// detail: '',
|
||||
// is_default: 0
|
||||
// },
|
||||
// type: null
|
||||
// };
|
||||
// },
|
||||
// onLoad(option) {
|
||||
// if (option.type == 'edit') {
|
||||
// this.type = option.type;
|
||||
// this.$http
|
||||
// .get_user_address_detail({
|
||||
// address_id: option.id
|
||||
// })
|
||||
// .then((res) => {
|
||||
// this.from.address_id = res.id;
|
||||
// this.from.name = res.name;
|
||||
// this.from.city = res.city;
|
||||
// this.from.is_default = Number(res.is_default);
|
||||
// this.from.phone = res.phone;
|
||||
// this.from.address = res.address;
|
||||
// console.log(res);
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// methods: {
|
||||
// handleGetRegion(region) {
|
||||
// this.from.city = region[0].name + '/' + region[1].name + '/' + region[2].name;
|
||||
// console.log(region);
|
||||
// },
|
||||
// back() {
|
||||
// uni.navigateBack();
|
||||
// },
|
||||
// from_mo(data) {
|
||||
// console.log(data);
|
||||
// this.from = {
|
||||
// name: data.name,
|
||||
// phone: data.phone,
|
||||
// province: data.province,
|
||||
// city: data.city,
|
||||
// area: data.area,
|
||||
// address: data.address,
|
||||
// status: parseInt(data.status),
|
||||
// code: data.code,
|
||||
// address_id: data.id
|
||||
// };
|
||||
// },
|
||||
// add_Address() {
|
||||
// if (uni.$u.test.mobile(this.from.phone) != true) {
|
||||
// uni.showToast({
|
||||
// title: '手机号格式错误',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
// if (this.type == 'edit') {
|
||||
// this.$http.edit_user_address(this.from).then((res) => {
|
||||
// this.$http.show('保存成功');
|
||||
// setTimeout(() => {
|
||||
// uni.navigateBack();
|
||||
// }, 2000);
|
||||
// });
|
||||
// } else {
|
||||
// this.$http.add_user_address(this.from).then((res) => {
|
||||
// this.$http.show('保存成功');
|
||||
// // uni.$emit('Addaddress', e)
|
||||
// setTimeout(() => {
|
||||
// uni.navigateBack();
|
||||
// }, 2000);
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// onchange(e) {
|
||||
// const value = e.detail.value;
|
||||
// this.from.province = value[0].text;
|
||||
// this.from.city = value[1].text;
|
||||
// this.from.area = value[2].text;
|
||||
// this.from.code = value[2].value;
|
||||
// },
|
||||
// onnodeclick(node) {}
|
||||
// }
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.address-add {
|
||||
width: 100%;
|
||||
padding: 00rpx 0 180rpx;
|
||||
|
||||
.from-address {
|
||||
background-color: #fff;
|
||||
height: 110rpx;
|
||||
padding: 0rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
width: 150rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
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