shop_h5/pages/vip/other/report.vue

<template>
	<view class="pageBox">
		<view class="sticky">
			<scroll-view class="jcbox" :scroll-x="true" :scroll-left="scrollLeft" :scroll-with-animation="true">
				<view class="row" v-for="(it, i) in reportList" :key="it.id" :class="reportIndex == i ? 'on' : ''" @click="handleReport(it, i)">
					<view class="tit">
						<view class="label">{{check_name}}</view>
						<view class="tim">{{it.check_time.substring(0, 10)}}</view>
					</view>
					<view class="desc ellipsis2">{{it.title}}</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="content">
			<view class="desc">{{curReport.title}}</view>
			<view class="imgBox" v-if="imgList.length">
				<image v-for="it in imgList" :key="it.id" :src="it.url" mode="widthFix" class="img"></image>
			</view>
		</view>
		
		<button class="share flex3" open-type="share">
			<text class="iconfont icon-share"></text>
		</button>
		
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	
	export default {
		setup() {
			const data = reactive({
				bgColor: uni.getStorageSync('bgColor'),
				Color: uni.getStorageSync('theme_color'),
				reportList: [],
				id: 0,
				curReport: {},
				reportIndex: 0,
				scrollLeft: 0,
				scrollRight: 0,
				check_name: '',
				imgList: [],
				groupInfo: {},
				group_goods: {}
			})
			
			async function getGroupInfo() {
				await get(`/api/v1/goods/group/detail/${data.id}`).then((res) => {
					data.groupInfo = res.data
					if(res.data.group_goods && res.data.group_goods.length) {
						res.data.group_goods.forEach((it) => {
							data.group_goods[it.goods_id] = it.title
						})
					}
					data.check_name = res.data.shop && res.data.shop.extendInfo && res.data.shop.extendInfo.check_report_name
				})
			}
			
			function getCheckReports() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				get('/api/v1/groupGoods/checkReports', { shopGroupGoodsId: data.id }).then((res) => {
					if(res.data.length) {
						data.reportList = res.data
						
						data.scrollLeft = data.reportIndex <= 0 ? 0 : data.reportIndex * 241 - 60
						data.curReport = data.reportList[data.reportIndex]
						data.imgList = data.curReport.content ? JSON.parse(data.curReport.content) : []
					}
					uni.hideLoading()
				})
			}
			
			function handleReport(it, i) {
				data.reportIndex = i
				data.curReport = it
				data.imgList = data.curReport.content ? JSON.parse(data.curReport.content) : []
				data.scrollLeft = data.reportIndex <= 0 ? 0 : data.reportIndex * 241 - 60
			}
			
			return {
				...toRefs(data),
				getCheckReports,
				handleReport,
				getGroupInfo
			}
		},
		async onLoad(options) {
			await this.$onLaunched
			wx.hideShareMenu()
			this.id = options.id
			this.reportIndex = (options.index || 0) * 1
			await this.getGroupInfo()
			this.getCheckReports()
		},
		onShareAppMessage(res) {
			this.showShareSwiper = false
			return new Promise((resolve, reject) => {
				wx.showLoading({
					title: '正在分享...',
					icon: 'none'
				})
				get('/api/v1/groupGoods/checkReportShare', { checkReportId: this.curReport.id }).then((res0) => {
					let face_img = res0.image
					wx.hideLoading()
					resolve({
						title: this.group_goods[this.curReport.goods_id],
						imageUrl: face_img,
						path: 'pages/vip/other/report?id=' + this.id + '&index=' + this.reportIndex
					})
				})
			})
		}
	}
</script>

<style lang="scss" scoped>
	.sticky{
		position: sticky;
		top: 0;
		background: linear-gradient(to bottom , v-bind('bgColor'), v-bind('bgColor') 82%, #fff 100%);
	}
	.pageBox{
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		.jcbox{
			display: flex;
			white-space: nowrap;
			padding-top: 24rpx;
			.row{
				padding: 24rpx;
				border-radius: 10rpx;
				background-color: #fff;
				width: 200px;
				display: inline-block;
				margin: 0 0 30rpx 30rpx;
				border: 1px solid #fff;
				white-space: normal;
				vertical-align: top;
				&:last-child{
					margin-right: 30rpx;
				}
				&.on{
					border: 1px solid v-bind('Color');
				}
				.tit{
					color: #555;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					.label{
						background: v-bind('Color');
						color: #fff;
						margin-right: 16rpx;
						padding: 10rpx 16rpx;
						border-radius: 8rpx;
						font-size: 24rpx;
					}
				}
				.desc{
					margin-top: 16rpx;
					font-size: 26rpx;
					color: #999;
				}
			}
		}
	}
	.content{
		padding: 24rpx;
		.desc{
			font-size: 28rpx;
			line-height: 40rpx;
			margin-bottom: 24rpx;
		}
		.imgBox{
			.img{
				width: 100%;
				display: block;
				margin: 0 auto;
			}
		}
	}
	.share{
		position: fixed;
		bottom: 15%;
		right: 24rpx;
		background: #fff;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
		z-index: 101;
		text{
			font-size: 20px;
		}
	}
</style>