operation-applet/pages/service/index.vue

<template>
	<view class="service-main" :style="{height:Authorize?'auto':'100vh'}">
		<view class="navBarBox">
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<view class="navBar">
				<view class="navBar-title">产品列表</view>
			</view>
		</view>
		<view class="service-place"></view>
		<view class="service-main-content">
			<view class="content-left">
				<view class="content-left-items" v-for="(item, index) in dataList" :key="idnex">
					<view :class="currIndex === index ? 'content-left-item-active' : 'content-left-item'" @click="itemClick(item.title, index)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="content-right">
				<view class="right-text" v-if="currIndex === 0">
					<view class="right-text-items" v-for="(item, index) in businessList" :key="index" @click="gotoCommit(item)">
						<image src="@/static/images/system/duizhang.png" mode="" class="text-items-img"></image>
						<view class="text-items-content">
							<view class="text-items-content-container">
								<view class="text-items-content-title">
									{{item.title}}
								</view>
								<view class="text-items-content-price">
									¥{{item.amount}}
								</view>
							</view>
							<view class="text-items-content-remark">
								{{ item.remark }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <tab-bar></tab-bar> -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82+11,
				dataList: [
					{title: '商标业务'},
					{title: '专利业务'},
					{title: '商标转让'},
					{title: '商标数据api'},
					{title: '定制开发'},
				],
				currIndex: 0,
				dataForm: {
					title: null,
				},
				businessList: [
					{title: '智能注册', amount: '310.0', remark: '智能系统快速提交，自助申请'},
					{title: '顾问注册', amount: '690.0', remark: '顾问服务，全程代办，提高通过率'},
					{title: '商标注册+logo设计', amount: '690.0', remark: '顾问一对一服务，专享商标注册+logo设计套餐'},
				],
			}
		},
		onShow() {
			
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			let systemInfoSync = uni.getSystemInfoSync();
			this.screenHeight = systemInfoSync.screenHeight - 500;
		},
		mounted() {
			
		},
		methods: {
			//左侧tab选中
			itemClick(title, index) {
				this.currIndex = index;
				this.dataForm.title = title;
			},
			//跳转注册页面
			gotoCommit(item) {
				if (this.$storage.getJson("token")) {
					uni.navigateTo({
						url: '/pages/service/submission?title=' + item.title,
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login?topage=submission',
					});
				}
				// uni.navigateTo({
				// 	url: '/pages/service/submission?title=' + item.title,
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.service-main {
		// background-color: #F2F3F5;
		// background: linear-gradient(180deg, #FFFFFF 0%, #F2F3F5 400rpx);
		height: 100%;
		position: relative;
		box-sizing: border-box;
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		background-color: $uni-bg-color;
		// background-color: #FFFFFF;
		.service-place {
			height: 180rpx;
			background: #FFFFFF;
		}
		.service-main-content {
			// margin-top: 30rpx;
			display: flex;
			.content-left {
				width: 25%;
				background: #FFFFFF;
				height: calc(100vh - 180rpx);
				.content-left-items {
					.content-left-item {
						height: 120rpx;
						line-height: 120rpx;
						width: 100%;
						background: #FFFFFF;
						text-align: center;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #000000;
					}
					.content-left-item-active {
						height: 120rpx;
						line-height: 120rpx;
						width: 100%;
						background: #F2F3F5;
						text-align: center;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #000000;
					}
				}
			}
			.content-right {
				width: 75%;
				background: #F2F3F5;
				height: calc(100vh - 180rpx);
				.right-text {
					padding: 0 20rpx;
					.right-text-items {
						height: 180rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						display: flex;
						margin-top: 10rpx;
						.text-items-img {
							height: 60rpx;
							width: 60rpx;
							margin-top: 40rpx;
							margin-left: 10rpx;
						}
						.text-items-content {
							width: calc(100% - 90rpx);
							margin-left: 20rpx;
							.text-items-content-container {
								display: flex;
								margin-top: 40rpx;
								position: relative;
								.text-items-content-title {
									height: 40rpx;
									line-height: 40rpx;
									font-size: 30rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 700;
									color: #000000;
								}
								.text-items-content-price {
									height: 40rpx;
									line-height: 40rpx;
									font-size: 28rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 400;
									color: #ff6666;
									position: absolute;
									right: 10rpx;
								}
							}
							.text-items-content-remark {
								height: 40rpx;
								line-height: 40rpx;
								font-size: 20rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 400;
								color: #ADADAD;
								margin-top: 20rpx;
							}
						}
					}
				}
			}
		}
	}
	.navBarBox{position: fixed;}
	.navBarBox .statusBar {}
	.navBarBox .navBar {
		padding: 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: fixed;
		.navBar-title {
			height: 48rpx;
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 48rpx;
		}
	}
	.navBarBox .navBar .logo {
		width: 82rpx;
		height: 82rpx;
		margin-right: 10rpx;
	}
</style>