1337 lines
61 KiB
Vue
1337 lines
61 KiB
Vue
<template>
|
||
<view class="form-wrap form-component" :style="formWrapStyle">
|
||
<block v-for="(item, index) in formData" :key="index">
|
||
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Text'">
|
||
<view class="order-cell" :style="rowCellStyle">
|
||
<view class="name" :style="nameWidthStyle">
|
||
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
|
||
<text class="tit">{{ item.value.title }}</text>
|
||
</view>
|
||
<view class="box">
|
||
<input
|
||
type="text"
|
||
:placeholder="item.value.placeholder"
|
||
placeholder-class="placeholder color-tip"
|
||
v-model="item.val"
|
||
:style="inputStyle"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Textarea'">
|
||
<view class="order-cell flex-box textarea" :style="rowCellStyle">
|
||
<view class="name" :style="nameWidthStyle">
|
||
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
|
||
<text class="tit">{{ item.value.title }}</text>
|
||
</view>
|
||
<view class="box">
|
||
<!-- 所有平台统一通过 formConfig.textareaRows / item.value.rows 控制显示行数：
|
||
- H5 / 微信：原生 textarea 识别 :rows 属性，可视高度 = rows × line-height（CSS 控制 line-height）；
|
||
- 鸿蒙：渲染为原生 ArkUI TextArea，CSS height 不生效，必须靠 :rows 控制。
|
||
行数和行高全部由 formConfig 动态下发，不再硬编码 176rpx / row=2。 -->
|
||
<textarea
|
||
:rows="item.value.rows || textareaRowsValue"
|
||
:placeholder="item.value.placeholder"
|
||
placeholder-class="placeholder color-tip"
|
||
v-model="item.val"
|
||
:style="textareaStyle"
|
||
></textarea>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<picker mode="selector" :range="item.value.options" v-if="item.controller == 'Select'" @change="pickerChange($event, index)">
|
||
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle">
|
||
<view class="order-cell" :style="rowCellStyle">
|
||
<view class="name" :style="nameWidthStyle">
|
||
<text class="tit">{{ item.value.title }}</text>
|
||
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
|
||
</view>
|
||
<view :class="['box', 'box-flex']">
|
||
<text v-if="item.val != ''">{{ item.val }}</text>
|
||
<text v-else class="color-tip">{{ $lang('components.nsForm.selectPlaceholder') }}</text>
|
||
<text class="iconfont icon-right"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
|
||
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Checkbox'">
|
||
<view class="order-cell" :style="rowCellStyle">
|
||
<view class="name" :style="nameWidthStyle">
|
||
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
|
||
<text class="tit">{{ item.value.title }}</text>
|
||
</view>
|
||
<view :class="['box', 'check-group-box', 'option-layout-' + (item.value.option_layout || 'wrap')]">
|
||
<checkbox-group @change="checkboxChange($event, index)" :style="item._optionLayoutStyle">
|
||
<label v-for="(v, k) in item.option_lists" :key="k">
|
||
<checkbox :value="v.value" :checked="v.checked" />
|
||
<view class="checkbox">
|
||
<text class="iconfont" :class="{ 'icon-fuxuankuang2': !v.checked, 'icon-fuxuankuang1 color-base-text': v.checked }" :style="{ color: v.checked ? checkedColor : '' }"></text>
|
||
{{ v.value }}
|
||
</view>
|
||
</label>
|
||
</checkbox-group>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Radio'">
|
||
<view class="order-cell" :style="rowCellStyle">
|
||
<view class="name" :style="nameWidthStyle">
|
||
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
|
||
<text class="tit">{{ item.value.title }}</text>
|
||
</view>
|
||
<view :class="['box', 'radio-group-box', 'option-layout-' + (item.value.option_layout || 'wrap')]">
|
||
<radio-group @change="radioChange($event, index)" :style="item._optionLayoutStyle">
|
||
<label v-for="(v, k) in item.option_lists" :key="k">
|
||
<radio :value="v.value" :checked="item.val == v.value" />
|
||
<view class="radio-box">
|
||
<text class="iconfont" :class="{ 'icon-yuan_checkbox': item.val != v.value, 'icon-yuan_checked color-base-text': item.val == v.value }" :style="{ color: item.val == v.value ? checkedColor : '' }"></text>
|
||
{{ v.value }}
|
||
</view>
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Img'">
|
||
<view class="order-cell flex-box" :style="rowCellStyle">
|
||
<view class="name" :style="nameWidthStyle">
|
||
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
|
||
<text class="tit">{{ item.value.title }}</text>
|
||
</view>
|
||
<view class="box img-boxs">
|
||
<view class="img-box" v-for="(v, k) in item.img_lists" :key="k" @click="uploadImg(index)">
|
||
<image :src="$util.img(v)" mode="aspectFill" show-menu-by-longpress></image>
|
||
<text class="iconfont icon-guanbi" @click.stop="delImg(k, index)"></text>
|
||
</view>
|
||
<view class="img-box" @click="addImg(index)"><text class="iconfont icon-add1"></text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Date'">
|
||
<view class="order-cell" :style="rowCellStyle">
|
||
<view class="name" :style="nameWidthStyle">
|
||
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
|
||
<text class="tit">{{ item.value.title }}</text>
|
||
</view>
|
||
<view :class="['box', 'box-flex']">
|
||
<picker mode="date" :value="item.val" @change="bindDateChange($event, index)">
|
||
<view class="uni-input" :class="{ 'color-tip': !item.val }">{{ item.val ? item.val : item.value.placeholder }}</view>
|
||
</picker>
|
||
<text class="iconfont icon-right"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Datelimit'">
|
||
<view class="order-cell flex-box" :style="rowCellStyle">
|
||
<view class="name" :style="nameWidthStyle">
|
||
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
|
||
<text class="tit">{{ item.value.title }}</text>
|
||
</view>
|
||
<view class="box date-boxs">
|
||
<view class="date-box">
|
||
<picker mode="date" :value="item.start_date" @change="bindStartDateChange($event, index)">
|
||
<view class="picker-box">
|
||
<view class="uni-input" :class="{ 'color-tip': !item.start_date }">{{ item.start_date ? item.start_date : item.value.placeholder_start }}</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="interval iconfont icon-jian"></view>
|
||
<view class="date-box">
|
||
<picker mode="date" :value="item.end_date" @change="bindEndDateChange($event, index)">
|
||
<view class="picker-box">
|
||
<view class="uni-input" :class="{ 'color-tip': !item.end_date }">{{ item.end_date ? item.end_date : item.value.placeholder_end }}</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Time'">
|
||
<view class="order-cell" :style="rowCellStyle">
|
||
<view class="name" :style="nameWidthStyle">
|
||
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
|
||
<text class="tit">{{ item.value.title }}</text>
|
||
</view>
|
||
<view :class="['box', 'box-flex']">
|
||
<picker mode="time" :value="item.val" @change="bindTimeChange($event, index)">
|
||
<view class="uni-input" :class="{ 'color-tip': !item.val }">{{ item.val ? item.val : item.value.placeholder }}</view>
|
||
</picker>
|
||
<text class="iconfont icon-right"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'Timelimit'">
|
||
<view class="order-cell flex-box" :style="rowCellStyle">
|
||
<view class="name" :style="nameWidthStyle">
|
||
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
|
||
<text class="tit">{{ item.value.title }}</text>
|
||
</view>
|
||
<view class="box date-boxs">
|
||
<view class="date-box">
|
||
<picker mode="time" :value="item.start_time" @change="bindStartTimeChange($event, index)">
|
||
<view class="picker-box">
|
||
<view class="uni-input" :class="{ 'color-tip': !item.start_time }">{{ item.start_time ? item.start_time : item.value.placeholder_start }}</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="interval iconfont icon-jian"></view>
|
||
<view class="date-box">
|
||
<picker mode="time" :value="item.end_time" @change="bindEndTimeChange($event, index)">
|
||
<view class="picker-box">
|
||
<view class="uni-input" :class="{ 'color-tip': !item.end_time }">{{ item.end_time ? item.end_time : item.value.placeholder_end }}</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle" v-if="item.controller == 'City'">
|
||
<view class="order-cell" :style="rowCellStyle">
|
||
<view class="name" :style="nameWidthStyle">
|
||
<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
|
||
<text class="tit">{{ item.value.title }}</text>
|
||
</view>
|
||
<view :class="['box', 'box-flex']">
|
||
<pick-regions :default-regions="item.default_regions" :select-arr="item.select_arr" @getRegions="handleGetRegions($event, index)">
|
||
<view class="select-address " :class="{ empty: !item.val, 'color-tip': !item.val }">
|
||
{{ item.val ? item.val : (item.select_arr == '2' ? $lang('components.nsForm.selectProvinceCity') : $lang('components.nsForm.selectProvinceCityDistrict')) }}
|
||
</view>
|
||
</pick-regions>
|
||
<text class="iconfont icon-right"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import formPlatformMixin from '@/common/js/form-platform-mixin.js';
|
||
|
||
export default {
|
||
name: 'ns-form',
|
||
mixins: [formPlatformMixin],
|
||
props: {
|
||
data: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
customAttr: {
|
||
type: Object,
|
||
default: function() {
|
||
return {};
|
||
}
|
||
},
|
||
/**
|
||
* 表单样式配置（由后端 designer 通过 API 传入）。
|
||
* 字段名同时支持 camelCase（如 formPaddingX / inputHeight / labelColor）
|
||
* 与 snake_case（如 form_padding_x / input_height / label_color），camelCase 优先。
|
||
* 不传则使用组件内置默认（与重构前硬编码值一致，无视觉回归）。
|
||
*
|
||
* 支持的键：
|
||
* formPaddingX, formBgColor, rowPaddingY, rowMinHeight, labelGap,
|
||
* inputHeight, inputRadius, labelWidthMode ('auto'|'fixed'), labelFixedWidth,
|
||
* labelFontSize, labelColor, requiredColor, checkedColor,
|
||
* placeholderColor, showRowDivider, rowDividerColor
|
||
*
|
||
* 平台差异化：formConfig.terminal.{h5|weapp|harmony|app|quickapp} 只放差异字段
|
||
*/
|
||
formConfig: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
formData: [],
|
||
maxLabelWidth: 0
|
||
};
|
||
},
|
||
computed: {
|
||
// 合并配置：内置默认 < 全局 formConfig < 当前平台 formConfig.terminal[platform]
|
||
// 同时兼容 snake_case 与 camelCase 字段名
|
||
config() {
|
||
// 1) 内置默认值（最低优先级，与重构前的硬编码值一一对应，确保未传 formConfig 时零回归）
|
||
const defaults = {
|
||
formPaddingX: 28,
|
||
formBgColor: '#ffffff',
|
||
rowPaddingY: 24,
|
||
rowMinHeight: 60,
|
||
labelGap: 20,
|
||
inputHeight: 84,
|
||
inputRadius: 16,
|
||
labelWidthMode: 'auto', // 与 ns-newform 对齐：标签在上、输入框在下，整行宽度
|
||
labelFixedWidth: 180,
|
||
labelFontSize: 32,
|
||
labelColor: '#1f2937',
|
||
labelFontWeight: 700,
|
||
labelAutoMaxWidth: 200,
|
||
requiredColor: '#ef4444',
|
||
checkedColor: '#3b82f6',
|
||
placeholderColor: '#9ca3af',
|
||
placeholderFontSize: 28,
|
||
// textarea 显示行数 / 行高（与 ns-newform 对齐）
|
||
// 改用 :rows + line-height 驱动高度：rows 给原生 <textarea>（H5/微信原生层/鸿蒙 ArkUI 都识别），
|
||
// line-height 用于在 textareaStyle 里算出对应的 px 高度；不再写死 176rpx。
|
||
textareaRows: 4,
|
||
textareaLineHeight: 44,
|
||
// 输入框视觉增强（与 ns-newform 对齐）
|
||
inputBorderColor: '#e5e7eb',
|
||
inputBgColor: '#f9fafb',
|
||
inputFocusBorderColor: '#ff4544',
|
||
inputFocusBgColor: '#ffffff',
|
||
showRowDivider: true,
|
||
rowDividerColor: '#f0f0f0'
|
||
};
|
||
const fc = this.formConfig || {};
|
||
|
||
// 同时读 camelCase 与 snake_case，camelCase 优先
|
||
const pick = (camel, snake) => {
|
||
const v1 = fc[camel];
|
||
if (v1 !== undefined && v1 !== null && v1 !== '') return v1;
|
||
return fc[snake];
|
||
};
|
||
const base = {
|
||
formPaddingX: pick('formPaddingX', 'form_padding_x'),
|
||
formBgColor: pick('formBgColor', 'form_bg_color'),
|
||
rowPaddingY: pick('rowPaddingY', 'row_padding_y'),
|
||
rowMinHeight: pick('rowMinHeight', 'row_min_height'),
|
||
labelGap: pick('labelGap', 'label_gap'),
|
||
inputHeight: pick('inputHeight', 'input_height'),
|
||
inputRadius: pick('inputRadius', 'input_radius'),
|
||
labelWidthMode: pick('labelWidthMode', 'label_width_mode'),
|
||
labelFixedWidth: pick('labelFixedWidth', 'label_fixed_width'),
|
||
labelFontSize: pick('labelFontSize', 'label_font_size'),
|
||
labelColor: pick('labelColor', 'label_color'),
|
||
labelFontWeight: pick('labelFontWeight', 'label_font_weight'),
|
||
requiredColor: pick('requiredColor', 'required_color'),
|
||
checkedColor: pick('checkedColor', 'checked_color'),
|
||
placeholderColor: pick('placeholderColor', 'placeholder_color'),
|
||
placeholderFontSize: pick('placeholderFontSize', 'placeholder_font_size'),
|
||
textareaRows: pick('textareaRows', 'textarea_rows'),
|
||
textareaLineHeight: pick('textareaLineHeight', 'textarea_line_height'),
|
||
inputBorderColor: pick('inputBorderColor', 'input_border_color'),
|
||
inputBgColor: pick('inputBgColor', 'input_bg_color'),
|
||
inputFocusBorderColor: pick('inputFocusBorderColor', 'input_focus_border_color'),
|
||
inputFocusBgColor: pick('inputFocusBgColor', 'input_focus_bg_color'),
|
||
showRowDivider: pick('showRowDivider', 'show_row_divider'),
|
||
rowDividerColor: pick('rowDividerColor', 'row_divider_color')
|
||
};
|
||
// 移除 undefined / 空字符串（保留 0 / false）
|
||
Object.keys(base).forEach(k => {
|
||
if (base[k] === undefined || base[k] === null || base[k] === '') delete base[k];
|
||
});
|
||
// showRowDivider 在前后端可能传数字 0/1，统一转 boolean
|
||
if ('showRowDivider' in base) {
|
||
base.showRowDivider = base.showRowDivider === true || base.showRowDivider === 1 || base.showRowDivider === '1';
|
||
}
|
||
|
||
// 2) 当前平台差异化配置（最高优先级），从 formConfig.terminal 取出当前平台 + 所有别名键，合并
|
||
const termBlock = fc.terminal || {};
|
||
const platformKeys = this.platformConfigKeys || [];
|
||
const platformCfg = Object.assign(
|
||
{},
|
||
...platformKeys.map(k => termBlock[k] || fc[k] || {})
|
||
);
|
||
// 平台块可能也是 snake_case，统一转 camelCase
|
||
const platformCfgCamel = {};
|
||
if (this.$util && typeof this.$util.snakeToCamel === 'function') {
|
||
Object.keys(platformCfg).forEach(k => {
|
||
platformCfgCamel[this.$util.snakeToCamel(k)] = platformCfg[k];
|
||
});
|
||
} else {
|
||
Object.assign(platformCfgCamel, platformCfg);
|
||
}
|
||
|
||
// 3) 三层合并：defaults < base < platformCfgCamel
|
||
return Object.assign({}, defaults, base, platformCfgCamel);
|
||
},
|
||
// 容器样式：内边距 + 背景 + 16 个 CSS 自定义属性
|
||
formWrapStyle() {
|
||
const cfg = this.config;
|
||
const num = (v, fb) => (typeof v === 'number' ? v : parseInt(v) || fb);
|
||
// 后端 formConfig 一律以 rpx 传递；
|
||
// _rpx() 按端分支：H5 输出 'Npx'（uni.upx2px），其它端输出 'Nrpx'
|
||
return this.$util.objToStyle({
|
||
padding: `0 ${this.$util.rpx(cfg.formPaddingX)}`,
|
||
background: cfg.formBgColor,
|
||
'--form-padding-x': this.$util.rpx(cfg.formPaddingX),
|
||
'--form-bg-color': cfg.formBgColor,
|
||
'--row-padding-y': this.$util.rpx(cfg.rowPaddingY),
|
||
'--row-min-height': this.$util.rpx(cfg.rowMinHeight),
|
||
'--label-gap': this.$util.rpx(cfg.labelGap),
|
||
'--input-height': this.$util.rpx(cfg.inputHeight),
|
||
'--input-radius': this.$util.rpx(cfg.inputRadius),
|
||
'--label-fixed-width': this.$util.rpx(cfg.labelFixedWidth),
|
||
'--label-font-size': this.$util.rpx(num(cfg.labelFontSize, 28)),
|
||
'--label-color': cfg.labelColor,
|
||
'--label-font-weight': cfg.labelFontWeight,
|
||
'--required-color': cfg.requiredColor,
|
||
'--checked-color': cfg.checkedColor,
|
||
'--placeholder-color': cfg.placeholderColor,
|
||
'--placeholder-font-size': this.$util.rpx(num(cfg.placeholderFontSize, 28)),
|
||
'--textarea-rows': num(cfg.textareaRows, 4),
|
||
'--textarea-line-height': this.$util.rpx(num(cfg.textareaLineHeight, 44)),
|
||
// 输入框视觉增强（与 ns-newform 对齐）
|
||
'--input-border-color': cfg.inputBorderColor,
|
||
'--input-bg-color': cfg.inputBgColor,
|
||
'--input-focus-border-color': cfg.inputFocusBorderColor,
|
||
'--input-focus-bg-color': cfg.inputFocusBgColor,
|
||
'--row-divider-color': cfg.rowDividerColor,
|
||
'--show-row-divider': cfg.showRowDivider === false ? '0' : '1'
|
||
});
|
||
},
|
||
rowWrapStyle() {
|
||
return this.$util.objToStyle({
|
||
padding: `${this.$util.rpx(this.config.rowPaddingY)} 0`
|
||
});
|
||
},
|
||
rowWrapClass() {
|
||
return this.config.showRowDivider === false ? 'order-wrap no-divider' : 'order-wrap';
|
||
},
|
||
rowCellStyle() {
|
||
return this.$util.objToStyle({
|
||
'min-height': this.$util.rpx(this.config.rowMinHeight)
|
||
});
|
||
},
|
||
// 标签宽度：垂直布局下标签整行显示，宽度交由 CSS（.name { width:100% }）控制；
|
||
// 字号 / 颜色 / 字重已由 .form-wrap 注入的 --label-* 变量统一驱动，无需 inline 注入。
|
||
nameWidthStyle() {
|
||
return {};
|
||
},
|
||
// 输入框样式（input / textarea 共用）
|
||
inputStyle() {
|
||
return this.$util.objToStyle({
|
||
'min-height': this.$util.rpx(this.config.inputHeight),
|
||
'border-radius': this.$util.rpx(this.config.inputRadius),
|
||
'font-size': this.$util.rpx(this.config.labelFontSize),
|
||
'color': this.config.labelColor,
|
||
'line-height': this.$util.rpx(this.config.inputHeight)
|
||
});
|
||
},
|
||
// textarea 显示行数（来自 formConfig.textareaRows，未配置时回退到默认 4）
|
||
textareaRowsValue() {
|
||
const n = parseInt(this.config.textareaRows, 10);
|
||
return Number.isFinite(n) && n > 0 ? n : 4;
|
||
},
|
||
// textarea 行高（来自 formConfig.textareaLineHeight，用于 :rows × line-height 算出固定可视高度）
|
||
textareaLineHeightValue() {
|
||
const n = parseInt(this.config.textareaLineHeight, 10);
|
||
return Number.isFinite(n) && n > 0 ? n : 44;
|
||
},
|
||
// textarea 专用 inline style（所有平台统一使用，见 template 中 textarea 节点）
|
||
// 设计要点：
|
||
// 1) 不复用 inputStyle 的 min-height / line-height：那两个值取自 inputHeight（默认 60rpx），
|
||
// 对 textarea 太小，会让原生 textarea 单行过高、可视区域过小；
|
||
// 2) 不使用 auto-height：原生 textarea 上 auto-height 会让组件随内容无限扩展，
|
||
// 遮挡后续组件，导致"看不到下面的其他组件"；
|
||
// 3) 高度 = rows × lineHeight（两个值都由 formConfig 动态下发，不再写死 176rpx）：
|
||
// - H5 浏览器 / 微信原生层：原生 <textarea> 同时识别 :rows 和 CSS line-height，
|
||
// 高度由浏览器自然算出，与 :rows 完全一致；
|
||
// - 鸿蒙 ArkUI：原生 TextArea 只识别 :rows，不识别 CSS height，所以我们在 JS 里
|
||
// 显式算 height = rows × lineHeight 反向写出，保证三端可视高度像素级一致。
|
||
textareaStyle() {
|
||
const lh = this.$util.rpx(this.textareaLineHeightValue);
|
||
const rows = this.textareaRowsValue;
|
||
// 加上 padding(12rpx 上下) 和 border(1rpx 上下) 的占用，避免与 :rows 算出的高度不一致时被截断
|
||
const paddings = this.$util.rpx(24) + this.$util.rpx(2);
|
||
const h = (this.$util.rpx(this.textareaLineHeightValue * (rows - 1)) + lh) + paddings;
|
||
return this.$util.objToStyle({
|
||
'height': h,
|
||
'min-height': h,
|
||
'line-height': lh,
|
||
'border-radius': this.$util.rpx(this.config.inputRadius),
|
||
'font-size': this.$util.rpx(this.config.labelFontSize),
|
||
'color': this.config.labelColor
|
||
});
|
||
},
|
||
// 必填星号颜色
|
||
requiredColor() {
|
||
return this.config.requiredColor;
|
||
},
|
||
// 复选 / 单选 选中色
|
||
checkedColor() {
|
||
return this.config.checkedColor;
|
||
}
|
||
},
|
||
created() {
|
||
this.initFormData();
|
||
this.$nextTick(() => this.calculateMaxLabelWidth());
|
||
},
|
||
watch: {
|
||
data: {
|
||
deep: true,
|
||
handler() {
|
||
this.initFormData();
|
||
this.$nextTick(() => this.calculateMaxLabelWidth());
|
||
}
|
||
},
|
||
formConfig: {
|
||
deep: true,
|
||
handler() {
|
||
this.$nextTick(() => this.calculateMaxLabelWidth());
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 预计算每项的 option_layout inline style（与 ns-newform 对齐）
|
||
// 跨端兼容：小程序 / 鸿蒙元服务 WXML 不支持模板里的方法调用，必须预计算到 item 上
|
||
recomputeItemStyles() {
|
||
if (!this.formData || this.formData.length === 0) return;
|
||
this.formData.forEach((item) => {
|
||
const itemValue = (item && item.value) || {};
|
||
const optLayout = itemValue.option_layout;
|
||
const optStyle = {};
|
||
if (optLayout === 'vertical') {
|
||
optStyle['flex-direction'] = 'column';
|
||
optStyle['align-items'] = 'flex-start';
|
||
optStyle['gap'] = '8px';
|
||
} else {
|
||
// wrap 模式
|
||
optStyle['flex-direction'] = 'row';
|
||
optStyle['align-items'] = 'center';
|
||
optStyle['gap'] = '6px';
|
||
}
|
||
this.$set(item, '_optionLayoutStyle', optStyle);
|
||
});
|
||
},
|
||
initFormData() {
|
||
// 深拷贝 prop 数据到本地状态，避免 mutate 上游
|
||
this.formData = JSON.parse(JSON.stringify(this.data || []));
|
||
this.processFormData();
|
||
// 预计算每项 inline style（与 ns-newform 对齐，跨端兼容）
|
||
this.recomputeItemStyles();
|
||
},
|
||
setFormData() {
|
||
this.initFormData();
|
||
this.$nextTick(() => this.calculateMaxLabelWidth());
|
||
},
|
||
processFormData() {
|
||
this.formData.forEach(item => {
|
||
// Text / Textarea：当 placeholder 为空字符串或没有值时，不设置默认值
|
||
const skipDefault = (item.controller == 'Text' || item.controller == 'Textarea') && !item.value.placeholder;
|
||
if (!item.val && !skipDefault) item.val = item.value.default ? item.value.default : '';
|
||
|
||
if (item.value.options) {
|
||
item.option_lists = [];
|
||
item.value.options.forEach((v, k) => {
|
||
var obj = {};
|
||
obj.value = v;
|
||
obj.checked = false;
|
||
if (item.controller == 'Radio' && ((!item.val && k == 0) || (item.val &&
|
||
item.val == v))) {
|
||
obj.checked = true;
|
||
item.val = v;
|
||
}
|
||
if (item.controller == 'Checkbox' && item.val) {
|
||
let val = item.val.split(',');
|
||
obj.checked = val.indexOf(v) != -1;
|
||
}
|
||
item.option_lists.push(obj);
|
||
});
|
||
}
|
||
|
||
if (item.controller == 'Img') {
|
||
item.img_lists = item.val ? item.val.split(',') : [];
|
||
}
|
||
|
||
if (item.controller == 'Date' && !item.val) {
|
||
if (item.value.is_show_default) {
|
||
if (item.value.is_current) {
|
||
item.val = this.getDate();
|
||
} else {
|
||
item.val = item.value.default;
|
||
}
|
||
} else {
|
||
item.val = '';
|
||
}
|
||
}
|
||
|
||
if (item.controller == 'Datelimit') {
|
||
if (item.val) {
|
||
let date = item.val.split(' - ');
|
||
item.start_date = date[0];
|
||
item.end_date = date[1];
|
||
} else {
|
||
item.val = '';
|
||
|
||
if (item.value.is_show_default_start) {
|
||
if (item.value.is_current_start) {
|
||
item.start_date = this.getDate();
|
||
} else {
|
||
item.start_date = item.value.default_start;
|
||
}
|
||
} else {
|
||
item.start_date = '';
|
||
}
|
||
|
||
if (item.value.is_show_default_end) {
|
||
if (item.value.is_current_end) {
|
||
item.end_date = this.getDate();
|
||
} else {
|
||
item.end_date = item.value.default_end;
|
||
}
|
||
} else {
|
||
item.end_date = '';
|
||
}
|
||
if (item.start_date && item.end_date) {
|
||
item.val = item.start_date + ' - ' + item.end_date;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (item.controller == 'Time' && !item.val) {
|
||
if (item.value.is_show_default) {
|
||
if (item.value.is_current) {
|
||
item.val = this.getTime();
|
||
} else {
|
||
item.val = item.value.default;
|
||
}
|
||
} else {
|
||
item.val = '';
|
||
}
|
||
}
|
||
|
||
if (item.controller == 'Timelimit') {
|
||
if (item.val) {
|
||
let time = item.val.split(' - ');
|
||
item.start_time = time[0];
|
||
item.end_time = time[1];
|
||
} else {
|
||
item.val = '';
|
||
|
||
if (item.value.is_show_default_start) {
|
||
if (item.value.is_current_start) {
|
||
item.start_time = this.getTime();
|
||
} else {
|
||
item.start_time = item.value.default_start;
|
||
}
|
||
} else {
|
||
item.start_time = '';
|
||
}
|
||
|
||
if (item.value.is_show_default_end) {
|
||
if (item.value.is_current_end) {
|
||
item.end_time = this.getTime();
|
||
} else {
|
||
item.end_time = item.value.default_end;
|
||
}
|
||
} else {
|
||
item.end_time = '';
|
||
}
|
||
|
||
if (item.start_time && item.end_time) {
|
||
item.val = item.start_time + ' - ' + item.end_time;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (item.controller == 'City') {
|
||
item.full_address = '';
|
||
item.select_arr = item.value.default_type == 1 ? '2' : '3';
|
||
if (item.val) item.default_regions = item.val.split('-');
|
||
else item.default_regions = [];
|
||
}
|
||
});
|
||
},
|
||
// 计算最长 label 宽度（封装自 util.calculateMaxLabelWidth）
|
||
// 用于 labelWidthMode === 'auto' 时把 .name 的 width 撑开，避免长短 label 错位
|
||
calculateMaxLabelWidth() {
|
||
this.maxLabelWidth = this.$util.calculateMaxLabelWidth(
|
||
this.formData,
|
||
this.config.labelFontSize
|
||
);
|
||
},
|
||
verify() {
|
||
let verify = true;
|
||
|
||
for (let i = 0; i < this.formData.length; i++) {
|
||
let item = this.formData[i];
|
||
if (item.controller == 'Text') {
|
||
if (item.value.required && !item.val) {
|
||
verify = false;
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.pleaseInput', { title: item.value.title })
|
||
});
|
||
break;
|
||
}
|
||
|
||
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
|
||
if (item.name == 'ID_CARD' && reg.test(item.val) === false) {
|
||
verify = !item.value.required;
|
||
if (verify == false) {
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.idCardInvalid')
|
||
});
|
||
return false;
|
||
}
|
||
if (verify == true && item.val != '') {
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.idCardInvalid')
|
||
});
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// 验证手机号
|
||
if (item.name == 'MOBILE' && this.$util.verifyMobile(item.val) === false) {
|
||
verify = !item.value.required;
|
||
if (verify == false) {
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.mobileInvalid')
|
||
});
|
||
return false;
|
||
}
|
||
if (verify == true && item.val != '') {
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.mobileInvalid')
|
||
});
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (item.controller == 'Textarea') {
|
||
if (item.value.required && !item.val) {
|
||
verify = false;
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.pleaseInput', { title: item.value.title })
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (item.controller == 'Select') {
|
||
if (item.value.required && !item.val) {
|
||
verify = false;
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.pleaseSelect', { title: item.value.title })
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (item.controller == 'Checkbox') {
|
||
if (item.value.required && !item.val) {
|
||
verify = false;
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.pleaseSelectAtLeastOne', { title: item.value.title })
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (item.controller == 'Img') {
|
||
if (item.value.required && !item.val) {
|
||
verify = false;
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.pleaseUploadAtLeastOne', { title: item.value.title })
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (item.controller == 'Date') {
|
||
if (item.value.required && !item.val) {
|
||
verify = false;
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.pleaseSelect', { title: item.value.title })
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (item.controller == 'Datelimit') {
|
||
if (item.value.required && !item.val) {
|
||
verify = false;
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.pleaseSelect', { title: item.value.title })
|
||
});
|
||
break;
|
||
}
|
||
|
||
if (this.$util.timeTurnTimeStamp(item.start_date) > this.$util.timeTurnTimeStamp(item.end_date)) {
|
||
verify = false;
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.endDateBeforeStartDate')
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (item.controller == 'Time') {
|
||
if (item.value.required && !item.val) {
|
||
verify = false;
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.pleaseSelect', { title: item.value.title })
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (item.controller == 'Timelimit') {
|
||
if (item.value.required && !item.val) {
|
||
verify = false;
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.pleaseSelect', { title: item.value.title })
|
||
});
|
||
break;
|
||
}
|
||
|
||
if (item.start_time >= item.end_time) {
|
||
verify = false;
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.endTimeBeforeStartTime')
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (item.controller == 'City') {
|
||
if (item.value.required && !item.val) {
|
||
verify = false;
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.pleaseSelect', { title: item.value.title })
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (verify) {
|
||
return this.formData;
|
||
} else return verify;
|
||
},
|
||
pickerChange(e, index) {
|
||
this.formData[index].val = this.data[index].value.options[e.detail.value];
|
||
this.$forceUpdate();
|
||
},
|
||
checkboxChange: function(e, index) {
|
||
this.formData[index].val = e.detail.value.toString();
|
||
this.formData[index].option_lists.forEach(item => {
|
||
item.checked = e.detail.value.indexOf(item.value) != -1;
|
||
});
|
||
this.$forceUpdate();
|
||
},
|
||
radioChange: function(e, index) {
|
||
this.formData[index].val = e.detail.value;
|
||
this.$forceUpdate();
|
||
},
|
||
// 修改图片
|
||
uploadImg(index) {
|
||
this.$util.upload(
|
||
Number(this.formData[index].value.max_count), {
|
||
path: 'evaluateimg'
|
||
},
|
||
res => {
|
||
if (res.length > 0) {
|
||
res.forEach(v => {
|
||
if (this.formData[index].img_lists.length >= Number(this.formData[index].value.max_count)) {
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.maxUploadImages', { max: this.formData[index].value.max_count })
|
||
});
|
||
return false;
|
||
} else {
|
||
this.formData[index].img_lists.push(v);
|
||
}
|
||
});
|
||
}
|
||
|
||
this.formData[index].val = this.formData[index].img_lists.toString();
|
||
this.$forceUpdate();
|
||
}
|
||
);
|
||
},
|
||
// 添加图片
|
||
addImg(index) {
|
||
if (this.formData[index].img_lists.length >= Number(this.formData[index].value.max_count)) {
|
||
this.$util.showToast({
|
||
title: this.$lang('components.nsForm.maxUploadImages', { max: this.formData[index].value.max_count })
|
||
});
|
||
return false;
|
||
}
|
||
this.$util.upload(
|
||
Number(this.formData[index].value.max_count), {
|
||
path: 'evaluateimg'
|
||
},
|
||
res => {
|
||
if (res.length > 0) {
|
||
res.forEach(v => {
|
||
this.formData[index].img_lists.push(v);
|
||
});
|
||
}
|
||
this.formData[index].val = this.formData[index].img_lists.toString();
|
||
this.$forceUpdate();
|
||
}
|
||
);
|
||
},
|
||
// index 当前数据的下标 k 当前图片的下标
|
||
delImg(k, index) {
|
||
this.formData[index].img_lists.splice(k, 1);
|
||
this.formData[index].val = this.formData[index].img_lists.toString();
|
||
this.$forceUpdate();
|
||
},
|
||
getDate() {
|
||
const date = new Date();
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
|
||
month = month > 9 ? month : '0' + month;
|
||
day = day > 9 ? day : '0' + day;
|
||
return `${year}-${month}-${day}`;
|
||
},
|
||
getTime() {
|
||
const date = new Date();
|
||
let hour = date.getHours(); //得到小时
|
||
let min = date.getMinutes(); //得到分钟
|
||
|
||
hour = hour > 9 ? hour : '0' + hour;
|
||
min = min > 9 ? min : '0' + min;
|
||
return `${hour}:${min}`;
|
||
},
|
||
bindDateChange(e, index) {
|
||
this.formData[index].val = e.detail.value;
|
||
this.$forceUpdate();
|
||
},
|
||
bindStartDateChange(e, index) {
|
||
this.$set(this.formData[index], 'start_date', e.detail.value);
|
||
this.$set(this.formData[index], 'val', this.formData[index].start_date + ' - ' + this.formData[index].end_date);
|
||
this.$forceUpdate();
|
||
},
|
||
bindEndDateChange(e, index) {
|
||
this.$set(this.formData[index], 'end_date', e.detail.value);
|
||
this.$set(this.formData[index], 'val', this.formData[index].start_date + ' - ' + this.formData[index].end_date);
|
||
this.$forceUpdate();
|
||
},
|
||
bindTimeChange(e, index) {
|
||
this.formData[index].val = e.detail.value;
|
||
this.$forceUpdate();
|
||
},
|
||
bindStartTimeChange(e, index) {
|
||
this.formData[index].start_time = e.detail.value;
|
||
this.$forceUpdate();
|
||
},
|
||
bindEndTimeChange(e, index) {
|
||
this.formData[index].end_time = e.detail.value;
|
||
this.formData[index].val = this.formData[index].start_time + ' - ' + this.formData[index].end_time;
|
||
this.$forceUpdate();
|
||
},
|
||
// 获取选择的地区
|
||
handleGetRegions(e, index) {
|
||
this.formData[index].val = '';
|
||
this.formData[index].val += e[0] != undefined ? e[0].label : '';
|
||
this.formData[index].val += e[1] != undefined ? '-' + e[1].label : '';
|
||
this.formData[index].val += e[2] != undefined ? '-' + e[2].label : '';
|
||
this.$forceUpdate();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* CSS 自定义属性：默认值，与组件内 config.defaults 一一对应，
|
||
formConfig 未传时作为兜底；运行时会被 formWrapStyle 注入的 inline style 覆盖。
|
||
后端 formConfig 一律以 rpx 传递，前端按 rpx 写入；
|
||
仅 H5 端需要在 JS computed（formWrapStyle 等）里通过 _rpx() 转 px。 */
|
||
.form-wrap {
|
||
--form-padding-x: 28rpx;
|
||
--form-bg-color: #ffffff;
|
||
--row-padding-y: 24rpx;
|
||
--row-min-height: 60rpx;
|
||
--label-gap: 20rpx;
|
||
--input-height: 84rpx;
|
||
--input-radius: 16rpx;
|
||
--label-fixed-width: 180rpx;
|
||
--label-font-size: 32rpx;
|
||
--label-color: #1f2937;
|
||
--label-font-weight: 700;
|
||
--required-color: #ef4444;
|
||
--placeholder-font-size: 28rpx;
|
||
--checked-color: #3b82f6;
|
||
--placeholder-color: #9ca3af;
|
||
// textarea 行数 / 行高（运行时被 formWrapStyle 注入的 inline 覆盖；这里是兜底）
|
||
--textarea-rows: 4;
|
||
--textarea-line-height: 48rpx;
|
||
// 输入框视觉增强（与 ns-newform 对齐）
|
||
--input-border-color: #e5e7eb;
|
||
--input-bg-color: #ffffff;
|
||
--input-focus-border-color: #3b82f6;
|
||
--input-focus-bg-color: #ffffff;
|
||
--row-divider-color: #f0f0f0;
|
||
--show-row-divider: 0;
|
||
}
|
||
|
||
.order-wrap {
|
||
padding: var(--row-padding-y, 20rpx) 0;
|
||
|
||
&.no-divider {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
border-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.order-cell {
|
||
display: flex;
|
||
flex-direction: column; // 与 ns-newform vertical 对齐：标签在上、输入框在下
|
||
align-items: flex-start;
|
||
background: #fff;
|
||
position: relative;
|
||
min-height: var(--row-min-height, 60rpx);
|
||
|
||
&.textarea {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
&.clear-flex {
|
||
display: block;
|
||
|
||
.box {
|
||
margin-top: 16rpx;
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
// calc + 0/1 控制分割线显隐（formConfig.showRowDivider = false 时整条隐藏）
|
||
border-bottom: calc(var(--show-row-divider, 1) * 2rpx) solid var(--row-divider-color, #f0f0f0);
|
||
}
|
||
|
||
&.align-top {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
text {
|
||
font-size: var(--label-font-size, $font-size-base);
|
||
}
|
||
|
||
.name {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: var(--input-height, 60rpx);
|
||
line-height: 1.5;
|
||
margin-bottom: var(--label-gap, 20rpx);
|
||
margin-right: 0;
|
||
}
|
||
|
||
.tit {
|
||
text-align: left;
|
||
font-size: var(--label-font-size, $font-size-base);
|
||
color: var(--label-color, #1f2937);
|
||
font-weight: var(--label-font-weight, 700);
|
||
|
||
text {
|
||
font-size: var(--label-font-size, $font-size-base);
|
||
}
|
||
}
|
||
|
||
.required {
|
||
color: var(--required-color, #ef4444);
|
||
font-size: var(--label-font-size, 28rpx);
|
||
margin-right: 6rpx;
|
||
font-weight: bold;
|
||
text-align: left;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.box {
|
||
flex: 1;
|
||
width: 100%;
|
||
padding: 0;
|
||
line-height: inherit;
|
||
text-align: left;
|
||
|
||
// H5 端 <input> 可能被 uni-app 编译为 <uni-input> 包装组件，::v-deep 穿透 scoped 命中真实原生 input
|
||
::v-deep input,
|
||
input {
|
||
font-size: var(--label-font-size, $font-size-base);
|
||
text-align: left;
|
||
color: var(--label-color, #1f2937);
|
||
// 显式 height / line-height / min-height 同步覆盖 WebView 默认与鸿蒙原生 TextInput 的固有高度，
|
||
// 避免 placeholder / 文字下半部分被裁切
|
||
line-height: var(--input-height, 84rpx);
|
||
height: var(--input-height, 84rpx);
|
||
min-height: var(--input-height, 84rpx);
|
||
border-radius: var(--input-radius, 16rpx);
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
padding: 0 24rpx;
|
||
// 输入框视觉增强（与 ns-newform 对齐）
|
||
border: 1rpx solid var(--input-border-color, #e5e7eb);
|
||
background: var(--input-bg-color, #ffffff);
|
||
transition: all 0.3s ease;
|
||
|
||
&:focus {
|
||
background: var(--input-focus-bg-color, #ffffff);
|
||
border-color: var(--input-focus-border-color, #3b82f6);
|
||
}
|
||
|
||
// 原生 placeholder 样式（WebView / H5 生效；小程序/鸿蒙的 placeholder
|
||
// 通过 placeholder-class="placeholder" 钩子走 .placeholder 规则）
|
||
&::placeholder {
|
||
color: var(--placeholder-color, #9ca3af);
|
||
font-size: var(--placeholder-font-size, 28rpx);
|
||
}
|
||
}
|
||
|
||
// placeholder-class 钩子：在鸿蒙原生 TextInput / WebView 中都生效，
|
||
// 限定在 .form-wrap 内避免污染全局 .placeholder / .color-tip
|
||
.placeholder {
|
||
color: var(--placeholder-color, #9ca3af);
|
||
font-size: var(--placeholder-font-size, 28rpx);
|
||
line-height: var(--input-height, 84rpx);
|
||
}
|
||
|
||
::v-deep textarea,
|
||
textarea {
|
||
font-size: var(--label-font-size, $font-size-base);
|
||
width: 100%;
|
||
color: var(--label-color, #1f2937);
|
||
// 行高由 formConfig.textareaLineHeight（兜底 48rpx）控制；
|
||
// 高度 = rows × line-height + padding + border，所有值都从 CSS 变量读取，
|
||
// 真正做到了"rows 改 → 高度自动改"。
|
||
line-height: var(--textarea-line-height, 48rpx);
|
||
min-height: calc(var(--textarea-rows, 4) * var(--textarea-line-height, 48rpx) + 26rpx);
|
||
height: calc(var(--textarea-rows, 4) * var(--textarea-line-height, 48rpx) + 26rpx);
|
||
text-align: left;
|
||
border-radius: var(--input-radius, 16rpx);
|
||
box-sizing: border-box;
|
||
padding: 12rpx 24rpx;
|
||
// 输入框视觉增强（与 ns-newform 对齐）
|
||
border: 1rpx solid var(--input-border-color, #e5e7eb);
|
||
background: var(--input-bg-color, #ffffff);
|
||
transition: all 0.3s ease;
|
||
|
||
&:focus {
|
||
background: var(--input-focus-bg-color, #ffffff);
|
||
border-color: var(--input-focus-border-color, #3b82f6);
|
||
}
|
||
}
|
||
|
||
.uni-input {
|
||
font-size: var(--label-font-size, $font-size-base);
|
||
color: var(--label-color, #1f2937);
|
||
line-height: var(--input-height, 84rpx);
|
||
min-height: var(--input-height, 84rpx);
|
||
// 输入框视觉增强（与 ns-newform 对齐）
|
||
border: 1rpx solid var(--input-border-color, #e5e7eb);
|
||
background: var(--input-bg-color, #ffffff);
|
||
border-radius: var(--input-radius, 16rpx);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.select-address {
|
||
font-size: var(--label-font-size, $font-size-base);
|
||
color: var(--label-color, #1f2937);
|
||
}
|
||
|
||
.color-tip {
|
||
color: var(--placeholder-color, #9ca3af);
|
||
}
|
||
|
||
// 让原生 picker / 自定义 pick-regions 撑满父容器（纵向布局下 label 在上、控件在下）
|
||
picker,
|
||
.pick-regions {
|
||
display: block;
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
// 在 box-flex（带右侧箭头）场景下，picker 不应占满，留出右侧箭头空间
|
||
&.box-flex {
|
||
picker,
|
||
.pick-regions {
|
||
width: auto;
|
||
}
|
||
|
||
.iconfont.icon-right {
|
||
flex-shrink: 0;
|
||
margin-left: 8rpx;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
|
||
checkbox-group,
|
||
radio-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
}
|
||
|
||
label {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 1;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
// 选项排列样式：vertical = 每个选项独立一行；wrap（默认）= 横向自动换行
|
||
// 注意：option-layout-* 是 .box 自身的类，必须用 & 嵌套，否则编译成 .box .option-layout-* 会选不中
|
||
&.option-layout-vertical {
|
||
checkbox-group,
|
||
radio-group {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
label {
|
||
width: 100%;
|
||
margin-right: 0;
|
||
margin-bottom: 16rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.option-layout-wrap {
|
||
checkbox-group,
|
||
radio-group {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
label {
|
||
margin-right: 30rpx;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
&.img-boxs {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.img-box {
|
||
margin: 10rpx 20rpx 10rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border: 1rpx solid $color-line;
|
||
border-radius: 4rpx;
|
||
position: relative;
|
||
|
||
.icon-guanbi {
|
||
position: absolute;
|
||
top: -14rpx;
|
||
right: -14rpx;
|
||
display: inline-block;
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
line-height: 28rpx;
|
||
color: $color-tip;
|
||
}
|
||
|
||
.icon-add1 {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&.box-flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
&.date-boxs {
|
||
padding: 0 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.interval {
|
||
margin: 0 12rpx;
|
||
color: #000;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.date-box {
|
||
.picker-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
}
|
||
|
||
.radio-group-box {
|
||
radio {
|
||
display: none;
|
||
}
|
||
|
||
.radio-box {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 1;
|
||
|
||
.iconfont {
|
||
font-size: 40rpx;
|
||
margin-right: 10rpx;
|
||
color: #d1d5db;
|
||
}
|
||
}
|
||
}
|
||
|
||
.check-group-box {
|
||
checkbox {
|
||
display: none;
|
||
}
|
||
|
||
.checkbox {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 1;
|
||
|
||
.iconfont {
|
||
font-size: 40rpx;
|
||
margin-right: 10rpx;
|
||
color: #d1d5db;
|
||
}
|
||
}
|
||
}
|
||
|
||
.iconfont {
|
||
color: $color-tip;
|
||
font-size: var(--label-font-size, $font-size-base);
|
||
}
|
||
|
||
.box-flex picker {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
.icon-right {
|
||
line-height: 1;
|
||
position: unset;
|
||
}
|
||
}
|
||
</style> |