fission-star-applet-250304/pages/index/record.vue

<template>
	<view class="page">
		
		<navbar title="分享记录" />
		
		<view class="content">

			<view class="card" style="padding-left: 0;">
				<uv-tabs :list="tabs" 
					:inactiveStyle="{
						color: '#999999',
						fontSize: '30rpx',
						fontWeight: 500,
						whiteSpace: 'nowrap',
					}"
					:activeStyle="{
						color: '#1B1B1B',
						fontSize: '38rpx',
						fontWeight: 900,
						whiteSpace: 'nowrap',
					}"
					lineHeight="13rpx"
					lineWidth="77rpx"
					:lineColor="`url('../../static/image/record/slider.png') 100% 100%`"
					:scrollable="false"
					@click="clickTabs"
				>
					<template v-slot:right>
						<view>
							<uv-popup 
								ref="popup"
								:overlayOpacity="0"
								:customStyle="{
									backgroundColor: 'transparent',
									position: 'fixed',
									top: '300rpx',
									right: '20rpx'
								}"
							>
								<view class="card popup-options">
									<view 
										class="popup-option" 
										:class="{ 'is-active': item.value === queryParams.auditStatus }"
										v-for="item in auditStatusOptions" 
										:key="item.value"
										@click="onSelectAuditStatus(item.value)"
									>
										<text>{{ item.label }}</text>
									</view>
								</view>
							</uv-popup>
							<button class="btn-simple" plain @click="openPicker" >
								<image src="../../static/image/record/filter.png" style="width: 30rpx; height: 30rpx;"></image>
							</button>
						</view>
					</template>
				</uv-tabs>
			</view>
			
			<view v-if="recordList.records.length > 0" class="card list">
				<view class="list-item" 
					v-for="item in recordList.records" 
					@click="toSharingDetail(item.id)"
					:key="item.id"
				>
					// todo: video?
					<image class="left" :src="item.imageUrl"></image>
					<view class="right">
						<view class="title">{{ item.title }}</view>
						<view class="desc">{{ item.description }}</view>
						<view class="bottom">
							<text class="desc">{{ item.createTime }}</text>
							<button plain class="btn-simple btn-delete flex" @click="onDelete(item.id)">
								<image src="../../static/image/record/delete.png" style="width: 24rpx; height: 24rpx;"></image>
								<text style="margin-left: 10rpx;">删除</text>
							</button>
						</view>
		
						<view class="mark">
							<image 
								:src="auditStatusImgMapping[item.auditStatus]"
								style="width: 100rpx; height: 100rpx;"
							></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<tabber select="record"/>
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import { mapGetters } from 'vuex'

	const URL_MAPPING = { // state -> url
		'-1': '/pages_order/record/personalSharing',
		'0': '/pages_order/record/videoSharing',
		'1': '/pages_order/record/groupSharing',
		'2': '/pages_order/record/articleSharing',
	}

	export default {
		components : {
			tabber,
		},
		computed : {
			...mapGetters(['userShop']),
		},
		data() {
			return {
				tabs: [{
						name: '个人分享'
					},
					{
						name: '视频分享'
					},
					{
						name: '群分享'
					},
					{
						name: '文章分享'
					},
				],
				auditStatusOptions: [
					{
						label: '审核中',
						value: 0,
					},
					{
						label: '已通过',
						value: 1,
					},
					{
						label: '未通过',
						value: 2,
					},
				],
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					auditStatus: null,
				},
				recordList: {
					records: [
						{
							id: '001',
							imageUrl: '../../static/image/record/temp.png',
							times: 10,
							qrCode: null,
							title: '裂变星轻松获客',
							description: '如此好用的赚钱项目，赶快加入吧！',
							auditStatus: 0,
							createTime: '2025年2月1日',
						},
						{
							id: '002',
							imageUrl: '../../static/image/record/temp.png',
							times: 10,
							qrCode: null,
							title: '裂变星轻松获客',
							description: '如此好用的赚钱项目，赶快加入吧！',
							auditStatus: 1,
							createTime: '2025年2月1日',
						},
						{
							id: '003',
							imageUrl: '../../static/image/record/temp.png',
							times: 10,
							qrCode: null,
							title: '裂变星轻松获客',
							description: '如此好用的赚钱项目，赶快加入吧！',
							auditStatus: 2,
							createTime: '2025年2月1日',
						},
					]
				},
				// recordList : { // 列表数据
				// 	records : [],
				// 	total : 0,
				// },
				state : -1,
				auditStatusImgMapping: {
					0: '../../static/image/record/audit.png', // 审核中
					1: '../../static/image/record/pass.png', // 已通过
					2: '../../static/image/record/fail.png', // 未通过
				}
			}
		},
		onShow() {
			this.orderPage()
		},
		//滚动到屏幕底部
		onReachBottom() {
			if(this.queryParams.pageSize < this.recordList.total){
				this.queryParams.pageSize += 10
				this.orderPage()
			}
		},
		methods: {
			orderPage(){
				// todo
				return
				let queryParams = {
					...this.queryParams,
				}
				if(this.state != -1){
					queryParams.state = this.state
				}
				this.$api('orderPage', queryParams, res => {
					if(res.code == 200){
						this.recordList = res.result
					}
				})
			},
			//点击tab栏
			clickTabs(index) {
				if (index == 0) {
					this.state = -1;
				} else {
					this.state = index - 1;
				}
				this.queryParams.pageSize = 10
				this.orderPage()
			},
			openPicker() {
				this.$refs.popup.open();
			},
			onSelectAuditStatus(val) {
				const selected = this.queryParams.auditStatus
	
				this.queryParams.auditStatus = selected === val ? null : val
			},
			//跳转分享详情页面
			toSharingDetail(id) {
				uni.navigateTo({
					url: `${URL_MAPPING[this.state]}?id=${id}`
				})
			},
			onDelete(id) {
				// todo
			},
		}
	}
</script>

<style scoped lang="scss">
	.page{
	}

	.content {
		padding: 20rpx;
	}

	.list {
		margin-top: 20rpx;
		padding: 40rpx 59rpx 40rpx 43rpx;

		&-item {
			font-size: 0;
			display: flex;

			& + & {
				margin-top: 40rpx;
			}

			.left {
				width: 220rpx; 
				height: 148rpx;
				background-color: yellow;
			}
			.right {
				flex: 1;
				width: calc(100% - 220rpx);
				padding-left: 20rpx;
				box-sizing: border-box;
				position: relative;
			}
		}

		.title {
			color: #1B1B1B;
			font-size: 28rpx;
		}

		.desc {
			color: #999999;
			font-size: 24rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: left;
		}

		.title + .desc {
			margin-top: 18rpx;
		}

		.bottom {
			position: absolute;
			bottom: 0;
			width: calc(100% - 20rpx);
		}

		.btn-delete {
			float: right;
			color: #05D9A2;
			font-size: 20rpx;
		}

		.mark {
			position: absolute;
			top: 10rpx;
			right: 5rpx;
		}
	}

	.popup {
		&-options {
			box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
			padding: 16rpx 40rpx;
		}

		&-option {
			color: #999999;
			font-size: 28rpx;

			&.is-active {
				color: #1B1B1B;
				font-weight: 700;
			}

			& + & {
				margin-top: 16rpx;
			}
		}
	}
</style>