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

新增视频和图片显示

master
于肖磊 2025-07-02 11:16:04 +08:00
parent 48002fa667
commit 1cf41fb1a8
6 changed files with 259 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
pages/diy/components/diy/modules/video-player/video-player.vue → components/video-player/video-player.vue
View File

2
pages/diy/components/diy/video.vue
View File

@ -16,7 +16,7 @@
<script>
import { common_styles_computer, common_img_computer } from '@/common/js/common/common.js';
import VideoPlayer from '@/pages/diy/components/diy/modules/video-player/video-player.vue';
import VideoPlayer from '@/components/video-player/video-player.vue';
export default {
components: {
VideoPlayer,

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

@ -20,43 +20,49 @@
</view>
<view class="flex-1 wh-auto flex-col gap-5">
<view v-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'single-text'" :style="item.com_data.common_style">
<componentInput :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentInput>
<component-input :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :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;'">
<componentTextarea :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentTextarea>
<component-textarea :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :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'">
<componentCheckbox :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @data_option_change="data_option_change"></componentCheckbox>
<component-checkbox :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :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'">
<componentRadio :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentRadio>
<component-radio :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :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">
<componentSelect :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propDirection="flex_direction" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentSelect>
<component-select :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :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">
<componentSelectMulti :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propDirection="flex_direction" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @data_option_change="data_option_change"></componentSelectMulti>
<component-select-multi :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :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">
<componentNumber :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentNumber>
<component-number :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-number>
</view>
<view v-else-if="item.key == 'date'" :style="item.com_data.common_style">
<componentDate :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentDate>
<component-date :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-date>
</view>
<view v-else-if="item.key == 'date-group'" :style="item.com_data.common_style">
<componentDateGroup :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentDateGroup>
<component-date-group :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-date-group>
</view>
<view v-else-if="item.key == 'address'">
<componentAddress :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change" @openRagion="open_ragion" @dataAddressChange="dataAddressChange"></componentAddress>
<component-address :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change" @openRagion="open_ragion" @dataAddressChange="dataAddressChange"></component-address>
</view>
<view v-else-if="item.key == 'phone'">
<componentPhone :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change" @dataCodeCheck="data_code_check" @dataCodeChage="data_code_chage"></componentPhone>
<component-phone :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change" @dataCodeCheck="data_code_check" @dataCodeChage="data_code_chage"></component-phone>
</view>
<view v-else-if="item.key == 'pwd'" :style="item.com_data.common_style">
<componentPwd :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change"></componentPwd>
<component-pwd :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change"></component-pwd>
</view>
<view v-else-if="item.key == 'score'">
<componentScore :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change"></componentScore>
<component-score :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change"></component-score>
</view>
<view v-else-if="item.key == 'img'">
<component-image :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction"></component-image>
</view>
<view v-else-if="item.key == 'video'">
<component-video :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction"></component-video>
</view>
<view v-if="!isEmpty(item.com_data.common_config.error_text)" class="field-invalid-info">{{ item.com_data.common_config.error_text }}</view>
</view>
@ -100,6 +106,8 @@ import componentSelectMulti from '@/pages/form-input/components/form-input/selec
import componentPhone from '@/pages/form-input/components/form-input/phone.vue';
import componentPwd from '@/pages/form-input/components/form-input/pwd.vue';
import componentScore from '@/pages/form-input/components/form-input/score.vue';
import componentImage from '@/pages/form-input/components/form-input/image.vue';
import componentVideo from '@/pages/form-input/components/form-input/video.vue';
import componentRegionPicker from '@/pages/common/components/region-picker/region-picker';
export default {
name: 'formInput',
@ -118,7 +126,8 @@ export default {
componentPhone,
componentPwd,
componentScore,
componentImage,
componentVideo
},
props: {
propValue: {

71
pages/form-input/components/form-input/image.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<view class="form-input-image">
<image-empty :propImageSrc="com_data.img_src[0]" :propStyle="img_style" propErrorStyle="width: 100rpx;height: 100rpx;"></image-empty>
</view>
</template>
<script>
import { isEmpty } from '@/common/js/common/common.js';
import imageEmpty from '@/pages/form-input/components/form-input/modules/image-empty.vue';
export default {
components: {
imageEmpty
},
props: {
propValue: {
type: Object,
default: () => ({}),
},
propKey: {
type: [String, Number],
default: 0,
},
propDataIndex: {
type: Number,
default: 0,
},
propStyle: {
type: String,
default: '',
},
propIsCustom: {
type: Boolean,
default: false,
}
},
data() {
return {
com_data: {},
img_style: 'width: 100%;height:100%;',
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
mounted() {
this.init();
},
methods: {
isEmpty,
init() {
const com_data = this.propValue;
let img_style = `width: 100%;height:100%;`;
if (!this.propIsCustom && !isEmpty(com_data)) {
const { img_width, img_scale_type } = com_data;
const height = img_scale_type === '1' ? img_width : img_scale_type == '0' ? (img_width * 9) / 16 : (img_width * 3) / 4;
img_style = `width: ${ img_width * 2 }rpx;height:${ height * 2 }rpx;`
}
this.setData({
com_data: com_data,
img_style: img_style,
});
}
}
}
</script>
<style lang="scss" scoped>
</style>

86
pages/form-input/components/form-input/modules/image-empty.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<view :class="['oh img_wh', propClass]" :style="empty_outer_style + propStyle">
<image :src="img_url" :mode="propImgFit" :style="empty_style + 'display: block;'" @error="error_change"/>
</view>
</template>
<script>
import { is_obj, isEmpty } from '@/common/js/common/common.js';
export default {
props: {
propImageSrc: {
type: [Object, String],
default: () => {},
},
propErrorStyle: {
type: String,
default: () => '',
},
propImgFit: {
type: String,
default: () => 'aspectFill',
},
propStyle: {
type: String,
default: () => '',
},
propClass: {
type: String,
default: () => '',
},
},
data() {
return {
empty_outer_style: '',
empty_style: 'width: 100%; height: 100%;', // 有图片的时候显示为100%
img_url: '',
default_image: '/static/images/common/image-empty.png',
};
},
watch: {
propImageSrc(val) {
this.init();
}
},
mounted() {
this.init();
},
methods: {
init() {
let img_url = this.propImageSrc;
if (is_obj(this.propImageSrc)) {
img_url = !isEmpty(this.propImageSrc) ? this.propImageSrc.url : '';
}
// 没有图片的时候根据默认值来算
if (img_url == undefined || img_url == null || img_url == '') {
this.setData({
empty_outer_style: 'background: #f4fcff;display:flex;align-items: center;justify-content: center;',
empty_style: `${this.propErrorStyle}`,
});
img_url = this.default_image;
} else {
this.setData({
empty_outer_style: '',
empty_style: 'width: 100%; height: 100%;', // 有图片的时候显示为100%
});
}
this.setData({
img_url: img_url,
});
},
error_change() {
this.setData({
empty_outer_style: 'background: #f4fcff;display:flex;align-items: center;justify-content: center;',
empty_style: `${this.propErrorStyle}`,
img_url: this.default_image,
});
}
},
};
</script>
<style lang="scss" scoped>
.img_wh {
width: 100%;
height: 100%;
}
</style>

78
pages/form-input/components/form-input/video.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<!-- 视频 -->
<view class="video pr" :style="video_style">
<!-- #ifndef APP -->
<video :src="video" class="wh-auto ht-auto" :poster="video_img" objectFit="cover" style="object-fit: cover"></video>
<!-- #endif-->
<!-- #ifdef APP -->
<video-player ref="domVideoPlayer" :poster="video_img" :src="video" objectFit="cover" controls />
<!-- #endif-->
</view>
</template>
<script>
import { isEmpty } from '@/common/js/common/common.js';
import VideoPlayer from '@/components/video-player/video-player.vue';
export default {
components: {
VideoPlayer,
},
props: {
propValue: {
type: Object,
default: () => ({}),
},
propKey: {
type: [String, Number],
default: 0,
},
propDataIndex: {
type: Number,
default: 0,
},
propStyle: {
type: String,
default: '',
},
propIsCustom: {
type: Boolean,
default: false,
}
},
data() {
return {
video_style: 'width: 100%;height:100%;',
video_img: '',
video: '',
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
mounted() {
this.init();
},
methods: {
isEmpty,
// 初始化数据
init() {
const com_data = this.propValue;
let video_style = `width: 100%;height:100%;`;
if (!this.propIsCustom && !isEmpty(com_data)) {
const { video_width, video_scale_type } = form.value;
const height = video_scale_type === '1' ? video_width : video_scale_type == '0' ? (video_width * 9) / 16 : (video_width * 3) / 4;
video_style = `width: ${ video_width * 2 }rpx;height:${ height * 2 }rpx;`
}
this.setData({
com_data: com_data,
video_style: video_style,
});
}
},
};
</script>
<style></style>