style: 调整表单相关样式并优化表单页面

1. 调整两个表单组件中名称字段的宽度为80vw
2. 调整必填标记的左侧外边距为8rpx
3. 优化formdata页面:添加横幅和表单提示功能,改用scss样式
4. 移除原有表单标题,改用动态提示文本
5. 补充部分调试日志并格式化代码格式
This commit is contained in:
2026-05-28 11:57:57 +08:00
parent 7526143c7d
commit 5ac7f3cf95
3 changed files with 35 additions and 16 deletions

View File

@@ -686,7 +686,7 @@
} }
.name { .name {
width: 160rpx; width: 80vw;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

View File

@@ -742,7 +742,7 @@ export default {
} }
.name { .name {
width: 160rpx; width: 80vw;
margin-bottom: 10rpx; margin-bottom: 10rpx;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -761,7 +761,7 @@ export default {
.required { .required {
color: red; color: red;
font-size: 28rpx; font-size: 28rpx;
margin-left: 4rpx; margin-left: 8rpx;
width: 14rpx; width: 14rpx;
text-align: left; text-align: left;
display: inline-block; display: inline-block;

View File

@@ -1,13 +1,17 @@
<template> <template>
<view> <view :style="themeColor">
<block v-if="detail"> <block v-if="detail">
<view class="page"> <view class="page">
<view class="form-banner" v-if="detail.show_banner > 0">
<image :src="$util.img('public/uniapp/form/banner.png')" mode="widthFix"></image>
</view>
<view class="form-tip">
<view class="system-form-tip" v-if="detail.show_tip > 0">{{ formTip }}</view>
</view>
<view class="system-form-wrap"> <view class="system-form-wrap">
<view class="form-title" style="text-align:center;padding-top:40rpx;font-weight:600;font-size:30rpx;">
请填写表单所需信息
</view>
<ns-newform ref="form" :data="detail.json_data" @submit="create"></ns-newform> <ns-newform ref="form" :data="detail.json_data" @submit="create"></ns-newform>
<button class="button mini" style="font-size:32rpx;" type="primary" size="mini" @click="create">提交</button> <button class="button mini" style="font-size:32rpx;" type="primary" size="mini"
@click="create">提交</button>
</view> </view>
</view> </view>
</block> </block>
@@ -37,13 +41,20 @@ export default {
uniacid: 0 uniacid: 0
} }
}, },
computed: {
formTip() {
const tip = this.detail?.form_tip
console.log('formTip computed, tip value:', tip, 'truthy:', !!tip)
return tip ? tip : '请填写表单所需信息'
}
},
onLoad(options) { onLoad(options) {
if (!options.uniacid) { if (!options.uniacid) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '参数错误', content: '参数错误',
showCancel: false, showCancel: false,
success: () => {} success: () => { }
}) })
return false return false
} }
@@ -65,6 +76,7 @@ export default {
this.getData() this.getData()
}, },
watch: { watch: {
storeToken(newVal, oldVal) { storeToken(newVal, oldVal) {
newVal && this.getData() newVal && this.getData()
@@ -81,6 +93,7 @@ export default {
success: res => { success: res => {
if (res.code == 0 && res.data) { if (res.code == 0 && res.data) {
this.detail = res.data this.detail = res.data
console.log(`form data =>`, this.detail)
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: res.data.form_name title: res.data.form_name
}) })
@@ -111,7 +124,7 @@ export default {
title: '提示', title: '提示',
content: '提交成功', content: '提交成功',
showCancel: false, showCancel: false,
success: () => {} success: () => { }
}) })
} else { } else {
this.isRepeat = false this.isRepeat = false
@@ -126,7 +139,7 @@ export default {
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
page { page {
background: #fff; background: #fff;
} }
@@ -141,6 +154,17 @@ page {
line-height: 1; line-height: 1;
} }
.form-tip {
padding-top: 10rpx;
text-align: center;
}
.system-form-tip {
line-height: 120rpx;
font-weight: 600;
font-size: 30rpx;
}
.system-form-wrap { .system-form-wrap {
border-radius: 32rpx; border-radius: 32rpx;
overflow: hidden; overflow: hidden;
@@ -149,11 +173,6 @@ page {
transform: translateY(-40rpx); transform: translateY(-40rpx);
} }
.system-form-wrap .form-title {
line-height: 100rpx;
padding-top: 20rpx;
}
.system-form-wrap .button { .system-form-wrap .button {
height: 80rpx; height: 80rpx;
line-height: 80rpx !important; line-height: 80rpx !important;