YXGJ/components/bottomModules/bottom2.vue

<template>
    <view class="box">
        <view class="title">
            免费帮您获取装修预算
        </view>
        <view class="total">
            今日已有 <text class="num">258</text>位业主申请
        </view>
        <view class="input-box" hover-class="navigator-hover" @click="showBathroom = true">
            <input type="digit" @input="onInput" placeholder="您房子的面积是多少？" style="color: #fff;"
                placeholder-class="placeholder" />
            <text class="unit">
                m²
            </text>
        </view>
        <view class="input-box" hover-class="navigator-hover" @click="showBathroom = true">
            <view class="value">
                {{ submitData.bathroom }}
            </view>
            <text class="iconfont icon-a-wodetiaozhuan" />
        </view>
        <u-action-sheet :actions="bathroomList" :show="showBathroom" cancelText="取消" @close="showBathroom = false"
            @select="onSelect($event, 'bathroom')" />

        <view class="input-box" hover-class="navigator-hover" @click="showWall = true">
            <view class="value">
                {{ submitData.wall }}
            </view>
            <text class="iconfont icon-a-wodetiaozhuan" />
        </view>

        <u-action-sheet :actions="wallList" :show="showWall" cancelText="取消" @close="showWall = false"
            @select="onSelect($event, 'wall')" />

        <view class="radio-box">
            <u-radio-group v-model="submitData.type">
                <u-radio v-for="item in radioList" style="margin-right: 20px;" :key="item.name" activeColor="#E3041F"
                    labelColor="#FFFFFF" :customStyle="item.customStyle" :labelSize="tovw(14)" :label="item.name"
                    :name="item.name" />
            </u-radio-group>
        </view>
        <view class="submit" hover-class="navigator-hover">
            立即估算报价 <text class="iconfont icon-a-wodetiaozhuan" />
        </view>
        <view class="evenMore">
            更多阳台空间、全屋顶墙柜门等报价，请咨询当地专卖店
        </view>
    </view>
</template>

<script>
export default {
    name: "bottom2",
    data() {
        return {
            submitData: {
                "area": "100",
                "wall": "1个背景墙",
                "bathroom": "1厨1卫",
                "type": "毛坯房装修"
            },
            radioList: [{
                name: "毛坯房装修",
                customStyle: { marginRight: this.tovw(26) }
            }, {
                name: "旧房装修",
                customStyle: { marginRight: this.tovw(26) }
            }, {
                name: "精装房焕新"
            }],
            showWall: false,
            showBathroom: false,
            bathroomList: [{
                name: '0厨0卫',
            }, {
                name: '1厨1卫',
            }, {
                name: '1厨2卫',
            }, {
                name: '1厨3卫',
            }, {
                name: '1厨>3卫',
            }],
            wallList: [{
                name: '0个背景墙',
            }, {
                name: '1个背景墙',
            }, {
                name: '2个背景墙',
            }, {
                name: '3个背景墙',
            }, {
                name: '>3个背景墙',
            }]
        }
    },
    methods: {
        onSelect({ name }, key) {
            this.submitData[key] = name;
        },
        onInput(e) {
            this.submitData.area = e.detail.value;
            console.log("submitData", this.submitData)
        }
    },
}
</script>

<style lang="scss" scoped>
.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    padding: 30px 0;
    background: radial-gradient(100% 0% at 50% 50%, #7E7E7E 0%, #787878 100%);

    /deep/.placeholder {
        color: #fff;
        opacity: .6;
    }

    .title {
        line-height: 22px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        letter-spacing: 1px;
    }

    .total {
        line-height: 17px;
        font-family: PingFang SC, PingFang SC;
        font-size: 12px;
        color: #FFFFFF;
        margin-top: 5px;
        letter-spacing: 1.5px;

        .num {
            color: #FC9228;
            padding: 0 5px;
            letter-spacing: 0px;
        }
    }

    .input-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 315px;
        height: 45px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-sizing: border-box;
        padding: 0 10px;
        margin-top: 10px;

        .value {
            color: #FFFFFF;
            font-size: 14px;
        }

        .iconfont {
            color: #FFFFFF;
            transform: rotate(90deg);
        }

        .unit {
            color: #FFFFFF;
        }
    }

    .radio-box {
        height: 20px;
        line-height: 20px;
        margin-top: 20px;
    }

    .submit {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 315px;
        height: 45px;
        background: #FC9228;
        border-radius: 2px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        margin-top: 20px;

        .iconfont {
            font-size: 12px;
            margin-left: 4px;
        }
    }

    .evenMore {
        margin-top: 10px;
        line-height: 17px;
        font-family: PingFang SC, PingFang SC;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
    }
}
</style>