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

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

			<view class="card" style="padding-left: 0; padding-right: 10rpx;">
				<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(${sliderBgUrl}) 100% 100%`"
					:scrollable="false"
					@click="clickTabs"
				>
					<template v-slot:right>
            <suspendDropdown 
              v-model="queryParams.auditStatus"
              :options="auditStatusOptions"
							@change="onAuditStatusChange"
            ></suspendDropdown>
					</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 suspendDropdown from '@/components/base/suspendDropdown.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,
			suspendDropdown,
		},
		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', // 未通过
				},
				sliderBgUrl: 'https://thumbnail0.baidupcs.com/thumbnail/5128034cfj9ac619ca072da4706a6c90?fid=3983569511-250528-294545550145327&time=1742536800&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-iqtAvQatpPXXyCeN8GEAHhPMHEM%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=8764190582084176609&dp-callid=0&file_type=0&size=c850_u580&quality=100&vuk=-&ft=video'
			}
		},
		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()
			},
			onAuditStatusChange(auditStatus) {
				// todo

				// fetch list
			},
			//跳转分享详情页面
			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;
			}
			.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>