football/pages/card/index/index.vue

f<template>
    <app-layout>
        <app-tab-nav :tabList="tabList" :activeItem="activeTab" @click="tabStatus" :theme="theme"></app-tab-nav>
        <view class="card-list">
            <view @click="toDetail(item.id)" v-for="item in list" :key="item.id">
                <view class="card-item">
                    <image class="card-img" :src="item.pic_url"></image>
                    <view class="name">{{item.name}}</view>
                    <view class="right-box">
                        <image v-if="item.is_may_use == 1"
                               class="card-qr"
                               @click.stop="showModal(item.id)"
                               src="/static/image/icon/icon-card-qrcode.png"
                        ></image>
                        <span>{{activeTab == 3 ? '未核销' : '剩余'}}{{item.surplus_number}}次</span>
                    </view>
                </view>
            </view>
        </view>
        <view class="no-list" v-if="list.length === 0">
            <app-no-goods background="#f7f7f7" :title="title"></app-no-goods>
        </view>
        <view class="qr-modal" @click="show=false" v-if="show">
            <view class="look-qr" @click.stop="showModal(0)">
                <view>卡券二维码</view>
                <view>
                    <image :src="img"></image>
                </view>
                <view style="height: 60rpx">
                    <view @click="saveImg">
                        <button :class="[`${theme}-background`]">保存图片</button>
                    </view>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import appTabNav from "../../../components/basic-component/app-tab-nav/app-tab-nav.vue";
    import appNoGoods from '../../../components/page-component/app-no-goods/app-no-goods.vue';

    import { mapState } from "vuex";

    export default {
        data() {
            return {
                tabList: [
                    {id:1, name: '未使用'},
                    {id:2, name: '已使用'},
                    {id:3, name: '已过期'}
                ],
                show: false,
                img: '/images/share/img-share-order.png',
                activeTab: 1,
                list: [],
                more: false,
                page: 2,
                title: '暂无未使用优惠券~'
            }
        },
        components: {
            'app-tab-nav': appTabNav,
            'app-no-goods': appNoGoods,
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
                userInfo: state => state.user.info,
            })
        },
        methods: {
            saveImg() {
                let that = this;
                // #ifndef MP-ALIPAY
                uni.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success(res) {
                        if (res.errMsg == "authorize:ok") {
                            uni.downloadFile({
                                url: that.img,
                                success(res) {
                                    uni.saveImageToPhotosAlbum({
                                        filePath: res.tempFilePath,
                                        success() {
                                            uni.showToast({
                                                title: '保存成功',
                                                icon: 'success',
                                                duration: 1000
                                            })
                                        },
                                        fail() {
                                            uni.showToast({
                                                title: '保存失败',
                                                icon: 'none',
                                                duration: 1000
                                            })
                                        }
                                    })
                                }
                            })
                        }
                    },
                    fail(res) {
                        uni.showModal({
                            title: '提示',
                            content: '保存失败，需要授权保存到相册权限',
                            showCancel: false,
                            confirmText: '打开授权',
                            success(e) {
                                if (e.confirm) {
                                    uni.openSetting({});
                                }
                            }
                        });
                    }
                })
                // #endif
                 // #ifdef MP-ALIPAY
                my.showLoading({
                    content: '图片保存中'
                });
                my.saveImage({
                    url: that.img,
                    showActionSheet: true,
                    success: (res) => {
                        uni.showToast({
                            title: '保存成功',
                            icon: 'success',
                            duration: 1000
                        })
                    },
                    fail() {
                        uni.showToast({
                            title: '保存失败',
                            icon: 'none',
                            duration: 1000
                        })
                    },
                    complete() {
                        my.hideLoading();
                    }
                });
                // #endif
            },

            showModal(id) {
                let that = this;
                if(id > 0) {
                    uni.showLoading({
                        text: '生成中...'
                    });
                    that.$request({
                        url: that.$api.card.qrcode,
                        data: {
                            cardId: id,
                        },
                        method: 'get'
                    }).then(response => {
                        uni.hideLoading();
                        if (response.code === 0) {
                            that.show = true;
                            that.img = response.data.file_path;
                        } else {
                            uni.showToast({
                                title: response.msg,
                                icon: 'none',
                                duration: 1000,
                            });
                        }
                    }).catch(response => {
                        uni.hideLoading();
                        uni.showToast({
                            title: response,
                            icon: 'none',
                            duration: 1000,
                        });
                    });
                }
            },

            tabStatus(e) {
                this.list = [];
                let id = e.currentTarget.dataset.id;
                if (id === 1) {
                    this.title = `暂无未使用优惠券~`;
                } else if (id === 2) {
                    this.title = `暂无已使用优惠券~`;
                } else if (id === 3) {
                    this.title = `暂无已过期优惠券~`;
                }
                this.page = 2;
                this.activeTab = id;
                this.getList();
            },
            getList() {
                let that = this;
                that.$showLoading({
                    text: '加载中...'
                });
                that.$request({
                    url: that.$api.card.index,
                    data: {
                        status: that.activeTab
                    },
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code === 0) {
                        that.list = response.data.list;
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(() => {
                    that.$hideLoading();
                    that.$event.on(that.$const.EVENT_USER_LOGIN).then(()=>{
                        that.getList();
                    });
                });
            },
            getMore() {
                let that = this;
                uni.showLoading({
                    title: '加载中...',
                });
                that.$request({
                    url: that.$api.card.index,
                    data: {
                        page: that.page,
                        status: that.activeTab
                    },
                }).then(response=>{
                    uni.hideLoading();
                    if(response.code === 0) {
                        if(response.data.list.length > 0) {
                            that.loading = null;
                            that.list = that.list.concat(response.data.list);
                            that.page++;
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000,
                        });
                    }
                }).catch(() => {
                    that.$hideLoading();
                });
            },
            toDetail(id) {
                uni.navigateTo({
                    url: `/pages/card/details/details?id=${id}`
                });
            },
        },
        onLoad() {
            this.getList();
        },
        onReachBottom() {
            this.getMore();
        }
    }
</script>

<style scoped lang="scss">
    .no-list {
        margin-top: #{150upx};
    }
    .card-list {
        width: 100%;
        padding-top: #{10rpx};
        background-color: #f7f7f7;
    }

    .card-item {
        height: #{180rpx};
        margin: #{20rpx};
        background-color: #fff;
        color: #353535;
        font-size: #{30rpx};
        display: flex;
        align-items: center;
        border-radius: 16#{rpx};

        .name {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 402#{rpx};
            margin-left:35#{rpx};
        }

        .card-img {
            height: #{88rpx};
            width: #{88rpx};
            border-radius: 50%;
            margin-left:24#{rpx};
        }

        .right-box {
            margin: #{65rpx} #{35rpx};
            display: flex;
            flex-direction:column;
            align-items: center;

            .card-qr {
                height: #{50rpx};
                width: #{50rpx};
            }

            span {
                font-size:20#{rpx};
                color: #353535;
                margin-top:10#{rpx};
            }
        }
    }

    .qr-modal {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        height: 100%;
        width: 100%;
        z-index: 2;
    }

    .look-qr {
        position: absolute;
        background-color: #fff;
        width: #{550rpx};
        height: #{700rpx};
        left: 50%;
        margin-left: #{-275rpx};
        top: 20%;
        border-radius: #{10rpx};
        text-align: center;
        padding: #{50rpx};
        font-size: #{34rpx};
        color: #353535;
    }

    .look-qr image {
        margin-top: #{25rpx};
        height: #{450rpx};
        width: #{450rpx};
    }

    .look-qr button {
        margin-top: #{15rpx};
        height: #{60rpx};
        line-height: #{60rpx};
        color: #fff;
        font-size: #{28rpx};
        width: #{200rpx};
    }
</style>