Skip to content

Y
ydl-group-course
Commit dadc5cc5 by huangzhi
Options

feat: 拼团成功页 首页 二维码扫描

parent e2ac3edf
Showing with 496 additions and 41 deletions
src/config.js
......@@ -6,11 +6,11 @@ let h2Prefix
let ydlH5Prefix
if (isDevelopment) {
hostPrefix = 'https://testnewm.ydl.com'
// hostPrefix = 'http://192.168.211.138'
apiPrefix = 'https://testapi.ydl.com'
// hostPrefix = 'https://newm-test.ydl.com' // 下云
// apiPrefix = 'https://api-test.ydl.com' // 下云
// hostPrefix = 'https://testnewm.ydl.com'
// // hostPrefix = 'http://192.168.211.138'
// apiPrefix = 'https://testapi.ydl.com'
hostPrefix = 'https://newm-test.ydl.com' // 下云
apiPrefix = 'https://api-test.ydl.com' // 下云
h2Prefix = 'https://h2.yidianling.com'
ydlH5Prefix = 'https://testh5.ydl.com'
} else {
......
src/pages.json
......@@ -4,27 +4,28 @@
},
"pages": [
{
"path": "pages/home/home",
"path": "pages/my/my",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": false
}
},
{
"path": "pages/home/expert-search",
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "搜索",
"navigationBarTitleText": "首页",
"enablePullDownRefresh": false
}
},
{
"path": "pages/my/my",
"path": "pages/home/expert-search",
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "搜索",
"enablePullDownRefresh": false
}
},
{
"path": "pages/web/web",
"style": {
......@@ -56,6 +57,12 @@
}
},
{
"path": "pages/groupSuccess/index",
"style": {
"enablePullDownRefresh": false
}
},
{
"path": "pages/pay/pay",
"style": {
"navigationBarTitleText": "支付",
......@@ -69,25 +76,6 @@
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#ffffff",
"backgroundTextStyle": "dark"
},
"tabBar": {
"color": "#76787C",
"selectedColor": "#55B5F3",
"iconWidth": "20px",
"spacing": "9px",
"list": [
{
"text": "首页",
"pagePath": "pages/home/home",
"iconPath": "/static/tab_home.png",
"selectedIconPath": "/static/tab_home_selected.png"
},
{
"text": "我的",
"pagePath": "pages/my/my",
"iconPath": "/static/tab_my.png",
"selectedIconPath": "/static/tab_my_selected.png"
}
]
}
}
src/pages/groupSuccess/PhotoFrame.vue 0 → 100644
<template>
<div
v-if="!isEmpty"
:style="{
'background-image': `url(${imgUrl})`,
}"
class="photo-frame"
>
<div class="des-txt">{{ describeTxt }}</div>
</div>
<div
v-else
class="photo-frame-empty"
>
<div class="frame-empty-icon">?</div>
</div>
</template>
<script>
export default {
name: 'PhotoFrame',
components: {},
props: {
describeTxt: {
type: String,
required: false,
default: '团长',
},
imgUrl: {
type: String,
required: false,
default: '//pic.ydlcdn.com/K4RBkeK5zx.jpg',
},
isEmpty: {
type: Boolean,
required: false,
default: false,
},
// 初始进度，从这个进度开始播放
currentProgress: {
type: Number,
default: 0,
},
},
data() {
return {
audioRef: null, // audio 标签
}
},
computed: {
// 播放进度
progressValue() {
return 1
},
},
mounted() {
console.log(this.imgUrl)
},
methods: {
/**
* 资源没有读取足够的数据时，展示一个loading效果
* readyState 为 4 时表示有足够的可用数据可以播放
*/
getAudioState() {},
},
}
</script>
<style lang="less" scoped>
@wrap-height: 56px;
@wrap-width: 56px;
.photo-frame {
height: @wrap-height;
width: @wrap-width;
background-size: cover;
position: relative;
border-radius: 50% 50%;
border: 1px solid #1698ff;
.des-txt {
width: 45px;
height: 18px;
bottom: -6px;
position: absolute;
background: #1698ff;
color: white;
text-align: center;
font-size: 12px;
line-height: 18px;
border-radius: 9px;
left: 50%;
transform: translateX(-50%);
}
}
.photo-frame-empty {
height: @wrap-height;
width: @wrap-width;
border-radius: 50% 50%;
border: 1px dashed #e7e7e7;
background: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
.frame-empty-icon {
color: #aaaaaa;
font-size: 21px;
}
}
</style>
src/pages/groupSuccess/index.vue 0 → 100644
<template>
<div class="pay-group-after-success">
<div class="success-text">支付成功！邀请好友参加拼团</div>
<div class="content-modal">
<div class="modal-tile">还差2人成团</div>
<div class="modal-photo">
<PhotoFrame class="photo-cell"></PhotoFrame>
<PhotoFrame class="photo-cell"></PhotoFrame>
<PhotoFrame
class="photo-cell"
:is-empty="true"
></PhotoFrame>
</div>
<div class="modal-time">
<span>
<span class="modal-time-txt-left">剩余</span>
<span class="modal-time-num">47</span>
<span>:</span>
<span class="modal-time-num">47</span>
<span>:</span>
<span class="modal-time-num">47</span>
<span class="modal-time-txt-right">剩余</span>
</span>
</div>
<!-- <div class="modal-btn-wrap">
<div class="modal-btn">分享好友或群</div>
<div class="modal-btn">分享到朋友圈</div>
</div> -->
<div class="modal-big-btn modal-btn">邀请好友成团</div>
<div class="modal-card">
<div class="modal-card-left">
<span
class="card-img"
:style="{
'background-image': 'url(https://pic.ydlcdn.com/K4RBkeK5zx.jpg)',
'background-size': 'cover',
}"
></span>
<span class="card-text">关注孩子心理健康，18天带领孩子走出厌学</span>
</div>
<img
class="card-icon"
src="//static.ydlcdn.com/mini/group/right.png"
alt=""
/>
</div>
<div class="modal-txt-des">
<div class="txt-des-title">拼团规则</div>
<div class="des-img-demo">
<div class="img-demo-cell">
<img
class="cell-img-wrap-icon"
src="//static.ydlcdn.com/mini/group/friend.png"
alt=""
/>
<div class="cell-txt-black">开团/参团</div>
<div class="cell-txt-grey">拼团享低价</div>
</div>
<div class="demo-icon-cell">
<div class="icon-cell-wrap">
<img
class="icon-cell-wrap-img"
src="//static.ydlcdn.com/mini/group/stepright.png"
alt=""
/>
</div>
</div>
<div class="img-demo-cell">
<img
class="cell-img-wrap-icon"
src="//static.ydlcdn.com/mini/group/friend.png"
alt=""
/>
<div class="cell-txt-black">开团/参团</div>
<div class="cell-txt-grey">拼团享低价</div>
</div>
</div>
<div class="des-txt-wrap">
<p class="des-txt-row">
1.「拼团」指短发短发发了大发的浪费啊酸辣粉addle发达法律大发发啦的发的福利阿道夫
</p>
<p class="des-txt-row">
2.「拼团」指短发短发发了大发的浪费啊酸辣粉addle发达法律大发发啦的发的福利阿道夫
</p>
<p class="des-txt-row">
3.「拼团」指短发短发发了大发的浪费啊酸辣粉addle发达法律大发发啦的发的福利阿道夫，啊酸辣粉addle啊酸辣粉addle发达法律大发发啦的发的福利阿道夫
</p>
</div>
</div>
</div>
</div>
</template>
<script>
import PhotoFrame from './PhotoFrame'
export default {
name: 'GroupPaySuccess',
components: {
PhotoFrame,
},
layout: 'barHeight',
data() {
return {
isInstallWeChat: false, // 是否安装微信
executeAppFun: null, // 需要执行的app方法
}
},
head: {
title: '支付成功-壹点灵',
},
methods: {},
}
</script>
<style lang="less" scoped>
.pay-group-after-success {
background: gray;
.success-text {
font-size: 24px;
/* font-family: YSBiaoTiHei; */
text-align: center;
margin: 10px;
font-weight: 500;
}
.content-modal {
margin: 0px 16px;
padding: 0 16px;
background: white;
border-radius: 12px 12px 0 0;
.modal-tile {
text-align: center;
font-size: 18px;
font-weight: 500;
/* padding: 0 10px; */
/* margin: 10px 0; */
padding: 20px 0;
}
.modal-photo {
display: flex;
justify-content: space-around;
}
.modal-time {
text-align: center;
margin-top: 29px;
margin-bottom: 28px;
font-size: 14px;
line-height: 28px;
height: 28px;
.modal-time-txt-left {
margin-right: 8px;
}
.modal-time-txt-right {
margin-left: 8px;
}
.modal-time-colon {
color: #ff969696;
}
.modal-time-num {
height: 28px;
width: 28px;
display: inline-block;
border-radius: 8px;
background: #ffefed;
color: #ff644c;
}
}
.modal-btn-wrap {
display: flex;
justify-content: space-between;
.modal-btn {
height: 40px;
width: 144px;
border: 1px solid #ffb7ac;
border-radius: 8px;
text-align: center;
line-height: 40px;
font-size: 14px;
font-weight: 500;
color: #ff8978;
margin-bottom: 29px;
}
}
.modal-big-btn {
height: 40px;
border-radius: 8px;
/* border: 1px solid; */
background: #ff644c;
color: white;
line-height: 40px;
text-align: center;
font-weight: 500;
margin-bottom: 29px;
}
.modal-card {
display: flex;
align-items: center;
justify-content: space-between;
.modal-card-left {
display: flex;
flex: 1;
.card-img {
width: 62px;
height: 38px;
}
.card-text {
flex: 1;
margin-left: 8px;
display: inline-block;
color: #6c6c6c;
display: flex;
align-items: center;
}
}
.card-icon {
width: 16px;
height: 16px;
}
}
.txt-des-title {
font-size: 14px;
font-weight: 500;
margin-top: 58px;
}
.des-img-demo {
margin-top: 13px;
display: flex;
.img-demo-cell {
display: inline-block;
width: 60px;
font-size: 12px;
text-align: center;
height: 84px;
}
.cell-img-wrap-icon {
width: 40px;
height: 40px;
margin-bottom: 5px;
}
.cell-txt-black {
line-height: 17px;
height: 17px;
margin-bottom: 1px;
}
.cell-txt-grey {
line-height: 17px;
height: 17px;
color: #a3a3a3;
}
.demo-icon-cell {
width: 60px;
height: 84px;
display: flex;
justify-content: center;
.icon-cell-wrap {
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
.icon-cell-wrap-img {
height: 8px;
}
}
}
}
.des-txt-wrap {
padding-bottom: 21px;
.des-txt-row {
margin-top: 12px;
}
}
}
}
</style>
src/pages/home/home.vue
......@@ -57,7 +57,7 @@
<text
class="item-footer-btn"
type="default"
@click="handleCourseItemClick($event, course)"
@click.stop="handleCourseItemClick(course)"
>
查看商品
</text>
......@@ -126,10 +126,14 @@ export default {
navTo(`my/orderDetail/${id}`)
},
// 课程卡片点击,跳转课程详情 todo
handleCourseItemClick(e, { id = 111 }) {
e.stopPropagation()
navTo(`detail/${id}`)
handleCourseItemClick({ id = 111 }) {
// navTo(`detail/${id}`)
navTo(`/h5-course/pay/groupSuccess?isFromMin=weapp`)
// uni.navigateTo({
// url: `/pages/groupSuccess/index`,
// })
},
// 刷新列表，提供给父组件搜索过滤调用
refresh() {
this.initFinish = false
......@@ -256,12 +260,16 @@ export default {
display: flex;
flex-direction: row-reverse;
margin-top: 17px;
button {
.item-footer-btn {
display: inline-block;
height: 30px;
width: 68px;
padding: 0;
display: inline-block;
text-align: center;
line-height: 30px;
border: 1px solid #777777;
border-radius: 5px;
font-size: 13px;
box-sizing: border-box;
}
}
}
......
src/pages/login/login.vue
......@@ -11,7 +11,7 @@
class="logo"
src="https://static.ydlcdn.com/weixin/image/ydl_consult_logo.png"
></image>
<text class="title">壹点倾诉</text>
<text class="title">壹点灵课程福利</text>
<view class="protocol">
<image
:src="
......
src/pages/my/my.vue
......@@ -81,6 +81,14 @@ export default {
return {
menus: [
{
icon: '/static/icon_order.png',
label: '我的订单',
callback: () => {
this.handleSendMenuTrackData('我的订单')
this.navigateToOrder()
},
},
{
icon: '/static/icon_custom_service.png',
label: '联系客服',
callback: () => {
......@@ -204,8 +212,10 @@ export default {
this.handleLogin()
return
}
const url = `${hostPrefix}/h5-course/my/components/Buylist`
uni.navigateTo({
url: '/pages/order/order',
url: `/pages/web/web?title=已购订单&loadUrl=${encodeURIComponent(url)}`,
})
},
},
......
src/pages/web/web.vue
......@@ -2,10 +2,14 @@
<web-view
v-if="!!loadUrl"
:src="loadUrl"
@onPostMessage="handlePostMessage"
@message="handleMessage"
></web-view>
</template>
<script>
import { hostPrefix } from '@/config.js'
export default {
name: 'WebPage',
data() {
......@@ -24,6 +28,14 @@ export default {
title: this.options.title,
})
}
// 有scene，说明是扫描二维码进入
if (options.scene) {
uni.showLoading({
title: '加载中',
})
this.getParamsByScene(options.scene)
}
},
// 移除登录成功事件
onUnload() {
......@@ -61,6 +73,55 @@ export default {
console.log(this.loadUrl)
}
},
// 二维码识别进入小程序携带参数 scene 需要通过接口解析具体数据
async getParamsByScene(scene) {
// 扫码进入页面时需要判断是否存有当前用户的openId，若不存在则等待接口响应
if (!this.$store.state.user.openId) {
const timer = setTimeout(() => {
this.getParamsByScene(scene)
clearTimeout(timer)
}, 300)
return
}
const appId = uni.getAccountInfoSync().miniProgram.appId
try {
const res = await this.$request
.get(`mini/wx/business/${appId}/qrCodeParam?scene=${scene}`)
.finally(() => (this.loading = false))
if (res) {
this.options.doctorId = res.doctorId
// https://testnewm.ydl.com/h5-course/detail/7529
const url = `${hostPrefix}/h5-course/detail/${res.doctorId}`
const uid = this.$store.state.user.uid || ''
const accessToken = this.$store.state.user.accessToken || ''
const appId = uni.getAccountInfoSync().miniProgram.appId
const openId = this.$store.state.user.openId
const query = `uid=${uid}&accessToken=${accessToken}&isFromMin=weapp&appId=${appId}&openId=${openId}`
this.loadUrl = `${url}?${query}`
console.log(res, '二维码参数解析')
uni.hideLoading()
} else {
uni.showToast({
title: '二维码解析失败',
icon: 'error',
})
uni.hideLoading()
}
} catch (err) {
console.log(err, '<<<<<请求错误')
}
},
// webview向外部发送消息
handlePostMessage: function (data) {
console.log('接收到消息：' + JSON.stringify(data.detail))
},
// webview向外部发送消息
handleMessage: function (data) {
console.log('接收到消息22 Message：' + JSON.stringify(data.detail))
},
// 更新 url 中的参数
changeURLArg(url, arg, value) {
const pattern = arg + '=([^&]*)'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment