Merge branch 'master' of https://gitee.com/geek-xd/geek-uniapp-vue3-uview-plus-uchart
This commit is contained in:
D
commit
80522b5e46
@ -277,4 +277,4 @@
|
|||||||
"navigationBarTitleText": "RuoYi",
|
"navigationBarTitleText": "RuoYi",
|
||||||
"navigationBarBackgroundColor": "#FFFFFF"
|
"navigationBarBackgroundColor": "#FFFFFF"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,75 +1,141 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view style="height: 200rpx;background-color: skyblue;"></view>
|
||||||
<image class="logo" src="@/static/logo.png"></image>
|
<view>
|
||||||
<view class="text-area">
|
<u--form labelPosition="left" :model="form" :rules="rules" ref="form1" :labelWidth="120"
|
||||||
<text class="title">Hello RuoYi-Vue</text>
|
:labelStyle="{ paddingLeft: '40rpx' }">
|
||||||
</view>
|
<u-form-item label="姓名" prop="name" borderBottom required>
|
||||||
<view class="text-area">
|
<u--input v-model="form.name" border="none" placeholder="请输入姓名" />
|
||||||
<up-text type="primary" text="uview-plus"></up-text>
|
</u-form-item>
|
||||||
</view>
|
|
||||||
<view class="charts-box">
|
<u-form-item label="性别" prop="sex" borderBottom @click="showSex = true">
|
||||||
<qiun-data-charts type="column" :chartData="chartData" />
|
<u--input v-model="form.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
|
||||||
</view>
|
suffixIcon="arrow-right" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="年龄" prop="age" borderBottom required>
|
||||||
|
<u--input v-model="form.age" border="none" placeholder="请输入年龄" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="手机号" prop="phone" borderBottom required>
|
||||||
|
<u--input v-model="form.phone" border="none" placeholder="请输入手机号" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="服务单位" prop="service" borderBottom required>
|
||||||
|
<u--input v-model="form.service" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
|
||||||
|
suffixIcon="arrow-right" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="从业年数" prop="years" borderBottom required>
|
||||||
|
<u--input v-model="form.years" border="none" placeholder="请输入从业年数" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="维修专长" prop="profession" borderBottom required>
|
||||||
|
<view @click="showSex = true">
|
||||||
|
<u--input disabled disabledColor="#ffffff" placeholder="添加" border="none" prefixIcon="plus-circle" />
|
||||||
|
</view>
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="服务地区" prop="region" borderBottom required>
|
||||||
|
<view @click="show.region = true">
|
||||||
|
<u--input disabled disabledColor="#ffffff" placeholder="添加" border="none" prefixIcon="plus-circle" />
|
||||||
|
</view>
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="居住地址" prop="address" borderBottom required>
|
||||||
|
<u--input v-model="form.address" border="none" placeholder="请输入居住地址" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="身份证号" prop="id_number" borderBottom required>
|
||||||
|
<u--input v-model="form.id_number" border="none" placeholder="请输入身份证号" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="支付宝账户" prop="alipay" borderBottom required>
|
||||||
|
<u--input v-model="form.alipay" border="none" placeholder="请输入支付宝账户" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="身份证上传" prop="id_card" borderBottom required>
|
||||||
|
<u--input v-model="form.id_card" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
|
||||||
|
suffixIcon="arrow-right" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="人脸识别" prop="face" borderBottom required>
|
||||||
|
<u--input v-model="form.face" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
|
||||||
|
suffixIcon="arrow-right" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="技能证书上传" prop="skill" borderBottom>
|
||||||
|
<u--input v-model="form.skill" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
|
||||||
|
suffixIcon="arrow-right" />
|
||||||
|
</u-form-item>
|
||||||
|
</u--form>
|
||||||
|
<u-action-sheet :show="show.sex" :actions="options.sex" title="请选择性别" @close="show.sex = false" @select="sexSelect" />
|
||||||
|
<u-action-sheet :show="show.unit" :actions="options.unit" title="请选择单位" @close="show.unit = false"
|
||||||
|
@select="unitSelect" />
|
||||||
|
<u-city-select v-model="show.region" @city-change="citySelect" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { reactive } from 'vue';
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
|
|
||||||
const chartData = ref({});
|
const form = reactive({
|
||||||
|
name: '',
|
||||||
|
sex: '',
|
||||||
|
age: '',
|
||||||
|
phone: '',
|
||||||
|
service: '',
|
||||||
|
years: '',
|
||||||
|
profession: '',
|
||||||
|
region: '',
|
||||||
|
address: '',
|
||||||
|
id_number: '',
|
||||||
|
alipay: '',
|
||||||
|
id_card: '',
|
||||||
|
face: '',
|
||||||
|
skill: ''
|
||||||
|
})
|
||||||
|
const rules = reactive({
|
||||||
|
|
||||||
onMounted(() => { getServerData() });
|
})
|
||||||
|
const show = reactive({
|
||||||
function getServerData() {
|
sex: false,
|
||||||
// 模拟从服务器获取数据时的延时
|
unit: false,
|
||||||
setTimeout(() => {
|
region: false
|
||||||
let res = {
|
})
|
||||||
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
|
const options = reactive({
|
||||||
series: [
|
sex: [{ name: '男' }, { name: '女' }],
|
||||||
{
|
unit: [
|
||||||
name: '目标值',
|
{ name: "济南产晏太阳能有限公司" },
|
||||||
data: [35, 36, 31, 33, 13, 34],
|
{ name: "济南一休太阳能有限公司" },
|
||||||
},
|
{ name: "济南荣源太阳能有限公司" },
|
||||||
{
|
{ name: "济南力瑞新能能源科技有限公司" },
|
||||||
name: '完成量',
|
{ name: "济南东狮设备安装有限公司" }
|
||||||
data: [18, 27, 21, 24, 6, 28],
|
],
|
||||||
},
|
profession: [
|
||||||
],
|
{ name: "普通太阳能" },
|
||||||
};
|
{ name: "壁挂太阳能" },
|
||||||
chartData.value = JSON.parse(JSON.stringify(res));
|
{ name: "分体式" },
|
||||||
}, 500);
|
{ name: "工程" },
|
||||||
|
{ name: "空气能" },
|
||||||
|
{ name: "电热水器" },
|
||||||
|
]
|
||||||
|
})
|
||||||
|
function sexSelect(e) {
|
||||||
|
form.sex = e.name
|
||||||
}
|
}
|
||||||
|
function unitSelect(e) {
|
||||||
|
form.unit = e.name
|
||||||
|
}
|
||||||
|
function citySelect(e) {
|
||||||
|
form.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
|
||||||
|
// e.province.value + '-' + e.city.value + '-' + e.area.value;
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.content {
|
:deep(.u-form-item__body__left__content__required) {
|
||||||
display: flex;
|
margin-left: 30rpx;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 200rpx;
|
|
||||||
width: 200rpx;
|
|
||||||
margin-top: 200rpx;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-bottom: 50rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-area {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 36rpx;
|
|
||||||
color: #8f8f94;
|
|
||||||
}
|
|
||||||
|
|
||||||
.charts-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 300px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user