zc_saas_h5/pages2/bank/detail.vue

<template>
  <view>
    <nav-bar title="题库详情"></nav-bar>
    <view style="background-color: #ffffff">
      <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
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 13rpx;
          "
        >
          <view class="prices">
            <!-- <text class="price_sym"></text> -->
            <text v-if="goodsData.standPrice" class="price_word"
              >¥ {{ goodsData.standPrice }}</text
            >
            <text v-else class="price_word free">免费</text>
            <text v-if="goodsData.linePrice" class="sale"> ¥ </text>
            <text v-if="goodsData.linePrice" class="price_line">
              {{ goodsData.linePrice }}</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>
      <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: "大纲",
        },
      ],
      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.goodsExamConfig = JSON.parse(res.data.data.goodsExamConfig);
          }
        });
    },
    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.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,
        })
        .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.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;
}
.prices {
  .price_word {
    font-size: 40rpx;
    font-weight: 800;
    color: #fc3f3f;
  }
  .sale {
    color: #999999;
    font-size: 28rpx;
    margin-left: 8rpx;
  }
  .price_line {
    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: #fc3f3f;
  border-radius: 40rpx;
  text-align: center;
  font-size: 24rpx;
}
.btn1 {
  width: 187rpx;
  height: 79rpx;
  line-height: 79rpx;
  background: #ffb102;
  border-radius: 40rpx;
  text-align: center;
  margin-right: 11rpx;
  font-size: 24rpx;
}
.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;
}
</style>