332 lines
7.2 KiB
Vue
332 lines
7.2 KiB
Vue
<template>
|
||
<view class="app">
|
||
<view class="text">
|
||
参加知识技能培训，通过考试获得护理资格
|
||
</view>
|
||
<view class="card">
|
||
<view class="item" v-for='(item,index) in list' :key="index" @click.stop='gographicvideo(item)'>
|
||
<image :src="baseurl + item.trainingItemCoverUrl" mode=""></image>
|
||
<view class="title">
|
||
{{item.trainingItemTitle}}
|
||
</view>
|
||
<view class="price" v-if="item.trainingItemPrice">
|
||
￥{{item.trainingItemPrice}}
|
||
</view>
|
||
<view class="price" v-else>
|
||
￥0
|
||
</view>
|
||
<view class="buy" v-if='!item.trainingOrderStatus' @click.stop='buy(item)'>
|
||
购买
|
||
</view>
|
||
<view class="havebuy" v-else>
|
||
已购
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="items" v-for="(item,index) in list" :key="index" @tap='gographicvideo(item)'>
|
||
<view class="item">
|
||
<image :src="baseurl+item.trainingItemCoverUrl" mode=""></image>
|
||
<view class="title">
|
||
{{item.trainingItemTitle}}
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<u-popup v-model="buyshow" mode='bottom' height='500' class='popup' safe-area-inset-bottom>
|
||
<view class="popuptitle">请选择支付方式</view>
|
||
<view class="buyselect">
|
||
<image src="../../static/wechat.png" mode=""></image>
|
||
<view class="text">
|
||
微信支付
|
||
</view>
|
||
</view>
|
||
<view class="buybtn" @tap='tobuy'>
|
||
确认支付￥{{buylist.trainingItemPrice}}
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import {
|
||
selectTrainingCategory,
|
||
trainingItemOrder
|
||
} from '@/api/Learningtraining/index.js'
|
||
import baseurl from '@/api/baseurl.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
nursePersonId: null, //护理员id
|
||
baseurl: undefined,
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
list: [],
|
||
total: 0,
|
||
buylist: {},
|
||
buyshow: false,
|
||
};
|
||
},
|
||
onShow() {},
|
||
onLoad() {
|
||
const that = this
|
||
this.baseurl = baseurl
|
||
this.pageNum = 1
|
||
const nursePersonId = uni.getStorageSync('nursePersonId');
|
||
if (nursePersonId) {
|
||
// that.nursePersonId = nursePersonId
|
||
that.nursePersonId = 61
|
||
that.info();
|
||
} else {}
|
||
},
|
||
methods: {
|
||
//购买
|
||
tobuy() {
|
||
var obj = {
|
||
"trainingItemIdList": [],
|
||
"nurseStationId": undefined,
|
||
"nurseStationPersonId": undefined,
|
||
"trainingOrderAmount": undefined,
|
||
"nursePersonName": undefined,
|
||
"trainingItemType": undefined
|
||
}
|
||
obj.nurseStationId = uni.getStorageSync('nurseStationId');
|
||
obj.nursePersonName = uni.getStorageSync('nursePersonName');
|
||
obj.trainingItemIdList.push(this.buylist.trainingItemId)
|
||
obj.nurseStationPersonId = this.nursePersonId
|
||
obj.trainingOrderAmount = this.buylist.trainingItemPrice
|
||
obj.trainingItemType = this.buylist.trainingItemType
|
||
trainingItemOrder(obj).then(res => {
|
||
if (res.code == 200) {
|
||
this.buyshow = false
|
||
this.$refs.uToast.show({
|
||
title: '支付成功',
|
||
type: 'success',
|
||
duration: '1500'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//打开购买弹框
|
||
buy(item) {
|
||
this.buylist = item
|
||
this.buyshow = true
|
||
},
|
||
info() {
|
||
selectTrainingCategory(this.pageNum, this.pageSize, this.nursePersonId).then(res => {
|
||
this.list = res.rows
|
||
this.total = res.total
|
||
})
|
||
},
|
||
//跳转图文或者视频学习
|
||
gographicvideo(item) {
|
||
if (item.trainingItemTitle == '图文学习') {
|
||
uni.navigateTo({
|
||
url: `/pages/Graphiclearning/Graphiclearning?trainingParentId=${item.trainingItemId}`
|
||
})
|
||
} else if (item.trainingItemTitle == '视频学习') {
|
||
uni.navigateTo({
|
||
url: `/pages/Videolearning/Videolearning?trainingParentId=${item.trainingItemId}`
|
||
})
|
||
}
|
||
}
|
||
},
|
||
onReachBottom() { //下滑加载
|
||
if (this.list.length >= this.total) {} else {
|
||
this.pageNum++
|
||
selectTrainingCategory(this.pageNum, this.pageSize, this.nursePersonId).then(res => {
|
||
res.rows.forEach(e => {
|
||
this.list.push(e)
|
||
})
|
||
})
|
||
}
|
||
},
|
||
onPullDownRefresh() { //下拉刷新
|
||
this.pageNum = 1
|
||
this.info();
|
||
setTimeout(function() {
|
||
uni.stopPullDownRefresh();
|
||
}, 1000);
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.app {
|
||
color: #333333;
|
||
padding: 0;
|
||
|
||
.popup {
|
||
position: fixed;
|
||
bottom: 0;
|
||
|
||
.buyselect {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
margin: 40rpx auto 0;
|
||
position: absolute;
|
||
top: 100rpx;
|
||
|
||
image {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 48rpx;
|
||
transform: translateY(-50%);
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
}
|
||
|
||
.text {
|
||
margin: 0;
|
||
position: absolute;
|
||
left: 150rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
line-height: 100rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
|
||
.buybtn {
|
||
width: 70%;
|
||
height: 70rpx;
|
||
background: #4271B9;
|
||
border-radius: 5rpx;
|
||
line-height: 70rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
position: absolute;
|
||
bottom: 40rpx;
|
||
left: 15%;
|
||
}
|
||
|
||
.popuptitle {
|
||
width: 100%;
|
||
font-size: 41rpx;
|
||
text-align: center;
|
||
position: absolute;
|
||
top: 40rpx;
|
||
}
|
||
}
|
||
|
||
.card {
|
||
width: 96%;
|
||
margin: 25rpx auto;
|
||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||
|
||
.item {
|
||
width: 100%;
|
||
border-bottom: 1rpx solid #E6E6E6;
|
||
position: relative;
|
||
height: 200rpx;
|
||
margin-bottom: 20rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 5rpx;
|
||
|
||
image {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
left: 15rpx;
|
||
width: 216rpx;
|
||
height: 136rpx;
|
||
}
|
||
|
||
.havebuy {
|
||
width: 125rpx;
|
||
height: 55rpx;
|
||
background: #CDCDCD;
|
||
border-radius: 5rpx;
|
||
text-align: center;
|
||
line-height: 55rpx;
|
||
color: #FFFFFF;
|
||
position: absolute;
|
||
right: 15rpx;
|
||
bottom: 30rpx;
|
||
}
|
||
|
||
.buy {
|
||
width: 125rpx;
|
||
height: 55rpx;
|
||
background: #4271B9;
|
||
border-radius: 5rpx;
|
||
text-align: center;
|
||
line-height: 55rpx;
|
||
color: #FFFFFF;
|
||
position: absolute;
|
||
right: 15rpx;
|
||
bottom: 30rpx;
|
||
}
|
||
|
||
.time {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
position: absolute;
|
||
top: 120rpx;
|
||
left: 250rpx;
|
||
}
|
||
|
||
.price {
|
||
position: absolute;
|
||
top: 120rpx;
|
||
left: 250rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #EA706A;
|
||
}
|
||
|
||
.title {
|
||
width: 281rpx;
|
||
position: absolute;
|
||
top: 35rpx;
|
||
left: 250rpx;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
text-overflow: -o-ellipsis-lastline;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2; //行数需设置
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
}
|
||
|
||
// .items {
|
||
// width: 96%;
|
||
// margin: 25rpx auto;
|
||
|
||
// .item {
|
||
// width: 100%;
|
||
// height: 132rpx;
|
||
// background: #FFFFFF;
|
||
// box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||
// border-radius: 5rpx;
|
||
// margin-bottom: 20rpx;
|
||
// position: relative;
|
||
|
||
// .title {
|
||
// display: inline-block;
|
||
// font-size: 32rpx;
|
||
// position: absolute;
|
||
// top: 50%;
|
||
// left: 120rpx;
|
||
// transform: translateY(-50%);
|
||
// }
|
||
|
||
// image {
|
||
// width: 60rpx;
|
||
// height: 60rpx;
|
||
// position: absolute;
|
||
// top: 50%;
|
||
// left: 41rpx;
|
||
// transform: translateY(-50%);
|
||
// }
|
||
// }
|
||
// }
|
||
|
||
.text {
|
||
margin: 40rpx 0 0 23rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
</style>
|