<!-- 表單 -->
<view class="forms">
? <view class="container">
? ? <image class="bg" src="../../images/formBg.png" mode="aspectFill"></image>
? ? <view class="title">
? ? ? <text class="text">我家裝修需要花多少錢？</text>
? ? ? <text class="text">免費快速獲取預(yù)算方案</text>
? ? </view>
? ? <form class="" catchsubmit="submitFn">
? ? ? <view class="item">
? ? ? ? <text class="text">*</text>
? ? ? ? <picker class="" mode="region" bindchange="bindRegionChange" value="{{region}}">
? ? ? ? ? <input type="text" name="city" value="{{city}}" placeholder="請選擇房屋所在城市" placeholder-class="input-placeholder" />
? ? ? ? </picker>
? ? ? </view>
? ? ? <view class="item">
? ? ? ? <text class="text"></text>
? ? ? ? <input type="text" name="area" value="{{area}}" class="weui-input" placeholder="請輸入房屋面積" placeholder-class="input-placeholder" />
? ? ? </view>
? ? ? <view class="item">
? ? ? ? <text class="text"></text>
? ? ? ? <input type="text" name="name" value="{{name}}" class="weui-input" placeholder="請輸入您的姓名" placeholder-class="input-placeholder" />
? ? ? </view>
? ? ? <view class="item">
? ? ? ? <text class="text">*</text>
? ? ? ? <input type="text" name="phone" value="{{phone}}" class="weui-input" placeholder="請輸入聯(lián)系電話" placeholder-class="input-placeholder" />
? ? ? </view>
? ? ? <button class="btn" formType="submit">
? ? ? ? <text>一鍵預(yù)約</text>
? ? ? ? <!-- <image class="img" src="../../images/headglobal.png" mode="aspectFill"></image> -->
? ? ? </button>
? ? ? <view class="desc">裝企提供免費上門量房服務(wù)、出3套方案供您對比</view>
? ? </form>
? </view>
</view>

.forms {
? ? padding: 0 30rpx;

? ? .container {
? ? ? ? position: relative;
? ? ? ? width: 100%;
? ? ? ? padding: 20rpx;
? ? }

? ? .bg {
? ? ? ? position: absolute;
? ? ? ? left: 0;
? ? ? ? right: 0;
? ? ? ? top: 0;
? ? ? ? bottom: 0;
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? ? ? z-index: -1;
? ? }

? ? .title {
? ? ? ? text-align: center;
? ? ? ? margin-bottom: 40rpx;

? ? ? ? .text {
? ? ? ? ? ? display: block;
? ? ? ? ? ? font-size: 48rpx;
? ? ? ? ? ? color: #000;
? ? ? ? }
? ? }

? ? .item {
? ? ? ? height: 65rpx;
? ? ? ? background-color: #fff;
? ? ? ? border: solid 1rpx #dddddd;
? ? ? ? border-radius: 10rpx;
? ? ? ? padding: 0 10rpx;
? ? ? ? margin-bottom: 20rpx;
? ? ? ? display: flex;
? ? ? ? align-items: center;

? ? ? ? .text {
? ? ? ? ? ? color: #ff0000;
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? width: 30rpx;
? ? ? ? ? ? font-size: 24rpx;
? ? ? ? }

? ? ? ? .weui-input {
? ? ? ? ? ? font-size: 28rpx;
? ? ? ? }

? ? ? ? .input-placeholder {
? ? ? ? ? ? color: #999;
? ? ? ? }
? ? }

? ? .btn {
? ? ? ? width: 100%;
? ? ? ? height: 75rpx;
? ? ? ? background-color: #00a0e9;
? ? ? ? box-shadow: 3rpx 4prx 13rpx 0rpx rgba(93, 200, 249, 0.59);
? ? ? ? border-radius: 6rpx;
? ? ? ? text-align: center;
? ? ? ? line-height: 75rpx;
? ? ? ? margin: 30rpx 0;
? ? ? ? position: relative;

? ? ? ? text {
? ? ? ? ? ? color: #fff;
? ? ? ? }
? ? }

? ? .desc {
? ? ? ? text-align: center;
? ? ? ? color: #999;
? ? ? ? font-size: 26rpx;
? ? }? ? .img {
? ? ? ? position: absolute;
? ? ? ? width: 31rpx;
? ? ? ? height: 47rpx;
? ? ? ? right: 80rpx;
? ? ? ? top: 40rpx;
? ? }
}

data:{
?? ?city:'',
? ? area: "",
? ? name: "",
? ? phone: "",
? ? region: ["廣東省", "廣州市", "海珠區(qū)"],
},
// 表單提交
submitFn: function (e) {
? console.log(e);
? let that = this;
? if (e.detail.value.city == "") {
? ? wx.showToast({
? ? ? title: "請選擇房屋所在城市",
? ? ? icon: "none",
? ? });

? ? return false;
? }

? if (e.detail.value.phone == "") {
? ? wx.showToast({
? ? ? title: "請輸入聯(lián)系電話",
? ? ? icon: "none",
? ? });

? ? return false;
? }
? // 驗證電話格式
? if (!/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(e.detail.value.phone)) {
? ? wx.showToast({
? ? ? title: "手機號碼有誤",
? ? ? duration: 2000,
? ? ? icon: "none",
? ? });

? ? return false;
? }
},
// 選擇城市
bindRegionChange: function (e) {
? console.log("picker發(fā)送選擇改變，攜帶值為", e.detail.value);
? this.setData({
? ? city: e.detail.value,
? });
},