mycajt/pages/gift/gift.vue

<template>
	<view class="hotgoods">
		<view class="item" v-for="item in list" :key="item.id" @click="nav(item.id)">
			<view class="item_left">
				<image :src="item.image" alt="" />
			</view>
			<view class="item_right">
				<div class="lienTwo">{{item.store_name}}</div>
				<div class="item_right_bottom">
					<p>
						<i>￥{{item.ot_price}}</i>
						<!-- <u-icon name="arrow-downward" class="icon"></u-icon> -->
						<!-- <b>直降{{item.ot_price - item.price}}元</b> -->
					</p>
					<span>
						<i>￥{{item.price}}</i>
							<!-- <div class="em">
								赠{{item.gain_award_integral}}积分
							</div> -->
					</span>
				</div>
			</view>
		</view> 
	</view>
</template>

<script>
import { groom6 } from "@/api/index.js";
import {uview} from 'uview-ui';
export default {
	data() {
		return {
			list: [],
		};
	},
	onLoad() {
		this.groom6();
	},
	methods: {
		// 获取列表数据
		async groom6() {
			try {
				this.res = await groom6()
				this.list = this.res.data.list
				// console.log('11111111', this.res)
				console.log('11111111', this.res.data.list)
			} catch (error) {
				console.log(error)
			}
			
		},
		nav(id) {
			uni.navigateTo({
				url: "/pages/product/product?id=" + id
			})
		}
	},
};
</script>
<!-- Dengxia -->
<style lang="scss">
.extend {
  transition: 0.2s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.15);
    cursor: pointer;
  }
}

h3 {
	font-weight: normal;
}

i,
em {
	font-style: normal;
}

b {
	font-weight: 400;
}

.hotgoods {
	font-family: PingFang SC;
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	padding: 31rpx 21rpx;

	.item {
		// @extend .extend;
		margin-bottom: 20rpx;
		width: 100%;
		height: 276rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
		// opacity: 0.53;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding: 15rpx;

		// justify-content: space-between;
		.item_left {
			margin-right: 10px;

			// margin-left: 15rpx;
			image {
				width: 236rpx;
				height: 236rpx;
			}
		}

		.item_right {
			height: 236rpx;
			display: flex;
			// 奇怪
			flex-direction: column;
			justify-content: space-between;
			min-width: 0;

			.lienTwo {
				word-break: break-all;
				font-size: 16px;
				color: #333333;
				font-weight: bold;
				width: 318rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden; //溢出内容隐藏
				text-overflow: ellipsis; //文本溢出部分用省略号表示
				display: -webkit-box; //特别显示模式
				-webkit-line-clamp: 2; //行数
				line-clamp: 2;
				-webkit-box-orient: vertical; //盒子中内容竖直排列
			}

			.item_right_bottom {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				p {
					display: inline-block;
					margin-bottom: 15rpx;

					i {
						color: #999999;
						margin-right: 15rpx;
						text-decoration: line-through
					}
						.icon{
							color: #b59467;
						}

					b {
						color: #B59467;
						margin-left: 15rpx;
					}
				}

				span {
					// display: inline-block;
					display: flex;
					// justify-content: center;
					align-items: center;
					i {
						color: #FF4C4C;
						font-size: 36rpx;
						margin-right: 10rpx;
					}

					.em {
						display: inline-block;
						width: 120rpx;
						height: 37rpx;
						background: linear-gradient(90deg, #FF834D, #FF2600);
						border-radius: 12rpx 0rpx 12rpx 0rpx;
						color: #FFFFFF;
						font-weight: 500;
						font-size: 10px;
						text-align: center;
						

					}
				}
			}
		}
	}
}
</style>