<template>
	<view class="commonPageBox commonDetailPage">
		<z-nav-bar title="商品详情"></z-nav-bar>
		<view class="contentBox commonPageContentBox" style="padding-bottom: 30rpx;" v-if="!this.$store.state.loadingShow">
			<swiper :autoplay="true" :interval="3000" :duration="1000"
				style="width: 100%; height: 750rpx; background-color: #f5f5f5">
				<swiper-item v-for="(item, index) in swiperList" :key="index" style="width: 100%; height: 100%">
					<image :src="item" mode="aspectFit" style="width: 100%; height: 100%">
					</image>
				</swiper-item>
			</swiper>

			<view class="goods_box">
				<view class="curriulum_title_box">
					<view v-if="this.options.isMiaosha == 1" class="miaosha_box">
						<view class="price_box"
							v-if="curriculumData.isVipPrice==1&&curriculumData.vipPrice!=null&&curriculumData.vipPrice!=0
							||curriculumData.activityPrice && curriculumData.activityPrice > 0">
							<view class="price_left">
								<template v-if="curriculumData.isVipPrice==1&&curriculumData.vipPrice!=null&&curriculumData.vipPrice!=0">
									<text class="aui-text-danger price">
										￥{{ curriculumData.vipPrice }}
									</text>
									<text class="price original_price">￥{{ curriculumData.price }}
									</text>
								</template>
								<template v-else>
									<text class="aui-text-danger price">
										￥{{ curriculumData.activityPrice }}
									</text>
									<text class="price original_price">原价：￥{{ curriculumData.price }}
									</text>
								</template>
								

								<view class="price original_price sales_number">已售 {{ curriculumData.sumSales }}件
								</view>
							</view>

							<view class="xianshimaiosha_box">
								<text class="xianshimaiosha" 
									v-if="curriculumData.isVipPrice==1&&curriculumData.vipPrice!=null&&curriculumData.vipPrice!=0">
									VIP优惠
								</text>
								<text class="xianshimaiosha" v-else-if="curriculumData.activityPrice && curriculumData.activityPrice > 0">活动立减</text>
							</view>
						</view>
						<view class="putong" v-else>
							<template>
								<text class="aui-text-danger price">
									￥{{ curriculumData.price }}
								</text>
							</template>
							<view class="price original_price sales_number">已售 {{ curriculumData.sumSales }}件
							</view>
						</view>

						<view class="curriulum_title">{{ curriculumData.productName }}
						</view>
					</view>
					<view v-else class="normal_box">
						<view class="price_box">
							<template v-if="
								  curriculumData.activityPrice &&
								  curriculumData.activityPrice > 0
								">
								<text class="aui-text-danger price">
									￥{{ curriculumData.activityPrice }}
								</text>
								<text class="price original_price">原价：￥{{ curriculumData.price }}
								</text>
							</template>
							<template v-else>
								<text class="aui-text-danger price">
									￥{{ curriculumData.price }}
								</text>
							</template>
							<text class="price original_price sales_number" style="float: right">已售
								{{ curriculumData.sumSales }}件
							</text>
						</view>

						<view class="curriulum_title" style="margin-top: 40rpx">{{ curriculumData.productName }}
						</view>
					</view>

					<view class="price_box"> </view>
				</view>
			</view>

			<template>
				<common-sticky label="title" :itemStyle="`width:${
					cateList.length == 2 ? '50' : '33'
				  }%;padding-left: 15px; padding-right: 15px; height: 68rpx;`" :list="cateList"
					:currentCateIndex="currentCateIndex" @handleselectCate="handleselectCate">
				</common-sticky>
			</template>
			<view :class="`dataList `">
				<view class="goods_detail_list_title bg_box_shandow color_shandow bg_color PM_font">
					<view class="left" style="color: #294a97 !important">
						<u-icon name="grid" color="#294a97" size="23"
							style="display: inline-block; margin-right: 10rpx"></u-icon>
							商品规格
					</view>

					<text class="right" @click="openPopup">共{{ goodsList.length }}种商品可选择</text>
				</view>
				<common-goods-list imgUrl="url" isNoIcon imgMode="aspectFit" class="color_shandow" defaultUrl=""
					:isCondition="true" :dataList="goodsList" @hancleClick="selectGoods" label="title">
					<template slot="labelSlot" slot-scope="slotProps">
						<!-- isSelectGoods -->
						<view class="related_courses_name goodsList" :class="`goods_item ${
							selectGoodsData &&
							selectGoodsData.productId == slotProps.row.productId
							  ? ''
							  : ''
						  }`">
							<view class="image_box">
								<image :src="slotProps.row.productImages" mode="aspectFit" class="goods_image"></image>
							</view>
						</view>
					</template>
				</common-goods-list>
			</view>
			<view :class="`dataList parameterList`" v-if="booksList.length > 0">
				<view class="goods_detail_list_title bg_box_shandow color_shandow bg_color PM_font">
					<view class="left" style="color: #294a97 !important">
						<u-icon name="list" color="#294a97" size="23"
							style="display: inline-block; margin-right: 10rpx"></u-icon>
							书籍信息
					</view>
				</view>

				<common-list imgUrl="url" isNoIcon imgMode="aspectFit" class="color_shandow parameter_box book_box"
					defaultUrl="" :isCondition="true" :dataList="booksList" label="title">
					<template slot="labelSlot" slot-scope="slotProps">
						<!-- isSelectGoods -->
						<view class="related_courses_name" :class="`goods_item `">
							<view class="image_box" style="margin-right: 10rpx">
								<image :src="slotProps.row.images" mode="aspectFit" class="goods_image"></image>
							</view>
							<view :class="`goods_info `">
								<view class="name">
									<text style="color: #333"> {{ slotProps.row.name }}</text>
								</view>
							</view>
						</view>
					</template>
				</common-list>
			</view>
			<view :class="`dataList parameterList`" v-if="coursesList.length > 0">
				<view class="goods_detail_list_title bg_box_shandow color_shandow bg_color PM_font">
					<view class="left" style="color: #7dc1f0 !important">
						<u-icon name="list" color="#7dc1f0" size="23"
							style="display: inline-block; margin-right: 10rpx"></u-icon>
							课程信息
					</view>
				</view>

				<common-list imgUrl="url" isNoIcon imgMode="aspectFit" class="color_shandow parameter_box" defaultUrl=""
					:isCondition="true" :dataList="coursesList" label="title">
					<template slot="labelSlot" slot-scope="slotProps">
						<!-- isSelectGoods -->
						<view class="related_courses_name" :class="`goods_item `">
							<view class="image_box" style="margin-right: 10rpx">
								<image :src="slotProps.row.images" mode="aspectFit" class="goods_image"></image>
							</view>
							<view :class="`goods_info `">
								<view class="name">
									<text style="color: #333"> {{ slotProps.row.title }}</text>
								</view>
							</view>
						</view>
					</template>
				</common-list>
			</view>

			<u-divider text="商品参数" :hairline="true" textColor="#333" lineColor="#b0b0b0"></u-divider>
			<view class="parameter_info_box">
				<common-list imgUrl="url" isNoIcon imgMode="aspectFit" class="parameter_box parameter_info"
					defaultUrl="" :isCondition="true" :dataList="parameterList" @hancleClick="selectGoods" label="name">
					<template slot="labelSlot" slot-scope="slotProps">
						<!-- isSelectGoods -->
						<view class="related_courses_name" :class="`goods_item ${
							selectGoodsData &&
							selectGoodsData.productId == slotProps.row.productId
							  ? ''
							  : ''
						  }`">
							<view :class="`goods_info `">
								<view class="name">
									<text style="color: #333"> {{ slotProps.row.name }}：</text>
									<text v-if="slotProps.row.isTime">
										{{ slotProps.row.value | formatDate }}</text>
									<text v-else> {{ slotProps.row.value }}</text>
								</view>
							</view>
						</view>
					</template>
				</common-list>
			</view>

			<u-divider text="商品详情" :hairline="true" textColor="#333" lineColor="#b0b0b0"></u-divider>
			<view class="small_class_teaching_box">
				<view class="common_divider divider_box"> </view>

				<common-rich-detail :detailInfo="detailInfo" style="padding: 10rpx">
					<template #richHeadImg></template>
				</common-rich-detail>
				<view class="small_class_teaching_content">
				</view>
			</view>

			<view class="small_class_teaching_box related_courses_box" v-if="relatedCoursesList.length > 0">
				<view class="small_class_teaching_top">
					<view class="small_class_teaching_top_left">
						<image src="@/static/icon/course_ic.png" mode="aspectFil" class="icon1"></image>
						<text>相关课程</text>
					</view>
				</view>
				<view class="small_class_teaching_content">
					<common-curriculum-list imgUrl="url" :isCondition="true" :dataList="relatedCoursesList"
						@hancleClick="goCourseDescription" label="title">
						<template slot="labelSlot" slot-scope="slotProps">
							<view class="related_courses_name hidden1">{{ slotProps.row.title }}</view>
						</template>

						<template slot="rightSlot" slot-scope="slotProps">
							<text class="aui-text-danger">￥{{ slotProps.row.courseFee }}</text>
						</template>
					</common-curriculum-list>
				</view>
			</view>
		</view>
		<view class="goods_nav_box" v-if="!this.$store.state.loadingShow">
			<uni-goods-nav :fill="true" :options="buyOptions" :button-group="customButtonGroup1"
				@click="onHandleClick" @buttonClick="onHandleClickBuy1" />
		</view>
		<common-select-goods ref="commonSelectGoods" :selectGoodsData="selectGoodsData" :goodsList="goodsList"
			:buyOptions="buyOptions" :customButtonGroup1="customButtonGroup1" @selectGoods="selectGoods"
			@onHandleClickBuy="onHandleClickBuy"></common-select-goods>
		<u-popup :show="showInfo" mode="bottom" @close="closeShowInfo" class="popup_box">
			<view class="popup_top">
				<view class="product_image">
					<image :src="selectGoodsData.productImages" mode="aspectFit" class="goods_image"></image>
				</view>
				<view class="title">已选：{{ selectGoodsData.productName }}</view>
			</view>

			<view :class="`common_radius_box  goods_box popup_content`">
				<view class="title title_box"><text class="title_price">￥{{ selectGoodsData.price }}</text><u-icon
						name="close" color="#333" size="18" @click="close" style="display: inline-block"></u-icon>
				</view>
				<view class="title title_list"><text>商品列表（{{ goodsList.length }}）</text></view>

				<common-list imgUrl="url" isNoIcon imgMode="aspectFit" defaultUrl="" :isCondition="true"
					:dataList="goodsList" @hancleClick="selectGoods" label="title">
					<template slot="labelSlot" slot-scope="slotProps">
						<!-- isSelectGoods -->
						<view class="related_courses_name" :class="`goods_item ${
							selectGoodsData &&
							selectGoodsData.productId == slotProps.row.productId
							  ? 'isSelectGoods color_shandow'
							  : ''
						  }`">
							<view class="image_box" style="margin-right: 10rpx">
								<image :src="slotProps.row.productImages" mode="aspectFit" class="goods_image"></image>
							</view>

							<view :class="`goods_info `">
								<view class="name">{{ slotProps.row.productName }}</view>
								<view class="price">{{ slotProps.row.price }}</view>
							</view>
						</view>
					</template>
				</common-list>

				<view class="goods_nav_box">
					<uni-goods-nav :fill="true" :options="buyOptions" :button-group="customButtonGroup1"
						@click="onHandleClickBuy" @buttonClick="onHandleClickBuy" />
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import courseDescription from "@/pages/component/commonComponents/list";

	import $http from "@/config/requestConfig.js";
	import {
		mapState
	} from "vuex";
	export default {
		components: {
			courseDescription, //课程说明
		},
		data() {
			return {
				detailInfo: {},
				showInfo: false,
				selectGoodsData: {},
				parameterList: [],
				booksList: [],
				coursesList: [],
				buyOptions: [{
				  icon: "cart",
				  text: "购物车",
				}],
		
				swiperList: [],
				goodsList: [],
				options: {},
				relatedCoursesList: [], //相关课程
				curriculumData: {},
				curriculumInfo: {},
				detailInfo: {},
				fdButtonStyle: {
					width: "120rpx",
					"border-color": "#3AB3AE",
					color: "#3AB3AE",
					float: "right",
					"margin-right": "20rpx",
					"margin-left": "30rpx",
				},
				modalInfo: {},

				show: false,
				playData: {},
				taiHuClassInfo: {},
				searchValue: "",
				cateList: [], // 一级分类标题1
				twoCateList: [], // 二级分类标题
				dataList: [], // 方剂标题
				allDataList: [], // 方剂标题
				currentStatusIndex: 0, // 当前选中的一级分类
				currentCateIndex: 0, // 当前选中的一级分类
				curTwoCateIndex: 0, // 当前选中的二级分类
				searchList: [], // 搜索结果数组
				showSearchList: false,
				userMes: {}, // 用户信息
				searchDisable: false, // 搜索不可用
				limitShow: false,
				limitTitle: "提示",
				limitContent: "",
				scrollViewHeight: 0,
				urlList: {
					list: "app/phone.do?getCourseDetail_new",
					curriculumInfo: "app/phone.do?getCourseInfo",

					goodsList: "book/shopproduct/getGlProductList",
				},
				customButtonGroup1: [
				{
					text: "加入购物车",
					backgroundColor: "linear-gradient(90deg, #FFCD1E, #FF8A18)",
					color: "#fff",
				},
				{
					text: "立即购买",
					backgroundColor: "linear-gradient(90deg, #FE6035, #EF1224)",
					color: "#fff",
				}, ],
				buttonType: '',  //点击的是加入购物车还是购买
				cartList: [], // 购物车列表
				productAmount: 1, // 商品数量
			};
		},
		onLoad(options) {
			this.options = options;
		},
		onHide() {
			this.selectGoodsData = {};
			this.$refs.commonSelectGoods.close();
		},
		onUnload() {
			this.selectGoodsData = {};
			this.$refs.commonSelectGoods.close();
			this.show = false;
		},
		onShow() {
			if (this.options.type == "visitor") {
				this.urlList.detailInfo = "visitor/getProductDetail";
			} else {
				this.urlList.detailInfo = "sociology/product/getProductDetail";
			}
			this.selectGoodsData = {};
			this.getCourseDescriptionData();
			this.show = false;
		},
		computed: {
			...mapState(["userInfo"]),
		},
		methods: {
			//时间格式化
			formatDate(date) {
				let newDate = new Date(date);
				let year = newDate.getFullYear();
				let month = newDate.getMonth().toString().padStart(2, 0);
				let day = newDate.getDay().toString().padStart(2, 0);
				return year + "-" + month + "-" + day;
			},
			closeShowInfo() {
				this.showInfo = false;
			},
			openBookInfo() {
				this.showInfo = true;
			},
			openPopup() {
				if (this.options.type == "visitor") {
					return;
				}
				this.$refs.commonSelectGoods.open();
				this.$forceUpdate();
			},
			close() {
				this.show = false;
			},
			selectGoods(data) {
				if (this.options.type == "visitor") {
					return;
				}
				this.selectGoodsData = data;
				this.$refs.commonSelectGoods.open();
				this.$forceUpdate();
			},
			
			//点击购物车
			onHandleClick(){
				console.log('点击购物车')
				uni.navigateTo({
					url: "/pages/goods/shopping",
				});
			},
			//点击筛选商品
			onHandleClickBuy1(e) {
				this.buttonType = e.index;
				if (this.options.type == "visitor") {
					uni.showModal({
						content: "登陆后可购买本商品",
						confirmText: "去登录",
						cancelText: "再逛逛",
						confirmColor: '#7dc1f0', //确定按钮颜色
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/user/login",
								});
							}
						},
					});
					return;
				}
				this.$refs.commonSelectGoods.open();
			},
			//点击下单按钮
			onHandleClickBuy() {
				if(this.buttonType==0){  //如果是加入购物车
					console.log('剩余', this.selectGoodsData.productStock)
					if(this.selectGoodsData.productStock==0){
						uni.showToast({
							title: "商品库存不足",
							icon: "none",
							duration: 1000,
						});
					}else{
						this.$http.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
						  .then((res) => {
						    this.cartList = res.cartList;
						    this.isAddLink(this.selectGoodsData);
						  });
					}
				}else{  //如果是正常下单
					var mynavData = JSON.stringify({
						goods: [{
							productImages: this.selectGoodsData.productImages,
							productId: this.selectGoodsData.productId,
							productName: this.selectGoodsData.productName,
							goodsType: this.selectGoodsData.goodsType,
						}],
						typeId: 0
					});
					uni.navigateTo({
					  url: `/pages/goods/order?data=${mynavData}`,
					});
				}
			},
			 //统计商品信息
			isAddLink(item) {
			  let data = {
			    userId: this.userInfo.id,
			    productId: item.productId,
			    productAmount: this.productAmount,
			    price: item.price,
			  };
			  // 判断列表是否为空
			  if (this.cartList.length > 0) {
			    let flag = "";
			    let shagnpin = {};
			    // 循环购物车列表
			    flag = this.cartList.some((item, index) => {
			      if (item.productId == data.productId) {
			        shagnpin = item;
			        shagnpin.productAmount = item.productAmount + 1;
			        return true;
			      }
			    });
			    if (flag) {
			      // 已在购物车中添加
			      $http.request({
			          url: "book/ordercart/update",
			          method: "POST",
			          data: shagnpin,
			          header: {
			            "Content-Type": "application/json",
			          },
			        })
			        .then((res) => {
			          if (res.code == 0) {
			            uni.showToast({
			              title: "加入购物车成功",
			              duration: 1000,
			            });
			          }
			        });
			    } else {
			      // 加入购物车
			      $http.request({
			          url: "book/ordercart/save",
			          method: "POST",
			          data,
			          header: {
			            "Content-Type": "application/json",
			          },
			        })
			        .then((res) => {
			          if (res.code == 0) {
			            uni.showToast({
			              title: "加入购物车成功",
			              duration: 1000,
			            });
			          }
			        });
			    }
			  } else {
			    // 购物车列表为空时直接加入购物车
			    $http.request({
			        url: "book/ordercart/save",
			        method: "POST",
			        data,
			        header: {
			          "Content-Type": "application/json",
			        },
			      })
			      .then((res) => {
			        if (res.code == 0) {
			          uni.showToast({
			            title: "加入购物车成功",
			            duration: 1000,
			          });
			        }
			      });
			  }
			  this.$refs.commonSelectGoods.close();
			},
			buttonClick(e) {
				console.log(e);
				this.options[2].info++;
			},
			//课程详情
			async gotoDetail(v) {
				var result = await this.$commonJS.getCheckCourseStatus({
					oid: v.courseOid,
				});

				if (result.buyFlg == 0 && v.conditions != "01") {
					this.$commonJS.showToast("请先购买课程");
					return;
				}

				uni.navigateTo({
					url: `/pages/curriculum/order/detail?navTitle=${v.title}&title=${v.title}&oid=${v.courseOid}&conditions=${v.conditions}&detailOid=${v.detailOid}`,
				});
			},
			//相关课程
			goCourseDescription(v) {
				console.log(v);
				uni.navigateTo({
					url: `/pages/curriculum/order/index?navTitle=${v.title}&title=${v.title}&oid=${v.oid}`,
				});
			},
			async getCourseDescriptionData() {
				var data = {};
				var that = this;
				uni.showLoading({
					title: '加载中'
				})
				this.$http
					.request({
						url: this.urlList.detailInfo,
						method: "POST",
						data: {
							productId: this.options.id,
						},
						header: {
							"Content-Type": "application/json",
						},
					})

					.then(async (res) => {
						uni.hideLoading();
						that.selectGoodsData = res.data.GLProducts[0];
						that.curriculumData = res.data.detail;
						that.booksList = res.data.books ? res.data.books : [];
						that.coursesList = res.data.courses ? res.data.courses : [];
						that.goodsList = res.data.GLProducts;

						that.parameterList = [];
						if (that.curriculumData.productName) {
							that.parameterList.push({
								name: "书名",
								value: that.curriculumData.productName,
							});
						}
						if (that.curriculumData.author) {
							that.parameterList.push({
								name: "作者",
								value: that.curriculumData.author,
							});
						}
						if (that.curriculumData.publisher) {
							that.parameterList.push({
								name: "出版社",
								value: that.curriculumData.publisher,
							});
						}
						if (that.curriculumData.pubDate) {
							that.parameterList.push({
								name: "出版时间",
								value: that.curriculumData.pubDate,
								isTime: true,
							});
						}
						if (that.curriculumData.format) {
							that.parameterList.push({
								name: "开本",
								value: that.curriculumData.format,
							});
						}
						if (that.curriculumData.pageNum) {
							that.parameterList.push({
								name: "页数",
								value: that.curriculumData.pageNum,
							});
						}
						if (that.curriculumData.quality) {
							that.parameterList.push({
								name: "内文用纸材质",
								value: that.curriculumData.quality,
							});
						}

						if (
							that.curriculumData.productImageList == null ||
							that.curriculumData.productImageList == ""
						) {
							this.swiperList.push(that.curriculumData.explainsImg);
						} else {
							that.swiperList = that.curriculumData.productImageList.split(",");
						}

						this.detailInfo = {
							content: this.curriculumData.productDetails,
						};
					});
			},
			
			// 获取用户详情
			getUserInfo() {
				// 用户详情
				if (this.userInfo.id != undefined) {
					this.$http.post("book/user/info/" + this.userInfo.id).then((res) => {
						this.userMes = res.user;
						this.getCateList();
						console.log(this.userMes, "呼呼");
					});
				}
			},

			async handleselectCate(item, index) {
				this.dataList = [];
				var data = [];
				var that = this;
				this.$http
					.post(this.urlList.curriculumInfo, {
						customerType: "D",
						token: uni.getStorageSync("token"),
						customerOid: uni.getStorageSync("customerOid"),
						oid: item.coid,
					})
					.then(async (res) => {
						that.curriculumInfo = res.obj;
						that.dataList = res.obj.courseList;
					});

				this.searchValue = "";
				this.searchList = [];
				this.showSearchList = false;

				return data;
			},
			async getDetailInfo() {
				var that = this;

				this.searchValue = "";
				this.searchList = [];
				this.showSearchList = false;
	
				return data;
			},
			getCateList(id) {
				id ? "" : (id = 0);
				this.twoCateList = [];
				this.curTwoCateIndex = 0;
			},
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/static/mixin.scss";
	.searchList {
		.item {
			font-size: 28rpx;
			padding: 20rpx;
			border-bottom: 1px solid #dadbde;
		}
	}

	.scroll-view_H {
		background-color: #fff;
		white-space: nowrap;
		padding: 10rpx;
	}

	.contentBox {
		height: calc(100% - 50px);

		.statusList {
			padding: 10rpx;
			box-sizing: border-box;
			justify-content: space-between;

			text {
				text-align: center;
				display: inline-block;
				width: 32%;
				padding: 20rpx 0;
				font-size: 34rpx;
				border-radius: 10rpx;
			}

			.cur {
				background-color: $themeColor;
				color: #fff;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			}
		}

		.twoCateList {
			font-size: 28rpx;
			margin-top: 20rpx;

			.grid-text {
				padding: 10rpx 0rpx;
				text-align: center;
			}

			.cur {
				color: $themeColor;
			}

			// .u-grid-list{border: 0.5px solid #dadbde;}
		}

		.dataList {
			font-size: 26rpx;
			padding-bottom: 40rpx;
			// margin-top: 20rpx;
			// padding: 32rpx 0rpx;
			border-radius: 10rpx;
			background-color: #fff;
			box-sizing: border-box;

			.JFtitleItem {
				background-color: #ffffff;
				padding: 20rpx 10rpx;
				width: 100%;
				border-bottom: 0.5px solid #f8f9fa;
			}

			.wmzhimg {
				width: 220rpx;
				height: 220rpx;
			}
		}
	}

	.search_box {
		margin: 0 auto;
		overflow: hidden;
		align-items: center;
		width: calc(100% - 10px);
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		.search {
			height: 56upx;
			display: flex;
			width: 86%;
			margin: 0 auto;
			align-items: center;
			padding: 0upx 40upx;
			background-color: #fff;
			border-radius: 20upx;
			box-shadow: 0 0px 10px 1px #3ab3ae33;
		}

		.prompt {
			color: #838383;
			font-size: 24rpx;
		}

		.icon_search {
			background-image: url("@/static/icon/map_ic_search.png");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			width: 36upx;
			height: 36upx;
			margin-right: 20upx;
		}
	}

	.flexbox {
		display: flex;
	}

	.uni-modal .uni-modal__bd {
		text-align: left;
	}

	.limiTy {
		font-size: 28rpx;
		line-height: 46rpx;
	}

	.chImage {
		height: 100rpx;
	}

	.dataList {
		height: 100%;
	}

	.titleList2 {
		height: calc(100% - 150rpx);
	}

	.priceDetail {
		height: calc(100% - 180rpx) !important;
		padding: 0rpx 0;
		box-sizing: border-box;
	}

	.componentPage {
		height: calc(100% - 90rpx) !important;
	}

	.dateReminder {
		width: 100%;
		font-size: 24rpx;
		text-align: right;
		line-height: 40rpx;
	}

	.fdButtonBox {
		border: 1rpx solid $themeColor;
		background-color: $themeColor;
		color: #fff;
		// width: 100%;
		float: right;
		padding: 4rpx 14rpx;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.headImage {
		
	}

	.commonDetailPage {
		padding-bottom: 40rpx !important;
	}

	.goods_box {
		background-color: #fff;
		box-sizing: border-box;
		width: 100%;

		.curriulum_title_box {
			width: calc(100%) !important;
			padding-bottom: 20rpx;
			background-color: #fff;

			.curriulum_title {
				padding: 0 30rpx;
				width: calc(100%);
				font-weight: 600;
				font-size: 38rpx;
				margin-top: 40rpx;
				margin-bottom: 30rpx;
				box-sizing: border-box;
			}
		}
	}

	.dataList {
		background-color: #fff !important;
		padding: 0 30rpx 40rpx !important;
		box-sizing: border-box;
	}

	/deep/.scroll-view-item:nth-child(2n-1) {
		background-color: transparent !important;
	}

	.dataList {
		height: auto !important;
	}

	.small_class_teaching_box {
		padding-top: 20rpx;
		width: 100%;
		margin-top: 20rpx;
		background: #fff;

		.small_class_teaching_top {
			padding: 20rpx 20rpx 0 10rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// background: #EDFCF7;
			color: #8f8e8e;

			// box-shadow: 0px 0px 6rpx 0px #E9DCCC;
			.icon1 {
				width: 50rpx;
				height: 50rpx;
			}

			.small_class_teaching_top_left {
				display: flex;
				align-items: center;
				color: #7dc1f0;

				font-family: MicrosoftYaHei;
			}
		}

		.small_class_teaching_content {
			margin-top: 20rpx;
			// background: #EDFCF7;
			padding-bottom: 10rpx;

			.top {
				padding: 20rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 4rpx solid #fff;

				.top_item {
					width: 23%;
					font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
					font-weight: normal;
					font-size: 34rpx;
					color: #294a97;
					line-height: 80rpx;
					background: #cef8ea;
					text-align: center;
					border-radius: 10rpx;
					box-shadow: 0px 0px 6rpx 0px #e9dccc;
				}
			}

			.schedule {
				width: 100%;
				overflow: hidden;
				padding: 20rpx 20rpx;
				box-sizing: border-box;
				align-items: center;
				color: #018f89;

				font-family: MicrosoftYaHei;

				.icon_box {
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 0rpx;

					.icon1 {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}

				.progress_box {
					width: 100%;
					display: flex;
					align-items: center;
					position: relative;

					.progress_icon {
						width: calc(100% - 240rpx);
					}

					.icon1 {
						width: 60rpx;
						height: 60rpx;
						margin: 0 20rpx;
					}

					.icon2 {
						width: 140rpx;
						height: 100rpx;
						position: absolute;
						right: 0;
						// margin-top: -20rpx;
					}
				}
			}
		}
	}

	.related_courses_box {
		background-color: #fff;

		.small_class_teaching_content {
			padding: 10rpx 20rpx;
			box-sizing: border-box;
		}
	}

	.related_courses_name {
		display: inline-block;
		width: calc(100% - 0rpx) !important;

		.aui-text-danger {
			display: inline-block;
			float: right;
		}
	}

	.original_price {
		font-size: 28rpx !important;
		font-weight: normal;
		white-space: nowrap;
		text-decoration: line-through;
		float: left;
		margin-top: 6rpx;
		margin-left: 20rpx;
	}

	.price {
		font-size: 48rpx;
		font-weight: 700;
		float: left;
		margin-right: 10rpx;
	}

	.price_box {
		width: 100%;
		overflow: hidden;
	}

	.commonTags {
		margin-right: 20rpx;
		margin-top: -5rpx !important;
	}

	.sales_number {
		text-decoration: none;
		color: #b0b0b0;
		font-weight: 500;
	}

	.miaosha_box {
		overflow: hidden;

		.countdown {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24rpx;
		}

		.price_left {
			width: calc(100% - 300rpx);
			float: left;
		}

		.price_box {
			.price {
				color: #fff !important;
			}

			.sales_number {
				display: block;
				width: 100%;
				color: #fff !important;
				font-weight: 500;
				padding-left: 10rpx;
				margin-left: 0rpx;
				font-size: 24rpx !important;
			}

			padding: 30rpx 20rpx 30rpx;
			background: linear-gradient(to right, #ff2701, #fd8d024d);
		}
	}

	.normal_box {
		padding: 40rpx 30rpx;
	}

	.xianshimaiosha_box {
		width: 300rpx;
		height: 100%;
		float: right;
	}

	.xianshimaiosha {
		display: inline-block;
		width: 100%;
		line-height: 100rpx;
		font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
		font-weight: blod;
		font-size: 64rpx;
		color: red;
		text-align: right;
		padding-right: 20rpx;
		box-sizing: border-box;
		font-style: italic;
	}

	// .common_curriculum_list{

	// }
	/deep/.common_curriculum_list {
		margin-top: 20rpx;
		padding: 20rpx 20rpx 20rpx;

		.content_item {
			width: 100% !important;
			margin-bottom: 0 !important;
			padding: 15rpx 0 0rpx;
			border-top: 1rpx solid #f1f0f0;
			// height: 160rpx;

			.book_image {
				width: 60rpx !important;
				height: 60rpx !important;
				float: left !important;
				background-color: #f5f5f5;
			}

			.common_curriculum_item {
				width: calc(100% - 88rpx);
				float: right;
				display: block !important;

				// overflow: hidden;

				.related_courses_name {
					width: 100% !important;
				}
			}
		}

		.content_item:nth-child(1) {
			border-top: none !important;
		}
	}

	/deep/.common_section {
		padding: 0 !important;
		padding-bottom: 20rpx !important;
	}

	.goods_detail_list_title {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
		}

		.right {
			font-size: 24rpx;
			font-weight: 500 !important;
			color: #333;
			font-family: none;
		}
	}

	.commonPageContentBox {
		height: auto !important;
	}

	.goods_item {
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-bottom: 20rpx;
		padding: 10rpx 20rpx;
		border: 2rpx solid #fff;
		border-radius: 10rpx;
	}

	.title {
		box-sizing: border-box;
		// font-weight: bold;
		margin-bottom: 40rpx;
		padding-left: 20rpx;
	}

	.image_box {
		width: 70rpx;
		height: 70rpx;
		float: left;
		background-color: #f5f5f5;
	}

	.goods_image {
		width: 100%;
		height: 100%;
	}

	.goods_info {
		width: calc(100%);
		// padding: 10rpx 20rpx;
		box-sizing: border-box;
		// height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		float: left;

		.name {
			font-size: 26rpx;
			color: #333;
		}

		.price {
			font-size: 26rpx;
			color: #aaa;
		}
	}

	.isSelectGoods {
		color: $themeColor !important;

		.name {
			color: $themeColor !important;
		}

		.price {
			color: $themeColor !important;
		}

		border: 2rpx solid $themeColor;
		border-radius: 10rpx;
	}

	/deep/.list_item {
		// border-bottom: none;
		padding: 10rpx 0 !important;
		padding-right: 0 !important;
	}

	.parameterList {
		/deep/.list_item {
			// border-bottom: none;
			padding: 0 !important;
			border: none !important;
			box-shadow: none !important;
		}

		.parameter_box {
			padding: 20rpx 0;
		}

		.goods_item {
			padding-top: 5rpx !important;
			padding-bottom: 5rpx !important;
		}
	}

	.parameter_info_box {
		padding: 0 20rpx;
	}

	.parameter_info {
		/deep/.list_item {
			// border-bottom: none;
			padding: 0 !important;
			border: none !important;
			box-shadow: none !important;
		}

		.goods_item {
			border: none !important;
		}
	}

	.goodsList {
		.image_box {
			width: 80rpx;
			height: 80rpx;
			float: left;
			background-color: #f5f5f5;
		}
	}

	/deep/.u-popup__content {
		background-color: transparent !important;
	}

	/deep/.u-popup__content__close {
		color: #fff !important;
	}

	.title_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 0;

		.title_price {
			color: #ef1224;
			font-size: 40rpx;
			font-weight: 700;
		}
	}

	.title_list {
		margin-bottom: 20rpx;
	}

	.book_box {
		.image_box {
			width: 160rpx;
			height: 160rpx;
		}

		.goods_info {
			display: block;
		}
	}
	.putong{
		padding: 30rpx 30rpx 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	/deep/.uni-tab__text{
		font-size: 26rpx;
		line-height: 28rpx;
	}
</style>