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

<template>
	<view :class="[AppTheme,className]" :style="wrapper_style">
		<!-- style -->
		<view v-html="css"></view>
		<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 class="wrap">
			<waterfall :datas="datas" :status="waterfall.status" :list="waterfall.list" :reset="waterfall.reset"
				@click="onClick" @done="onDone"></waterfall>
		</view>
	</view>
</template>
<script>
	// 自定义样式
	const css = function() {
		const {
			margin_top,
			margin_bottom,
			bg_color,
			shop_price_color,
			market_price_color,
			text_bg_color,
			text_color,
			time_text_bg_color,
			time_text_color,
			bar_text_color,
			buynow_bg_color,
			buynow_text_color
		} = this.datas;

		return `
        .component-${this.id} {
            background-color: ${bg_color || '#f8f8f8'};
            font-size: 24rpx;
        }


        .component-${this.id} .item-shop .shop-price {
            color: ${shop_price_color};
        }
        .component-${this.id} .item-market {
            color: ${market_price_color};
        }

        .component-${this.id} .item-claimed {
            color: ${bar_text_color};
        }

        .component-${this.id} .geshop-button-buynow {
            background-color: ${buynow_bg_color};
            color: ${buynow_text_color};
        }
    `;
	};

	/**
	 * 返回剩余秒数，正整值
	 * @param {timestamp} timestamp 时间戳
	 */
	const get_second = (timestamp) => {
		const now = new Date().getTime();
		let left = timestamp - now;
		left = Math.abs(left);
		const second = parseInt((left / 1000));
		return second;
	};

	/**
	 * 判断当前的倒计时状态
	 * @param {timestamp} start 开始的时间
	 * @param {timestamp} end 结束的时间
	 * @return {Number} 0=未开始，1=正在开始，2=已经结束
	 */
	const get_status = (start, end) => {
		const now = new Date().getTime();
		if (now < start) {
			return 0;
		}
		if (now >= start && now < end) {
			return 1;
		}
		if (now >= end) {
			return 2;
		}
	};

	/**
	 * 秒数转换成日期
	 * @param {Number} s 秒数
	 * @returns {Array}
	 */
	const second_to_date = (s) => {
		let t = ['00', '00', '00', '00'];
		if (s > -1) {
			t = [];
			const day = Math.floor(s / 3600 / 24);
			const hour = Math.floor(s / 3600) % 24;
			const min = Math.floor(s / 60) % 60;
			const sec = s % 60;
			t.push(`${day}D`);
			if (hour < 10) {
				t.push('0' + hour);
			} else {
				t.push(hour);
			}
			if (min < 10) {
				t.push('0' + min);
			} else {
				t.push(min);
			}
			if (sec < 10) {
				t.push('0' + sec);
			} else {
				t.push(sec);
			}
		};
		return t;
	};
	import homeApi from '@/api/home/index.js'
	import waterfall from "@/components/waterfall/waterfall-list"
	export default {
		props: ['isdiy', 'datas', 'styles'],
		components: {
			"waterfall": waterfall
		},
		data() {
			let siteinfo = getApp().globalData.siteinfo;
			const img = siteinfo.root_img + '/static/app/imgs/default-goods.png';

			return {
				// 加载状态
				loading: true,
				// 定时器钩子
				timer_id: null,
				// 倒计时秒数
				spiner: ['00', '00', '00', '00'],
				// 倒计时文案
				spiner_text: '倒计时文案',
				// 当前状态
				status: 0,
				default_img: img,
				// 瀑布流组件相关
				waterfall: {
					status: "",
					reset: false,
					list: null
				},
				total: 0,
				last_page: 0,
				current_page: 1
			};
		},

		computed: {
			/** 副标题内容 */
			title() {
				return this.datas.title || '';
			},
			img_style2() {
				return `
				width:15px;
				height:15px;
				margin:auto;
				`;
			},
			// 副标题栏样式
			title_style() {
				const {
					text_size,
					text_color,
				} = this.datas;
				return `
			    font-size: ${text_size}px;
			    color: ${text_color};
			`;
			},
			// 副标题栏样式
			title_style1() {
				const {
					text_size,
				} = this.datas;
				return `
				color:rgb(96, 98, 102);
			    font-size: ${text_size}px;
			`;
			},

			/** 样式 */
			wrapper_style() {
				const {
					padding_top,
					padding_bottom,
					padding_left,
					padding_right,
					margin_top,
					margin_bottom,
					bg_color,
				} = this.datas;
				return `
				    width: 100%;
					background-color:${bg_color};
				    padding-top: ${margin_top}px;
				    padding-bottom: ${margin_bottom}px;
				    padding-left: ${padding_left}px;
				    padding-right: ${padding_right}px;
				`;
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			env() {
				return this.$store.state.page.env;
			},
			// 开始时间
			start_time() {
				try {
					const timestamp = parseInt(this.datas.goods[0].tsk_info.tsk_begin_time);
					return timestamp * 1000;
				} catch (err) {
					return 1577265;
				}
			},
			// 结束时间
			end_time() {
				try {
					const timestamp = parseInt(this.datas.goods[0].tsk_info.tsk_end_time);
					return timestamp * 1000;
				} catch (err) {
					return 1577265;
				}
			},
			// 是否展示删除线
			del() {
				let visible = true;
				visible = (this.datas.market_price_del === undefined || this.datas.market_price_del === null) ? true :
					Number(
						this.datas.market_price_del) >= 1;
				return visible;
			}
		},

		methods: {
			// 监听瀑布流点击
			onClick(data, index, tag) {
				this.$until.u_gopage('U_goods2', data)
			},
			// 瀑布流渲染完成
			onDone() {
				// 设置组件为 非重置，这行代码保留不删即可
				this.waterfall.reset = false;

				// 恢复 getList 方法的调用

				// 设置组件状态为 等待加载
				// this.waterfall.status = '';
			},
			more() {
				uni.navigateTo({
					url: '/pagesE/pages/mall/list'
				})
			},
			getlist(type) {
				let that = this;
				that.waterfall.status = 'loading';
				if (that.isdiy && !that.isdiy) {
					that.waterfall.status = 'success';
					that.waterfall.list = that.datas.goods;
				} else {
					homeApi.getgoods({
						page: that.current_page,
						lable: that.datas.title,
						show_num: that.datas.show_num
					}).then(res => {
						if (type == 1) {
							that.waterfall.list = null;
						}
						uni.stopPullDownRefresh()
						that.last_page = res.data.last_page;
						that.total = res.data.total;
						if (res.data.data && res.data.data.length > 0) {
							that.waterfall.list = res.data.data
						}
						if (that.datas.show_num && that.datas.show_num > 0) {
							that.waterfall.status = 'showline';
						} else {
							if (that.total <= 0) {
								that.waterfall.status = 'finish';
							} else {
								let flag = parseInt(that.last_page) == parseInt(res.data.current_page);
								if (flag) {
									if (that.last_page == 1 && that.current_page == 1) {
										that.waterfall.status = 'showline';
									} else {
										if (res.data.data && res.data.data.length > 0) {
											that.waterfall.status = 'success';
										} else {
											that.waterfall.status = 'finish';
										}
									}
								} else {
									if (that.current_page < that.last_page) {
										that.waterfall.status = 'await';
									} else {
										that.waterfall.status = 'success';
									}
								}
							}
						}
					});
				}
			},
			toBottom(type) {
				if (type == 1) {
					this.current_page = 0;
					this.waterfall.reset = true;
				}
				this.current_page++;
				console.log('this.datas.show_num', this.datas.show_num)
				if (this.datas.show_num <= 0 || this.datas.show_num == undefined || this.current_page == 1) {
					this.getlist(type);
				}
			},
			// 剩余库存文案
			filter_only_left(count = 0) {
				return '剩余：' + count;
			}
		},

		watch: {
			// 监听商品列表是否有变化
			goods_list() {
				// this.$store.dispatch('global/async_goods_init_2', this);
			},
		},

		mounted() {
			this.getlist()
			this.$emit('loaded');
		}
	};
</script>
<style lang="scss" scoped>
	// 默认
	.component-wrapper {
		width: 750rpx;

		.morebox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 12px 10px 12px;

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