You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
327 lines
8.6 KiB
327 lines
8.6 KiB
<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="!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',
|
|
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;
|
|
overflow:hidden; //超出的文本隐藏
|
|
text-overflow:ellipsis; //溢出用省略号显示
|
|
white-space:nowrap; //溢出不换行
|
|
}
|
|
|
|
.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>
|