fangliaoxiaochengxv/subPages/courseDetail/courseDetail.vue

<template>
  <view style="height: 100%; background: #F8F9FA;">
<!--    <van-image-->
<!--        class="huodongText2-img"-->
<!--        height="360rpx"-->
<!--        :src="courseInfo.cover"-->
<!--        width="100%"-->
<!--        style="display: flex;align-items: center;"-->
<!--    />-->
    <u-swiper :list="bannerList||[]" keyName="url"
              :indicatorStyle="{right: '20rpx', bottom: '20rpx', width: '100px',marginLeft: 'auto'}" indicator
              indicatorMode="number" :height="'360rpx'"  imgMode="scaleToFill">
    </u-swiper>
    <view class="huodong-ccontent" >
      <view class="course-content">
        <view class="course-title">{{ courseInfo.goods_name }}</view>
        <view class="course-date">
          <view style="padding-top: 7rpx;width:28rpx;height: 28rpx ">
            <van-image
                class="huodongText2-img"
                height="28rpx"
                src="/static/miaoshu.png"
                width="28rpx"
                style="display: flex;"
            />
          </view>
          <span style="padding: 0 16rpx">{{courseInfo.remark}}</span>
        </view>
        <view class="course-price" style="position: relative;">
          <span style="font-size: 24rpx; color: #C29556;">￥&nbsp;</span><span style="font-size: 36rpx;color: #C29556;">{{courseInfo.price_selling}}</span>
          <view style="position: absolute;right:0rpx;font-size: 22rpx;color:#888888;  display: flex;">
            <view style="padding-top: 7rpx;width:28rpx;height: 28rpx ">
              <van-image
                  class="huodongText2-img"
                  height="28rpx"
                  src="/static/baoming.png"
                  width="28rpx"
                  style="display: flex;"
              />
            </view>
            <span style="padding-left: 20rpx;"> &nbsp;{{courseInfo.stock_sales}}&nbsp;人已学习</span>
          </view>
        </view>

      </view>
    </view>
    <view  class="course-content-title">
      课程介绍
    </view>
    <view   id="course-content"  ref="courseContent" style="width: 95%;margin: 0 auto;" v-html="courseInfo.content">
    </view>
    <view  style="width: 100%;height: 165rpx" > </view>
    <van-toast id="van-toast"/>
    <view class="bottom-navigation">
      <view class="bottom-navigation-div">
        <view  style="width: 40rpx;margin-right: 30rpx"   @click="toJump( 1)" >
          <van-image
              height="36rpx"
              src="/static/hd-icon-a.png"
              width="36rpx"
              style="display: flex;align-items: center;  justify-content: center;"
          />
          <span>
            首页
          </span>
        </view>

        <view  style="width: 40rpx;position:relative"  open-type="contact">
          <van-image
              height="36rpx"
              src="/static/hd-icon-c.png"
              width="36rpx"
              style="display: flex;align-items: center;  justify-content: center;"
          />
          <span>
              咨询
          </span>
          <button style="position: absolute;width: 100%;height: 100%;z-index: 999;opacity: 0;top:0;"
                   open-type="contact" ></button>
        </view>
      </view>
      <button  class="course-button" @click="handleRegister">报名学习</button>
    </view>
  </view>

</template>

<script>
import {getConfigData} from '@/common/api/common.js';

import Toast from "../../wxcomponents/vant/dist/toast/toast";
import {getGoodsDetail} from "../../common/api";


export default {
  components: {},
  data() {
    return {
      bannerList: [],
      page: 1,
      pageSize: 10,
      courseTypeList: [],
      goods_code: 0,
      courseInfo: {},
      entry_end: 0,
      remainingImages: [],
      entry_num:0,
      entry_max:0,
      entry_balance:0,
      is_entry:false,
      suitNum:1,
    };
  },

  onLoad: function (option) {
    this.goods_code = option.goods_code
    this.getCourseDetail()
    this.setImgWidth()
  },
  onShow() {
    this.$nextTick(() => {
    });
  },
  onReachBottom() {
  },
  onShareAppMessage(res) {
    let params = {};
    params = {
      goods_code: this.goods_code
    };
    let configs = uni.getStorageSync('configs') || {};
    return {
      title: configs.shop_share_title,
      imageUrl: configs.shop_share_img,
      path: `/subPages/courseDetail/courseDetail${this.$stringPageOptions(params)}`
    };
  },
  onShareTimeline(res) {
    let params = {};
    params = {
      goods_code: this.goods_code
    };
    let configs = uni.getStorageSync('configs') || {};
    return {
      title: configs.shop_share_title,
      imageUrl: configs.shop_share_img,
      path: `/subPages/courseDetail/courseDetail${this.$stringPageOptions(params)}`
    };
  },
  computed: {},
  watch: {},
  methods: {
    getConfigDatalist() {
      getConfigData({dict_id: 36}).then(({data}) => {
        this.courseTypeList = data.reverse();
      });
    },
    handleRegister() {
      // Toast('敬请期待');
      let tempList = this.courseInfo.data_specs[0].list
      tempList = tempList.map(item => {
        return {
          group_name: item.group,
          spec_name: item.name
        }
      })
      let specText = tempList.map(item => {
        return `${item.group_name}::${item.spec_name}`
      })

      // 准备发送的数据结构，包含商品代码、套件数量和规格文本
      const sendData = {
        items: [{
          code: this.courseInfo.code, // 商品代码
          count: this.suitNum, // 套件数量
          // 将规格文本数组用“;;”连接成单个字符串
          spec: specText.join(';;')
        }]
      }
      // 调用API创建订单
      this.$api.createOrder(sendData).then(res => {
        // 成功创建订单后，显示成功提示
        uni.showToast({
          title: '订单创建成功'
        })
        // 导航到结算中心页面，并传递订单号作为查询参数
        uni.navigateTo({
          url: `/subPages/settleCenter/courseSettleCenter?orderNo=${res.data.order_no}`
        })
      })
    },
    getCourseDetail() {
      getGoodsDetail({goods_code: this.goods_code}).then(({data}) => {
        console.log(data)
        this.courseInfo = data.goods
        this.bannerList=this.courseInfo.slider||[]

        console.log('this.courseInfo.content', this.bannerList)
        // 修正 courseInfo.content 中的 src 属性值
        if (this.courseInfo.content) {
          this.courseInfo.content = this.courseInfo.content.replace(/\/apihttps:/g, 'https:');
          // 使用正则表达式匹配和修改 img 标签的 style 属性
          this.courseInfo.content = this.courseInfo.content.replace(/<img([^>]*)>/gi, (match, attributes) => {
            // 检查是否已经存在 style 属性
            if (attributes.includes('style')) {
              // 如果存在 style 属性，添加 width: 100%;
              return match.replace(/style="([^"]*)"/i, (styleMatch, styleContent) => {
                if (!styleContent.includes('width: 100%')) {
                  return `style="${styleContent}; width: 100%;"`;
                }
                return styleMatch;
              });
            } else {
              // 如果不存在 style 属性，添加 style="width: 100%;"
              return match.replace(/<img/i, '<img style="width: 100%;"');
            }
          });
          // 使用正则表达式匹配和修改 p 标签的 style 属性
          this.courseInfo.content = this.courseInfo.content.replace(/<p([^>]*)>/gi, (match, attributes) => {
            // 检查是否已经存在 style 属性
            if (attributes.includes('style')) {
              // 如果存在 style 属性，添加新的样式
              return match.replace(/style="([^"]*)"/i, (styleMatch, styleContent) => {
                const newStyles = 'font-weight: 400; font-size: 24rpx; color: #666666; line-height: 36rpx;';
                if (!styleContent.includes(newStyles)) {
                  return `style="${styleContent}; ${newStyles}"`;
                }
                return styleMatch;
              });
            } else {
              // 如果不存在 style 属性，添加 style 属性
              const newStyles = 'font-weight: 400; font-size: 24rpx; color: #666666; line-height: 36rpx;';
              return match.replace(/<p/i, `<p style="${newStyles}"`);
            }
          });
        }
        // 确保在数据更新后调用 setImgWidth
        this.$nextTick(() => {
          this.setImgWidth();
        });
      });

    },
    setImgWidth() {
      this.$nextTick(() => {
        if (this.$refs.courseContent) {
          const imgElements = this.$refs.courseContent.querySelectorAll('img');
          imgElements.forEach(img => {
            img.style.width = '100%';
          });
        } else {
          console.log(this.$refs)
        }
      });
    },
    getStyles(index=0) {
      let le =28
      let  py=30
      if (this.entry_num%2==1){
        py+= 224/2-(84/2)-(le*Math.floor(this.entry_num / 2 ))-le/2
      }else{
        py+=224/2-(84/2)-(le*this.entry_num/2)
      }
      let right= index*le+py
      var newVar = {
        position: 'absolute',
        width: '84rpx',
        height: '84rpx',
        borderRadius: '84rpx',
        top: '30rpx',
        right: right+'rpx',
      };
      return newVar
    },
    toJump( index) {
      if(index==1){
        uni.switchTab({
          url:'/pages/home/index'
        });
      }else if(index==2){
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.common-page {
  height: 100%;
  padding: 30rpx;
}

.huodong-ccontent {
  position: relative; /* 相对定位 */
  width: 650rpx;
  padding: 0rpx;
  margin: 30rpx auto;
  margin-bottom: 0;
  padding: 30rpx;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}


.course-content {
  margin-top: 30 rp;

  .course-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #333333;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    font-weight: bold;
    margin-bottom: 16rpx;
  }
  .course-date {
    font-family: 苹方, 苹方;
    font-size: 26rpx;
    color: #666666;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    font-weight: 400;
    margin-bottom: 10rpx;
    display: flex;
  }



  .course-price {
    font-family: 苹方, 苹方;
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    line-height: 40rpx;
    text-align: justify;
    font-style: normal;
    text-transform: none;
    display: flex;
  }

}



.bottom-navigation{
  position: fixed;
  // 文字垂直居中
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  height: 100rpx;
  width: calc(100% - 40rpx);
  background: #FFFFFF;
  box-shadow: 0rpx -2rpx 0rpx 0rpx #F1F3F6;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  border: 0rpx solid #979797;
  padding: 20rpx 20rpx 68rpx 20rpx ;
  &-div{
    height: 76rpx;
    width: 404rpx;
    padding-top: 10rpx;
    // 文字垂直居中
    display: flex;
    align-items: center;
    padding-left: 30rpx;

    span{
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #333333;
      line-height: 32rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

  }


  .course-button {
    width: 264rpx;
    height: 80rpx;
    background: linear-gradient(315deg, #CA9359 0%, #E2B98E 100%);
    border-radius: 292rpx 292rpx 292rpx 292rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 36rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    // 文字垂直居中
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* 设置 v-html 渲染的内容中的 img 标签宽度为 100% */
[v-html] img {
  width: 100%!important;
}
/* 定义 CSS 变量 */
:root {
  --nav-bar-icon-color: black;
  --nav-bar-arrow-size: 16px;
  --tab-font-size: 28rpx;
}
.course-content-title {
  margin: 30rpx auto;
  width: 680rpx;
  // 垂直居中
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  font-style: normal;
  text-transform: none;
  margin-bottom: 20rpx;
  // 加粗
  font-weight: bold;
}
/* 确保 van-nav-bar 内部的内容能够正确适应新的高度 */
/deep/ .van-nav-bar__title {
  font-family: PingFang SC, PingFang SC !important;
  font-weight: 400 !important;
  font-size: 36rpx !important;
  color: #333333 !important;
  text-align: center;
  // 加粗
  // font-weight: bold;
}

/deep/ .van-nav-bar__content {
  text-align: center;
}
#course-content img{
  width: 100%!important;
}
/* 添加 van-tab 标题的字体大小样式 */
/deep/ .van-tab__text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
}


</style>