book-hi/pages/home/components/notScanned.vue

<template>
	<!-- 内容区域 -->
	<scroll-view scroll-y>
		<view class="guide-title" data-text="卖书攻略手册"></view>

		<!-- 第一步 -->
		<view class="step-box">
			<view class="flex-a">
				<image src="/static/img/step1.png" class="step-img"></image>
				<view class="flex-col flex-1">
					<view class="step-icon-wrap">
						<image src="/static/img/logo2.png" class="logo-icon"></image>
						<text class="step-text">第一步</text>
					</view>
					<view class="step-title">扫描ISBN</view>
					<view class="step-desc">看看您的图书价值多少</view>

					<view class="collapse-header" @click="toggleCollapse('step1')">
						<text class="collapse-title">什么书不收？</text>
						<u-icon :name="collapseState.step1 ? 'arrow-up' : 'arrow-down'" size="14"
							color="#999999"></u-icon>
					</view>
				</view>
			</view>

			<view class="rule-list" v-if="collapseState.step1">
				<text class="rule-item">1、不收盗版书、复印书、非法出版物。</text>
				<text class="rule-item">2、不收破损、污渍、发霉、脱胶、笔记杂乱、老化泛黄、附件缺失、浸水留痕的书。</text>
				<text class="rule-item">3、练习册、习题册书写完成度过高拒收。</text>
				<text class="rule-item">4、扫码提示不收的书籍暂时不收</text>
			</view>
		</view>

		<!-- 第二步 -->
		<view class="step-box">
			<view class="flex-a">
				<view class="flex-col flex-1">
					<view class="step-icon-wrap">
						<image src="/static/img/logo2.png" class="logo-icon"></image>
						<text class="step-text">第二步</text>
					</view>
					<view class="step-title">等待快递取书</view>
					<view class="step-desc">寄书邮费由书嗨承担</view>
				</view>
				<image src="/static/img/step2.png" class="step-img"></image>
			</view>

		</view>

		<!-- 第三步 -->
		<view class="step-box">
			<view class="flex-a">
				<image src="/static/img/step3.png" class="step-img"></image>
				<view class="flex-col flex-1">
					<view class="step-icon-wrap">
						<image src="/static/img/logo2.png" class="logo-icon"></image>
						<text class="step-text">第三步</text>
					</view>
					<view class="step-title">审核到账</view>
					<view class="step-desc">到账后15天内卖方必赔</view>
					<view class="collapse-header" @click="toggleCollapse('step3')">
						<text class="collapse-title">什么是审核？</text>
						<u-icon :name="collapseState.step3 ? 'arrow-up' : 'arrow-down'" size="14"
							color="#999999"></u-icon>
					</view>
				</view>
			</view>

			<view class="rule-list" v-if="collapseState.step3">
				<text class="rule-item">1、书嗨会在收到您寄的卖书快递包裹后对书籍进行审核，审核的内容包裹卖书本的数量、种类和品相。</text>
				<text class="rule-item">2、书的品相将被分为品相良好和品相不通过</text>
				<text class="rule-item">3、品相不通过的书籍会被拒收，首单可以在收到书款后48小时内申请免费退回拒收书籍，后续订单需要自付邮费。</text>
			</view>
		</view>
		<view class="link-wrap flex-a">
			<text class="link-btn flex-1" @click="goToScannedBooks">扫过的书 ></text>
			<text class="link-btn flex-1" @click="goToRules">卖书规则 ></text>
		</view>
	</scroll-view>

</template>

<script>
	export default {
		data() {
			return {
				collapseState: {
					step1: false,
					step3: false
				}
			}
		},
		methods: {
			toggleCollapse(step) {
				this.$set(this.collapseState, step, !this.collapseState[step])
			},

			goToScannedBooks() {
				uni.navigateTo({
					url: '/pages-home/pages/scaned-book'
				})
			},
			goToRules() {
				uni.navigateTo({
					url: '/pages/rules/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.guide-title {
		position: relative;
		margin: 40rpx auto;
		margin-top: 20rpx;
		height: 60rpx;
		&::before,
		&::after {
			content: attr(data-text);
			font-family: Source Han Sans CN;
			font-weight: 600;
			font-size: 42rpx;
			color: #33BA44;
			text-align: center;
			position: absolute;
			top: 0;
			left: 33%;
		}

		&::before {
			-webkit-text-stroke: 2rpx #ffffff;
		}
	}


	.step-box {
		border-radius: 12rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.flex-col {
		padding-left: 8%;
	}

	.step-icon-wrap {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.logo-icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 12rpx;
		}

		.step-text {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.step-title {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 32rpx;
		color: #37C148;
		line-height: 41rpx;
	}

	.step-desc {
		font-family: Source Han Sans CN;
		font-weight: 450;
		font-size: 26rpx;
		color: #37C148;
		line-height: 41rpx;
	}

	.step-img {
		width: 375rpx;
		height: 252rpx;
		display: block;
	}

	.collapse-header {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-top: 20rpx;

		.collapse-title {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.rule-list {
		background: #f8f8f8;
		border-radius: 8rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-top: 16rpx;
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;

		.rule-item {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 36rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	.link-wrap {
		padding: 0 20rpx;
		gap: 20rpx;
		box-sizing: border-box;

		.link-btn {
			height: 80rpx;
			background: #F8F8F8;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #666666;
		}
	}
</style>