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

<template>
	<view :class="className" :style="box_style">
		<!-- style -->
		<view v-html="css"></view>
		<!-- 列表 -->
		<template v-if="datas.preview_color">
			<view v-if="list.length <= 0" style="text-align: center;font-size: 32rpx;line-height: 64rpx">
				请先添加按钮
			</view>
			<view v-if="list && list.length > 0&& !datas.is_scroll" :style="cswiper_style" class="cswiper">
				<view v-for="(items, idx) in scroll_list" :key="idx" class="button-box">
					<view v-if="item.is_minApp==1" @click="$until.u_gopage('U_button',item)" class="li"
						:style="li_style" v-for="(item, index) in items" :key="item.id">
						<image :style="liimg_style" class="button-img" :src="item.image || emptyImage" alt=""></image>
						<span :style="texts_style" class="button-title">{{ item.text }}</span>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view v-else class="li" :style="li_style" @click="$until.u_gopage('U_button',item)"
						:key="`${index}-${item.id}`">
						<image :style="liimg_style" class="button-img" :src="item.image || emptyImage" alt=""></image>
						<span :style="texts_style" class="button-title">{{ item.text }}</span>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view v-else class="li" :style="li_style">
						<wx-open-launch-weapp :username="item.gh_id" :path="item.minApp_link"
							style="text-align: center;">
							<image :style="liimg_style" class="button-img" :src="item.image || emptyImage" alt="">
							</image>
						</wx-open-launch-weapp>
						<span :style="texts_style" class="button-title">{{ item.text }}</span>
					</view>
					<!-- #endif -->
				</view>
			</view>
			<swiper v-if="list && list.length > 0&& datas.is_scroll" :indicator-dots="true" :autoplay="false"
				:interval="3000" :current="currentIndex" :style="cswiper_style" class="cswiper">
				<swiper-item v-for="(items, idx) in scroll_list" :key="idx" class="button-box">
					<view v-if="item.is_minApp==1" @click="$until.u_gopage('U_button',item)" class="li"
						:style="li_style" v-for="(item, index) in items" :key="item.id">
						<image :style="liimg_style" class="button-img" :src="item.image || emptyImage" alt=""></image>
						<span :style="texts_style" class="button-title">{{ item.text }}</span>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view v-else class="li" :style="li_style" @click="$until.u_gopage('U_button',item)"
						:key="`${index}-${item.id}`">
						<image :style="liimg_style" class="button-img" :src="item.image || emptyImage" alt=""></image>
						<span :style="texts_style" class="button-title">{{ item.text }}</span>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view v-else class="li" :style="li_style">
						<wx-open-launch-weapp :username="item.gh_id" :path="item.minApp_link"
							style="text-align: center;">
							<image :style="liimg_style" class="button-img" :src="item.image || emptyImage" alt="">
							</image>
						</wx-open-launch-weapp>
						<span :style="texts_style" class="button-title">{{ item.text }}</span>
					</view>
					<!-- #endif -->
				</swiper-item>
			</swiper>
		</template>
	</view>
</template>
<script>
	// 自定义样式
	const css = function() {
		if (this.datas.preview_color) {
			const {
				padding_top,
				padding_bottom,
				button_size,
				border_radius,
				button_number,
				preview_color,
				font_size,
				text_style,
				font_color,
				button_line,
			} = this.datas;
			let cheight = 0;
			if (button_line == 1) {
				cheight = (button_line * (padding_top + padding_bottom + button_size) + 40) * 2;
			} else {
				cheight = (button_line * (padding_top + padding_bottom + button_size) + 80) * 2;
			}
			return `
			.component-${this.id} {
			    background-color: ${preview_color.color || '#f8f8f8'};
			}
        .component-${this.id} .button-box{
            background-color: ${preview_color.color || '#f8f8f8'};
            background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
			
        }
		.component-${this.id} .cswiper{
			  height: ${cheight}rpx;

        }
        .component-${this.id} .button-box .li{
            width: ${button_number == 4 ? '25' : '20'}%;
        }

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

        .component-${this.id}  .button-title{
            font-size:${font_size}px;
            font-weight: ${text_style.includes('1') ? 'bold' : ''};
            font-style: ${text_style.includes('2') ? 'italic' : ''};
            color: ${font_color};
        }
    `;
		}
	};

	export default {
		props: ['datas', 'styles', 'languages'],
		data() {
			let siteinfo = getApp().globalData.siteinfo;
			let data = {
				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',
					}
				},
				currentIndex: 0,
			};
			return data;
		},
		computed: {
			box_style() {
				if (this.datas.preview_color) {
					const {
						preview_color
					} = this.datas;
					return `
					background-color: ${preview_color.color || '#f8f8f8'};
								`;
				}
			},
			cswiper_style() {
				if (this.datas.preview_color) {
					const {
						button_line,
						padding_top,
						button_size,
						padding_bottom
					} = this.datas;
					let cheight = 0;
					if (button_line == 1) {
						cheight = (button_line * (padding_top + padding_bottom + button_size) + 40) * 2;
					} else {
						cheight = (button_line * (padding_top + padding_bottom + button_size) + 80) * 2;
					}
					return `
			  height: ${cheight}rpx;
      
				`;
				}
			},
			texts_style() {
				if (this.datas.preview_color) {
					const {
						font_size,
						text_style,
						font_color
					} = this.datas;
					return `
                      font-size:${font_size}px;
                      font-weight: ${text_style.includes('1') ? 'bold' : ''};
                      font-style: ${text_style.includes('2') ? 'italic' : ''};
                      color: ${font_color};          
				`;
				}
			},
			liimg_style() {
				if (this.datas.preview_color) {
					const {
						button_size,
						border_radius
					} = this.datas;
					return `
				     width: ${button_size}px;
				     height: ${button_size}px;
				     border-radius: ${border_radius}px;
				`;
				}
			},
			li_style() {
				if (this.datas.preview_color) {
					const {
						button_number,
					} = this.datas;

					return `
				        width: ${button_number == 4 ? '25' : '20'}%;
				`;
				}
			},
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
			list() {
				return this.datas.list;
			},
			button_number() {
				return this.datas.button_number;
			},
			button_line() {
				return this.datas.button_line || 1;
			}
		},
		watch: {
			list: {
				deep: true, //深度监听
				handler: function() {
					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))
					}

				}
			},
			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: {
			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 {
		// display: flex;
		justify-content: center;
		width: 750rpx;

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

			.li {
				position: relative;
				margin: 20rpx 0;
				list-style: none;
				display: flex;
				flex-direction: column;
				align-self: center;
				justify-self: center;
			}

			.button-img {
				margin: 0 auto;
			}

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