fangliaoxiaochengxv/subPages/service/serviceDetail.vue

<template>
  <view style="height: 100%; background: #F8F9FA;">
    <u-swiper :list="courseInfo.slider||[]" 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 fw700 fs18">{{ courseInfo.goods_name }}</view>
        <view class="course-price" style="position: relative;">
          <span style="font-size: 24rpx; color: #C29556;">￥&nbsp;</span><span class="fw700" 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/bottom-menu-cert.png"
                  width="28rpx"
                  style="display: flex;"
              />
            </view>
            <span style="padding-left: 20rpx;padding-right: 5rpx">&nbsp;已售:&nbsp;{{courseInfo.stock_sales}}</span>
          </view>
        </view>
        <u-divider line-color="#E8E8E8"></u-divider>
        <view class="course-title fw600">
              门店信息
        </view>
        <view class="course-store display-flex-between">
          <view class="course-store-left">
            <view class="display-flex ">
              <view class="course-store-left-img mr10">
                <van-image
                    class="huodongText2-img"
                    height="28rpx"
                    src="/static/hd-if-b.png"
                    width="28rpx"
                    style="display: flex;	align-items: center;justify-content: center;"
                />
              </view>
              <view class="course-store-left-text">
                {{store_position}}
              </view>
            </view>
            <view class="display-flex-between ">
              <view class="display-flex ">
                <view class="course-store-left-img mr10">
                  <van-image
                      class="huodongText2-img"
                      height="24rpx"
                      src="/static/huodong-a.png"
                      width="24rpx"
                      style="display: flex;	align-items: center;justify-content: center;"
                  />
                </view>
                <view class="course-store-left-text">
                  {{business_hours}}
                </view>
              </view>
              <view class="course-store-left-right">
                <view class="course-store-left-right-img "  @click="openLocation">
                  <van-image
                      class="huodongText2-img"
                      height="56rpx"
                      src="/static/daohang.png"
                      width="56rpx"
                      style="display: flex;align-items: center;  justify-content: center;"

                  />
                </view>
                <view class="course-store-left-right-img ml10" @click="makePhoneCall">
                  <van-image
                      class="huodongText2-img"
                      height="56rpx"
                      src="/static/dianhua.png"
                      width="56rpx"
                      style="display: flex;align-items: center;  justify-content: center;"
                  />
                </view>
              </view>
            </view>
          </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 {
      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,
      phoneNumber: '',
      store_name: '',
      store_position: '',
      business_hours: '',
      latlng: '',
    };
  },

  onLoad: function (option) {
    this.goods_code = option.code
  },
  onShow() {
    this.$nextTick(() => {
      this.getCourseDetail()
      this.setImgWidth()
    });
  },
  created() {
    const configs = uni.getStorageSync("configs");
    if (configs) {
      this.store_name = configs.store_name
      this.phoneNumber = configs.store_phone
      this.store_position = configs.store_position
      this.business_hours = configs.business_hours
      this.latlng = configs.latlng
    }
  },
  computed: {},
  watch: {},
  methods: {
    getConfigDatalist() {
      getConfigData({dict_id: 36}).then(({data}) => {
        this.courseTypeList = data.reverse();
      });
    },
    makePhoneCall() {
      uni.makePhoneCall({
        phoneNumber: this.phoneNumber, // 需要拨打的电话号码
        success() {
          console.log('拨打成功');
        },
        fail(err) {
          console.error('拨打失败', err);
          uni.showToast({
            title: '拨打失败,请检查号码!',
            icon: 'none'
          });
        }
      });
    },
    openLocation() {
      let [Lat, Lng] = ["36.02","117.93"]
      if (this.latlng){
         [Lat, Lng] = this.latlng.split(',')
      }
      uni.openLocation({
        latitude: Number.parseFloat(Lat), // 实际的纬度，这里使用的是示例值
        longitude: Number.parseFloat(Lng), // 实际的经度，这里使用的是示例值
        scale: 18, // 地图缩放级别，范围通常是5~18，18是最详细的级别
        name: this.store_name, // 可选，位置名称，会在地图的某些视图上显示
        address: this.store_position // 可选，详细地址，同样会在地图的某些视图上显示
      });
    },
    handleRegister() {
      uni.navigateTo({
        url: `/subPages/service/serviceSave?code=${this.goods_code}&id=${this.courseInfo.id}`
      })
    },
    getCourseDetail() {
      getGoodsDetail({goods_code: this.goods_code}).then(({data}) => {
        console.log(data)
        this.courseInfo = data.goods
        // 修正 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-粗体;
    font-weight: normal;
    color: #333333;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 16rpx;
  }

  .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;
  }
  .course-store {
    &-left{
      width: 100%;
      &-img{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28rpx;
        height: 28rpx;

      }
      &-text{
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #666666;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      &-right{
        display: flex;
        align-items: center;
        justify-content: center;
        &-img{
        }
      }
    }


  }

}



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