最近iOS客户端迭代放缓,被发配去做一些前端开发工作,后面会总结一些前端开发经验
框架:Taro
基于:Vue3.0
<template>
<view class="">
<view class="text-center mt-30" @tap="addImg">
<image :src="require('@/images/avatar_unknown.png')" class="w-80 h-80 rounded-40" />
<view class="text-12 text-blue">添加照片</view>
</view>
<view class="bg-white mt-20">
<view v-for="(item, index) in dataList" :key="index" class="h-48 flex items-center px-12 van-hairline--bottom">
<text class="w-70 text-dgray-900">{{ item.title }}</text>
<view v-if="index == 4" class="flex items-center">
<view
v-for="(value, sexidx) in ['男', '女']"
:key="sexidx"
class="text-dgray-900 flex items-center mx-12"
@tap="clickSex(sexidx)"
>
<image
class="w-20 h-20 mr-4"
:src="
sexidx == sexIndex ? require('@/images/radio_selected.png') : require('@/images/radio_unselected.png')
"
/>
<text>{{ value }}</text>
</view>
</view>
<input
v-else
v-model="item.value"
:type="item.type"
:placeholder="item.placeholder"
:maxlength="item.maxlength"
class="text-dgray-900 ml-12"
/>
</view>
</view>
<view class="mx-12">
<button
type="primary"
class="mt-20"
block
:disabled="!disabled"
:loading="loading"
loading-text="绑定中..."
loading-type="spinner"
@click="submitClick"
>
确认绑定
</button>
</view>
</view>
</template>
<script>
import Taro from '@tarojs/taro'
export default {
data() {
return {
loading: false,
sexIndex: -1,
dataList: [
{
title: '姓名',
value: null,
placeholder: '请填写您的真实姓名',
type: 'text',
maxlength: '5',
regExp: /^[\u4e00-\u9fa5]+$/,
errMsg: '请输入中文姓名',
},
{
title: '身份证号',
value: null,
placeholder: '请填写您的身份证号',
type: 'idcard',
maxlength: '18',
regExp: /^(\d{18,18}|\d{15,15}|\d{17,17}[x|X])$/,
errMsg: '请输入15位或者18位身份证号',
},
{
title: '手机号',
value: null,
placeholder: '请填写您的手机号',
type: 'number',
maxlength: '11',
regExp: /^1\d{10}$/,
errMsg: '请输入正确手机号',
},
{
title: '年龄',
value: null,
placeholder: '请填写您的年龄',
type: 'number',
maxlength: '3',
regExp: /^\d{1,3}$/,
errMsg: '请输入1到3位整数',
},
{
title: '性别',
value: null,
placeholder: '',
type: 'check',
maxlength: '1',
regExp: /^\d{1}$/,
errMsg: '请选择性别',
},
],
}
},
computed: {
disabled() {
let count = 0
this.dataList.forEach((item) => {
if (item.value) {
count++
}
})
if (count >= 4) {
return true
}
return false
},
},
methods: {
addImg() {},
clickSex(index) {
this.sexIndex = index
this.dataList[4].value = index
},
submitClick() {
for (let index = 0; index < this.dataList.length; index++) {
const item = this.dataList[index]
if (!item.regExp.test(item.value)) {
Taro.showToast({
title: item.errMsg,
duration: 2000,
icon: 'none',
})
return
}
}
},
},
}
</script>
效果:
image.png
使用时导入css样式即可 tailwindcss
网友评论