樣式集（二） 信息填寫樣式模板

上圖：

代碼：

// pages/upInfo/upInfo.js
Page({
  data: {
    tipsTxt: "請填寫正確的業務流水號",
    showTips: false,
    showCityList:false,
    city:"",
    cityList:["濟南市","青島市","棗莊市","東營市","煙臺市","濰坊市","東營市","煙臺市","濰坊市","東營市","煙臺市","濰坊市","濟寧市","泰安市","威海市","週博市"]
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    // this.set_showTips();
  },
  show_city_list(){
    this.setData({
      showCityList:true
    })
  },
  num_input(e){
    console.log('e',e.detail.value)

  },
  select_item(e){
    this.setData({
      city:e.target.id,
      showCityList:false
    })
  },
  set_showTips() {
    this.setData({
      showTips: true
    })
    setTimeout(() => {
      this.setData({
        showTips: false
      })
    }, 1500);
  },
  nav_leaset() {
    wx.navigateTo({
      url: '../lease/lease',
    })
  },
})

<!--pages/upInfo/upInfo.wxml-->


<view class="hhh"></view>
<view class="block" style="z-index: 3;">
	<view class="item p_r">
		<image class="loc" src="/img/loc.png"></image>
		<view class="sheng">山東省</view>
	</view>
	<view class="item" style="border: none;">
		<image class="rrr" src="/img/rrr.png"></image>
		<view class="title" catchtap="show_city_list" style="color:{{city?'#000':'#999'}}">{{city?city:"請選擇地市"}}</view>
	</view>
</view>

<view class="block">

	<view class="item ">
		<view class="title p_r">用戶姓名 <text>*</text> <input class="serrialNumber" value=""></input></view>
	</view>

	<view class="item">
		<view class="title p_r">業務流水號 <text>*</text> <input type="number" class="serrialNumber" value="17200615"></input></view>
		<view class="detail">請聯繫營業員查詢，並補充完整</view>
	</view>

	<view class="item">
		<view class="title p_r">業務號碼 <text>*</text> <input type="number" class="serrialNumber" value=""></input></view>
		<view class="detail">請聯繫營業廳查詢，合約手機號或寬帶賬號</view>
	</view>

	<view class="item ">
		<view class="title p_r">聯繫號碼 <text>*</text> <input type="number" bindinput="num_input" class="serrialNumber" value=""></input></view>

	</view>
</view>

<view class="btn" catchtap="nav_leaset">開始辦理</view>

<view class="showTips" wx:if="{{showTips}}">{{tipsTxt}}</view>

<block wx:if='{{showCityList}}'>
	<view class="cityBg"></view>
	<scroll-view class="cityList" scroll-y="true">
		<block wx:for='{{cityList}}' wx:key="">
			<view class="cityName" style="padding-top: {{index==0?'250rpx':''}};" catchtap="select_item" id="{{item}}">{{item}}</view>
		</block>
	</scroll-view>
</block>

/* pages/upInfo/upInfo.wxss */
page{
  background-color: #f0f0f8;
  height: 100%;
}
.loc{
  width: 30rpx;
  height: 36rpx;
}
.hhh{
  height: 30rpx;
  background-color: #f0f0f8;
  z-index: 3;
  position: relative;
}
.block{
  background-color: white;
  margin-bottom: 30rpx;
  padding-left: 30rpx;
  z-index: 0;
  position: relative;
}
.item{
  padding-top: 36rpx;
  padding-bottom: 36rpx;
  border-bottom: 1rpx solid #f3f3f3;
}
.sheng{
  margin-left: 22rpx;
  margin-top: -3rpx;
}
.rrr{
  position: absolute;
  right: 30rpx;
  width: 17rpx;
  height: 29rpx;
  margin-top: 6rpx;
}
.title{
  color: #999999;
}
text{
  color: red;
}
.serrialNumber{
  color: #000;
  margin-left: 50rpx;
}
input{
  margin-left: 30rpx;
}
.detail{
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #333333;
}
.btn{
  background-color: #ff9000;
  width: 80%;
  margin-left: 10%;
  border-radius: 50rpx;
  margin-top: 60rpx;
  height: 100rpx;
  text-align: center;
  color: white;
  line-height: 100rpx;
  font-weight: 600;
  letter-spacing:4rpx;
}
.showTips{
  color: #ff8d00;
  background-color: #ffedd7;
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
}
.cityList{
  position: fixed;
  height: 100%;
  top: 0rpx;
  width: 100%;
  text-align: center;
  z-index: 2;
  padding-bottom: -250rpx;
}
.cityBg{
  position: fixed;
  height: 100%;
  top: 0;
  width: 100%;
  z-index: 2;
  background:rgba(0,0,0,0.5);

}
.cityName{
  
  position: relative;
  opacity: 1;
  background-color: #f0f0f8;
  left: 60%;
  width: 40%;
  height: 99rpx;
  line-height: 99rpx;
  /* font-weight: 600; */
  border-bottom: 1rpx solid #cccccc;
  z-index: 3;
}