ysdH5/pages/userStored/index.vue

<template>
    <view>
        <block v-if="storedArr.length > 0">
            <image class="userStoredBack" src="https://card.ysd-bs.com/storage/materials/2021/09/01/userStored_back.png" mode="widthFix"></image>
            <view class="userStored">
                <view class="userStoredCont">
                    <image src="https://card.ysd-bs.com/storage/materials/2021/09/01/userStored_icon.png" class="userStoredCont-back"></image>
                    <image src="https://card.ysd-bs.com/storage/materials/2021/09/01/userStored_text.png" class="userStoredCont-text"></image>
                    <view class="userStoredCont-list">
                        <view class="userStoredCont-label" v-for="(item, index) in storedArr" :key="index">
                            <view class="userStoredCont-title">
                                <text>{{ item.title }}</text>
                                <view class="userStoredCont-title-tips">消费红包</view>
                            </view>
                            <view class="userStoredCont-brief">
                                {{ item.text }}<text>（{{ item.qty }}张{{ item.worth }}元）</text>
                            </view>
                            <view class="userStoredCont-rights">
                                <view class="userStoredCont-rights-left">
                                    <image src="https://card.ysd-bs.com/storage/materials/2021/09/01/userStored_img_00.png" class="userStoredCont-fireworks"
                                        mode="widthFix">
                                    </image>
                                    <view class="userStoredCont-tips">
                                        <image src="https://card.ysd-bs.com/storage/materials/2021/09/01/userStored_img_01.png" class="userStoredCont-rights-back"
                                            mode="widthFix"></image>
                                        <text>{{ item.coupon_name }}</text>
                                    </view>
                                    <view class="userStoredCont-price">
                                        <text>￥{{ item.worth }}</text>(满{{ item.full }}减{{ item.worth }})
                                    </view>
                                </view>
                                <view @tap="userNav(item.right_config_id)" class="userStoredCont-rights-btn">立即儲值</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </block>
        <view class="pack-center pages-hint" v-else>
            <image src="/static/img/staff_null.png"></image>
            <view>暂无数据</view>
        </view>
        
        <!-- 漂浮窗 -->
        <movable-area class="indexFloat" v-if="canShare">
            <movable-view y="400" direction="vertical" class="indexFloat-movable">
                <navigator hover-class="none" url="/pages/userStored/storedCode" class="indexFloat-img">
                    <image src="https://card.ysd-bs.com/storage/materials/2021/09/01/index_float_01.png" mode="aspectFill"></image>
                </navigator>
            </movable-view>
        </movable-area>
    </view>
</template>

<script>
    import { storedList } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                canShare    : '',   //分享按钮状态
                storedArr   : [],   //储值权益列表,
                parentId    : '',   //分享者id
    		}
    	},
        onLoad(options) {
            if(options.type){
                getApp().globalData.shareObj = {
                    type    : options.type,
                    goodsId : '',
                    userId  : options.parent_id
                }
            }
        },
        onShow(){
            // 获取产品详情
            this.storedShow();
        },
        methods: {
            // 产品详情
            storedShow(){
                storedList().then(res=>{
                    this.canShare  = res.canShare
                    this.storedArr = res.list
                }).catch(err=>{})
            },
        
            // 处理未登录时的转跳
            userNav(id){
                if(uni.getStorageSync("token")) {
                    uni.navigateTo({
                        url: '/pages/rights/index?id=' + id + '&orderType=shareStored'
                    })
                } else {
                    // 去登录
                    uni.navigateTo({
                        url: "/pages/auth/login?way=shareLogin"
                    })
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .userStoredBack {
        width: 100%;
    }
    
    .userStored {
        padding: 0 30rpx;
        box-sizing: border-box;
    }
    
    .userStoredCont {
        background: linear-gradient(to bottom, #e3d6c4, #bca585);
        border-radius: 20rpx;
        position: relative;
        margin-top: -220rpx;
        height: 1020rpx;
        padding: 20rpx 0;
        box-sizing: border-box;
    }
    
    .userStoredCont-back,
    .userStoredCont-text {
        position: absolute;
    }
    
    .userStoredCont-back {
        width: 70%;
        right: 0;
        top: 0;
    }
    
    .userStoredCont-text {
        width: 420rpx;
        height: 192rpx;
        left: 20rpx;
        top: 40rpx;
        z-index: 1;
    }
    
    .userStoredCont-list {
        background-color: #fefbf4;
        border-radius: 20rpx;
        position: absolute;
        top: 260rpx;
        left: 30rpx;
        right: 30rpx;
        width: calc(100% - 60rpx);
        padding: 30rpx 30rpx 0;
        box-sizing: border-box;
    }
    
    .userStoredCont-label {
        margin-bottom: 30rpx;
        padding-bottom: 40rpx;
        height: 300rpx;
        border-bottom: #e8bd94 solid 2rpx;
    }
    
    .userStoredCont-label:last-child {
        border: none;
    }
    
    .userStoredCont-title {
        display: flex;
        text {
            font-size: 48rpx;
            color: #806136;
        }
    }

    .userStoredCont-title-tips {
        background-color: #fb5734;
        color: #ffffff;
        border-radius: 80rpx;
        font-size: 28rpx;
        height: 42rpx;
        line-height: 42rpx;
        margin: 17rpx 0 0 20rpx;
        padding: 0 15rpx;
    }
    
    .userStoredCont-brief {
        margin: 30rpx 0;
        color: #ca9c5a;
        text {
            font-size: 22rpx;
        }
    }
    
    .userStoredCont-rights {
        display: flex;
    }
    
    .userStoredCont-rights-left {
        background: linear-gradient(to top, #f6e4ca, #e4c6a3);
        width: calc(100% - 230rpx);
        margin-right: 30rpx;
        height: 140rpx;
        border-radius: 10rpx;
        position: relative;
    }
    
    .userStoredCont-price {
        color: #806136;
    }
    
    .userStoredCont-tips {
        width: 100%;
        height: 44rpx;
        top: 10rpx;
        right: 0;
        position: absolute;
        text-align: center;
        color: #ffffff;
        image,
        text {
            position: absolute;
            height: 100%;
            top: 0;
        }
        text {
            width: 58%;
            z-index: 2;
            font-size: 25rpx;
            right: 0rpx;
            line-height: 44rpx;
            text-align: center;
            box-sizing: border-box;
        }
        image {
            width: 70%;
            right: -10rpx;
        }
    }
    
    .userStoredCont-price {
        position: absolute;
        bottom: 15rpx;
        left: 20rpx;
        z-index: 3;
    }
    
    .userStoredCont-price {
        font-size: 24rpx;
        text {
            font-size: 46rpx;
            padding-right: 10rpx;
        }
    }
    
    .userStoredCont-fireworks {
        position: absolute;
        width: 84rpx;
        height: 84rpx;
        left: 10rpx;
        bottom: 15rpx;
        z-index: 1;
    }
    
    .userStoredCont-rights-btn {
        background-color: #222222;
        color: #ffffff;
        width: 200rpx;
        text-align: center;
        height: 70rpx;
        line-height: 70rpx;
        margin-top: 35rpx;
    }
    
    
    /* 漂浮弹出层 */
    .indexFloat {
        position: fixed;
        height: 70%;
        width: 130rpx;
        right: 20rpx;
        bottom: 40rpx;
        z-index: 99;
    }
    
    .indexFloat-movable {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 150rpx;
        z-index: 99;
        image {
            width: 130rpx;
            height: 130rpx;
            margin-bottom: 20rpx;
        }
    }
</style>