微信小程序房子装修免费报价计算设计制作开发教程

本文给大家带来的是微信小程序房子装修免费报价计算设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="ws_offerFormTop">
	<view class="ws_fromRow clearfix">
		<text>您的姓名</text>
		<input type="text" placeholder="请输入您的姓名" bindinput="changeName" />
	</view>
	<view id="ws_tel" class="ws_fromRow clearfix">
		<text>手机号码</text>
		<input type="tel" placeholder="请输入手机号码" bindinput="changeTel" />
	</view>
	<view class="ws_fromRow clearfix">
		<text>房屋位置</text>
		<view class="ws_rightSelect" bindtap="selectOpen">
			<text wx:if="{{!values[0]}}">请选择地址</text>
			<text wx:if="{{values[0]}}">{{addrData[values[0]-1].name}} {{addrData[values[0]-1].children[values[1]-1].name}} {{addrData[values[0]-1].children[values[1]-1].children[values[2]-1].name}}</text>
			<image src="https://m.youzhu.com/images/public/icon_listArrow.svg"></image>
		</view>
	</view>
	<view class="ws_fromRow clearfix">
		<text>装修面积</text>
		<input type="number" placeholder="请输入装修面积 m²" bindinput="changeAddrs" />
	</view>
</view>
<view class="ws_offerFormCode">
	<view class="ws_fromRow clearfix">
		<text>验证码</text>
		<input type="number" placeholder="请输入手机验证码" value="{{uesrInfo.tel}}" bindinput="changeCode" />
		<button id="js_getCode" disabled="{{codeDis}}" bindtap="getCode">{{codeText}}</button>
	</view>
</view>

<button class="ws_submitBtn" bindtap="submit">立即计算</button>

<view wx:if="{{condition}}" class="citypicker">
	<view class="ws_addrMask" bindtap="selectOpen"></view>
	<view class="citypicker">
		<picker-view indicator-style="height: 40px;" style="width: 100%; height: 300px;" value="{{values}}" bindchange="bindChange" class="citybody">
			<view class="cityheader">
				<view bindtap="selectOpen" class="city-cancel">取消</view>
				<view bindtap="selectOpen" class="city-true">确定</view>
			</view>
			<picker-view-column>
				<view class="ws_option">请选择省</view>
				<view class="ws_option" wx:for="{{addrData}}" wx:key="item">{{item.name}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="ws_option">请选择市</view>
				<view class="ws_option" wx:for="{{addrData[values[0]-1].children}}" wx:key="item">{{item.name}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="ws_option">请选择区</view>
				<view class="ws_option" wx:for="{{addrData[values[0]-1].children[values[1]-1].children}}" wx:key="item">{{item.name}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</view>

<view class="ws_offerWindowMask" wx:if="{{offerMask}}">
	<view class="ws_offerBox">
		<view class="ws_maskTitle"><image src="https://m.youzhu.com/images/index/offer/title.png" /></view>
		<view class="ws_maskList">
			<view class="ws_listRow clearfix">
				<view class="ws_listLeft">
					<text class="h4">699</text>
					<text class="h5">新生活</text></view> <span></span>
				<view class="ws_listRight"><b>{{offerJs699}}</b>元
				</view>
			</view>
			<view class="ws_listRow clearfix">
				<view class="ws_listLeft">
					<text class="h4">1099</text>
					<text class="h5">享生活</text></view> <span></span>
				<view class="ws_listRight"><b>{{offerJs1099}}</b>元
				</view>
			</view>
		</view>
		<button bindtap="maskOpen">确定</button>
	</view>
</view>

二、wxss样式文件代码如下：

page{background-color:#f1f1f1;}

.ws_offerFormTop{background: #fff;}
.ws_fromRow{height: 100rpx;line-height: 100rpx;border-bottom:1rpx solid #ececec;margin-left: 30rpx;position:relative;}
.ws_fromRow text{display: block;float: left;font-size:30rpx;color:#333;width:147rpx;}
.ws_rightSelect{float: right;position:relative;width: 480rpx;text-align: right;padding-right: 70rpx;font-size: 30rpx;overflow: hidden;color:#878787;}
.ws_rightSelect text{float: right;width:auto;color:#878787;}
.ws_fromRow input{float: right;width: 480rpx;text-align: right;padding-right: 46rpx;display: block;height: 60rpx;line-height: 60rpx;font-size:30rpx;color:#878787;border:0;outline:none;margin-top: 20rpx;}
.addrSelect{width: auto;padding: 0;height: 100rpx;line-height: 100rpx;font-size:30rpx;color:#878787;border:0;}
.ws_rightSelect>image{position:absolute;right: 44rpx;top: 38rpx;width: 16rpx;height: 26rpx;}
#ws_house span{position:absolute;right: 40rpx;top: 8rpx;font-size:26rpx;color:#333;line-height: 90rpx;}
#ws_house input{padding-right: 90rpx;}
.ws_offerFormTop .ws_fromRow:last-child{border-bottom:0;}
.ws_offerFormCode{margin-top: 20rpx;background: #fff;}
.ws_offerFormCode .ws_fromRow input{height: 72rpx;line-height: 72rpx;margin-top: 16rpx;float: left;border-right:3rpx dashed #ececec;width: 280rpx;text-align: left;padding: 0;}
.ws_offerFormCode .ws_fromRow button{padding:0;height: 72rpx;line-height: 72rpx;margin-top: 14rpx;float: right;margin-right: 30rpx;width: 223rpx;font-size:30rpx;color:#5dbe36;border:0;background:none;outline:none;}
.ws_offerFormCode .ws_fromRow button[disabled]{color:#d7d7d7;}
.ws_offerFormCode .ws_fromRow .code{float: right;margin-right: 51rpx;margin-top: 21rpx;height: 54rpx;width: 182rpx;}
.ws_offerFormCode .ws_fromRow .code img{width: 100%;height: 100%;}
.ws_submitBtn{width: 670rpx;margin: auto;margin-top: 110rpx;background:#ffb921;border-radius:10rpx;font-size:30rpx;color:#ffffff;text-align:center;height: 100rpx;line-height: 100rpx;}
p.ws_prompt{font-size:26rpx;color:#878787;padding:0 40rpx;margin-top: 50rpx;line-height: 36rpx;}
.ws_offerMask{display: none;background:rgba(0,0,0,0.6);width: 100%;height: 100%;position:fixed;left: 0;top: 0;z-index:10;}
.ws_offerBox{width: 540rpx;background: #fff;border-radius:20rpx;position:fixed;left: 50%;top: 50%;transform:translate(-50%,-44%);-webkit-transform:translate(-50%,-44%);}
.ws_offBtnX{position:absolute;width: 60rpx;height: 60rpx;top: 0;right: 0;}
.ws_offBtnX img{margin-top: 18rpx;margin-left: 18rpx;}
.ws_offerBox h2{font-size:34rpx;line-height: 124rpx;text-align: center;color:#000;}
.ws_offerBox p{font-size:30rpx;color:#000;line-height: 36rpx;width: 400rpx;margin: auto;}
.ws_offerBox button{background:#ffb922;width: 100%;height:90rpx;border:0;font-size:34rpx;color:#fff;margin-top: 70rpx;border-radius:0 0 20rpx 20rpx;outline:none;}
button::after{border:0;}
.ws_offerBox .ws_goCenter{position:absolute;bottom: -80rpx;text-align: center;width: 100%;}
.ws_offerBox .ws_goCenter a{font-size:30rpx;color:#cccccc;}
.ws_fromRow select{background:none;direction: rtl;float: right;width: 480rpx;display: block;height: 60rpx;line-height: 60rpx;font-size:30rpx;color:#878787;border:0;outline:none;margin-top: 20rpx;}
.citybody {position: fixed;bottom: 0px;z-index: 8;}
.cityheader {position: absolute;top:0px;width: 100%;z-index: 9;background: #fff;border-bottom:1px solid #f1f1f1;}
.city-cancel {float: left;color: #818181;font-size: 34rpx;width:136rpx;height:90rpx;text-align: center;line-height: 90rpx;}
.city-true {float: right;color: #2FB42E;font-size: 34rpx;width:136rpx;height:90rpx;text-align: center;line-height: 90rpx;}
.ws_option{text-align: center;line-height:40px;font-size:30rpx;}
.citypicker{height:300px;background:#fff;position:fixed;bottom: 0;width: 100%;z-index: 8;}

.ws_addrMask{position: fixed;width: 100%;height: 100%;left: 0;top:0;background:rgba(0,0,0,0.6);z-index:7;}

button.ws_submitBtn{display:block;width: 670rpx; margin: auto; margin-top: 110rpx; background: #4990e2; border-radius: 10rpx; font-size: 30rpx; color: #ffffff; text-align: center; height: 100rpx; line-height: 100rpx;}
.ws_ts{padding: 0 40rpx; margin-top: 50rpx;}
.ws_ts{line-height: 36rpx;}
.ws_ts text{font-size: 28rpx; color: #878787;}



.ws_offerWindowMask{/* display: none; */background:rgba(0,0,0,0.6);width: 100%;height: 100%;position:fixed;left: 0;top: 0;z-index:10;}
.ws_offerWindowMask .ws_offerBox{width: 650rpx;background: #fff;border-radius:20rpx 20rpx 10rpx 10rpx;position:fixed;left: 50%;top: 50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}
.ws_offerWindowMask .ws_maskTitle{border-radius:20rpx 20rpx 0 0;height: 120rpx;text-align: center;background:#ecf5ff url(https://m.youzhu.com/images/index/offer/offer_bg.png) no-repeat 500rpx 0;background-size: 110rpx 120rpx;}
.ws_offerWindowMask .ws_maskTitle image{margin-top: 40rpx;width:180rpx;height: 42rpx;}
.ws_offerWindowMask .ws_maskList{padding: 0 70rpx;padding-top: 10rpx;}
.ws_offerWindowMask .ws_listRow{height: 164rpx;border-bottom:2rpx dashed #ececec;position:relative;}
.ws_offerWindowMask .ws_listLeft{float: left;text-align: center;min-width: 150rpx;}
.ws_offerWindowMask .ws_listLeft text.h4{font-size:60rpx;color:#4392ef;line-height: 60rpx;margin-top: 40rpx;display: block;}
.ws_offerWindowMask .ws_listLeft text.h5{font-size:24rpx;color:#4b4b4b;margin-top: 10rpx;line-height: 24rpx;display: block;}
.ws_offerWindowMask .ws_listRight{float: right;line-height: 157rpx; font-size:28rpx;color:#333;}
.ws_offerWindowMask .ws_listRight b{font-size:48rpx;font-weight: 500;margin-right: 5rpx;position:relative;bottom: -4rpx;}
.ws_offerWindowMask .ws_listRow span{background:#ccdffb;border-radius:100rpx;width:80rpx;height:8rpx;position:absolute;top: 76rpx;left: 184rpx;}
.ws_offerWindowMask .ws_offerBox button{display: block;margin: auto;margin-top: 56rpx;background:#4392ef;border-radius:12rpx;width:542rpx;height:88rpx;outline:none;font-size:32rpx;color:#fff;border:0;}
.ws_offerWindowMask .ws_offerBox{padding-bottom: 60rpx;}
.ws_offerWindowMask .ws_offBtn{position:absolute;top: -94rpx;right: 26rpx;}
.ws_offerWindowMask .ws_offBtnX{text-align: center;width: 44rpx;height: 44rpx;background:rgba(0,0,0,0.50); border:2rpx solid #ffffff;border-radius:100%;}
.ws_offerWindowMask .ws_offBtnX image{margin-top: 8rpx;width: 26rpx;height:26rpx;}
.ws_offerWindowMask .ws_offBtn span{display: block;width: 2rpx;height: 48rpx;background: #fff;position:absolute;right: 22rpx;}

三、js页面代码如下：

var check = require('../../utils/check.js');

var app = getApp()
Page({
	data: {
		addrData: [],
		values: [0, 0, 0],
		condition: false,
		codeDis: false,
		codeText: '获取验证码',
		codeTime: 59,
		userInfo: {
            name: '',
            tel: '',
            addrs: '',
			code: ''
		},
        offerMask: false,
        offerJs699: 0,
        offerJs1099:0
	},
    onLoad: function (e) {
        var _this = this;
        wx.request({
            url: 'https://m.youzhu.com/api/wuser/getRegion/region_id/all',
            success: function (data) {
                _this.setData({
                    addrData: data.data.data[0].children
                })
            }
        })
    },
	bindChange: function (e) {
		let oldValue = this.data.values;
		let newValue = e.detail.value;
		this.setData({
			values: e.detail.value
		})
		if (oldValue[0] != newValue[0]) {
			this.setData({
				values: [newValue[0], 0, 0]
			})
		} else if (oldValue[1] != newValue[1]) {
			this.setData({
				values: [newValue[0], newValue[1], 0]
			})
		}
	},
	selectOpen: function () {
		this.setData({
			condition: !this.data.condition
		})
	},
	getCode: function () {
		var _this = this;
        if (check.validTools('mobile', _this.data.userInfo.tel,'请输入正确的手机号码')){
            wx.request({
                url: 'https://m.youzhu.com/api/subscribe/comactCode',
                header: { 'content-type': 'application/x-www-form-urlencoded' },
                method: 'post',
                data: {
                    phone: _this.data.userInfo.tel
                }
            })
            _this.setData({
                codeDis: true,
                codeText: _this.data.codeTime + 's重新获取'
            })
            var codeSet = setInterval(function () {
                if (_this.data.codeTime > 0) {
                    _this.setData({
                        codeTime: _this.data.codeTime - 1,
                        codeText: _this.data.codeTime + 's重新获取'
                    })
                } else {
                    clearInterval(codeSet);
                    _this.setData({
                        codeDis: false,
                        codeTime: 59,
                        codeText: '获取验证码'
                    })
                }
            }, 1000)
        }
	},
    submit:function(){
        var _this = this;
        if(
            check.validTools('isnul', this.data.userInfo.name, '请输入姓名') &&
            check.validTools('mobile', this.data.userInfo.tel, '请输入正确的手机号码')
        ){
            if (this.data.values[2] == 0){
                wx.showModal({title: '提示',content: '请选择房屋位置'})
            }else if(
                check.validTools('house', this.data.userInfo.addrs, '请输入正确的装修面积(1-500 m²)') &&
                check.validTools('isnul', this.data.userInfo.code, '请输入手机验证码')
            ){
                // wx.showLoading({ title: '加载中', mask: true })
                wx.request({
                    url: 'https://m.youzhu.com/Price/Post',
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    method: 'post',
                    data: {
                        address: _this.data.addrData[_this.data.values[0] - 1].name + ' ' + _this.data.addrData[_this.data.values[0] - 1].children[_this.data.values[1] - 1].name + ' ' + _this.data.addrData[_this.data.values[0] - 1].children[_this.data.values[1] - 1].children[_this.data.values[2] - 1].name,
                        area: _this.data.userInfo.addrs,
                        username: _this.data.userInfo.name,
                        phone: _this.data.userInfo.tel,
                        code: 790763406
                    },
                    success: function (data) {
                        wx.hideLoading()
                        if (data.data.errorNo >= 0){
                            _this.setData({
                                offerMask:true,
                                offerJs699: data.data.data[699],
                                offerJs1099:data.data.data[1099]
                            })
                        }else{
                            wx.showModal({ title: '提示', content: data.data.message })
                        }
                    }
                })
                
            }
        }
    },
    maskOpen:function(){
        this.setData({
            offerMask: false
        })
    },
    changeName:function(e){
        this.setData({ 'userInfo.name': e.detail.value})
    },
    changeTel: function (e) {
        this.setData({ 'userInfo.tel': e.detail.value })
    },
    changeAddrs: function (e) {
        this.setData({ 'userInfo.addrs': e.detail.value })
    },
    changeCode: function (e) {
        this.setData({ 'userInfo.code': e.detail.value })
    }
	
})

模板简介：该模板名称为【微信小程序房子装修免费报价计算设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。