shop_app/pages/share/index.vue

<template>
	<div class="box" style="padding-bottom: 30rpx;">
		<div class="head_box">
			<img :src="pageInfo.user && pageInfo.user.avatar" />
			<!-- <div style="font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;">{{pageInfo.user&&pageInfo.user.nickname}}</div> -->
		</div>
		<div class="center_text" v-if="showTit">我买了一些好东西，分享给你看看</div>
		<div class="imgs_box" v-for="(item, index1) in pageInfo.comments" :key="index1">
			<div class="center_text" v-if="item.status === 0 || isSale">{{item.comment}}</div>
			<div v-if="item.status === 0 || isSale">
				<div class="imgs" v-if="item.material.length">
					<div v-for="(list, index2) in item.material" :key="index2">
						<img :src="list.url" alt="" v-if="list.type===1" @click="hanleClick(list)">
						<img :src="list.img_video" alt="" v-if="list.type===2" @click="hanleClick(list)">
					</div>
				</div>
			</div>
			<view class="process" v-if="isSale">
				<view class="it" :class="item.status == 0 ? 'choose' : ''" @click="toExamine(item, 0)">审核通过</view>
				<view class="it" :class="item.status == 3 ? 'choose' : ''" @click="toExamine(item, 3)">审核不通过</view>
			</view>
		</div>
		
		<video-dialog :url="video" :show="show" @close="show = false"></video-dialog>
		
	</div>
	<div class="box" style="margin-top: 25rpx;padding: 48rpx 29rpx;">
		<div style="text-align: center;font-size: 30rpx;">TA已购买的商品</div>
		<div class="commodity" v-for="(list, index) in pageInfo.items" :key="index" @click="hanleJump(list)">
			<div class="left">
				<img :src="list.pic_url" />
			</div>
			<div class="right">
				<div class="name">{{list.goods_name}}<text v-if="list.sku_name">（{{list.sku_name}}）</text></div>
				<div class="span"><span>好友购买价:</span> <span class="red">￥{{list.price}}</span> </div>
			</div>
		</div>
	</div>
</template>

<script>
	import { get, post } from '@/api/request.js'
	import { ref, reactive, toRefs } from 'vue'
	import { login, showToast, userBind } from '@/components/common.js'
	import videoDialog from '@/components/videoDialog/index.vue'
	
	export default {
		components: {
			videoDialog
		},
		setup() {
			const data = reactive({
				id: '',
				sale_id: '',
				s: '',
				u: '',
				company_id: '',
				pageInfo: {},
				video: '',
				show: false,
				isSale: false,
				showTit: true,
				Color: ''
			})
			//点击查看图片
			const hanleClick = (e) => {
				var img = []
				if (e.type === 1) {
					img.push(e.url)
					uni.previewImage({
						current: e.url,
						urls: img,
					})
				} else {
					data.show = true
					data.video = e.url
				}
			}
			
			// 获取列表数据
			async function getlist() {
				let res = await get(`/api/v1/orderComment/share/${data.id}`)
				data.pageInfo = res.data
				res.data.comments.forEach((it) => {
					if(it.status === 0) {
						data.showTit = false
					}
				})
			}
			
			// 点击跳转购买过的商品页面
			const hanleJump = (id) => {
				if (id.shop_group_goods_id) {
					uni.navigateTo({
						url: '/pages/groups/index?id=' + id.shop_group_goods_id,
					})
				} else {
					uni.navigateTo({
						url: '/pages/productDetails/index?id=' + id.shop_goods_id,
					})
				}
			}
			
			// 销售审核评论
			function toExamine(item, val) {
				post(`/api/v1/sales/comment/approve/${item.id}`, {status: val}).then((res) => {
					item.status = val
					showToast('操作成功')
				})
			}
			
			return {
				...toRefs(data),
				userBind,
				hanleJump,
				hanleClick,
				login,
				getlist,
				toExamine
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			let scenne = uni.getEnterOptionsSync().scene
			const _this = this
			if (options) {
				Object.keys(options).map((key) => {
					if (key == 'id') {
						_this.id = options[key] || 0
					} else if (key == 'from') {
						_this.sale_id = options[key] || 0
					} else if (key == 's') {
						_this.s = options[key] || 0
					} else if (key == 'u') {
						_this.u = options[key] || 0
					} else if (key == 'company_id') {
						_this.company_id = options[key] || ''
					}
				})
			} else {
				_this.id = options.id
				_this.sale_id = options.from || 0
				_this.s = options.s || 0
				_this.u = options.u || 0
			}
			let parmas = {
				from: _this.sale_id,
				s: _this.s,
				u: _this.u,
				group_id: _this.id,
				scene: scenne,
				company_id: _this.company_id
			}
			this.userBind(parmas)
			this.getlist()
			this.Color = uni.getStorageSync('theme_color')
			this.isSale = uni.getStorageSync('role') == 1
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background: #fff;
	}

	.head_box {
		width: 50%;
		margin: 0 auto;
		padding: 51rpx 0;
		text-align: center;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-bottom: 30rpx;
		}
	}

	.center_text {
		margin: 0 50rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		text-align: center;
	}

	.imgs_box {
		text-align: center;
		padding: 0 20rpx;
		.imgs {
			display: flex;
			flex-wrap: wrap;
			image {
				width: 200rpx;
				height: 200rpx;
				margin: 0 19rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.commodity {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
		.left {
			image {
				width: 180rpx;
				height: 180rpx;
			}
		}
		.right {
			width: calc(100% - 210rpx);
			font-size: 28rpx;
			.name{
				margin-bottom: 24rpx;
			}
			.span {
				color: #656565;
				.red {
					color: v-bind('Color');
				}
			}
		}
	}
	.process{
		margin: 16rpx 0 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.it{
			font-size: 30rpx;
			color: #2C2C2C;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
			position: relative;
			padding-left: 40rpx;
			box-sizing: border-box;
			&:before{
				content: '';
				position: absolute;
				top: 50%;
				margin-top: -15rpx;
				left: 0;
				width: 30rpx;
				height: 30rpx;
				border: 1px solid #DDE0E6;
				border-radius: 50%;
				box-sizing: border-box;
			}
			&.choose{
				color: v-bind('Color');
				&:before{
					border: 10rpx solid v-bind('Color');
				}
			}
		}
	}
</style>