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

<template>
	<view class="component-wrapper" :style="wrapper_style">
		<template v-if="list && list.length > 0">
			<img v-if="img.is_minApp==1" @click="$until.u_gopage('U_simplegraph',{value:img,choose_style:datas.choose_style})"
				v-for="(img, index) in list" :src="img.image || emptyImage" :key="index" :style="img_style">
			<!-- #ifdef MP-WEIXIN -->
			<img v-else @click="$until.u_gopage('U_simplegraph',{value:img,choose_style:datas.choose_style})" :src="img.image || emptyImage" :style="img_style">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<wx-open-launch-weapp v-else :username="img.gh_id" :path="img.minApp_link">
				<img @click="$until.u_gopage('U_simplegraph',{value:img,choose_style:datas.choose_style})" :src="img.image || emptyImage" :style="img_style">
			</wx-open-launch-weapp>
			<!-- #endif -->
		</template>
		<template v-else>
			<img :src="emptyImage" :style="img_style">
		</template>
	</view>
</template>

<script>
	export default {
		props: ['styles', 'datas'],
		data() {
			let siteinfo = getApp().globalData.siteinfo;
			let data = {
				settingFile: siteinfo,
				emptyImage: siteinfo.root_img + '/static/app/image.png',
			}
			return data;
		},
		computed: {
			/** 样式 */
			wrapper_style() {
				if (this.datas.list) {
					const {
						padding_top,
						padding_bottom,
						padding_left,
						padding_right,
					} = this.datas;
					return `
                padding-top: ${padding_top}px;
                padding-bottom: ${padding_bottom}px;
                padding-left: ${padding_left}px;
                padding-right: ${padding_right}px;
            `;
				}
			},

			img_style() {
				const {
					picture_border,
				} = this.datas;
				return `
				width: 100%;
                border-radius: ${picture_border}px;
            `;
			},

			/** 标题 */
			list() {
				return this.datas.list;
			},
		},

	};
</script>

<style lang="less" scoped>
	.component-wrapper {
		width: 750rpx;
	}
</style>