|
|
@@ -1,16 +1,16 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
<view class="hflex acenter jbetween top">
|
|
|
- <image src="/static/image/index1/logo.png" class="logo"></image>
|
|
|
+ <image src="/static/image/index1/logo2.png" class="logo"></image>
|
|
|
<view class="vflex">
|
|
|
<view class="top_title">線上課程,直播,活動,求職,補習,一應俱全</view>
|
|
|
<view class="top_title2">「Day Day U」APP開啟更多功能</view>
|
|
|
</view>
|
|
|
- <view class="top_btn hflex acenter jcenter">下載</view>
|
|
|
+ <view class="top_btn hflex acenter jcenter" @click="toIndex">下載</view>
|
|
|
</view>
|
|
|
<view class="video">
|
|
|
<view class="top_label hflex acenter jcenter">會員免費試看此課程，立即下載APP註冊</view>
|
|
|
- <video :src="pageData.video"></video>
|
|
|
+ <video :src="pageData.course_video"></video>
|
|
|
</view>
|
|
|
<view class="box">
|
|
|
<view class="box_title">{{pageData.title}}<span class="title_text">線上課程</span></view>
|
|
|
@@ -18,20 +18,25 @@
|
|
|
<image class="avatar" :src="pageData.headimg"></image>
|
|
|
<view class="user_name">{{pageData.name}}</view>
|
|
|
</view>
|
|
|
- <view class="info">{{pageData.provider_record}}</view>
|
|
|
+ <view class="info_box">
|
|
|
+ {{intro}}
|
|
|
+ <span class="text_blue1" v-if="show" @click="change">{{show_info?'收起':'更多'}}</span>
|
|
|
+ <!-- <u-parse :content="intro" :class="show_info?'':'info'"></u-parse> -->
|
|
|
+ </view>
|
|
|
+ <!-- <view class="info">{{pageData.provider_record}}</view> -->
|
|
|
<view class="hflex acenter ">
|
|
|
<view class="text_style1">{{evaluate.evaluate_avg}}評分</view>
|
|
|
- <u-rate count="5" v-model="evaluate.evaluate_avg" active-color="#f7b500"></u-rate>
|
|
|
+ <u-rate count="5" readonly v-model="evaluate.evaluate_avg" active-color="#f7b500"></u-rate>
|
|
|
<image src="/static/image/index1/watch.png" style="margin: 0 1rpx 0 2rpx;width: 32rpx;height: 32rpx;"></image>
|
|
|
<view class="text_style1">{{pageData.sale_num}}觀看</view>
|
|
|
</view>
|
|
|
- <view class=" hflex aend">
|
|
|
- <view class="text_blue">HK $ </view>
|
|
|
- <view class="price">{{pageData.price}}</view>
|
|
|
- <view class="text_style1 line">HK ${{pageData.original_price}}</view>
|
|
|
- <view class="text_style1" style="font-size: 28rpx;padding-left: 20rpx;"> {{pageData.discount}}折扣</view>
|
|
|
+ <view class=" hflex aend" style="padding: 10rpx 0 0;">
|
|
|
+ <view class="text_blue">HK $ <span class="price">{{pageData.price}}</span></view>
|
|
|
+ <!-- <view class="price"></view> -->
|
|
|
+ <view class="text_style1 line">HK ${{ Math.trunc(pageData.original_price)}}</view>
|
|
|
+ <view class="text_style1" style="font-size: 28rpx;padding-left: 20rpx;"> {{pageData.discount}}%折扣</view>
|
|
|
</view>
|
|
|
- <view class="hflex acenter jcenter buy_btn">立即購買</view>
|
|
|
+ <view class="hflex acenter jcenter buy_btn" @click="buy">立即購買</view>
|
|
|
<view class="list">
|
|
|
<view class="title" style="padding: 32rpx 0;">你將學會</view>
|
|
|
<view class="vflex">
|
|
|
@@ -55,17 +60,17 @@
|
|
|
<view class="title_right">{{pageData.section_num}}章節·{{pageData.classroom_num}}單元·總長{{pageData.duration}}分鐘</view>
|
|
|
</view>
|
|
|
<view class="course_list">
|
|
|
- <block v-for="(item,index) in pageData.section_info.slice(0,3)" :key="index">
|
|
|
+ <block v-for="(item,index) in pageData.section_info" :key="index">
|
|
|
<view class="list_item">
|
|
|
<view class="hflex acenter jbetween">
|
|
|
<view class="item_left">{{item.section_name}}</view>
|
|
|
<view class="hflex acenter" @click="open(index)">
|
|
|
<!-- <view class="item_right">長度·{{item.length}}分鐘</view> -->
|
|
|
- <u-icon name="arrow-down" color="#000" size="18" v-if="item.open"></u-icon>
|
|
|
+ <u-icon name="arrow-down" color="#000" size="18" v-if="item.opener"></u-icon>
|
|
|
<u-icon name="arrow-right" color="#000" size="18" v-else></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="children" v-show="item.open">
|
|
|
+ <view class="children" v-show="item.opener">
|
|
|
<block v-for="(item2,index2) in item.element_info" :key="index2">
|
|
|
<view class="hflex acenter jbetween" style="padding: 15rpx 0pt 0pt;">
|
|
|
<view class="hflex acenter">
|
|
|
@@ -80,15 +85,18 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
- <view class="hflex acenter jcenter" style="padding-top: 32rpx;">
|
|
|
+ <view class="hflex acenter jcenter" style="padding-top: 32rpx;" v-if="pageData.section_num > 3">
|
|
|
<view class="hflex acenter jcenter list_btn">還有{{pageData.section_num - 3}}章節</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
<view class="title" style="padding: 48rpx 0 32rpx;">課程要求和說明</view>
|
|
|
- <view class="vflex">
|
|
|
- <u-parse :content="pageData.detail"></u-parse>
|
|
|
+ <view class="vflex dis">
|
|
|
+ <u-read-more showHeight="400" :toggle="true" closeText="顯示更多" ref="uReadMore">
|
|
|
+ <u-parse :content="pageData.detail" @load="load"></u-parse>
|
|
|
+ </u-read-more>
|
|
|
+
|
|
|
<!-- <view class="hflex acenter jcenter">
|
|
|
<view class="show_btn hflex acenter jcenter">顯示更多</view>
|
|
|
</view> -->
|
|
|
@@ -102,20 +110,20 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="course_list">
|
|
|
- <block v-for="(item,index) in evaluate.evaluate_list.slice(0,3)" :key="index">
|
|
|
+ <block v-for="(item,index) in evaluate.evaluate_list" :key="index">
|
|
|
<view class="list_item hflex acenter">
|
|
|
<image :src="item.headimg" class="item_avatar"></image>
|
|
|
<view class="img_right">
|
|
|
<view class="hflex acenter">
|
|
|
<view class="item_name2">{{item.name}}</view>
|
|
|
- <u-rate count="5" v-model="item.content" active-color="#f7b500"></u-rate>
|
|
|
+ <u-rate count="5" readonly v-model="item.content" active-color="#f7b500"></u-rate>
|
|
|
</view>
|
|
|
<view class="text_content">{{item.content}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
<view class="hflex acenter jcenter" style="padding-top: 32rpx;">
|
|
|
- <view class="hflex acenter jcenter list_btn">{{evaluate.evaluate_list.length == 0? '暫無評分' : '顯示更多'}}</view>
|
|
|
+ <view class="hflex acenter jcenter list_btn">{{evaluate.evaluate_num == 0? '暫無評分' : '顯示更多'}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -146,12 +154,16 @@
|
|
|
img3: '/static/image/index1/bottom_img3.png',
|
|
|
},
|
|
|
evaluate:'',
|
|
|
- id: ''
|
|
|
+ id: '',
|
|
|
+ show_info:false,
|
|
|
+ intro: '',
|
|
|
+ show: false
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
that = this
|
|
|
that.id = options.id
|
|
|
+ // that.id = '280'
|
|
|
that.getData()
|
|
|
that.getEvaluate()
|
|
|
},
|
|
|
@@ -165,6 +177,18 @@
|
|
|
}, function(res) {
|
|
|
if(res.code == 1) {
|
|
|
that.pageData = res.data
|
|
|
+ if(that.pageData.section_info.length >3) {
|
|
|
+ that.pageData.section_info = that.pageData.section_info.slice(0,3)
|
|
|
+ }
|
|
|
+ for(var i=0;i<that.pageData.section_info.length;i++) {
|
|
|
+ that.$set(that.pageData.section_info[i],'opener',false)
|
|
|
+ }
|
|
|
+ if(that.pageData.introduce.length>45) {
|
|
|
+ that.intro = that.pageData.introduce.substring(0,45) + '... '
|
|
|
+ that.show = true
|
|
|
+ } else {
|
|
|
+ that.intro = that.pageData.introduce
|
|
|
+ }
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
@@ -179,22 +203,42 @@
|
|
|
}, function(res) {
|
|
|
if(res.code == 1) {
|
|
|
that.evaluate = res.data
|
|
|
+ if(that.evaluate.evaluate_num > 3) {
|
|
|
+ that.evaluate.evaluate_list = that.evaluate.evaluate_list.slice(0,3)
|
|
|
+ }
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ toIndex() {
|
|
|
+ $api.jump('/pages/index/index')
|
|
|
+ },
|
|
|
+ load() {
|
|
|
+ this.$refs.uReadMore.init();
|
|
|
+ },
|
|
|
open(index) {
|
|
|
- if(that.pageData.section_info[index].open) {
|
|
|
- that.pageData.section_info[index].open = false
|
|
|
+ if(that.pageData.section_info[index].opener) {
|
|
|
+ that.pageData.section_info[index].opener = false
|
|
|
+ } else {
|
|
|
+ that.$set(that.pageData.section_info[index],'opener',true)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ change() {
|
|
|
+ that.show_info = !that.show_info
|
|
|
+ if(that.show_info) {
|
|
|
+ that.intro = that.pageData.introduce
|
|
|
} else {
|
|
|
- that.$set(that.pageData.section_info[index],'open',true)
|
|
|
+ that.intro = that.pageData.introduce.substring(0,45) + '... '
|
|
|
}
|
|
|
+ },
|
|
|
+ buy() {
|
|
|
+ location.href="https://www.daydayu.com/index.html#/video-pay?id=" + that.id
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .content {
|
|
|
+ .content::v-deep {
|
|
|
.top {
|
|
|
width: 100%;
|
|
|
height: 120rpx;
|
|
|
@@ -203,8 +247,8 @@
|
|
|
box-sizing: border-box;
|
|
|
padding: 20rpx;
|
|
|
.logo {
|
|
|
- width: 112rpx;
|
|
|
- height: 77rpx;
|
|
|
+ width: 68rpx;
|
|
|
+ height: 68rpx;
|
|
|
}
|
|
|
.top_title {
|
|
|
font-size: 26rpx;
|
|
|
@@ -284,18 +328,30 @@
|
|
|
color: #333333;
|
|
|
line-height: 48rpx;
|
|
|
}
|
|
|
- .info {
|
|
|
+ .info_box {
|
|
|
+ width: 100%;
|
|
|
+ // height: 50rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 400;
|
|
|
color: #666666;
|
|
|
line-height: 40rpx;
|
|
|
- padding: 20rpx 0 16rpx;
|
|
|
+ margin: 20rpx 0 16rpx;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ box-orient: vertical;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
}
|
|
|
.text_style1 {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 400;
|
|
|
color: #999999;
|
|
|
- line-height: 33rpx;
|
|
|
+ // line-height: 33rpx;
|
|
|
}
|
|
|
.line {
|
|
|
font-size: 28rpx;
|
|
|
@@ -306,12 +362,19 @@
|
|
|
font-size: 36rpx;
|
|
|
font-weight: 600;
|
|
|
color: #5581FB;
|
|
|
- line-height: 50rpx;
|
|
|
+ // line-height: 50rpx;
|
|
|
+ }
|
|
|
+ .text_blue1 {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #5581FB;
|
|
|
+ line-height: 40rpx;
|
|
|
}
|
|
|
.price {
|
|
|
font-size: 56rpx;
|
|
|
color: #5581FB;
|
|
|
font-weight: 600;
|
|
|
+ line-height: 50rpx;
|
|
|
}
|
|
|
.buy_btn {
|
|
|
width: 246rpx;
|
|
|
@@ -335,6 +398,11 @@
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
}
|
|
|
+ .dis {
|
|
|
+ .u-icon--right {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
.list {
|
|
|
width: 644rpx;
|
|
|
border-radius: 16rpx;
|
|
|
@@ -503,7 +571,7 @@
|
|
|
.footer {
|
|
|
width: 100%;
|
|
|
height: 262rpx;
|
|
|
- background: url('/static/image/index1/footer_bg.png') no-repeat;
|
|
|
+ background: url('@/static/image/index1/footer_bg.png') no-repeat;
|
|
|
background-size: 100%;
|
|
|
.bottom_left {
|
|
|
width: 216rpx;
|
|
|
@@ -515,5 +583,22 @@
|
|
|
height: 64rpx;
|
|
|
}
|
|
|
}
|
|
|
+ .u-read-more__toggle__text {
|
|
|
+ width: 181rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ border: 2rpx solid #5581FB;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #5581FB;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin: 48rpx 0 48rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .u-text {
|
|
|
+ justify-content: center !important;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
</style>
|
