yihuo/pages/weal_create/index.vue

<template>
    <page title="创建房间" ref="pageRef" nav-color="#fff">
        <!-- <view
            class="pagae-nav"
            :style="{ paddingTop: statusBarHeight + 'px', background: headerBg }"
        >
            <view class="flex-align-center relative" style="height: 80rpx">
                <text class="cuIcon-back back" @click.stop="back"></text>
                <view class="title line-ellipsis">创建房间</view>
            </view>
        </view> -->
        <view>
            <view class="flex-align toolInfo">
                <view class="cuIcon-infofill"></view>
                <view class="marginL8">房间名称及房间介绍不得带有宣传与本平台无关的内容</view>
            </view>
            <view class="content-wrapper">
                <view class="flex-align paddingY12 line">
                    <view class="title">房间名：</view>
                    <view class="flex1">
                        <input
                            v-model="name"
                            placeholder="输入房间名称，最多15个汉字"
                            class="input"
                            maxlength="15"
                        />
                    </view>
                </view>
                <view class="flex-align paddingY12 line">
                    <view class="title">活动介绍：</view>
                    <view class="flex1">
                        <input
                            v-model="description"
                            placeholder="输入活动介绍，最多15个汉字"
                            class="input"
                            maxlength="15"
                        />
                    </view>
                </view>
                <view class="flex-align paddingY12 line">
                    <view class="title">进房口令：</view>
                    <view class="flex1">
                        <input
                            v-model="password"
                            placeholder="(可选)用户输入口令才能进房间"
                            class="input"
                            maxlength="15"
                        />
                    </view>
                </view>
                <view v-if="!!password" class="flex-align paddingY12 line">
                    <view class="title">参加模式：</view>
                    <view class="flex1 flex-align-around">
                        <view class="flex-align" @click="mode = 0">
                            <image
                                :src="mode == 0 ? resource.icon_check : resource.icon_un_check"
                                style="width: 32rpx; height: 32rpx"
                            />
                            <view class="font4 marginL5">进房即参加</view>
                        </view>
                        <view class="flex-align" @click="mode = 1">
                            <image
                                :src="mode == 1 ? resource.icon_check : resource.icon_un_check"
                                style="width: 32rpx; height: 32rpx"
                            />
                            <view class="font4 marginL5">审核后参加</view>
                        </view>
                    </view>
                </view>
                <view class="flex-align paddingY12 line" @click="showTime">
                    <view class="title">开奖时间：</view>
                    <view class="flex1" :style="{ color: luckTime ? '#000' : '#777778' }">
                        {{ luckTime || '设置开奖时间(一个月内)' }}
                    </view>
                </view>
                <view class="paddingY12">
                    <view class="title">赠品：</view>
                    <view class="flex-wrap paddingT17 flex-align">
                        <view v-for="(item, index) in goodsList" :key="item.id" class="item">
                            <view class="marginT11 flex-align-center">
                                <image :src="item.spu.cover" mode="aspectFill" class="image" />
                            </view>
                            <image
                                :src="LEVEL_MAP[item.level].titleImg"
                                class="title-level translateX"
                            />
                            <view
                                class="minus cuIcon-roundclosefill"
                                @click="minus(item, index)"
                            ></view>
                        </view>
                        <view class="add flex-column-align-center" @click="showStoreChoose">
                            <view class="cuIcon-roundadd icon"></view>
                            <view class="font4 paddingT18">选择赠品</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="bottom-wrapper">
                <view class="paddingB15 flex-align-center">
                    <view class="font3 flex-align" @click="showWeb">
                        阅读并同意
                        <text class="color-theme">《福利房使用协议》</text>
                    </view>
                    <switch
                        class="purple marginL10"
                        @change="changeChecked"
                        :checked="checked"
                    ></switch>
                </view>
                <view class="flex-align-center">
                    <view class="btn-create" @click="submit">确认创建</view>
                </view>
            </view>
        </view>
        <yu-datetime-picker ref="dateTime" current @confirm="onConfirm"></yu-datetime-picker>
    </page>
</template>

<script>
    import resource from '@/utils/resource'
    import yuDatetimePicker from '@/components/yu-datetime-picker'
    import { LEVEL_MAP } from '@/utils/config'
    import { H5 } from '@/utils/config'

    export default {
        components: { yuDatetimePicker },
        data() {
            return {
                resource,
                LEVEL_MAP,
                goodsList: [],
                goodsMap: {},
                name: '',
                mode: 0,
                description: '',
                password: '',
                luckTime: '',
                checked: true
            }
        },
        onLoad(options) {
            this.$event.on(this.$event.key.STORE_CHOOSE, (map) => {
                this.goodsMap = map
                this.goodsList = Object.values(map)
            })
        },
        onUnload() {
            this.$event.off(this.$event.key.STORE_CHOOSE)
        },
        methods: {
            onConfirm(e) {
                this.luckTime = e.selectRes
            },
            minus(item, index) {
                delete this.goodsMap[item.id]
                this.goodsList.splice(index, 1)
                this.goodsList = [...this.goodsList]
            },
            showTime() {
                this.$refs.dateTime.show()
            },
            showStoreChoose() {
                this.$cache.set(this.$cache.key.STORE_CHOOSE, this.goodsMap)
                this.$router.push('store-choose')
            },
            changeChecked(e) {
                this.checked = e.detail.value
            },
            showWeb() {
                this.$router.web(H5.room.url, H5.room.title)
            },
            submit() {
                if (!this.name || !this.description || !this.luckTime) {
                    this.$message.error('请完善表单')
                    return
                }
                if (!this.goodsList || this.goodsList.length === 0) {
                    this.$message.error('请完善赠品')
                    return
                }
                if (!this.checked) {
                    this.$message.error('请勾选协议')
                    return
                }
                this.$message.confirm('确定要创建房间吗？', () => {
                    this.realSubmit()
                })
            },
            async realSubmit() {
                const param = {
                    description: this.description,
                    inventoryIds: this.goodsList.map((item) => item.id),
                    luckTime: this.luckTime,
                    name: this.name,
                    password: this.password
                }
                if (!!this.password) {
                    param.participateMode = this.mode
                }
                const res = await this.$service.weal.create(param)
                if (res) {
                    this.$event.emit(this.$event.key.WEAL_REFRESH)
                    this.$router.back()
                }
            }
        }
    }
</script>
<style></style>
<style lang="scss" scoped>
    .wrapper {
        padding-bottom: 260rpx;
    }

    .content-wrapper {
        margin: 0 14px;
        padding-bottom: 260rpx;
        .title {
            width: 160rpx;
            font-size: 28rpx;
        }

        .line {
            // box-shadow: inset 0px 2rpx 20rpx 60rpx rgba(0,0,0,0.55);
            border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
        }

        .item,
        .add {
            width: 192rpx;
            height: 256rpx;
            border-radius: 8rpx;
            margin-right: 20rpx;
            position: relative;
            background: #f0f0f0;
            margin-block: 20rpx;
            .icon {
                font-size: 28rpx;
            }
        }

        .item {
            .image {
                width: 156rpx;
                height: 194rpx;
                border-radius: 8rpx;
            }

            .num {
                position: absolute;
                left: 0;
                top: 0;
                height: 24rpx;
                line-height: 24rpx;
                border-radius: 8rpx 0px 8rpx 0px;
                font-size: 24rpx;
                font-weight: bold;
                padding: 0 24rpx;
                color: #fff;
            }

            .title-level {
                position: absolute;
                bottom: 16rpx;
                width: 90rpx;
                height: 32rpx;
            }

            .minus {
                position: absolute;
                right: -5rpx;
                top: -10rpx;
                font-size: 32rpx;
            }
        }
    }

    .bottom-wrapper {
        padding-bottom: 48rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        padding-top: 20rpx;
    }

    .btn-create {
        width: 426rpx;
        height: 64rpx;
        background: #fec433;
        border-radius: 178rpx 178rpx 178rpx 178rpx;
        font-size: 28rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        color: #000000;
        text-align: center;
        line-height: 64rpx;
    }

    .input {
        height: 32rpx;
    }
    .toolInfo {
        color: #000;
        padding: 20rpx;
        background: #f0cd49;
        font-size: 24rpx;
        text-align: center;
    }
</style>