baiyuApp/pages_course/components/goodsList.vue

<template>
	<view>
		<view v-for="(item,index) in treatmentPackage" :key="index">
			<view class="goodsitem">
				<view class="goodsitem-img">
					<image :src="item.images" mode="aspectFill" style="height: 100%;width: 100%"></image>
					<view class="goodsitem-hot" v-if="hasHotSaleTag(item) && getHotCount(item) > 0">
						<image style="height: 56rpx;" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/remai.png" mode="heightFix"></image>
						<text class="goodsitem-hot-count">{{ getHotCount(item) }}</text>
					</view>
					<!-- <view class="goodsitem-status">讲解中</view> -->
				</view>
				<view class="goodsitem-r">
					<view>
						<view class="goodsitem-title" :style="{ fontSize: fontSize(32)}">{{item.productName}}</view>
						<view class="goodsitem-desc ellipsis2" :style="{ fontSize: fontSize(30)}">{{item.secondName}}</view>
					</view>
					<view class="goodsitem-btnbox" @click="goBuy(item)">
						<view class="goodsitem-price">
							<view class="unit">￥</view>
							<text class="price">{{item.price&&item.price.toFixed(2)}}</text>
						</view>
						<view class="btn">去购买</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="treatmentPackage.length==0">
			<view class="empty">
				<text>~暂无更多~</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getJumpStoreAppId } from "../api/courseAuto.js"
	import {loginByMiniApp} from "@/api/courseLook.js"
	import { hasHotSaleTag, getProductHotKey, clampHotSaleCount } from '../utils/productHotSale.js'
	export default {
		props: {
			treatmentPackage: {
				type: Array,
				default: () => [],
			},
			urlOption: [Object, String],
			source: String,
			hotCountMap: {
				type: Object,
				default: () => ({}),
			},
		},
		data() {
			return {
				list: [],
			}
		},
		computed: {
			fontSize() {
				return size=>{
					const value = uni.upx2px(size)
					const scale = uni.getStorageSync('fontScale') || 1;
					if(scale<1){
						return value + 'px';
					}else {
						return value * scale + 'px';
					}
				}
			}
		},
		methods: {
			hasHotSaleTag(item) {
				return hasHotSaleTag(item)
			},
			getHotCount(item) {
				if (!hasHotSaleTag(item)) return 0
				const key = getProductHotKey(item)
				return key ? clampHotSaleCount(this.hotCountMap[key]) : 0
			},
			goBuy(item) {
				//let data = uni.getStorageSync('urlInfo')
				uni.navigateTo({
					url: '/pages/shopping/productDetails?productId='+item.productId+'&companyId='+this.urlOption.companyId+ '&companyUserId='+this.urlOption.companyUserId+'&courseId='+this.urlOption.courseId+'&videoId='+this.urlOption.videoId
					+'&projectId='+(this.urlOption.projectId || '')+'&periodId='+ (this.urlOption.periodId || '')
				})
			},
			goBuy2(item) {
				if(item.type==3) {
					// 跳转商城
					const param = {
						type: item.type
					}
					getJumpStoreAppId(param,this.source).then(res=>{
						if(res.code==200) {
							if(getApp().globalData.appId == res.msg) {
								uni.navigateTo({
									url: '/pages/shopping/productDetails?productId='+item.packageId+'&companyId='+this.urlOption.companyId+ '&companyUserId='+this.urlOption.companyUserId
								})
							} else {
								uni.navigateToMiniProgram({
								  appId: res.msg,
								  path: '/pages/shopping/productDetails?productId='+item.packageId+'&companyId='+this.urlOption.companyId+ '&companyUserId='+this.urlOption.companyUserId
								})
							}
						}
					})
				} else  {
						uni.navigateTo({
							url: '/pages_index/packageDetails?packageId='+item.packageId+'&companyId='+this.urlOption.companyId+ '&companyUserId='+this.urlOption.companyUserId
						})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.empty {
		padding: 40rpx 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999;
		&-btn {
			margin-top: 24rpx;
			padding: 20rpx 60rpx;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			border: 2rpx solid #FF5C03;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FF5C03;
		}
	}
	.empty-btn-min {
		flex-direction: column;
		padding: 8rpx 15rpx !important;
		font-size: 28rpx !important;
	}
	.goodsitem {
		display: flex;
		padding: 24rpx;
		overflow: visible;
		min-height: 200rpx;
		&-img {
			overflow: visible;
			flex-shrink: 0;
			width: 200rpx;
			height: 200rpx;
			border-radius: 14rpx;
			position: relative;

			image {
				border-radius: 14rpx;
				overflow: hidden;
			}
		}

		&-hot {
			position: absolute;
			top:0;
			left:-20rpx;
			z-index: 2;
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 40rpx;
		}

		&-hot-flame {
			font-size: 22rpx;
			line-height: 1;
			margin-right: 4rpx;
		}

		&-hot-label {
			font-size: 22rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 40rpx;
		}

		&-hot-count {
			position: absolute;
			left:130rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 56rpx;
			text-align: justify;
		}
		&-status {
			position: absolute;
			left: 0;
			top: 0;
			padding: 8rpx 15rpx;
			background: #FF5C03;
			border-radius: 14rpx 0 14rpx 0;
			font-size: 20rpx;
			color: #fff;
			box-sizing: border-box;
			text-align: center;
		}
		&-r {
			flex: 1;
			overflow: hidden;
			margin-left: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		&-title {
			font-weight: bold;
			// font-size: 32rpx;
			color: #191A1B;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}
		&-desc {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			// font-size: 30rpx;
			color: #939599;
			margin-top: 20rpx;
		}
		&-btnbox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn {
				display: inline-block;
				padding: 10rpx 38rpx;
				border-radius: 12rpx;
				border: 3rpx solid #FF5C03;
				font-weight: bold;
				// font-size: 30rpx;
				color: #FF5C03;
				text-align: center;
			}
		}
		.unit {
			font-size: 32rpx;
		}
		&-price {
			font-family: Roboto, Roboto;
			font-weight: bold;
			font-size: 40rpx;
			color: #FF5C03;
			display: flex;
			align-items: flex-end;
		}
	}
</style>