style: 调整表单相关样式并优化表单页面
1. 调整两个表单组件中名称字段的宽度为80vw 2. 调整必填标记的左侧外边距为8rpx 3. 优化formdata页面:添加横幅和表单提示功能,改用scss样式 4. 移除原有表单标题,改用动态提示文本 5. 补充部分调试日志并格式化代码格式
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user