football/pages/card/details/details.vue

<template>
    <app-layout>
        <view class="page">
            <view class="view">
                <view class='card'>
                    <image class='card-img' :src='list.pic_url'></image>
                    <view class='card-name'>{{list.card_name}}</view>
                    <view class='qr' v-if="list.is_use !== 1 && list.endTime > timestamp">
                        <image :src='file_path' v-if="list.is_use === 0"></image>
                    </view>
                    <view class='over' v-if="list.is_use === 1">已使用</view>
                    <view class='over' v-else-if="list.endTime < timestamp">已过期</view>
                </view>
                <view class='line'>
                    <image src='/static/image/icon/line.png'></image>
                </view>
                <view class='explain use-time' v-if="list.is_show_history">
                    <view class='explain-title'>核销时间</view>
                    <view class="clerk-history">
                        <view>{{list.clerked_at}}</view>
                        <view @click="isShow = true" class="history-button">查看历史</view>
                    </view>
                </view>
                <view class='explain use-time'>
                    <view class='explain-title'>有效时间</view>
                    <view>{{list.start_time}} - {{list.end_time}}</view>
                </view>
                <view class='explain card-info'>
                    <view class='explain-title'>使用说明</view>
                    <view>
                        <text style="word-break: break-all;">{{list.content}}</text>
                    </view>
                </view>
                <view class='explain card-info-2'>
                    <view class='explain-title'>核销信息</view>
                    <view class="clerk-info">
                        <view class="clerk-item">
                            <view>剩余次数：</view>
                            <view>{{list.number - list.use_number}}次</view>
                        </view>
                        <view class="clerk-item">
                            <view>已核销次数：</view>
                            <view>{{list.use_number}}次</view>
                        </view>
                        <view class="clerk-item">
                            <view>总次数：</view>
                            <view>{{list.number}}次</view>
                        </view>
                    </view>
                </view>
            </view>
            <app-clerk-historys :user-card-id="list.id" :is-show.sync="isShow"></app-clerk-historys>
        </view>
    </app-layout>
</template>

<script>
    import { mapState } from "vuex";
    import appClerkHistorys from '../../../components/page-component/app-clerk-historys/app-clerk-historys.vue';

    export default {
        components: {appClerkHistorys},
        data() {
            return {
                list: [],
                file_path: '',
                timestamp: null,
                isShow: false
            }
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
            })
        },
        methods: {
            getList(id) {
                let that = this;
                that.$showLoading({
                    text: '加载中...'
                });
                that.$request({
                    url: that.$api.card.detail,
                    data: {
                        cardId: id,
                    },
                }).then(response=>{
                    if(response.code === 0) {
                        that.list = response.data.card;
                        that.$request({
                            url: that.$api.card.qrcode,
                            data: {
                                cardId: id,
                            },
                        }).then(response=>{
                            that.$hideLoading();
                            if(response.code === 0) {
                                that.file_path = response.data.file_path;
                            }else {
                                uni.showToast({
                                    title: response.msg,
                                    icon: 'none',
                                    duration: 1000,
                                });
                            }
                        }).catch(() => {
                            that.$hideLoading();
                        });
                    } else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000,
                        });
                    }
                }).catch(() => {
                    that.$hideLoading();
                });
            },
        },
        onLoad(options) {
            this.getList(options.id);
            this.timestamp = Date.parse(new Date()) / 1000;
        }
    }
</script>

<style scoped lang="scss">
    .page {
        height: 100%;
        background-color: #ff7b33;
        position: absolute;
        width: 100%;
    }

    .view {
        background-color: #ff7b33;
        padding: #{72rpx} #{24rpx};
    }

    .card {
        background-color: #fff;
        border-top-left-radius: #{16rpx};
        border-top-right-radius: #{16rpx};
        padding: #{90rpx} #{40rpx} #{24rpx};
    }

    .card-info {
        background-color: #fff;
    }

    .card-img {
        position: absolute;
        top: #{32rpx};
        left: 50%;
        margin-left: #{-44rpx};
        height: #{88rpx};
        width: #{88rpx};
        border-radius: 50%;
    }

    .card-name {
        text-align: center;
        font-size: #{50rpx};
        margin-bottom: #{40rpx};
        color: #353535;
    }

    .over {
        width: #{240rpx};
        height: #{64rpx};
        text-align: center;
        color: #999;
        font-size: #{30rpx};
        line-height: #{64rpx};
        border-radius: #{32rpx};
        background-color: #f7f7f7;
        margin: 0 auto;
    }

    .line {
        height: #{48rpx};
        width: 100%;
    }

    .line image {
        height: 100%;
        width: 100%;
    }

    .explain {
        background-color: #fff;
        padding: #{20rpx} #{40rpx};
        font-size: #{28rpx};
        color: #353535;
    }

    .explain.use-time {
        padding-bottom: #{20rpx};
    }

    .explain-title {
        font-size: #{26rpx};
        color: #999;
        margin-bottom: #{15rpx};
    }

    .qr {
        height: #{400rpx};
        width: #{400rpx};
        display: block;
        margin: 0 auto;
    }

    .qr image {
        height: 100%;
        width: 100%
    }

    .clerk-info {
        display: flex;
        flex-direction:column;

        .clerk-item {
            display: flex;
        }
    }
    .card-info-2 {
        background-color: #fff;
        border-bottom-left-radius: #{16rpx};
        border-bottom-right-radius: #{16rpx};
        padding-bottom:60#{rpx};
    }

    .clerk-history {
        display: flex;
        align-items:center;

        .history-button {
            width: 125#{rpx};
            height: 48#{rpx};
            border-radius: 30#{rpx};
            margin-left:10#{rpx};
            font-size:#{22rpx};
            color: #ac450d;
            background: #ffeda9;
            display: flex;
            justify-content:center;
            align-items: center;
        }
    }
</style>