yihuo/pages/weal/room.vue

<template>
    <view class="container">
        <scroll-view
            class="scroll-wrapper"
            :scroll-y="true"
            refresher-enabled
            refresher-default-style="white"
            @refresherrefresh="pullRefresh"
            :refresher-triggered="refreshing"
            @scrolltolower="loadMore"
        >
            <view class="search-wrapper flex-align">
                <view class="searchInput">
                    <input
                        v-model="searchVal"
                        class="uni-input flex1 marginX10"
                        placeholder="输入房间名称"
                        confirm-type="search"
                        @confirm="search()"
                    />
                    <text class="cuIcon-search"></text>
                </view>
                <view class="btnList">
                    <view class="fun-wrapper flex-align-between">
                        <view
                            class="funItem"
                            @click="$router.pushCheck('weal_create_list')"
                            v-if="permission && permission.roomConfig !== 0"
                        >
                            <image :src="ossurl.welfare.add" style="width: 36rpx; height: 36rpx" />
                            <view class="funItemTitle">创建</view>
                        </view>
                        <view class="funItem" @click="$router.pushCheck('weal_record')">
                            <image :src="ossurl.welfare.mine" style="width: 36rpx; height: 36rpx" />
                            <view class="funItemTitle">我的</view>
                        </view>
                        <view class="funItem" @click="$refs.ruleRef.show()">
                            <image
                                :src="ossurl.welfare.playMethod"
                                style="width: 36rpx; height: 36rpx"
                            />
                            <view class="funItemTitle">玩法</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- <view class="roomTypeList">
                <view
                    class="roomTypeItem"
                    v-for="item of roomTab"
                    :key="item.value"
                    @click="handleChangeType(item)"
                >
                    <image
                        :src="type == item.value ? item.active : item.normal"
                        style="width: 130rpx; height: 176rpx"
                    />
                </view>
            </view> -->
			<!-- <view class="roomTypeListSection">
				<view class="center fx-c-s">
					<view class="item" v-for="item of roomTab" :key="item.value" @click="handleChangeType(item)">
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view> -->
			<view class="p30">
				<view class="roomTypeListSection fx-c-s">
				  <view class="item fx-c-c" :class="{'on':tabIndex == index}" v-for="(item,index) in roomTab" :key="item.value" @click="handleChangeType(item, index)">
					<text>{{ item.name }}</text>
				  </view>
				</view>
			</view>
			<!-- <view class="roomSection">
				<view class="center">
					<view class="item">
						
					</view>
				</view>
			</view> -->
			<view class="roomSection p30 fx-c-s-w">
				<view class="item" v-for="(item,index) in tableData" @click="showDetail(item)" :key="index" :style="'background: url(' + ossurl.welfare.itembj + ') no-repeat; background-size: 100% 100%;'">
					  <view class="top fx-c-s">
						<view class="l fx-c">
						  <image :src="item.cover" class="userImg" style="width: 32rpx;" mode="widthFix"/>
						  <view class="nickname">
						      {{ item.user.nickname }}
						  </view>
						</view>
						<view class="r">
						  <text>{{ TYPE_MAP[item.type].name }}</text>
						</view>
					  </view>
					  <view class="img">
						<!-- <image src="https://cdn.magicmart.vip/magic/image/magic_1686382300000.png" style="width: 80%; margin: 0 auto;" mode="widthFix"/> -->
						<swiper
						    class="moli-swiper"
						    :indicator-dots="false"
						    circular="true"
						    :autoplay="true"
						    interval="5000"
						    duration="500"
						>
						    <swiper-item
						        v-for="(obj, objIndex) in item.luckRoomGoodsList.slice(0, 3)"
						        :key="index"
						    >
						        <image
						            :key="objIndex"
						            :src="obj.spu.cover"
						            mode="aspectFit"
						            class="item-cover"
						        />
						    </swiper-item>
						</swiper>
					  </view>
					  <view class="text">
						<text>共{{ item.goodsQuantity }}件商品</text>
						<text>{{ item.name }}</text>
					  </view>
				</view>
			</view>
			
            <!-- <view class="roomList" style="padding: 0 9px">
                <view
                    v-for="(item, index) in tableData"
                    @click="showDetail(item)"
                    :key="index"
                    class="roomItem"
                    :style="{ backgroundImage: 'url(' + ossurl.welfare.roomBg + ')' }"
                >
                    <view class="luckRoomGoodList">
                        <swiper
                            class="moli-swiper"
                            :indicator-dots="false"
                            circular="true"
                            :autoplay="true"
                            interval="5000"
                            duration="500"
                        >
                            <swiper-item
                                v-for="(obj, objIndex) in item.luckRoomGoodsList.slice(0, 3)"
                                :key="index"
                            >
                                <image
                                    :key="objIndex"
                                    :src="obj.spu.cover"
                                    mode="aspectFit"
                                    class="item-cover"
                                />
                            </swiper-item>
                        </swiper>
                    </view>
                    <view class="infoBox">
                        <view class="roomName">
                            {{ item.name }}
                        </view>
                        <view class="roomType">
                            <image :src="TYPE_MAP[item.type].topFlag" class="flag-top" />
                            <view class="luckSize">{{ item.goodsQuantity }}件赠品</view>
                        </view>
                        <view class="roomInfo">
                            <view class="roomUser">
                                <image :src="item.cover" mode="scaleToFill" class="icon" />
                                <view class="nickname">
                                    {{ item.user.nickname }}
                                </view>
                            </view>
                            <view class="roomUserAvatar"></view>
                            <view class="fire">
                                <image
                                    :src="ossurl.welfare.fire"
                                    mode="scaleToFill"
                                    class="fireIcon"
                                />
                                {{ item.participatingList.length }}
                            </view>
                        </view>
                    </view>

                    <image
                        v-if="item.officialFlag == 1"
                        :src="ossurl.welfare.official"
                        webp
                        class="official"
                    />
                    <image
                        v-if="item.prizeMode === 1"
                        :src="ossurl.welfare.must"
                        class="must-flag"
                    />
                </view>
            </view> -->
            <empty v-if="isEmpty" :top="180" />
        </scroll-view>

        <rule ref="ruleRef" />
    </view>
</template>

<script>
    import pageMixin from './../../mixin/page'
    import ossurl from '@/utils/ossurl'
    import empty from '../../components/empty.vue'
    import rule from './rule'
    import Rule from './rule.vue'
    import resource from '@/utils/resource'
    const TYPE_MAP = {
        COMMON: {
			name: '福利营',
            itemClass: 'item1',
            topFlag: ossurl.welfare.welfareIcon,
            flag: resource.weal_room_flag1,
            btn: resource.weal_btn_1
        },
        PASSWORD: {
			name: '欧气营',
            itemClass: 'item2',
            topFlag: ossurl.welfare.passwordIcon,
            flag: resource.weal_room_flag2,
            btn: resource.weal_btn_2
        },
        ACHIEVEMENT: {
			name: '口令营',
            itemClass: 'item3',
            topFlag: ossurl.welfare.achieveIcon,
            flag: resource.weal_room_flag3,
            btn: resource.weal_btn_3
        },
        EUROPEAN_GAS: {
			name: '成就营',
            itemClass: 'item4',
            topFlag: ossurl.welfare.europeanIcon,
            flag: resource.weal_room_flag4,
            btn: resource.weal_btn_4
        }
    }
    const roomTab = [
        {
            name: '全部',
            value: '',
            normal: ossurl.welfare.all,
            active: ossurl.welfare.allActive
        },
        {
            name: '福利营',
            value: 'COMMON',
            normal: ossurl.welfare.welfare,
            active: ossurl.welfare.welfareActive
        },
        {
            name: '欧气营',
            value: 'EUROPEAN_GAS',
            normal: ossurl.welfare.european,
            active: ossurl.welfare.europeanActive
        },
        {
            name: '口令营',
            value: 'PASSWORD',
            normal: ossurl.welfare.password,
            active: ossurl.welfare.passwordActive
        },
        {
            name: '成就营',
            value: 'ACHIEVEMENT',
            normal: ossurl.welfare.achieve,
            active: ossurl.welfare.achieveActive
        }
    ]
    const roomTab2 = [
        {
            name: '全部',
            value: '',
            normal: ossurl.welfare.all,
            active: ossurl.welfare.allActive
        },

        {
            name: '欧气营',
            value: 'EUROPEAN_GAS',
            normal: ossurl.welfare.european,
            active: ossurl.welfare.europeanActive
        },

        {
            name: '成就营',
            value: 'ACHIEVEMENT',
            normal: ossurl.welfare.achieve,
            active: ossurl.welfare.achieveActive
        }
    ]
    export default {
        components: { empty, rule, Rule },
        mixins: [pageMixin],
        props: {
            statusBarHeight: Number
        },
        data() {
            return {
                resource,
                TYPE_MAP,
                ossurl,
                searchVal: '',
                refreshing: false,
                requesting: false,
                isRefreshClear: false,
                type: '',
                permission: null,
				tabIndex: 0
            }
        },
        computed: {
            top() {
                return this.statusBarHeight + uni.upx2px(72) + 45
            },
            itemWidth() {
                let width = this.$store.state.systemInfo.screenWidth
                width = (width - 28 - 20) / 3
                let height = (197 / 109) * width
                return { width, height }
            },
            roomTab() {
                let arr = [
                    {
                        name: '全部',
                        value: '',
                        normal: ossurl.welfare.all,
                        active: ossurl.welfare.allActive
                    }
                ]
                if (this.permission && this.permission.roomConfig !== 0) {
                    arr = [
                        ...arr,
                        {
                            name: '福利营',
                            value: 'COMMON',
                            normal: ossurl.welfare.welfare,
                            active: ossurl.welfare.welfareActive
                        },

                        {
                            name: '口令营',
                            value: 'PASSWORD',
                            normal: ossurl.welfare.password,
                            active: ossurl.welfare.passwordActive
                        }
                    ]
                }
                if (this.permission && this.permission.roomGAS !== 0) {
                    arr = [
                        ...arr,

                        {
                            name: '欧气营',
                            value: 'EUROPEAN_GAS',
                            normal: ossurl.welfare.european,
                            active: ossurl.welfare.europeanActive
                        }
                    ]
                }
                if (this.permission && this.permission.roomCjf !== 0) {
                    arr = [
                        ...arr,

                        {
                            name: '成就营',
                            value: 'ACHIEVEMENT',
                            normal: ossurl.welfare.achieve,
                            active: ossurl.welfare.achieveActive
                        }
                    ]
                }
                return arr
            }
        },
        mounted() {
            this.refresh(true)
            this.getParamConfig()
        },
        methods: {
            async getParamConfig() {
                const res = await this.$service.weal.getRoomType()
                this.permission = res
            },
            handleChangeType(item, index) {
                this.type = item.value
				this.tabIndex = index;
                this.refresh(true)
            },
            search() {
                uni.hideKeyboard()
                this.refresh(true)
            },
            pullRefresh() {
                this.refreshing = true
                this.refresh()
            },
            async loadData(loading = false) {
                this.requesting = true
                const res = await this.$service.weal.list(
                    this.pageNum,
                    this.pageSize,
                    this.searchVal,
                    this.type,
                    loading
                )
                setTimeout(() => {
                    this.refreshing = false
                    this.requesting = false
                }, 1000)
                return res
            },
            showDetail(item) {
                this.$router.push('weal_detail', { id: item.id })
            }
        }
    }
</script>
<style lang="scss" scoped>
	.roomSection{
	  padding-bottom: 200rpx;
	  width: 100%;
	  .item{
	    width: 48%;
	    height: 482rpx;
	    margin-top: 30rpx;
	    .top{
	      .l{
			.userImg{
				border-radius: 50%;
			}
	        padding-left: 20rpx;
	        margin-top: 10rpx;
	        image{
	          margin-right: 6rpx;
	        }
	        text{
	          width: 150rpx;
	          display: -webkit-box;
	          overflow: hidden;
	          text-overflow: ellipsis;
	          word-break: break-all;
	          -webkit-box-orient: vertical;
	          -webkit-line-clamp: 1;
	        }
	      }
	      .r{
	        margin-right: 10rpx;
	        margin-top: -6rpx;
	        text{
	          color: #969696;
	          font-size: 24rpx;
	        }
	      }
	    }
	    .img{
	      text-align: center;
	    }
	    .text{
	      text-align: center;
		  margin-top: 18rpx;
	      text{
	        display: block;
	        &:nth-child(1) {
	          color: #999;
	        }
	        &:nth-child(2) {
	          color: #000;
	          font-weight: bold;
	          font-size: 30rpx;
	        }
	      }
	    }
	  }
	}
	.roomTypeListSection{
	  background: #5a606e;
	  margin-top: 30rpx;
	  padding: 8rpx;
	  border-radius: 8rpx;
	  .item{
	    width: 114rpx;
	    height: 56rpx;
	    box-sizing: border-box;
		border-radius: 8rpx;
	    text{
	      color: #b2b6ce;
	      font-weight: bold;
		  // font-size: 28rpx;
	    }
	  }
	  .on{
	    background: #ffea5d;
	    background-size: 100% 100%;
	    text{
	      color: #000;
	    }
	  }
	}
    .container {
        padding-top: 172rpx;
    }
    .scroll-wrapper {
        // position: fixed;
        height: calc(100vh - 245rpx);
    }

    .search-wrapper {
        padding: 0 0 20rpx;
        background-color: #fff;
        .searchInput {
            height: 64rpx;

            background: rgba(228, 228, 228, 0.5);
            border-radius: 640rpx 640rpx 640rpx 640rpx;
            color: #d0d0d0;
            display: flex;
            flex: 1;
            align-items: center;
            padding: 0 24rpx;
            input {
                flex: 1;
                color: #000;
            }
        }
    }

    .free-flag {
        width: 100%;
        height: 182rpx;
    }

    .fun-wrapper {
        text-align: center;
        .funItem {
            flex: 1;
            padding: 0 16rpx;
            font-size: 20rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 350;
            color: #1e1e1e;
        }
    }

    .record,
    .cRecord,
    .create {
        width: 76rpx;
        height: 86rpx;
        position: fixed;
        right: 26rpx;
    }

    .record {
        bottom: 436rpx;
    }
    .roomList {
        .roomItem {
            background-color: #fffdf6;
            background-size: auto 100%;
            background-position: right;
            background-repeat: no-repeat;
            padding: 20rpx;
            margin-bottom: 20rpx;
            border-radius: 20rpx;
            display: flex;
            width: 100%;
            position: relative;

            box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(143, 138, 126, 0.12);
            .must-flag {
                position: absolute;
                top: 0;
                left: 0;
                width: 102rpx;
                height: 102rpx;
            }
            .luckRoomGoodList {
                background-color: #fff;
                width: 160rpx;
                height: 160rpx;
            }
            .roomName {
                font-size: 28rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
                color: #000000;
                line-height: 40rpx;
            }
            .infoBox {
                flex: 1;
            }
            .item-cover {
                width: 164rpx;
                height: 164rpx;
            }
            .roomType {
                display: flex;
                align-items: center;
                padding: 14rpx 0 24rpx 0;
                .flag-top {
                    width: 104rpx;
                    height: 32rpx;
                }
                .luckSize {
                    background: #fff3d5;
                    font-size: 20rpx;
                    font-family: Source Han Sans, Source Han Sans;
                    font-weight: 350;
                    color: #e8ad00;
                    line-height: 28rpx;
                    padding: 2rpx 24rpx;
                    height: 32rpx;
                    border-radius: 16rpx;
                    margin-left: 20rpx;
                }
            }
            .roomInfo {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .roomUser {
                display: flex;
                align-items: center;
                font-size: 24rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 300;
                color: #666666;
                width: 130rpx;

                .icon {
                    width: 32rpx;
                    min-width: 32rpx;
                    height: 32rpx;
                    border-radius: 50%;
                    margin-right: 10rpx;
                }
                .nickname {
                    width: 88rpx;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }
            .roomUserAvatar {
                background: linear-gradient(90deg, #fff1e6 0%, #fff6cd 100%);
                border-radius: 24rpx;
                padding: 8rpx 16rpx;
                padding-left: 26rpx;

                .cu-avatar-group {
                    padding: 0;
                }
                .avatar {
                    width: 32rpx;
                    height: 32rpx;
                    border-radius: 50%;
                }
                .cu-avatar {
                    width: 32rpx;
                    height: 32rpx;
                    border-radius: 50%;
                    border: none;
                    margin-left: -10rpx;
                }
            }
            .fire {
                display: flex;
                align-items: center;
                font-size: 24rpx;
                font-family: Arial, Arial;
                font-weight: 400;
                color: #000000;
                .fireIcon {
                    width: 32rpx;
                    height: 32rpx;
                }
            }
            .official {
                height: 34rpx;
                width: 86rpx;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
    }
    .roomTypeList {
        display: flex;
        justify-content: flex-start;
        background: #fff;
        padding: 20rpx 0;
        .roomTypeItem {
            margin: 0 6rpx;
        }
    }
</style>