cosmetics_shop_wxapp/loginPages/evaluate/index.vue

<template>
	<view class="evaluate">
		<!-- header -->
		<cu-custom isBack custom bgColor="bg-gradual-blue"><view slot="content">评价中心</view></cu-custom>
		<view class="tab">
			<view :style="{top:CustomBarHeight+'px' }" class="tab-content flex bg-white">
				<view @click="handler" class="item text-center">待评价（99+）</view>
				<view @click="handler" class="item text-center">已评价（99+）</view>
				<view :style="{left:active ? '50vw' : '0px'}" class="bar"></view>
			</view>
		</view>
		<!-- section -->
		<view class="section">
			<cu-evaluateB @click="addEvaluteFunc" :value="value"/>
			<cu-evaluateA @click="removeFunc" :value="value"/>
		</view>
		<!-- 工具 -->
		<cu-modalB :show.sync="show" content="确认删除此评论吗？"></cu-modalB>
	</view>
</template>

<script>
import { CustomBarHeight } from '@/common/device/index.js';
export default {
	data() {
		return {
			show:false,
			active: false,
			CustomBarHeight ,
			value:{
				img:"https://img0.baidu.com/it/u=1377501607,485661019&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1656090000&t=e347398442d0de93d1fd11fe6df2b6f8",
				name:"博客园用户登录 代码改变世界 密码登录 短信登录 忘记登录用户名 忘记密码 登录",
				parameter:"商品参数",
				custom:"评价立得35积分",
				detail:"极简Node.js 入门系列教程:https://www.yuque.com/sunluyong/node本文更佳阅读体验:https://www.yuque.com/sunluyong/node/static-server在创建 HTTP 服务器实现了一个最简单的静...",
				create_time:"20220623 17:15",
				imgs:[
					{
						id: 0,
						type: 'video',
						url: 'https://st0.dancf.com/gaoding/gaoding/229e7928-fb34-4a0c-b12b-b26fc0aba91453332268.mp4'
					},
					{
						id: 1,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg'
					},
					{
						id: 2,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
					},
					{
						id: 3,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
					},
					{
						id: 4,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
					},
					{
						id: 5,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
					},
					{
						id: 6,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
					}
				]
			}
		};
	},
	methods:{
		handler(){
			this.active=!this.active;
		},
		removeFunc(){
			this.show=true;
		},
		addEvaluteFunc(){
			uni.navigateTo({
				url:"/loginPages/addEvalute/index"
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.evaluate {
	.tab {
		height: 60upx;
		.tab-content {
			position: fixed;
			width: 100vw;
			left: 0;
			.item {
				flex: 1;
				line-height: 60upx;
				position: relative;
			}
			.bar {
				position: absolute;
				top: 59upx;
				width: 50vw;
				height: 2upx;
				background-color: #f03;
				transition: left .3s linear;
			}
		}
	}
}
</style>