huxiaofeng666/jwl-applet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
脆皮鸭
2023-08-18 01:41:17 +08:00
parent d8332a326b 7e166ad8d5
commit ea9137eb0c
31 changed files with 2540 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/index/components/Subject1.vue
View File

@@ -23,7 +23,7 @@
</view>
<view style="padding: 0 28rpx;margin-top: 60rpx;">
<view class="tabs-box">
<view class="wp33 flex ai-c jc-c">
<view class="wp33 flex ai-c jc-c" @tap="toVip">
<view class="text-center wp100">
<image style="width: 72rpx;height: 72rpx;margin: 0 auto"
src="../../static/image/index/vipicon.png">
@@ -97,6 +97,11 @@
return {}
},
methods: {
toVip(){
uni.navigateTo({
url:"/pages/index/videoVip"
})
},
toClass(){
uni.navigateTo({
url:"/pages/questionBank/baseOperate"

18
src/pages/index/components/Subject2.vue
View File

@@ -22,13 +22,12 @@
<video style="width: 100%;height: 362rpx;border-radius: 16rpx;" id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"></video>
</view>
</view>
<view class="video_box">
<view class="flex ai-c jc-sb">
<text class="fs18 fw600 cor-000">合肥科三真实考场</text>
<view>
<text class="fs14 cor-666">全部8个考场</text>
<u-icon color="#666" name="arrow-right" size="16"></u-icon>
</view>
<view class="video_box mt10">
<text class="fs18 cor-000">驾驶方法</text>
<view class="text-center mt10" style="width: 200rpx;" @tap="toDetail">
<image style="width: 200rpx;height: 200rpx;margin-bottom: 5px;" src="../../../static/image/index/base_operate.png"></image>
<text class="fs16 cor-000">基础操作讲解</text>
<view class="fs14 cor-999 mt5">操作方法精讲</view>
</view>
</view>
</view>
@@ -59,6 +58,11 @@ export default {
methods:{
checkVideo(val){
this.videoIndex=val
},
toDetail(){
uni.navigateTo({
url:"/pages/questionBank/baseOperate"
})
}
}
}

146
src/pages/index/videoVip.vue Normal file
View File

@@ -0,0 +1,146 @@
<template>
<view class="relative" style="height: 100vh;">
<image style="width: 100%;height: 600rpx;" src="../../static/image/index/vip_bg.png"></image>
<view class="p14">
<view class="flex jc-sb ai-c">
<view class="option_tem relative" :class="checkedPrice===item.priceId?'checked_item':''" v-for="(item,index) of priceList" :key="index" @click="checkPrice(item.priceId,item.money)">
<text class="fw600 fs16 cor-333">{{item.title}}</text>
<view class="mt5">
<text class="fs14" style="color: #FF6E02;">¥</text>
<text class="fs30 fw600" style="color: #FF6E02;">{{item.money}}</text>
</view>
<text class="fs12 cor-999">长期有效</text>
<view class="bottom_box fs12 cor-333" :class="checkedPrice===item.priceId?'checked_bottom':''">赠送vip题库</view>
<view class="tag" v-if="item.all">
<text style="transform:scale(0.83);">合买更优惠</text>
</view>
</view>
</view>
<view class="mt15 intr_box">
<view class="fw600 fs16 cor-000">免费获赠<text style="color: #FF6E02;">价值68元</text>的VIP题库</view>
<view class="flex ai-c jc-sb mt15">
<view class="flex ai-c">
<image style="width: 63rpx;height: 63rpx;margin-right: 5px;" src="../../static/image/index/vip500.png"></image>
<view class="vip_item">含精简500题</view>
</view>
<view class="flex ai-c">
<image style="width: 63rpx;height: 63rpx;margin-right: 5px;" src="../../static/image/index/vipmijuan.png"></image>
<view class="vip_item">含考前密卷2套</view>
</view>
</view>
</view>
</view>
<view class="wp100 p14" style="position: absolute;left: 0;bottom:20px">
<view class="sub_btn flex ai-c jc-sb">
<text class="cor-fff fs14">¥<text class="fs24 cor-fff">{{nowPrice}}</text></text>
<image style="width: 276rpx;height: 88rpx;margin-top: -5px;" src="../../static/image/index/buy.png"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return{
nowPrice:168,
checkedPrice:0,
priceList:[{
priceId:0,
title:'科一精品课',
money:168,
all:false
},
{
priceId:1,
title:'科四精品课',
money:168,
all:false
},
{
priceId:2,
title:'科一+科四',
money:268,
all:true,
}]
}
},
methods:{
checkPrice(val,price){
this.checkedPrice=val
this.nowPrice=price
}
}
}
</script>
<style scoped>
.option_tem{
width: 220rpx;
height: 241rpx;
text-align: center;
background: #FFFFFF;
border: 2px solid #D8D8D8;
border-radius: 16rpx 46rpx 16rpx 16rpx;
padding: 14px;
}
.checked_item{
width: 228rpx;
background: #FFF0E5;
border: 4px solid #FF6E02;
}
.bottom_box{
width: 214rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
background: rgb(239,239,239);
border-radius: 0 0 16rpx 16rpx;
position: absolute;
bottom: 0;
left: 0;
}
.checked_bottom{
width: 218rpx;
border-radius: 0 0 16rpx 12rpx;
background-color: #FF6E02;
}
.tag{
width: 122rpx;
height: 36rpx;
background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
border-radius: 8rpx 20rpx 8rpx 8rpx;
line-height: 36rpx;
text-align: center;
font-size: 12px;
color: #FFFC27;
position: absolute;
left: 10rpx;
top:-18rpx
}
.intr_box{
width: 100%;
text-align: center;
padding: 40rpx;
background: #FFF0E5;
border-radius: 16rpx;
}
.vip_item{
width: 208rpx;
height: 54rpx;
line-height: 54rpx;
text-align: center;
font-size: 14px;
background: #F3D7C2;
border-radius: 0rpx 10rpx 10rpx 10rpx;
}
.sub_btn{
width:100%;
height: 110rpx;
border: 4px solid #F59B26;
background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
box-shadow: 0rpx 16rpx 20rpx 1rpx rgba(245,155,38,0.78);
border-radius: 55rpx;
padding: 14rpx;
}
</style>

54
src/pages/me/index.vue
View File

@@ -6,23 +6,43 @@
<view class="info flex ai-c">
<u-avatar class="br-p50 overflow-h" :size="64" :src="user.avatar" mp-avatar shape="circle"></u-avatar>
<view class="ml12">
<view class="fs18 cor-333 fwb">{{user.name}}</view>
<view class="flex ai-c fs18 cor-333 fwb">
<text class="mr10">{{user.name}}</text>
<image src="/static/image/mine/vip.png" mode="widthFix" style="width: 18px;"></image>
</view>
<view class="mt5 fs14 cor-666">陪您学车 第{{user.count}}天</view>
</view>
</view>
</view>
<view class="p15lr" style="transform: translateY(-90px);">
<view class="mb10" v-if="user.vip">
<view class="relative mb10" @tap="handleVip">
<image src="/static/image/mine/vip_bg.png" mode="widthFix" style="width: 100%;"></image>
<view class="absolute p15lr p10tb flex ai-c jc-sb" style="left: 0;top: 0;right: 0;height: 40px;">
<view class="flex ai-c">
<view class="p3 br-p50" style="background-color: #873E1D;">
<image src="/static/image/mine/vip.png" mode="widthFix" style="width: 18px;height: 15px;"></image>
</view>
<text class="ml5 fs16 fwb" style="color: #7E4012FF;">VIP会员</text>
</view>
<text class="fs12" style="color: #7E4012FF;">2024-12-12到期</text>
</view>
<view class="absolute flex ai-c jc-c" style="left: 0;top: 40px;right: 0;bottom: 0;">
<view class="text-center">
<view class="fs18 fwb" style="color: #7E4012FF;">尊享科目一二三四全部付费权益</view>
<view class="study fs16 text-center" style="margin: 25px auto 0;color: #F6E99FFF;">
马上学习
</view>
</view>
</view>
</view>
<view class="br8 bc-fff p15 z-index2">
<text class="fs16 cor-333">我的驾校</text>
<div class="mt12 flex ai-c jc-sb">
<text class="fs18 cor-000 fwb">合肥八一驾校</text>
<u-button text="切换驾校" shape="circle"></u-button>
<u-button text="切换驾校" shape="circle" @click="handleChangeSchool"></u-button>
</div>
<u-line margin="14px 0 18px 0"></u-line>
<view class="flex ai-c">
<view class="flex ai-c" @tap="handleCallPhone">
<view class="flex ai-c jc-c phone">
<img src="/static/image/mine/phone.png" style="width: 12px;height: 12px;">
<text class="ml2 fs12 cor-fff">客服热线</text>
@@ -32,12 +52,12 @@
</view>
<view class="mt12 bc-fff br8">
<u-cell-group>
<u-cell size="large" title="我的资料" value="修改" isLink>
<u-cell size="large" title="我的资料" value="修改" isLink url="/pages/me/info">
<template #icon>
<img src="/static/image/mine/wdzl.png" style="width: 24px;height: 24px;">
</template>
</u-cell>
<u-cell size="large" title="我的体检" value="查看报告" isLink>
<u-cell size="large" title="我的体检" value="查看报告" isLink url="/pages/me/tijian">
<template #icon>
<img src="/static/image/mine/wdtj.png" style="width: 24px;height: 24px;">
</template>
@@ -74,6 +94,21 @@
},
methods: {
handleVip() {
uni.navigateTo({
url: '/pages/me/vip'
})
},
handleCallPhone() {
uni.makePhoneCall({
phoneNumber: '17318531354'
})
},
handleChangeSchool() {
uni.navigateTo({
url: '/pages/me/school'
})
}
}
}
</script>
@@ -90,4 +125,11 @@
background: #05C341;
border-radius: 16px 16px 0px 16px;
}
.study {
width: 200px;
height: 35px;
line-height: 35px;
background: #7E4012;
border-radius: 35px;
}
</style>

40
src/pages/me/info.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<view class="p15 bc-f5">
<view class="br8 bc-fff p15lr">
<view class="flex ai-c bb1" style="height: 110rpx;">
<view class="title">联系电话</view>
<view class="m30lr fs14 cor-333 fl1">15122305568</view>
<u-icon name="arrow-right" color="#999" />
</view>
<view class="flex ai-c" style="height: 110rpx;">
<view class="title">地址</view>
<view class="m30lr fs14 cor-333 fl1">安徽省合肥市包河区</view>
<u-icon name="arrow-right" color="#999" />
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.title {
width: 120rpx;
font-size: 14px;
color: #666;
}
.bb1 {
border-bottom: 1px solid #eee;
}
</style>

50
src/pages/me/school.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<view>
<IndexList :dataList="dataList" nameKey="schoolName" v-model:current="current" @click="click"></IndexList>
</view>
</template>
<script>
import IndexList from '@/components/liu-indexed-list/liu-indexed-list.vue'
export default {
components: {
IndexList
},
data() {
return {
current: '1',
dataList: [{
id: '1',
schoolName: '爱尚学车驾校长安分校',
},{
id: '2',
schoolName: '八一驾校',
},{
id: '3',
schoolName: '八零驾校',
},{
id: '4',
schoolName: '畅通驾校',
},{
id: '5',
schoolName: '金灵驾校',
},{
id: '6',
schoolName: '通顺驾校',
}]
}
},
methods: {
click() {
// 设置用户驾校
// 然后返回
uni.navigateBack()
}
}
}
</script>
<style>
</style>

42
src/pages/me/tijian.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<view class="p15 bc-f5">
<view class="br8 bc-fff p15lr">
<view class="flex ai-c bb1" style="height: 110rpx;">
<view class="title">体检结果</view>
<view class="ml30 fs14 cor-333 fl1">通过</view>
</view>
<view class="flex ai-c" style="height: 110rpx;">
<view class="title">体检时间</view>
<view class="ml30 fs14 cor-333 fl1">2023-08-10 14:35:23</view>
</view>
<view class="flex ai-fs" style="height: 110rpx;">
<view class="title">体检时间</view>
<image class="ml30" src="/static/image/mine/tijian.png" style="width: 333rpx;" mode="widthFix"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.title {
width: 120rpx;
font-size: 14px;
color: #666;
}
.bb1 {
border-bottom: 1px solid #eee;
}
</style>

226
src/pages/me/vip.vue Normal file
View File

@@ -0,0 +1,226 @@
<template>
<view class="flex fld-c p15">
<u-sticky>
<view class="flex ai-c">
<view v-for="(item,index) in list" :key="index" class="km-item" :class="{ actived: index==current }"
@click="current=index">
{{ item.name }}
</view>
</view>
</u-sticky>
<view class="mt15">
<swiper class="swiper" :current="current" style="height: 120px;" :autoplay="false" :display-multiple-items="1.45"
:disable-programmatic-animation="true" @change="onChange">
<swiper-item v-for="(item,index) in list" :key="index">
<view class="relative">
<image src="../../static/image/mine/vip_card.png" mode="widthFix" style="width:95%;"></image>
<view class="vip-info">
<u-avatar class="br-p50 overflow-h" style="border: 3px solid #873E1D;" :size="35" mp-avatar></u-avatar>
<view class="ml10">
<view class="fs16 fwb" style="color: #7E4012;line-height: 16px;">
{{item.name}}尊享VIP
</view>
<view class="mt5 fs12" style="color: #7E4012;line-height: 12px;">
2024-12-12到期
</view>
</view>
</view>
<view class="corner">
VIP已开通
</view>
<view class="renew">
98元立即续费
</view>
</view>
</swiper-item>
<swiper-item>
</swiper-item>
</swiper>
</view>
<view class="mt20">
<swiper class="swiper" :current="current" style="height: 300px;" :autoplay="false"
:disable-programmatic-animation="true" @change="onChange">
<swiper-item v-for="(item,index) in list" :key="index">
<view v-if="index == 0 || index == 3" class="p15 br8 cor-fff">
<view class="fs18 cor-000 fwb">
3步轻松学{{item.name}}
</view>
<view class="mt25 flex ai-c jc-sb">
<view class="flex ai-c">
<image src="../../static/image/mine/1.png" mode="widthFix" style="width:25px;"></image>
<view class="ml7">
<view class="fs16 cor-000 fwb" style="line-height: 16px;">
精简500题
</view>
<view class="mt7 fs12 cor-666" style="line-height: 12px;">
题目全部做对，视为完成
</view>
</view>
</view>
<view class="study">
去学习
</view>
</view>
<view class="mt45 flex ai-c jc-sb">
<view class="flex ai-c">
<image src="../../static/image/mine/2.png" mode="widthFix" style="width:25px;"></image>
<view class="ml7">
<view class="fs16 cor-000 fwb" style="line-height: 16px;">
真实考场模拟
</view>
<view class="mt7 fs12 cor-666" style="line-height: 12px;">
10次95分以上，视为完成
</view>
</view>
</view>
<view class="study">
去学习
</view>
</view>
<view class="mt45 flex ai-c jc-sb">
<view class="flex ai-c">
<image src="../../static/image/mine/3.png" mode="widthFix" style="width:25px;"></image>
<view class="ml7">
<view class="fs16 cor-000 fwb" style="line-height: 16px;">
考前密卷
</view>
<view class="mt7 fs12 cor-666" style="line-height: 12px;">
2套试卷95分以上，视为完成
</view>
</view>
</view>
<view class="study">
去学习
</view>
</view>
</view>
<view v-else style="margin-top: 30rpx;">
<view class="video-box">
<view class="flex jc-sb ai-c wp100">
<text style="color: #873E1D;font-size: 36rpx;">考场实况</text>
<text class="cor-666 fs12">全部 ></text>
</view>
<view class="flex ai-c mt20">
<image src="../../static/image/index/index_bg.png" mode="widthFix" style="flex: 1;border-radius: 33rpx;"></image>
<view class="ml18 text-center">
<u-button :customStyle="{width:'200rpx',height:'66rpx',borderRadius: '33rpx'}" iconColor="#fff"
text="去看视频" color="linear-gradient(90deg, #E66501 0%, #F8A42C 100%)" icon="play-circle">
</u-button>
<view class="cor-333 fs15 mt17">真实考场模拟</view>
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
name: '科一'
}, {
name: '科二'
}, {
name: '科三'
}, {
name: '科四'
}],
current: 0
}
},
methods: {
onChange(e) {
this.current = e.detail.current
}
}
}
</script>
<style lang="scss" scoped>
.km-item {
margin-right: 8px;
width: 72px;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #333;
text-align: center;
border-radius: 15px;
border: 1px solid #CCCCCC;
}
.actived {
background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
color: #fff;
}
.km-item:last-of-type {
margin-right: 0;
}
.vip-info {
position: absolute;
top: 15px;
left: 10px;
display: flex;
align-items: center;
}
.corner {
position: absolute;
bottom: 0;
left: 0;
width: 77px;
height: 23px;
background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
opacity: 0.86;
border-radius: 0px 8px 0px 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #fff;
}
.renew {
position: absolute;
right: 10%;
bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
width: 185rpx;
height: 52rpx;
background: #873E1D;
border-radius: 26rpx;
font-size: 12px;
color: #F6E99F;
}
.study {
display: flex;
align-items: center;
justify-content: center;
width: 161rpx;
height: 67rpx;
background: #F6E99F;
border-radius: 34rpx;
font-size: 12px;
color: #873E1D;
}
.video-box {
padding: 20rpx;
width: 694rpx;
height: 369rpx;
background: #F9F3E7;
border: 2rpx solid #CF8B6D;
border-radius: 16rpx;
}
</style>

2
src/pages/questionBank/practiceResult.vue
View File

@@ -38,7 +38,7 @@
<text class="fs16 cor-000 fw600">精简500题</text>
</view>
<view style="width: 220rpx;">
<button style="background-color:rgb(246,211,115);height: 80rpx;border-radius: 40rpx;width: 220rpx;color:rgb(102,65,0)">开始答题</button>
<button style="background-color:rgb(246,211,115);height: 80rpx;border-radius: 40rpx;width: 220rpx;color:rgb(102,65,0)">开始答题</button>
</view>
</view>
</view>

117
src/pages/questionBank/videoDetail.vue
View File

@@ -1,20 +1,51 @@
<template>
<view>
<video style="width: 100%;height: 422rpx;" id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"></video>
<sunny-video style="width: 100%" videoHeight="422rpx" ref="sunny-video" title="测试视频" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" @timeupdate="timeupdate" />
<view class="p14 bc-fff">
<view class="flex ai-c jc-sb mt10">
<view class="flex ai-c jc-sb mt10 wp100">
<text class="fs18 fw600 cor-000">C1捷达-基础操作视频讲解</text>
<view class="flex">
<view class="flex" @tap="popupShow=true">
<text class="fs14 cor-666">更多</text>
<u-icon color="#666" name="arrow-right" size="18"></u-icon>
</view>
<swiper class="swiper mt20" :current="swiperIndex" :duration="duration" :autoplay="false" :disable-programmatic-animation="true" @change="onChange" @animationfinish="onAnimationfinish" @touchend="touchEnd" >
</swiper>
</view>
<view>
</view>
</view>
<view class="pl14 bc-fff">
<u-scroll-list :indicator="false" class="mr15">
<view v-for="(item, index) in videoList" :key="index" class="mr15" @click="checkVideo(item.id)">
<view>
<view class="mb10 relative">
<image class="contain-box" src="../../static/image/index/index_bg.png"></image>
<view v-if="nowVideo===item.id" class="playLogo">播放中</view>
<image class="play_btn" src="../../static/image/index/play.png" />
<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">13:14</text>
</view>
<text :style="{color:nowVideo===item.id?'#FF6E02':'#333'}">正确的驾驶姿势</text>
</view>
</view>
</u-scroll-list>
</view>
<u-popup :show="popupShow" mode="bottom" :closeOnClickOverlay="true" @close="popupShow=false">
<view class="p14 flex ai-c jc-sb">
<text class="fs16 fw600 cor-000">课程目录</text>
<text class="fs16 cor-666" @tap="popupShow=false">收起</text>
</view>
<view style="max-height: 800rpx;overflow-y: scroll;" class="p14lr">
<view class="flex bc-fff mt10" style="border-radius: 16rpx;" v-for="(item,index) of videoList" :key="index" @tap="toDetail">
<view class="pic relative">
<image class="pic" src="../../static/image/index/index_bg.png"></image>
<image class="play_btn_2" src="../../static/image/index/play.png" />
<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">13:14</text>
</view>
<view class="ml10">
<text class="fs16 cor-000 fw600">上车、下车的方法</text>
<view class="fs14 mt5 cor-666">上车、下车的方法</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
@@ -22,11 +53,81 @@
export default{
data(){
return{
popupShow:false,
nowVideo:0,
videoList:[{
title:'正确的驾驶姿势',
time:'13:14',
id:0
},{
title:'正确的驾驶姿势',
time:'13:14',
id:1
},{
title:'正确的驾驶姿势',
time:'13:14',
id:2
},{
title:'正确的驾驶姿势',
time:'13:14',
id:3
},{
title:'正确的驾驶姿势',
time:'13:14',
id:4
},{
title:'正确的驾驶姿势',
time:'13:14',
id:5
}]
}
},
methods:{
checkVideo(val){
this.nowVideo=val
}
}
}
</script>
<style>
<style scoped>
.contain-box {
width: 260rpx;
height: 146rpx;
background: #00B74F;
border-radius: 8rpx;
}
.playLogo{
width: 90rpx;
height: 40rpx;
background: #FF6E02;
border-radius: 8rpx 0rpx 8rpx 0rpx;
line-height: 40rpx;
text-align: center;
color: #fff;
font-size: 12px;
position: absolute;
left: 0;
top:0
}
.play_btn{
width: 65rpx;
height: 65rpx;
position: absolute;
left: 97.5rpx;
top:39.5rpx
}
.play_btn_2{
width: 65rpx;
height: 65rpx;
position: absolute;
left: 117.5rpx;
top:52rpx
}
.pic{
width: 300rpx;
height: 169rpx;
background: #00B74F;
border-radius: 8rpx;
}
</style>