ec.uniapp-master/pages/point/exchangeRecord/exchangeRecord.vue

<template>
	<view>
		<lf-nav title="兑换记录" :showIcon="true" bgColor="#fff"></lf-nav>
		<view class="head">
			<u-search placeholder="搜你想要的" v-model="value" @custom="customClick"></u-search>
		</view>
		<view class="content">
			<view class="card" v-for="(item, index) in 2" :key="index">
				<view>
					<text class="lf-iconfont icon-Group- lf-font-30"></text>
					<text class="shop-name">精品超市</text>
					<text class="lf-iconfont icon-xiangyou lf-font-24"></text>
				</view>
				<view class="lf-flex lf-m-t-20">
					<image class="goods-img"></image>
					<view class="info">
						<view class="lf-font-26 lf-color-333 lf-line-2">爱他美较大婴儿配方奶粉较大配方奶粉较2段 </view>
						<view class="lf-row-between" style="line-height: 1;">
							<text class="lf-font-24 lf-color-777">1件；900g</text>
							<text class="lf-font-32 lf-color-primary lf-font-bold">385</text>
						</view>
					</view>
				</view>
				<view class="order-num">
					<text>兑换成功</text>
					<text style="color: #F63434;">删除订单</text>
				</view>
			</view>
		</view>
		<u-back-top :scrollTop="pageScrollTop"></u-back-top>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				value: ''
			}
		},
		onLoad(){
			
		},
		methods: {
			customClick(event){
				console.log(event)
			}
		}
	}
</script>

<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped="scoped">
	.head{
		padding: 30rpx 32rpx;
		background-color: #FFFFFF;
	}
	.content{
		padding: 30rpx 32rpx;
		.card{
			width: 686rpx;
			height: 323rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			&:nth-child(n+2){
				margin-top: 20rpx;
			}
			.shop-name{
				font-size: 28rpx;
				color: #222222;
				font-weight: bold;
				margin: 0 15rpx;
			}
			.goods-img{
				width: 130rpx;
				height: 130rpx;
				border-radius: 5rpx;
				margin-right: 15rpx;
				background-color: #EEEEEE;
			}
			.info{
				width: 480rpx;
				height: 130rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.order-num{
				font-size: 24rpx;
				color: #555555;
				display: flex;
				justify-content: space-between;
				margin-top: 28rpx;
			}
		}
	}
</style>