168 lines
3.9 KiB
Vue
168 lines
3.9 KiB
Vue
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
|
|
const formRef = ref(null)
|
|
const formData = reactive({
|
|
name: '',
|
|
phone: '',
|
|
address: '',
|
|
/** 省市区选择 */
|
|
selectAddress: '',
|
|
/** 是否默认地址 */
|
|
defaultAddress: false
|
|
})
|
|
const rules = {
|
|
name: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '收件人不能为空'
|
|
}
|
|
]
|
|
},
|
|
phone: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '手机号不能为空'
|
|
},
|
|
{
|
|
format: 'number',
|
|
errorMessage: '手机号只能输入数字'
|
|
}
|
|
]
|
|
},
|
|
selectAddress: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '所在地区不能为空'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
|
|
const submitForm = () => {
|
|
formRef.value.validate().then(res => {
|
|
console.log(res, '校验通过')
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="address-add">
|
|
<view class="address-box">
|
|
<view class="top-name">
|
|
<text class="left-name">地址信息</text>
|
|
<view
|
|
class="right-box"
|
|
@click="formData.defaultAddress = !formData.defaultAddress"
|
|
>
|
|
<view class="check">
|
|
<image
|
|
v-show="formData.defaultAddress"
|
|
src="/static/images/public/check-to-confirm.png"
|
|
mode="aspectFit"
|
|
class="check-icon"
|
|
></image>
|
|
</view>
|
|
<text>默认收货地址</text>
|
|
</view>
|
|
</view>
|
|
<!-- 表单 -->
|
|
<uni-forms
|
|
ref="formRef"
|
|
:rules="rules"
|
|
:modelValue="formData"
|
|
label-width="150rpx"
|
|
>
|
|
<uni-forms-item label="收件人" required name="name">
|
|
<uni-easyinput
|
|
v-model="formData.name"
|
|
placeholder="请输入收件人"
|
|
/>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="手机号" required name="phone">
|
|
<uni-easyinput
|
|
v-model="formData.phone"
|
|
placeholder="请输入手机号"
|
|
/>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="所在地区" required name="selectAddress">
|
|
<uni-easyinput
|
|
v-model="formData.selectAddress"
|
|
placeholder="请选择地区"
|
|
/>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="详细地址" name="address">
|
|
<uni-easyinput
|
|
type="textarea"
|
|
v-model="formData.address"
|
|
placeholder="请输入详细地址"
|
|
/>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
</view>
|
|
|
|
<!-- 底部按钮 -->
|
|
<bottom-view>
|
|
<cb-button @click="submitForm">确认添加</cb-button>
|
|
</bottom-view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background: #f9f9f9;
|
|
}
|
|
.address-add {
|
|
padding: 34rpx 32rpx;
|
|
.address-box {
|
|
padding: 34rpx 32rpx;
|
|
border-radius: 32rpx;
|
|
background: #ffffff;
|
|
.top-name {
|
|
margin-bottom: 32rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-family: PingFang SC, PingFang SC;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
.left-name {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.right-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.check {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
border-radius: 28rpx;
|
|
border: 2rpx solid #d9d9d9;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 10rpx;
|
|
.check-icon {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
}
|
|
}
|
|
|
|
text {
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|