ydd_front/mer_uniapp/pages/activity/components/PointsGoods.vue

<template>
	<view class="flex pointsGoods" :style="[pointsGoodsStyle.boxStyle]">
		<view class="product-item " :style="[pointsGoodsStyle.imageBoxStyle]" v-for="(item, index) in integralGood" :key="index" @click="goGoodsDetail(item)">
			<view class="relative">
				<easy-loadimage
				:image-src="item.image"
				:width="pointsGoodsStyle._imageWidth"
				:height="pointsGoodsStyle._imageHeight"
				:radius="10"></easy-loadimage>
				<view v-show="item.stock===0" class="sellOut">已售罄</view>
			</view>
			<view class="info">
				<view class="title line1" :style="[pointsGoodsStyle.nameStyle]">{{ item.name }}</view>
				<view class="sales text-999 mt-8 mb-20" :style="[pointsGoodsStyle.salesStyle]">已有{{item.sales}}人兑换</view>
				<PointsPrice :pointsPrice="item" :pointsGoodsStyle="pointsGoodsStyle" v-model="isShowSamll"></PointsPrice>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goProductDetail
	} from "@/libs/order";
	import PointsPrice from '@/components/PointsPrice.vue';
	import easyLoadimage from '@/components/base/easy-loadimage.vue';
		export default {
			components: {
				easyLoadimage,
			    PointsPrice
			},
			props: {
				//积分商品列表
				integralGood: {
					type: Array,
					default: function() {
						return [];
					}
				},
				//商品大小样式
				pointsGoodsStyle: {
					type: Object,
					default: function() {
						return {};
					}
				},
				//视图宽
				width: {
					type: String,
					default: ''
				},
				marginRight: {
					type: String,
					default: ''
				},
				// 积分图标大小
				iconWidth: {
					type: String,
					default: ''
				},
				isShowSamll: {
					type: Boolean,
					default: false
				}
			},
			computed: {
				boxStyle() {
					return {
						width: this.width,
						marginRight: this.marginRight
					}
				},
				iconStyle() {
					return {
						width: this.iconWidth,
						height: this.iconWidth
					}
				}
			},
			data(){
				return {
					urlDomain: this.$Cache.get("imgHost"),
				}
			},
			methods: {
				goGoodsDetail(item){
					goProductDetail(item.id, 0, '',1)
				},
			}
		}
</script>

<style scoped lang="scss">
	.fs-22{
		margin-left: 4rpx;
	}
	.product-item {
		position: relative;
		background: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	
		.info {
			margin-top: 20rpx;
		}
	}
</style>