rt_fhyx_user_miniapp/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.imgUrl" mode="aspectFill" style="height: 100%;width: 100%"></image>
					<!-- <view class="goodsitem-status">讲解中</view> -->
				</view>
				<view class="goodsitem-r">
					<view>
						<view class="goodsitem-title" :style="{ fontSize: fontSize(32)}">{{item.packageName}}</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.totalPrice&&item.totalPrice.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>
	export default {
		props:['treatmentPackage','urlOption'],
		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: {
			goBuy(item) {
				if(getApp().globalData.appId == 'wxc3f0a952b7bc2b94') {
					uni.navigateTo({
						url: '/pages_index/packageDetails?packageId='+item.packageId+'&companyId='+this.urlOption.companyId+ '&companyUserId='+this.urlOption.companyUserId,
					})
				} else {
					uni.navigateToMiniProgram({
					  appId: 'wxc3f0a952b7bc2b94',
					  path: '/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: hidden;
		min-height: 200rpx;
		&-img {
			overflow: hidden;
			flex-shrink: 0;
			width: 200rpx;
			height: 200rpx;
			border-radius: 14rpx;
			position: relative;
		}
		&-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>