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.
339 lines
6.9 KiB
339 lines
6.9 KiB
<template>
|
|
<view class="page">
|
|
|
|
<navbar title="分享记录" />
|
|
|
|
<view class="content">
|
|
|
|
<view class="card" style="padding-left: 0;">
|
|
<uv-tabs :list="tabs"
|
|
:inactiveStyle="{
|
|
color: '#999999',
|
|
fontSize: '30rpx',
|
|
fontWeight: 500,
|
|
whiteSpace: 'nowrap',
|
|
}"
|
|
:activeStyle="{
|
|
color: '#1B1B1B',
|
|
fontSize: '38rpx',
|
|
fontWeight: 900,
|
|
whiteSpace: 'nowrap',
|
|
}"
|
|
lineHeight="13rpx"
|
|
lineWidth="77rpx"
|
|
:lineColor="`url('../../static/image/record/slider.png') 100% 100%`"
|
|
:scrollable="false"
|
|
@click="clickTabs"
|
|
>
|
|
<template v-slot:right>
|
|
<view>
|
|
<uv-popup
|
|
ref="popup"
|
|
:overlayOpacity="0"
|
|
:customStyle="{
|
|
backgroundColor: 'transparent',
|
|
position: 'fixed',
|
|
top: '300rpx',
|
|
right: '20rpx'
|
|
}"
|
|
>
|
|
<view class="card popup-options">
|
|
<view
|
|
class="popup-option"
|
|
:class="{ 'is-active': item.value === queryParams.auditStatus }"
|
|
v-for="item in auditStatusOptions"
|
|
:key="item.value"
|
|
@click="onSelectAuditStatus(item.value)"
|
|
>
|
|
<text>{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
<button class="btn-simple" plain @click="openPicker" >
|
|
<image src="../../static/image/record/filter.png" style="width: 30rpx; height: 30rpx;"></image>
|
|
</button>
|
|
</view>
|
|
</template>
|
|
</uv-tabs>
|
|
</view>
|
|
|
|
<view v-if="recordList.records.length > 0" class="card list">
|
|
<view class="list-item"
|
|
v-for="item in recordList.records"
|
|
@click="toSharingDetail(item.id)"
|
|
:key="item.id"
|
|
>
|
|
// todo: video?
|
|
<image class="left" :src="item.imageUrl"></image>
|
|
<view class="right">
|
|
<view class="title">{{ item.title }}</view>
|
|
<view class="desc">{{ item.description }}</view>
|
|
<view class="bottom">
|
|
<text class="desc">{{ item.createTime }}</text>
|
|
<button plain class="btn-simple btn-delete flex" @click="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.auditStatus]"
|
|
style="width: 100rpx; height: 100rpx;"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<tabber select="record"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
const URL_MAPPING = { // state -> url
|
|
'-1': '/pages_order/record/personalSharing',
|
|
'0': '/pages_order/record/videoSharing',
|
|
'1': '/pages_order/record/groupSharing',
|
|
'2': '/pages_order/record/articleSharing',
|
|
}
|
|
|
|
export default {
|
|
components : {
|
|
tabber,
|
|
},
|
|
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,
|
|
auditStatus: null,
|
|
},
|
|
recordList: {
|
|
records: [
|
|
{
|
|
id: '001',
|
|
imageUrl: '../../static/image/record/temp.png',
|
|
times: 10,
|
|
qrCode: null,
|
|
title: '裂变星轻松获客',
|
|
description: '如此好用的赚钱项目，赶快加入吧！',
|
|
auditStatus: 0,
|
|
createTime: '2025年2月1日',
|
|
},
|
|
{
|
|
id: '002',
|
|
imageUrl: '../../static/image/record/temp.png',
|
|
times: 10,
|
|
qrCode: null,
|
|
title: '裂变星轻松获客',
|
|
description: '如此好用的赚钱项目，赶快加入吧！',
|
|
auditStatus: 1,
|
|
createTime: '2025年2月1日',
|
|
},
|
|
{
|
|
id: '003',
|
|
imageUrl: '../../static/image/record/temp.png',
|
|
times: 10,
|
|
qrCode: null,
|
|
title: '裂变星轻松获客',
|
|
description: '如此好用的赚钱项目，赶快加入吧！',
|
|
auditStatus: 2,
|
|
createTime: '2025年2月1日',
|
|
},
|
|
]
|
|
},
|
|
// recordList : { // 列表数据
|
|
// records : [],
|
|
// total : 0,
|
|
// },
|
|
state : -1,
|
|
auditStatusImgMapping: {
|
|
0: '../../static/image/record/audit.png', // 审核中
|
|
1: '../../static/image/record/pass.png', // 已通过
|
|
2: '../../static/image/record/fail.png', // 未通过
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.orderPage()
|
|
},
|
|
//滚动到屏幕底部
|
|
onReachBottom() {
|
|
if(this.queryParams.pageSize < this.recordList.total){
|
|
this.queryParams.pageSize += 10
|
|
this.orderPage()
|
|
}
|
|
},
|
|
methods: {
|
|
orderPage(){
|
|
// todo
|
|
return
|
|
let queryParams = {
|
|
...this.queryParams,
|
|
}
|
|
if(this.state != -1){
|
|
queryParams.state = this.state
|
|
}
|
|
this.$api('orderPage', queryParams, res => {
|
|
if(res.code == 200){
|
|
this.recordList = res.result
|
|
}
|
|
})
|
|
},
|
|
//点击tab栏
|
|
clickTabs(index) {
|
|
if (index == 0) {
|
|
this.state = -1;
|
|
} else {
|
|
this.state = index - 1;
|
|
}
|
|
this.queryParams.pageSize = 10
|
|
this.orderPage()
|
|
},
|
|
openPicker() {
|
|
this.$refs.popup.open();
|
|
},
|
|
onSelectAuditStatus(val) {
|
|
const selected = this.queryParams.auditStatus
|
|
|
|
this.queryParams.auditStatus = selected === val ? null : val
|
|
},
|
|
//跳转分享详情页面
|
|
toSharingDetail(id) {
|
|
uni.navigateTo({
|
|
url: `${URL_MAPPING[this.state]}?id=${id}`
|
|
})
|
|
},
|
|
onDelete(id) {
|
|
// todo
|
|
},
|
|
}
|
|
}
|
|
</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;
|
|
background-color: yellow;
|
|
}
|
|
.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;
|
|
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>
|