hly
/
fission-star-applet-250304
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

fix(登录状态): 修复登录状态失效时的处理逻辑 

在用户登录状态失效时，移除本地存储的token并跳转到登录页面，同时在各页面添加登录状态检查，确保未登录用户无法访问相关功能。
fox
前端-胡立永 1 month ago
parent
8c70412957
commit
e3720c5971
4 changed files with 721 additions and 665 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      api/http.js
  2. +5
    -0
      mixins/list.js
  3. +399
    -386
      pages/index/center.vue
  4. +316
    -279
      pages/index/record.vue

+ 1
- 0
api/http.js View File

@ -35,6 +35,7 @@ function http(uri, data, callback, method = 'GET', showLoading, title) {
if(res.statusCode == 401 ||
res.data.message == '操作失败，token非法无效!' ||
res.data.message == '操作失败，用户不存在!'){
uni.removeStorageSync('token')
store.commit('logout')
console.error('登录过期');
utils.toLogin()


+ 5
- 0
mixins/list.js View File

@ -46,6 +46,11 @@ export default {
* @returns {Promise} 返回Promise对象
*/
getData(queryParams){
if(this.authApi && !uni.getStorageSync('token')){
return
}
return new Promise((success, error) => {
if(!this.mixinsListApi){
return console.error('mixinsListApi 缺失');


+ 399
- 386
pages/index/center.vue View File

@ -1,395 +1,408 @@
<template>
<view class="page">
<navbar title="个人中心" bgColor="#001B3C" color="#FFFFFF" />
<view class="head">
<view class="headImage" @click="goToEditUserInfo">
<image :src="userInfo.headImage" mode=""></image>
</view>
<view class="info">
<view class="name" @click="goToEditUserInfo">
{{ userInfo.nickName }}
</view>
<view class="tags">
<view class="tag">
<text class="tag-label">ID:</text>
<text>{{ userInfo.intentionCode }}</text>
</view>
<view v-if="role" style="display: inline-block; width: 172rpx; height: 63rpx; vertical-align: top; margin-top: -6rpx;">
<image src="@/pages_order/static/center/agent-icon.png"></image>
</view>
<!-- <view v-else class="tag" >
代理商:{{userInfo.endTime}} 到期
</view> -->
<view v-else class="tag">
普通会员
</view>
</view>
</view>
<view class="setting" @click="$utils.navigateTo('/pages_order/mine/setting')">
<uv-icon name="setting" color="#FFFFFF" size="48rpx"></uv-icon>
</view>
</view>
<view class="tools-box">
<image class="tools-bg" src="@/pages_order/static/center/tools-bg.png"></image>
<view class="flex activate">
<template v-if="role">
<view class="activate-tips" style="padding-left: 27rpx;">
<view>代理商权益</view>
<view>
将于<text class="activate-highlight">{{ userInfo.endTime ? $dayjs(userInfo.endTime).format('YYYY年M月D日') : '-'}}</text>到期
</view>
</view>
<view class="btn-activate" @click="onActivate">
<image src="@/pages_order/static/center/btn-activate-again.png"></image>
</view>
</template>
<template v-else>
<view class="activate-tips">
升级成为代理商享受更多权益
</view>
<view class="btn-activate" @click="onActivate">
<image src="@/pages_order/static/center/btn-activate.png"></image>
</view>
</template>
</view>
<view class="tools flex">
<view class="tool" @click="$utils.navigateTo('/pages_order/mine/sharing')">
<view class="tool-icon">
<image src="@/pages_order/static/center/tool-share.png"></image>
</view>
<text>分享好友</text>
</view>
<view class="tool" @click="onActivate">
<view class="tool-icon">
<image src="@/pages_order/static/center/tool-activate.png"></image>
</view>
<text>激活码</text>
</view>
<view class="tool" @click="$utils.navigateTo('/pages_order/mine/wallet')">
<view class="tool-icon">
<image src="@/pages_order/static/center/tool-wallet.png"></image>
</view>
<text>我的钱包</text>
</view>
<view class="tool" @click="$utils.navigateTo('/pages_order/mine/team')">
<view class="tool-icon">
<image src="@/pages_order/static/center/tool-team.png"></image>
</view>
<text>我的团队</text>
</view>
</view>
</view>
<view class="content">
<view class="card notice" v-if="notice">
<view class="notice-icon">
<image src="@/pages_order/static/center/notice.png"></image>
</view>
<uv-notice-bar
:text="notice"
bgColor="transparent"
color="#001B3C"
:icon="false"
fontSize="28rpx"
:customStyle="{
padding: '6rpx 0',
}"
></uv-notice-bar>
</view>
<view class="card updates">
<view class="updates-header">
<view class="updates-header-bg">
<image src="@/static/image/center/title-bg.png"></image>
</view>
<view class="updates-header-content">
动态更新
</view>
</view>
<view class="updates-content">
<view class="card updates-item"
v-for="item in list"
:key="item.id"
@click="goToNewsDetail(item.id)"
>
<view class="updates-item-img">
<image :src="item.image"></image>
</view>
<view class="updates-item-info">
<view class="updates-item-title">{{ item.title || '' }}</view>
<view class="updates-item-desc text-ellipsis">{{ getDesc(item.details) }}</view>
</view>
</view>
</view>
</view>
</view>
<view class="service" @click="$utils.navigateTo('/pages_order/mine/service')">
<image src="@/pages_order/static/center/service.png" mode=""></image>
</view>
<popupActivate ref="popupActivate"></popupActivate>
<popupSharing ref="popupSharing"></popupSharing>
<tabber select="center" />
</view>
<view class="page">
<navbar title="个人中心" bgColor="#001B3C" color="#FFFFFF" />
<view class="head">
<view class="headImage" @click="goToEditUserInfo">
<image :src="userInfo.headImage || '../../static/image/default-avatar.png'" mode=""></image>
</view>
<view class="info">
<view class="name" @click="goToEditUserInfo">
{{ userInfo.nickName || '未登录' }}
</view>
<view class="tags">
<view class="tag" v-if="userInfo.intentionCode">
<text class="tag-label">ID:</text>
<text>{{ userInfo.intentionCode }}</text>
</view>
<view v-if="role"
style="display: inline-block; width: 172rpx; height: 63rpx; vertical-align: top; margin-top: -6rpx;">
<image src="@/pages_order/static/center/agent-icon.png"></image>
</view>
<view v-else-if="userInfo.id" class="tag">
普通会员
</view>
<view v-else class="tag" @click="goToLogin">
点击登录
</view>
</view>
</view>
<view class="setting" @click="$utils.navigateTo('/pages_order/mine/setting')">
<uv-icon name="setting" color="#FFFFFF" size="48rpx"></uv-icon>
</view>
</view>
<view class="tools-box">
<image class="tools-bg" src="@/pages_order/static/center/tools-bg.png"></image>
<view class="flex activate">
<template v-if="role">
<view class="activate-tips" style="padding-left: 27rpx;">
<view>代理商权益</view>
<view>
将于<text class="activate-highlight">{{ userInfo.endTime ?
$dayjs(userInfo.endTime).format('YYYY年M月D日') : '-'}}</text>到期
</view>
</view>
<view class="btn-activate" @click="onActivate">
<image src="@/pages_order/static/center/btn-activate-again.png"></image>
</view>
</template>
<template v-else>
<view class="activate-tips">
升级成为代理商享受更多权益
</view>
<view class="btn-activate" @click="onActivate">
<image src="@/pages_order/static/center/btn-activate.png"></image>
</view>
</template>
</view>
<view class="tools flex">
<view class="tool" @click="$utils.navigateTo('/pages_order/mine/sharing')">
<view class="tool-icon">
<image src="@/pages_order/static/center/tool-share.png"></image>
</view>
<text>分享好友</text>
</view>
<view class="tool" @click="onActivate">
<view class="tool-icon">
<image src="@/pages_order/static/center/tool-activate.png"></image>
</view>
<text>激活码</text>
</view>
<view class="tool" @click="$utils.navigateTo('/pages_order/mine/wallet')">
<view class="tool-icon">
<image src="@/pages_order/static/center/tool-wallet.png"></image>
</view>
<text>我的钱包</text>
</view>
<view class="tool" @click="$utils.navigateTo('/pages_order/mine/team')">
<view class="tool-icon">
<image src="@/pages_order/static/center/tool-team.png"></image>
</view>
<text>我的团队</text>
</view>
</view>
</view>
<view class="content">
<view class="card notice" v-if="notice">
<view class="notice-icon">
<image src="@/pages_order/static/center/notice.png"></image>
</view>
<uv-notice-bar :text="notice" bgColor="transparent" color="#001B3C" :icon="false" fontSize="28rpx"
:customStyle="{
padding: '6rpx 0',
}"></uv-notice-bar>
</view>
<view class="card updates">
<view class="updates-header">
<view class="updates-header-bg">
<image src="@/static/image/center/title-bg.png"></image>
</view>
<view class="updates-header-content">
动态更新
</view>
</view>
<view class="updates-content">
<view class="card updates-item" v-for="item in list" :key="item.id"
@click="goToNewsDetail(item.id)">
<view class="updates-item-img">
<image :src="item.image"></image>
</view>
<view class="updates-item-info">
<view class="updates-item-title">{{ item.title || '' }}</view>
<view class="updates-item-desc text-ellipsis">{{ getDesc(item.details) }}</view>
</view>
</view>
</view>
</view>
</view>
<view class="service" @click="$utils.navigateTo('/pages_order/mine/service')">
<image src="@/pages_order/static/center/service.png" mode=""></image>
</view>
<popupActivate ref="popupActivate"></popupActivate>
<popupSharing ref="popupSharing"></popupSharing>
<tabber select="center" />
</view>
</template>
<script>
import { mapState } from 'vuex'
import mixinsList from '@/mixins/list.js'
import popupActivate from '@/components/center/popupActivate.vue'
import tabber from '@/components/base/tabbar.vue'
export default {
mixins : [mixinsList],
components: {
tabber,
popupActivate,
},
data() {
return {
notice: '',
mixinsListApi : 'getNews',
}
},
computed: {
...mapState(['userInfo', 'userInfoVip']),
role() {
return this.userInfo.isPay
}
},
onShow() {
this.fetchNotice()
this.$store.commit('getUserInfo')
this.$store.commit('getUserInfoVip')
},
methods: {
async fetchNotice() {
try {
// todo: check
this.notice = (await this.$fetch('getNotice'))?.[0]?.title
} catch (err) {
import { mapState } from 'vuex'
import mixinsList from '@/mixins/list.js'
import popupActivate from '@/components/center/popupActivate.vue'
import tabber from '@/components/base/tabbar.vue'
export default {
mixins: [mixinsList],
components: {
tabber,
popupActivate,
},
data() {
return {
notice: '',
mixinsListApi: 'getNews',
authApi : true,
isLoggedIn : uni.getStorageSync('token'),
}
},
onActivate() {
this.$refs.popupActivate.open(this.role)
},
getDesc(str) {
if (!str) {
return ''
}
return str.replace(/<.*?>/g, '')
},
goToNewsDetail(id) {
uni.navigateTo({
url: `/pages_order/mine/news?id=${id}`
})
},
goToEditUserInfo() {
uni.navigateTo({
url: '/pages_order/auth/wxUserInfo?mode=edit'
})
},
}
}
},
computed: {
...mapState(['userInfo', 'userInfoVip']),
role() {
return this.userInfo.isPay
},
},
onShow() {
this.isLoggedIn = uni.getStorageSync('token')
if(this.isLoggedIn){
this.$store.commit('getUserInfo')
this.$store.commit('getUserInfoVip')
this.fetchNotice()
}
},
methods: {
async fetchNotice() {
try {
// todo: check
this.notice = (await this.$fetch('getNotice'))?.[0]?.title
} catch (err) {
}
},
onActivate() {
if (!this.isLoggedIn) {
this.goToLogin()
return
}
this.$refs.popupActivate.open(this.role)
},
getDesc(str) {
if (!str) {
return ''
}
return str.replace(/<.*?>/g, '')
},
goToNewsDetail(id) {
if (!this.isLoggedIn) {
this.goToLogin()
return
}
uni.navigateTo({
url: `/pages_order/mine/news?id=${id}`
})
},
goToEditUserInfo() {
if (!this.isLoggedIn) {
this.goToLogin()
return
}
uni.navigateTo({
url: '/pages_order/auth/wxUserInfo?mode=edit'
})
},
goToLogin() {
uni.navigateTo({
url: '/pages_order/auth/wxLogin'
})
},
}
}
</script>
<style scoped lang="scss">
.page {
background-color: #001B3C;
min-height: 100vh;
}
image {
width: 100%;
height: 100%;
}
.head {
display: flex;
padding: 20rpx 26rpx 18rpx 40rpx;
align-items: center;
position: relative;
.headImage {
width: 143rpx;
height: 143rpx;
overflow: hidden;
border-radius: 50%;
margin-right: 40rpx;
}
.info {
.name {
color: #FFFFFF;
font-size: 38rpx;
margin-bottom: 12rpx;
}
.tags {
}
}
.setting {
position: absolute;
right: 26rpx;
top: 37rpx;
}
}
.tag {
display: inline-block;
padding: 6rpx 21rpx;
border: 1rpx solid #999999;
color: #FFFFFF;
font-size: 24rpx;
border-radius: 23rpx;
margin-right: 20rpx;
vertical-align: top;
&-label {
color: #999999;
}
}
.tools {
&-box {
width: 100vw;
height: 406rpx;
padding: 0 5rpx;
box-sizing: border-box;
position: relative;
}
position: absolute;
width: calc(100vw - 69rpx*2);
left: 69rpx;
bottom: 64rpx;
justify-content: space-between;
}
.activate {
position: absolute;
width: calc(100% - 199rpx);
height: 80rpx;
top: 31rpx;
right: 37rpx;
&-tips {
flex: 1;
color: #976224;
font-size: 28rpx;
}
&-highlight {
color: #FF6868;
}
.btn-activate {
width: 172rpx;
height: 80rpx;
}
}
.tool {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #57595B;
font-size: 28rpx;
&-icon {
width: 88rpx;
height: 88rpx;
margin-bottom: 10rpx;
}
}
.content {
padding: 0 20rpx 20rpx 20rpx;
}
.notice {
padding: 22rpx 21rpx;
display: flex;
&-icon {
width: 49rpx;
height: 49rpx;
margin-right: 20rpx;
}
}
.updates {
margin-top: 20rpx;
padding: 20rpx;
&-header {
position: relative;
&-bg {
height: 51rpx;
width: 58rpx;
margin-left: 40rpx;
}
&-content {
color: #262626;
font-size: 38rpx;
font-weight: 900;
position: absolute;
top: 0;
}
}
&-item {
padding: 0;
border-radius: 16rpx;
box-shadow: 0 0 32rpx 0 rgba($color: #808080, $alpha: 0.16);
margin-top: 20rpx;
&-img {
width: 100%;
height: 252rpx;
}
&-info {
padding: 15rpx 18rpx 8rpx 18rpx;
}
&-title {
color: #474747;
font-size: 32rpx;
}
&-desc {
color: #CCCCCC;
font-size: 20rpx;
}
}
}
.service {
position: fixed;
right: 29rpx;
bottom: 312rpx;
width: 149rpx;
height: 158rpx;
}
.page {
background-color: #001B3C;
min-height: 100vh;
}
image {
width: 100%;
height: 100%;
}
.head {
display: flex;
padding: 20rpx 26rpx 18rpx 40rpx;
align-items: center;
position: relative;
.headImage {
width: 143rpx;
height: 143rpx;
overflow: hidden;
border-radius: 50%;
margin-right: 40rpx;
}
.info {
.name {
color: #FFFFFF;
font-size: 38rpx;
margin-bottom: 12rpx;
}
.tags {}
}
.setting {
position: absolute;
right: 26rpx;
top: 37rpx;
}
}
.tag {
display: inline-block;
padding: 6rpx 21rpx;
border: 1rpx solid #999999;
color: #FFFFFF;
font-size: 24rpx;
border-radius: 23rpx;
margin-right: 20rpx;
vertical-align: top;
&-label {
color: #999999;
}
}
.tools {
&-box {
width: 100vw;
height: 406rpx;
padding: 0 5rpx;
box-sizing: border-box;
position: relative;
}
position: absolute;
width: calc(100vw - 69rpx*2);
left: 69rpx;
bottom: 64rpx;
justify-content: space-between;
}
.activate {
position: absolute;
width: calc(100% - 199rpx);
height: 80rpx;
top: 31rpx;
right: 37rpx;
&-tips {
flex: 1;
color: #976224;
font-size: 28rpx;
}
&-highlight {
color: #FF6868;
}
.btn-activate {
width: 172rpx;
height: 80rpx;
}
}
.tool {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #57595B;
font-size: 28rpx;
&-icon {
width: 88rpx;
height: 88rpx;
margin-bottom: 10rpx;
}
}
.content {
padding: 0 20rpx 20rpx 20rpx;
}
.notice {
padding: 22rpx 21rpx;
display: flex;
&-icon {
width: 49rpx;
height: 49rpx;
margin-right: 20rpx;
}
}
.updates {
margin-top: 20rpx;
padding: 20rpx;
&-header {
position: relative;
&-bg {
height: 51rpx;
width: 58rpx;
margin-left: 40rpx;
}
&-content {
color: #262626;
font-size: 38rpx;
font-weight: 900;
position: absolute;
top: 0;
}
}
&-item {
padding: 0;
border-radius: 16rpx;
box-shadow: 0 0 32rpx 0 rgba($color: #808080, $alpha: 0.16);
margin-top: 20rpx;
&-img {
width: 100%;
height: 252rpx;
}
&-info {
padding: 15rpx 18rpx 8rpx 18rpx;
}
&-title {
color: #474747;
font-size: 32rpx;
}
&-desc {
color: #CCCCCC;
font-size: 20rpx;
}
}
}
.service {
position: fixed;
right: 29rpx;
bottom: 312rpx;
width: 149rpx;
height: 158rpx;
}
</style>

+ 316
- 279
pages/index/record.vue View File

@ -1,287 +1,324 @@
<template>
<view class="page">
<navbar title="分享记录" />
<view class="content">
<view class="card" style="padding-left: 0; padding-right: 10rpx;">
<uv-tabs
:list="tabs"
@click="clickTabs"
:inactiveStyle="{
color: '#999999',
fontSize: '30rpx',
fontWeight: 500,
whiteSpace: 'nowrap',
}"
:activeStyle="{
color: '#1B1B1B',
fontSize: '38rpx',
fontWeight: 900,
whiteSpace: 'nowrap',
}"
lineHeight="13rpx"
lineWidth="77rpx"
:lineColor="`url(${sliderBgUrl}) 100% 100%`"
:scrollable="false"
>
<template v-slot:right>
<suspendDropdown
v-model="status"
:options="auditStatusOptions"
@change="onAuditStatusChange"
></suspendDropdown>
</template>
</uv-tabs>
</view>
<view v-if="list.length" class="card list">
<view class="list-item"
v-for="item in list"
@click="toSharingDetail(item.id)"
:key="item.id"
>
<!-- todo: video? -->
<image class="left" :src="item.indexImage || item.headImage"></image>
<view class="right">
<view class="title">{{ item.headTitle || '' }}</view>
<view class="desc">{{ item.textDetails || '' }}</view>
<view class="bottom">
<text class="desc">{{ item.createTime || '' }}</text>
<button plain class="btn-simple btn-delete flex" @click.stop="onDelete(item.id)">
<image src="../../static/image/record/delete.png" style="width: 24rpx; height: 24rpx;"></image>
<text style="margin-left: 10rpx;">删除</text>
</button>
</view>
<view class="mark">
<image
:src="auditStatusImgMapping[item.status]"
style="width: 100rpx; height: 100rpx;"
></image>
</view>
</view>
</view>
</view>
<!-- todo: empty -->
</view>
<popupActivate ref="popupActivate"></popupActivate>
<tabber select="record"/>
</view>
<view class="page">
<navbar title="分享记录" />
<view class="content">
<view class="card" style="padding-left: 0; padding-right: 10rpx;">
<uv-tabs :list="tabs" @click="clickTabs" :inactiveStyle="{
color: '#999999',
fontSize: '30rpx',
fontWeight: 500,
whiteSpace: 'nowrap',
}" :activeStyle="{
color: '#1B1B1B',
fontSize: '38rpx',
fontWeight: 900,
whiteSpace: 'nowrap',
}" lineHeight="13rpx" lineWidth="77rpx" :lineColor="`url(${sliderBgUrl}) 100% 100%`" :scrollable="false">
<template v-slot:right>
<suspendDropdown v-model="status" :options="auditStatusOptions" @change="onAuditStatusChange">
</suspendDropdown>
</template>
</uv-tabs>
</view>
<view v-if="!isLoggedIn" class="card login-tip">
<view class="login-tip-text">登录后查看分享记录</view>
<button class="btn-login" @click="goToLogin">立即登录</button>
</view>
<view v-else-if="list.length" class="card list">
<view class="list-item" v-for="item in list" @click="toSharingDetail(item.id)" :key="item.id">
<!-- todo: video? -->
<image class="left" :src="item.indexImage || item.headImage"></image>
<view class="right">
<view class="title">{{ item.headTitle || '' }}</view>
<view class="desc">{{ item.textDetails || '' }}</view>
<view class="bottom">
<text class="desc">{{ item.createTime || '' }}</text>
<button plain class="btn-simple btn-delete flex" @click.stop="onDelete(item.id)">
<image src="../../static/image/record/delete.png" style="width: 24rpx; height: 24rpx;">
</image>
<text style="margin-left: 10rpx;">删除</text>
</button>
</view>
<view class="mark">
<image :src="auditStatusImgMapping[item.status]" style="width: 100rpx; height: 100rpx;">
</image>
</view>
</view>
</view>
</view>
<!-- todo: empty -->
</view>
<popupActivate ref="popupActivate"></popupActivate>
<tabber select="record" />
</view>
</template>
<script>
import { mapGetters } from 'vuex'
import mixinsList from '@/mixins/list.js'
import tabber from '@/components/base/tabbar.vue'
import suspendDropdown from '@/components/base/suspendDropdown.vue'
import popupActivate from '@/components/center/popupActivate.vue'
const URL_MAPPING = { // state -> url
'0': '/pages_order/record/personalSharing',
'1': '/pages_order/record/videoSharing',
'2': '/pages_order/record/groupSharing',
'3': '/pages_order/record/articleSharing',
}
export default {
mixins : [mixinsList],
components : {
tabber,
suspendDropdown,
popupActivate,
},
computed : {
...mapGetters(['userShop']),
},
data() {
return {
tabs: [{
name: '个人分享'
},
{
name: '视频分享'
},
{
name: '群分享'
},
{
name: '文章分享'
},
],
auditStatusOptions: [
{
label: '审核中',
value: 0,
},
{
label: '已通过',
value: 1,
},
{
label: '未通过',
value: 2,
},
],
queryParams: {
pageNo: 1,
pageSize: 10,
state: 0,
},
status: null,
recordList : { // 列表数据
records : [],
total : 0,
},
auditStatusImgMapping: {
0: '../../static/image/record/audit.png', // 审核中
1: '../../static/image/record/pass.png', // 已通过
2: '../../static/image/record/fail.png', // 未通过
},
// todo
sliderBgUrl: '',
mixinsListApi : 'getSharePage',
}
},
methods: {
//点击tab栏
clickTabs(e) {
this.queryParams.state = e.index
this.queryParams.pageNo = 1
this.queryParams.pageSize = 10
this.getData()
},
onAuditStatusChange(status) {
this.status = status
this.queryParams.pageNo = 1
this.queryParams.pageSize = 10
if (status === null) {
delete this.queryParams.status
} else {
this.queryParams.status = status
}
this.getData()
},
//跳转分享详情页面
toSharingDetail(id) {
if (!this.userInfo.isPay) {
this.$refs.popupActivate.open()
return
}
uni.navigateTo({
url: `${URL_MAPPING[this.queryParams.state]}?id=${id}`
})
},
onDelete(id) {
uni.showModal({
title: '确认删除该分享吗',
success: async (r) => {
if(r.confirm){
await this.$fetch('deleteLog', { id, state: this.queryParams.state })
this.getData()
}
}
})
},
}
}
import { mapGetters } from 'vuex'
import mixinsList from '@/mixins/list.js'
import tabber from '@/components/base/tabbar.vue'
import suspendDropdown from '@/components/base/suspendDropdown.vue'
import popupActivate from '@/components/center/popupActivate.vue'
const URL_MAPPING = { // state -> url
'0': '/pages_order/record/personalSharing',
'1': '/pages_order/record/videoSharing',
'2': '/pages_order/record/groupSharing',
'3': '/pages_order/record/articleSharing',
}
export default {
mixins: [mixinsList],
components: {
tabber,
suspendDropdown,
popupActivate,
},
computed: {
...mapGetters(['userShop']),
},
data() {
return {
tabs: [{
name: '个人分享'
},
{
name: '视频分享'
},
{
name: '群分享'
},
{
name: '文章分享'
},
],
auditStatusOptions: [
{
label: '审核中',
value: 0,
},
{
label: '已通过',
value: 1,
},
{
label: '未通过',
value: 2,
},
],
queryParams: {
pageNo: 1,
pageSize: 10,
state: 0,
},
status: null,
recordList: { // 列表数据
records: [],
total: 0,
},
auditStatusImgMapping: {
0: '../../static/image/record/audit.png', // 审核中
1: '../../static/image/record/pass.png', // 已通过
2: '../../static/image/record/fail.png', // 未通过
},
// todo
sliderBgUrl: '',
mixinsListApi: 'getSharePage',
authApi : true,
isLoggedIn : uni.getStorageSync('token'),
}
},
onShow(){
this.isLoggedIn = uni.getStorageSync('token')
},
methods: {
//点击tab栏
clickTabs(e) {
if (!this.isLoggedIn) {
this.goToLogin()
return
}
this.queryParams.state = e.index
this.queryParams.pageNo = 1
this.queryParams.pageSize = 10
this.getData()
},
onAuditStatusChange(status) {
if (!this.isLoggedIn) {
this.goToLogin()
return
}
this.status = status
this.queryParams.pageNo = 1
this.queryParams.pageSize = 10
if (status === null) {
delete this.queryParams.status
} else {
this.queryParams.status = status
}
this.getData()
},
//跳转分享详情页面
toSharingDetail(id) {
if (!this.isLoggedIn) {
this.goToLogin()
return
}
if (!this.userInfo.isPay) {
this.$refs.popupActivate.open()
return
}
uni.navigateTo({
url: `${URL_MAPPING[this.queryParams.state]}?id=${id}`
})
},
onDelete(id) {
if (!this.isLoggedIn) {
this.goToLogin()
return
}
uni.showModal({
title: '确认删除该分享吗',
success: async (r) => {
if (r.confirm) {
await this.$fetch('deleteLog', { id, state: this.queryParams.state })
this.getData()
}
}
})
},
goToLogin() {
uni.navigateTo({
url: '/pages_order/auth/wxLogin'
})
},
}
}
</script>
<style scoped lang="scss">
.page{
}
.content {
padding: 20rpx;
}
.list {
margin-top: 20rpx;
padding: 40rpx 59rpx 40rpx 43rpx;
&-item {
font-size: 0;
display: flex;
& + & {
margin-top: 40rpx;
}
.left {
width: 220rpx;
height: 148rpx;
}
.right {
flex: 1;
width: calc(100% - 220rpx);
padding-left: 20rpx;
box-sizing: border-box;
position: relative;
}
}
.title {
color: #1B1B1B;
font-size: 28rpx;
}
.desc {
color: #999999;
font-size: 24rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
.title + .desc {
margin-top: 18rpx;
}
.bottom {
position: absolute;
bottom: 0;
width: calc(100% - 20rpx);
}
.btn-delete {
float: right;
color: #05D9A2;
font-size: 20rpx;
}
.mark {
position: absolute;
top: 10rpx;
right: 5rpx;
}
}
.popup {
&-options {
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
padding: 16rpx 40rpx;
}
&-option {
color: #999999;
font-size: 28rpx;
&.is-active {
color: #1B1B1B;
font-weight: 700;
}
& + & {
margin-top: 16rpx;
}
}
}
.page {}
.content {
padding: 20rpx;
}
.list {
margin-top: 20rpx;
padding: 40rpx 59rpx 40rpx 43rpx;
&-item {
font-size: 0;
display: flex;
&+& {
margin-top: 40rpx;
}
.left {
width: 220rpx;
height: 148rpx;
}
.right {
flex: 1;
width: calc(100% - 220rpx);
padding-left: 20rpx;
box-sizing: border-box;
position: relative;
}
}
.title {
color: #1B1B1B;
font-size: 28rpx;
}
.desc {
color: #999999;
font-size: 24rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
.title+.desc {
margin-top: 18rpx;
}
.bottom {
position: absolute;
bottom: 0;
width: calc(100% - 20rpx);
}
.btn-delete {
float: right;
color: #05D9A2;
font-size: 20rpx;
}
.mark {
position: absolute;
top: 10rpx;
right: 5rpx;
}
}
.popup {
&-options {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
padding: 16rpx 40rpx;
}
&-option {
color: #999999;
font-size: 28rpx;
&.is-active {
color: #1B1B1B;
font-weight: 700;
}
&+& {
margin-top: 16rpx;
}
}
}
.login-tip {
margin-top: 20rpx;
padding: 40rpx;
text-align: center;
&-text {
color: #999999;
font-size: 28rpx;
margin-bottom: 20rpx;
}
}
.btn-login {
width: 240rpx;
height: 80rpx;
line-height: 80rpx;
background: #04D6A3;
color: #FFFFFF;
font-size: 28rpx;
border-radius: 40rpx;
margin: 0 auto;
}
</style>

Write Preview
Loading…
Cancel
Save