dev/dcp-app-gate/pages/profile/personIntegrate/myPayList.vue

<template>
	<view>
		<view>
			<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
				:background="background" title-width="300" :title="i18n('myPayListDetail')"></u-navbar>
		</view>
		<view class="ui-title">
			<view class="u-demo-area" v-if="$i18n.locale=='zh'">
				<u-tabs bg-color="#fafafa" :bold="bold" :active-color="activeColor" :list="list" @change="change"
					:current="current" :is-scroll="isScroll" :offset="offset" :bar-width='90'></u-tabs>
			</view>
			<view class="u-demo-area" v-if="$i18n.locale=='en'">
				<u-tabs bg-color="#fafafa" :bold="bold" :active-color="activeColor" :list="list1" @change="change"
					:current="current" :is-scroll="isScroll" :offset="offset" :bar-width='180'></u-tabs>
			</view>
			<!-- <uni-section>
				<view class="ui-btn" v-if="$i18n.locale=='zh'">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" class="ui-pay-btn" />
				</view>
				<view class="ui-btn-en" v-if="$i18n.locale=='en'">
					<uni-segmented-control :current="current" :values="itemsList" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>

			</uni-section> -->
			<view class="content">
				<view v-if="current === 0" class="content-text">
					<view class="user-list" v-for="(orderList,index) in orderInfo" :key='index'
						@tap="toOrderDetail(orderList.id)">
						<view class="content-time">
							<view class="time-day">{{orderList.createDate|time('YYYY-MM-DD HH:mm:ss')}}</view>

						</view>
						<view class="list-info">
							<view class="list-pic">
								<image :src="websiteUrl + orderList.picture" class='pic-right'></image>
							</view>
							<view class="list-detail">
								<view class="list-title" v-if="$i18n.locale=='zh'">{{orderList.commodityName}}</view>
								<view class="list-title" v-if="$i18n.locale=='en'">{{orderList.commodityNameEn}}</view>
								<view class="list-time">
									{{$i18n.locale=='zh'?'有效期至' :'Date of expiry'}}：{{orderList.createDate|time('YYYY-MM-DD')}}
								</view>
								<view class="list-order">
									<view class="list-pay">
										{{orderList.point}}{{$i18n.locale=='zh'?'积分' :'intetral'}}
									</view>

								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="status" :contentText="contentText" v-show="this.total>10"></uni-load-more>
				</view>
				<view v-if="current === 1" class="content-text">
					<view class="user-list" v-for="(shopList,index) in orderInfo" :key='index'
						@tap="toOrderDetail(shopList.id)">
						<view v-if="shopList.orderStatus==0">
							<view class="content-time">
								<view class="time-day">{{shopList.createDate|time('YYYY-MM-DD HH:mm:ss')}}</view>
							</view>
							<view class="list-info">
								<view class="list-pic">
									<image :src="websiteUrl + shopList.picture" class='pic-right'></image>
								</view>
								<view class="list-detail">
									<view class="list-title">{{shopList.commodityName}}</view>
									<view class="list-time">
										{{$i18n.locale=='zh'?'有效期至' :'Date of expiry'}}：{{shopList.createDate|time('YYYY-MM-DD')}}
									</view>
									<view class="list-order">
										<view class="list-pay">
											{{shopList.point}}{{$i18n.locale=='zh'?'积分' :'intetral'}}
										</view>

									</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="status" :contentText="contentText" v-show="this.total>10"></uni-load-more>
				</view>
				<view v-if="current === 2" class="content-text">
					<view class="user-list" v-for="(getList,index) in orderInfo" :key='index'
						@tap="toOrderDetail(getList.id)">
						<view v-show="getList.orderStatus==1">
							<view class="content-time">
								<view class="time-day">{{getList.createDate|time('YYYY-MM-DD')}}</view>

							</view>
							<view class="list-info">
								<view class="list-pic">
									<image :src="websiteUrl + getList.picture" class='pic-right'></image>
								</view>
								<view class="list-detail">
									<view class="list-title">{{getList.commodityName}}</view>
									<view class="list-time">
										{{$i18n.locale=='zh'?'有效期至' :'Date of expiry'}}：{{getList.createDate|time('YYYY-MM-DD')}}
									</view>
									<view class="list-order">
										<view class="list-pay">
											{{getList.point}}{{$i18n.locale=='zh'?'积分' :'intetral'}}
										</view>

									</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="status" :contentText="contentText" v-show="this.total>10"></uni-load-more>
				</view>
				<view v-if="current === 3" class="content-text">
					<view class="user-list" v-for="(speakList,index) in orderInfo" :key='index'
						@tap="toOrderDetail(speakList.id)">
						<view v-show="speakList.orderStatus==2">
							<view class="content-time">
								<view class="time-day">{{speakList.createDate|time('YYYY-MM-DD ')}}</view>

							</view>
							<view class="list-info">
								<view class="list-pic">
									<image :src="websiteUrl + speakList.picture" class='pic-right'></image>
								</view>
								<view class="list-detail">
									<view class="list-title">{{speakList.commodityName}}</view>
									<view class="list-time">
										{{$i18n.locale=='zh'?'有效期至' :'Date of expiry'}}：{{speakList.createDate|time('YYYY-MM-DD')}}
									</view>
									<view class="list-order">
										<view class="list-pay">
											{{speakList.point}}{{$i18n.locale=='zh'?'积分' :'intetral'}}
										</view>

									</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="status" :contentText="contentText" v-show="this.total>10"></uni-load-more>
				</view>
				<view v-if="current === 4" class="content-text">
					<view class="user-list" v-for="(outList,index) in orderInfo" :key='index'
						@tap="toOrderDetail(outList.id)">
						<view v-show="outList.orderStatus==3">
							<view class="content-time">
								<view class="time-day">{{outList.createDate|time('YYYY-MM-DD HH:mm:ss')}}</view>

							</view>
							<view class="list-info">
								<view class="list-pic">
									<image :src="websiteUrl + outList.picture" class='pic-right'></image>
								</view>
								<view class="list-detail">
									<view class="list-title">{{outList.commodityName}}</view>
									<view class="list-time">
										{{$i18n.locale=='zh'?'有效期至' :'Date of expiry'}}：{{outList.createDate|time('YYYY-MM-DD')}}
									</view>
									<view class="list-order">
										<view class="list-pay">
											{{outList.point}}{{$i18n.locale=='zh'?'积分' :'intetral'}}
										</view>

									</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="status" :contentText="contentText" v-show="this.total>10"></uni-load-more>
				</view>
				<view v-if="current === 5" class="content-text">
					<view class="user-list" v-for="(overList,index) in orderInfo" :key='index'
						@tap="toOrderDetail(overList.id)">
						<view v-show="overList.orderStatus==4">
							<view class="content-time">
								<view class="time-day">{{overList.createDate|time('YYYY-MM-DD')}}</view>

							</view>
							<view class="list-info">
								<view class="list-pic">
									<image :src="websiteUrl + overList.picture" class='pic-right'></image>
								</view>
								<view class="list-detail">
									<view class="list-title">{{overList.commodityName}}</view>
									<view class="list-time">
										{{$i18n.locale=='zh'?'有效期至' :'Date of expiry'}}：{{moment(overList.createDate).format('YYYY-MM-DD')}}
									</view>
									<view class="list-order">
										<view class="list-pay">
											{{overList.point}}{{$i18n.locale=='zh'?'积分' :'intetral'}}
										</view>

									</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="status" :contentText="contentText" v-show="this.total>10"></uni-load-more>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		components: {
			moment
		},
		data() {
			return {
				list1: [],
				data1: [{
					name: 'All the Orders',
				}, {
					name: 'Wait Deliver',
				}, {
					name: 'To Be Received'
				}, {
					name: 'To Be Commented'
				}, {
					name: 'Cancelled'
				}, {
					name: 'Completed'
				}, ],
				list: [],
				data: [{
					name: '全部',
				}, {
					name: '待发货',
				}, {
					name: '待收货'
				}, {
					name: '待评价'
				}, {
					name: '已取消'
				}, {
					name: '已完成'
				}, ],
				current: 0,
				sectionCurrent: 0,
				isScroll: true,
				tabCountIndex: 0,
				bold: true,
				control: true,
				offset: [5, -5],
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
				items: ['全部', '待发货', '待收货', '待评价', '已取消', '已完成 '],
				itemsList: [' All the Orders', 'Wait Deliver', 'To Be Received', 'To Be Comment', 'Has Cancelled',
					'Has Completed'
				],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				activeColor: '#007aff',
				styleType: 'button',
				orderInfo: {},
				pageSize: "10",
				pageNo: "1",
				total: null,
				status: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中...',
					contentnomore: '没有更多'
				}

			}
		},
		onShow() {
			this.findBasicInfo();
			if (this.$i18n.locale == 'en') {
				this.contentText = {
					contentdown: 'See more',
					contentrefresh: 'Loading...',
					contentnomore: 'No more'
				}
			}
		},
		onLoad() {
			this.list = this.data;
			this.list1 = this.data1;
		},
		filters: {
			twoDecimal(value) {
				return parseFloat(string(value)).toFixed(2);
			},
			time(data, type) {
				return moment(data).format(type);
			}
		},
		onReachBottom() {
			let allTotal = this.pageNo * this.pageSize
			if (allTotal < this.total) {
				console.log(this.total);
				//当前条数小于总条数 则增加请求页数
				this.status = 'loading';
				if (this.$i18n.locale == 'en') {
					this.contentText = {
						contentdown: 'See more',
						contentrefresh: 'Loading...',
						contentnomore: 'No more'
					}
				}
				this.pageSize++;
				this.getOrderList() //调用加载数据方法
			} else {
				this.status = 'noMore';
				if (this.$i18n.locale == 'en') {
					this.contentText = {
						contentdown: 'See more',
						contentrefresh: 'Loading...',
						contentnomore: 'No more'
					}
				}
				// console.log('已加载全部数据')
			}
		},
		onPullDownRefresh() {
			//调用获取数据方法
			this.getOrderList()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			change(index) {
				this.current = index;
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				this.getOrderList()
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			toOrderDetail(id) {
				uni.navigateTo({
					url: './orderListDetail?id=' + id
				})
			},
			async findBasicInfo() {
				const result = await this.$myRequest({
					url: '/uc/userCenter/findBasicInfo',
					data: {},
				});
				this.form = result.data;
				this.getOrderList()
			},
			async getOrderList() {
				const res = await this.$myRequest({
					url: '/uc/umsPointCommodityOrders/getMyOrderPage',
					data: {
						"pageSize": this.pageSize,
						"pageNo": this.pageNo,
						"userId": this.form.id,
					}
				});
				this.orderInfo = res.data.umsPointCommodityOrders
				this.total = res.data.page.totalCount
			}

		}
	}
</script>

<style lang="scss" scoped>
	.ui-btn {
		width: 100%;

		.ui-pay-btn {
			width: 100%;
			background-color: #FFF;
		}
	}

	.ui-btn-en {
		width: 100%;

		.ui-pay-btn {
			width: 100%;
		}

		/deep/ .segmented-control__text[data-v-064e9cd1] {
			width: 57px;
			height: 40px;
			line-height: 20px;
			font-size: 11px;
			white-space: break-word;
			text-align: center;
		}

		/deep/.segmented-control__item--button[data-v-064e9cd1] {
			border-style: solid;
			border-top-width: 1px;
			width: 57px !important;
			border-bottom-width: 1px;
			border-right-width: 1px;
			border-left-width: 0;
		}
	}

	.user-list {
		width: 94%;
		margin-left: 3%;
		margin-top: 20rpx;
		border-radius: 40rpx;
		background-color: #fff;

		.content-time {
			display: flex;
			width: 94%;
			height: 60rpx;
			margin-left: 3%;

			.time-day {
				width: 50%;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
				font-weight: 700;
				color: #00000080;
			}

		}

		.list-info {
			display: flex;
			justify-content: space-around;
			width: 94%;
			margin-left: 3%;

			.list-pic {
				width: 35%;
				height: 280rpx;

				.pic-right {
					width: 90%;
					height: 250rpx;
					margin-left: 5%;

				}
			}

			.list-detail {
				width: 62%;

				.list-title {
					font-size: 28rpx;
					margin-left: 10rpx;
					font-weight: 700;
					height: 50rpx;
					line-height: 50rpx;
				}

				.list-time {
					font-size: 24rpx;
					margin-left: 10rpx;
					height: 50rpx;
					line-height: 50rpx;
					color: #00000080;
				}

				.list-order {
					// display: flex;
					// justify-content: space-around;
					margin-top: 60rpx;

					.list-pay {
						font-size: 32rpx;
						color: red;
						margin-left: 10rpx;
						font-weight: 700;
						letter-spacing: 3rpx;
					}
				}
			}
		}
	}
</style>