hwnc/components/ui-component/U_monitor/m/index.vue

<template>
	<view class="U000004-template1" :style="wrapper_style" :class="className">
		<!-- style -->
		<view v-html="css"></view>
		<!-- 列表 -->
		<template v-if="datas.preview_color">
			<view v-if="datas.show_title" class="morebox">
				<view :style="title_style" class="title">{{ title }}</view>
				<view class="title2" @click="more">查看更多
					<u-icon :style="img_style2" color="#949494" name="arrow-right" size="14"></u-icon>
				</view>
			</view>
			<view v-if="list.length <= 0" style="text-align: center;font-size: 16px;line-height: 32px">
				请先添加监控
			</view>
			<view class="button-box" :style="box_button" v-if="list && list.length > 0">
				<view @click="govoide(item.id)" class="box_a" :style="boxa_style" v-for="(item, index) in list"
					:key="item.id">
					<image class="button-img" :style="imag_style" :src="item.pic || emptyImage" alt=""></image>
					<image :src="settingFile.root_img+'/static/app/imgs/much/play.png'" class="item-play" mode="">
					</image>
					<text class="button-title" :style="titlea_style">{{ item.title }}</text>
				</view>
			</view>
		</template>
	</view>
</template>
<script>
	// 自定义样式
	const css = function() {
		if (this.datas.preview_color) {
			const {
				padding_top,
				padding_bottom,
				padding_left,
				padding_right,
				logo_image_size,
				border_radius,
				button_number,
				preview_color,
				font_size,
				font_color,

			} = this.datas;
			return `
        .component-${this.id} .button-box{
			padding:0;
            background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
        }

        .component-${this.id} .button-box .box_a {
            width: ${button_number == 2 ? '50' : '33.3'}%;
        }

        .component-${this.id}  .button-img{
            width: ${logo_image_size}px;
            height: ${logo_image_size}px;
            border-radius: ${border_radius}px;
        }

        .component-${this.id}  .button-title{
            font-size:${font_size}px;
            color: ${font_color};
        }
    `;
		}
	};
	import landApi from '@/api/land/index.js'
	export default {
		props: ['datas', 'styles', 'languages'],
		data() {
			let siteinfo = getApp().globalData.siteinfo;
			this.initdata();
			return {
				settingFile: siteinfo,
				emptyImage: siteinfo.root_img + '/static/app/image.png',
				scroll_list: [], //轮播时用的数值结构
				// 轮播图设置
				swiperOption: {
					autoplay: false,
					// loop: true,   loop模式第二轮循环的时候第一张会闪烁
					delay: 3000,
					observer: true,
					// autoHeight: true,
					pagination: {
						el: '.swiper-pagination',
					}
				},
				list: []
			};
		},
		computed: {
			titlea_style() {
				if (this.datas.preview_color) {
					const {
						font_size,
						font_color
					} = this.datas;

					return `
                    font-size:${font_size}px;
                    color: ${font_color};
				`;
				}
			},
			imag_style() {
				if (this.datas.preview_color) {
					const {
						logo_image_size,
						border_radius
					} = this.datas;
					let ht = parseInt(logo_image_size * 2 / 3)
					return `
                     width: ${logo_image_size*2}rpx;
                     height: ${ht*2}rpx;
                     border-radius: ${border_radius*2}rpx;
				`;
				}
			},
			boxa_style() {
				if (this.datas.preview_color) {
					const {
						button_number,
					} = this.datas;

					return `
                     width: ${button_number == 2 ? '50' : '33.3'}%;
				`;
				}
			},
			box_button() {
				if (this.datas.preview_color) {
					const {
						preview_color,
						bg_color
					} = this.datas;

					return `
					    background-color: ${bg_color};
						padding:0;
				        background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
				        background-size: 100% 100%;
				        background-position: center;
				        background-repeat: no-repeat;
				`;
				}
			},
			// 副标题栏样式
			title_style() {
				const {
					text_size,
					text_color,
				} = this.datas;
				return `
			    font-size: ${text_size}px;
			    color: ${text_color};
			`;
			},
			img_style2() {
				const {
					button_size
				} = this.datas
				return `
				width:${button_size}px;
				height:${button_size}px;
				margin:auto;
				`;
			},
			/** 样式 */
			wrapper_style() {
				const {
					padding_top,
					padding_bottom,
					padding_left,
					padding_right,
					bg_color
				} = this.datas;
				return `
				background-color:${bg_color};
				padding: ${padding_top}px ${padding_right}px ${padding_bottom}px  ${padding_left}px;
			    background-size: 100% auto;
			    bakcground-position: center;
			`;
			},
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
			button_number() {
				return this.datas.button_number;
			},
			button_line() {
				return this.datas.button_line || 1;
			},
			img_style() {
				const {
					button_size
				} = this.datas
				return `
				width:${button_size}px;
				height:${button_size}px;
				margin:auto;
				`;
			},
			/** 标题内容 */
			title() {
				return this.datas.title || '标题';
			},
		},
		watch: {
			button_number(newValue) {
				let list = this.datas.list;
				this.scroll_list = [];

				if (!this.datas.button_line) {
					this.datas.button_line = 1
				}
				let page = Math.ceil(this.datas.list.length / newValue / this.datas.button_line); //==> 页数
				let num = newValue * this.datas.button_line; // ==> 每页多少个

				for (let i = 0; i < page; i++) {
					this.scroll_list.push(list.slice(i * num, (i + 1) * num))
				}

			},
			button_line(newValue) {
				let list = this.datas.list;
				this.scroll_list = [];

				if (!newValue) {
					newValue = 1
				}
				let page = Math.ceil(this.datas.list.length / this.datas.button_number / newValue); //==> 页数
				let num = this.datas.button_number * newValue; // ==> 每页多少个

				for (let i = 0; i < page; i++) {
					this.scroll_list.push(list.slice(i * num, (i + 1) * num))
				}

			}
		},

		methods: {
			more() {
				uni.navigateTo({
					url: '/pagesE/pages/broadcast/broadcast'
				})
			},
			govoide(id) {
				uni.navigateTo({
					url: '/pagesE/pages/broadcast/transmit?id=' + id
				})
			},
			initdata() {
				let that = this
				let ids = []
				that.datas.goods.forEach(ele => {
					ids.push(ele.id)
				})
				let res = landApi.getlist({
					gids: ids,
					gtype: 'monitor',
				}).then(res => {
					if (res.status == 200) {
						that.list = res.data;
					}
				});

			},
			initButtons() {
				if (this.datas.list) {
					let list = this.datas.list;
					this.scroll_list = [];
					if (!this.datas.button_line) {
						this.datas.button_line = 1
					}

					let page = Math.ceil(this.datas.list.length / this.datas.button_number / this.datas
						.button_line); //==> 页数
					let num = this.datas.button_number * this.datas.button_line; // ==> 每页多少个

					for (let i = 0; i < page; i++) {
						this.scroll_list.push(list.slice(i * num, (i + 1) * num))
					}
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.initButtons();
			})
		}
	};
</script>
<style lang="less" scoped>
	// 默认
	.component-wrapper {
		.morebox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 12px;
			margin-bottom: 5px;

			.title2 {
				display: flex;
				font-size: 28rpx;
				color: #949494;
				align-items: center;
			}
		}

		.box_a {
			.item-play {
				width: 55rpx;
				height: 55rpx;
				position: absolute;
				top: 45%;
				left: 50%;
				margin-top: -27.5rpx;
				margin-left: -27.5rpx;
			}
		}

		.button-box {
			display: flex;
			flex-wrap: wrap;
			width: 100%;

			view {
				/*flex: 1;*/
				/*width: 25%;*/
				position: relative;
				margin: 10px 0;
				list-style: none;
				display: flex;
				flex-direction: column;
				align-self: center;
				justify-self: center;
			}

			.button-img {
				margin: 0 auto;
				margin-bottom: 5px;
			}

			.button-title {
				text-align: center;
				margin: 4rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-wrap: break-word;
				overflow: hidden;
			}
		}
	}
</style>