qjd-shell-uniapp/pagesGood/goodItem.vue

<template>
	<view class="good-row">
		<view class="good-check" v-if="manageType">
			<view class="iconfont" :class="goodData.check ? 'iconqueding' : 'iconfeigouxuan'" @click="checkGood()"></view>
		</view>
		<view class="good-card" :style="{width: manageType ? 'calc(100% - 60px)' : ''}" @click="goToGoodDetail()">
			<image class="goods-img" mode="aspectFill" :src="goodData.imgPath"></image>
			<view class="good-info">
				<view class="good-type">{{goodData.productType == 1 ? '普通商品' : (goodData.productType == 2 ? '拍卖商品' : '自助采摘')}}</view>
				<view class="good-name">{{goodData.productName}}</view>
				<view class="good-price">
					<text class="goods-spec">￥{{goodData.productType == 2 ? goodData.auctionStartPrice : goodData.bizPrice}}/{{goodData.unit}}</text>
					<text class="goods-original">原价:{{goodData.originalPrice}}</text>
				</view>
				<view class="good-text">库存：{{goodData.stock}}&nbsp;&nbsp;&nbsp;&nbsp;销量：{{goodData.sellCount}}</view>
				<view class="good-text">上架时间：{{goodData.onShelfTime}}</view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		props: {
			manageType: {
				default: false
			},
			check: {
				default: false
			},
			goodData: {
				default: {
					id: '',
					imgPath: '',
					productName: '',
					productType: 0,
					bizPrice: 0,
					unit: '',
					originalPrice: 0,
					stock: 0,
					sellCount: 0,
					onShelfTime: '',
					check: false,
				}
			},
		},
		data() {
			return {}
		},
		onLoad() {},
		methods: {
			//  勾选商品
			checkGood() {
				this.$emit('update:check', !this.check)
			},
			//  商品详情
			goToGoodDetail() {
				uni.navigateTo({
					url: '/pagesGood/goodForm?type=detail&formType=' + this.goodData.productType + '&goodId=' + this.goodData.id
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.good-row {
		width: 100%;
		float: left;

		.good-check {
			width: 30px;
			height: 104px;
			float: left;
			line-height: 104px;

			.iconfont {
				font-size: 40px;
				text-align: right;
				color: #51A539;
			}
		}

		.good-card {
			width: calc(100% - 30px);
			float: left;
			margin: 0 15px 10px 15px;
			background: #FFFFFF;
			border-radius: 15px;
			box-shadow: 0px 1px 5px 0px rgba(102, 102, 102, 0.43);
			padding: 12px;
			box-sizing: border-box;

			.goods-img {
				width: 80px;
				height: 80px;
				float: left;
				border-radius: 10px;
				object-fit: cover;
			}

			.good-info {
				width: calc(100% - 86px);
				height: 80px;
				float: right;

				.good-type {
					width: 70px;
					height: 20px;
					float: left;
					margin-right: 6px;
					background: #56B03D;
					border-radius: 4px;
					font-size: 12px;
					font-family: PingFang SC;
					color: #FFFFFF;
					line-height: 20px;
					text-align: center;
				}

				.good-name {
					width: calc(100% - 76px);
					height: 20px;
					float: left;
					font-size: 15px;
					font-family: PingFang SC;
					color: #333333;
					line-height: 20px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			.good-price {
				width: 100%;
				height: 20px;
				float: left;
				line-height: 20px;
				font-family: PingFang SC;
				white-space: nowrap;
				margin: 3px 0 3px 0;

				.goods-spec {
					font-size: 15px;
					color: #52A63A;
					margin-right: 6px;
				}

				.goods-original {
					font-size: 12px;
					text-decoration: line-through;
					color: #A67954;
				}
			}

			.good-text {
				width: 100%;
				height: 16px;
				float: left;
				font-size: 12px;
				font-family: PingFang SC;
				color: #999999;
				line-height: 16px;
			}
		}
	}

	.good-row:first-child {
		margin-top: 10px;
	}
</style>