|
@@ -5,6 +5,7 @@
|
|
|
:headerBorder="'rgba(255, 255, 255, 0.12)'"
|
|
|
:userBg="'rgba(0, 0, 0, 0.08)'"
|
|
|
:LoginNavIndex="2"
|
|
|
+ ref="header"
|
|
|
/>
|
|
|
<ul>
|
|
|
<li v-for="(item,index) in dataList" :key="index" :style="{background:bgList[index%3].bg}">
|
|
@@ -24,7 +25,7 @@
|
|
|
</label>
|
|
|
</div>
|
|
|
<div class="item-bottom">
|
|
|
- <a @click="handleStart(item)">开始测评 ¥1.9</a>
|
|
|
+ <a @click="handleStart(item)" :loading="createOrderLoading">开始测评 ¥{{price}}</a>
|
|
|
<i class="el-icon-success" v-if="item.date" :style="{color:bgList[index%3].color}"></i>
|
|
|
<span v-if="item.date" :style="{color:bgList[index%3].color}">{{item.date}} 做过</span>
|
|
|
</div>
|
|
@@ -32,6 +33,15 @@
|
|
|
<img :src="item.src" />
|
|
|
</li>
|
|
|
</ul>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="paymentShow"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="712px"
|
|
|
+ class="bookItem-dialog"
|
|
|
+ v-if="paymentShow">
|
|
|
+ <Payment :data="info" :payWay="payWay" @handleClose="handleClose" :orderId="orderId" :qr_code_url="qr_code_url" :order_amount="order_amount" @handleSuccess="handleSuccess" />
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -40,10 +50,12 @@
|
|
|
//例如:import 《组件名称》from ‘《组件路径》';
|
|
|
import Header from "../../components/Header.vue";
|
|
|
import { mapState } from 'vuex';
|
|
|
-
|
|
|
+import { getLogin } from "@/api/ajax";
|
|
|
+import Payment from "../bookShelf/components/Payment.vue"
|
|
|
+import { getToken } from '@/utils/auth'
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
- components: { Header },
|
|
|
+ components: { Header, Payment },
|
|
|
props: {},
|
|
|
data() {
|
|
|
//这里存放数据
|
|
@@ -54,21 +66,24 @@ export default {
|
|
|
totleNumber:34,
|
|
|
date:'2023/03/02',
|
|
|
src:require('../../assets/evaluation1.png'),
|
|
|
- studyType: 11
|
|
|
+ studyType: 11,
|
|
|
+ test_type: 0
|
|
|
},
|
|
|
{
|
|
|
title:'听力测试',
|
|
|
totleNumber:46,
|
|
|
date:'2023/09/02',
|
|
|
src:require('../../assets/evaluation2.png'),
|
|
|
- studyType: 11
|
|
|
+ studyType: 11,
|
|
|
+ test_type: 1
|
|
|
},
|
|
|
{
|
|
|
title:'阅读测试',
|
|
|
totleNumber:580,
|
|
|
date:'2023/09/20',
|
|
|
src:require('../../assets/evaluation3.png'),
|
|
|
- studyType: 11
|
|
|
+ studyType: 11,
|
|
|
+ test_type: 2
|
|
|
}
|
|
|
],
|
|
|
bgList:[
|
|
@@ -85,7 +100,16 @@ export default {
|
|
|
color:'#1D2129'
|
|
|
}
|
|
|
],
|
|
|
- avatarList:[require('../../assets/login/Group3214.png'),require('../../assets/login/Group3214.png'),require('../../assets/login/Group3214.png'),require('../../assets/login/Group3214.png'),require('../../assets/login/Group3214.png')]
|
|
|
+ avatarList:[require('../../assets/login/Group3214.png'),require('../../assets/login/Group3214.png'),require('../../assets/login/Group3214.png'),require('../../assets/login/Group3214.png'),require('../../assets/login/Group3214.png')],
|
|
|
+ price: null,
|
|
|
+ paymentShow: false, // 支付弹窗
|
|
|
+ payWay:this.$route.query.paywei?this.$route.query.paywei:'wei',
|
|
|
+ info: null, // 信息
|
|
|
+ orderId: '',
|
|
|
+ qr_code_url: '',
|
|
|
+ order_amount: null,
|
|
|
+ createOrderLoading: false,
|
|
|
+ userMessage: getToken()?JSON.parse(getToken()):null,
|
|
|
}
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
@@ -98,17 +122,73 @@ export default {
|
|
|
methods: {
|
|
|
// 跳转开始测评
|
|
|
handleStart(obj){
|
|
|
+ if(!this.userMessage){
|
|
|
+ this.$refs.header.handleLogin('/evaluation','url')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.info = {
|
|
|
+ name: obj.title,
|
|
|
+ price_discount: this.price,
|
|
|
+ goods_study_phase: obj.studyType,
|
|
|
+ test_type: obj.test_type
|
|
|
+ }
|
|
|
+ this.handleOrder()
|
|
|
+ },
|
|
|
+ // 获取测评价格
|
|
|
+ getPrice(){
|
|
|
+ getLogin('/OrgServer/Client/SysConfigQuery/GetSysConfig_Test', {})
|
|
|
+ .then((res) => {
|
|
|
+ if(res.status===1){
|
|
|
+ this.price = res.test_order_price
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 生成订单
|
|
|
+ handleOrder(){
|
|
|
+ this.createOrderLoading = true
|
|
|
+ let MethodName = "/ShopServer/Client/OrderManager/CreateOrder_Test";
|
|
|
+ let data = {
|
|
|
+ test_type: this.info.test_type,
|
|
|
+ study_phase: this.info.goods_study_phase,
|
|
|
+ pay_type: this.payWay==='wei'?3:this.payWay==='zhi'?4:this.payWay==='dui'?5:null
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ this.createOrderLoading = false
|
|
|
+ if(res.status === 1){
|
|
|
+ this.order_amount = res.order_amount
|
|
|
+ if(this.order_amount<=0){
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.orderId = res.id
|
|
|
+ this.qr_code_url = res.qr_code_url
|
|
|
+ this.paymentShow = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(()=>{
|
|
|
+ this.createOrderLoading = false
|
|
|
+ })
|
|
|
+ // this.paymentShow = true;
|
|
|
+ },
|
|
|
+ // 关闭弹窗
|
|
|
+ handleClose(){
|
|
|
+ this.paymentShow = false
|
|
|
+ },
|
|
|
+ // 支付成功跳转
|
|
|
+ handleSuccess(){
|
|
|
+ this.paymentShow = false
|
|
|
this.$router.push({
|
|
|
path: '/evaluDetail',
|
|
|
query: {
|
|
|
- title:obj.title
|
|
|
+ title:this.info.name,
|
|
|
+ order: this.orderId
|
|
|
},
|
|
|
});
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
created() {
|
|
|
-
|
|
|
+ this.getPrice()
|
|
|
},
|
|
|
//生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
mounted() {
|
|
@@ -225,4 +305,17 @@ ul{
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.bookItem-dialog{
|
|
|
+ .el-dialog__header,.el-dialog__body{
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .el-dialog{
|
|
|
+ border: 1px solid #EBEBEB;
|
|
|
+ box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|