sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改横向时的显示逻辑

master
于肖磊 2025-07-04 11:40:21 +08:00
parent 3f65ca3343
commit f7e5086381
6 changed files with 61 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
pages/form-input/components/form-input/address.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="flex-col gap-10">
<view :class="'flex-col' + (propDirection == 'row' ? '' : 'gap-10')">
<view class="flex-row align-c" :style="com_data.common_style + propStyle" @tap="open_ragion">
<text v-if="province_name" class="flex-1">{{ province_name }}{{ city_name ? ' / ' + city_name : '' }}{{ county_name ? ' / ' + county_name : '' }}</text>
<text v-else class="placeholder flex-1">{{ placeholder }}</text>
@ -10,8 +10,9 @@
<iconfont name="icon-arrow-bottom" size="24rpx" color="#666" propContainerDisplay="flex" ></iconfont>
</template>
</view>
<view v-if="propDirection == 'row' && address_type == 'detailed'" class="border-line"></view>
<view v-if="address_type == 'detailed'" class="flex-row">
<textarea :value="detailed_value" class="uni-input flex-1 ht-auto" :style="com_data.common_style + propStyle + 'padding: 18rpx 22rpx;min-height:100rpx;'" placeholder="请输入详细地址" @input="input_value_event" />
<textarea :value="detailed_value" class="uni-input flex-1 ht-auto" :style="com_data.common_style + propStyle + 'min-height:100rpx;' + (propDirection == 'row' ? '' : 'padding: 18rpx 22rpx;')" placeholder="请输入详细地址" @input="input_value_event" />
</view>
</view>
</template>
@ -59,8 +60,11 @@
};
},
watch: {
propValue(val) {
this.init();
propValue: {
handler(newVal) {
this.init();
},
deep: true
},
propKey(val) {
// 初始化
@ -124,4 +128,8 @@
color: #606266;
opacity: 0.6;
}
.border-line {
border-top: 2rpx solid #eee;
margin: 10rpx 0;
}
</style>

2
pages/form-input/components/form-input/attachments.vue
View File

@ -1,6 +1,6 @@
<template>
<!-- 视频 -->
<view>
<view class="margin-vertical-xs">
<template v-if="file.length > 0">
<view class="flex-row gap-20 align-c">
<view class="file-title text-line-1" :style="propStyle + 'width:auto;height:100%'">

34
pages/form-input/components/form-input/date-group.vue
View File

@ -1,5 +1,20 @@
<template>
<view class="flex-row align-c wh-auto pr" :style="propStyle">
<view class="flex-row align-c wh-auto pr " :style="propStyle">
<view class="bg-white wh-auto ht-auto flex-row align-c gap-5 oh">
<template v-if="isEmpty(form_value)">
<view class="datetime-placeholder flex-1 flex-row align-c ht-auto gap-5 oh">
<view class="flex-1 flex-row align-c jc-c" :data-index="0" @tap="data_time_change">{{ com_data.start_placeholder }}</view>-
<view class="flex-1 flex-row align-c jc-c" :data-index="1" @tap="data_time_change">{{ com_data.end_placeholder }}</view>
</view>
</template>
<template v-else>
<view class="datetime-value flex-1 flex-row align-c ht-auto gap-5 oh">
<view class="flex-1 flex-row align-c jc-c ht-auto nowrap text-line-1" :data-index="0" @tap="data_time_change">{{ form_value[0] || '' }}</view>-
<view class="flex-1 flex-row align-c jc-c ht-auto nowrap text-line-1" :data-index="1" @tap="data_time_change">{{ form_value[1] || '' }}</view>
</view>
</template>
<iconfont :name="'icon-'+ com_data.icon_name" class="ml-5" size="28rpx" color="#333333" />
</view>
<template v-if="['option1', 'option2'].includes(date_type)">
<myDatetime ref="option4" dataType="time" :shownum="date_type == 'option1' ? 2 : 3" @timeSubmit="data_change"></myDatetime>
</template>
@ -8,24 +23,9 @@
</template>
<template v-else>
<view class="datetime-picker">
<uni-datetime-picker ref="option4" :value="form_value" :border="false" :type="date_type == 'option4' ? 'daterange' : 'datetimerange'" :hideSecond="date_type !== 'option4'" @change="data_date_change" />
<uni-datetime-picker ref="option4" :value="form_value" :border="false" :type="date_type == 'option4' ? 'daterange' : 'datetimerange'" :hideSecond="date_type !== 'option6'" @change="data_date_change" />
</view>
</template>
<view class="bg-white wh-auto ht-auto flex-row align-c">
<template v-if="isEmpty(form_value)">
<view class="datetime-placeholder flex-1 flex-row align-c ht-auto">
<view class="flex-1 flex-row align-c jc-c" :data-index="0" @tap="data_time_change">{{ com_data.start_placeholder }}</view>-
<view class="flex-1 flex-row align-c jc-c" :data-index="1" @tap="data_time_change">{{ com_data.end_placeholder }}</view>
</view>
</template>
<template v-else>
<view class="datetime-value flex-1 flex-row align-c ht-auto">
<view class="flex-1 flex-row align-c jc-c ht-auto" :data-index="0" @tap="data_time_change">{{ form_value[0] || '' }}</view>-
<view class="flex-1 flex-row align-c jc-c ht-auto" :data-index="1" @tap="data_time_change">{{ form_value[1] || '' }}</view>
</view>
</template>
<iconfont :name="'icon-'+ com_data.icon_name" class="ml-5" size="28rpx" color="#333333" />
</view>
</view>
</template>

19
pages/form-input/components/form-input/form-input.vue
View File

@ -6,12 +6,12 @@
<image :src="img_url" mode="aspectFit" />
</template>
</view>
<view v-if="is_show_heading_title == '1'" class="head-title flex-row" :style="heading_title_style">{{ form_name }}</view>
<view class="data-list">
<view v-for="(item, index) in filteredDiyData" :key="index" :class="(flex_direction == 'row' ? 'row-item' : 'column-item mb-10') + (item.com_data.common_config.is_error == '1' ? ' item_error' : '')">
<view v-if="is_show_heading_title == '1'" class="head-title flex-row bg-white" :style="heading_title_style">{{ form_name }}</view>
<view class="data-list bg-white">
<view v-for="(item, index) in filteredDiyData" :key="index" :class="(flex_direction == 'row' ? 'row-item' : 'column-item mb-10') + (item.com_data.common_config.is_error == '1' ? ' item_error' : '')" :style="( item.key == 'auxiliary-line' ? 'border-bottom: 0rpx' : '')">
<!-- 左右模式 -->
<!-- <template v-if="flex_direction == 'row'"> -->
<view :class="'wh-auto ht-auto ' + (flex_direction == 'row' ? 'flex-row align-b gap-10' : 'flex-col gap-10')">
<view :class="'wh-auto ht-auto ' + (flex_direction == 'row' ? (['video', 'img'].includes(item.key) ? 'flex-row align-s gap-10' : 'flex-row align-b gap-10') : 'flex-col gap-10')">
<view v-if="!['rich-text', 'auxiliary-line', 'upload-attachments'].includes(item.key)" class="field-label flex-row align-c gap-10" :style="field_label_style">
<view class="flex-row align-c" :style="title_style">{{ item.com_data.title }}<view v-if="item.com_data.is_required == '1'" class="required">*</view></view>
<view v-if="item.com_data.common_config.help_is_show == '1' && !isEmpty(item.com_data.common_config.help_explain)" :data-value="item.com_data.common_config.help_explain" @tap="help_icon_event">
@ -36,23 +36,23 @@
</view>
</view>
<!-- #endif -->
<view class="flex-1 wh-auto flex-col gap-5">
<view class="flex-1 wh-auto flex-col gap-5 oh">
<view v-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'single-text'" :style="item.com_data.common_style">
<component-input :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-input>
</view>
<view v-else-if="item.key == 'multi-text'" :style="item.com_data.common_style + 'padding: 18rpx 22rpx;'">
<component-textarea :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-textarea>
</view>
<view v-else-if="['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'checkbox'">
<view v-else-if="['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'checkbox' && flex_direction !== 'row'">
<component-checkbox :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @data_option_change="data_option_change"></component-checkbox>
</view>
<view v-else-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'radio-btns'">
<view v-else-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'radio-btns' && flex_direction !== 'row'">
<component-radio :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-radio>
</view>
<view v-else-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'select'" :style="item.com_data.common_style">
<view v-else-if="(['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'select') || (['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'radio-btns' && flex_direction == 'row')" :style="item.com_data.common_style">
<component-select :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propDirection="flex_direction" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-select>
</view>
<view v-else-if="['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'select-multi'" :style="item.com_data.common_style">
<view v-else-if="(['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'select-multi') || (['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'checkbox' && flex_direction == 'row')" :style="item.com_data.common_style">
<component-select-multi :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propDirection="flex_direction" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @data_option_change="data_option_change"></component-select-multi>
</view>
<view v-else-if="item.key == 'number'" :style="item.com_data.common_style">
@ -442,6 +442,7 @@ export default {
.row-item {
padding: 10rpx 15rpx;
border-bottom: 2rpx solid #eee;
overflow: hidden;
}
.row-item:last-child {
border-bottom: none;

2
pages/form-input/components/form-input/modules/uploads.vue
View File

@ -26,7 +26,7 @@
</view>
</template>
<template v-else>
<view v-if="propData.length > 0" class="flex-col gap-5 margin-bottom">
<view v-if="propData.length > 0" class="flex-col gap-5 margin-vertical margin-horizontal-xs">
<view v-for="(item, index) in propData" :key="index" class="upload-file-content flex-row align-c gap-10">
<view v-if="item" class="flex-1 flex-row align-c upload-file-title w h">
<span class="text-line-1">{{ new_name(item.name)[0] || '' }}</span><span>.{{ new_name(item.name)[1] || '' }}</span>

29
pages/form-input/components/form-input/phone.vue
View File

@ -1,12 +1,15 @@
<template>
<view class="flex-col gap-10">
<view class="flex-row align-c gap-5" :style="com_data.common_style + propStyle">
<iconfont name="icon-phone" size="24rpx" color="#666" propContainerDisplay="flex" ></iconfont>
<input :value="form_value" class="uni-input flex-1" :style="propStyle" type="text" :placeholder="placeholder" @blur="data_check" @input="input_value_event" />
</view>
<view v-if="com_data.is_sms_verification == '1'" class="flex-row gap-10">
<input :value="form_value_code" class="uni-input flex-1" :style="com_data.common_style + propStyle" type="text" placeholder="请输入验证码" @blur="data_code_check" @input="input_code_value_event" />
<button :class="'uni-button flex-row align-c' + ( verify_submit_disabled ? 'verify_disabled' : '')" :style="propStyle + 'height:auto;'" type="default" :disabled="verify_submit_disabled" @click="verify_send_event">{{ verify_submit_text }}</button>
<view>
<view :class="'flex-col' + (propDirection == 'row' ? '' : 'gap-10')">
<view class="flex-row align-c gap-5" :style="com_data.common_style + propStyle">
<iconfont name="icon-phone" size="24rpx" color="#666" propContainerDisplay="flex" ></iconfont>
<input :value="form_value" class="uni-input flex-1" :style="propStyle" type="text" :placeholder="placeholder" @blur="data_check" @input="input_value_event" />
</view>
<view v-if="propDirection == 'row' && com_data.is_sms_verification == '1'" class="verify-submi-border"></view>
<view v-if="com_data.is_sms_verification == '1'" class="flex-row gap-10">
<input :value="form_value_code" class="uni-input flex-1" :style="com_data.common_style + propStyle" type="text" placeholder="请输入验证码" @blur="data_code_check" @input="input_code_value_event" />
<button :class="'uni-button flex-row align-c' + ( verify_submit_disabled ? 'verify_disabled' : '')" :style="propStyle + 'height:auto;'" type="default" :disabled="verify_submit_disabled" @click="verify_send_event">{{ verify_submit_text }}</button>
</view>
</view>
<!-- 图片验证码弹层 -->
<component-popup :propShow="popup_image_verify_status" propPosition="bottom" @onclose="popup_image_verify_close_event">
@ -54,7 +57,11 @@
propStyle: {
type: String,
default: '',
}
},
propDirection: {
type: String,
default: 'row',
},
},
data() {
return {
@ -278,4 +285,8 @@
top: 0;
right: 36rpx;
}
.verify-submi-border {
border-top: 2rpx solid #eee;
margin: 10rpx 0;
}
</style>