fission-star-applet-250304/pages/index/record.vue

<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>