|
|
@@ -2,88 +2,117 @@
|
|
|
<view>
|
|
|
<nav-bar title="题库详情"></nav-bar>
|
|
|
<view style="background-color: #FFFFFF;">
|
|
|
- <view>
|
|
|
- <image :src="$method.splitImgHost(goodsData.coverUrl, true)" style="width: 100%;"></image>
|
|
|
- <view style="padding:20rpx">
|
|
|
+ <!-- <view> -->
|
|
|
+ <image :src="$method.splitImgHost(goodsData.coverUrl, true)" style="width: 100%;height: 400rpx;"></image>
|
|
|
+ <!-- <view style="padding:20rpx">
|
|
|
<view style="display: flex;margin-top: 13rpx;">
|
|
|
<view class="yearTag" v-if="goodsData.year">{{ goodsData.year }}</view>
|
|
|
<view class="titleTag">{{ goodsData.goodsName }}</view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
<!-- <view style="display: flex;justify-content: space-between;margin-top: 13rpx;" v-if="false">
|
|
|
<view class="noteTag"><image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
|
|
|
共 <text class="blackFont">{{goodsData.updateTime}}</text> 张卷 <text class="blackFont">1200</text> 道题 </view>
|
|
|
|
|
|
</view> -->
|
|
|
+ <!-- </view> -->
|
|
|
+ <!-- </view> -->
|
|
|
+
|
|
|
+ <!-- <u-line color="#D6D6DB" /> -->
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contents">
|
|
|
+ <view class="cou_title">
|
|
|
+ <view class="title_name">
|
|
|
+ <view class="titleTag">{{ goodsData.goodsName }}</view>
|
|
|
</view>
|
|
|
+ <view style="display: flex;justify-content: space-between;margin-top: 13rpx;">
|
|
|
+ <view class="noteTag">
|
|
|
+ <!-- 共 <text class="blackFont">{{ goodsData.chapterNum }} 张卷 {{goodsData || '-'}}</text> 道题 -->
|
|
|
+ </view>
|
|
|
+ <view class="prices">
|
|
|
+ <text class="price_sym">¥</text>
|
|
|
+ <text class="price_word">{{ goodsData.standPrice }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view><u-line color="#D6D6DB" /></view>
|
|
|
</view>
|
|
|
- <u-line color="#D6D6DB" />
|
|
|
- <view>
|
|
|
+
|
|
|
+ <!-- <view>
|
|
|
<view><u-tabs :list="list" item-width="50%" font-size="30" bar-width="24" :current="current" @change="change" active-color="#007AFF"></u-tabs></view>
|
|
|
+ </view> -->
|
|
|
+ <view class="tabs">
|
|
|
+ <view v-for="(item, index) in list" :key="index" class="tab_item"
|
|
|
+ :class="[{nactive: current == index}]" @click="change(index)">{{ item.name }}</view>
|
|
|
</view>
|
|
|
- <u-line color="#D6D6DB" />
|
|
|
- </view>
|
|
|
- <view class="intro" v-if="current == 0">
|
|
|
- <view v-if="goodsData.mobileDetailHtml" class="content" style="padding:10rpx;"><rich-text :nodes="goodsData.mobileDetailHtml"></rich-text></view>
|
|
|
- </view>
|
|
|
- <view class="title-list" v-if="current == 1">
|
|
|
- <view class="content">
|
|
|
- <view class="list" v-for="(item1, index1) in bankList" :key="index1">
|
|
|
- <template v-if="item1.type == 1">
|
|
|
- <view class="moduleItem" @click="clickModule(index1,item1.majorId)">
|
|
|
- <view class="courseName">{{ item1.name }}</view>
|
|
|
- <view>
|
|
|
- <image src="/static/icon/up.png" class="icon_up" v-if="!item1.showList"></image>
|
|
|
- <image src="/static/icon/down.png" class="icon_up" v-if="item1.showList"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
|
|
|
- <template v-if="item1.showList">
|
|
|
- <view v-for="(item2, index2) in item1.list" :key="index2">
|
|
|
- <view class="section" @click="changeItem(index1,index2,item2.chapterExamId,item1.type)">
|
|
|
- <image src="/static/icon/down1.png" class="icon_up" v-if="item2.showList"></image>
|
|
|
- <image src="/static/icon/up1.png" class="icon_up" v-if="!item2.showList"></image>
|
|
|
- <!-- <u-icon v-if="!item2.showList" name="arrow-up"></u-icon>
|
|
|
- <u-icon v-if="item2.showList" name="arrow-down"></u-icon> -->
|
|
|
- <text style="margin-left:34rpx;">{{ item2.name }}</text>
|
|
|
+ <view class="intro" v-if="current == 0">
|
|
|
+ <view v-if="goodsData.mobileDetailHtml" class="content" style="padding:10rpx;"><rich-text :nodes="goodsData.mobileDetailHtml"></rich-text></view>
|
|
|
+ </view>
|
|
|
+ <view class="title-list" v-if="current == 1">
|
|
|
+ <view class="content">
|
|
|
+ <view class="list" v-for="(item1, index1) in bankList" :key="index1">
|
|
|
+ <template v-if="item1.type == 1">
|
|
|
+ <view class="moduleItem" @click="clickModule(index1,item1.majorId)">
|
|
|
+ <view class="courseName">{{ item1.name }}</view>
|
|
|
+ <view>
|
|
|
+ <image src="/static/icon/up.png" class="icon_up" v-if="!item1.showList"></image>
|
|
|
+ <image src="/static/icon/down.png" class="icon_up" v-if="item1.showList"></image>
|
|
|
</view>
|
|
|
- <view class="article-list" v-if="item2.showList">
|
|
|
- <view class="article" :class="{ active: showTest(article.examId) }" v-for="(article, index3) in item2.list" :key="index3">
|
|
|
- <view class="flex_auto">{{ article.examName }}</view>
|
|
|
- <view class="btn" @click="goTest(item1.type,article)" v-if="showTest(article.examId)">试做</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <template v-if="item1.showList">
|
|
|
+ <view v-for="(item2, index2) in item1.list" :key="index2">
|
|
|
+ <view class="section" @click="changeItem(index1,index2,item2.chapterExamId,item1.type)">
|
|
|
+ <!-- <image src="/static/icon/down1.png" class="icon_up" v-if="item2.showList"></image>
|
|
|
+ <image src="/static/icon/up1.png" class="icon_up" v-if="!item2.showList"></image> -->
|
|
|
+ <u-icon v-if="!item2.showList" name="arrow-right" color="#999" size="24"></u-icon>
|
|
|
+ <u-icon v-if="item2.showList" name="arrow-down" color="#999" size="24"></u-icon>
|
|
|
+ <text class="item_name">{{ item2.name }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="article-list" v-if="item2.showList">
|
|
|
+ <view class="article" :class="{ active: showTest(article.examId) }" v-for="(article, index3) in item2.list" :key="index3">
|
|
|
+ <view class="flex_auto">{{ article.examName }}</view>
|
|
|
+ <view class="btn" @click="goTest(item1.type,article)" v-if="showTest(article.examId)">试做</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ <u-line></u-line>
|
|
|
</view>
|
|
|
- <u-line></u-line>
|
|
|
- </view>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
- </template>
|
|
|
|
|
|
- <template v-if="item1.type == 2">
|
|
|
- <view class="section" @click="changeItem(index1,'',item1.majorId,item1.type)" >
|
|
|
- <image src="/static/icon/down1.png" class="icon_up" v-if="item1.showList"></image>
|
|
|
- <image src="/static/icon/up1.png" class="icon_up" v-if="!item1.showList"></image>
|
|
|
- <!-- <u-icon v-if="!item1.showList" name="arrow-up"></u-icon>
|
|
|
- <u-icon v-if="item1.showList" name="arrow-down"></u-icon> -->
|
|
|
- <text style="margin-left:34rpx;">{{ item1.name }}</text>
|
|
|
- </view>
|
|
|
- <view class="article-list" v-if="item1.showList" >
|
|
|
- <view class="article" :class="{active:showTest(article.examId)}" :key="index2" v-for="(article,index2) in item1.list">
|
|
|
- <view class="flex_auto">{{article.examName}}</view>
|
|
|
- <view class="btn" @click="goTest(item1.type,article)" v-if="showTest(article.examId)">试做</view>
|
|
|
+ <template v-if="item1.type == 2">
|
|
|
+ <view class="section" @click="changeItem(index1,'',item1.majorId,item1.type)" >
|
|
|
+ <!-- <image src="/static/icon/down1.png" class="icon_up" v-if="item1.showList"></image>
|
|
|
+ <image src="/static/icon/up1.png" class="icon_up" v-if="!item1.showList"></image> -->
|
|
|
+ <u-icon v-if="!item1.showList" name="arrow-right" color="#999" size="24"></u-icon>
|
|
|
+ <u-icon v-if="item1.showList" name="arrow-down" color="#999" size="24"></u-icon>
|
|
|
+ <text class="item_name">{{ item1.name }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="article-list" v-if="item1.showList" >
|
|
|
+ <view class="article" :class="{active:showTest(article.examId)}" :key="index2" v-for="(article,index2) in item1.list">
|
|
|
+ <view class="flex_auto">{{article.examName}}</view>
|
|
|
+ <view class="btn" @click="goTest(item1.type,article)" v-if="showTest(article.examId)">试做</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
+ </template>
|
|
|
|
|
|
- <template v-if="item1.type == 3">
|
|
|
- <view class="article" :class="{ active: showTest(item1.majorId) }">
|
|
|
- <view class="flex_auto">{{ item1.name }}</view>
|
|
|
- <view class="btn" @click="goTest(item1.type,item1)" v-if="showTest(item1.majorId)">试做</view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
+ <template v-if="item1.type == 3">
|
|
|
+ <view class="article" :class="{ active: showTest(item1.majorId) }">
|
|
|
+ <view class="flex_auto">{{ item1.name }}</view>
|
|
|
+ <view class="btn" @click="goTest(item1.type,item1)" v-if="showTest(item1.majorId)">试做</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
<view class="bottomBox" v-if="!hideBuyState">
|
|
|
- <view class="priceTag">¥ {{ toFixed(goodsData.standPrice) }}</view>
|
|
|
+ <!-- <view class="priceTag">¥ {{ toFixed(goodsData.standPrice) }}</view> -->
|
|
|
+ <view class="icons">
|
|
|
+ <image src="/static/index/share.png" class="share"></image>
|
|
|
+ <image src="/static/index/shopcar.png" class="shopcar"></image>
|
|
|
+ </view>
|
|
|
<view style="display: flex;color: #FFFFFF;align-items: center;">
|
|
|
<view class="btn1" @click="addCart">加购物车</view>
|
|
|
<view class="btn2" @click="buy">立即购买</view>
|
|
|
@@ -137,6 +166,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
getDetail() {
|
|
|
+ // '/app/common/goods/'+ data 获取商品详细信息
|
|
|
this.$api.commonGoodsDetail(this.id).then(res => {
|
|
|
if (res.data.data.mobileDetailHtml) {
|
|
|
res.data.data.mobileDetailHtml = res.data.data.mobileDetailHtml.replace(/<img/gi, '<img style="max-width:100%;"');
|
|
|
@@ -294,10 +324,71 @@ export default {
|
|
|
</script>
|
|
|
<style>
|
|
|
page {
|
|
|
- background-color: #eaeef1;
|
|
|
+ background-color: #ffffff;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scope>
|
|
|
+.contents {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
|
+ position: relative;
|
|
|
+ top: -27rpx;
|
|
|
+ left: 0;
|
|
|
+ .cou_title {
|
|
|
+ height: 210rpx;
|
|
|
+ padding: 27rpx 56rpx 0rpx 56rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ .prices {
|
|
|
+ .price_sym {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #333333;
|
|
|
+ position: relative;
|
|
|
+ top: -23rpx;
|
|
|
+ left: 0;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ .price_word {
|
|
|
+ font-size: 42rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FC3F3F;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // tab
|
|
|
+ .tabs {
|
|
|
+ // width: 100%;
|
|
|
+ height: 78rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #F2F7FF;
|
|
|
+ border-radius: 38rpx;
|
|
|
+ margin: 24rpx;
|
|
|
+ padding: 0rpx 5rpx;
|
|
|
+ .tab_item {
|
|
|
+ width: 345rpx;
|
|
|
+ height: 65rpx;
|
|
|
+ line-height: 65rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #333;
|
|
|
+ &.nactive {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #3577E8;
|
|
|
+ }
|
|
|
+ // &.twoBtn {
|
|
|
+ // width: 50%;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.courseName {
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
@@ -308,7 +399,7 @@ page {
|
|
|
height: 32rpx;
|
|
|
}
|
|
|
.intro {
|
|
|
- background: #eaeef1;
|
|
|
+ background: #fff;
|
|
|
padding: 16rpx 16rpx 124rpx;
|
|
|
|
|
|
.content {
|
|
|
@@ -337,7 +428,7 @@ page {
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
.title-list {
|
|
|
- background: #eaeef1;
|
|
|
+ background: #fff;
|
|
|
padding: 16rpx 16rpx 124rpx;
|
|
|
.content {
|
|
|
.list {
|
|
|
@@ -362,23 +453,31 @@ page {
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
- margin: 20rpx 0;
|
|
|
+ padding: 20rpx 0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
}
|
|
|
-
|
|
|
- .article-list {
|
|
|
- margin-top:20rpx;
|
|
|
-
|
|
|
-
|
|
|
+ .item_name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin-left: 8rpx;
|
|
|
}
|
|
|
+ // .article-list {
|
|
|
+ // margin-top:20rpx;
|
|
|
+ // }
|
|
|
|
|
|
.article {
|
|
|
padding:10rpx 0;
|
|
|
min-height: 80rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- margin-left: 64rpx;
|
|
|
+ margin-left: 35rpx;
|
|
|
font-size: 30rpx;
|
|
|
color: #666666;
|
|
|
border-bottom: 1rpx solid #eeeeee;
|
|
|
@@ -386,6 +485,8 @@ page {
|
|
|
|
|
|
.flex_auto {
|
|
|
flex: 1;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #666666;
|
|
|
}
|
|
|
|
|
|
&:nth-last-of-type(1) {
|
|
|
@@ -396,16 +497,16 @@ page {
|
|
|
color: #007aff;
|
|
|
|
|
|
.btn {
|
|
|
- width: 96rpx;
|
|
|
+ width: 103rpx;
|
|
|
height: 48rpx;
|
|
|
line-height: 48rpx;
|
|
|
text-align: center;
|
|
|
- color: #fff;
|
|
|
- font-size: 30rpx;
|
|
|
+ color: #3577E8;
|
|
|
+ font-size: 24rpx;
|
|
|
border-radius: 24rpx;
|
|
|
- background: #007aff;
|
|
|
+ background: #fff;
|
|
|
margin-left: 36rpx;
|
|
|
- border-radius: 24rpx;
|
|
|
+ border: 1rpx solid #3577E8;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -415,22 +516,23 @@ page {
|
|
|
}
|
|
|
}
|
|
|
.btn2 {
|
|
|
- width: 200rpx;
|
|
|
- height: 64rpx;
|
|
|
- background: linear-gradient(0deg, #ffb102, #fd644f);
|
|
|
- box-shadow: 0rpx 10rpx 16rpx 4rpx rgba(1, 99, 235, 0.04);
|
|
|
- border-radius: 32rpx;
|
|
|
- line-height: 64rpx;
|
|
|
+ width: 187rpx;
|
|
|
+ height: 79rpx;
|
|
|
+ line-height: 79rpx;
|
|
|
+ background: #FC3F3F;
|
|
|
+ border-radius: 40rpx;
|
|
|
text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
}
|
|
|
.btn1 {
|
|
|
- width: 200rpx;
|
|
|
- height: 64rpx;
|
|
|
- background: linear-gradient(0deg, #015eea, #00c0fa);
|
|
|
- border-radius: 32rpx;
|
|
|
- line-height: 64rpx;
|
|
|
+ width: 187rpx;
|
|
|
+ height: 79rpx;
|
|
|
+ line-height: 79rpx;
|
|
|
+ background: #FFB102;
|
|
|
+ border-radius: 40rpx;
|
|
|
text-align: center;
|
|
|
- margin-right: 20rpx;
|
|
|
+ margin-right: 11rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
}
|
|
|
.bottomBox {
|
|
|
position: fixed;
|
|
|
@@ -442,7 +544,18 @@ page {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- padding: 0 30rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ box-shadow: 0px -5px 20px 1px rgba(1,99,235,0.1000);
|
|
|
+ .share {
|
|
|
+ width: 38rpx;
|
|
|
+ height: 38rpx;
|
|
|
+ margin-left: 32rpx;
|
|
|
+ margin-right: 60rpx;
|
|
|
+ }
|
|
|
+ .shopcar {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
}
|
|
|
.blackFont {
|
|
|
color: #333333;
|
|
|
@@ -454,7 +567,7 @@ page {
|
|
|
margin-right: 12rpx;
|
|
|
}
|
|
|
.noteTag {
|
|
|
- ont-size: 24rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #999999;
|
xuqiaoying
