wangdong
11 months ago
parent
07758efb34
commit
b8bd350f4e
@ -0,0 +1,136 @@ |
||||
<template> |
||||
<BaseContainer class="recite"> |
||||
<NavBar title="背诵过关" /> |
||||
<view class="list"> |
||||
<template v-if="list.length > 0"> |
||||
<view v-for="(item, index) in list" class="list-item flex flex-center-x" @click="toContent"> |
||||
<view class="item-left"> |
||||
<view class="title"> |
||||
<image src="@/static/images/learning/icon.png" mode="aspectFill"></image> |
||||
{{ item.name }} |
||||
</view> |
||||
<view class="content"> |
||||
<view :style="{ borderColor: item.todayRecite ? '' : '#FFC067', color: item.todayRecite ? '': '#FFBF66' }">今日{{ item.todayRecite ? '已' : '未' }}背诵</view> |
||||
<view>词汇量：{{ item.count }}</view> |
||||
</view> |
||||
</view> |
||||
<view class="item-right"> |
||||
<view |
||||
v-if="item.type < 2" |
||||
class="status" |
||||
:style="{ background: item.type === 0 ? '#FFEDE9' : '#EFF8FE', color: item.type === 0 ? '#FF4B33': '#0F74BB' }">{{ item.type === 0 ? '免费' : '试看' }}</view> |
||||
<image v-if="item.type === 2" src="@/static/images/learning/nolock.png" mode="aspectFill"></image> |
||||
<image v-if="item.type === 3" src="@/static/images/learning/lock.png" mode="aspectFill"></image> |
||||
<view class="list-more"></view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
</view> |
||||
</BaseContainer> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
list: [ // 0：免费 1：试看 2：解锁 3：锁住 |
||||
{ name: '大学英语四级词汇背诵', count: '1000', todayRecite: true, type: 0 }, |
||||
{ name: '大学英语四级词汇背诵', count: '1000', todayRecite: false, type: 0 }, |
||||
{ name: '大学英语四级词汇背诵', count: '1000', todayRecite: false, type: 1 }, |
||||
{ name: '大学英语四级词汇背诵', count: '1000', todayRecite: false, type: 1 }, |
||||
{ name: '大学英语四级词汇背诵', count: '1000', todayRecite: false, type: 2 }, |
||||
{ name: '大学英语四级词汇背诵', count: '1000', todayRecite: false, type: 3 } |
||||
], |
||||
}; |
||||
}, |
||||
methods: { |
||||
toContent() { |
||||
uni.navigateTo({ |
||||
url: '/pages/learningCenter/reciteContent', |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.recite { |
||||
background: #f6f6f6; |
||||
.list { |
||||
width: 690rpx; |
||||
margin: 20rpx 30rpx 0; |
||||
.list-item { |
||||
width: 100%; |
||||
height: 158rpx; |
||||
background: #fff; |
||||
border-radius: 8rpx; |
||||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04); |
||||
align-items: center; |
||||
padding: 0 30rpx; |
||||
margin-bottom: 20rpx; |
||||
.item-left { |
||||
flex: 1; |
||||
.title { |
||||
color: #333; |
||||
font-size: 30rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
image { |
||||
width: 44rpx; |
||||
height: 44rpx; |
||||
margin-right: 15rpx; |
||||
} |
||||
} |
||||
.content { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-top: 20rpx; |
||||
>view { |
||||
font-size: 20rpx; |
||||
color: #666666; |
||||
&:first-child { |
||||
width: 112rpx; |
||||
height: 33rpx; |
||||
border-radius: 5rpx; |
||||
border: 1px solid #2DD092; |
||||
font-size: 20rpx; |
||||
color: #2DD092; |
||||
text-align: center; |
||||
line-height: 33rpx; |
||||
margin-right: 24rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.item-right { |
||||
display: flex; |
||||
align-items: center; |
||||
.status { |
||||
width: 76rpx; |
||||
height: 39rpx; |
||||
background: #FFEDE9; |
||||
border-radius: 6rpx 0rpx 6rpx 0rpx; |
||||
text-align: center; |
||||
line-height: 39rpx; |
||||
font-size: 22rpx; |
||||
} |
||||
image { |
||||
width: 44rpx; |
||||
height: 44rpx; |
||||
} |
||||
.list-more { |
||||
width: 14rpx; |
||||
height: 14rpx; |
||||
border-width: 2px 2px 0 0; |
||||
border-color: #ccc; |
||||
border-style: solid; |
||||
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); |
||||
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); |
||||
vertical-align: top; |
||||
margin-left: 13rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,185 @@ |
||||
<template> |
||||
<BaseContainer class="recite-content flex"> |
||||
<NavBar title="内容列表" /> |
||||
<view class="content-box"> |
||||
<view class="content-info"> |
||||
<view class="info-top flex"> |
||||
<image src="@/static/images/learning/icon.png" mode="aspectFill"></image> |
||||
{{ info.name }} |
||||
<view class="change">修改</view> |
||||
</view> |
||||
<view class="info-center"> |
||||
<view class="center-percent" :style="{ width: `${ info.hasRecite / info.count * 100 }%`}"></view> |
||||
</view> |
||||
<view class="info-bottom flex flex-center-x"> |
||||
<view>已练习：{{ info.hasRecite }}/{{ info.count }}</view> |
||||
<view>试看剩余：{{ info.surplus }}</view> |
||||
</view> |
||||
</view> |
||||
<view class="list-content"> |
||||
<template v-if="info.contentList.length > 0"> |
||||
<view v-for="(item, index) in info.contentList" :key="index" class="list-box"> |
||||
<view class="title flex flex-center-x"> |
||||
{{ item.title }} |
||||
<image v-if="item.isLock" src="@/static/images/learning/lock.png" mode="aspectFill"></image> |
||||
<image v-else src="@/static/images/learning/nolock.png" mode="aspectFill"></image> |
||||
</view> |
||||
<view class="list"> |
||||
<view v-for="(con, k) in item.list" class="list-item flex flex-center-x" @click="toDetail(con, item.isLock)"> |
||||
<view class="item-name">{{ k + 1 < 10 ? `0${k+1}` : k }}.{{ con }}</view> |
||||
<view class="list-more"></view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
</view> |
||||
</view> |
||||
</BaseContainer> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
info: { |
||||
name: '大学英语四级词汇背诵', |
||||
count: 1000, |
||||
hasRecite: 120, |
||||
surplus: '00:12:12', |
||||
contentList: [ |
||||
{ |
||||
title: '第一章节', |
||||
isLock: false, |
||||
list: ['goods', 'administration', 'goods', 'administration', 'goods', 'administration'] |
||||
}, |
||||
{ |
||||
title: '第二章节', |
||||
isLock: true, |
||||
list: ['goods', 'administration', 'goods', 'administration', 'goods', 'administration'] |
||||
} |
||||
] |
||||
}, |
||||
list: [], |
||||
}; |
||||
}, |
||||
methods: { |
||||
toDetail(con, isLock) { |
||||
console.log(isLock); |
||||
if (isLock) { |
||||
this.$util.showMsg('还未解锁'); |
||||
} else { |
||||
uni.navigateTo({ |
||||
url: '/pages/learningCenter/reciteDetail', |
||||
}); |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.recite-content { |
||||
background: #f6f6f6; |
||||
flex-direction: column; |
||||
.content-box { |
||||
width: 690rpx; |
||||
margin: 20rpx 30rpx 0; |
||||
flex: 1; |
||||
.content-info { |
||||
height: 178rpx; |
||||
background: #FFFFFF; |
||||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04); |
||||
border-radius: 8rpx; |
||||
padding: 27rpx 30rpx 0; |
||||
.info-top { |
||||
color: #333; |
||||
font-size: 30rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
image { |
||||
width: 44rpx; |
||||
height: 44rpx; |
||||
margin-right: 14rpx; |
||||
} |
||||
.change { |
||||
width: 100rpx; |
||||
height: 36rpx; |
||||
background: #0F74BB; |
||||
border-radius: 18rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
color: #FFFFFF; |
||||
font-size: 20rpx; |
||||
margin-left: auto; |
||||
line-height: 36rpx; |
||||
} |
||||
} |
||||
.info-center { |
||||
margin: 13rpx 0 18rpx; |
||||
height: 20rpx; |
||||
background: rgba(255, 149, 0, 0.1); |
||||
border-radius: 10rpx; |
||||
position: relative; |
||||
.center-percent { |
||||
background: #FF9500; |
||||
border-radius: 10rpx; |
||||
height: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
} |
||||
.info-bottom { |
||||
justify-content: space-between; |
||||
color: #666; |
||||
font-size: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
.list-content { |
||||
.list-box { |
||||
margin-top: 50rpx; |
||||
.title { |
||||
color: #333; |
||||
font-size: 30rpx; |
||||
justify-content: center; |
||||
margin-bottom: 25rpx; |
||||
image { |
||||
width: 44rpx; |
||||
height: 44rpx; |
||||
margin-left: 14rpx; |
||||
} |
||||
} |
||||
.list { |
||||
background: #FFFFFF; |
||||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04); |
||||
border-radius: 8rpx; |
||||
padding: 0 30rpx; |
||||
.list-item { |
||||
height: 100rpx; |
||||
border-bottom: 2rpx solid #F6F6F6; |
||||
padding-left: 15rpx; |
||||
.list-more { |
||||
width: 14rpx; |
||||
height: 14rpx; |
||||
border-width: 2px 2px 0 0; |
||||
border-color: #ccc; |
||||
border-style: solid; |
||||
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); |
||||
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); |
||||
vertical-align: top; |
||||
margin-left: 13rpx; |
||||
} |
||||
.item-name { |
||||
flex: 1; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,238 @@ |
||||
<template> |
||||
<BaseContainer class="recite-detail flex"> |
||||
<NavBar title="详情" /> |
||||
<view class="detail-box"> |
||||
<view class="detail-info"> |
||||
<view class="info-name flex"> |
||||
{{ detailInfo.name }} |
||||
<view :class="[ |
||||
'iconfont', |
||||
detailInfo.collect ? 'iconshoucang2' : 'iconshoucang11', |
||||
]" @click="detailInfo.collect = !detailInfo.collect"></view> |
||||
</view> |
||||
<view class="audio-box"> |
||||
<view class="audio" :class="{ audioActive: activeAudio === 1 }" @click="activeAudio = 1;"> |
||||
英 <text>{{ detailInfo.enAudio }}</text> |
||||
<image v-if="activeAudio !== 1" src="@/static/images/learning/audio.png" mode="aspectFill" @click="openAudio"></image> |
||||
<image v-else src="@/static/images/learning/audio_active.png" mode="aspectFill" @click="openAudio"></image> |
||||
</view> |
||||
<view class="audio" :class="{ audioActive: activeAudio === 2 }" @click="activeAudio = 2;"> |
||||
美 <text>{{ detailInfo.uaAudio }}</text> |
||||
<image v-if="activeAudio !== 2" src="@/static/images/learning/audio.png" mode="aspectFill" @click="openAudio"></image> |
||||
<image v-else src="@/static/images/learning/audio_active.png" mode="aspectFill" @click="openAudio"></image> |
||||
</view> |
||||
</view> |
||||
<view class="info-remark flex flex-center-x"> |
||||
<view>{{ detailInfo.remark }}</view> |
||||
<view>单词报错</view> |
||||
</view> |
||||
<view class="info-adverb"> |
||||
副词 <text>{{ detailInfo.adverb }}</text> |
||||
</view> |
||||
</view> |
||||
<view class="example"> |
||||
<view class="title">例句</view> |
||||
<view v-for="(item, index) in detailInfo.example" :key="index" class="example-item"> |
||||
<view class="item-content"> |
||||
<view v-html="item.content"></view> |
||||
<image src="@/static/images/learning/audio.png" mode="aspectFill"></image> |
||||
</view> |
||||
<view class="item-translate">{{ item.translate }}</view> |
||||
</view> |
||||
</view> |
||||
<view class="analysis"> |
||||
<view class="title">词根词缀句</view> |
||||
<view class="analysis-content">{{ detailInfo.analysis }}</view> |
||||
</view> |
||||
</view> |
||||
<view class="detail-footer flex flex-center-x"> |
||||
<view class="btn cut">砍掉</view> |
||||
<view class="btn next">下一题</view> |
||||
</view> |
||||
</BaseContainer> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
detailInfo: { |
||||
collect: false, |
||||
name: 'outdoor', |
||||
enAudio: '/’aʊtdɔ:(r)/', |
||||
uaAudio: '/’aʊtdɔ:r/ ', |
||||
remark: 'adj.户外的;室外的', |
||||
adverb: 'outdoors', |
||||
example: [ |
||||
{ content: 'If you enjoy <text style="color: #0F74BB;">outdoor</text> activities, this is the trip for you.', translate: '如果你喜欢户外运动，这一旅行很适合你。' }, |
||||
{ content: 'If you enjoy <text style="color: #0F74BB;">outdoor</text> activities, this is the trip for you.', translate: '如果你喜欢户外运动，这一旅行很适合你。' }, |
||||
{ content: 'If you enjoy <text style="color: #0F74BB;">outdoor</text> activities, this is the trip for you.', translate: '如果你喜欢户外运动，这一旅行很适合你。' }, |
||||
{ content: 'If you enjoy <text style="color: #0F74BB;">outdoor</text> activities, this is the trip for you.', translate: '如果你喜欢户外运动，这一旅行很适合你。' }, |
||||
], |
||||
analysis: 'out- 在外面 + door n.门' |
||||
}, |
||||
activeAudio: 1, |
||||
}; |
||||
}, |
||||
methods: { |
||||
openAudio() { |
||||
|
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.recite-detail { |
||||
background: #f6f6f6; |
||||
flex-direction: column; |
||||
.detail-box { |
||||
width: 690rpx; |
||||
margin: 20rpx auto; |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
.detail-info { |
||||
padding: 36rpx 20rpx 36rpx 32rpx; |
||||
background: #FFFFFF; |
||||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04); |
||||
border-radius: 8rpx; |
||||
.info-name { |
||||
color: #333333; |
||||
font-size: 62rpx; |
||||
line-height: 62rpx; |
||||
align-items: baseline; |
||||
font-weight: bold; |
||||
.iconfont { |
||||
font-size: 40rpx; |
||||
margin-left: auto; |
||||
font-weight: normal; |
||||
&.iconshoucang2 { |
||||
color: #ff6b00 !important; |
||||
} |
||||
} |
||||
} |
||||
.audio-box { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin-top: 40rpx; |
||||
.audio { |
||||
height: 48rpx; |
||||
background: #F7F7F7; |
||||
border-radius: 24rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0 26rpx; |
||||
&:first-child { |
||||
margin-right: 16rpx; |
||||
} |
||||
&.audioActive { |
||||
background: rgba(15, 116, 187, 0.1); |
||||
} |
||||
text { |
||||
margin-left: 10rpx; |
||||
} |
||||
image { |
||||
width: 28rpx; |
||||
height: 28rpx; |
||||
margin-left: 27rpx; |
||||
} |
||||
} |
||||
} |
||||
.info-remark { |
||||
color: #333; |
||||
font-size: 26rpx; |
||||
margin: 16rpx 0 24rpx; |
||||
view:last-child { |
||||
width: 93rpx; |
||||
height: 39rpx; |
||||
background: #EEEEEE; |
||||
border-radius: 10rpx; |
||||
color: #666666; |
||||
font-size: 20rpx; |
||||
text-align: center; |
||||
line-height: 39rpx; |
||||
margin-left: auto; |
||||
} |
||||
} |
||||
.info-adverb { |
||||
color: #999999; |
||||
font-size: 26rpx; |
||||
text { |
||||
color: #333; |
||||
margin-left: 22rpx; |
||||
} |
||||
} |
||||
} |
||||
.example { |
||||
background: #FFFFFF; |
||||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04); |
||||
border-radius: 8rpx; |
||||
padding: 30rpx; |
||||
margin-top: 20rpx; |
||||
.title { |
||||
color: #999999; |
||||
font-size: 26rpx; |
||||
} |
||||
.example-item { |
||||
margin-top: 30rpx; |
||||
.item-content { |
||||
display: flex; |
||||
margin-bottom: 24rpx; |
||||
>view { |
||||
width: 520rpx; |
||||
} |
||||
image { |
||||
width: 28rpx; |
||||
height: 28rpx; |
||||
margin-left: auto; |
||||
margin-top: 10rpx; |
||||
} |
||||
} |
||||
.item-translate { |
||||
color: #999999; |
||||
font-size:24rpx; |
||||
} |
||||
} |
||||
} |
||||
.analysis { |
||||
background: #FFFFFF; |
||||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04); |
||||
border-radius: 8rpx; |
||||
padding: 30rpx 32rpx; |
||||
margin-top: 20rpx; |
||||
.title { |
||||
color: #999999; |
||||
font-size: 26rpx; |
||||
margin-bottom: 24rpx; |
||||
} |
||||
.analysis-content { |
||||
color: #333333; |
||||
font-size: 30rpx; |
||||
} |
||||
} |
||||
} |
||||
.detail-footer { |
||||
width: 100%; |
||||
height: 130rpx; |
||||
justify-content: center; |
||||
padding-left: 30rpx; |
||||
background: #fff; |
||||
box-shadow: 0rpx -19rpx 54rpx 0rpx rgba(34,34,34,0.05); |
||||
flex-shrink: 0; |
||||
.btn { |
||||
color: #666; |
||||
font-size: 30rpx; |
||||
&.next { |
||||
width: 550rpx; |
||||
height: 88rpx; |
||||
background: linear-gradient(0deg, #0F74BB 0%, #3293FF 100%); |
||||
border-radius: 44rpx; |
||||
color: #fff; |
||||
line-height: 88rpx; |
||||
text-align: center; |
||||
margin-left: 44rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,60 @@ |
||||
<template> |
||||
<BaseContainer class="feedback"> |
||||
<NavBar title="帮助与反馈" /> |
||||
<view class="feedback-form"> |
||||
<textarea v-model="suggest" placeholder="请填写具体内容帮助我们了解您的意见和建议。" placeholder-class="input-placeholder" /> |
||||
<view class="btn" @click="submitFeedback">提交</view> |
||||
</view> |
||||
</BaseContainer> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
suggest: '', |
||||
}; |
||||
}, |
||||
methods: { |
||||
submitFeedback() { |
||||
if (!this.suggest) { |
||||
return this.$util.showMsg("请输入您的意见和建议"); |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.feedback { |
||||
background: linear-gradient(to top, #f6f6f6 0%, #f6f6f6 60%, #F6F8FA 70%, #A1BFFD 100%); |
||||
.feedback-form { |
||||
padding: 60rpx 30rpx 0; |
||||
.input-placeholder { |
||||
font-size: 28rpx; |
||||
color: #ABABAB; |
||||
font-weight: bold; |
||||
} |
||||
textarea { |
||||
width: 100%; |
||||
height: 420rpx; |
||||
padding: 30rpx; |
||||
font-size: 28rpx; |
||||
color: #333; |
||||
background: #fff; |
||||
border-radius: 10rpx; |
||||
} |
||||
.btn { |
||||
width: 100%; |
||||
height: 80rpx; |
||||
background: linear-gradient(0deg, #0F74BB 0%, #3293FF 100%); |
||||
border-radius: 40rpx; |
||||
color: #fff; |
||||
font-size: 32rpx; |
||||
text-align: center; |
||||
line-height: 80rpx; |
||||
margin-top: 100rpx; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,115 @@ |
||||
<template> |
||||
<BaseContainer class="help-center"> |
||||
<NavBar title="帮助与反馈" /> |
||||
<view class="help-box flex flex-center-x"> |
||||
<view class="help-left"> |
||||
<view class="title">常见问题解答</view> |
||||
<view class="cont">如您问题未得到解决可咨询我们客服哦 ~</view> |
||||
</view> |
||||
<view class="help-right flex flex-center-y" @click="toFeedback"> |
||||
<image src="@/static/images/my/feedback.png" mode="aspectFill"></image> |
||||
<view class="name">意见反馈</view> |
||||
</view> |
||||
</view> |
||||
<view class="section-list"> |
||||
<view class="section-link" v-for="(item, index) in menuList" :key="index" @click="goUrl(item.url)" > |
||||
{{ item.title }} |
||||
<view class="menu-more"></view> |
||||
</view> |
||||
</view> |
||||
</BaseContainer> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
menuList: [ |
||||
{ title: '怎么申请发票' , url: '' }, |
||||
{ title: '如何联系人工客服' , url: '' }, |
||||
{ title: '怎么绑定手机号' , url: '' }, |
||||
{ title: '忘记密码找回' , url: '' }, |
||||
], |
||||
}; |
||||
}, |
||||
methods: { |
||||
goUrl(url) { |
||||
if (url) { |
||||
uni.navigateTo({ |
||||
url, |
||||
}); |
||||
} |
||||
}, |
||||
toFeedback() { |
||||
|
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.help-center { |
||||
background: linear-gradient(to top, #f6f6f6 0%, #f6f6f6 60%, #F6F8FA 70%, #A1BFFD 100%); |
||||
.help-box { |
||||
padding: 30rpx 32rpx 0; |
||||
height: 193rpx; |
||||
.help-left { |
||||
flex: 1; |
||||
color: #333333; |
||||
font-size: 26rpx; |
||||
line-height: 26rpx; |
||||
.title { |
||||
font-size: 36rpx; |
||||
line-height: 36rpx; |
||||
font-weight: bold; |
||||
margin-bottom: 26rpx; |
||||
} |
||||
} |
||||
.help-right { |
||||
width: 99rpx; |
||||
height: 99rpx; |
||||
background: #fff; |
||||
border-radius: 20rpx; |
||||
color: #333333; |
||||
font-size: 22rpx; |
||||
line-height: 22rpx; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
>image { |
||||
width: 51rpx; |
||||
height: 44rpx; |
||||
margin-bottom: 6rpx; |
||||
} |
||||
} |
||||
} |
||||
.section-list { |
||||
width: 690rpx; |
||||
margin: 0 auto; |
||||
font-size: 30rpx; |
||||
color: #282828; |
||||
background-color: #ffffff; |
||||
border-radius: 10rpx; |
||||
margin-top: 20rpx; |
||||
.section-link { |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 28rpx; |
||||
color: #333; |
||||
height: 96rpx; |
||||
padding-left: 36rpx; |
||||
padding-right: 26rpx; |
||||
.menu-more { |
||||
width: 14rpx; |
||||
height: 14rpx; |
||||
border-width: 2px 2px 0 0; |
||||
border-color: #ccc; |
||||
border-style: solid; |
||||
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); |
||||
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); |
||||
vertical-align: top; |
||||
margin-left: auto; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,283 @@ |
||||
<template> |
||||
<BaseContainer class="cooperation-apply"> |
||||
<NavBar title="出国留学" /> |
||||
<view class="cooperation-form"> |
||||
<view class="form-item"> |
||||
<view class="item-label"><text>姓名</text>：</view> |
||||
<view class="item-content"> |
||||
<input type="text" v-model="applyForm.real_name" placeholder="请输入姓名" placeholder-class="input-placeholder"/> |
||||
</view> |
||||
</view> |
||||
<view class="form-item"> |
||||
<view class="item-label"><text>电话</text>：</view> |
||||
<view class="item-content"> |
||||
<input type="text" v-model="applyForm.mobile" placeholder="请输入电话" placeholder-class="input-placeholder"/> |
||||
</view> |
||||
</view> |
||||
<view class="form-item"> |
||||
<view class="item-label"><text>推荐人</text>：</view> |
||||
<view class="item-content"> |
||||
<input type="text" v-model="applyForm.recommend_user" placeholder="请输入推荐人" placeholder-class="input-placeholder"/> |
||||
</view> |
||||
</view> |
||||
<view class="form-item"> |
||||
<view class="item-label"><text>详细地址</text>：</view> |
||||
<view class="item-content"> |
||||
<input type="text" v-model="applyForm.address" placeholder="请输入详细地址" placeholder-class="input-placeholder"/> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="gold-box flex"> |
||||
<label class="radio"> |
||||
<radio value="意向金" :checked="true" color="#FF9500" /><text>意向金：</text> |
||||
</label> |
||||
<view class="gold">￥{{ 200 }}</view> |
||||
</view> |
||||
<view class="apply-btn" @click="apply">立即报名</view> |
||||
<PayDialog v-if="initDataLoading" :open.sync="payDialogOpen" :money="Number(money)" :now_money="now_money" |
||||
:pay_type_num="pay_type_num" :special_id="Number(special_id)" :is-wechat="isWechat" :is-alipay="is_alipay" :is-balance="is_yue" |
||||
:template-id="templateId" :wxpay-h5="wxpayH5" @change="changeVal" /> |
||||
</BaseContainer> |
||||
</template> |
||||
|
||||
<script> |
||||
import PayDialog from "@/components/PayDialog/index.vue"; |
||||
import { |
||||
applycooperation, |
||||
delSpecialOrder, |
||||
getInitData |
||||
} from "@/api/special"; |
||||
|
||||
|
||||
export default { |
||||
components: { |
||||
PayDialog, |
||||
}, |
||||
data() { |
||||
return { |
||||
special_id: '', |
||||
specialInfo: {}, |
||||
applyForm: { |
||||
real_name: '', |
||||
mobile: '', |
||||
recommend_user: '', |
||||
address: '', |
||||
}, |
||||
payDialogOpen: false, |
||||
payDialogOpen: false, // 是否显示支付弹窗 |
||||
money: 200.0, |
||||
pay_type_num: 20, |
||||
is_alipay: false, //支付宝是否开启 |
||||
is_yue: false, //余额是否开启 |
||||
now_money: 0, //余额 |
||||
templateId: "", |
||||
wxpayH5: false, |
||||
initDataLoading: false, |
||||
}; |
||||
}, |
||||
|
||||
onLoad(options) { |
||||
this.special_id = options.id; |
||||
this.getInitData(); |
||||
}, |
||||
methods: { |
||||
getInitData() { |
||||
getInitData().then(({ data }) => { |
||||
const { isWechat, is_alipay, is_yue, now_money, wxpayH5 } = data; |
||||
Object.assign(this, { |
||||
isWechat, |
||||
url: isWechat ? "/pages/index/login" : "/pages/login/phone_check", |
||||
is_alipay: is_alipay == 1, |
||||
is_yue: is_yue == 1, |
||||
now_money: Number(now_money), |
||||
wxpayH5, |
||||
initDataLoading: true, |
||||
}); |
||||
}); |
||||
}, |
||||
apply() { |
||||
if (!this.applyForm.real_name) { |
||||
return this.$util.showMsg("请输入姓名"); |
||||
} |
||||
if (!this.applyForm.mobile) { |
||||
return this.$util.showMsg("请输入电话"); |
||||
} |
||||
if (!/^1[3456789]\d{9}$/.test(this.applyForm.mobile)) { |
||||
return this.$util.showMsg("电话错误"); |
||||
} |
||||
if (!this.applyForm.recommend_user) { |
||||
return this.$util.showMsg("请输入推荐人"); |
||||
} |
||||
if (!this.applyForm.address) { |
||||
return this.$util.showMsg("请输入详细地址"); |
||||
} |
||||
this.payDialogOpen = true; |
||||
// } else { |
||||
// this.submitApply(); |
||||
// } |
||||
}, |
||||
async submitApply() { |
||||
uni.showLoading({ mask: true }); |
||||
try { |
||||
const { data, msg } = await applycooperation({ |
||||
oc_id: this.special_id, |
||||
...this.applyForm |
||||
}); |
||||
uni.hideLoading(); |
||||
this.$util.showMsg('报名成功'); |
||||
uni.navigateBack(); |
||||
} catch (err) { |
||||
uni.hideLoading(); |
||||
this.$util.showMsg(err.msg); |
||||
} |
||||
}, |
||||
changeVal(opt) { |
||||
if (typeof opt !== "object") { |
||||
opt = {}; |
||||
} |
||||
console.log(opt); |
||||
var action = opt.action || ""; |
||||
var value = opt.value || ""; |
||||
this[action] && this[action](value); |
||||
}, |
||||
// 支付完成后回调事件 |
||||
pay_order: function (data) { |
||||
this.orderId = data.data.result.orderId || ""; |
||||
switch (data.data.status) { |
||||
case "PAY_ERROR": |
||||
case "ORDER_EXIST": |
||||
case "ORDER_ERROR": |
||||
this.extendOrder(data.msg); |
||||
break; |
||||
case "WECHAT_PAY": |
||||
this.wechatPay(data.data.result.jsConfig); |
||||
break; |
||||
case "WECHAT_H5_PAY": |
||||
this.payDialogOpen = false; |
||||
this.$util.wechatH5Pay(data.data.result.jsConfig, this); |
||||
break; |
||||
case "WECHAT_ROUTINE_PAY": |
||||
this.$util.wechatRoutinePay(data.data.result.jsConfig, this); |
||||
break; |
||||
case "SUCCESS": |
||||
this.successOrder(data.msg); |
||||
break; |
||||
case "ZHIFUBAO_PAY": |
||||
this.aliPay(data.data.result, "datadownload"); |
||||
break; |
||||
case 'TOUTIAO_PAY': |
||||
this.$util.toutiaoPay(data.data.result.jsConfig, this); |
||||
break; |
||||
case 'KUAISHOU_PAY': |
||||
this.$util.kuaishouPay(data.data.result.jsConfig, this); |
||||
break |
||||
} |
||||
}, |
||||
extendOrder(msg) { |
||||
if (typeof msg === "object" && msg.errMsg === "chooseWXPay:cancel") { |
||||
msg = "微信支付取消"; |
||||
} else { |
||||
msg = "支付失败"; |
||||
} |
||||
this.$util.showMsg(msg); |
||||
this.payDialogOpen = false; |
||||
if (this.orderId) { |
||||
delSpecialOrder(this.orderId); |
||||
} |
||||
}, |
||||
wechatPay(config) { |
||||
this.$util.weixinpay(config, this); |
||||
}, |
||||
successOrder(msg) { |
||||
this.$util.showMsg(msg ? msg : "支付成功"); |
||||
this.payDialogOpen = false; |
||||
this.submitApply(); |
||||
}, |
||||
aliPay(msn, type) { |
||||
this.$util.aliPay(msn, type, this); |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.cooperation-apply { |
||||
background: linear-gradient(to top, #f6f6f6 0%, #f6f6f6 60%, #F6F8FA 70%, #A1BFFD 100%); |
||||
} |
||||
.input-placeholder { |
||||
color: #999; |
||||
font-size: 24rpx; |
||||
} |
||||
.cooperation-form { |
||||
width: 690rpx; |
||||
background: #fff; |
||||
margin: 20rpx auto 0; |
||||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04); |
||||
border-radius: 10rpx; |
||||
padding: 25rpx 30rpx 60rpx 30rpx; |
||||
.form-item { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 26rpx; |
||||
padding: 0 10rpx; |
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
.item-label { |
||||
width: 140rpx; |
||||
display: flex; |
||||
color: #333; |
||||
font-size: 28rpx; |
||||
margin-right: 16rpx; |
||||
text { |
||||
flex: 1; |
||||
text-align-last: justify; |
||||
} |
||||
} |
||||
.item-content { |
||||
flex: 1; |
||||
input { |
||||
width: 100%; |
||||
height: 71rpx; |
||||
background: #f7f7f7; |
||||
border-radius: 10rpx; |
||||
font-size: 24rpx; |
||||
color: #333; |
||||
padding: 0 20rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
::v-deep .gold-box { |
||||
width: 690rpx; |
||||
height: 98rpx; |
||||
background: #fff; |
||||
margin: 20rpx auto 0; |
||||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04); |
||||
border-radius: 10rpx; |
||||
align-items: center; |
||||
padding-left: 36rpx; |
||||
color: #333; |
||||
font-size: 28rpx; |
||||
line-height: 98rpx; |
||||
.uni-radio-input { |
||||
width: 34rpx; |
||||
height: 34rpx; |
||||
} |
||||
.gold { |
||||
color: #FF9500; |
||||
} |
||||
} |
||||
.apply-btn { |
||||
width: 600rpx; |
||||
height: 88rpx; |
||||
background: linear-gradient(0deg, #0F74BB 0%, #3293FF 100%); |
||||
border-radius: 44rpx; |
||||
margin: 90rpx auto 0; |
||||
color: #fff; |
||||
font-size: 30rpx; |
||||
text-align: center; |
||||
line-height: 88rpx; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 641 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
Loading…
Reference in new issue