xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-12-27 18:06:03 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

smart-app alpha 版本

Browse Source
This commit is contained in:
zhuoda
2024-03-10 22:26:32 +08:00
parent d64b769d40
commit 728ddb9a7e
295 changed files with 20261 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
smart-app/src/pages/form/components/font-size-select.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<view class="font-item-box">
<text :class="modelValue==0?'active':''" @click="modelValue=0">标准</text>
<view></view>
<text :class="modelValue==1?'active':''" @click="modelValue=1">大号</text>
<view></view>
<text :class="modelValue==2?'active':''" @click="modelValue=2">小号</text>
</view>
</template>
<script setup>
import { watch } from 'vue';
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
modelValue:{
type:Number,
default:0
}
})
watch(()=>props.modelValue,(newValue,oldValue)=>{
emits('update:modelValue',newValue)
})
</script>
<style lang="scss" scoped>
.font-item-box {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
text {
font-size: 30rpx;
color: #cccccc;
&.active {
color: #1A9AFF;
}
}
view {
width: 4rpx;
height: 16rpx;
background-color: #e6e6e6;
margin: 0 42rpx;
}
}
</style>

59
smart-app/src/pages/form/components/interest.vue Normal file
View File

@@ -0,0 +1,59 @@
<template>
<view class="card-content">
<view @click="modelValue = index" :class="modelValue == index?'active':''"
v-for="(item,index) in list" :key="index">
{{item}}
</view>
</view>
</template>
<script setup>
import { watch } from 'vue';
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
modelValue:{
type:Number,
default:0
},
list:{
type:Array,
default:[]
}
})
watch(()=>props.modelValue,(newValue,oldValue)=>{
emits('update:modelValue',newValue)
})
</script>
<style lang="scss" scoped>
.card-content {
padding: 0 30rpx 24rpx;
display: flex;
flex-wrap: wrap;
view {
box-sizing: border-box;
width: 197rpx;
height: 72rpx;
background: #f7f8f9;
border-radius: 8rpx;
text-align: center;
line-height: 72rpx;
margin-right: 24rpx;
margin-top: 24rpx;
font-size: 30rpx;
color: #323333;
border: 2rpx solid #f7f8f9;
&:nth-child(3n) {
margin-right: 0;
}
}
.active {
background: #eff8ff;
border: 2rpx solid #2291f9;
}
}
</style>

60
smart-app/src/pages/form/components/radio-sex.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<view class="sex-box">
<view class="sex-item" :class="modelValue?'active':''" @click="modelValue=true">
<uni-icons type="circle" v-if="!modelValue" color="#ccc" size="30"></uni-icons>
<uni-icons v-else type="checkbox-filled" color="#1A9AFF" size="30"></uni-icons>
<view>
男
</view>
</view>
<view class="sex-item" :class="!modelValue?'active':''" @click="modelValue=false">
<uni-icons type="circle" v-if="modelValue" color="#ccc" size="30"></uni-icons>
<uni-icons v-else type="checkbox-filled" color="#1A9AFF" size="30"></uni-icons>
<view>
女
</view>
</view>
</view>
</template>
<script setup>
import { watch } from 'vue';
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
modelValue:{
type:Boolean,
default:true
}
})
watch(()=>props.modelValue,(newValue,oldValue)=>{
emits('update:modelValue',newValue)
})
</script>
<style lang="scss" scoped>
.sex-box {
width: 100%;
display: flex;
justify-content: flex-end;
.sex-item {
display: flex;
width: 112rpx;
height: 64rpx;
background-color: #f3f3f3;
border: 1rpx solid #ededed;
align-items: center;
margin-left: 40rpx;
justify-content: center;
border-radius: 8rpx;
font-size: 32rpx;
}
.active {
background: #f1f9ff;
border: 1rpx solid #1a9aff;
color: #1A9AFF;
}
}
</style>

199
smart-app/src/pages/form/form.vue Normal file
View File

@@ -0,0 +1,199 @@
<template>
<view class="">
<view class="form-card">
<view class="title"> 常用功能 </view>
<view class="content">
<uni-forms :label-width="100" :modelValue="formData" label-position="left">
<uni-forms-item class="uni-forms-item" label="姓名" name="name">
<input class="input" type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item class="uni-forms-item" label="手机号码" name="name">
<input class="input" type="text" v-model="formData.name" placeholder="请输入手机号码" />
</uni-forms-item>
<uni-forms-item class="uni-forms-item" label="邮箱地址" name="name">
<input class="input" type="text" v-model="formData.name" placeholder="请输入邮箱地址" />
</uni-forms-item>
<uni-forms-item class="uni-forms-item" label="性别" name="name">
<RadioSex v-model="formData.sex"></RadioSex>
</uni-forms-item>
<uni-forms-item class="uni-forms-item" label="出生日期" name="name">
<view class="item-box">
<picker ref="datePickerRef" mode="date" @change="bindDateChange">
<input ref="dateInputRef" class="input" type="text" v-model="date" placeholder="点击选择时间" />
</picker>
</view>
</uni-forms-item>
<uni-forms-item class="uni-forms-item" label="所在地" name="name">
<input class="input" disabled type="text" v-model="formData.name" placeholder="点击选择所在地" />
</uni-forms-item>
</uni-forms>
</view>
</view>
<view class="form-card">
<view class="title"> 推送用户 </view>
<view class="content">
<uni-forms :label-width="100" :modelValue="formData" label-position="left">
<uni-forms-item class="uni-forms-item" label="选择用户" name="name">
<view class="item-box" @click="openSelectPeople">
<image class="user-select-image" src="/src/static/images/form/add.png" mode=""></image>
</view>
</uni-forms-item>
</uni-forms>
</view>
</view>
<view class="form-card">
<view class="title"> 兴趣爱好 </view>
<Interest v-model="formData.interest" :list="interestList"></Interest>
</view>
<view class="form-card">
<view class="title"> 推送用户 </view>
<view class="content">
<uni-forms :label-width="100" :modelValue="formData" label-position="left">
<uni-forms-item class="uni-forms-item" label="亮度调整" name="name">
<view class="item-box">
<slider style="width: 100%" value="50" activeColor="#2291F9" backgroundColor="#f5f6f8" block-color="#2291F9" block-size="20" />
</view>
</uni-forms-item>
<uni-forms-item class="uni-forms-item" label="字体大小" name="name">
<FontSizeSelece v-model="formData.fontType"></FontSizeSelece>
</uni-forms-item>
</uni-forms>
</view>
</view>
<view class="form-card">
<view class="title"> 自我介绍 </view>
<view class="content">
<uni-forms :modelValue="formData" label-position="left">
<view class="textarea">
<textarea auto-height style="font-size: 30rpx" placeholder="请输入自我介绍" placeholder-class="textarea-placeholder" />
</view>
<view class="example-body">
<uni-file-picker limit="9" title="上传图片">
<image style="width: 100%; height: 100%" src="/static/images/form/add-image.png" mode=""></image>
</uni-file-picker>
</view>
</uni-forms>
</view>
</view>
</view>
</template>
<script setup>
import RadioSex from './components/radio-sex.vue';
import Interest from './components/interest.vue';
import FontSizeSelece from './components/font-size-select.vue';
import { reactive, ref } from 'vue';
const interestList = ['唱歌', '跳舞', 'RAP', '篮球', '音乐', '唱歌', '跳舞', 'RAP', '篮球'];
const formData = reactive({
interest: 4,
fontType: 0,
});
const hobby = ref('');
const date = ref();
const bindDateChange = (e) => {
date.value = e.detail.value;
};
const openSelectPeople = () => {
uni.navigateTo({
url: '/pages/select-people/select-people',
});
};
</script>
<style lang="scss" scoped>
page {
background: #f5f6f8;
}
::v-deep .uni-forms-item__content {
display: flex;
align-items: center;
}
::v-deep .uni-forms-item__label {
font-size: 32rpx;
color: #000000;
padding-top: 28rpx;
}
::v-deep .uni-forms-item {
margin-bottom: 0 !important;
}
::v-deep .uni-slider-thumb {
background: #fff !important;
border: 10rpx solid #1a9aff;
box-sizing: border-box;
}
.uni-forms-item {
height: 100rpx;
border-bottom: 1rpx solid #ededed;
&:last-child {
border: none;
}
}
.form-card {
box-sizing: border-box;
width: 700rpx;
margin: 20rpx auto 0;
background: #fff;
border-radius: 16rpx;
.title {
width: 100%;
height: 84rpx;
background-image: url('/static/images/list/form-list.png');
background-size: 100% 84rpx;
line-height: 84rpx;
text-indent: 30rpx;
font-size: 32rpx;
color: #323333;
font-weight: bold;
}
.content {
padding: 0 30rpx;
}
.input {
font-size: 30rpx;
text-align: right;
width: 100%;
}
}
.item-box {
width: 100%;
display: flex;
justify-content: flex-end;
}
.user-select-image {
width: 40rpx;
height: 40rpx;
}
.textarea {
background: #fcfcfc;
border: 0.5px solid #ededed;
border-radius: 4px;
width: 100%;
height: 320rpx;
margin-top: 24rpx;
padding: 24rpx 30rpx;
box-sizing: border-box;
.textarea-placeholder {
color: #cccccc;
font-size: 30rpx;
}
}
.example-body {
padding-bottom: 24rpx;
}
</style>