Skip to content

Y
ydl-group-course
Commit 5bcd54a6 by huangzhi
Options

feat: 删除无用文件

parent 065ea30c
Showing with 21 additions and 1514 deletions
src/App.vue
<script>
import { setTrackData } from '@/utils/util'
// import { setTrackData } from '@/utils/util'
export default {
onLaunch: function (e) {
......@@ -8,27 +8,26 @@ export default {
if (!this.$store.state.user.openId) {
this.$store.dispatch('user/getOpenId')
}
// 小程序launch埋点
const part = {
'pages/home/home': 'listener_list_page',
'pages/confide/confide': `listener_detail_${e.query.listenerId}`,
}
if (part[e.path]) {
setTrackData({
events: [
{
event_id: 'app_activation',
event_custom_properties: {
part: part[e.path],
position: '',
element: '',
traffic_source_type: e.query.fromOpenId ? 3 : '', // 3代表小程序分享流量，空代表自然流量
traffic_source: e.query.fromOpenId || '',
},
},
],
})
}
// // 小程序launch埋点
// const part = {
// 'pages/home/home': 'listener_list_page',
// }
// if (part[e.path]) {
// setTrackData({
// events: [
// {
// event_id: 'app_activation',
// event_custom_properties: {
// part: part[e.path],
// position: '',
// element: '',
// traffic_source_type: e.query.fromOpenId ? 3 : '', // 3代表小程序分享流量，空代表自然流量
// traffic_source: e.query.fromOpenId || '',
// },
// },
// ],
// })
// }
},
onShow: function () {
console.log('App Show')
......
src/components/comment-item.vue deleted 100644 → 0
<template>
<view class="comment-item">
<view class="top-box">
<image
class="head-image"
:src="comment.head || 'https://static.ydlcdn.com/m/images/global/default.png'"
/>
<view class="top-right-box">
<view class="name-box">
<view class="name">
<text>{{ nickName }}</text>
<image
v-if="comment.sequence > 0"
mode="widthFix"
class="great-image"
src="//static.ydlcdn.com/m/images/zx/experts/detail/label_quality_cmt.png"
/>
</view>
<view class="create-time">
{{ $dayjs(comment.createTime).format('YYYY-MM-DD') }}
</view>
</view>
<view class="theme-box">
<text class="label">评价：</text>
<text class="value">{{ commentResultText }}</text>
<text class="label">咨询主题：</text>
<text class="value">{{ comment.categoryName }}</text>
</view>
</view>
</view>
<view class="comment-content">
<toggle-fold-text
:line="5"
:line-height="22"
:text="comment.content || ''"
>
content
</toggle-fold-text>
</view>
<view
v-if="comment.tags"
class="tag-box"
>
<text
v-for="(tag, index) in comment.tags.split(',')"
:key="index"
class="tag-item"
>
{{ tag }}
</text>
</view>
<view
v-if="comment.expertReply === 2"
class="reply-box"
>
<toggle-fold-text
:line="5"
:line-height="22"
:text="`${comment.replyName} 回复: ${comment.replycontent}`"
>
content
</toggle-fold-text>
</view>
</view>
</template>
<script>
import { ToggleFoldText } from '@/components/toggle-fold-text.vue'
export default {
name: 'CommentItem',
components: {
ToggleFoldText,
},
props: {
comment: {
type: Object,
required: true,
},
},
data() {
return {}
},
computed: {
nickName() {
if (this.comment.nickName === '匿名用户') return this.comment.nickName
return `${this.comment.nickName.slice(0, 1)}**`
},
commentResultText() {
const { type, pleased } = this.comment
if (type === 2) {
return pleased === 1 ? '满意' : '不满意'
} else if (type === 1) {
return pleased === 1 || pleased === 2 || pleased === 3 ? '满意' : '不满意'
} else {
return ''
}
},
},
mounted() {},
methods: {},
}
</script>
<style lang="less" scoped>
.comment-item {
padding: 20px 0;
.top-box {
display: flex;
align-items: center;
.head-image {
width: 36px;
height: 36px;
border-radius: 50%;
margin-right: 8px;
}
.top-right-box {
flex: 1;
.name-box {
display: flex;
align-items: center;
justify-content: space-between;
.name {
font-size: 13px;
line-height: 20px;
margin-right: 8px;
color: #9d9ea7;
display: flex;
align-items: center;
.great-image {
width: 70px;
margin-left: 4px;
}
}
.create-time {
font-size: 12px;
color: #9d9ea7;
opacity: 0.5;
}
}
.theme-box {
display: flex;
font-size: 13px;
line-height: 20px;
.label {
color: #9d9ea7;
}
.value {
color: #1c1f28;
+ .label {
margin-left: 24px;
}
}
}
}
}
.comment-content {
margin-top: 7px;
/deep/ .toggle-fold-text {
font-size: 14px;
line-height: 22px;
color: #1c1f28;
}
}
.tag-box {
margin-top: 5px;
.tag-item {
color: #999;
font-size: 12px;
font-weight: 400;
margin: 4px 16px 0 0;
}
}
.reply-box {
margin-top: 14px;
background: #f6f7f9;
padding: 10px 14px;
border-radius: 4px;
color: #1c1f28;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
+ .comment-item {
border-top: 1px solid #efeff1;
}
}
</style>
src/components/expert-item.vue deleted 100644 → 0
<template>
<view class="consult">
<view class="consult-item">
<view class="head-box">
<image
class="head-cover"
mode="aspectFill"
:src="item.confidedIcon"
/>
<view class="p-line-status">
<!-- 1 在线 2离线 -->
{{ lineStatus[item.confideLine] }}
</view>
<!-- 播放按钮 -->
<view
v-if="item.confideVoice"
class="player-btn"
@click.stop="playAudio(item)"
>
<img
class="player-icon"
:src="
isPlayer
? 'https://static.ydlcdn.com/mini/mini_confide/confide_icon_pause.png'
: 'https://static.ydlcdn.com/mini/mini_confide/confide_icon_music.png'
"
alt=""
/>
</view>
</view>
<view class="item-con">
<view class="h2">
<view class="item-con-title">
<text class="dib vm fs32 c-24 mr10 b">{{ item.confidedName }}</text>
<!-- 是否实习 -->
<img
v-if="item.abilityLevel === 1"
class="internship-icon"
src="https://static.ydlcdn.com/m/images/zx/experts/detail/internship.png"
alt=""
/>
</view>
</view>
<view class="p-comment">
<view class="comment">
<text class="num">{{ item.confideConnection }}</text>
<text class="c">接通率</text>
</view>
<view class="comment">
<text class="num">{{ item.listenOrderNum }}</text>
<text class="c">服务人次</text>
</view>
<view class="comment">
<text class="num">{{ item.confidePraiseScore }}</text>
<text class="c">评分</text>
</view>
</view>
<view class="tags-box dix alc">
<!-- {{ JSON.stringify(item.feature_tags) }} -->
<view
v-if="item.confidedTag && item.confidedTag.length > 0"
class="tags"
>
{{ item.confidedTag.join(' | ') }}
</view>
<view
v-if="item.confideFee"
class="way"
>
<view class="price">
<text class="num">{{ item.confideFee }}</text>
<text class="unit">元</text>
<text class="time">/25分钟</text>
</view>
</view>
</view>
<view
class="chat"
:style="{ background: chat_status_color[item.chat_status] }"
>
<text
v-if="item.confideLine === 1"
class="chat-btn on-line"
></text>
<text
v-else-if="item.confideLine === 2"
class="chat-btn off-line"
>
喊{{ item.confideSex === 1 ? '他' : '她' }}上线
</text>
<text
v-else-if="item.confideLine === 3"
class="chat-btn on-call"
>
通话中
</text>
</view>
</view>
</view>
<!-- 倾诉语 -->
<view
v-if="item.confideContent"
class="desc"
>
{{ item.confideContent }}
</view>
</view>
</template>
<script>
export default {
props: {
item: {
type: Object,
default() {
return {}
},
},
currentDoctor: {
type: Number,
default: -1,
},
playStatus: {
type: Boolean,
default: false,
},
},
data() {
return {
lineStatus: {
1: '在线',
2: '离线',
3: '通话中',
},
isPlayer: false,
}
},
watch: {
// 播放音频倾诉师和当前倾诉师相同时，更新播放状态
currentDoctor(v) {
if (v === this.item.confidedId) {
this.isPlayer = this.playStatus
} else {
this.isPlayer = false
}
},
// 播放状态更新时若播放音频倾诉师和当前倾诉师相则更新
playStatus(v) {
if (this.currentDoctor === this.item.confidedId) {
this.isPlayer = this.playStatus
} else {
this.isPlayer = false
}
},
},
methods: {
playAudio(item) {
this.$emit('player', {
...item,
isPlayer: this.isPlayer,
})
this.isPlayer = !this.isPlayer
},
},
}
</script>
<style lang="less" scoped>
.consult {
padding: 20px 0;
border-bottom: 0.5px solid #efeff0;
.consult-item {
display: flex;
position: relative;
.head {
&-cover {
width: 90px;
height: 90px;
border-radius: 8px;
display: block;
}
&-box {
position: relative;
width: 90px;
height: 90px;
flex-shrink: 0;
.p-line-status {
position: absolute;
top: 0;
left: 0;
opacity: 0.95;
min-width: 40px;
background-color: rgba(0, 0, 0, 0.5);
font-size: 11px;
text-align: center;
color: white;
border-radius: 8px 0 8px 0;
line-height: 18px;
font-weight: 300;
}
.player-btn {
position: absolute;
bottom: 6px;
right: 6px;
display: flex;
align-items: center;
justify-content: center;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#ff62a5), to(#ff8960));
width: 24px;
height: 24px;
border-radius: 100%;
}
.player-icon {
width: 16px;
height: 16px;
vertical-align: middle;
}
}
}
.item-con {
position: relative;
margin-left: 12px;
flex-grow: 1;
.sex-icon {
display: inline-block;
width: 13px;
height: 13px;
vertical-align: middle;
}
.internship-icon {
display: inline-block;
width: 28px;
height: 17px;
vertical-align: middle;
}
.h2 {
display: flex;
align-items: center;
margin-bottom: 4px;
display: flex;
justify-content: space-between;
}
.lab {
border-radius: 2px;
background-color: #f6f6f7;
padding: 0 4px;
font-size: 10px;
color: #62636f;
font-weight: 300;
}
.place {
display: flex;
align-items: center;
image {
width: 12px;
height: 12px;
}
.area1 {
color: #62636f;
font-size: 11px;
font-weight: 300;
}
}
.p-personal {
margin-bottom: 4px;
line-height: 18px;
color: rgba(130, 131, 140, 100);
font-size: 13px;
overflow: hidden;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 2;
word-break: break-all;
}
.p-comment {
display: flex;
.comment {
color: #1c1f28;
margin-right: 16px;
text-align: center;
.num {
font-size: 14px;
font-weight: 700;
display: block;
margin-bottom: 2px;
}
.c {
margin-left: 2px;
color: #82838c;
font-size: 11px;
}
}
}
}
.tags-box {
margin-top: 8px;
justify-content: space-between;
.tags {
height: 18px;
border-radius: 4px;
line-height: 17px;
color: #9d9ea9;
font-size: 11px;
white-space: nowrap;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.way {
display: flex;
align-items: center;
position: relative;
.price {
color: #82838c;
margin-right: 12px;
font-size: 12px;
white-space: nowrap;
.num {
font-size: 18px;
color: #ff5b06;
}
.unit {
color: #ff5b06;
margin: 0 1px;
}
}
}
.chat {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
.chat-btn {
display: block;
width: 40px;
height: 40px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.on-line {
background: #32d296 url('https://static.ydlcdn.com/mini/mini_confide/confide_phone.png')
no-repeat center;
background-size: 24px 24px;
}
.off-line {
font-size: 11px;
line-height: 15px;
padding: 4px;
border: 0.5px solid #efeff0;
}
.on-call {
font-size: 12px;
line-height: 20px;
color: #ffffff;
background: #ff8c00;
}
}
}
.desc {
margin: 16px auto 0 auto;
font-size: 14px;
line-height: 18px;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #999;
}
}
</style>
src/pages.json
......@@ -12,21 +12,6 @@
}
},
{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": false
}
},
{
"path": "pages/home/expert-search",
"style": {
"navigationBarTitleText": "搜索",
"enablePullDownRefresh": false
}
},
{
"path": "pages/web/web",
"style": {
"enablePullDownRefresh": false
......@@ -47,28 +32,6 @@
}
},
{
"path": "pages/order/order",
"style": {
"navigationBarTitleText": "我的订单",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50
}
},
{
"path": "pages/confide/confide",
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": false
}
},
{
"path": "pages/groupSuccess/index",
"style": {
"enablePullDownRefresh": false
}
},
{
"path": "pages/pay/pay",
"style": {
"navigationBarTitleText": "支付",
......
src/pages/home/Empty.vue deleted 100644 → 0
<template>
<div class="empty">
<img src="//static.ydlcdn.com/m/images/m/course/rectangle.svg"/>
<p>{{text || '暂无数据'}}</p>
</div>
</template>
<script>
export default {
name: 'Empty',
props: ['text'],
}
</script>
<style lang="less" scoped>
.empty {
text-align: center;
p {
margin-top: 12px;
color: #999;
font-size: 13px;
text-align: center;
}
}
</style>
\ No newline at end of file
src/pages/home/expert-search.vue deleted 100644 → 0
<template>
<view class="box-c">
<!-- 搜索框 -->
<view class="search">
<view class="search-bd">
<image
mode="aspectFill"
class="icon-glass"
src="https://static.ydlcdn.com/weixin/image/icon_search.png"
/>
<input
v-model="searchWord"
:contenteditable="true"
placeholder-style="color:#adb4be"
type="text"
confirm-type="search"
placeholder="请输入倾诉师姓名"
focus
@confirm="handleSearch"
@input="handleChange"
/>
<view
v-if="searchWord"
class="clear"
@tap="handleClear"
>
<image
src="https://static.ydlcdn.com/weixin/image/close.png"
mode="aspectFill"
/>
</view>
</view>
<view
class="search-ft"
@tap="cancelSearch"
>
<text class="btn">取消</text>
</view>
</view>
<!-- 搜索结果 -->
<view
v-if="result.length"
class="result"
>
<view
v-for="item in result"
:key="item.id"
:data-item="item.doctor_name"
class="item"
@tap="handleSelect"
>
<image
mode="aspectFill"
class="icon-glass"
src="https://static.ydlcdn.com/weixin/image/icon_search.png"
/>
<rich-text
class="text"
:nodes="item.keyword"
></rich-text>
</view>
</view>
<!-- 搜索历史&热门搜索 -->
<div
v-else
class="recommend"
>
<div
v-if="searchHistory.length > 0"
class="history"
>
<div class="recommend-title">
<span>搜索历史</span>
<image
class="icon-delete"
src="https://static.ydlcdn.com/hlwyyCt/images/address/icon_del.png"
mode="aspectFill"
@click="deleteSearchHistory"
/>
</div>
<div class="recommend-list">
<view
v-for="item in searchHistory.slice(0, 9)"
:key="item"
:data-item="item"
class="item"
@tap="handleSelect"
>
{{ item }}
</view>
</div>
</div>
</div>
</view>
</template>
<script>
/* eslint-disable no-undef */
export default {
data() {
return {
searchWord: '',
searchHistory: [], // 搜索历史
hotSearch: [], // 热门搜索
result: [],
}
},
onLoad(options) {
// 做回显
if (options.searchWord) {
this.searchWord = options.searchWord
}
const searchHistory = uni.getStorageSync('expertSearchHistory')
if (searchHistory && searchHistory !== 'undefined') {
this.searchHistory = searchHistory
}
},
methods: {
// 获取关联词
getkeywordList() {
const keyword = this.searchWord
this.$request
.post('smart-rank/v1/search', {
filter: {
__keywords: keyword,
},
limit: 20,
options: {
search_scene_id: 'listener_suggest_search',
},
count: true,
})
.then(res => {
const { objects = [] } = res
this.result = objects.map(n => {
return {
...n,
keyword: n.doctor_name.replace(
new RegExp(keyword, 'gi'),
`<em class="keyword">${keyword}</em>`,
),
}
})
})
},
// 输入的搜索内容跳转结果页
jumpSearch(search) {
uni.reLaunch({
url: `/pages/home/home?searchWord=${search}`,
})
// 保存选择的搜索结果，用于展示搜索历史
let searchHistory = uni.getStorageSync('expertSearchHistory')
const searchWord = search
// 若搜索内容为空，不记录
if (!searchWord) {
return
}
if (searchHistory) {
const search = searchHistory.find(w => w === searchWord)
if (!search) {
searchHistory.unshift(searchWord)
}
} else {
searchHistory = []
searchHistory.unshift(searchWord)
}
uni.setStorageSync('expertSearchHistory', searchHistory)
},
// 删除搜索历史
deleteSearchHistory() {
uni.removeStorageSync('expertSearchHistory')
this.searchHistory = []
},
// 输入，防抖
handleChange(e) {
const searchWord = e.detail.value.trim()
this.searchWord = searchWord
this.timer && clearTimeout(this.timer)
this.timer = setTimeout(() => {
if (searchWord === '') {
this.result = []
} else {
this.getkeywordList()
}
}, 100)
},
// 清空
handleClear() {
this.searchWord = ''
this.result = []
},
// 取消搜索
cancelSearch() {
uni.navigateBack()
},
// 搜索
handleSearch() {
const val = this.searchWord.trim()
this.jumpSearch(val)
},
// 联想词点击
handleSelect(e) {
const item = e.currentTarget.dataset.item
this.jumpSearch(item)
},
},
}
</script>
<style lang="less" scoped>
.search {
display: flex;
align-items: center;
padding-top: 28rpx;
.search-bd {
display: flex;
align-items: center;
flex: 1;
background: #f5f6f9;
padding: 14rpx 30rpx;
padding-right: 0;
border-radius: 38rpx;
input {
margin-left: 16rpx;
width: 100%;
font-size: 28rpx;
caret-color: #1da1f2;
input::first-line {
color: #1da1f2;
}
}
.icon-glass {
min-width: 32rpx;
max-width: 32rpx;
height: 32rpx;
}
.clear {
display: flex;
align-items: center;
padding-left: 16rpx;
padding-right: 30rpx;
image {
width: 32rpx;
height: 32rpx;
}
}
}
.search-ft {
height: 72rpx;
line-height: 72rpx;
margin-left: 16rpx;
.btn {
font-size: 30rpx;
}
}
}
.result {
margin-top: 20rpx;
.item {
display: flex;
align-items: center;
padding-top: 24rpx;
padding-bottom: 24rpx;
font-size: 28rpx;
.icon-glass {
min-width: 24rpx;
max-width: 24rpx;
height: 24rpx;
}
.text {
padding-left: 8rpx;
max-width: 98%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
<style lang="less">
.result .item .keyword {
color: #1da1f2;
font-style: normal;
}
.recommend {
padding-top: 60rpx;
.history {
padding-bottom: 20rpx;
}
&-title {
font-size: 28rpx;
line-height: 40rpx;
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10rpx;
margin-bottom: 20rpx;
.icon-delete {
width: 32rpx;
height: 34rpx;
opacity: 0.6;
}
}
&-list {
display: flex;
flex-wrap: wrap;
max-height: 170rpx;
overflow: hidden;
.item {
box-sizing: border-box;
height: 68rpx;
padding: 0 20rpx;
display: inline-block;
line-height: 68rpx;
text-align: center;
color: #242424;
margin: 0 10rpx 20rpx;
font-size: 28rpx;
background: #f7f7f7;
border-radius: 8rpx;
border: 1rpx solid #f7f7f7;
max-width: 270rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
&.hot-list {
max-height: 250rpx;
}
}
}
</style>
src/pages/home/home.vue deleted 100644 → 0
<template>
<view
class="buy-list"
@scroll="handleScroll($event)"
>
<template v-if="initFinish">
<template v-if="courseList.length > 0">
<view
v-for="(course, index) in courseList"
:key="index"
class="item-wrap"
@click="onPageToOrderDetail(course)"
>
<view class="item-header">
<text class="item-header-left">
<text class="item-header-title">订单号：</text>
<text class="item-header-num">{{ course.orderId }}</text>
<img
class="item-header-img"
src="//static.ydlcdn.com/m/images/m/course/ico_kcml_lock@3x.png"
/>
</text>
<text
:class="{
'item-header-right': true,
'item-header-right-blue': index === 0,
}"
>
拼团中
</text>
</view>
<view class="item-content">
<view class="item-content-img">
<img src="//pic.ydlcdn.com/K4RBkeK5zx.jpg" />
</view>
<view class="item-content-info">
<view class="item-content-info-row-first">
<text class="row-first-title">12天重塑你的安全感，让恋爱不再患得患失</text>
<text class="row-first-money">¥299</text>
</view>
<view class="item-content-info-row-second">
<text class="row-second-time">
{{
course.paymentTime
? dayjs(course.paymentTime).format('YYYY-MM-DD HH:mm:ss')
: ''
}}
</text>
<text class="row-second-money">
实付款：
<text class="row-second-money-num">¥199</text>
</text>
</view>
</view>
</view>
<view class="item-footer">
<text
class="item-footer-btn"
type="default"
@click.stop="handleCourseItemClick(course)"
>
查看商品
</text>
</view>
</view>
</template>
<empty v-else></empty>
</template>
</view>
</template>
<script>
import Empty from './Empty.vue'
import { throttle } from 'lodash'
import dayjs from 'dayjs'
import { hostPrefix } from '@/config.js'
// import { Toast } from 'vant'
// 页面跳转
const navTo = url => {
const newUrl = `${hostPrefix}/h5-course/${url}`
uni.navigateTo({
url: `/pages/web/web?loadUrl=${encodeURIComponent(newUrl)}`,
})
}
export default {
name: 'BuyList',
components: {
Empty,
},
props: {
keywords: {
type: String,
default: '',
},
// 是否展示学习进度
showProgress: {
type: Boolean,
default: false,
},
},
data() {
return {
dayjs,
pageNo: 1,
pageSize: 10,
moreStatus: 'nomore',
courseList: [{}, {}],
// todo 应该是 false
initFinish: true,
}
},
watch: {
keywords: {
handler() {
// todo
// this.refresh();
},
immediate: true,
},
},
methods: {
// 查看订单详情 todo
onPageToOrderDetail({ id = 111 }) {
navTo(`my/orderDetail/${id}`)
},
// 课程卡片点击,跳转课程详情 todo
handleCourseItemClick({ id = 111 }) {
// navTo(`detail/${id}`)
navTo(`/h5-course/pay/groupSuccess?isFromMin=weapp`)
// uni.navigateTo({
// url: `/pages/groupSuccess/index`,
// })
},
// 刷新列表，提供给父组件搜索过滤调用
refresh() {
this.initFinish = false
this.moreStatus = 'nomore'
this.courseList = []
this.pageNo = 1
this.getCourseList()
},
// 获取课程列表
async getCourseList() {
try {
// todo
// this.moreStatus === 'loading';
// Toast.loading('加载中...');
// const {total, list} = await this.$http.post('/course/v1/orders/pay/query', {
// pageNo: this.pageNo,
// pageSize: this.pageSize,
// title: this.keywords || '',
// });
// Toast.clear();
// this.courseList = [...this.courseList, ...list];
// this.courseList.map(item => {
// item.salesPrice = item.money;
// item.originPrice = 0;
// })
// this.initFinish = true;
// this.moreStatus = this.courseList.length < total ? "more" : "nomore";
} catch (e) {
console.log(e)
}
},
// 上拉加载下一页
handleScroll: throttle(
function (e) {
const { scrollHeight, offsetHeight, scrollTop } = e.target
const height = scrollHeight - offsetHeight - scrollTop
const scrollThreshold = 100
if (height <= scrollThreshold) {
if (this.moreStatus === 'more') {
this.pageNo = this.pageNo + 1
this.getCourseList()
}
}
},
300,
{ leading: true },
),
},
}
</script>
<style lang="less" scoped>
.buy-list {
background: #f8f8f8;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: none;
.item-wrap {
background: #fff;
// border-bottom: 10px solid rgb(249, 249, 249);
margin: 0 10px;
margin-top: 10px;
border-radius: 12px;
padding: 12px 12px 16px 12px;
.item-header {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgb(249, 249, 249);
padding-bottom: 8px;
.item-header-img {
height: 15px;
vertical-align: middle;
}
.item-header-right-blue {
color: #1698ff;
}
}
.item-content {
display: flex;
justify-content: space-between;
/* height: 65px; */
margin-top: 8px;
.item-content-img {
img {
height: 57px;
width: 46px;
}
}
.item-content-info {
flex: 1;
padding-left: 8px;
.item-content-info-row-first {
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 500;
.row-first-title {
max-width: 175px;
}
}
.item-content-info-row-second {
display: flex;
justify-content: space-between;
/* line-height: 100%; */
align-items: center;
margin-top: 1px;
.row-second-time {
font-size: 12px;
color: #999999;
.row-second-money {
.row-second-money-num {
font-weight: 500;
}
}
}
}
}
}
.item-footer {
display: flex;
flex-direction: row-reverse;
margin-top: 17px;
.item-footer-btn {
display: inline-block;
height: 30px;
width: 68px;
display: inline-block;
text-align: center;
line-height: 30px;
border: 1px solid #777777;
border-radius: 5px;
box-sizing: border-box;
}
}
}
}
</style>
src/pages/order/order.vue deleted 100644 → 0
<template>
<view class="order-page">
<u-empty
v-if="initStatus && orderList.length === 0"
mode="list"
icon="https://static.ydlcdn.com/mini/mini_confide/list_empty.png"
text="暂无数据"
margin-top="40px"
text-color="rgb(96, 98, 102)"
></u-empty>
<view
v-else
class="content-box"
>
<order-item
v-for="item in orderList"
:key="item.id"
:order="item"
@cancel="handleCancel"
@pay="handlePay"
></order-item>
<view class="loadmore-box">
<u-loadmore :status="loadingStatus" />
</view>
</view>
<u-modal
:show="cancelVisible"
title="取消倾诉订单"
confirm-text="确定取消"
cancel-text="再想想"
:show-cancel-button="true"
width="72vw"
@cancel="cancelVisible = false"
@confirm="handleCancelConfirm"
>
<view class="slot-content">
<view class="logout-tip-text">{{ cancelTips }}</view>
</view>
</u-modal>
</view>
</template>
<script>
import OrderItem from '@/components/order-item.vue'
import { setTrackData } from '@/utils/util'
export default {
name: 'OrderPage',
components: {
OrderItem,
},
data() {
return {
orderList: [], // 订单列表
loadingStatus: 'loadmore', // 接口状态：loading: 加载中 loadmore: 加载更多 nomore: 没有更多
pageNo: 1,
pageSize: 10,
cancelVisible: false, // 取消订单提示弹窗
cancelTips: '', // 提示内容
order: {}, // 当前操作的订单
initStatus: false, // 初始化接口加载是否完成
listenerId: '', // 倾诉id
}
},
// 监听支付成功事件
onLoad() {
uni.$on('paySuccess', this.handlePaySuccess)
},
// 移除支付成功事件
onUnload() {
uni.$off('paySuccess', this.handlePaySuccess)
},
mounted() {
// 页面访问埋点
setTrackData({
events: [
{
event_id: 'page_visit',
event_custom_properties: {
part: 'my_listen_order',
position: '',
element: '',
},
},
],
})
// 获取订单列表
this.getOrderList()
},
methods: {
// 订单列表
async getOrderList() {
if (this.loadingStatus !== 'loadmore') return
this.loadingStatus = 'loading'
const { pageNo, pageSize } = this
const { uid, accessToken } = this.$store.state.user
try {
const { total, list } = await this.$request.get('/auth/order/listen/list', {
params: {
pageNo,
pageSize,
uid,
accessToken,
},
})
this.initStatus = true
if (pageNo === 1) {
this.orderList = [...list]
} else {
this.orderList.push(...list)
}
this.loadingStatus = this.orderList.length < total ? 'loadmore' : 'nomore'
} catch (e) {
console.log(e)
this.loadingStatus = 'nomore'
}
},
// 取消订单
handleCancel({ cancelTips, order }) {
this.cancelTips = cancelTips
this.order = order
this.cancelVisible = true
},
// 确认取消订单
async handleCancelConfirm() {
uni.showLoading({
title: '加载中',
mask: true,
icon: 'none',
})
try {
await this.$request.get('/auth/order/listen/orderCancel', {
params: {
listenOrderId: this.order.id,
},
})
this.$set(
this.orderList.find(item => item.id === this.order.id),
'lifecycle',
5,
)
uni.showToast({
title: '订单取消成功',
icon: 'none',
})
this.cancelVisible = false
} catch (e) {
console.log(e)
uni.hideLoading()
}
},
// 接收从订单组件传过来的 listenerId, 用于支付成功的回调中传参
handlePay(listenerId) {
this.listenerId = listenerId
},
// 支付成功回调
handlePaySuccess(from) {
if (from === 'orderList') {
setTimeout(() => {
uni.reLaunch({
url: `/pages/confide/confide?listenerId=${this.listenerId}&call=1`,
})
}, 1500)
}
},
},
// 下拉刷新，这里不要和 scrollView 一起使用，scrollView会限制高度，和下拉刷新冲突
async onPullDownRefresh() {
// 字段重置
this.pageNo = 1
this.loadingStatus = 'loadmore'
// 重新请求接口
await this.getOrderList()
// 停止下拉刷新
uni.stopPullDownRefresh()
},
// 上拉加载下一页
onReachBottom() {
console.log('bottom')
if (this.loadingStatus === 'loadmore') {
this.pageNo++
this.getOrderList()
}
},
}
</script>
<style lang="less" scoped>
.order-page {
.content-box {
padding: 10px 16px;
}
.loadmore-box {
margin-top: 20px;
}
}
</style>
<style>
page {
background: #f0f0f0;
}
</style>
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