293 lines
7.7 KiB
Vue
293 lines
7.7 KiB
Vue
<template>
|
|
<view class="phone">
|
|
<view class="phone-warp">
|
|
<view class="text-sm">人工客服</view>
|
|
<view style="margin-top: 10rpx">
|
|
<up-text mode="phone" call text="400-9915-666"></up-text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<mescroll-body
|
|
@init="mescrollInit"
|
|
@down="downCallback"
|
|
@up="upCallback"
|
|
:up="{
|
|
empty: {
|
|
use: false,
|
|
},
|
|
}"
|
|
>
|
|
<view class="mine-page">
|
|
<view class="p-base">
|
|
<view class="userinfo-box">
|
|
<view class="userinfo" @click="handleClickUserInfo">
|
|
<up-avatar
|
|
class="avatar"
|
|
size="48"
|
|
mode="aspectFit"
|
|
:src="`${
|
|
(user && user?.avatar) || '/static/images/example-avatar1.png'
|
|
}`"
|
|
></up-avatar>
|
|
<view v-if="user?.is_need_bind_phone === true"> 登陆/注册 </view>
|
|
<div v-else>
|
|
{{ user?.nick_name || '' }}
|
|
</div>
|
|
</view>
|
|
<div @click="goToSetting" v-if="user">
|
|
<image
|
|
class="setting"
|
|
mode="aspectFit"
|
|
src="@/static/icons/setting.svg"
|
|
/>
|
|
</div>
|
|
</view>
|
|
<view v-for="(block, index) in menus" :key="index">
|
|
<view class="block-box bg-white rounded-4px">
|
|
<view v-for="(item, index) in block" :key="index">
|
|
<view
|
|
class="flex text-primary items-center cell text-base"
|
|
@click="goToMenuPage(item)"
|
|
v-if="!item.openType"
|
|
>
|
|
<image class="icon mr-12px" :src="item.icon" />
|
|
<view class="menu-item" :openType="item.openType">
|
|
<text class="text">{{ item.text }}</text>
|
|
<text class="extra" v-if="item.extra">{{ item.extra }}</text>
|
|
</view>
|
|
<image class="icon" src="@/static/icons/arrow.svg" />
|
|
</view>
|
|
|
|
<view
|
|
class="flex text-primary items-center cell text-base"
|
|
v-if="item.openType"
|
|
>
|
|
<image class="icon mr-12px" :src="item.icon" />
|
|
<up-button class="menu-item-btn" :openType="item.openType">
|
|
<text class="text">{{ item.text }}</text>
|
|
<text class="extra" v-if="item.extra">{{ item.extra }}</text>
|
|
</up-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, getCurrentInstance } from 'vue'
|
|
import useAuthUser from '@/utils/hooks/useAuthUser'
|
|
|
|
const vm = getCurrentInstance()
|
|
const user = ref(null)
|
|
|
|
const menus = ref([
|
|
[
|
|
{
|
|
icon: '/static/icons/record.svg',
|
|
text: '竞猜记录',
|
|
extra: '竞猜记录列表',
|
|
url: '/packages/pages/quizRecord/quizRecord?source=mine',
|
|
isTabbarPage: false,
|
|
isNeedAuth: true,
|
|
},
|
|
{
|
|
icon: '/static/icons/gift.svg',
|
|
text: '奖品记录',
|
|
extra: '奖品记录列表',
|
|
url: '/packages/pages/award/award',
|
|
isTabbarPage: false,
|
|
isNeedAuth: true,
|
|
},
|
|
],
|
|
[
|
|
{
|
|
icon: '/static/icons/customer-service.svg',
|
|
text: '在线客服',
|
|
extra: '客服在线时间 08:00~17:00',
|
|
url: '',
|
|
openType: 'contact',
|
|
isTabbarPage: false,
|
|
isNeedAuth: false,
|
|
},
|
|
{
|
|
icon: '/static/icons/info.svg',
|
|
text: '关于我们',
|
|
url: '/packages/pages/about/about',
|
|
isTabbarPage: false,
|
|
isNeedAuth: false,
|
|
},
|
|
],
|
|
])
|
|
|
|
function handleClickUserInfo() {
|
|
if (user.value && !user.value.is_need_bind_phone) {
|
|
return
|
|
}
|
|
|
|
vm.proxy.$goToPage('packages/pages/login/login?previous=my')
|
|
}
|
|
|
|
function goToMenuPage(item) {
|
|
console.log(item)
|
|
|
|
if (item?.isNeedAuth) {
|
|
if (user.value && !user.value.is_need_bind_phone) {
|
|
vm.proxy.$goToPage(item.url, item.isTabbarPage)
|
|
return
|
|
}
|
|
vm.proxy.$goToPage(
|
|
'packages/pages/login/login?previous=custom&url=' + item.url
|
|
)
|
|
} else {
|
|
vm.proxy.$goToPage(item.url, item.isTabbarPage)
|
|
}
|
|
}
|
|
|
|
function goToSetting() {
|
|
if (user.value && !user.value.is_need_bind_phone) {
|
|
vm.proxy.$goToPage('packages/pages/setting/setting')
|
|
return
|
|
}
|
|
|
|
vm.proxy.$goToPage('packages/pages/login/login?previous=setting')
|
|
}
|
|
|
|
onShow(() => {
|
|
console.log('onShow')
|
|
|
|
const authUser = useAuthUser()
|
|
user.value = authUser.user
|
|
})
|
|
|
|
function getData() {
|
|
return new Promise((resolve, reject) => {
|
|
resolve()
|
|
})
|
|
}
|
|
|
|
import {
|
|
onShow,
|
|
onLoad,
|
|
onPullDownRefresh,
|
|
onPageScroll,
|
|
onReachBottom,
|
|
onShareAppMessage,
|
|
} from '@dcloudio/uni-app'
|
|
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js'
|
|
const { mescrollInit, downCallback, getMescroll } = useMescroll(
|
|
onPageScroll,
|
|
onReachBottom
|
|
)
|
|
|
|
const list = ref([])
|
|
const upCallback = (mescroll) => {
|
|
typeof getData === 'function' &&
|
|
getData(mescroll.num, mescroll.size)
|
|
.then((data) => {
|
|
let curPageData = [] // 当前页数据
|
|
if (Array.isArray(data)) {
|
|
curPageData = data
|
|
}
|
|
if (mescroll.num == 1) list.value = [] // 第一页需手动制空列表
|
|
list.value = list.value.concat(curPageData) //追加新数据
|
|
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
|
|
//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
|
|
|
|
//方法一(推荐): 后台接口有返回列表的总页数 totalPage
|
|
//mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
|
|
|
|
//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
|
|
//mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
|
|
|
|
//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
|
|
//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
|
|
|
|
//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
|
|
mescroll.endSuccess(curPageData.length) // 请求成功, 结束加载
|
|
})
|
|
.catch(() => {
|
|
mescroll.endErr() // 请求失败, 结束加载
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.phone {
|
|
position: fixed;
|
|
// #ifdef MP-WEIXIN
|
|
bottom: 50rpx;
|
|
// #endif
|
|
// #ifdef H5
|
|
bottom: 180rpx;
|
|
// #endif
|
|
z-index: 9999;
|
|
left: 0;
|
|
width: 100%;
|
|
&-warp{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
|
|
.icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.cell {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
}
|
|
|
|
.mine-page {
|
|
.userinfo-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
|
|
.userinfo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
|
|
.avatar {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.setting {
|
|
margin-right: 12px;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
|
|
.menu-item,
|
|
.u-button {
|
|
border: none !important;
|
|
padding: 0 !important;
|
|
font-size: 16px !important;
|
|
flex: 1;
|
|
justify-content: space-between !important;
|
|
|
|
display: flex !important;
|
|
}
|
|
|
|
.extra {
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.u-button .extra {
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
</style>
|