|
|
@@ -0,0 +1,524 @@
|
|
|
+<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;"
|
|
|
+ />
|
|
|
+ <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;">￥ </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/cart-a.png"
|
|
|
+ width="28rpx"
|
|
|
+ style="display: flex;"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <span style="padding-left: 20rpx;padding-right: 5rpx"> 已售: {{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() {
|
|
|
+ // 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
|
|
|
+ // 修正 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>
|
lkg
