【smart-app更新】1、版本更新记录;2、复杂表单‘3、引入tabs组件

This commit is contained in:
zhuoda
2024-03-13 21:05:28 +08:00
parent 3b31558adb
commit d170a9d189
18 changed files with 2717 additions and 368 deletions

View File

@@ -1,49 +0,0 @@
<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>

View File

@@ -1,59 +0,0 @@
<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>

View File

@@ -1,60 +0,0 @@
<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>

View File

@@ -1,199 +1,94 @@
<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="请输入姓名" />
<view class="smart-form">
<uni-forms :label-width="100" :modelValue="formData" label-position="left">
<view class="smart-form-group">
<view class="smart-form-group-title"> 常用功能 </view>
<view class="smart-form-group-content">
<uni-forms-item class="smart-form-item" label="姓名" name="name" required>
<uni-easyinput trim="all" 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 class="smart-form-item" label="手机号码" name="name" required>
<uni-easyinput trim="all" 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 class="smart-form-item" label="邮箱地址" name="name">
<uni-easyinput trim="all" 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 class="smart-form-item" label="性别" required>
<uni-data-checkbox v-model="formData.sex" :localdata="sexs" />
</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 class="smart-form-item" label="出生日期" name="name">
<uni-datetime-picker type="date" return-type="timestamp" v-model="formData.datetimesingle" />
</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>
<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>
<view class="smart-form-group">
<view class="smart-form-group-title"> 兴趣爱好 </view>
<view class="smart-form-group-content">
<uni-forms-item class="smart-form-item" label="兴趣爱好" name="interest">
<uni-data-checkbox mode="button" multiple v-model="formData.interest" :localdata="interestList"></uni-data-checkbox>
</uni-forms-item>
</uni-forms>
</view>
</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>
<view class="smart-form-group">
<view class="smart-form-group-title"> 屏幕设置 </view>
<view class="smart-form-group-content">
<uni-forms-item class="smart-form-item" label="亮度调整" name="name">
<slider style="width: 100%" value="50" activeColor="#2291F9" backgroundColor="#f5f6f8" block-color="#2291F9" block-size="20" />
</uni-forms-item>
<uni-forms-item class="uni-forms-item" label="字体大小" name="name">
<FontSizeSelece v-model="formData.fontType"></FontSizeSelece>
</view>
</view>
<view class="smart-form-group">
<view class="smart-form-group-title"> 自我介绍 </view>
<view class="smart-form-group-content">
<uni-forms-item class="smart-form-item" label="兴趣爱好" name="interest">
<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入自我介绍" />
</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>
<uni-forms-item class="smart-form-item" label="上传图片" name="interest">
<uni-file-picker limit="9" title="最多选择9张图片" />
</uni-forms-item>
</view>
</view>
</uni-forms>
<view class="smart-form-submit fixed-bottom-button">
<button class="smart-form-submit-btn smart-margin-right20" type="default">取消</button>
<button class="smart-form-submit-btn" type="warn">重置</button>
<button class="smart-form-submit-btn" type="primary">确定</button>
</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';
import { reactive } 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 sexs = [
{
text: '男',
value: 0,
},
{
text: '女',
value: 1,
},
{
text: '你懂的',
value: 2,
},
];
const openSelectPeople = () => {
uni.navigateTo({
url: '/pages/select-people/select-people',
});
};
const interestList = [
{ text: '唱歌', value: 1 },
{ text: '足球', value: 2 },
{ text: '篮球', value: 3 },
{ text: '跑步', value: 4 },
{ text: '写字', value: 5 },
{ text: '美术', value: 6 },
{ text: '射击', value: 7 },
{ text: '健身', value: 8 },
{ text: '马术', value: 9 },
{ text: '美食', value: 10 },
];
const formData = reactive({});
</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>
<style lang="scss" scoped></style>

View File

@@ -38,10 +38,15 @@
<uni-grid-item class="menu-grid">
<view class="menu-item" @click="navigateTo('/pages/form/form')">
<image class="item-image" src="/@/static/images/index/ic_home_menu6.png"></image>
<view class="item-text"> 表单 </view>
<view class="item-text"> 复杂表单 </view>
</view>
</uni-grid-item>
<uni-grid-item class="menu-grid">
<view class="menu-item" @click="switchTab('/pages/list/list')">
<image class="item-image" src="/@/static/images/index/ic_home_menu9.png"></image>
<view class="item-text"> 常见列表 </view>
</view>
</uni-grid-item>
<uni-grid-item class="menu-grid">
<view class="menu-item" @click="navigateTo('/pages/order-detail/order-detail')">
<image class="item-image" src="/@/static/images/index/ic_home_menu7.png"></image>
@@ -54,12 +59,6 @@
<view class="item-text"> 优惠券 </view>
</view>
</uni-grid-item>
<uni-grid-item class="menu-grid">
<view class="menu-item" @click="navigateTo('/pages/list/list')">
<image class="item-image" src="/@/static/images/index/ic_home_menu9.png"></image>
<view class="item-text"> 精品课程 </view>
</view>
</uni-grid-item>
<uni-grid-item class="menu-grid">
<view class="menu-item" @click="navigateTo('/pages/change-log/change-log-list')">
<image class="item-image" src="/@/static/images/index/ic_home_menu10.png"></image>
@@ -82,6 +81,11 @@
url,
});
}
function switchTab(url) {
uni.switchTab({
url,
});
}
</script>
<style lang="scss" scoped>

View File

@@ -66,5 +66,5 @@ const tabsList = [{
color: #ccc;
}
}
</style>

View File

@@ -0,0 +1,79 @@
<template>
<view class="container">
<view class="title">
<uni-title type="h1" align="center" :title="detail.title"></uni-title>
<uni-title type="h4" align="center" color="#999999" :title="detail.subTitle"></uni-title>
</view>
<view class="content">
<rich-text :nodes="detail.content" />
</view>
</view>
</template>
<script setup>
import { inject, reactive } from 'vue';
import { changeLogApi } from '/@/api/support/change-log-api';
import { onLoad } from '@dcloudio/uni-app';
import { smartSentry } from '/@/lib/smart-sentry';
const smartEnumPlugin = inject('smartEnumPlugin');
const detail = reactive({
title: '',
subTitle: '',
content: '',
});
async function getDetail(changeLogId) {
try {
uni.showLoading({ title: '加载中' });
let res = await changeLogApi.getDetail(changeLogId);
detail.title = res.data.version + '版本' + smartEnumPlugin.getDescByValue('CHANGE_LOG_TYPE_ENUM', res.data.type);
detail.content =
'<pre style="' +
'line-height: 18px;\n' +
'font-size: 14px;\n' +
'white-space: pre-wrap;\n' +
' white-space: -moz-pre-wrap;\n' +
' white-space: -pre-wrap;\n' +
' white-space: -o-pre-wrap;\n' +
' word-wrap: break-word;">' +
res.data.content +
'</pre>';
let subTitleArray = [];
if (res.data.publishAuthor) {
subTitleArray.push(res.data.publishAuthor);
}
if (res.data.publicDate) {
subTitleArray.push(res.data.publicDate);
}
detail.subTitle = subTitleArray.join(' | ');
} catch (e) {
smartSentry.captureError(e);
} finally {
uni.hideLoading();
}
}
onLoad((option) => {
uni.pageScrollTo({
scrollTop: 0,
});
getDetail(option.changeLogId);
});
</script>
<style lang="scss" scoped>
.container {
height: 100vh;
padding: 20rpx;
.content {
border-top: #cccccc 1px solid;
margin-top: 50rpx;
padding: 50rpx 16rpx 50rpx 16rpx;
line-height: 30px;
color: #333333;
}
}
</style>

View File

@@ -25,23 +25,20 @@
<view class="list-container">
<view class="list-item" @click="gotoDetail(item.changeLogId)" v-for="item in listData" :key="item.changeLogId">
<view class="list-item-row">
<view class="list-item-content bolder">{{ item.version }}</view>
<view class="list-item-content bolder"
>{{ item.version }}版本{{ $smartEnumPlugin.getDescByValue('CHANGE_LOG_TYPE_ENUM', item.type) }}</view
>
<uni-tag
:text="$smartEnumPlugin.getDescByValue('CHANGE_LOG_TYPE_ENUM', item.type)"
:type="$smartEnumPlugin.getObjectByValue('CHANGE_LOG_TYPE_ENUM', item.type).type"
/>
</view>
<view class="list-item-row">
<view class="list-item-label">发布日期{{ item.publicDate }} - {{ item.publishAuthor }}</view>
</view>
<view class="list-item-row">
<view class="list-item-label">{{ item.content }}</view>
<view class="list-item-label">发布日期{{ item.publicDate }}</view>
</view>
</view>
</view>
</mescroll-body>
<uni-fab ref="fab" :pattern="fabPattern" horizontal="right" @fabClick="gotoAdd" />
</view>
</template>
@@ -121,7 +118,7 @@
// --------------------------- 详情 ---------------------------------
function gotoDetail(id) {
uni.navigateTo({ url: '/pages/enterprise/enterprise-detail?enterpriseId=' + id });
uni.navigateTo({ url: '/pages/support/change-log/change-log-detail?changeLogId=' + id });
}
</script>
@@ -172,9 +169,10 @@
font-size: 30rpx;
font-weight: 400;
text-align: left;
color: $uni-text-color-grey;
}
.bolder {
font-weight: 600 !important;
font-weight: 500 !important;
font-size: 34rpx !important;
}
.list-item-content {