<template><page-meta
    :page-font-size="$baseFontSize() + 'px'"
    :root-font-size="$baseFontSize() + 'px'"
  ></page-meta>
	<view class="container commonPageBox commonDetailPage">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="商品详情" bgColor="#3AB3AE" fontColor="#fff"></z-nav-bar>

		<view class="contentBox commonPageContentBox" v-if="!this.$store.state.loadingShow">
			<!-- :indicator-dots="true" -->
			<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="curriculumData.explainsImg" mode="widthFix" class="headImage"></image> -->
					<image :src="item" mode="aspectFit" style="width: 100%; height: 100%" @click="previewImage(item)">
					</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">
							<view class="price_left">
								<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>

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

							<view class="xianshimaiosha_box">
								<text class="xianshimaiosha">秒杀商品</text>

								<!-- <view class="countdown">

                                    <text style="margin-right: 8rpx;">距结束</text>
                                    <uni-countdown :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF"
                                        :font-size="12" backgroundColor="#000" />
                                </view> -->
							</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="`priceDetail`" v-if="this.statusList[this.currentStatusIndex].type == 'price'">

                <scroll-view scroll-y="true" class="scroll-Y">
                    <price ref="priceDetail" type="price" :oid="this.statusList[this.currentStatusIndex].oid"></price>

                </scroll-view>




            </view>
            <view :class="`priceDetail`" v-else-if="this.statusList[this.currentStatusIndex].type == 'purchaseNotice'">

                <scroll-view scroll-y="true" class="scroll-Y">
                    <price ref="purchaseNotice" :oid="this.statusList[this.currentStatusIndex].oid"></price>

                </scroll-view>




            </view>
 -->

			<view :class="`dataList `">
				<view class="goods_detail_list_title bg_box_shandow color_shandow bg_color PM_font"
					style="background-color: #d8f8e4">
					<view class="left">
						<u-icon name="grid" color="#018F89" 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>

						<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
					</template>

					<!-- <template slot="rightSlot" slot-scope="slotProps">

                        <view v-if="slotProps.row.surplusNum" class="related_courses_right">


                            <view class="progress_icon" style=""><u-line-progress activeColor="#3AB3AE" height="14"
                                    :percentage="30" :showText="false" showText></u-line-progress></view>
                            <view
                                :class="slotProps.row.surplusNum < 30 ? 'aui-text-danger dateReminder' : 'dateReminder'">
                                距&nbsp;{{ slotProps.row.surplusNum }}&nbsp;天到期</view>

                        </view>
                        <view v-if="slotProps.row.inType == '03'" class="fdButtonBox">


                            <u-button type="primary" :plain="true" text="复读一月" :customStyle="fdButtonStyle" size="small"
                                @click.native.stop="fnRelearn(slotProps.row.inType, 30, slotProps.row.courseFee)"></u-button>
                            <u-button type="primary" :plain="true" text="复读三月" :customStyle="fdButtonStyle" size="small"
                                @click.native.stop="fnRelearn(slotProps.row.inType, 90, slotProps.row.courseFee)"></u-button>

                        </view>

                        <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: #018f89 !important">
						<u-icon name="list" color="#018F89" 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>

						<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
					</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: #018f89 !important">
						<u-icon name="list" color="#018F89" 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>

						<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
					</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>

						<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
					</template>

					<!-- <template slot="rightSlot" slot-scope="slotProps">

                        <view v-if="slotProps.row.surplusNum" class="related_courses_right">


                            <view class="progress_icon" style=""><u-line-progress activeColor="#3AB3AE" height="14"
                                    :percentage="30" :showText="false" showText></u-line-progress></view>
                            <view
                                :class="slotProps.row.surplusNum < 30 ? 'aui-text-danger dateReminder' : 'dateReminder'">
                                距&nbsp;{{ slotProps.row.surplusNum }}&nbsp;天到期</view>

                        </view>
                        <view v-if="slotProps.row.inType == '03'" class="fdButtonBox">


                            <u-button type="primary" :plain="true" text="复读一月" :customStyle="fdButtonStyle" size="small"
                                @click.native.stop="fnRelearn(slotProps.row.inType, 30, slotProps.row.courseFee)"></u-button>
                            <u-button type="primary" :plain="true" text="复读三月" :customStyle="fdButtonStyle" size="small"
                                @click.native.stop="fnRelearn(slotProps.row.inType, 90, slotProps.row.courseFee)"></u-button>

                        </view>

                        <view>


                        </view>

                    </template> -->
				</common-list>
			</view>

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

				<common-rich-detail :detailInfo="detailInfo" style="padding: 10rpx">
					<template #richHeadImg>
						<!-- <image :src="curriculumData.imgUrl" mode="widthFix" class="headImage"></image> -->

						<!-- <image :src="detailInfo.imgUrl" v-if="detailInfo.imgUrl" mode="widthFix" class="headImage"></image> -->
					</template>
				</common-rich-detail>

				<!-- <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>
                    <text>{{ curriculumInfo.remainingDays }}</text>


                </view> -->
				<view class="small_class_teaching_content">
					<!-- <view class="top">
                        <view class="top_item" v-for="(v, i) in teachingList">
                            {{ v.title }}


                        </view>


                    </view> -->

					<!-- <view class="schedule">

                        <view class="icon_box">
                            <image src="@/static/icon/course_07.png" mode="aspectFil" class="icon1">学习进度</image>


                        </view>
                        <view class="progress_box">
                            <view class="progress_icon" style=""><u-line-progress activeColor="#3AB3AE" height="18"
                                    :percentage="30" :showText="false" showText></u-line-progress></view>
                            <image src="@/static/icon/curriculum_05.png" mode="aspectFil" class="icon1" />
                            <image src="@/static/icon/curriculum_07.png" mode="aspectFil" class="icon2" />
                        </view>

                    </view> -->
				</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>

							<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
						</template>

						<template slot="rightSlot" slot-scope="slotProps">
							<!-- {{ slotProps.row.bxType }} -->

							<text class="aui-text-danger">
								￥{{ slotProps.row.courseFee }}</text>

							<view> </view>
						</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="onHandleClickBuy" @buttonClick="onHandleClickBuy1" />
		</view>
		<!-- 
    <u-modal
      :show="show"
      :title="modalInfo.title"
      :content="modalInfo.content"
      showCancelButton
      @confirm="hancleModalConfirm"
      @cancel="hancleModalCancel"
    ></u-modal> -->
		<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" style="color: #3ab3ae">{{
                  slotProps.row.price
                }}</view>
							</view>
						</view>

						<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
					</template>
				</common-list>

				<view class="goods_nav_box">
					<uni-goods-nav :fill="true" :options="buyOptions" :button-group="customButtonGroup1"
						@click="onHandleClickBuy" @buttonClick="onHandleClickBuy" />
				</view>
				<!-- <view>
          <text @click="handleClickClose">取消</text>
          <text @click="handleClickGoBuy">立即购买</text>
        </view>-->
			</view>
		</u-popup>
		<z-navigation></z-navigation>
	</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: 'chat',
					// 		text: '客服'
					// 	},
					// {
					//   icon: "shop",
					//   text: "店铺",
					//   // info: 2,
					//   infoBackgroundColor: "#007aff",
					//   infoColor: "#f5f5f5",
					// },
					//  {
					// 	icon: 'cart',
					// 	text: '购物车',
					// 	info: 2
					// }
				],

				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: "",
				teachingList: [{
						title: "临床实践",

						type: "02",
						apiUrl: "app/phoneDoctor.do?getTaiHuToShine",
					},
					{
						title: "学习问答",
						type: "03",
						oid: "8a9fb99809e4428888aad6b56a3096a6",
					},
					{
						title: "学习心得",

						type: "01",
					},
					{
						title: "在线作业",

						type: "04",
						oid: "d0f47071c2194e94845fbb373d06f59d",
					},
				], // 一级分类标题1
				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: [{
					with: 200,
					text: "立即购买",
					backgroundColor: "linear-gradient(90deg, #FE6035, #EF1224)",
					color: "#fff",
				}, ],
			};
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) {
				//控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match
						.replace(/style="[^"]+"/gi, "")
						.replace(/style='[^']+'/gi, "");
					match = match
						.replace(/width="[^"]+"/gi, "")
						.replace(/width='[^']+'/gi, "");
					match = match
						.replace(/height="[^"]+"/gi, "")
						.replace(/height='[^']+'/gi, "");
					return match;
				});
				newContent = newContent.replace(
					/style="[^"]+"/gi,
					function(match, capture) {
						match = match
							.replace(/width:[^;]+;/gi, "max-width:100%;")
							.replace(/width:[^;]+;/gi, "max-width:100%;");
						return match;
					}
				);
				newContent = newContent.replace(/<br[^>]*\/>/gi, "");
				newContent = newContent.replace(
					/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'
				);
				return newContent;
			},
			// 时间格式化
			formatDate(date) {
				console.log(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;
			},
		},
		onLoad(options) {
			this.options = options;

			// this.handleClickGetGoodsList();
			// this.getUserInfo()
			// this.getCateList()
		},
		onHide() {
			this.selectGoodsData = {};
			this.$refs.commonSelectGoods.close();
			// this.showSearchList = false
			// this.searchList = []
		},
		onUnload() {
			this.selectGoodsData = {};
			this.$refs.commonSelectGoods.close();
			this.show = false;
			// this.showSearchList = false
			// this.searchList = []
		},
		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: {
			closeShowInfo() {
				this.showInfo = false;
			},
			openBookInfo() {
				this.showInfo = true;
			},
			openPopup() {
				if (this.options.type == "visitor") {
					// console.log("this.options.type at line 1090:", this.options.type);
					// uni.showModal({
					//   content: "登陆后可购买本商品",
					//   confirmText: "去登录",
					//   cancelText: "再逛逛", confirmColor:'#018f89',//确定按钮颜色
					//   success(res) {
					//     if (res.confirm) {
					//       uni.navigateTo({
					//         url: "/pages/user/login/login",
					//       });
					//     }
					//   },
					// });
					return;
				}
				// this.selectGoodsData = this.goodsList[0];
				this.$refs.commonSelectGoods.open();
				// this.show = true;
				this.$forceUpdate();
			},
			close() {
				this.show = false;
			},
			selectGoods(data) {
				if (this.options.type == "visitor") {
					// console.log("this.options.type at line 1090:", this.options.type);
					// uni.showModal({
					// 	content: "登陆后可购买本商品",
					// 	confirmText: "去登录",
					// 	cancelText: "再逛逛",
					// 	confirmColor: '#018f89', //确定按钮颜色
					// 	success(res) {
					// 		if (res.confirm) {
					// 			uni.navigateTo({
					// 				url: "/pages/user/login/login",
					// 			});
					// 		}
					// 	},
					// });
					return;
				}
				this.selectGoodsData = data;
				this.$refs.commonSelectGoods.open();
				// this.show = true;
				this.$forceUpdate();
			},

			onHandleClickBuy1() {
				if (this.options.type == "visitor") {
					console.log("this.options.type at line 1090:", this.options.type);
					uni.showModal({
						content: "登陆后可购买本商品",
						confirmText: "去登录",
						cancelText: "再逛逛",
						confirmColor: '#018f89', //确定按钮颜色
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/user/login/login",
								});
							}
						},
					});
					return;
				}
				this.$refs.commonSelectGoods.open();
				// this.show = true;
			},
			onHandleClickBuy() {
				console.log(
					this.selectGoodsData,
					"this.selectGoodsDatathis.selectGoodsDatathis.selectGoodsData"
				);
				var mynavData = JSON.stringify({
					goods: [{
						productImages: this.selectGoodsData.productImages,
						productId: this.selectGoodsData.productId,
						productName: this.selectGoodsData.productName,
						price: this.selectGoodsData.activityPrice ?
							this.selectGoodsData.activityPrice : this.selectGoodsData.price,
						goodsType: this.selectGoodsData.goodsType,
					}, ],

					navTitle: this.options.navTitle,
					title: this.options.title,
					typeId: 0,
				}); // 这里转换成 字符串

				uni.navigateTo({
					url: `/pages/goods/order/index?data=${mynavData}`,
				});
				// uni.navigateTo({
				//     // url: '../bookShop/commodityDetail?id=' + item.id
				//     url: `/pages/goods/order/index?navTitle=${this.options.navTitle}&title=${this.options.title}&oid=${this.options.oid}&conditions=${this.options.conditions}&detailOid=${this.options.detailOid}`
				// })
			},
			buttonClick(e) {
				console.log(e);
				this.options[2].info++;
			},

			hancleModalConfirm() {
				var data = {
					values: {
						customerType: "D",
						token: uni.getStorageSync("token"),
						customerOid: uni.getStorageSync("customerOid"),
						...this.taiHuClassInfo,
					},
				};
				// $mars.progressBegin('申请中...');
				// $mars.post(customerType, 'applyRelearn', data, function (ret) {
				//     api.hideProgress();

				//     fnLoadDataGrid();
				// });
			},
			fnRelearn(oid, days, courseFee) {
				//99和199课程复读一个月60三个月120; 299和399课程复读一个月80三个月180
				//499和599课程复读一个月90三个月220; 699和799课程复读一个月100三个月248
				var feeAs = [
					[60, 120],
					[80, 180],
					[90, 220],
					[100, 248],
				];
				var fee = 0;
				if (courseFee < 206) {
					fee = feeAs[0][days == 30 ? 0 : 1];
				} else if (courseFee < 406) {
					fee = feeAs[1][days == 30 ? 0 : 1];
				} else if (courseFee < 606) {
					fee = feeAs[2][days == 30 ? 0 : 1];
				} else {
					fee = feeAs[3][days == 30 ? 0 : 1];
				}
				this.modalInfo = {
					title: "提示信息",
					content: "用户您好，该课程已到期，通过支付" +
						fee +
						"元，本门课程可获得" +
						days +
						"天延期学习时间，点击确认即完成自动扣费，感谢配合！",
				};

				this.taiHuClassInfo = {
					taiHuClassOid: oid,
					days: days,
					fee: fee,
				};
				this.show = true;
				// $aui.alert({
				//     title: ,
				//     content: '用户您好，该课程已到期，通过支付' + fee + '元，本门课程可获得' + days + '天延期学习时间，点击确认即完成自动扣费，感谢配合！',
				//     buttons: ['取消', '确认'],
				//     radius: 6,
				//     titleColor: '#ff3300',
				//     contColor: '#333',
				//     btnColor: ''
			},
			//课程详情
			async gotoDetail(v) {
				console.log(v);

				var result = await this.$commonJS.getCheckCourseStatus({
					oid: v.courseOid,
				});
				console.log("result at line 364:", result);

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

				uni.navigateTo({
					// url: '../bookShop/commodityDetail?id=' + item.id
					url: `/pages/curriculum/order/curriculum/detail?navTitle=${v.title}&title=${v.title}&oid=${v.courseOid}&conditions=${v.conditions}&detailOid=${v.detailOid}`,
				});
			},
			//相关课程
			goCourseDescription(v) {
				console.log(v);
				uni.navigateTo({
					// url: '../bookShop/commodityDetail?id=' + item.id
					url: `/pages/curriculum/order/curriculum/index?navTitle=${v.title}&title=${v.title}&oid=${v.oid}`,
				});
			},
			async getCourseDescriptionData() {
				var data = {};
				var that = this;

				this.$http
					.request({
						url: this.urlList.detailInfo,
						method: "POST",
						data: {
							productId: this.options.id,
						},
						header: {
							//默认 无 说明：请求头
							"Content-Type": "application/json",
						},
					})

					.then(async (res) => {
						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(",");
							// for (var i = 0; i < imgList.length; i++) {
							// 	this.swiperList.push(imgList[i])
							// }
						}

						this.detailInfo = {
							content: this.curriculumData.productDetails,
						};
					});
			},
			getPriceData() {
				var that = this;
				setTimeout(() => {
					that.$nextTick(() => {
						that.$refs.priceDetail.getData();
					});
				}, 100);
			},
			// 检查是有权限使用搜索功能
			checkDisable() {
				console.log("点击了");
			},
			// 显示无权限弹窗
			// showNoRights() {
			// 	let that = this
			// 	uni.showModal({
			// 		content: "",
			// 		confirmText: '好的',
			// 		showCancel: false,
			// 		success: function(res) {
			// 			if (res.confirm) {
			// 				// console.log('用户点击确定');
			// 				that.clear()
			// 			}
			// 		}
			// 	})
			// },
			// 获取用户详情
			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 = [];
				console.log(item, index, 99999);
				var that = this;

				// curriculumInfo

				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;

						// socket.init();
					});

				// this.$nextTick(() => {
				//     switch (item.type) {
				//         case 1:
				//             // allDataList
				//             this.dataList = that.allDataList.result1Lst
				//             break;
				//         case 2:
				//             this.dataList = that.allDataList.result2Lst
				//             break;
				//         case 3:
				//             this.dataList = that.allDataList.result3Lst
				//             break;
				//         case 4:
				//             this.dataList = that.allDataList.result4Lst.filter(e =>
				//                 e.oid != '5fcf991c027b11e7ae62008cfae40c18' && e.oid != 'b3d8a938b8e147bc877613bb712a9cb3' && e.oid != '4d4730163135420ea962bfac4805e026' && e.oid != '49fb76ca3d6b43718d78c6aa9a3003c2' && e.oid != 'c7b047ed9246469b9ae2b1013fc3df9c'

				//             )

				//             console.log(this.dataList.length, 6666666)
				//             break;

				//     }

				//     this.currentCateIndex = item.index
				// })
				console.log(this.allDataList, this.dataList, "1688");
				// if(this.userMes.tgdzPower == 0){
				// 	let that = this
				// 	uni.showModal({
				// 		content: "购买 针灸六经法要上册和下册 后方可使用此功能",
				// 		confirmText: '好的',
				// 		showCancel: false,
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				// console.log('用户点击确定');
				// 			}
				// 		}
				// 	})
				// 	return
				// }
				// if(item.title == "时辰取穴"){
				// 	uni.navigateTo({
				// 		url: "../timeAcupoint/timeAcupoint"
				// 	})
				// 	return
				// }

				// this.currentStatusIndex = index

				this.searchValue = "";
				this.searchList = [];
				this.showSearchList = false;
				// if (index != 2) {

				// uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
				// 	var height = rect.height
				// 	console.log('元素高度：',);

				// }).exec();

				// } else {
				// 	this.getJFList(dictType)
				// }

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

				// curriculumInfo

				// this.$nextTick(() => {
				//     switch (item.type) {
				//         case 1:
				//             // allDataList
				//             this.dataList = that.allDataList.result1Lst
				//             break;
				//         case 2:
				//             this.dataList = that.allDataList.result2Lst
				//             break;
				//         case 3:
				//             this.dataList = that.allDataList.result3Lst
				//             break;
				//         case 4:
				//             this.dataList = that.allDataList.result4Lst.filter(e =>
				//                 e.oid != '5fcf991c027b11e7ae62008cfae40c18' && e.oid != 'b3d8a938b8e147bc877613bb712a9cb3' && e.oid != '4d4730163135420ea962bfac4805e026' && e.oid != '49fb76ca3d6b43718d78c6aa9a3003c2' && e.oid != 'c7b047ed9246469b9ae2b1013fc3df9c'

				//             )

				//             console.log(this.dataList.length, 6666666)
				//             break;

				//     }

				//     this.currentCateIndex = item.index
				// })
				console.log(this.allDataList, this.dataList, "1688");
				// if(this.userMes.tgdzPower == 0){
				// 	let that = this
				// 	uni.showModal({
				// 		content: "购买 针灸六经法要上册和下册 后方可使用此功能",
				// 		confirmText: '好的',
				// 		showCancel: false,
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				// console.log('用户点击确定');
				// 			}
				// 		}
				// 	})
				// 	return
				// }
				// if(item.title == "时辰取穴"){
				// 	uni.navigateTo({
				// 		url: "../timeAcupoint/timeAcupoint"
				// 	})
				// 	return
				// }

				// this.currentStatusIndex = index

				this.searchValue = "";
				this.searchList = [];
				this.showSearchList = false;
				// if (index != 2) {

				// uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
				// 	var height = rect.height
				// 	console.log('元素高度：',);

				// }).exec();

				// } else {
				// 	this.getJFList(dictType)
				// }

				return data;
			},
			async setOneCateIndex(item, index) {
				this.allDataList = [];
				console.log(index, 99999);
				var that = this;

				// if(this.userMes.tgdzPower == 0){
				// 	let that = this
				// 	uni.showModal({
				// 		content: "购买 针灸六经法要上册和下册 后方可使用此功能",
				// 		confirmText: '好的',
				// 		showCancel: false,
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				// console.log('用户点击确定');
				// 			}
				// 		}
				// 	})
				// 	return
				// }
				// if(item.title == "时辰取穴"){
				// 	uni.navigateTo({
				// 		url: "../timeAcupoint/timeAcupoint"
				// 	})
				// 	return
				// }

				this.currentStatusIndex = index;
				// this.currentCateIndex = 0

				this.searchValue = "";
				this.searchList = [];
				this.showSearchList = false;
				this.$nextTick(async () => {
					await that.getCourseDescriptionData();

					this.$forceUpdate();
				});

				// this.handleselectCate(this.cateList[this.currentCateIndex])
				// if (index != 2) {

				// uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
				// 	var height = rect.height
				// 	console.log('元素高度：',);

				// }).exec();

				// } else {
				// 	this.getJFList(dictType)
				// }
			},

			transformData(inputData) {
				const result = {};
				inputData.forEach((item) => {
					const {
						letter
					} = item;
					if (!result[letter]) {
						result[letter] = [];
					}
					result[letter].push(item);
				});
				// const finalResult = Object.keys(result).map(key => ({ [key]: result[key] }));
				return result;
			},
			// getJFList(id) {
			// 	$http.request({
			// 		url: "book/prescript/prescriptListForJF",
			// 		method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
			// 		data: {
			// 			loadAnimate: 'none', // 请求加载动画
			// 			'categoryId': id
			// 		},
			// 		header: { //默认 无 说明：请求头
			// 			'Content-Type': 'application/json'
			// 		},
			// 	}).then(res => {
			// 		if (res.code == 0 && res.list.length > 0) {
			// 			this.twoCateList = []
			// 			this.dataList = this.transformData(res.list)
			// 			console.log('JF经方', this.dataList)
			// 		} else {
			// 			this.twoCateList = []
			// 			this.dataList = []
			// 		}
			// 	}).catch(e => {
			// 		this.twoCateList = []
			// 		this.dataList = []
			// 		console.log(e)
			// 	})
			// },
			getCateList(id) {
				id ? "" : (id = 0);
				this.twoCateList = [];
				this.curTwoCateIndex = 0;
				// 0为获取顶级分类，其他为搜索下级分类，目前的逻辑，顶级是写死的，所以可能只会涉及到搜索第二级
				// $http.request({
				// 	url: "book/prescript/prescriptCategoryList",
				// 	method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
				// 	data: {
				// 		loadAnimate: 'none', // 请求加载动画
				// 		'categoryId': id
				// 	},
				// 	header: { //默认 无 说明：请求头
				// 		'Content-Type': 'application/json'
				// 	},
				// }).then(res => {
				// console.log(res, '脉穴分类获取成功')
				// if (res.code == 0 && res.list.length > 0) {
				// this.statusList = res.list
				// this.getTowCateList(this.statusList[0].type)
				// } else {
				// 	this.statusList = []
				// }
				// }).catch(e => {
				// 	this.statusList = []
				// 	console.log(e)
				// })
			},

			// 放大图片
			previewImage(url) {
				console.log(url);
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ["很抱歉，暂不支持保存图片到本地"],
						success: function(res) {
							// console.log(res,'+++++')
						},
					},
				});
			},
			// getSearch() {
			// 	$http.request({
			// 		url: "book/prescript/searchPrescript",
			// 		method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
			// 		data: {
			// 			loadAnimate: 'none', // 请求加载动画
			// 			'keywords': this.searchValue,
			// 			type: this.currentStatusIndex + 1
			// 		},
			// 		header: { //默认 无 说明：请求头
			// 			'Content-Type': 'application/json'
			// 		},
			// 	}).then(res => {
			// 		console.log(res, '搜索结果')
			// 		if (res.code == 0 && res.list.length >= 0) {
			// 			this.showSearchList = true
			// 			this.searchList = res.list
			// 		} else {
			// 			this.searchList = []
			// 		}
			// 	}).catch(e => {
			// 		// this.dataList = []
			// 		this.searchList = []
			// 		console.log(e)
			// 	})
			// },
			// search(res) {
			// 	console.log(res, 'res')
			// 	// uni.showToast({
			// 	// 	title: '搜索：' + res,
			// 	// 	icon: 'none'
			// 	// })
			// 	if (res == '') {
			// 		this.showSearchList = false
			// 		this.searchList = []
			// 	} else {
			// 		this.getSearch()
			// 	}

			// },
			// input(res) {
			// 	console.log('----input:', res)
			// 	if (res == '') {
			// 		this.searchList = []
			// 	} else {
			// 		this.getSearch()
			// 	}
			// },
			// clear(res) {
			// 	console.log('----clear:', res)
			// 	// uni.showToast({
			// 	// 	title: 'clear事件，清除值为：',
			// 	// 	icon: 'none'
			// 	// })
			// 	this.searchValue = ''
			// 	this.showSearchList = false
			// },
			// blur(res) {
			// 	// console.log('----blur:', res)
			// 	// if (res == '') {
			// 	// 	this.showSearchList = false
			// 	// 	this.searchList = []
			// 	// } else {
			// 	// 	this.getSearch()
			// 	// }
			// },
			// focus(e) {
			// 	console.log('----focus:')
			// 	// uni.showToast({
			// 	// 	title: 'focus事件，输出值为：' + e.value,
			// 	// 	icon: 'none'
			// 	// })
			// 	// 等于1 就是有权限
			// 	// this.showSearchList = true

			// },
			// cancel(res) {
			// 	uni.showToast({
			// 		title: '点击取消，输入值为：' + res.value,
			// 		icon: 'none'
			// 	})
			// }
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/style/mixin.scss";

	.u-grid-list {
		// height: 40rpx;
	}

	.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;

		// margin-top: 20rpx;
		// display: flex;
		// align-items: center;
	}

	.headImage {
		// height: 400rpx !important;
	}

	.commonDetailPage {
		padding-bottom: 150rpx !important;
		background-color: #f5f5f5 !important;
	}

	.goods_box {
		background-color: #fff;
		// margin-top: 20rpx;
		// padding: 40rpx 30rpx;
		box-sizing: border-box;
		width: 100%;

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

			.curriulum_title {
				width: calc(100%);
				font-weight: 600;
				font-size: 34rpx;
				// line-height: 40rpx;
				//     display: flex;
				// align-items: center;
				margin-top: 80rpx;
				margin-bottom: 0rpx;
				// padding: 20rpx;
				box-sizing: border-box;
			}
		}
	}

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

	/deep/.titleItem {
		// width: calc(100% - 120rpx) !important;
	}

	/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: #018f89;

				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: #018f89;
					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: 500;
		color: #999 !important;
		white-space: nowrap;
		text-decoration: line-through;
		float: left;
		margin-top: 6rpx;
	}

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

	.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% - 340rpx);
			float: left;
		}

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

			.original_price {
				color: #e4dede !important;
				font-weight: 500;
				margin-left: 20rpx;
				font-size: 26rpx !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);
			// height: 100rpx;
		}

		.curriulum_title {
			padding: 20rpx 40rpx;
			margin-top: 20rpx !important;
		}
	}

	.normal_box {
		padding: 40rpx 30rpx;
	}

	.xianshimaiosha_box {
		width: 340rpx;
		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;
		}

		// justify-content: space-between;
	}

	.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;
			// font-weight: 600;
			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;
		}
	}
</style>