yuncaijiao_applet/pages/card/card-2023-12-13.vue

<template>

    <view style="display: flex;flex-direction: column;">

        <view class="top">
            <NavBar ref="nav" navTitle="首页" :showIcon="false" :start-change-height="page.startHeight"
                :end-change-height="page.endHeight">
            </NavBar>
            <view style="display: flex;flex-direction: column;align-items: center;">
                <view class="btn" @click="bind">
                    <image src="https://ordermall.yxtsoft.com/lpkui/image/binding.png"
                        style="width: 15px;height: 15px;">
                    </image>
                    <text
                        style="height: 45px;line-height: 45px;font-size: 17px; text-align: center;color: #FE6B00;margin-left: 11px;">绑定新卡</text>
                </view>
            </view>
        </view>

        <view
            style="display: flex;flex-direction: column;background-color: #fff;height: 50vh; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;">

            <z-paging ref="paging" use-page-scroll v-model="data" @query="queryList" :refresher-enabled="false">

                <view v-for="(item,index) in data" :key="index"
                    style="display: flex;flex-direction: column;align-items: center;margin-top: 14px;"
                    :class="item.showBtn==true?'oragin':'gray'" @click="detail(item)">

                    <view class="item" :class="{ item2: !item.showBtn }">

                        <!-- 外边 18px 内边 32px = 50px -->
                        <view
                            style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;">

                            <!-- 礼包图标 总60px -->
                            <view style="flex-shrink: 0;">
                                <image src="https://ordermall.yxtsoft.com/lpkui/image/pack.png" mode="aspectFill"
                                    v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" />

                                <image src="https://ordermall.yxtsoft.com/lpkui/image/pack2.png" mode="aspectFill"
                                    v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" />
                            </view>

                            <view
                                style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;">

                                <view style="width: 100%;display: flex;flex-direction: row;">

                                    <view style="flex: 1;display: flex;flex-direction: column;">
                                        <text class="_ellipsis"
                                            style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号:
                                            {{item.serialNumber}}</text>
                                        <text class="_ellipsis"
                                            style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);">
                                            {{item.time}}</text>
                                    </view>

                                    <!-- 按钮 24 + 48 = 72px-->
                                    <view :class="{ showBtn: !item.showBtn }" style="font-size: 12px;color:#fff;flex-shrink: 0;
										border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px;box-sizing: border-box;
									 background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view>
                                </view>

                                <!-- 蔬菜礼包经典款+状态 -->
                                <view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
                                    <text style="font-size: 15px;color: #FF7100;"> {{item.pname}}</text>
                                    <text
                                        style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding:  3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;">
                                        {{item.state}}</text>
                                </view>

                            </view>

                        </view>

                    </view>

                </view>

            </z-paging>
        </view>
    </view>

</template>

<script>
    export default {
        data() {
            return {
                page: {
                    remarks: '',
                    startHeight: 0,
                    endHeight: 0
                },
                data: [],
            }
        },
        onLoad() {
            uni.$on("order", (e) => {
                // 相当与下拉刷新
                this.$refs.paging.reload(true);
            })
            let info = uni.getSystemInfoSync();

            this.page.startHeight = info.windowWidth * 0.6
            this.page.endHeight = info.windowWidth * 0.8
        },
        onUnload() {
            uni.$off('order');
        },
        onPageScroll(res) {
            // 渐变
            this.$refs.nav.defaultColorBgAlpha(res)
        },
        methods: {
            // 分页的请求
            queryList(pageNo, pageSize) {
                let _this = this
                _this.$api.cardList({
                    "current": pageNo,
                    "size": pageSize,
                    "params": {
                        "customerSid": getApp().globalData.sid
                    }
                }).then((resp) => {
                    // 添加数据源
                    this.$refs.paging.complete(resp.records)
                }).catch(e => {
                    // 出错了，点击重试
                    _this.$refs.paging.complete(false);
                })
            },
            dialogInputConfirm(val) {
                // 网络请求 绑定
            },
            bind() {
                uni.navigateTo({
                    url: '/pages/card/card_bind'
                })
            },
            detail(item) {

                if (item.showBtn) {
                    // 正常
                    uni.navigateTo({
                        url: '/pages/card/card_detail?sid=' + item.sid
                    })
                } else {
                    // 过期 已完成
                    uni.navigateTo({
                        url: '/pages/card/card_detail2?sid=' + item.sid
                    })
                }

            },
            booking(item) {

                if (!item.notRese) {
                    this.shortToast("该卡商品已全部预约。")
                    return
                } else {
                    uni.navigateTo({
                        url: '/pages/card/card_booking?sid=' + item.sid
                    })
                }

            }
        }
    }
</script>

<style>
    ._ellipsis {
        overflow-wrap: break-word;
    }

    .top {
        width: 100vw;
        /* height: 126.66vw; */
        height: 85vw;
        /* 加载背景图 */
        background-image: url(https://ordermall.yxtsoft.com/lpkui/image/hmoe_bj.png);
        /* 让背景图基于容器大小伸缩 */
        background-size: 100% 100%;
    }

    .btn {
        /* margin-top: 97.86vw; */
        margin-top: 60vw;
        width: 83%;
        background-color: #FFF;
        border-radius: 45px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .item {
        /* 加载背景图 */
        background-image: url(https://ordermall.yxtsoft.com/lpkui/image/card_item.png);
        /* 让背景图基于容器大小伸缩 */
        background-size: 100% 100%;
        width: calc(100% - 18px);
    }

    .item2 {
        /* 加载背景图 */
        background-image: url(https://ordermall.yxtsoft.com/lpkui/image/card_item2.png);
        /* 让背景图基于容器大小伸缩 */
        background-size: 100% 100%;
        width: calc(100% - 18px);
    }

    .showBtn {
        visibility: hidden;
    }

    .use {
        display: flex;
        flex-direction: row;
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
        color: #FFF;
        align-items: center;
        background: linear-gradient(89.8deg, rgba(218, 51, 33, 1) -3.76%, rgba(237, 113, 53, 0) 300.05%);
    }

    .gray {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        transition: filter 0.2s;
    }



    .oragin {}

    uni-page-body,
    page {
        background: #FFFFFF;
    }
</style>