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.
279 lines
5.3 KiB
279 lines
5.3 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="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>
|
|
|
|
<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'
|
|
|
|
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,
|
|
},
|
|
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) {
|
|
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()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
}
|
|
}
|
|
</style>
|