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

<template>
	<view :class="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="goods-list">
			<view class="li" v-for="(item, index) in list" :key="item.id">
				<!--折扣标-->
				<discount :value="item.discount" :config="datas" />
				<!--商品图片-->
				<view class="item-image">
					<view class="image-goods">
						<goodsimage :src="item.pic" :index="index" />
					</view>
				</view>
				<view class="item-info">
					<!-- 价格 -->
					<view class="item-shop-market">
						<!--销售价-->
						<view class="item-shop bold">
							<view class="shop-price" :style="shopprice_style">
								<shopprice :value="item.price" :config="datas">
								</shopprice>
							</view>
						</view>
						<!--市场价-->
						<view class="item-market" v-if="del" :style="market_style">
							<marketprice :value="item.oprice" :shop-price="item.price" :config="datas" >
							</marketprice>
						</view>
					</view>
				</view>
				<!-- 剩余 -->
				<view class="item-claimed" :style="claimed_style">
					<span>{{ filter_only_left(item.num) }}</span>
				</view>
				<!-- button -->
				<view @click="$until.u_gopage('U_goods',item)" class="geshop-button-buynow" :style="buy_style">去购买
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import discount from '@/components/ui-component/component-unit/discount/index.vue';
	import goodsimage from '@/components/ui-component/component-unit/image_goods/index.vue';
	import marketprice from '@/components/ui-component/component-unit/market_price/index.vue';
	import shopprice from '@/components/ui-component/component-unit/shop_price/index.vue';
	import landApi from '@/api/land/index.js'
	// 自定义样式
	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} {
           padding-top: ${margin_top}px;
           padding-bottom: ${margin_bottom}px;
           font-size: 24rpx;
        }

        .component-${this.id} .geshop-m-timer {
            background-color: ${text_bg_color || '#D8D8D8'};
        }
        .component-${this.id} .geshop-m-timer .geshop-m-timer-title {
            color: ${text_color};
        }
        .component-${this.id} .geshop-m-timer .geshop-m-timer-right {
            color: ${time_text_bg_color};
        }
        .component-${this.id} .geshop-m-timer span.timer-spiner {
            background-color: ${time_text_bg_color};
            color: ${time_text_color};
        }

        .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;
	};

	export default {
		components: {
			discount,
			goodsimage,
			marketprice,
			shopprice,
		},
		props: ['datas', 'styles'],
		data() {
			this.goodsinit()
			return {
				// 加载状态
				loading: true,
				// 定时器钩子
				timer_id: null,
				// 倒计时秒数
				spiner: ['00', '00', '00', '00'],
				// 倒计时文案
				spiner_text: '倒计时文案',
				// 当前状态
				status: 0,
				list:[]
			};
		},

		computed: {
			shopprice_style(){
				const { shop_price_color } = this.datas
				return `color: ${shop_price_color};`;
			},
			market_style(){
				const { market_price_color } = this.datas
				return `color: ${market_price_color};`;
				
			},
			claimed_style(){
				const { bar_text_color } = this.datas
				return `color: ${bar_text_color};`;
				
			},
			buy_style() {
				const { buynow_bg_color, buynow_text_color } = this.datas
				return `
				background-color: ${buynow_bg_color};
				color: ${buynow_text_color};`;
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
			/** 副标题内容 */
			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};
			`;
			},
			/** 样式 */
			wrapper_style() {
				const {
					padding_top,
					padding_bottom,
					padding_left,
					padding_right,
					bg_color,
					margin_top,
					margin_bottom,
				} = this.datas;
				return `
				    width: 750rpx;
				    padding-top: ${margin_top}px;
				    padding-bottom: ${margin_bottom}px;
				    padding-left: ${padding_left}px;
				    padding-right: ${padding_right}px;
					background-color:${bg_color};
				`;
			},
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			env() {
				return this.$store.state.page.env;
			},
			// 返回远端数据属否加载完毕
			remote_data_loaded() {
				return this.$store.state.page.remote_data_loaded;
			},
			// 数据源ID
			goods_source_id() {
				return this.datas.goods[0].id || '';
			},
			// 开始时间
			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: {
			 goodsinit() {
				let that = this
				let ids = []
				that.datas.goods.forEach(ele => {
					ids.push(ele.id)
				})
				let res = landApi.getlist({
					gids: ids,
					gtype: 'good',
				}).then(res => {
					console.log("res", res)
					if (res.status == 200) {
						that.list = res.data;
					}
				});
			},
			more() {
				uni.navigateTo({
					url: '/pagesE/pages/mall/list'
				})
			},
			// 初始化
			async init() {
				// 首次状态更新
				this.timer(this.start_time, this.end_time);
				// 装修页不执行倒计时
				if (this.env !== 1) {
					clearInterval(this.timer_id);
					this.timer_id = setInterval(() => {
						this.timer(this.start_time, this.end_time);
					}, 1000);
				}
				this.loading = false;
			},

			// 倒计时函数
			timer(start, end) {
				// 获取状态
				this.status = get_status(start, end);
				let second = 0;
				// 判断状态
				switch (this.status) {
					case 0:
						second = get_second(start);

						break;
					case 1:
						second = get_second(end);

						break;
					case 2:
						clearInterval(this.timer_id);

						break;
				}
				// 更新时分秒
				this.spiner = second_to_date(second);
			},

			// 剩余库存文案
			filter_only_left(count = 0) {
				return '剩余：' + count;
			}
		},

		watch: {
			// 监听是否加载远端数据，有的话重新执行倒计时
			remote_data_loaded(tof) {
				// 变更ID执行获取数据
				tof && this.init();
			},
			start_time() {
				this.init();
			},
			end_time() {
				this.init();
			},
			// 监听商品列表是否有变化
			goods_list() {
				debugger
				// this.$store.dispatch('global/async_goods_init_2', this);
			},
		},

		mounted() {
			// 初始化
			this.remote_data_loaded && this.init();

			this.$emit('loaded');
			// 页面元素初始化
			// this.$store.dispatch('global/async_goods_init_2', this);

			// 绑定滚动时间，兼容图片懒加载在水平滚动下无效
			// $(`.component-${this.id} .goods-list`).on('scroll', () => {
			//     const images = $(this.$el).find('img.js_gdexp_lazy');
			//     this.$store.dispatch('global/lazyload_img_by_dom', images);
			// });
		}
	};
</script>
<style lang="less" scoped>
	// 默认
	.component-wrapper {
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: center;
		width: 375px;

		.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;
			}
		}

		// 倒计时的
		.geshop-m-timer {
			width: 100%;
			padding: 24 / 75rem 0;
			text-align: center;

			.geshop-m-timer-title {
				display: inline-block;
				font-size: 40 / 75rem;
				line-height: 54 / 75rem;
				height: 54 / 75rem;
			}

			.geshop-m-timer-right {
				font-size: 32 / 75rem;
			}

			span.timer-text {
				margin-right: 12 / 75rem;
			}

			span.timer-spiner {
				display: inline-block;
				height: 36 / 75rem;
				line-height: 36 / 75rem;
				padding: 0 5 / 75rem;
				text-align: center;
				font-size: 24 / 75rem;
				border-radius: 6 / 75rem;
			}
		}

		// 列表
		.goods-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
			padding: 20rpx;
			padding-bottom: 20rpx;

			.li {
				position: relative;
				flex-shrink: 0;
				width: 44%;
				overflow: hidden;
				padding: 20rpx;
				margin-top: 10rpx;
				background-color: #ffffff;
			}

			// 商品详情
			.item-info {
				padding-top: 10px;
				padding-bottom: 10px;
			}

			// 销售及市场价
			.item-shop-market {
				width: 100%;
			}

			.item-shop-market .item-shop {
				display: flex;
				flex-flow: row wrap;
				color: #333333;
				line-height: 24/37.5rem;
				align-items: baseline;
				padding-top: 10px;
				padding-bottom: 10px;

				.shop-price {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.item-market {
				height: 30rpx;
				line-height: 30rpx;
			}

			// 售空
			.item-soldout {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 160 / 75rem;
				height: 160 / 75rem;
				border-radius: 100%;
				background-color: #000000;
				opacity: 0.4;
				z-index: 1;
				margin-left: -80 / 75rem;
				margin-top: -80 / 75rem;
				display: flex;
				justify-content: center;
				align-items: center;

				>span {
					display: block;
					text-align: center;
					font-size: 28 / 75rem;
					color: #ffffff;
					width: 80%;
					text-align: center;
					word-break: break-all;
					line-height: 1em;
				}
			}

			// 促销
			.item-promotions {
				position: relative;
				height: 24/75rem;
				line-height: 24/75rem;
				overflow: hidden;
				margin-top: 6/75rem;
				margin-bottom: 24/75rem;
				font-size: 24/75rem;

				.gs-off-text {
					.special {
						font-weight: 700;
						font-family: OpenSans-Bold, arial, serif;
					}
				}

				.sjx {
					position: absolute;
					right: 0;
					top: 0;
					width: 28/75rem;
					height: 28/75rem;
				}

				.icon-downs {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 购买按钮
		.geshop-button-buynow {
			text-align: center;
			margin-top: 20rpx;
			width: 100%;
			font-size: 28rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0px;
		}
	}
</style>