yihuo/pages/store/gift_all.vue

<template>
    <view class="cu-modal" :class="{ show: visible }">
        <view class="mask" @click="close"></view>
        <view class="cu-dialog wrapper">
            <view class="content">
                <view class="marginT15 title">确认好友</view>
                <view style="margin: 25px 15px">
                    <input
                        v-model="inputVal"
                        class="uni-input flex1 marginX10 color-white input"
                        placeholder="请输入好友ID"
                    />
                </view>
                <view class="flex-align-center paddingB15">
                    <cm-button :height="35" style="width: 400rpx" @click="apply()">确认</cm-button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { LEVEL_MAP } from '@/utils/config'
import { throttle } from '@/utils'
import resource from '@/utils/resource'
import cmButton from '../../components/cm-button.vue'
export default {
    components: { cmButton },
    data() {
        return {
            resource,
            LEVEL_MAP,
            visible: false,
            inventoryIds: [],
            inputVal: ''
        }
    },
    computed: {
        itemSize() {
            let width = (this.$store.state.systemInfo.screenWidth - 80 - 30 - 8) / 3
            let height = (132 / 88) * width
            return { width, height }
        }
    },
    methods: {
        show(ids) {
            this.inventoryIds = ids
            this.visible = true
        },
        async apply() {
            if (this.inputVal) {
                throttle.call(this.realApply)
            } else {
                this.$message.warn('受赠人不能为空！')
            }
        },
        async realApply() {
            const res = await this.$service.award.transferOrderPreSubmit({
                inventoryIds: this.inventoryIds,
                toUserShortId: this.inputVal
            })
            if (res.code === '0') {
                this.$emit('giftSuccess', res.data, {
                    inventoryIds: this.inventoryIds,
                    toUserShortId: this.inputVal
                })
                this.close()
            } else {
                this.$message.error(res.msg)
            }
        },
        close() {
            this.visible = false
        }
    }
}
</script>
<style lang="scss" scoped>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
    width: 100%;
    background: transparent;
    .content {
        margin: 0 20px;
        background: #000000;
        border-radius: 16rpx;
        border: 4rpx solid;
        border-image: linear-gradient(180deg, rgba(89, 55, 195, 1), rgba(169, 27, 136, 1)) 2 2;
        .title {
            font-size: 20px;
            font-family: Helvetica;
            color: #ffffff;
            line-height: 26px;
            font-style: italic;
            text-align: center;
            text-shadow: 0px 2px 4px #a76ef4;
        }
        .input {
            height: 80rpx;
            line-height: 50rpx;
            border: 1px solid;
            border-image: linear-gradient(180deg, rgba(89, 55, 195, 1), rgba(169, 27, 136, 1)) 2 2;
            padding-left: 15rpx;
        }
        .item {
            margin: 0 13px 13px 0;
            position: relative;
            .super {
                position: absolute;
                z-index: 0;
                left: 0;
                top: 0;
            }
            .super-image {
                position: absolute;
                top: 6px;
            }
            .super-text {
                width: 125rpx;
                height: 48rpx;
                position: absolute;
                bottom: 10rpx;
            }
            .bg-title {
                color: #fff;
                font-size: 22rpx;
                text-align: center;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 60rpx;
                // padding: 2rpx 0;
            }
        }
    }
}
</style>