qidian/pages/zhuanzhenlist/zhuanzhenlist.vue

<template>
	<view class="head">
		<view @click="qiehuan(1)">
			<view :style="xzindex==1?'color: #fff;':''">转赠</view>
			<view :class="xzindex==1?'xz':''"></view>
		</view>
		<view @click="qiehuan(2)">
			<view :style="xzindex==2?'color: #fff;':''">受赠</view>
			<view :class="xzindex==2?'xz':''"></view>
		</view>
	</view>
	<scroll-view class="scv" scroll-y="true" @scrolltolower="jiazai" @scrolltoupper="init">
		<view class="max_box" v-if="list.length>0">
			<view v-for="item in list">
				<view>
					<view>订单号</view>
					<view>{{item.id}}</view>
				</view>
				<view>
					<image :src="item.surfacePlot"></image>
					<view>
						<view>{{item.collectionName}}</view>
						<view>
							<view>
								<image :src="item.writerAvatar"></image>
								<view>{{item.artistName}}</view>
							</view>
							<view>{{item.collectorNumber}}</view>
						</view>
						<view v-if="xzindex==1">转赠时间:{{item.createdTime}}</view>
						<view v-if="xzindex==2">受赠时间:{{item.createdTime}}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else style="color: #fff;text-align: center;">暂无数据</view>
	</scroll-view>
</template>

<script>
	import {mygift,Regifts} from '@/api/user.js'
	import {ref} from 'vue'
	export default {
		setup() {
			let xzindex=ref(1)
			let list=ref([])
			let pageNum=1
			function init(){
				pageNum=1
				if(xzindex.value==1){
					mygift({pageNum,pageSize:10}).then(res=>{
						console.log(res);
						list.value=res.rows
					})
				}else if(xzindex.value==2){
					Regifts({pageNum,pageSize:10}).then(res=>{
						console.log(res);
						list.value=res.rows
					})
				}
			}
			function jiazai(){
				pageNum++
				if(xzindex.value==1){
					mygift({pageNum,pageSize:10}).then(res=>{
						console.log(res);
						if(res.rows.length==0){
							pageNum--
							uni.showToast({
								title:'已经到底了',
								icon:'none'
							})
							return
						}
						res.rows.map(item=>{
							list.value.push(item)
						})
					})
				}else if(xzindex.value==2){
					Regifts({pageNum,pageSize:10}).then(res=>{
						console.log(res);
						if(res.rows.length==0){
							pageNum--
							uni.showToast({
								title:'已经到底了',
								icon:'none'
							})
							return
						}
						res.rows.map(item=>{
							list.value.push(item)
						})
					})
				}
			}
			init()
			function qiehuan(index){
				xzindex.value=index
				init()
			}
			return {
				jiazai,
				init,
				xzindex,
				qiehuan,
				list
			}
		}
	}
</script>

<style lang="scss">
	.scv{
		width: 100%;
		height: 91vh;
		padding: 20upx 0;
		box-sizing: border-box;
		.max_box{
			display: flex;
			flex-direction: column;
			align-items: center;
			>view{
				width: 686upx;
				// height: 362upx;
				background: #23262F;
				border-radius: 12upx;
				box-sizing: border-box;
				padding: 28upx 0;
				color: #fff;
				margin-top: 25upx;
				>view:nth-of-type(1){
					display: flex;
					align-items: center;
					font-size: 28upx;
					border-bottom:2upx solid #373737;
					padding-bottom: 30upx;
					padding-top: 10upx;
					padding-left: 28upx;
					>view:nth-of-type(1){
						margin-right: 20upx;
					}
				}
				>view:nth-of-type(2){
					display: flex;
					margin-top: 50upx;
					>image{
						width: 174upx;
						height: 174upx;
						margin-right: 26upx;
						margin-left: 28upx;
					}
					>view{
						flex: 1;
						padding-right: 50upx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						>view:nth-of-type(1){
							font-size: 32upx;
							font-weight: bold;
							color: #FFFFFF;
						}
						>view:nth-of-type(3){
							font-size: 24upx;
							font-weight: bold;
							color: #8D8C9F;
						}
						>view:nth-of-type(2){
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 28upx;
							margin-bottom: 26upx;
							>view{
								display: flex;
								align-items: center;
								font-size: 24upx;
								font-weight: bold;
								>image{
									width: 56upx;
									height: 56upx;
									border-radius: 50%;
									margin-right: 26upx;
								}
								>view{
									font-size: 28upx;
									font-weight: 400;
								}
							}
						}
					}
				}
			}
		}
	}
	.head{
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		font-size: 32upx;
		font-weight: 500;
		color: #8D8C9F;
		>view{
			display: flex;
			flex-direction: column;
			align-items: center;
			>view:nth-of-type(2){
				width: 64upx;
				height: 6upx;
				border-radius: 12upx;
				margin-top: 8upx;
			}
			.xz{
				background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%);
			}
		}
	}
</style>