167 lines
3.9 KiB
Vue
167 lines
3.9 KiB
Vue
<template>
|
|
<view>
|
|
<view class="example">
|
|
<!-- 基础表单校验 -->
|
|
<uni-forms ref="valiForm" :rules="rules" :modelValue="formData">
|
|
<uni-forms-item label="收货人" name="name">
|
|
<uni-easyinput v-model="formData.name" placeholder="请输入收货人姓名(最多5个字)" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="联系电话" name="phone">
|
|
<uni-easyinput v-model="formData.phone" placeholder="请输入联系电话" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="所在地区" name="region">
|
|
<uni-data-picker
|
|
placeholder="请选择所在地区"
|
|
popup-title="请选择所在地区"
|
|
:localdata="dataTree"
|
|
v-model="formData.region"
|
|
@change="onchange"
|
|
@nodeclick="onnodeclick"
|
|
@popupopened="onpopupopened"
|
|
@popupclosed="onpopupclosed"
|
|
></uni-data-picker>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="详细地址" name="introduction">
|
|
<uni-easyinput type="textarea" v-model="formData.site" placeholder="请输入详细地址" />
|
|
</uni-forms-item>
|
|
<button type="primary" @click="submit">保存地址</button>
|
|
</uni-forms>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { APIPostAddAddress, APIPostModificationAddress } from '@/api/site/index.js';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
// 表单数据
|
|
const formData = ref({
|
|
name: '',
|
|
phone: '',
|
|
region: '',
|
|
site: '',
|
|
id: ''
|
|
});
|
|
//获取表单本身
|
|
const valiForm = ref(null);
|
|
// 校验规则;
|
|
const rules = {
|
|
name: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '姓名不能为空'
|
|
}
|
|
]
|
|
},
|
|
phone: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '手机号不能为空'
|
|
},
|
|
{
|
|
format: 'number',
|
|
errorMessage: '手机号格式不对'
|
|
}
|
|
]
|
|
}
|
|
};
|
|
// 提交表单的处理函数
|
|
const submit = () => {
|
|
valiForm.value
|
|
.validate()
|
|
.then((res) => {
|
|
if (formData.value.id) {
|
|
uni.showToast({
|
|
title: `修改成功`
|
|
});
|
|
PostModificationAddress();
|
|
} else {
|
|
uni.showToast({
|
|
title: `校验通过`
|
|
});
|
|
PostAddAddress();
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log('err', err);
|
|
});
|
|
};
|
|
const dataTree = ref([
|
|
{
|
|
text: '一年级',
|
|
value: '1-0',
|
|
children: [
|
|
{ text: '1.1班', value: '1-1' },
|
|
{ text: '1.2班', value: '1-2' }
|
|
]
|
|
}
|
|
]);
|
|
// 定义方法
|
|
// 点击子节点
|
|
const onNodeClick = (e) => {
|
|
console.log(e);
|
|
};
|
|
//弹出层弹出时触发
|
|
const onPopupOpened = () => {
|
|
console.log('popupopened');
|
|
};
|
|
//弹出层弹关闭时触发
|
|
const onPopupClosed = () => {
|
|
console.log('popupclosed');
|
|
};
|
|
// 选择完成
|
|
const onChange = (e) => {
|
|
console.log('onchange:', e);
|
|
};
|
|
// 添加地址
|
|
const PostAddAddress = async () => {
|
|
const res = await APIPostAddAddress({ address: formData.value.site, addressName: formData.value.name, addressPhone: formData.value.phone });
|
|
if (res.code === 200) {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}
|
|
};
|
|
//编辑地址
|
|
const PostModificationAddress = async () => {
|
|
const res = await APIPostModificationAddress({ address: formData.value.site, addressName: formData.value.name, addressPhone: formData.value.phone, id: formData.value.id });
|
|
if (res.code === 200) {
|
|
formData.value.id = '';
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}
|
|
};
|
|
//编辑地址
|
|
onLoad((option) => {
|
|
formData.value.name = option.name;
|
|
formData.value.phone = option.phone;
|
|
formData.value.site = option.address;
|
|
formData.value.id = option.id;
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.example {
|
|
padding: 15px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.segmented-control {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.button-group {
|
|
margin-top: 15px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|