yihuo/pages/weal_detail/join.vue

<template>
    <view class="cu-modal" :class="{ show: visible }">
        <view class="cu-dialog wrapper">
            <view class="content">
                <image :src="ossurl.welfare.passwordDiaolgTitle" mode="widthFix" class="image" />

                <view class="contentWrapper">
                    <view class="input-wrapper marginB20 flex-align paddingX10">
                        <input v-model="password" class="flex1 input" />

                        <text
                            class="cuIcon-close"
                            v-if="password"
                            @click="password = ''"
                            style="font-size: 32rpx"
                        ></text>
                    </view>
                    <view class="flex-align-between">
                        <view class="btn btnCancel" @click="close">取消</view>
                        <view class="btn btnApply" @click="apply">加入房间</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { throttle } from '@/utils'
    import ossurl from '@/utils/ossurl'
    import { WX_PUSH_MESSAGE_ID } from '@/utils/config'

    export default {
        props: {
            roomId: Number
        },
        data() {
            return {
                ossurl,
                visible: false,
                password: ''
            }
        },
        computed: {},
        methods: {
            show() {
                this.password = ''
                this.visible = true
            },
            async apply() {
                if (!this.password) return
                if (WX_PUSH_MESSAGE_ID && WX_PUSH_MESSAGE_ID.length > 0) {
                    wx.requestSubscribeMessage({
                        tmplIds: WX_PUSH_MESSAGE_ID,
                        success(res) {},
                        complete: async () => {
                            throttle.call(this.realApply)
                        }
                    })
                } else {
                    throttle.call(this.realApply)
                }
            },
            async realApply() {
                const res = await this.$service.weal.join(this.roomId, this.password)
                if (res) {
                    this.$emit('success')
                    this.close()
                } else {
                    this.password = ''
                }
            },
            close() {
                this.visible = false
            }
        }
    }
</script>
<style lang="scss" scoped>
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .wrapper {
        width: 100%;
        margin-top: -100px;
        background: transparent;
        font-size: 0;
        .content {
            margin: 0 20px;
            background-size: 100% auto;
            background-position: top;
            background-repeat: no-repeat;
            font-size: 0;
            line-height: 0;
            .image{
              width: 100%;
              margin-bottom:-2rpx;
            }
            .input-wrapper {
                margin-top:-2rpx;
                height: 100rpx;
                font-size: 32rpx;
                background-color: #f8f8f8;
                border-radius: 8rpx;
                line-height: 100rpx;
            }
            .contentWrapper {
                background-color: #fff;
                border-radius: 0 0 16px 16px;
                padding: 20rpx 60rpx 40rpx 60rpx;
            }
        }
    }
    .btn {
        width: 240rpx;
        font-size: 24rpx;
        height: 64rpx;
        text-align: center;
        color: #000;
        line-height: 64rpx;
        border-radius: 64rpx;
    }
    .btnCancel {
        background-color: #fff7e3;
    }
    .btnApply {
        background-color: #fec433;
    }
</style>