船员公众号
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

690 lines
17 KiB

<template>
<view class="question">
<view class="question-hd" :style="{'height': isToggle?'420rpx':'100%'}">
<view class="a">
<view class="l">{{categoryArray[categoryIndex]}}</view>
<picker @change="bindPickerChange" :value="categoryIndex" :range="categoryArray">
<view class="r">
切换分类<image :src="staticUrl('/static/icon-arrow.png')"></image>
</view>
</picker>
</view>
<template v-if="categoryList[categoryIndex] && categoryList[categoryIndex].children.length > 0">
<view class="c" v-for="(a,index) in categoryList[categoryIndex].children" :key="index">
<template v-if="a.children && a.children.length > 0">
<view class="name">{{a.name}}<text v-if="a.is_buy == 0" @click="openPage(3,categoryList[categoryIndex],2,index)">打包购买</text></view>
<view class="b" v-for="(b,idx) in a.children" :key="idx" @click="toSelect1(index,idx,b)">
<view class="l">
<image v-if="b.isSelect" :src="staticUrl('/static/icon-select-on.png')"></image>
<image v-else :src="staticUrl('/static/icon-select.png')"></image>{{b.name}}
</view>
<view class="r" :class="b.is_buy==1?'r-on':''" @click.stop="b.is_buy!=0?'':openPage(3,a,3,index,idx)">{{b.is_buy == 1?'已购买':'购买'}}</view>
</view>
</template>
<template v-else>
<view class="b" @click="toSelect(index,a)">
<view class="l">
<image v-if="a.isSelect" :src="staticUrl('/static/icon-select-on.png')"></image>
<image v-else :src="staticUrl('/static/icon-select.png')"></image>{{a.name}}
</view>
<view class="r" :class="a.is_buy==1?'r-on':''" @click.stop="a.is_buy!=0?'':openPage(3,categoryList[categoryIndex],2,index)">{{a.is_buy == 1?'已购买':'打包购买'}}</view>
</view>
</template>
</view>
</template>
</view>
<view class="question-anniu" @click="toggleItem()" v-if="isToggle">
展开<u-icon name="arrow-down"></u-icon>
</view>
<view class="question-anniu" @click="toggleItem()" v-else>
收起<u-icon name="arrow-up"></u-icon>
</view>
<view class="question-bd">
<!-- <view class="a">
<view class="t" @click="openPage(1)">
<image src="/static/icon-t-01.png"></image>刷实操
</view>
</view>
<view class="b">
<view class="t">
<image src="/static/icon-t-02.png"></image>实操考试
</view>
</view> -->
<view class="c">
<view class="t" @click="openPage(2,0)">
<image :src="staticUrl('/static/icon-t-03.png')"></image>章节
</view>
<view class="m" @click="openPage(2,1)">
<image class="l" :src="staticUrl('/static/icon-error.png')"></image>刷错题<image class="r" :src="staticUrl('/static/icon-arrow.png')"></image>
</view>
</view>
<view class="d">
<view class="t" @click="openPage(1,0)">
<image :src="staticUrl('/static/icon-t-04.png')"></image>真题
</view>
<view class="m" @click="openPage(1,1)">
<image class="l" :src="staticUrl('/static/icon-error.png')"></image>刷错题<image class="r" :src="staticUrl('/static/icon-arrow.png')"></image>
</view>
<view class="m" @click="openPage(1,3)">
<image class="l" :src="staticUrl('/static/icon-error.png')"></image>顺序题<image class="r" :src="staticUrl('/static/icon-arrow.png')"></image>
</view>
</view>
<view class="e">
<view class="t" @click="openPage(2,3)">
<image :src="staticUrl('/static/icon-t-05.png')"></image>免费
</view>
</view>
</view>
<view class="question-fd">
<view class="a">
<view class="t">上次分数</view>
<view class="m"><text>{{realforecastInfo.last_score}}</text>分</view>
</view>
<view class="a">
<view class="t">预测考分</view>
<view class="m"><text>{{realforecastInfo.forecast_score}}</text>分</view>
</view>
</view>
<!-- <view class="question-bd">
<view class="e">
<view class="t" @click="openPage(2,3)">
<image :src="staticUrl('/static/icon-t-05.png')"></image>免费题
</view>
</view>
<view class="f">
<view class="t" @click="openPage(1,2)">
<image :src="staticUrl('/static/icon-t-06.png')"></image>模拟考试
</view>
<view class="m" @click="openPage(1,4)">
<image class="l" :src="staticUrl('/static/icon-error.png')"></image>刷错题<image class="r" :src="staticUrl('/static/icon-arrow.png')"></image>
</view>
</view>
</view>-->
</view>
</template>
<script>
export default {
data() {
return {
isToggle: true,
categoryList: [],
categoryIndex: 0,
categoryArray: [],
info: {},
realforecastInfo: {
forecast_score: 0,
last_score: 0
}
};
},
onShow() {
this.getCategoryList();
},
methods: {
toggleItem() {
this.isToggle = !this.isToggle
},
toSelect(index,a){
// if(a.is_buy == 0){
// return ;
// }
this.categoryList[this.categoryIndex].children.map(a=>{
a.isSelect = false;
if(a.children){
a.children.map(b=>{
b.isSelect = false;
if(b.children){
b.children.map(c=>{
c.isSelect = false;
})
}
})
}
})
if(this.categoryList[this.categoryIndex].children){
this.categoryList[this.categoryIndex].children[index].isSelect = true
this.info = this.categoryList[this.categoryIndex].children[index]
this.getRealforecast();
}
},
toSelect1(index,idx, a){
this.categoryList[this.categoryIndex].children.map(a=>{
a.isSelect = false;
})
let arr = this.categoryList[this.categoryIndex].children
if(arr[index].children && arr[index].children.length > 0){
this.categoryList[this.categoryIndex].children.map(a=>{
a.isSelect = false;
if(a.children){
a.children.map(b=>{
b.isSelect = false;
})
}
})
this.categoryList[this.categoryIndex].children[index].children[idx].isSelect = true
this.info = this.categoryList[this.categoryIndex].children[index].children[idx]
this.isToggle = true
this.getRealforecast();
}
},
bindPickerChange(e) {
this.categoryIndex = e.detail.value
},
//真题分预测
async getRealforecast(){
let { code, data, msg } = await this.$api.Realforecast({category_id: this.info.id})
if (code == 200) {
this.realforecastInfo = data;
} else {
uni.showToast({
icon: "none",
title: msg
})
}
},
//分类
async getCategoryList(){
const that = this;
let { code, data, msg } = await this.$api.categoryTreeList({})
if (code == 200) {
let arr = [], arr1 = []
if(data && data.length > 0){
data.map(a=>{
arr.push(a.name);
a.isSelect = false;
if(that.info.id == a.id){
a.isSelect = true;
}
if(a.children && a.children.length > 0){
a.children.map(b=>{
b.isSelect = false;
if(that.info.id == b.id){
b.isSelect = true;
}
if(b.children && b.children.length > 0){
b.children.map(c=>{
c.isSelect = false;
if(that.info.id == c.id){
c.isSelect = true;
}
})
}
})
}
})
}
this.categoryArray = arr;
this.categoryList = data;
} else {
uni.showToast({
icon: "none",
title: msg
})
}
},
openPage(index,a,type,idx,idx1) {
if(!uni.getStorageSync('userToken')){
uni.navigateTo({
url: "/pages/login/login"
})
return ;
}
if(index == 1){
if(this.info.id){
uni.setStorageSync("categoryTitle",this.info.name)
if(a == 4){
uni.navigateTo({
url: "/pages/exercises/cuowuti/cuowuti?id="+this.info.id+"&type="+a
})
}else{
uni.navigateTo({
url: "/pages/exercises/index?id="+this.info.id+"&type="+a
})
}
}else{
uni.showToast({
icon: "none",
title: "请选择分类"
})
}
}else if(index == 2){
if(this.info.id){
uni.setStorageSync("categoryTitle",this.info.name)
if(a == 0){
uni.navigateTo({
url: "/pages/study/index?id="+this.info.id+"&type="+a
})
}else if(a == 3){
uni.navigateTo({
url: "/pages/study/free?id="+this.info.id
})
}else{
uni.navigateTo({
url: "/pages/study/detail?type="+a+"&id="+this.info.id
})
}
}else{
uni.showToast({
icon: "none",
title: "请选择分类"
})
}
}else if(index == 3){
if(!uni.getStorageSync("userToken")){
uni.navigateTo({
url: "/pages/login/login"
})
return ;
}
a.idx = idx
a.idx1 = idx1
a.type = type
uni.setStorageSync("teamInfo",a)
uni.navigateTo({
url: "/pages/question/buyTwo"
})
}else if(index == 4){
if(!uni.getStorageSync("userToken")){
uni.navigateTo({
url: "/pages/login/login"
})
return ;
}
uni.navigateTo({
url: "/pages/question/buyOne"
})
}
},
}
}
</script>
<style lang="scss" scoped>
.question {
width: 100%;
padding: 0 25rpx 25rpx;
overflow: hidden;
box-sizing: border-box;
&-hd {
margin-top: 20rpx;
background: #FFFFFF;
border-radius: 20rpx;
box-sizing: border-box;
padding: 0 30rpx;
overflow: hidden;
.a {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ddd;
padding: 20rpx 0;
.l {
display: flex;
align-items: center;
justify-content: space-between;
line-height: 40rpx;
font-size: 30rpx;
color: #222;
font-weight: bold;
text {
width: 120rpx;
height: 40rpx;
line-height: 40rpx;
background: #FFFFFF;
border: 1px solid #F01B1B;
border-radius: 40rpx;
font-size: 22rpx;
color: #F01B1B;
display: block;
text-align: center;
margin-left: 20rpx;
}
}
.r {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
font-weight: 400;
color: #999999;
}
image {
width: 40rpx;
height: 40rpx;
}
}
.c{
border-top: 1px solid #ddd;
&:first-child{
border-top-color: #FFFFFF;
}
.name{
padding: 20rpx 0;
font-size: 30rpx;
font-weight: 400;
color: #222222;
margin-left: 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
text {
width: 120rpx;
height: 40rpx;
line-height: 40rpx;
background: #FFFFFF;
border: 1px solid #F01B1B;
border-radius: 40rpx;
font-size: 22rpx;
color: #F01B1B;
display: block;
text-align: center;
margin-left: 20rpx;
}
}
}
.b {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 0;
.l {
display: flex;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #222222;
line-height: 40rpx;
image {
width: 40rpx;
height: 40rpx;
margin-right: 18rpx;
}
}
.r {
width: 90rpx;
height: 40rpx;
line-height: 40rpx;
background: #FFFFFF;
border: 1px solid #F01B1B;
border-radius: 40rpx;
font-size: 22rpx;
color: #F01B1B;
display: block;
text-align: center;
margin-left: 20rpx;
&-on {
border-color: #EAEAEA;
background: #EAEAEA;
color: #222222;
}
}
}
}
&-anniu{
height: 80rpx;
font-weight: bold;
font-size: 30rpx;
display: flex;
align-items: center;
justify-content: center;
}
&-bd {
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.a {
width: 340rpx;
background: #FFFFFF;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
margin-top: 20rpx;
.t {
height: 150rpx;
background: linear-gradient(-90deg, #09B7B9, #54E1EA);
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-weight: 400;
color: #FFFFFF;
image {
width: 44rpx;
height: 42rpx;
margin-right: 20rpx;
}
}
}
.b {
width: 340rpx;
background: #FFFFFF;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
margin-top: 20rpx;
.t {
height: 150rpx;
background: linear-gradient(-90deg, #FF8E43, #FFBF50);
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-weight: 400;
color: #FFFFFF;
image {
width: 44rpx;
height: 42rpx;
margin-right: 20rpx;
}
}
}
.c {
flex: 1;
background: #FFFFFF;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
margin-top: 20rpx;
.m{
font-size: 28rpx;
font-weight: 400;
color: #222222;
padding: 20rpx 0 0;
.l{
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
margin-left: 10rpx;
vertical-align: middle;
margin-top: -1px;
}
.r{
width: 40rpx;
height: 40rpx;
vertical-align: middle;
margin-top: -1px;
float: right;
}
}
.t {
height: 150rpx;
background: linear-gradient(-90deg, #13BAA0, #49D2BD);
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-weight: 400;
color: #FFFFFF;
image {
width: 43rpx;
height: 40rpx;
margin-right: 20rpx;
}
}
}
.d {
flex: 1;
background: #FFFFFF;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
margin: 20rpx 20rpx 0;
.m{
font-size: 28rpx;
font-weight: 400;
color: #222222;
padding: 20rpx 0 0;
.l{
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
vertical-align: middle;
margin-left: 10rpx;
margin-top: -1px;
}
.r{
width: 40rpx;
height: 40rpx;
vertical-align: middle;
margin-top: -1px;
float: right;
}
}
.t {
height: 150rpx;
background: linear-gradient(-90deg, #3399EA, #38BCFF);
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-weight: 400;
color: #FFFFFF;
image {
width: 42rpx;
height: 40rpx;
margin-right: 20rpx;
}
}
}
.e {
flex: 1;
background: #FFFFFF;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
margin-top: 20rpx;
.t {
height: 150rpx;
background: linear-gradient(-90deg, #13BAA0, #49D2BD);
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-weight: 400;
color: #FFFFFF;
image {
width: 40rpx;
height: 43rpx;
margin-right: 20rpx;
}
}
}
.f {
width: 340rpx;
background: #FFFFFF;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
margin-top: 20rpx;
.m{
font-size: 28rpx;
font-weight: 400;
color: #222222;
padding: 20rpx 0 0;
.l{
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
vertical-align: middle;
margin-left: 10rpx;
margin-top: -1px;
}
.r{
width: 40rpx;
height: 40rpx;
vertical-align: middle;
margin-top: -1px;
float: right;
}
}
.t {
height: 150rpx;
background: linear-gradient(-90deg, #3399EA, #38BCFF);
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-weight: 400;
color: #FFFFFF;
image {
width: 40rpx;
height: 43rpx;
margin-right: 20rpx;
}
}
}
}
&-fd{
background-color: #FFFFFF;
overflow: hidden;
border-radius: 20rpx;
margin-top: 20rpx;
width: 100%;
padding: 40rpx;
box-sizing: border-box;
display: flex;
align-items: center;
.a{
flex: 1;
text-align: center;
font-size: 28rpx;
font-weight: 400;
color: #999999;
line-height: 42rpx;
&:first-child{
border-right: 1px solid #CCCCCC;
}
.m{
margin-top: 20rpx;
text{
font-size: 48rpx;
}
font-size: 30rpx;
font-weight: 400;
color: #F01B1B;
}
}
}
}
</style>