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" 
					@click="clickTabs"
					: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"
				>
					<template v-slot:right>
            <suspendDropdown 
              v-model="status"
              :options="auditStatusOptions"
							@change="onAuditStatusChange"
            ></suspendDropdown>
					</template>
				</uv-tabs>
			</view>
			
			<view v-if="list.length" class="card list">
				<view class="list-item" 
					v-for="item in list" 
					@click="toSharingDetail(item.id)"
					:key="item.id"
				>
					<!-- todo: video? -->
					<image class="left" :src="item.indexImage || item.headImage"></image>
					<view class="right">
						<view class="title">{{ item.headTitle || '' }}</view>
						<view class="desc">{{ item.textDetails || '' }}</view>
						<view class="bottom">
							<text class="desc">{{ item.createTime || '' }}</text>
							<button plain class="btn-simple btn-delete flex" @click.stop="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.status]"
								style="width: 100rpx; height: 100rpx;"
							></image>
						</view>
					</view>
				</view>
			</view>

			<!-- todo: empty -->
		</view>
		
		<tabber select="record"/>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import mixinsList from '@/mixins/list.js'

	import tabber from '@/components/base/tabbar.vue'
  import suspendDropdown from '@/components/base/suspendDropdown.vue'

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

	export default {
		mixins : [mixinsList],
		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,
					state: 0,
				},
				status: null,
				recordList : { // 列表数据
					records : [],
					total : 0,
				},
				auditStatusImgMapping: {
					0: '../../static/image/record/audit.png', // 审核中
					1: '../../static/image/record/pass.png', // 已通过
					2: '../../static/image/record/fail.png', // 未通过
				},
				// todo
				sliderBgUrl: '',
				mixinsListApi : 'getSharePage',
			}
		},
		methods: {
			//点击tab栏
			clickTabs(e) {
				this.queryParams.state = e.index
				this.queryParams.pageNo = 1
				this.queryParams.pageSize = 10
				this.getData()
			},
			onAuditStatusChange(status) {
				this.status = status
				this.queryParams.pageNo = 1
				this.queryParams.pageSize = 10

				if (status === null) {
					delete this.queryParams.status
				} else {
					this.queryParams.status = status
				}
				
				this.getData()
			},
			//跳转分享详情页面
			toSharingDetail(id) {
				uni.navigateTo({
					url: `${URL_MAPPING[this.queryParams.state]}?id=${id}`
				})
			},
			onDelete(id) {
				uni.showModal({
					title: '确认删除该分享吗',
					success: async (r) => {
						if(r.confirm){
							await this.$fetch('deleteLog', { id, state: this.queryParams.state })
							this.getData()
						}
					}
				})
			},
		}
	}
</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;
			overflow: hidden;
			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>