1111111111

<template>
    <view class="content">
        <image class="logo" src="/static//images/index/appointment.png" mode="aspectFit"></image>
        <view class="appointment-form">
            <text class="title-name">楼盘名称</text>
            <input class="appointment-input" placeholder="融圣国际"></input>
            <text class="title-name">预约类型</text>
            <picker class="appointment-input-box" :range="appointment_types" range-key="type" :value="index" @change="onPickerChange">
                <text class="appointment-input-hint">{{appointment_types[index].type}}</text>
                <image class="appointment-input-image" src="../../static/images/icon/right_icon.png"></image>
            </picker>
            <text class="title-name">户型</text>
            <view class="appointment-input-box">
                <input class="appointment-input-hint" placeholder="150" type="number"></input>
                <text class="appointment-size-unit">(m²)</text>
            </view>
            <text class="title-name">姓名</text>
            <input class="appointment-input" placeholder="刘芳"></input>
            <text class="title-name">联系方式</text>
            <input class="appointment-input" placeholder="13546713187" type="number"></input>
            <text class="title-name">微信电话</text>
            <input class="appointment-input" placeholder="15987523524" type="number"></input>
        </view>
        <!-- //预约按钮 -->
        <button @click="open()">确定预约</button>
        <uni-popup ref="popup" type="buttom"></uni-popup>
                

        
    </view>
</template>

<script>
    export default{
        methods:{
            open(){
                uni.showToast({
                    title:"恭喜你，预约成功",
                    type:"success"
                })
            }
        }
    }
</script>
<script>

export default {
    data() {
        return {
            // 类型选择
            index:1,
            title: '侯智勇202165110377',
            appointment_types:[
                {id:1,type:"验房"},
                {id:1,type:"微改报价"},
                {id:1,type:"设计"},
                {id:1,type:"拎包入住"}
            ]
        };
    },
    
    onLoad() {},
    methods: {
        onPickerChange(e){
            this.index = e.target.value
        }
    }
};
</script>

<style>
page {
    background-color: #f5f5f5;
}
.content {
    box-sizing: border-box;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    height: 450rpx;
    width: 100%;
}
.appointment-form{
    box-sizing: border-box;
    width: 100%;
    display: grid;
    grid-template-columns: 30% 70%;
    padding-right: 40rpx;
    grid-row-gap: 20px;
    margin: 40rpx 40rpx 0 40rpx;
    align-items: center;
}
.title-name{
    font-size: 32rpx;
    color: #000000;
}
.appointment-input{
    font-family: PingFang SC, PingFang SC-Bold;
    box-sizing: border-box;
    height: 64rpx;
    line-height: 64rpx;
    padding-left: 12rpx;
    padding-right: 12rpx;
    background-color: white;
    border-radius: 8rpx;
    border: 3rpx solid rgba(0,0,0,0.2);
    font-size: 32rpx;
    align-items: center;
}
.appointment-input-box{
    box-sizing: border-box;
    height: 64rpx;
    line-height: 64rpx;
    background-color: white;
    border-radius: 8rpx;
    border: 3rpx solid rgba(0,0,0,0.2);
    font-size: 32rpx;
    position: relative;
    align-items: center;
}
.appointment-input-hint{
    font-family: PingFang SC, PingFang SC-Bold;
    box-sizing: border-box;
    padding-left: 12rpx;
    padding-right: 72rpx;
    position: absolute;
    width: 100%;
    height: 100%;
}
.appointment-input-image{
    position: absolute;
    opacity: 0.4;
    right: 12rpx;
    width: 28rpx;
    height: 28rpx;
    top: 0;
    bottom: 0;
    margin:auto;
}
.appointment-size-unit{
    position: absolute;
    opacity: 0.4;
    right: 12rpx;
    top: 0;
    bottom: 0;
    margin:auto;
    font-weight: 600;
    font-size: 28rpx;
}
.submit{
    width: 328rpx;
    height: 80rpx;
    margin:80rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #fff;
    background-color: #3D9C36;
}
</style>