zc_saas_h5/pages2/bank/detail.vue

<template>
	<view>
		<nav-bar title="题库详情"></nav-bar>
		<view style="background-color: #ffffff;padding:20rpx;">
			<image :src="$method.splitImgHost(goodsData.coverUrl)" style="width: 100%; height: 400rpx"></image>

			<view class="cou_title">
				<view class="title_name">
					<view class="titleTag">{{ goodsData.goodsName }}</view>
				</view>
				<view class="bus_ary">
					<view>{{businessData.educationName}}</view>
					<view>{{businessData.aliasName}}</view>
				</view>
				<view style="
            display: flex;
            margin-top: 13rpx;
			align-items: center;
          ">
					<view class="prices">
						<!-- <text class="price_sym"></text> -->
						<text v-if="goodsData.standPrice" class="price_word"><text
								style="font-size: 28rpx;font-weight: 400;">￥</text>{{ goodsData.standPrice | formatPrice }}</text>
						<text v-else class="price_word free">免费</text>
						<text v-if="goodsData.linePrice" class="price_line">
							原价￥{{ goodsData.linePrice | formatPrice}}</text>
					</view>
					<view class="noteTag">
						<!-- 共 <text class="blackFont">{{ goodsData.chapterNum }} 张卷 {{goodsData || '-'}}</text> 道题 -->
					</view>
				</view>
			</view>
		</view>

		<view class="contents">
			<!-- <view>
				<view><u-tabs :list="list" item-width="50%" font-size="30" bar-width="24" :current="current" @change="change" active-color="#007AFF"></u-tabs></view>
			</view> -->
			<view class="tabs">
				<view v-for="(item, index) in list" :key="index" class="tab_item"
					:class="[{ nactive: current == index }]" @click="change(index)">{{ item.name }}</view>
			</view>

			<view class="intro" v-if="current == 0">
				<view v-if="goodsData.mobileDetailHtml" class="content" style="padding: 10rpx"><rich-text
						:nodes="goodsData.mobileDetailHtml"></rich-text></view>
						<view class="noGoods" v-else>
							<img src="https://file.gdzckj.net/web/static/img/no-content.png" alt="">
							<view class="">
								暂无数据
							</view>
						</view>
			</view>
			<view class="title-list" v-if="current == 1">
				<view class="content">
					<view class="list" v-for="(item1, index1) in bankList" :key="index1">
						<template v-if="item1.type == 1">
							<view class="moduleItem" @click="clickModule(index1, item1.majorId)">
								<view class="courseName">{{ item1.name }}</view>
								<view>
									<image src="/static/icon/up.png" class="icon_up" v-if="!item1.showList"></image>
									<image src="/static/icon/down.png" class="icon_up" v-if="item1.showList"></image>
								</view>
							</view>

							<template v-if="item1.showList">
								<view v-for="(item2, index2) in item1.list" :key="index2">
									<view class="section" @click="
                      changeItem(
                        index1,
                        index2,
                        item2.chapterExamId,
                        item1.type
                      )
                    ">
										<!-- <image src="/static/icon/down1.png" class="icon_up" v-if="item2.showList"></image>
										<image src="/static/icon/up1.png" class="icon_up" v-if="!item2.showList"></image> -->
										<u-icon v-if="!item2.showList" name="arrow-right" color="#999"
											size="24"></u-icon>
										<u-icon v-if="item2.showList" name="arrow-down" color="#999" size="24"></u-icon>
										<text class="item_name">{{ item2.name }}</text>
									</view>
									<view class="article-list" v-if="item2.showList">
										<view class="article" :class="{ active: showTest(article.examId) }"
											v-for="(article, index3) in item2.list" :key="index3">
											<view class="flex_auto">{{ article.examName }}</view>
											<view class="btn" @click="goTest(item1.type, article)"
												v-if="showTest(article.examId)">试做</view>
										</view>
									</view>
									<u-line></u-line>
								</view>
							</template>
						</template>

						<template v-if="item1.type == 2">
							<view class="section" @click="changeItem(index1, '', item1.majorId, item1.type)">
								<!-- <image src="/static/icon/down1.png" class="icon_up" v-if="item1.showList"></image>
								<image src="/static/icon/up1.png" class="icon_up" v-if="!item1.showList"></image> -->
								<u-icon v-if="!item1.showList" name="arrow-right" color="#999" size="24"></u-icon>
								<u-icon v-if="item1.showList" name="arrow-down" color="#999" size="24"></u-icon>
								<text class="item_name">{{ item1.name }}</text>
							</view>
							<view class="article-list" v-if="item1.showList">
								<view class="article" :class="{ active: showTest(article.examId) }" :key="index2"
									v-for="(article, index2) in item1.list">
									<view class="flex_auto">{{ article.examName }}</view>
									<view class="btn" @click="goTest(item1.type, article)"
										v-if="showTest(article.examId)">试做</view>
								</view>
							</view>
						</template>

						<template v-if="item1.type == 3">
							<view class="article" :class="{ active: showTest(item1.majorId) }">
								<view class="flex_auto">{{ item1.name }}</view>
								<view class="btn" @click="goTest(item1.type, item1)" v-if="showTest(item1.majorId)">试做
								</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>

		<view class="bottomBox" v-if="!hideBuyState">
			<!-- <view class="priceTag">¥ {{ toFixed(goodsData.standPrice) }}</view> -->
			<view class="icons">
				<view class="icon_item ones">
					<image src="/static/index/share.png" class="share"></image>
					<button type="default" open-type="share" class="bt_share"></button>
					<view class="share_w">分享</view>
				</view>
				<view class="icon_item" v-if="!disCode">
					<image src="/static/index/shopcar.png" class="shopcar" @click="toShopcar()"></image>
					<view class="share_w">购物车</view>
				</view>
			</view>
			<view style="display: flex; color: #ffffff; align-items: center">
				<view class="btn1" v-if="!disCode" @click="addCart">加入购物车</view>
				<view class="btn2" @click="buy">立即购买</view>
			</view>
		</view>

		<!-- 已购买过课程的弹窗 -->
		<u-popup v-model="bugCourseModel" mode="center" border-radius="40">
			<view class="had_bugCourse">
				<image src="/pages2/static/hadBug.png" class="share"></image>
				<view class="tips">
					<view class="warns">温馨提示</view>
					<view class="words">您<text>已购买过</text>该商品课程</view>
					<view class="words">可立即前往学习</view>
				</view>
				<view class="tip_botton">
					<view class="cancel_btn" @click="changeKown()">知道了</view>
					<view class="confirm_btn" @click="toStudy()">去学习</view>
				</view>
			</view>
		</u-popup>

		<!-- 选择规格弹窗 -->
		<u-popup v-model="toggleSkuShow" mode="bottom" border-radius="40">
			<view class="popup_box">
				<view class="check_head">
					<view class="headers">
						<view class="grade">选择规格</view>
						<u-icon name="close" color="#9C9C9C" size="40" @click="closePop()"></u-icon>
					</view>
				</view>
				<view v-if="Object.keys(skuItem).length" class="pop_prices">
					<view class="lefts">
						<image :src="$method.splitImgHost(skuItem.coverUrl)" class="imgs"></image>
					</view>
					<view class="rights">
						<view class="goods_titles">{{ skuItem.goodsName }}</view>
						<view class="goods_price">￥{{ skuItem.standPrice }}</view>
					</view>
				</view>
				<view class="lines"></view>
				<view class="check_con">
					<scroll-view scroll-y="true" style="height: 490rpx">
						<view v-for="(item, index) in specList" :key="index" class="check_items">
							<view class="grades">{{ item.name }}</view>
							<!-- <scroll-view scroll-y="true" style="height: 180rpx;"> -->
							<view class="grade_names">
								<view class="course_items" v-for="(child, c_index) in item.specAttrList" :key="c_index"
									:class="{ nactive: child.check }" @click="selectSku(child, index)">
									{{ child.name }}
								</view>
							</view>
							<!-- </scroll-view> -->
						</view>
					</scroll-view>
				</view>
				<view class="confirm_btns">
					<view v-if="
              Object.keys(skuItem).length == 0 || specList.length != isCheckSku
            " class="right_now r_disable">确 定</view>
					<view v-else class="right_now" @click="rightNowBuy()">确 定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import { websocket } from '@/common/socket.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				list: [{
						name: "详情",
					},
					{
						name: "大纲",
					},
				],
				businessData: {},
				current: 0,
				id: "",
				goodsData: {},
				bankList: [],
				goodsExamConfig: [],
				bugCourseModel: false, // 弹窗
				hadBuyCourse: {}, // 已购买课程信息
				toggleSkuShow: false,
				skuItem: {},
				isCarOrBuy: 1, // 1加入购物车 2立即购买
				specList: [], // 规格列表
				options: {},
			};
		},
		filters: {
			formatDate: function(value) {
				var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear();
				return Y;
			},
		},
		onUnload() {},
		computed: {
			...mapGetters(["userInfo", "hideBuyState"]),
			isCheckSku() {
				let checkCout = 0;
				this.specList.forEach((item, index) => {
					if (item.specAttrList && item.specAttrList.length) {
						item.specAttrList.forEach((child, c_index) => {
							if (child.check) {
								checkCout++;
							}
						});
					}
				});
				return checkCout;
			},
			disCode() {
				return this.options.distributionCode;
			},
		},
		onLoad(option) {
			console.log("题库option:", option);
			if (option.scene) {
				// scene 生成二维码扫码进来的
				let optObj = {};
				let arrs = decodeURIComponent(option.scene).split("&");
				for (let i = 0; i < arrs.length; i++) {
					optObj[arrs[i].split("=")[0]] = arrs[i].split("=")[1];
				}
				this.id = optObj.id;
				uni.setStorageSync("newUser_sc", optObj.sc);
				uni.setStorageSync("shareActivityCode", optObj.sac);
				if (optObj.sac && this.$method.isLogin()) {
					this.editShareActivityCode();
				}
			} else {
				// 小程序正常跳转的
				// this.id => goodsId
				this.id = option.id;
				this.options = option;
				if (option.sac) {
					uni.setStorageSync("shareActivityCode", option.sac);
					if (this.$method.isLogin()) {
						//已登录
						this.editShareActivityCode();
					}
				}
			}
			this.disCode ? this.getFxDetail() : this.getDetail();
			this.goodsBankList();
			this.getIsBuy(); // 判断是否已经购买过该课程
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"],
			});
		},
		onShow() {},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: this.goodsData.goodsName,
				query: "id=" + this.id,
				imageUrl: this.$method.splitImgHost(this.goodsData.coverUrl),
			};
		},
		onShareAppMessage() {
			return {
				title: this.goodsData.goodsName,
				path: `/pages2/bank/detail?id=` + this.id,
				imageUrl: this.$method.splitImgHost(this.goodsData.coverUrl),
			};
		},

		methods: {
			// 修改用户活动邀请码
			editShareActivityCode() {
				console.log("修改用户活动邀请码");
				this.$http({
					url: "/app/user/edit/shareActivityCode",
					method: "post",
					data: {
						shareActivityCode: uni.getStorageSync("shareActivityCode"),
					},
				}).then((res) => {
					if (res.data.code == 200) {}
				});
			},
			toFixed(number) {
				if (number) {
					return number.toFixed(2);
				} else {
					return "0.00";
				}
			},
			getFxDetail() {
				this.$api
					.fxGoodsDetail({
						goodsId: this.id,
						disCode: this.disCode,
					})
					.then((res) => {
						if (res.data.data) {
							if (res.data.data.mobileDetailHtml) {
								res.data.data.mobileDetailHtml =
									res.data.data.mobileDetailHtml.replace(
										/<img/gi,
										'<img style="max-width:100%;"'
									);
							}
							this.goodsData = res.data.data;
							this.courseBusiness();
							this.goodsExamConfig = JSON.parse(res.data.data.goodsExamConfig);
						}
					});
			},
			courseBusiness() {
				// url: '/app/common/course/business/'+data,
				this.$api.courseBusiness(this.goodsData.businessId).then((res) => {
					this.businessData = res.data.data;
				});
			},
			getDetail() {
				// '/app/common/goods/'+ data 获取商品详细信息
				this.$api.commonGoodsDetail(this.id).then((res) => {
					if (res.data.data) {
						if (res.data.data.mobileDetailHtml) {
							res.data.data.mobileDetailHtml =
								res.data.data.mobileDetailHtml.replace(
									/<img/gi,
									'<img style="max-width:100%;"'
								);
						}
						this.goodsData = res.data.data;
						this.courseBusiness();
						this.goodsExamConfig = JSON.parse(res.data.data.goodsExamConfig);
					}
				});
			},
			goodsBankList() {
				this.$api
					.goodsBankList({
						goodsId: this.id,
					})
					.then((res) => {
						console.log(res);
						this.bankList = res.data.data;
						this.showAllCharpter();
					});
			},
			/**
			 * 展示第一个章下的节内容
			 */
			showAllCharpter() {
				for (let i = 0; i < this.bankList.length; i++) {
					if (this.bankList[i].type == 1) {
						//第一个是模块直接展开，再展开章下面的节
						this.$api
							.goodsChapterList({
								moduleExamId: this.bankList[i].majorId,
							})
							.then((res) => {
								this.$set(this.bankList[i], "showList", true);
								this.$set(this.bankList[i], "list", res.data.data);
								this.changeItem(
									i,
									0,
									this.bankList[i].list[0].chapterExamId,
									this.bankList[i].type
								);
							});
						break;
					} else if (this.bankList[i].type == 2) {
						//第一个章展开下面的节
						this.changeItem(
							i,
							"",
							this.bankList[i].majorId,
							this.bankList[i].type
						);
						break;
					}
				}
			},
			goodsChapterList(bank, id) {
				this.$api
					.goodsChapterList({
						moduleExamId: id,
					})
					.then((res) => {
						this.$set(bank, "list", res.data.data);
					});
			},

			goTest(type, item) {
				if (type == 1) {
					uni.setStorageSync("testname", item.examName);
					uni.navigateTo({
						url: "/pages2/bank/questionBankTest?id=" +
							item.examId +
							"&num=" +
							this.showTest(item.examId).num,
					});
				} else if (type == 2) {
					uni.setStorageSync("testname", item.examName);
					uni.navigateTo({
						url: "/pages2/bank/questionBankTest?id=" +
							item.examId +
							"&num=" +
							this.showTest(item.examId).num,
					});
				} else if (type == 3) {
					uni.setStorageSync("testname", item.name);
					uni.navigateTo({
						url: "/pages2/bank/questionBankTest?id=" +
							item.majorId +
							"&num=" +
							this.showTest(item.majorId).num,
					});
				}
			},

			showTest(id) {
				return this.goodsExamConfig.find((item) => item.examId == id);
			},
			toConfirmList(id) {
				let str = "?id=" + id;
				if (this.disCode) {
					str += "&distributionCode=" + this.disCode;
				}
				if (this.options.linkCode) {
					str += "&linkCode=" + this.options.linkCode;
				}
				uni.navigateTo({
					url: "/pages2/order/confirm_list" + str,
				});
			},
			clickModule(index, id) {
				if (this.bankList[index].list) {
					this.$set(
						this.bankList[index],
						"showList",
						!this.bankList[index].showList
					);
					return;
				}

				this.$api
					.goodsChapterList({
						moduleExamId: id,
					})
					.then((res) => {
						this.$set(this.bankList[index], "showList", true);
						this.$set(this.bankList[index], "list", res.data.data);
					});
			},
			buy() {
				if (this.$method.isGoLogin()) {
					return;
				}
				// 判断有没有规格选择
				if (this.goodsData.specTemplateId) {
					this.isCarOrBuy = 2;
					this.getSpecDetail();
					return;
				}
				this.toConfirmList(this.id);
			},
			addCart() {
				// this.getSpecDetail()
				// return
				if (this.$method.isGoLogin()) {
					return;
				}
				// 判断有没有规格选择
				if (this.goodsData.specTemplateId) {
					this.isCarOrBuy = 1;
					this.getSpecDetail();
					return;
				}
				this.addShopCart(this.id);
			},
			addShopCart(goodsId) {
				this.$api
					.addCart({
						goodsId: goodsId,
						choiceStatus: 1,
					})
					.then((res) => {
						if (res.data.code == 200) {
							uni.setStorageSync("updateCart", 1); //提醒刷新购物车
							uni.showToast({
								title: "添加成功",
							});
						} else {
							this.$u.toast(res.data.msg);
						}
					});
			},
			getSpecDetail() {
				let data = {};
				let url = `/app/common/spec/${this.detail.specTemplateId}`;
				if (this.disCode) {
					url = "/app/common/distribution/spec";
					data = {
						disCode: this.disCode,
						specTemplateId: this.detail.specTemplateId,
					};
				}
				this.$http({
					url,
					method: "get",
					noToken: true,
					data,
				}).then((res) => {
					let data = res.data.data;
					if (data) {
						this.toggleSkuShow = true;
						this.specList = data && (data.specList || []);
						this.specList.forEach((item, index) => {
							item.specAttrList.forEach((child, i_index) => {
								this.$set(
									this.specList[index].specAttrList[i_index],
									"check",
									false
								);
							});
						});
					} else {
						if (this.isCarOrBuy == 1) {
							// 加入购物车
							this.addShopCart(this.id);
						} else {
							this.toConfirmList(this.id);
						}
						this.closePop();
					}
				});
			},
			change(index) {
				this.current = index;
			},
			changeItem(index1, index2, id, type) {
				if (type == 1) {
					console.log(1);
					if (this.bankList[index1].list[index2].list) {
						this.$set(
							this.bankList[index1].list[index2],
							"showList",
							!this.bankList[index1].list[index2].showList
						);
						return;
					}

					this.$api
						.goodsExamList({
							chapterExamId: id,
						})
						.then((res) => {
							this.$set(this.bankList[index1].list[index2], "showList", true);
							this.$set(
								this.bankList[index1].list[index2],
								"list",
								res.data.data
							);
						});
				} else if (type == 2) {
					console.log(2);
					if (this.bankList[index1].list) {
						this.$set(
							this.bankList[index1],
							"showList",
							!this.bankList[index1].showList
						);
						return;
					}

					this.$api
						.goodsExamList({
							chapterExamId: id,
						})
						.then((res) => {
							this.$set(this.bankList[index1], "showList", true);
							this.$set(this.bankList[index1], "list", res.data.data);
						});
				}
			},
			toShopcar() {
				uni.navigateTo({
					url: "/pages4/shopping/shoppingCart",
				});
			},
			getIsBuy() {
				if(!this.$method.isLogin()){
					return
				}
				// if (this.$method.isGoLogin()) {
				// 	return;
				// }
				this.$http({
					url: "/order/buyGoodsNotExpired",
					method: "get",
					data: {
						goodsId: this.id
					},
				}).then((res) => {
					if (res.data.code == 200) {
						if (res.data.data) {
							// 有data返回是已经购买过的课程
							this.hadBuyCourse = res.data.data;
							this.bugCourseModel = true;
						}
					}
				});
			},
			changeKown() {
				this.bugCourseModel = false;
			},
			toStudy() {
				let sysTime = this.$method.timest();
				const {
					serviceStartTime,
					serviceEndTime,
					goodsId,
					orderGoodsId
				} =
				this.hadBuyCourse;
				if (
					serviceStartTime &&
					serviceEndTime &&
					(sysTime <= serviceStartTime || sysTime >= serviceEndTime)
				) {
					uni.showToast({
						icon: "none",
						title: "不在学习服务期，不能进入学习",
					});
					return;
				}
				uni.navigateTo({
					url: "/pages2/bank/question_detail?id=" +
						goodsId +
						"&orderGoodsId=" +
						orderGoodsId,
				});
				this.bugCourseModel = false;
			},
			closePop() {
				this.toggleSkuShow = false;
				this.skuItem = {};
			},
			selectSku(item, index) {
				this.specList[index].specAttrList.forEach((i_item, i_index) => {
					if (item.specAttributeId == i_item.specAttributeId) {
						this.$set(this.specList[index].specAttrList[i_index], "check", true);
					} else {
						this.$set(this.specList[index].specAttrList[i_index], "check", false);
					}
				});
				// console.log('this.specList', this.specList, this.isCheckSku)
				if (this.specList.length == this.isCheckSku) {
					let specAttrIds = [];
					this.specList.forEach((item) => {
						let result = item.specAttrList.find((e) => e.check);
						if (result) {
							specAttrIds.push(result.specAttributeId);
						}
					});
					this.getGoodsInfos(specAttrIds);
				}
			},
			// 获取规格属性值对应的商品信息
			getGoodsInfos(specAttrIds) {
				this.$http({
					url: "/app/common/attr/goods",
					method: "get",
					data: {
						specTemplateId: this.goodsData.specTemplateId,
						specAttrIds: specAttrIds.join(","),
					},
					noToken: true,
				}).then((res) => {
					if (res.data.code == 200) {
						this.skuItem = res.data.data || {};
					} else {
						this.skuItem = {};
						this.$u.toast("商品已下架, 请重新选择");
					}
				});
			},
			rightNowBuy() {
				if (this.specList.length != this.isCheckSku) {
					this.$u.toast("请先选择所有的规格");
					return;
				}
				if (this.skuItem.goodsStatus == 0) {
					this.$u.toast("商品已下架, 请重新选择");
					return;
				}
				let sysTime = this.$method.timest();
				if (
					sysTime <= this.skuItem.validityStartTime ||
					sysTime >= this.skuItem.validityEndTime
				) {
					this.$u.toast("商品不在有效期, 请重新选择");
					return;
				}
				if (this.isCarOrBuy == 1) {
					// 加入购物车
					this.addShopCart(this.skuItem.goodsId);
				} else {
					this.toConfirmList(this.skuItem.goodsId);
				}
				this.closePop();
			},
		},
	};
</script>
<style>
	page {
		background-color: #f2f2f2;
	}
</style>
<style lang="scss" scope>
	@import "../../pages3/course/index.scss";

	.contents {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		margin-top: 16rpx;
		overflow: hidden;

		// tab
		.tabs {
			// width: 100%;
			height: 78rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #f2f7ff;
			border-radius: 38rpx;
			margin: 24rpx;
			padding: 0rpx 5rpx;

			.tab_item {
				width: 345rpx;
				height: 65rpx;
				line-height: 65rpx;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 32rpx;
				text-align: center;
				color: #333;

				&.nactive {
					color: #fff;
					background-color: #3577e8;
				}

				// &.twoBtn {
				// 	width: 50%;
				// }
			}
		}
	}

	.cou_title {
		padding: 24rpx 32rpx 40rpx 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		&>.bus_ary {
			margin-top: 14rpx;
			display: flex;
			flex-wrap: wrap;

			&>view {
				margin-right: 16rpx;
				margin-bottom: 10rpx;
				background-color: rgb(235, 238, 245);
				color: #666;
				padding: 10rpx 20rpx;
				border-radius: 8rpx;
			}
		}
	}

	.prices {
		.price_word {
			font-size: 40rpx;
			font-weight: 800;
			color: #fc3f3f;
		}

		.sale {
			color: #999999;
			font-size: 28rpx;
			margin-left: 8rpx;
		}

		.price_line {
			margin-left: 20rpx;
			color: #999999;
			font-size: 28rpx;
			text-decoration: line-through;
			font-weight: 400;
		}

		.free {
			font-size: 32rpx;
		}
	}

	.courseName {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.icon_up {
		width: 32rpx;
		height: 32rpx;
	}

	.intro {
		background: #fff;
		padding: 16rpx 16rpx 124rpx;

		.content {
			background: #fff;
			border-radius: 16rpx;

			.top {
				border-radius: 16rpx;
				padding: 32rpx 28rpx 16rpx;
				font-size: 30rpx;
				color: #333333;
			}

			.img {
				width: 100%;
			}
		}
	}

	.moduleItem {
		height: 80rpx;
		color: #333333;
		font-size: 32rpx;
		line-height: 80rpx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
	}

	.title-list {
		background: #fff;
		padding: 16rpx 16rpx 124rpx;

		.content {
			.list {
				background: #fff;
				margin-bottom: 30rpx;
				overflow: hidden;
				border-radius: 16rpx;
				padding: 10rpx 16rpx;

				.module {
					font-size: 32rpx;
					color: #333333;

					.icon {
						margin-right: 10rpx;
					}
				}

				.section {
					font-size: 30rpx;
					color: #333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 20rpx 0;
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #eee;
				}

				.item_name {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-left: 8rpx;
				}

				// .article-list {
				// 	margin-top:20rpx;
				// }

				.article {
					padding: 10rpx 0;
					min-height: 80rpx;
					display: flex;
					align-items: center;
					margin-left: 35rpx;
					font-size: 30rpx;
					color: #666666;
					border-bottom: 1rpx solid #eeeeee;
					display: flex;

					.flex_auto {
						flex: 1;
						font-size: 30rpx;
						color: #666666;
						word-break: break-all;
					}

					&:nth-last-of-type(1) {
						border: 0;
					}

					&.active {
						color: #007aff;

						.btn {
							width: 103rpx;
							height: 48rpx;
							line-height: 48rpx;
							text-align: center;
							color: #3577e8;
							font-size: 24rpx;
							border-radius: 24rpx;
							background: #fff;
							margin-left: 36rpx;
							border: 1rpx solid #3577e8;
						}
					}
				}
			}
		}
	}


	.btn2 {
		width: 187rpx;
		height: 79rpx;
		line-height: 79rpx;
		background: #007aff;
		border-radius: 40rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.btn1 {
		width: 187rpx;
		height: 79rpx;
		line-height: 79rpx;
		background: #cce4ff;
		border-radius: 40rpx;
		text-align: center;
		margin-right: 11rpx;
		font-size: 28rpx;
		color: #1890ff;
	}

	.blackFont {
		color: #333333;
		margin: 0 4rpx;
	}

	.wk_icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 12rpx;
	}

	.noteTag {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		align-items: center;
	}

	.priceTag {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ff2d55;
	}

	.titleTag {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		// margin-left: 8rpx;
	}

	.yearTag {
		width: 80rpx;
		height: 32rpx;
		background: #ebf5ff;
		border: 2rpx solid #007aff;
		border-radius: 16rpx;
		font-size: 24rpx;
		color: #007aff;
		text-align: center;
		line-height: 32rpx;
	}

	.itemBox {
		background: #ffffff;
		box-shadow: 0rpx 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
		border-radius: 24rpx;
		width: 100%;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.noGoods {
		display: flex;
		flex-direction: column;
		align-items: center;
	
		&>img {
			margin-top: 20rpx;
			width: 300rpx;
			height: 300rpx;
		}
	
		&>view {
			font-size: 30rpx;
			margin-top: 30rpx;
			color: #666;
		}
	}
</style>