积分抵扣、霸王餐、优惠券分享新增

pagesPoints/exchangeRecord/index.vue

@@ -0,0 +1,199 @@
+<template>
+	<view class="container">
+		<view class="list">
+			<view class="listItem " v-for="(item,index) in list" :key="index">
+				<view class="head">
+					<view class="time">兑换时间{{item.createTime}}</view>
+					<!-- unpaid-待支付 waiting-待自取 done-已完成 cancel-已取消 -->
+					<view class="status">{{ 
+						item.status == 'unpaid' ? '待支付' : 
+						item.status == 'waiting' ? '待自取' :
+						item.status == 'done' ? '已完成' :
+						item.status == 'cancel' ? '已取消' : ""
+						}}</view>
+				</view>
+				<view class="content">
+					<image class="thumbnail" :src="item.goodsImageUrl" mode="aspectFill" />
+					<view class="info">
+						<view class="title">{{item.pointsGoodsName}}</view>
+						<view class="numAll">
+							<view class="points">{{item.spendPoints}}积分</view>
+							<view class="num">X1</view>
+						</view>
+					</view>
+				</view>
+				<view class="bom">
+					<view class="detail" @click="goDetail(item)">查看详情</view>
+				</view>
+			</view>
+		</view>
+		<image 
+			v-if="list.length <= 0 "
+			style="width: 402rpx;height: 442rpx;margin:240rpx auto 32rpx;" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png"
+			mode="aspectFill" 
+			/>
+		<u-loadmore :status="status" fontSize="28" color="#999" iconSize="28" />
+	</view>
+</template>
+
+<script>
+	
+	
+	export default {
+		data() {
+			return {
+				query: {
+					page: 1,
+					size: 10,
+				},
+				list: [],
+				shopId: null,
+				shopUserInfo: uni.cache.get('shopUserInfo'),
+				status: "nomore" //  loadmore  nomore  loading
+			};
+		},
+		onLoad(options) {
+			if ( options.shopId ) {
+				this.shopId = options.shopId;
+			}
+		},
+		onShow() {
+			this.getExchangeRecordList();
+		},
+		onReachBottom() {
+			this.getExchangeRecordList()
+		},
+	
+		methods: { 
+			/**
+			 * 获取兑换记录
+			 */
+			async getExchangeRecordList() {
+				let res = await  this.api.exchangeRecordList({
+					shopId: this.shopId,
+					memberId: this.shopUserInfo.id,
+					...this.query
+				})
+				if ( res.code == 0) {
+					if (res.data.pages < this.query.page) {
+						this.status = 'nomore'
+						if (this.query.page == 1 && res.data.list.length == 0) {
+							this.list = []
+							this.is_end = true
+						}
+						return false;
+					} else {
+						this.status = 'loading';
+						if (this.query.page == 1) {
+							this.list = res.data.list
+						} else {
+							this.list = [...this.list, ...res.data.list];
+						}
+						this.query.page = ++this.query.page;
+						if (this.query.page > res.data.pages) {
+							this.status = 'nomore';
+						} else {
+							this.status = 'loading';
+						}
+					
+					}
+				}
+				
+			},
+			
+			/**
+			 * 查看详情
+			 */
+			goDetail(item) {
+				uni.navigateTo({
+					url: `/pagesPoints/exchangeRecordDetail/index?shopId=${this.shopId}&orderInfo=${JSON.stringify(item)}`,
+				})
+			}
+			
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	.container{
+	}
+	.list{
+		// background: #FFFFFF;
+		// border-radius: 0rpx 0rpx 0rpx 0rpx;
+		padding: 32rpx 20rpx;
+		.listItem{
+			display: flex;
+			flex-direction: column;
+			padding: 32rpx 24rpx;
+			border-bottom: 1rpx solid #E5E5E5;
+			margin-bottom: 32rpx;
+			.head{
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				.time{
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #666666;
+				}
+				.status{
+					font-weight: 500;
+					font-size: 28rpx;
+					color: #333333;
+				}
+			}
+			.content{
+				display: flex;
+				margin-top: 32rpx;
+				.thumbnail{
+					width: 128rpx;
+					height: 128rpx;
+					border-radius: 10rpx;
+					margin-right: 16rpx;
+					flex-shrink: 0;
+				}
+				.info{
+					width: 100%;
+					display: flex;
+					flex-direction: column;
+					.title{
+						font-weight: bold;
+						font-size: 28rpx;
+						color: #333333;
+						margin-top: 5rpx;
+					}
+					.numAll{
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						font-weight: 500;
+						font-size: 24rpx;
+						margin-top: 32rpx;
+						.points{
+							color: #666;
+						}
+						.num{
+							color: #999;
+						}
+					}
+				}
+			}
+			.bom{
+				display: flex;
+				justify-content: flex-end;
+				margin-top: 32rpx;
+				.detail{
+					padding: 8rpx 16rpx;
+					background-color: #343030;
+					border-radius: 10rpx 10rpx 10rpx 10rpx;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #FFFFFF;
+				}
+			}
+		}
+		
+		
+	}
+	
+</style>