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>
|
||||
Reference in New Issue
Block a user