<template>
|
<view class="content">
|
<view class="swiper">
|
<u-swiper :list="imgList" height="150" imgMode="scaleToFill"></u-swiper>
|
</view>
|
<view class="select" v-if="!userStore.subject">
|
<view class="grade">
|
<u-button size="large" :plain="true" type="primary" @click="gradeShow = true" shape="circle">
|
{{ grade ? grade.name : "请选择年级" }}
|
</u-button>
|
<u-picker :show="gradeShow" :columns="gradeColumns" @confirm="gradeChange" @cancel="gradeShow = false">
|
</u-picker>
|
</view>
|
<view class="subject">
|
<u-button size="large" :plain="true" type="primary" @click="subjectShow = true" shape="circle">
|
{{ subject ? subject.subjectname : "请选择科目" }}
|
</u-button>
|
<u-picker :show="subjectShow" :columns="subjectColumns" @confirm="subjectChange"
|
@cancel="subjectShow = false">
|
</u-picker>
|
</view>
|
<view class="submit">
|
<u-button size="large" type="primary" shape="circle" @click="submit">确定</u-button>
|
</view>
|
</view>
|
<view class="select-show" v-if="userStore.subject">
|
<text>
|
年级： <text style="color: gray;">
|
{{ grade ? grade.name : "年级未选择" }}</text>
|
科目：<text style="color: gray;">{{ subject ? subject.subjectname : "年级未选择" }}</text>
|
</text>
|
<view class="change">
|
<u-button size="mini" text="修改" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
|
shape="circle" @click="selectChange"></u-button>
|
</view>
|
</view>
|
<scroll-view scroll-y class="test-list" v-if="userStore.subject">
|
<view class="menu" v-for="(item, index) in papers" :key="index" @click="practice(item, index)">
|
<view class="menu-icon">
|
<image v-if="item.coverimage" mode="aspectFit" :src="item.coverimage"></image>
|
<image v-else style="width: 70%;height: 15vw;" src="../../static/image/test.png"></image>
|
</view>
|
<view :class="item.type == 2 ? 'menu-info-recharge' : 'menu-info'">
|
<text>{{ item.name }}</text>
|
<!-- <u-icon v-if="item.type == 2" size="20px" color="#f3d95b" name="rmb-circle"></u-icon> -->
|
</view>
|
<!-- <view class="menu-rmb">
|
|
</view> -->
|
</view>
|
<u-popup :show="vipShow" @close="vipShow = false">
|
<view class="popup-content">
|
<view class="close">
|
<text> {{ testSel.name }}</text>
|
<u-icon name="close-circle-fill" @click="vipShow = false"></u-icon>
|
</view>
|
<view class="popup-info">
|
<view class="info">
|
<view class="info-title">
|
<text>题库金额</text>
|
</view>
|
<view class="info-value">
|
<text>￥{{ testSel.price }}</text>
|
</view>
|
</view>
|
<view class="info">
|
<view class="info-title">
|
<text>有效期</text>
|
</view>
|
<view class="info-value">
|
<text>3个月</text>
|
</view>
|
</view>
|
<view class="info">
|
<view class="info-title">
|
<text>应付金额</text>
|
</view>
|
<view class="info-value">
|
<text>￥{{ testSel.price }}</text>
|
</view>
|
</view>
|
<!-- <view class="info">
|
<view class="info-title">
|
<text>优惠（VIP{{ userStore.vipDiscount }}折）</text>
|
</view>
|
<view class="info-value">
|
<text>￥{{ discountPrice }}</text>
|
</view>
|
</view> -->
|
<view class="info">
|
<view class="info-title">
|
<text>使用余额（余额:￥{{ balance }} 本次使用￥{{ testSel.price }}）</text>
|
<switch :disabled="balanceDisabled" :checked="isUse" @change="useBalance()"
|
style="transform:scale(0.7)" />
|
</view>
|
<view class="info-value">
|
<text>￥{{ isUse ? testSel.price : 0 }}</text>
|
</view>
|
</view>
|
<view class="info">
|
<view class="info-title">
|
<text>实付金额</text>
|
</view>
|
<view class="info-value">
|
<text>￥{{ testSel.price }}</text>
|
</view>
|
</view>
|
<u-button size="large" type="primary" @click="pay">立即购买</u-button>
|
</view>
|
</view>
|
</u-popup>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from "vue";
|
import { useBasicInfoStore } from "../../store/basicInfo"
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
import {
|
GetOrganizationGrades,
|
GetQuestionSubjects,
|
GetQuestionPapers,
|
CreateActiveOrder,
|
getWalletDetail,
|
PaySuccess,
|
getMyPaperList
|
} from "../../apis/api";
|
|
export default {
|
setup() {
|
const userStore = useBasicInfoStore()
|
const { proxy } = getCurrentInstance();
|
const state = reactive({
|
imgList: [
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
],
|
|
gradeShow: false,
|
grades: [],
|
gradeColumns: [],
|
grade: userStore.grade,
|
|
subjectShow: false,
|
subjects: [],
|
subjectColumns: [],
|
subject: userStore.subject,
|
|
papers: [],
|
vipShow: false,
|
testSel: {},
|
discountPrice: 0,
|
isUse: false,
|
balance: 0,
|
balanceDisabled: false,
|
|
paperList: [],
|
})
|
|
onMounted(() => {
|
Init(
|
);
|
});
|
|
onShow(() => {
|
getWalletDetailInfo()
|
getPaperList()
|
|
if (state.subject) {
|
loadPaper(state.subject.subjectid);
|
} else {
|
loadGrade(userStore.masterOrganization.majorid);
|
}
|
|
if (!userStore.grade) {
|
state.grade = null
|
}
|
|
if (!userStore.subject) {
|
state.subject = null
|
}
|
})
|
|
const Init = () => {
|
|
}
|
|
const getWalletDetailInfo = () => {
|
getWalletDetail(userStore.userinfo.id).then((res) => {
|
if (res) {
|
state.balance = res.balance
|
}
|
})
|
}
|
|
const getPaperList = () => {
|
getMyPaperList(userStore.userinfo.id).then((res) => {
|
if (res.data.length > 0) {
|
state.paperList = res.data
|
}
|
})
|
}
|
|
const loadGrade = (majorid) => {
|
state.grades = [];
|
state.gradeColumns = [];
|
|
let condition = { majorid: majorid };
|
GetOrganizationGrades(condition).then(resp => {
|
if (resp.data) {
|
state.grades = resp.data;
|
|
let sArray = [];
|
resp.data.map(e => {
|
sArray.push(e.name);
|
|
});
|
|
state.gradeColumns.push(sArray);
|
}
|
}).catch(err => {
|
console.error(err);
|
});
|
}
|
|
const gradeChange = (e) => {
|
let target = e.value[0];
|
|
if (state.grade == null || state.grade.name !== target) {
|
state.grade = state.grades.filter(e => e.name === target).shift();
|
|
state.gradeShow = false
|
} else {
|
state.gradeShow = false
|
}
|
|
loadSubject(state.grade.id);
|
}
|
|
const loadSubject = (gradeid) => {
|
state.subject = null;
|
state.subjects = [];
|
state.subjectColumns = [];
|
|
let condition = { gradeid: gradeid };
|
GetQuestionSubjects(condition).then(resp => {
|
if (resp.data) {
|
state.subjects = resp.data;
|
|
let sArray = [];
|
resp.data.map(e => {
|
sArray.push(e.subjectname);
|
});
|
|
state.subjectColumns.push(sArray);
|
}
|
}).catch(err => {
|
console.error(err);
|
});
|
}
|
|
const subjectChange = (e) => {
|
let target = e.value[0];
|
|
if (state.subject == null || state.subject.subjectname !== target) {
|
state.subject = state.subjects.filter(e => e.subjectname === target).shift();
|
|
state.subjectShow = false
|
} else {
|
state.subjectShow = false
|
}
|
|
}
|
|
const submit = () => {
|
userStore.grade = state.grade
|
userStore.subject = state.subject
|
|
|
loadPaper(userStore.subject.subjectid);
|
}
|
|
const selectChange = () => {
|
userStore.grade = null;
|
userStore.subject = null;
|
state.grade = null
|
state.subject = null
|
|
state.papers = [];
|
loadGrade(userStore.masterOrganization.majorid);
|
}
|
|
const loadPaper = (subjectid) => {
|
state.subjects = [];
|
state.subjectColumns = [];
|
|
let condition = { subjectid: subjectid };
|
GetQuestionPapers(condition).then(resp => {
|
if (resp.data) {
|
state.papers = resp.data;
|
}
|
}).catch(err => {
|
console.error(err);
|
});
|
}
|
|
|
const useBalance = () => {
|
state.isUse = !state.isUse
|
}
|
|
const practice = (item, index) => {
|
state.testSel = item
|
userStore.testTitle = item.name
|
userStore.paperId = item.id
|
if (state.balance < item.price) {
|
state.discountPrice = true
|
}
|
if (item.type == 2) {
|
let count = state.paperList.filter(e => item.id == e.paperid).length
|
if (count > 0) {
|
uni.navigateTo({
|
url: '/pages/question/type'
|
});
|
} else {
|
state.vipShow = true
|
}
|
//state.vipShow = true
|
} else {
|
uni.navigateTo({
|
url: '/pages/question/type'
|
});
|
}
|
}
|
|
const pay = () => {
|
let products = []
|
products.push({
|
productid: state.testSel.id,
|
price: state.testSel.price,
|
productname: state.testSel.name,
|
})
|
|
let condition = {
|
no: 1,
|
vipuserid: userStore.userinfo.id,
|
vipname: userStore.userinfo.nickname,
|
vipphone: userStore.userinfo.cellphone,
|
totalmoney: state.testSel.price,
|
paymoney: state.testSel.price,
|
products: products,
|
type: 1
|
}
|
userStore.payInfo = condition
|
CreateActiveOrder(condition).then(resp => {
|
if (resp.code == 200) {
|
userStore.payInfo.id = resp.data.id
|
userStore.payInfo.payedmoney = resp.data.totalmoney
|
if (state.isUse) {
|
userStore.payInfo.paymentmethod = 0
|
PaySuccess(userStore.payInfo).then(resp => {
|
if (resp) {
|
state.vipShow = false
|
uni.navigateTo({
|
url: '/pages/question/type'
|
});
|
}
|
})
|
} else {
|
userStore.payInfo.paymentmethod = 2
|
userStore.payPrice = state.testSel.price
|
userStore.payInfo.payPrice = state.testSel.price
|
userStore.routePage = 'list'
|
state.vipShow = false
|
uni.navigateTo({
|
url: '/pages/pay/pay'
|
})
|
}
|
}
|
else {
|
state.vipShow = false
|
uni.$u.toast('订单创建失败！');
|
}
|
}).catch(err => {
|
console.error(err);
|
});
|
}
|
|
return {
|
...toRefs(state),
|
userStore,
|
gradeChange,
|
subjectChange,
|
submit,
|
selectChange,
|
useBalance,
|
practice,
|
pay
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.center {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.content {
|
@extend .center;
|
height: 100vh;
|
width: 100%;
|
background-color: #f5f5f5;
|
}
|
|
.swiper {
|
width: 100%;
|
overflow: auto;
|
}
|
|
.select {
|
@extend .center;
|
width: 100%;
|
overflow: auto;
|
margin-top: 100rpx;
|
|
.grade {
|
margin-top: 60rpx;
|
@extend .center;
|
width: 80%;
|
height: 10vh;
|
}
|
|
.subject {
|
margin-top: 60rpx;
|
@extend .center;
|
width: 80%;
|
height: 10vh;
|
}
|
|
.submit {
|
margin-top: 60rpx;
|
@extend .center;
|
width: 80%;
|
height: 20vh;
|
}
|
}
|
|
.select-show {
|
width: calc(100% - 40rpx);
|
height: 40rpx;
|
background-color: #fff;
|
display: flex;
|
justify-content: flex-start;
|
padding: 20rpx;
|
font-size: 24rpx;
|
line-height: 40rpx;
|
|
.change {
|
width: 100rpx;
|
margin-left: 20rpx;
|
|
}
|
}
|
|
.test-list {
|
width: 100%;
|
height: calc(100vh - 190px - 30rpx);
|
padding: 15rpx;
|
|
.menu {
|
width: 30vw;
|
height: 35vw;
|
background-color: #fff;
|
margin: 1.66vw;
|
border-radius: 15rpx;
|
float: left;
|
// display: flex;
|
// flex-direction: column;
|
// align-items: center;
|
// justify-content: center;
|
|
// width: 40%;
|
// height: 100rpx;
|
// // line-height: 100rpx;
|
// // margin: 20rpx;
|
// // display: flex;
|
// // justify-content: flex-start;
|
// background-color: #fff;
|
// border-radius: 15rpx;
|
// padding: 0rpx 0rpx 0rpx 10rpx;
|
|
.menu-icon {
|
width: 100%;
|
height: 20vw;
|
@extend .center;
|
justify-content: center;
|
background-color: #f9f9f9;
|
}
|
|
.menu-info {
|
width: calc(100% - 20rpx);
|
height: calc(15vw - 20rpx);
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
vertical-align: baseline;
|
padding: 10rpx;
|
font-size: 25rpx;
|
|
::v-deep .u-icon {
|
display: inline-block;
|
margin-top: 4rpx;
|
margin-left: 10rpx;
|
}
|
}
|
|
.menu-info-recharge {
|
@extend .menu-info;
|
background-size: 17%;
|
background-repeat: no-repeat;
|
background-position: 95% 90%;
|
background-image: url('../../static/image/charge.png');
|
}
|
|
.menu-rmb {
|
width: 100rpx;
|
height: 100rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
|
.popup-content {
|
|
|
.close {
|
width: calc(100% - 20rpx);
|
height: 80rpx;
|
background-color: #f5f5f5;
|
line-height: 80rpx;
|
display: flex;
|
justify-content: space-between;
|
padding: 0rpx 10rpx;
|
}
|
|
.popup-info {
|
width: 100%;
|
overflow: auto;
|
|
.info {
|
width: calc(100% - 30rpx);
|
height: 80rpx;
|
line-height: 80rpx;
|
border-bottom: 1rpx solid #f5f5f5;
|
display: flex;
|
justify-content: space-between;
|
padding: 0rpx 15rpx;
|
font-size: 24rpx;
|
|
.info-title {}
|
|
.info-value {
|
color: gray;
|
}
|
}
|
}
|
}
|
</style>
|
