yihuo/pages/exchange/buy_confirm.vue

<template>
    <view class="cu-modal" :class="{ show: visible }">
        <view class="mask" @click="close"></view>
        <view class="cu-dialog" style="background-color: transparent; width: 100%">
            <view class="relative wrapper">
                <view v-if="type === 0" class="text">是否要合成蛋糕</view>
                <view v-else class="text">是否要购买材料《{{ material }}》</view>
                <view class="cancel">
                    <image :src="resource.doll_btn_cancel" class="x" @click="close" />
                </view>
                <view class="confirm">
                    <image :src="resource.doll_btn_confirm" class="x" @click="submit" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'
export default {
    data() {
        return {
            resource,
            visible: false,
            id: null,
            material: '',
            type: 1
        }
    },
    methods: {
        show(data) {
            if (data === 0) {
                this.type = data
            } else {
                this.id = data.id
                this.material = data.name
            }

            this.visible = true
        },
        close() {
            this.visible = false
        },
        submit() {
            this.visible = false
            if (this.type === 0) {
                this.$emit('submit', this.type)
            } else {
                this.$emit('submit', this.id)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
    width: 566rpx;
    height: 300rpx;
    background-color: #a4bef3;
    border: 10rpx solid #0035d9;
    border-radius: 48rpx;
    margin: 220rpx 92rpx 0;
}
.text {
    font-size: 40rpx;
    color: #fff;
    margin: 58rpx auto 0;
    text-align: center;
}
.cancel {
    position: absolute;
    bottom: 30rpx;
    left: 42rpx;
}
.confirm {
    position: absolute;
    bottom: 30rpx;
    right: 42rpx;
}
.x {
    width: 232rpx;
    height: 88rpx;
}
</style>