Commit 12b84410 authored by Mac's avatar Mac

网课第一版提交

parent 04831e2e
<template>
<view class="school-list">
<view class="good" v-for="(cx, ci) in g" :key="ci" @click="clickHandler(cx)">
<view class="good-img">
<image mode="aspectFill" :src="cx.cover_pic" style="width: 100%; height: 100%;border-radius: 4px;" ></image>
</view>
<view class="good-r" :style="{'width': (windowWidth -15 - 125 -26)+'px'}">
<view class="good-name" v-if="setting.is_show_goods_name==1">
<view
v-if="cx.marketingLogo.iswords && cx.marketingLogo.iswords==1&& cx.marketingLogo.words!=''"
class="Logo"
:style="{color: cx.marketingLogo.wordsColor,
background:cx.marketingLogo.wordsBack ,}"
>{{cx.marketingLogo.words}}</view>
<image
v-if="cx.marketingLogo.iswords&&cx.marketingLogo.iswords==2&& cx.marketingLogo.ico!=''"
mode="heightFix"
:src="cx.marketingLogo.ico"
style=" height: 12px;margin-right: 5px"
/>
{{ cx.name }}
</view>
<view class="good-r-b">
<view class="good-rb-box">
<u-rate
:current="cx.course_score!=null &&cx.course_score>0?cx.course_score:'5'"
active-color="#FEC471" inactive-color="#DDDDDD"
active-icon="star"
inactive-icon="star-o"
size="20"
:disabled="true"
></u-rate>
<text class="good-rb-text">{{cx.course_score!=null &&cx.course_score>0?cx.course_score.toFixed(1):'5.0'}}</text>
</view>
<view class="good-rb-box" v-if="cx.is_pay==false">
<text style="font-size: 10px;color: #999999;text-decoration:line-through;margin-right: 2px;margin-top: 2px;">{{cx.original_price}}</text>
<text :style="{'font-size': '11px','color': pricecolor,'margin-top':'2px'}">¥</text>
<text :style="{'font-size': '16px','color': pricecolor}">{{cx.price.split('.')[0]}}</text>
</view>
<view class="good-rb-box" v-if="cx.is_pay==true">
<text :style="{'font-size': '14px','color': pricecolor}">已购买</text>
</view>
</view>
</view>
</view>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
</view>
</template>
<script>
import auth from "@/components/auth/index.vue";
export default {
components: {
auth,
},
props: ["list"],
data() {
return {
g: [],
showAuth: false,
u: {},
sku: {},
mainColor: "",
pricecolor:'',
setting: {},
windowWidth:0,
};
},
mounted() {
this.g = this.list;
this.mainColor = this.$uiConfig.mainColor;
this.pricecolor = this.$uiConfig.pricecolor;
this.initConfig();
this.windowWidth = this.$utils.SystemInfo().windowWidth;
},
watch: {
list: {
deep: true,
immediate: true,
handler: function (newVal, oldVal) {
this.g = newVal;
},
},
},
methods: {
initConfig() {
this.setting = uni.getStorageSync("basedata").mall.setting;
},
clickHandler(item) {
uni.navigateTo({ url: "/pages/school/courseInfo?GoodsId=" + item.id });
},
reloadUserinfo() {
this.u = uni.getStorageSync("mall_UserInfo");
// this.showAuth = false;
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
},
},
};
</script>
<style>
.school-list .good{
background: #fff;
padding: 10px 13px;
display: flex;
flex-direction: row;
font-family: aa;
}
.school-list .good-img{
width: 125px;
height: 70px;
border-radius: 4px;
box-shadow:0 4px 10px 1px #D2D2D2;
}
.school-list .good-r{
margin-left: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3px;
}
.school-list .good .good-name {
/* height: 37px; */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 3px;
font-size: 14px;
color: #1B1D1E;
}
.school-list .good-r-b{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.school-list .good-rb-box{
display: flex;
flex-direction: row;
align-items: center;
}
.school-list .good-rb-text{
font-size: 11px;
color: #999999;
margin-top: 3px;
margin-left: 2px;
}
</style>
<template>
<view class='Rstudy' :style="{
'padding-top':info.PaddingTop+'px',
'padding-right':info.PaddingRight+'px',
'padding-bottom':info.PaddingBottom+'px',
'padding-left':info.PaddingLeft+'px',
'bottom':posiTop+'px'
}"
v-if="isshow==true"
>
<view class='Rstudy-box' :style="{width:windowWidth+'px'}">
<view class="close" v-if="info.isleft==1" @click="isshow=false">
<u-icon name="cross" color="#FFF" size="40"></u-icon>
</view>
<view class="content" :style="{width:textWidth+'px'}">
<view class="cover" v-if='info.isimg ==1'>
<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601282872605&di=686b8ba4f0e837522a97d77267a2da18&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D2247852322%2C986532796%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853" style="width: 100%;height: 100%;border-radius: 5px;"></image>
</view>
<view class="content-r" :style="{width:(textWidth-70-10)+'px'}">
<text class="content-Name" v-if='info.isName ==1'>vue初级入门最新</text>
<text class="progress" v-if='info.isschedule ==1'>小白入门-ref的使用</text>
</view>
</view>
<view class="close" v-if="info.isleft==2" @click="isshow=false">
<u-icon name="cross" color="#FFF" size="40"></u-icon>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
info:{
PaddingTop:0,
PaddingRight:0,
PaddingBottom:0,
PaddingLeft:0,
isimg:1,
isName:1,
isschedule:1,
isleft:2,
},
textWidth:0,
windowWidth:0,
isshow:false,
posiTop:0,
}
},
created(){
this.posiTop = this.$uiConfig.is_bang?80:52;
this.windowWidth = this.$utils.SystemInfo().windowWidth;
this.textWidth = this.windowWidth - this.info.PaddingRight-this.info.PaddingLeft - 30 - 20-10
}
}
</script>
<style>
.Rstudy{
position: absolute;
left: 0;
}
.Rstudy-box{
width: 100%;
padding: 10px;
display: flex;flex-direction: row;
align-items: center;
background: rgba(99, 99, 107, 0.8);
border-radius: 5px;
justify-content: space-between;
}
.Rstudy .close{
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.Rstudy .content{
display: flex;
flex-direction: row;
align-items: center;
}
.Rstudy .content .cover{
width: 70px;
height: 35px;
margin-right: 10px;
border-radius: 5px;
}
.Rstudy .content .content-r{
height: 35px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #FFF;
font-family: aa;
}
.Rstudy .content .content-Name{
font-size: 12px;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.Rstudy .content .progress{
font-size: 14px;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<template>
<div class="goods-box" :class="{ flex: goods.catPosition == 'left' }">
<div :class="{ 'right-slider': goods.catPosition == 'top' }">
<!-- 只是商品 -->
<template>
<!--一行一个-->
<style1 v-if="goods.listStyle == 1" :goods-info="goods" :good-list="currentList"></style1>
<!--一行两个-->
<style2 v-if="goods.listStyle == 2" :goods-info="goods" :good-list="currentList"></style2>
<!--左右滚动-->
<style5 v-if="goods.listStyle == 0" :goods-info="goods" :good-list="currentList"></style5>
<!--列表模式-->
<style6 v-if="goods.listStyle == -1" :goods-info="goods" :good-list="currentList"></style6>
</template>
</div>
</div>
</template>
<script>
import style1 from './style1';
import style2 from './style2';
import style5 from './style5';
import style6 from './style6';
export default {
// props: ['goods'],
components: {
style1,
style2,
style5,
style6,
},
data() {
return {
mainColor: '',
activeKey: 0,
currentList: [],
goods:{
catPosition:'top',
listStyle:2,
showCat:false,
backgroundColor:'',
backgroundPicUrl:'',
goodsStyle:2,//边框模式
showGoodsName:true,
showsubtitle:true,
goodsCoverProportion:'1-1',
backgroundColor:'#FFF',
PaddingTop:10,
PaddingRight:10,
PaddingBottom:10,
PaddingLeft:10,
list:[
{id: 367454,
name: "高考必考语文作文快速提升作文快速提升",
picUrl: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1593499381000_752.jpg",
subtitle: '本教程共分3个章节',
},
{id: 367454,
name: "高考必考语文作文快速提升作文快速提升",
picUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601282872605&di=686b8ba4f0e837522a97d77267a2da18&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D2247852322%2C986532796%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853",
subtitle: '本教程共分3个章节',
},
{id: 367454,
name: "高考必考语文作文快速提升作文快速提升",
picUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601282872605&di=686b8ba4f0e837522a97d77267a2da18&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D2247852322%2C986532796%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853",
subtitle: '本教程共分3个章节',
}
]
}
};
},
created() {
this.mainColor = this.$uiConfig.mainColor;
if (this.goods.showCat) {
this.currentList = this.goods.catList[0].goodsList;
} else {
this.currentList = this.goods.list;
}
},
methods: {
tabChangeHandler(i) {
this.currentList = this.goods.catList[i].goodsList;
this.activeKey = i;
}
}
};
</script>
<style>
.style4View {
display: inline-block;
width: 100%;
padding-left: 80px;
box-sizing: border-box;
}
.goods-box {
/* margin: 20rpx 0; */
}
.goods-box .tips {
z-index: 50 !important;
}
.goods-box.flex {
display: flex;
}
.goods-box.flex .left-slider {
width: 80px;
position: absolute;
}
.goods-box.flex .right-slider {
flex: 1;
width: 1rpx;
}
.defaultz .van-sticky {
z-index: 1 !important;
}
.goods-box .van-tabs__scroll {
background: none;
}
.goods-box ._div {
width: 100%;
}
</style>
<template>
<div
:style="{
'background-color': goodsInfo.backgroundColor,
'background-image': goodsInfo.backgroundPicUrl,
'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
}"
>
<div
v-for="(item, gli) in goodList"
:key="gli"
class="good-one"
@click="openGood(item)"
:style="{
border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
}"
>
<!-- <div class="tips" v-if="goodsInfo.showGoodsTag"><image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width: 100%;" /></div> -->
<!-- <image
style="width: calc(100vw - 24px); height: 66vw;"
:mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
:src="item.picUrl"
v-if="goodsInfo.goodsCoverProportion == '3-2'"
/> -->
<image
style="
width: calc(100vw - 24px);
height: 100vw;
border-radius: 10rpx 10rpx 0 0;
"
mode='aspectFill'
:src="item.picUrl"
/>
<div class="good-info" v-if="imgModel==false">
<div class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</div>
<div class="good-price-info" v-if="goodsInfo.showsubtitle">
<span class="price" >{{ item.subtitle }}</span>
</div>
</div>
</div>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
</div>
</template>
<script>
import auth from '@/components/auth/index.vue';
export default {
components: {
auth
},
props: ['goodList', 'goodsInfo'],
data() {
return {
mainColor: '',
activeKey: 0,
showSku: false,
sku: {},
showAuth: false,
u: {},
imgModel:false
};
},
created() {
this.mainColor = this.$uiConfig.mainColor;
if(this.goodsInfo.showGoodsName==false && this.goodsInfo.showsubtitle ==false){
this.imgModel=true
}
},
methods: {
openGood(item) {
this.u = uni.getStorageSync('mall_UserInfo');
if (!this.u) {
this.u = {
nickName: '未登录',
avatarUrl: ''
};
this.showAuth = true;
} else {
uni.navigateTo({ url: '/pages/goods/goods?GoodsId=' + item.id });
}
},
reloadUserinfo() {
this.u = uni.getStorageSync('mall_UserInfo');
// this.showAuth = false;
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
}
}
};
</script>
<style>
.good-one {
margin: 12px;
position: relative;
border: 1rpx solid transparent;
border-radius: 10rpx;
/* padding-bottom: 10rpx; */
overflow: hidden;
}
.good-one .tips {
width: 64rpx;
height: 64rpx;
position: absolute;
top: 0;
left: 0;
z-index: 4;
}
.good-one .guding {
position: relative;
}
.good-one .guding .img-box {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.good-one .good-info {
padding: 12rpx;
padding-bottom: 0;
margin-top: -5px;
}
.good-one .good-info .good-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 13px;
}
.good-one .good-info .good-price-info {
display: flex;
}
.good-one .good-info .good-price-info .price {
color: #999999;
font-size: 11px;
flex: 1;
}
.good-one .good-info .good-price-info .buy {
width: 24px;
text-align: right;
}
</style>
<template>
<view
style="padding: 12px; padding-bottom: 0;"
:style="{
'background-color': goodsInfo.backgroundColor,
'background-image': goodsInfo.backgroundPicUrl,
'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
}"
>
<u-row gutter="24">
<u-col span="6" v-for="(item, gli) in goodList" :key="gli">
<view
class="good-two"
@click="openGood(item)"
:style="{
border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
}"
>
<!-- <view class="tips" v-if="goodsInfo.showGoodsTag"><image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width:100%" /></view> -->
<view class="img-box">
<view class="img-show">
<image
style="
width: 100%;
height: 100%;
border-radius: 10rpx 10rpx 0 0;
"
mode="aspectFill"
:src="item.picUrl"
/>
</view>
</view>
<view class="good-info" v-if="imgModel==false">
<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</view>
<view class="good-price-info" v-if="goodsInfo.showsubtitle">
<span class="price" >{{ item.subtitle }}</span>
</view>
</view>
</view>
</u-col>
</u-row>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
</view>
</template>
<script>
import auth from '@/components/auth/index.vue';
export default {
components: {
auth
},
props: ['goodList', 'goodsInfo'],
data() {
return {
mainColor: '',
activeKey: 0,
showSku: false,
showAuth: false,
u: {},
imgModel:false
};
},
created() {
this.mainColor = this.$uiConfig.mainColor;
if(this.goodsInfo.showGoodsName==false && this.goodsInfo.showsubtitle ==false){
this.imgModel=true
}
},
methods: {
openGood(item) {
this.u = uni.getStorageSync('mall_UserInfo');
if (!this.u) {
this.u = {
nickName: '未登录',
avatarUrl: ''
};
this.showAuth = true;
} else {
uni.navigateTo({ url: '/pages/school/courseList?GoodsId=' + item.id });
// uni.navigateTo({ url: '/pages/school/articleList' });
}
},
reloadUserinfo() {
this.u = uni.getStorageSync('mall_UserInfo');
// this.showAuth = false;
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
}
}
};
</script>
<style>
.good-two {
position: relative;
margin-bottom: 12px;
border: 1rpx solid transparent;
border-radius: 10rpx;
overflow: hidden;
/* padding-bottom: 10rpx; */
}
.good-two .tips {
width: 64rpx;
height: 64rpx;
position: absolute;
top: 0;
left: 0;
z-index: 4;
}
.good-two .img-box {
width: 100%;
height: 0;
padding-top: 54%;
position: relative;
}
.good-two .img-box .img-show {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.good-two .guding {
position: relative;
}
.good-two .guding .img-box {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.good-two .good-info {
padding: 6rpx;
margin-top: -5px;
padding-bottom: 0;
}
.good-two .good-info .good-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin: 3px 0;
font-size: 13px;
height: 37px;
}
.good-two .good-info .good-price-info {
display: flex;
}
.good-two .good-info .good-price-info .price {
color: #999999;
/* flex: 1; */
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.good-two .good-info .good-price-info .buy {
width: 24px;
text-align: right;
}
</style>
<template>
<view
class="her-scoller"
:style="{
'background-color': goodsInfo.backgroundColor,
'background-image': goodsInfo.backgroundPicUrl,
'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : '',
'padding-top':goodsInfo.PaddingTop+'px',
'padding-right':goodsInfo.PaddingRight+'px',
'padding-bottom':goodsInfo.PaddingBottom+'px',
'padding-left':goodsInfo.PaddingLeft+'px',
}"
>
<view
class="good-five"
@click="openGood(item)"
v-for="(item, gli) in goodList"
:key="gli"
>
<view class="img-box" :style="{'width':imgModel?'173px':'97px','height':imgModel?'100px':'70px'}"><image style="width: 100%; height: 100%;border-radius: 4px;" mode="aspectFill" :src="item.picUrl" /></view>
<view class="good-info" v-if="imgModel==false">
<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</view>
<view class="good-price-info" v-if="goodsInfo.showsubtitle">
<span class="price" >{{ item.subtitle }}</span>
</view>
</view>
</view>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
</view>
</template>
<script>
import auth from '@/components/auth/index.vue';
export default {
components: {
auth
},
props: ['goodList', 'goodsInfo'],
data() {
return {
mainColor: '',
activeKey: 0,
showAuth: false,
u: {},
imgModel:false,
};
},
created() {
this.mainColor = this.$uiConfig.mainColor;
if(this.goodsInfo.showGoodsName==false && this.goodsInfo.showsubtitle ==false){
this.imgModel=true
}
},
methods: {
openGood(item) {
this.u = uni.getStorageSync('mall_UserInfo');
if (!this.u) {
this.u = {
nickName: '未登录',
avatarUrl: ''
};
this.showAuth = true;
} else {
uni.navigateTo({ url: '/pages/goods/goods?GoodsId=' + item.id });
}
},
reloadUserinfo() {
this.u = uni.getStorageSync('mall_UserInfo');
// this.showAuth = false;
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
}
}
};
</script>
<style>
.her-scoller {
overflow-x: auto !important;
display: flex;
}
.her-scoller .good-five {
position: relative;
border-radius: 10rpx;
display: flex;
flex-direction: row;
align-items: center;
/* float: left; */
}
.her-scoller .good-five .tips {
width: 64rpx;
height: 64rpx;
position: absolute;
top: 0;
left: 0;
z-index: 4;
}
.her-scoller .good-five .img-box {
width: 97px;
height: 70px;
margin-right: 10px;
}
.her-scoller .good-five .good-info {
padding: 5px 0 ;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 173px;
height: 70px;
}
.her-scoller .good-five .good-info .good-name {
font-size: 13px;
height: 34px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding-right: 5px;
}
.her-scoller .good-five .good-info .good-price-info {
display: flex;
justify-items: center;
align-items: center;
}
.her-scoller .good-five .good-info .good-price-info .price {
color: #999999;
flex: 1;
font-size: 11px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.her-scoller .good-five .good-info .good-price-info .buy {
width: 24px;
text-align: right;
}
</style>
<template>
<view
style="width:100%;"
:style="{
'background-color': goodsInfo.backgroundColor,
'background-image': goodsInfo.backgroundPicUrl,
'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : '',
'padding-top':goodsInfo.PaddingTop+'px',
'padding-right':goodsInfo.PaddingRight+'px',
'padding-bottom':goodsInfo.PaddingBottom+'px',
'padding-left':goodsInfo.PaddingLeft+'px',
}"
>
<view
class="good-four"
v-for="(item, gli) in goodList"
:key="gli"
@click="openGood(item)"
:style="{
background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
}"
>
<view class="img-box"><image style="width: 100%; height: 100%;border-radius: 4px;" mode="aspectFill" :src="item.picUrl" /></view>
<view class="good-info" v-if="imgModel==false">
<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</view>
<view class="good-price-info" v-if="goodsInfo.showsubtitle">
<span class="price" >{{ item.subtitle }}</span>
</view>
</view>
</view>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
</view>
</template>
<script>
import goodSku from '../goods/goodsku';
import auth from '@/components/auth/index.vue';
export default {
components: {
auth
},
props: ['goodList', 'goodsInfo'],
data() {
return {
mainColor: '',
activeKey: 0,
showAuth: false,
u: {},
imgModel:false
};
},
created() {
this.mainColor = this.$uiConfig.mainColor;
if(this.goodsInfo.showGoodsName==false && this.goodsInfo.showsubtitle ==false){
this.imgModel=true
}
},
methods: {
openGood(item) {
this.u = uni.getStorageSync('mall_UserInfo');
if (!this.u) {
this.u = {
nickName: '未登录',
avatarUrl: ''
};
this.showAuth = true;
} else {
uni.navigateTo({ url: '/pages/goods/goods?GoodsId=' + item.id });
}
},
reloadUserinfo() {
this.u = uni.getStorageSync('mall_UserInfo');
// this.showAuth = false;
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
}
}
};
</script>
<style>
.good-four {
position: relative;
/* margin-bottom: 14px; */
display: flex;
height: 90px;
border: 1rpx solid transparent;
border-radius: 10rpx;
box-sizing: border-box;
padding: 0 1px 1px 0;
overflow: hidden;
padding: 10px 0;
}
.good-four .tips {
width: 64rpx;
height: 64rpx;
position: absolute;
top: 0;
left: 0;
z-index: 4;
}
.good-four .img-box {
width: 125px;
height: 70px;
}
.good-four .good-info {
padding: 5px 0 5px 10px;
flex: 1;
width: 1rpx;
border: 10rpx;
padding-bottom: 0;
display: flex;
flex-direction: column;
/* width:20%; */
}
.good-four .good-info .good-name {
font-size: 13px;
height: 34px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.good-four .good-info .good-price-info {
display: flex;
justify-items: center;
align-items: flex-end;
height: 22px;
flex: 1;
padding-bottom: 10rpx;
}
.good-four .good-info .good-price-info .price {
color: #999999;
flex: 1;
font-size: 11px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.good-four .good-info .good-price-info .buy {
width: 24px;
text-align: right;
}
</style>
...@@ -350,6 +350,35 @@ ...@@ -350,6 +350,35 @@
"path": "index" "path": "index"
}] }]
}, },
//教育列表
{
"root": "pages/school",
"pages": [{
"path": "courseList"
},{
"path": "courseInfo"
},{
"path":"courseContent",
"style": {
"navigationStyle": "custom"
}
},{
"path":"teacherDetails",
"style": {
"navigationStyle": "custom"
}
},{
"path":"articleList"
},{
"path":"articleDetails"
},{
"path":"commentPageList"
},{
"path":"course-submit"
}]
},
//抖音商品短视频 //抖音商品短视频
{ {
"root": "pages/video", "root": "pages/video",
......
...@@ -44,14 +44,14 @@ ...@@ -44,14 +44,14 @@
<u-empty text="没有找到商品信息" font-size="36" mode="list" ></u-empty> <u-empty text="没有找到商品信息" font-size="36" mode="list" ></u-empty>
</view> </view>
<view class="quick" v-if="!loading"> <!-- <view class="quick" v-if="!loading">
<view class="item"> <view class="item">
<u-icon name="cart-o" size="48" color="#333" /> <u-icon name="cart-o" size="48" color="#333" />
</view> </view>
<view class="item" @click="goTop"> <view class="item" @click="goTop">
<u-icon name="arrow-up" size="48" color="#333" /> <u-icon name="arrow-up" size="48" color="#333" />
</view> </view>
</view> </view> -->
</view> </view>
</template> </template>
......
...@@ -55,6 +55,11 @@ ...@@ -55,6 +55,11 @@
<pingtuan v-if="d.id == 'pintuan'" :goods="d.data" :key="di"></pingtuan> <pingtuan v-if="d.id == 'pintuan'" :goods="d.data" :key="di"></pingtuan>
<shopinfo v-if="d.id == 'shop-info' " :ad="d.data" :key="di" ref="son"></shopinfo> <shopinfo v-if="d.id == 'shop-info' " :ad="d.data" :key="di" ref="son"></shopinfo>
<guide v-if="d.id == 'drive-guide'" :info="d.data" ref='city'></guide> <guide v-if="d.id == 'drive-guide'" :info="d.data" ref='city'></guide>
<!-- 网课列表 -->
<rgoods v-if="d.id == 'goods'"></rgoods>
<!-- 最近学习组件 -->
<rstudy v-if='di==item.template.data.length-1'></rstudy>
</template> </template>
</view> </view>
</template> </template>
...@@ -112,6 +117,8 @@ import pingtuan from "@/components/pingtuan/index"; ...@@ -112,6 +117,8 @@ import pingtuan from "@/components/pingtuan/index";
import shopinfo from "@/components/shopinfo/shopinfo"; import shopinfo from "@/components/shopinfo/shopinfo";
import auth from "@/components/auth/index.vue"; import auth from "@/components/auth/index.vue";
import guide from "@/components/guidecar/index.vue"; import guide from "@/components/guidecar/index.vue";
import rstudy from "@/components/study/Rstudy.vue";
import rgoods from "@/components/study/index.vue";
export default { export default {
data() { data() {
...@@ -167,7 +174,9 @@ export default { ...@@ -167,7 +174,9 @@ export default {
pingtuan, pingtuan,
shopinfo, shopinfo,
auth, auth,
guide guide,
rstudy,
rgoods
}, },
onLoad(options) { onLoad(options) {
console.log(options, "option"); console.log(options, "option");
......
<template>
<view class="articleDetails">
<view class="ad-box">
<view style="font-size: 21px;color: #1C1E1F;">{{article.Name}}</view>
<view class="ad-box-tx">
<u-avatar :src="article.TeacherLogo" size="60" v-if="article.TeacherLogo!=null && article.TeacherLogo!=''"></u-avatar>
<u-avatar :src="mall.setting.share_pic" size="60" v-if="article.TeacherLogo==null || article.TeacherLogo==''"></u-avatar>
<view class="ad-box-txr">
<text v-if="article.TeacherName!=null && article.TeacherName!=''">{{article.TeacherName}}</text>
<text v-if="article.TeacherName==null || article.TeacherName==''">{{mall.setting.share_title}}</text>
<text style="font-size: 11px;color: #9A9A9A;">{{article.CreateDate}}</text>
</view>
</view>
<view style="padding-top: 15px;">
<h-parse :content="article.Describe" @navigate="clickDescription"></h-parse>
</view>
</view>
<view style="width: 100%;height: 15px;background: #F5F6F7;"></view>
<view class="tiaoti">
<view style="display: flex;flex-direction: row;align-items: center;">
<view class="tiaoti-l"></view>
<text style="font-size: 12px;color: #1C1E1F;margin-left: 5px;">{{count}}条评价</text>
</view>
<view style="display: flex;flex-direction: row;align-items: center;" v-if="count>5" @click="gocomList">
<text style="font-size: 13px;color: #909399;margin-right: 5px;">查看更多</text>
<u-icon name="arrow" size='24' color='#909399' ></u-icon>
</view>
</view>
<view style="margin-bottom: 60px;font-family: aa;">
<view class="comlist" v-for="(cx, ci) in commentList" :key="ci">
<view style="width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
<view style="display: flex;flex-direction: row;align-items: center">
<u-avatar :src="cx.UserPhotoPath" size="50" ></u-avatar>
<text style="font-size: 13px;color: #121212;margin-left: 5px;width: calc(100vw - 165px);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;">{{cx.UserName}}</text>
</view>
<text style="font-size: 11px;color: #9A9A9A;">{{cx.CreateDate}}</text>
</view>
<view style="width: 100%;margin-top: 15px;font-size: 11px;color: #121212;">
{{cx.Content}}
</view>
<view class="comment-dao" style="flex-wrap: wrap;margin-top: 5px;" v-if="cx.CommentImgList.length>0">
<image
v-for="(item, index) in cx.CommentImgList" :key="index"
mode="aspectFill"
:src="item"
@click="previewImage2(index,cx.CommentImgList)"
:style="{'width':san,'height':san}"
/>
</view>
</view>
</view>
<view style="width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;color: #5A5A5A;margin-bottom: 60px;" v-if="commentList.length==0">
暂无留言~
</view>
<view class="comment" v-if="article.IsComment==1">
<input type="text" v-model="commentMsg.Content" placeholder='留下您精彩的评论' class="commentinput" >
<view class="comment-pl" :style="{background:mainColor}" @click="addComment">评论</view>
</view>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
</view>
</template>
<script>
import hParse from "@/components/u-parse/parse.vue";
import auth from "@/components/auth/index.vue";
export default {
components: {
auth,
hParse
},
data() {
return {
pageTitle:'详情',
g: [],
showAuth: false,
u: {},
mainColor: "",
pricecolor:'',
windowWidth:0,
ID:0,
article:{},
mall:{},
commentList:[],//留言列表
commentMsg:{
PlatformSource:1,
ArticleId:0,
Content:'',
CommentImgList:[],
},
san:'100px',
count:0,
};
},
mounted() {
this.mainColor = this.$uiConfig.mainColor;
this.pricecolor = this.$uiConfig.pricecolor;
this.windowWidth = this.$utils.SystemInfo().windowWidth;
this.mall = uni.getStorageSync("basedata")?uni.getStorageSync("basedata").mall:{};
uni.setNavigationBarTitle({
title: this.pageTitle,
});
},
onLoad(options) {
if(options && options.ID){
this.ID = options.ID;//资讯id
this.commentMsg.ArticleId = options.ID;
this.init();
this.getArticleCommentPageList()
}
let that = this
uni.getSystemInfo({
success(res) {
that.san = (res.windowWidth-20)/3+'px'
}
})
},
methods: {
init(){
this.request2({
url: '/api/AppletSchool/GetArticleModel',
data: {ID:this.ID}
},
res => {
this.loading = false;
this.isloading = false;
if (res.resultCode == 1) {
this.article= res.data;
this.article.CreateDate = this.article.CreateDate.replace('T',' ')
}
}
);
},
getArticleCommentPageList(){//留言列表
this.request2({
url: '/api/AppletSchool/GetArticleCommentPageList',
data: {pageIndex:1,pageSize:5,CommentGrade:0,ArticleId:this.ID}
},
res => {
this.commentList = res.data.pageData;
this.count = res.data.count;
}
);
},
addComment(){//新增评论
this.request2({
url: '/api/AppletEducation/SetArticleCommentInfo',
data: this.commentMsg
},
res => {
uni.showToast({
title: res.message,
icon: 'none',
});
this.commentMsg.Content = '';
this.getArticleCommentPageList()//评论了之后调取留言列表
}
);
},
//图片预览
previewImage2(index, images) {
uni.previewImage({
urls: images,
current: index,
});
},
gocomList(){//跳转全部留言
uni.navigateTo({ url: "/pages/school/commentPageList?ID=" + this.ID });
},
clickDescription(e) {
console.log(e);
},
reloadUserinfo() {
this.u = uni.getStorageSync("mall_UserInfo");
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
},
},
};
</script>
<style>
.articleDetails{
width: 100%;
height: 100vh;
background: #FFF;
}
.articleDetails .ad-box{
width: 100%;
padding: 15px;
}
.articleDetails .ad-box-tx{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin-top: 25px;
}
.articleDetails .ad-box-txr{
margin-left: 10px;
width: calc(100vw - 70px);
height: 25px;
font-size: 13px;
color: #121212;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.articleDetails .tiaoti{
width: 100%;
height: 35px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 12px;
}
.articleDetails .tiaoti-l{
width: 3px;
height: 14px;
background-image: linear-gradient(
to bottom,
#00D6A6,
#B5FFEE
);
}
.articleDetails .comment{
width: 100%;
height: 55px;
padding: 0 15px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: fixed;
left: 0;
bottom: 0;
background: #FFF;
}
.comment .comment-pl{
width: 56px;
height: 26px;
font-size: 13px;
color: #FFF;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
}
.articleDetails .commentinput{
width: calc(100vw - 120px);
height: 30px;
background: #F3FAF8;
border-radius: 15px;
font-size: 13px;
padding: 0 10px;
}
.articleDetails .comlist{
padding: 10px;
width: 100%;
}
.articleDetails .comment-dao{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
</style>
<template>
<view class="articleList">
<view v-if="g.length > 0" style="
height: calc(100vh);
width: 100%;
overflow: hidden;
">
<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true"
style="height: 100%; padding-bottom: 10px;">
<view class="school-list">
<view class="good" v-for="(cx, ci) in g" :key="ci" @click="clickHandler(cx)">
<view class="good-r" :style="{'width': (windowWidth -15 - 125 -26)+'px'}">
<view class="good-name">
{{ cx.Name }}
</view>
<view class="good-r-b">
<text>浏览数{{cx.BrowseNum+cx.FictitiousBrowseNum}}</text>
<text style="margin-left: 10px;">{{cx.CommentNum}}留言</text>
</view>
</view>
<view class="good-img">
<image mode="aspectFill" :src="cx.ArticlePic" style="width: 100%; height: 100%;border-radius: 4px;" ></image>
</view>
</view>
</view>
<u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
:margin-bottom="20" bg-color="#FFF" />
</scroll-view>
</view>
<view v-if="!loading && g.length== 0 " style="
height: calc(100vh);
width: calc(100vw - 20px);
padding-top: 10px;
">
<u-empty text="没有找到商品信息" font-size="36" mode="list" ></u-empty>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pageTitle:'教育资讯',
status: "loadmore",
sortStatus: 1,
mainColor: "",
isover: false,
loading: true,
page: 1,
page_count: 1,
g: [],
loadText: {
loadmore: "轻轻上拉,加载更多",
loading: "努力加载中",
nomore: "没有更多资讯了",
},
showLoading: true,
sortShowType: 1,
coupon_id: 0,
msg: {
pageIndex: 1,
pageSize: 10,
},
windowWidth:0,
};
},
onLoad(option) {
this.mainColor = this.$uiConfig.mainColor;
this.windowWidth = this.$utils.SystemInfo().windowWidth;
uni.setNavigationBarTitle({
title: this.pageTitle,
});
},
mounted() {
this.init();
},
methods: {
init() {
this.isover = false;
this.loading = true;
this.request2({
url: '/api/AppletSchool/GetArticlePageList',
data: this.msg
},
res => {
this.loading = false;
this.isloading = false;
if (res.resultCode == 1) {
this.g = this.g.concat(res.data.pageData);
this.page_count = res.data.pageCount;
if (this.page_count == 1) {
this.isover = true;
this.status = "nomore";
} else {
this.status = "loadmore";
}
}
uni.hideNavigationBarLoading();
}
);
},
lower(e) {
if (this.msg.pageIndex < this.page_count) {
this.status = "loading";
this.msg.pageIndex++;
this.init();
} else {
this.isover = true;
this.status = "nomore";
}
},
clickHandler(item){
uni.navigateTo({ url: "/pages/school/articleDetails?ID=" + item.ID });
}
},
};
</script>
<style>
.articleList {
height: 100%;
background: #fff;
position: relative;
}
.articleList .quick {
right: 50rpx;
bottom: 50rpx;
position: absolute;
}
.articleList .quick .item {
background: #fff;
border: 1px solid #aaa;
height: 90rpx;
width: 90rpx;
color: #333;
border-radius: 90rpx;
margin-top: 40rpx;
display: flex;
align-items: center;
justify-content: center;
}
.articleList .sortbox {
display: flex;
background: #fff;
}
.articleList .sortbox .item {
height: 40px;
line-height: 40px;
flex: 1;
text-align: center;
}
.school-list .good{
background: #fff;
padding: 10px 13px;
display: flex;
flex-direction: row;
font-family: aa;
justify-content: space-between;
}
.school-list .good-img{
width: 125px;
height: 70px;
border-radius: 4px;
box-shadow:0 4px 10px 1px #D2D2D2;
}
.school-list .good-r{
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3px;
}
.school-list .good .good-name {
/* height: 37px; */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 3px;
font-size: 14px;
color: #1B1D1E;
}
.school-list .good-r-b{
display: flex;
flex-direction: row;
align-items: center;
font-size: 11px;color: #9A9A9A;
}
</style>
<template>
<view class="commentPageList">
<view v-if="g.length > 0" style="
height: calc(100vh);
width: 100%;
overflow: hidden;
">
<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true"
style="height: 100%; padding-bottom: 10px;">
<view style="font-family: aa;">
<view class="comlist" v-for="(cx, ci) in g" :key="ci">
<view style="width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
<view style="display: flex;flex-direction: row;align-items: center">
<u-avatar :src="cx.UserPhotoPath" size="50" ></u-avatar>
<text style="font-size: 13px;color: #121212;margin-left: 5px;width: calc(100vw - 165px);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;">{{cx.UserName}}</text>
</view>
<text style="font-size: 11px;color: #9A9A9A;">{{cx.CreateDate}}</text>
</view>
<view style="width: 100%;margin-top: 15px;font-size: 11px;color: #121212;">
{{cx.Content}}
</view>
<view class="comment-dao" style="flex-wrap: wrap;margin-top: 5px;" v-if="cx.CommentImgList.length>0">
<image
v-for="(item, index) in cx.CommentImgList" :key="index"
mode="aspectFill"
:src="item"
@click="previewImage2(index,cx.CommentImgList)"
:style="{'width':san,'height':san}"
/>
</view>
</view>
</view>
<u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
:margin-bottom="20" bg-color="#FFF" />
</scroll-view>
</view>
<view v-if="!loading && g.length== 0 " style="
height: calc(100vh);
width: calc(100vw - 20px);
padding-top: 10px;
">
<u-empty text="没有找留言信息" font-size="36" mode="list" ></u-empty>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pageTitle:'留言列表',
status: "loadmore",
mainColor: "",
isover: false,
loading: true,
page: 1,
page_count: 1,
g: [],
loadText: {
loadmore: "轻轻上拉,加载更多",
loading: "努力加载中",
nomore: "没有更多留言了",
},
showLoading: true,
sortShowType: 1,
coupon_id: 0,
msg: {
pageIndex: 1,
pageSize: 10,
CommentGrade:0,
ArticleId:0,
},
windowWidth:0,
san:'100px',
};
},
onLoad(options) {
this.mainColor = this.$uiConfig.mainColor;
this.windowWidth = this.$utils.SystemInfo().windowWidth;
this.san = (this.windowWidth-20)/3+'px';
console.log(this.san)
if(options && options.ID){
this.msg.ArticleId = options.ID;//资讯id
this.init();
}
uni.setNavigationBarTitle({
title: this.pageTitle,
});
},
mounted() {
},
methods: {
init() {
this.isover = false;
this.loading = true;
this.request2({
url: '/api/AppletSchool/GetArticleCommentPageList',
data: this.msg
},
res => {
this.loading = false;
this.isloading = false;
if (res.resultCode == 1) {
this.g = this.g.concat(res.data.pageData);
this.page_count = res.data.pageCount;
if (this.page_count == 1) {
this.isover = true;
this.status = "nomore";
} else {
this.status = "loadmore";
}
}
uni.hideNavigationBarLoading();
}
);
},
lower(e) {
if (this.msg.pageIndex < this.page_count) {
this.status = "loading";
this.msg.pageIndex++;
this.init();
} else {
this.isover = true;
this.status = "nomore";
}
},
//图片预览
previewImage2(index, images) {
uni.previewImage({
urls: images,
current: index,
});
},
},
};
</script>
<style>
.commentPageList {
height: 100%;
background: #fff;
position: relative;
}
.commentPageList .comlist{
padding: 10px;
width: 100%;
}
.commentPageList .comment-dao{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
</style>
<template>
<u-popup
mode="bottom"
:border-radius="20"
:popup="false"
v-model="value"
:maskCloseAble="true"
length="auto"
:safeAreaInsetBottom="true"
@close="popupClose"
:z-index="9999"
close-icon="close"
>
<view class="share-box" :style="{ paddingBottom: bianyi ? '50rpx' : '0' }">
<view class="title">分享商品</view>
<scroll-view scroll-y class="share_b">
<view class="goodname">{{ goodName }}</view>
<view class="img-box">
<view class="box">
<image
v-for="(x, i) in images"
:key="i"
:src="x.pic_url"
class="img"
mode="aspectFill"
/>
</view>
<view v-if="advertising!=null && advertising !='' " style="margin-top: 10px;line-height: 1.5;font-size: 28rpx;color:#333">
<span>广告词:{{advertising}}</span>
<u-button size="mini" shape="circle" style='margin-left: 10px;' @click="paste(advertising)">复制</u-button>
</view>
</view>
</scroll-view>
<view class="op-box">
<view class="left">
<text @click="copyHandler">复制文本</text>
<text @click="savePicHandler" style="text-align: center;"
>保存图片</text
>
<text @click="genernalHandler" style="text-align: right;"
>生成海报</text
>
</view>
<view class="right">
<text>分享到</text>
<image
src="/static/images/icon/quan.png"
style="width: 24px; height: 24px;"
@click="sendQuanHandler"
/>
<!-- #ifdef MP-WEIXIN -->
<button open-type="share" style="border: none; outline: none;">
<image
src="/static/images/icon/friend.png"
style="width: 24px; height: 24px;"
/>
</button>
<!-- #endif -->
</view>
</view>
</view>
<u-top-tips ref="uTips"></u-top-tips>
</u-popup>
</template>
<script>
export default {
model: {},
props: {
value: {
type: Boolean,
default: true,
},
goodId: {
type: Number,
default: 0,
},
goodName: {
type: String,
default: "",
},
advertising: {
type: String,
default: "",
},
images: {
type: Array,
default: [],
},
},
data() {
return {
bianyi: false,
};
},
mounted() {
this.bianyi = this.$uiConfig.is_bang;
},
methods: {
popupClose(){
this.$emit('close')
},
savePicHandler() {
uni.showLoading({
title: "正在下载图片",
});
let arr = JSON.parse(JSON.stringify(this.images));
this.downLoadImage(arr);
},
genernalHandler() {
//this.goodId
uni.navigateTo({
url: "/pages/goods/draw?id="+this.goodId,
});
},
sendQuanHandler() {
this.copyHandler();
setTimeout(() => {
this.savePicHandler();
}, 1000);
},
downLoadImage(arr) {
let that = this;
uni.downloadFile({
url: arr[0].pic_url,
success: (res) => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
arr.splice(0, 1);
if (arr.length > 0) {
that.downLoadImage(arr);
} else {
uni.hideLoading();
uni.showToast({
title: "下载成功",
});
}
},
fail: function (e) {
uni.hideLoading();
that.$refs.uTips.show({
title: "下载失败,请稍后重试",
type: "error",
duration: "2300",
});
},
});
} else {
uni.hideLoading();
that.$refs.uTips.show({
title: "下载失败,请稍后重试",
type: "error",
duration: "2300",
});
}
},
});
},
copyHandler() {
uni.setClipboardData({
data: this.goodName,
});
},
paste(value){
uni.setClipboardData({
data: value,
});
},
previewImage(i) {
uni.previewImage({
urls: this.imgs,
current: i,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function (data) {},
fail: function (err) {
console.log(err.errMsg);
},
},
});
},
},
};
</script>
<style>
.share-box {
position: relative;
padding: 20rpx;
padding-bottom: 0;
}
.share-box .title {
font-size: 40rpx;
color: #000;
margin-bottom: 50rpx;
font-weight: 600;
}
.share-box .goodname {
font-size: 28rpx;
line-height: 1.5;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
color: #333;
}
.share-box .img-box {
margin-top: 40rpx;
padding-bottom: 40rpx;
display: block;
border-bottom: 2rpx solid #f1f1f1;
overflow-x: auto;
}
.share-box .img-box .box {
white-space: nowrap;
}
.share-box .img-box .box .img {
display: inline-block;
width: 252rpx;
height: 252rpx;
border-radius: 8rpx;
margin-right: 20rpx;
}
.share-box .op-box {
display: flex;
margin: 20rpx 0;
align-items: center;
font-size: 14px;
color: gray;
}
.share-box .op-box .left {
display: flex;
flex: 1;
width: 1rpx;
align-items: center;
}
.share-box .op-box .left text {
flex: 1;
text-align: left;
width: 1rpx;
}
.share-box .op-box .right {
margin-left: 20rpx;
border-left: 2rpx solid #f1f1f1;
display: flex;
align-items: center;
}
.share-box .op-box .right text,
.share-box .op-box .right image {
margin-left: 20rpx;
}
.share-box .op-box .right button {
border: none;
outline: none;
padding: 0;
width: 68rpx;
height: 48rpx;
margin: 0;
line-height: unset;
}
.share-box .op-box .right button::after {
border: none;
}
.share-box .share_b{
padding: 0;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
display: block;
}
</style>
<template>
<view class="coursesubmit">
<view class="paymentype">
<view class="paymentypeitem" >
<text>支付方式</text>
<text>在线支付</text>
</view>
<view class="paymentypeitem" style="margin-top: 20px;">
<view class="left" style="display: flex;flex-direction: row;align-items: center;">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/lvqian.png" style="width: 15px;height: 15px;margin-right: 3px;"></image>
找人代付
</view>
<u-checkbox-group >
<u-checkbox
@change="checkboxChange"
shape="circle"
:active-color='pricecolor'
v-model="checked"
></u-checkbox>
</u-checkbox-group>
</view>
</view>
<view class="store-list" v-if="mchs[0].goods_list.length>0">
<view class="good" v-for="(cx, ci) in mchs[0].goods_list" :key="ci" >
<view class="good-img">
<image mode="aspectFill" :src="cx.cover_pic" style="width: 100%; height: 100%;border-radius: 4px;" ></image>
</view>
<view class="good-r" :style="{'width': (windowWidth -15 - 125 -26)+'px'}">
<view class="good-name">
<view
v-if="cx.marketingLogo.iswords && cx.marketingLogo.iswords==1&& cx.marketingLogo.words!=''"
class="Logo"
:style="{color: cx.marketingLogo.wordsColor,
background:cx.marketingLogo.wordsBack ,}"
>{{cx.marketingLogo.words}}</view>
<image
v-if="cx.marketingLogo.iswords&&cx.marketingLogo.iswords==2&& cx.marketingLogo.ico!=''"
mode="heightFix"
:src="cx.marketingLogo.ico"
style=" height: 12px;margin-right: 5px"
/>
{{ cx.name }}
</view>
<view class="good-r-b">
<view class="good-rb-box">
<text style="font-size: 11px;color: #999999;">永久可看</text>
</view>
<view class="good-rb-box" style="color: #111111;">
<text style="font-size:11px ;"></text>
<text style="font-size:15px ;">{{cx.goods_attr.price}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="discountbox">
<view class="filed">
<view class="left">优惠券</view>
<view class="right">
<text class="content" v-if="mchs[0].coupon.user_coupon_id == 0 && couponList.length>0" @click="showCouponHandler">选择优惠券</text>
<text class="content" v-else-if="couponList.length==0">暂无优惠券</text>
<text class="content" v-else :style="{ color: pricecolor }" @click="showCouponHandler">已优惠{{ mchs[0].coupon.coupon_discount }}</text>
<u-icon name="ellipsis" size="36" v-if="couponList.length > 0" @click="showCouponHandler"></u-icon>
</view>
</view>
<view class="filed" style="margin-top: 20px;" v-if="integral.can_use">
<view class="left">积分抵扣</view>
<view class="right">
<text class="content" :style="{ color: secondary }">{{ `使用${integral.use_num}积分抵扣${integral.deduction_price}元` }}</text>
<u-checkbox-group><u-checkbox v-model="userInt" :active-color="pricecolor" @change="changeUseInt" :icon-size="28" shape="circle"></u-checkbox></u-checkbox-group>
</view>
</view>
<view class="filed" style="margin-top: 20px;">
<view class="left">学习卡</view>
<view class="right">
<text class="content" v-if="mchs[0].coupon.user_coupon_id == 0 && couponList.length>0" @click="showCouponHandler">选择学习卡
</text>
<text class="content" v-else-if="couponList.length==0">暂无学习卡</text>
<text class="content" v-else :style="{ color: pricecolor }" @click="showCouponHandler">已优惠{{ mchs[0].coupon.coupon_discount }}</text>
<u-icon name="ellipsis" size="36" v-if="couponList.length > 0" @click="showCouponHandler"></u-icon>
</view>
</view>
</view>
<view class="discountbox">
</view>
</view>
</template>
<script>
export default {
data() {
return{
DetailList:[],
pageTitle: '填写订单',
formdata:{
DetailList:[],
Use_Integral:0,
User_Coupon_Id:0,
Use_Education_Id:0,
},
mc:'',
secondary:'',
pricecolor:'',
isLeave: false,
integral: {
can_use: false,
use: false,
use_num: 0,
deduction_price: 0
},
userInt:false,
mchs:{},
ds:{},
checked:false,
couponList:[],//优惠券的列表
schoolCPList:[],//学习卡列表
windowWidth:0,
}
},
onLoad(option) {
if (option.DetailList) {
this.formdata.DetailList = JSON.parse(decodeURIComponent(option.DetailList));
}
this.mc = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
this.pricecolor = this.$uiConfig.pricecolor;
this.windowWidth = this.$utils.SystemInfo().windowWidth;
uni.setNavigationBarTitle({
title: this.pageTitle
});
},
onShow() {
this.init();
if (this.isLeave) {
uni.navigateBack({
delta: 1
});
}
},
methods:{
init(){
this.request2(
{
url: '/api/AppletOrder/GetAppletCourseSettlementInfo',
data: this.formdata
},
res => {
this.loading = false;
if (res.resultCode == 1) {
this.mchs = res.data.mch_list;
this.ds = res.data;
this.integral = {
can_use: false,
use: false,
use_num: 0,
deduction_price: 0
};
this.formatPrice()
this.initCoupon();//获取优惠券
this.schoolCoupon();//获取学习卡
}
}
);
},
formatPrice(){
this.mchs.forEach(x => {
if (x.integral.can_use) {
this.integral.can_use = true;
this.integral.use = false;
this.integral.use_num += x.integral.use_num;
this.integral.deduction_price += parseFloat(x.integral.deduction_price);
}
});
},
initCoupon() {
let ProductList = [];
this.DetailList = [];
this.mchs.forEach(item => {
item.goods_list.forEach(list => {
let obj = {
GoodsClassId: list.categoryIdList,
GoodsPrice: list.total_price,
ProductId: list.id
};
// let obj1 = {
// SpecificationSort: list.goods_attr.sign_id,
// Number: list.num,
// GoodsId: list.id,
// SpecificationList: list.specificationNameList
// };
ProductList.push(obj);
// this.DetailList.push(obj1);
});
});
this.request2(
{
url: '/api/AppletCoupon/GetNoUseCouponList',
data: { ProductList: ProductList }
},
res => {
if (res.resultCode == 1) {
this.couponList = res.data;
}
}
);
},
schoolCoupon(){
let ProductList = [];
this.mchs.forEach(item => {
item.goods_list.forEach(list => {
let obj = {
GoodsClassId: list.categoryIdList,
GoodsPrice: list.total_price,
ProductId: list.id
};
ProductList.push(obj);
});
});
this.request2(
{
url: '/api/AppletEducation/GetNoUseCouponList',
data: { ProductList: ProductList }
},
res => {
if (res.resultCode == 1) {
this.schoolCPList = res.data;
}
}
);
},
changeUseInt(e) {
this.userInt = e.value;
this.formdata.Use_Integral = this.userInt ? 1 : 0;
this.init();
},
checkboxChange(val){
// if(val.value==true){
// this.btntext = '找人代付'
// }else{
// this.btntext = '提交订单'
// }
},
}
}
</script>
<style>
.coursesubmit{
width: 100%;
min-height: 100vh;
background: #FAF8F9;
padding-bottom: 40px;
font-family: 'oswald';
padding-top:15px ;
}
.coursesubmit .paymentype{
width: 100%;
padding: 15px;
background: #FFF;
}
.coursesubmit .paymentypeitem{
width: 100%;display: flex;flex-direction: row;align-items: center;justify-content:space-between;font-size: 14px;color: #121212;
}
.coursesubmit .discountbox{
width: 100%;
background: #FFF;
padding: 15px;
margin-top: 15px;
}
.coursesubmit .filed {
display: flex;
align-items: flex-start;
padding: 0 10px;
}
.coursesubmit .filed .left,
.coursesubmit .filed .right {
flex: 1;
color: #232323;
}
.coursesubmit .filed .left {
width: 120px;
}
.coursesubmit .filed .right {
text-align: right;
display: flex;
}
.coursesubmit .filed .right .icon {
width: 18px;
height: 18px;
}
.coursesubmit .filed .right .content {
flex: 1;
text-align: right;
margin-right: 5px;
}
.coursesubmit .filed .right .price {
font-size: 16px;
flex: 1;
text-align: right;
font-family: 'oswald';
}
.coursesubmit .store-list{
width: 100%;
background: #FFF;
padding:0 15px;
margin-top: 15px;
}
.coursesubmit .good{
background: #fff;
padding: 10px 13px;
display: flex;
flex-direction: row;
font-family: aa;
}
.coursesubmit .good-img{
width: 125px;
height: 70px;
border-radius: 4px;
box-shadow:0 4px 10px 1px #D2D2D2;
}
.coursesubmit .good-r{
margin-left: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3px;
}
.coursesubmit .good .good-name {
/* height: 37px; */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 3px;
font-size: 14px;
color: #1B1D1E;
}
.coursesubmit .good-r-b{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.coursesubmit .good-rb-box{
display: flex;
flex-direction: row;
align-items: center;
}
.coursesubmit .good-rb-text{
font-size: 11px;
color: #999999;
margin-top: 3px;
margin-left: 2px;
}
</style>
<template>
<view class="courseContent">
<view class="course-top">
<!-- <video id="myVideo" :src="selectcourse.FilePath"
@error="videoErrorCallback" controls></video> -->
<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"
@error="videoErrorCallback" controls duration='70'></video>
</view>
<view class="course-t">
<view class="course-t-item">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/fengx.png" class="share-icon" />
<text>分享</text>
</view>
<view class="course-t-item" @click="setFavorite">
<u-icon :name="favorite ? 'like' : 'like-o'" size="44" :color="favorite ? mc : '#333'"></u-icon>
<!-- <u-icon name="like-o" size="44" style='margin-bottom: 12rpx;'></u-icon> -->
<text>收藏</text>
</view>
<view class="course-t-item">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/huanc.png" class="share-icon" />
<text>缓存</text>
</view>
</view>
<view style="width: 100%;height: 15px;background: #FAF8F9;"></view>
<view class="title">
<view style=" overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: #1C1E1F;
font-size: 16px;">{{name}}</view>
<span style='font-size: 12px;color: #888888;'>{{courseList.length}}课时</span>
</view>
<view style="width: 100%;height: 1px;background: #E2E2E2;"></view>
<view v-if="courseList.length > 0" style="
height: calc(100vh - 405px);
width: 100%;
overflow: hidden;
">
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true"
style="height: 100%;">
<view class="scrollitem" v-for="(cl, ci) in courseList" :key="ci" @click="gocourse(cl,ci)">
<view class="catalog-box-l" :style="{color:index==ci?'#00D6A6':'#121212'}">
<view class="cb-l-bt" :style="{border:index==ci?'0.5px solid #00D6A6':'0.5px solid #121212'}">{{cl.TypeName}}</view>
{{cl.SortName}}{{cl.Name}}
</view>
</view>
</scroll-view>
</view>
<view class="goback" @click="goback" :style="{'padding-top':paddingHTop}">
<u-icon name="arrow-left" size="48" color="#fff"></u-icon>
</view>
</view>
</template>
<script>
export default {
data(){
return{
mc:'',
pricecolor:'',
secondary:'',
paddingHTop:0,
id:0,
courseList:[],
index:0,
name:'',
selectcourse:{},
favorite:false,//是否收藏
}
},
onLoad(options) {
console.log(options,'options')
if(options && options.id){
this.id = options.id
this.index = options.index;
this.name = options.name
this.getGoodsCourseList()//获取课程目录
this.getAppletCourseCollect()//获取课程是否收藏
}
// 多反了个字段 IsRead 是否已学习, 1是 2否
},
created() {
this.mc = this.$uiConfig.mainColor;
this.pricecolor = this.$uiConfig.pricecolor;
this.secondary = this.$uiConfig.secondary;
this.nav = uni.getMenuButtonBoundingClientRect().top;
this.paddingHTop = this.nav +'px';
},
methods:{
goback(){
uni.navigateBack({})
},
getGoodsCourseList(){
this.request2({
url: '/api/AppletSchool/GetAppletGoodsCourseList',
data: {GoodsId: this.id, pageIndex :1,pageSize:10000}
},
res => {
this.courseList = res.data.pageData;
this.selectcourse=this.courseList[this.index]
}
);
},
getAppletCourseCollect(){
this.request2({
url: '/api/AppletSchool/GetAppletCourseCollect',
data: {GoodsId: this.id,}
},
res => {
this.favorite =res.data.Favorite
}
);
},
setFavorite(){//设置喜欢
this.request2(
{
url: '/api/AppletUser/SetUserCollectionInfo',
data: {
GoodsId: this.id
}
},
res => {
this.favorite = !this.favorite;
}
);
},
videoErrorCallback: function(e) {
uni.showModal({
content: e.target.errMsg,
showCancel: false
})
},
gocourse(item,index){
this.index = index;
this.selectcourse=item
},
}
}
</script>
<style>
.courseContent .course-top{
width: 100%;
height: 230px;
}
.courseContent .goback{
margin-left: 15px;
position: fixed;
top: 0;
left: 0;
}
#myVideo{
width: 100%;
height: 100%;
}
.courseContent .course-t{
display: flex;
flex-direction: row;
align-items: center;
height: 80px;
}
.courseContent .course-t-item{
width: 33.3%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.courseContent .share-icon {
width: 22px;
height: 22px;
margin-bottom: 12rpx;
}
.courseContent .title{
width: 100%;
height: 79px;
padding: 18px 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.courseContent .scrollitem{
width: 100%;
padding: 15px;
display: flex;flex-direction: row;
align-items: center;
}
.courseContent .catalog-box-l{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.courseContent .cb-l-bt{
font-size: 9px;
border-radius: 2px;
border: 1px solid #9A9A9A;
padding: 1px;
margin-right: 5px;
}
</style>
This diff is collapsed.
<template>
<view class="courseList">
<view class="sortbox">
<view class="item" @click="change(0,0)" :style="{ color: msg.OrderBy == 0 || msg.OrderBy==7 ? mainColor : '#222' }"
style="display: flex; justify-content: center;">
<text>综合</text>
<u-icon v-if="msg.OrderBy==0||msg.OrderBy==7" :name="msg.OrderBy == 7 ? 'descending' : 'ascending'" size="36" :color="msg.OrderBy == 0 || msg.OrderBy == 7 ? mainColor : '#222'"></u-icon>
</view>
<view class="item" @click="change(1,1)" :style="{ color: msg.OrderBy == 1 || msg.OrderBy == 5 ? mainColor : '#222' }"
style="display: flex; justify-content: center;">
<text>时间</text>
<u-icon v-if="msg.OrderBy==1||msg.OrderBy==5" :name="msg.OrderBy == 1 ? 'descending' : 'ascending'" size="36" :color="msg.OrderBy == 1 || msg.OrderBy == 5 ? mainColor : '#222'"></u-icon>
</view>
<view class="item" :style="{ color: msg.OrderBy == 2 || msg.OrderBy==3 ? mainColor : '#222' }" style="display: flex; justify-content: center;"
@click="change(2,2)">
<text>价格</text>
<u-icon v-if="msg.OrderBy==2||msg.OrderBy==3" :name="msg.OrderBy == 3 ? 'descending' : 'ascending'" size="36" :color="msg.OrderBy == 2 || msg.OrderBy==3 ? mainColor : '#222'"></u-icon>
</view>
<view class="item" @click="change(4,3)" :style="{ color: msg.OrderBy == 4 || msg.OrderBy == 6 ? mainColor : '#222' }"
style="display: flex; justify-content: center;">
<text>销量</text>
<u-icon v-if="msg.OrderBy==4||msg.OrderBy==6" :name="msg.OrderBy == 4 ? 'descending' : 'ascending'" size="36" :color="msg.OrderBy == 4 || msg.OrderBy == 6 ? mainColor : '#222'"></u-icon>
</view>
</view>
<view v-if="g.length > 0" style="
height: calc(100vh - 50px);
width: 100%;
overflow: hidden;
">
<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" :scroll-top="scrollTop"
@scroll="scroll" style="height: 100%; padding-bottom: 0px;">
<goodlist :list="g"></goodlist>
<u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
:margin-bottom="20" bg-color="#F5F5F5" />
</scroll-view>
</view>
<view v-if="!loading && g.length== 0 " style="
height: calc(100vh - 50px);
width: calc(100vw - 20px);
padding-top: 10px;
">
<u-empty text="没有找到商品信息" font-size="36" mode="list" ></u-empty>
</view>
<!-- <view class="quick" v-if="!loading">
<view class="item">
<u-icon name="cart-o" size="48" color="#333" />
</view>
<view class="item" @click="goTop">
<u-icon name="arrow-up" size="48" color="#333" />
</view>
</view> -->
</view>
</template>
<script>
import goodlist from '@/components/school/list.vue'
export default {
data() {
return {
status: "loadmore",
sortStatus: 1,
mainColor: "",
isover: false,
loading: true,
page: 1,
page_count: 1,
g: [],
sort: 1,
sortType: -1,
catId: 0,
loadText: {
loadmore: "轻轻上拉,加载更多",
loading: "努力加载中",
nomore: "没有更多商品了",
},
showLoading: false,
sortShowType: 1,
scrollTop: 0,
old: {
scrollTop: 0,
},
coupon_id: 0,
msg: {
pageIndex: 1,
pageSize: 14,
Name: '',
GoodsType: 0,
CategoryIds: '',
OrderBy: 0,
GoodsPageType:0
},
newsortType: 1,
};
},
components: {
goodlist
},
onLoad(option) {
this.mainColor = this.$uiConfig.mainColor;
this.catId = option.cat_id;
if (option && option.coupon_id && option.UseType) {//优惠券带过来的参数
console.log(option.coupon_id)
if(option.UseType==1){
this.msg.CategoryIds = option.coupon_id
}else if(option.UseType==2){
this.msg.GoodsIds = option.coupon_id
}
}
if (option.CategoryIds) {
this.msg.CategoryIds = option.CategoryIds;
}
},
mounted() {
this.init();
},
methods: {
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop;
},
goTop: function(e) {
this.scrollTop = this.old.scrollTop;
this.$nextTick(function() {
this.scrollTop = 0;
});
},
change(sort, t) {
//综合
if (t == 0) {
if (this.msg.OrderBy == 7) {
this.msg.OrderBy = 0; //升序
} else {
this.msg.OrderBy = 7; //降序
}
}
//时间
if (t == 1) {
if (this.msg.OrderBy == 1) {
this.msg.OrderBy = 5; //升序
} else {
this.msg.OrderBy = 1; //降序
}
}
//价格
if (t == 2) {
if (this.msg.OrderBy == 3) {
this.msg.OrderBy = 2; //升序
} else {
this.msg.OrderBy = 3; //降序
}
}
//销量
if (t == 3) {
if (this.msg.OrderBy == 4) {
this.msg.OrderBy = 6; //升序
} else {
this.msg.OrderBy = 4; //降序
}
}
this.g = [];
this.msg.pageIndex = 1
this.init();
},
init() {
this.isover = false;
this.loading = true;
this.showLoading = this.msg.pageIndex != 1;
this.msg.GoodsPageType = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserPageType:0;
this.request2({
url: '/api/AppletSchool/GetAppletCoursePageList',
data: this.msg
},
res => {
this.loading = false;
this.isloading = false;
if (res.resultCode == 1) {
res.data.pageData.forEach(x => {
x.marketingLogo = JSON.parse(x.marketingLogo)
})
this.g = this.g.concat(res.data.pageData);
this.page_count = res.data.pageCount;
if (this.page_count == 1) {
this.isover = true;
this.status = "nomore";
} else {
this.status = "loadmore";
}
}
uni.hideNavigationBarLoading();
}
);
},
lower(e) {
if (this.msg.pageIndex < this.page_count) {
this.status = "loading";
this.msg.pageIndex++;
this.init();
} else {
this.isover = true;
this.status = "nomore";
}
},
clickHandler(u) {
console.log(u)
uni.navigateTo({
url: u,
});
},
},
};
</script>
<style>
.courseList {
height: 100%;
background: #f5f5f5;
position: relative;
}
.courseList .quick {
right: 50rpx;
bottom: 50rpx;
position: absolute;
}
.courseList .quick .item {
background: #fff;
border: 1px solid #aaa;
height: 90rpx;
width: 90rpx;
color: #333;
border-radius: 90rpx;
margin-top: 40rpx;
display: flex;
align-items: center;
justify-content: center;
}
.courseList .sortbox {
display: flex;
background: #fff;
}
.courseList .sortbox .item {
height: 40px;
line-height: 40px;
flex: 1;
text-align: center;
}
</style>
<template>
<scroll-view
:scroll-y="true"
@scroll="scrollHandler"
@scrolltoupper="scrollTopHandler"
style="height: 100vh;">
<view class="teacherDetails">
<view
class="headStatus"
v-if="scrollTop > 50 "
:style="[
headStyle,
{
zIndex: scrollTop < 10 ? 'unset' : 2,
opacity: scrollTop < 10 ? '100' : scrollTop,
background:'#FFF'
},
]"
>
<view class="arrow" @click="goback">
<u-icon name="arrow-left" size="48" color="#000"></u-icon>
</view>
<view class="title" style="color: #000000;" v-if="scrollTop > 50">{{pageTitle}}</view>
<view class="arrow"></view>
</view>
<view class="course-top">
<view class="teacherbox">
<u-avatar :src="teacher.teacherResult.TeacherLogo" size="140"></u-avatar>
<view class="teacherbox-r">
<text style="font-size: 16px;color: #121212;">{{teacher.teacherResult.Name}}</text>
<text style="font-size: 12px;color: #9A9A9A;margin: 10px 0;">{{teacher.teacherResult.Major}}</text>
<view class="teacherbox-b">
<view class="teacher-b-item" :style="{background:mc}" v-for="(x, i) in teacher.teacherResult.LableNameList" :key="ci">
{{x}}
</view>
</view>
</view>
</view>
</view>
<view class="course-ti">
<view class="course-ti-c">
<view class="course-ti-cont">
<text>{{teacher.teacherResult.WorkYears}}</text>
<text class="huixin">教龄</text>
</view>
<view class="course-ti-cont">
<text>{{teacher.teacherResult.FollowteacherNum}}</text>
<text class="huixin">粉丝</text>
</view>
<view class="course-ti-cont2" :style="{background:mc}" @click="setFollowTeacher()">
<u-icon name="plus" size='30' color="#FFF" v-if="teacher.teacherResult.Followteacher==0"></u-icon>
<text style="margin-left: 5px;" v-if="teacher.teacherResult.Followteacher==0">关注</text>
<text style="margin-left: 5px;" v-if="teacher.teacherResult.Followteacher>0">已关注</text>
</view>
</view>
</view>
<view class="kecheng">
<view class="tiaoti">
<view class="tiaoti-l"></view>
<text style="font-size: 16px;color: #1B1D1E;margin-left: 5px;">课程简介</text>
</view>
<view style="padding: 10px;">
<h-parse :content="teacher.teacherResult.Introduction" @navigate="clickDescription"></h-parse>
</view>
<view class="tiaoti">
<view class="tiaoti-l"></view>
<text style="font-size: 16px;color: #1B1D1E;margin-left: 5px;">课程目录</text>
</view>
<view class="good" v-for="(cx, ci) in teacher.goodsResult" :key="ci" @click="clickHandler(cx)">
<view class="good-img">
<image mode="aspectFill" :src="cx.CoverImage" style="width: 100%; height: 100%;border-radius: 4px;" ></image>
</view>
<view class="good-r" :style="{'width': (windowWidth -15 - 125 -26)+'px'}">
<view class="good-name">
{{ cx.Name }}
</view>
<view class="good-r-b">
<text>本教程共分{{cx.CourseNum}}个章节</text>
</view>
</view>
</view>
</view>
<view class="goback" @click="goback" :style="{'padding-top':paddingHTop}">
<u-icon name="arrow-left" size="48" color="#121212"></u-icon>
</view>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gob'></auth>
</view>
</scroll-view>
</template>
<script>
import hParse from "@/components/u-parse/parse.vue";
import auth from "../../components/auth/index.vue";
export default {
data(){
return{
mc:'',
pricecolor:'',
secondary:'',
paddingHTop:0,
id:0,
teacher:{},
windowWidth:0,
scrollTop:0,
headStyle:{},
pageTitle:'教师详情',
UserId:0,
u:{},
showAuth:false,
}
},
components: {
hParse,
auth
},
onLoad(options) {
console.log(options,'options')
if(options && options.ID){
this.id = options.ID
if(uni.getStorageSync("mall_UserInfo")){
this.UserId = uni.getStorageSync("mall_UserInfo").UserId ? uni.getStorageSync("mall_UserInfo").UserId:0
}
this.getTeacher()//根据老师id获取老师详情
}
},
created() {
this.mc = this.$uiConfig.mainColor;
this.pricecolor = this.$uiConfig.pricecolor;
this.secondary = this.$uiConfig.secondary;
this.nav = uni.getMenuButtonBoundingClientRect().top;
this.paddingHTop = this.nav +'px';
this.windowWidth = this.$utils.SystemInfo().windowWidth;
this.headStyle.paddingTop = this.nav +'px';
},
methods:{
clickDescription(e) {
console.log(e);
},
goback(){
uni.navigateBack({})
},
getTeacher(){
this.request2({
url: '/api/AppletSchool/GetTeacherModel',
data: {ID: this.id,UserId:this.UserId }
},
res => {
this.teacher= res.data;
this.pageTitle = res.data.teacherResult.Name
}
);
},
clickHandler(item) {
uni.navigateTo({ url: "/pages/school/courseInfo?GoodsId=" + item.Id });
},
scrollHandler(e) {
this.scrollTop = e.detail.scrollTop;
//this.$forceUpdate();
},
scrollTopHandler() {
this.scrollTop = 0;
},
setFollowTeacher(){//关注和取消老师
this.u = uni.getStorageSync("mall_UserInfo");
if (!this.u) {
this.u = {
nickName: "未登录",
avatarUrl: ""
};
this.showAuth = true;
}else{
this.followTeacher()
}
},
followTeacher(){
this.request2({
url: '/api/AppletEducation/FollowTeacher',
data: {
ID: this.teacher.teacherResult.Followteacher,
TeacherId:this.id,
}
},
res => {
this.request2({
url: '/api/AppletSchool/GetTeacherModel',
data: {ID: this.id,UserId:this.UserId }
},
res2 => {
this.teacher.teacherResult.Followteacher = res2.data.teacherResult.Followteacher
this.teacher.teacherResult.FollowteacherNum = res2.data.teacherResult.FollowteacherNum
}
);
uni.showToast({
title: res.message,
icon: 'none',
duration: 2000
});
}
);
},
reloadUserinfo() {
this.u = uni.getStorageSync("mall_UserInfo");
this.followTeacher()
},
gob(){
this.showAuth = false;
},
}
}
</script>
<style>
.teacherDetails .headStatus {
overflow: hidden;
position: relative;
width: 140vw;
padding-right: 40vw;
padding-bottom: 10px;
position: fixed;
left: 0;
right: 0;
top: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.teacherDetails .course-top{
width: 100%;
height: 250px;
background: #A8D2C9;
}
.teacherDetails .goback{
margin-left: 8px;
position: fixed;
top: 0;
left: 0;
}
.teacherDetails .teacherbox{
width: calc(100vw - 35px);
display: flex;
flex-direction: row;
align-items: flex-start;
padding-top: 80px;
margin-left: 25px;
}
.teacherDetails .teacherbox-r{
margin-left: 15px;
width: calc(100vw - 120px);
display: flex;
flex-direction: column;
}
.teacherDetails .teacherbox-b{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.teacherDetails .teacher-b-item{
padding: 2px 4px;
border-radius: 2px;
font-size: 10px;
color: #FAF8F9;
margin-right: 5px;
margin-bottom: 5px;
}
.teacherDetails .course-ti{
width: 100%;
height: 100px;
background: #F5F6F7;
margin-top: -20px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
.teacherDetails .course-ti-c{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding-top: 15px;
}
.course-ti-cont2{
width: 69px;
height: 26px;
display: flex;flex-direction: row;
align-items: center;
justify-content: center;
font-size: 13px;
color: #FFFFFF;
border-radius: 4px;
}
.teacherDetails .course-ti-cont{
display: flex;
flex-direction: column;
align-items: center;
font-size: 15px;
color: #121212;
}
.teacherDetails .huixin{
font-size: 12px;
color: #9A9A9A;
margin-top: 10px;
}
.teacherDetails .kecheng{
width: 100%;
margin-top: -20px;
background: #FFF;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
padding-top: 10px;
}
.teacherDetails .tiaoti{
width: 100%;
height: 35px;
display: flex;
flex-direction: row;
align-items: center;
}
.teacherDetails .tiaoti-l{
width: 3px;
height: 14px;
margin-left: 12px;
background-image: linear-gradient(
to bottom,
#00D6A6,
#B5FFEE
);
}
.teacherDetails .good{
background: #fff;
padding: 10px 13px;
display: flex;
flex-direction: row;
font-family: aa;
}
.teacherDetails .good-r-b{
font-size: 11px;
color: #9A9A9A;
}
.teacherDetails .good-img{
width: 125px;
height: 70px;
border-radius: 4px;
box-shadow:0 4px 10px 1px #D2D2D2;
}
.teacherDetails .good-r{
margin-left: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3px;
}
.teacherDetails .good .good-name {
/* height: 37px; */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 3px;
font-size: 14px;
color: #1B1D1E;
}
.teacherDetails .arrow {
height: 24px;
margin: 5px 10px;
width: 24px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment