yihuo/pages/store/gift_confirm.vue

<template>
    <view class="cu-modal bottom-modal" :class="{'show': visible}">
        <view class="mask" @click="close"></view>
        <view class="wrapper cu-dialog">
            <view class="paddingY25 flex-align-center relative">
                <view class="font10 color-theme">
                    确认赠送吗？
                </view>
                <image :src="resource.icon_x" class="x" @click="close" />
            </view>
            <view>
                <view class="paddingB20">
                    <scroll-view scroll-x class="scroll-wrapper" v-if="goods.length > 4">
                        <view class="item" v-for="(goods, index) in goods" :key="index">
                            <image class="super-image translateX" mode="aspectFit" :src="goods.cover" />
                        </view>
                    </scroll-view>
                    <view v-else class="flex-align-around">
                        <view class="item" v-for="(goods, index) in goods" :key="index">
                            <image class="super-image translateX" mode="aspectFit" :src="goods.cover" />
                        </view>
                    </view>
                </view>
            </view>
            <view class="bottom flex-align-between color-white" >
                <view class="left">受赠人:</view>
                <view class="right flex-align">
                    <image class="img" :src="userData.avatar" mode="aspectFit" />
                    <view class="">{{ userData.nickname }}</view>
                </view>
            </view>
            <view class="gift_text">
                一键转赠仅用于好友间转赠商品，不提供其他任何场景使用，若因操作不当或过分使用造成的损失，本平台概不负责。
            </view>
            <cm-button ::height="44" @click="submit()">确认赠送</cm-button>
            <view class="fill"> </view>
        </view>
    </view>
</template>

<script>
import cmButton from '../../components/cm-button.vue'
import resource from '@/utils/resource'

export default {
    components: { cmButton },
    data() {
        return {
            resource,
            visible: false,
            goods: [],
            userData: [],
            param: {}
        }
    },
    mounted() {},
    methods: {
        show(data, goods,param) {
            this.goods = goods
            this.userData = data.toUser
            this.param = param
            this.visible = true
        },
        close() {
            this.visible = false
            this.$emit('close', false)
        },
        async submit() {
            const res = await this.$service.award.transferOrderSubmit(this.param)
            if (res.code === '0') {
                this.$emit('success')
                this.close()
            } else {
                this.$message.error(res.msg)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
    padding: 0 28rpx;
    background: #171b1e;
    border-radius: 15px 15px 2px 2px;
    .title {
        width: 172rpx;
        height: 28rpx;
    }
    .x {
        position: absolute;
        right: 28rpx;
        top: 50%;
        margin-top: -16rpx;
        width: 32rpx;
        height: 32rpx;
    }
    .fill {
        height: 50rpx;
    }
}
.scroll-wrapper {
    padding-left: 28rpx;
    overflow: hidden;
    height: 182rpx;
    white-space: nowrap;
    width: 100%;
    .item {
        display: inline-block;
        margin-right: 8rpx;
    }
}
.item {
    width: 120rpx;
    height: 182rpx;
    position: relative;
    .super {
        position: absolute;
        z-index: 0;
        left: 0;
        top: 0;
        width: 120rpx;
        height: 182rpx;
    }
    .super-image {
        position: absolute;
        top: 14rpx;
        width: 109rpx;
        height: 120rpx;
    }
    .bg-title {
        color: #fff;
        font-size: 24rpx;
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 16rpx;
        // padding: 2rpx 0;
    }
}
.bottom {
    height: 60rpx;
    margin-bottom: 10rpx;
    .left {
        width: 100rpx;
    }
    .right {
        .img {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            margin-right: 10rpx;
        }
    }
}
.gift_text {
    color: #999;
    font-size: 22rpx;
    margin-bottom: 20rpx;
}
</style>