CommunityApp/pagesM/pages/discounts_goods.vue

<template>
	<view class="dt-page">
		<view v-if="emptyType==0" >
			<view v-for="item in dataList" class="goods-item" @tap="handleClick(item.id)">
				<image :src="item.thumbnail?item.thumbnail:''"  class="goods-img" mode="aspectFit"></image>
				<view class="goods-right">
					<view class="goods-name dt-text-row-two">
						{{item.name}}
					</view>
					<view v-if="item.coupon" class="goods-coupon">
						<text class="first">券</text>
						<text>{{item.coupon.amt}}</text>
					</view>
					<view class="goods-bottom">
						<view>
							<view class="goods-sum">
								<text>券后:</text>
								<text class="sum">{{item.couponLaterPrice}}</text>
							</view>
							<view class="gray-sum">¥ {{item.price}}</view>
						</view>
						<view class="bottom-right">
							<image src="http://139.9.103.171:1888/img/image/discounts_share.png" mode="aspectFit"></image>
							<view>赚:{{item.commissionAmt}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<DtNoMore v-if="isNoMore" />
		<DtEmpty :type="emptyType" />
	</view>
</template>

<script>
	import DtNoMore from "../comps/dt_no_more.vue";
	import DtEmpty from '../comps/dt_empty.vue'
	export default {
		components: {
			DtNoMore,
			DtEmpty
		},
		data() {
			return {
				memberId:'',
				dataList:[]
			};
		},
		
		methods:{
			onLoadPage() {
			  this.memberId = this.$auth.getMemberId();
			  this.getData()
			},
			async getData(){
				let resp = await this.$api.getDistributorCouponProducts({
					_isShowLoading: true,
					memberId:this.memberId,
					pageNo:this.pageIndex,
					pageSize:this.pageSize,
				})
				let list = this.getDataList(resp)
				this.dataList = this.dataList.concat(list)
			},
			
			handleClick(id){
				uni.navigateTo({
					url:"/pagesM/pages/goods_des?id="+id
				})
			}
		},
		onReachBottom() {
		  this.onReachBottomPage()
		}
	}
</script>

<style lang="scss" scoped>
	.dt-page{
		padding: 0 24upx;
		height: 100vh;
		.goods-item{
			background:#fff;
			border-radius:15upx;
			padding: 24upx;
			display: flex;
			margin-top: 20upx;
			.goods-img{
				width:170upx;
				height:170upx;
				background:#f7f7f7;
				border-radius:10upx;
				display: block;
			}
			.goods-right{
					flex:1;
					margin-left: 24upx;
				.goods-name{
					height:80upx;
					font-size:30upx;
					color:rgba(51,51,51,1);
				}
				.goods-coupon{
					height:30upx;
					line-height: 30upx;
					border:1px solid rgba(232,46,46,1);
					border-radius:5upx;
					margin-top:15upx;
					margin-bottom: 30upx;
					display: inline-block;
					text{
						font-size:24upx;
						text-align: center;
						color:rgba(232,46,46,1);
						padding:0 5upx;
						float: left;
					}
					.first{
						background-color: rgba(232,46,46,1);
						color: #fff;
						height: 30upx;
						display: block;
						float: left;
					}
				}
				.goods-bottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.goods-sum{
						height:30upx;
						font-size:24upx;
						color:rgba(232,46,46,1);
						text-align: end;
						.sum{
							font-size:32upx;
							font-weight: bold;
							margin-left: 10upx;
						}
					}
					.gray-sum{
						margin-top: 10upx;
						font-size:24upx;
						text-decoration:line-through;
						color:rgba(153,153,153,1);
					}
					.bottom-right{
						border-top-left-radius: 25px;
						border-bottom-left-radius: 25px;
						height:55upx;
						background:$dt-color-primary;
						padding: 0 24upx;
						display: flex;
						align-items: center;
						image{
							width: 28upx;
							height: 28upx;
							background-color: transparent;
							display: block;
						}
						view{
							margin-left: 17upx;
							font-size:24upx;
							color:rgba(255,255,255,1);
						}
					}
				}
			}
		}
	}
</style>