微信小程序商城15天从零实战视频课程-留言界面的实现
wxml代码
<view class="group">
<view class="group-header">问题描述</view>
<view class="group-body">
<textarea placeholder="请输入对问题的描述,可输入1000字" maxlength="1000"></textarea>
</view>
<view class="group-header">上传图片</view>
<view class="group-body">
<view class="img-upload">
<view class="img-add" bindtap="chooseImage"></view>
<view class="img-add" bindtap="chooseImage"></view>
<view class="img-add" bindtap="chooseImage"></view>
</view>
</view>
<view class="group-header">联系信息</view>
<view class="group-body">
<view class="input-item">
<text class="input-item-label">联系人</text>
<view class="input-item-content">
<input type="text" auto-focus placeholder="请输入您的姓名" ></input>
</view>
</view>
<view class="input-item">
<text class="input-item-label">手机号码</text>
<view class="input-item-content">
<input type="idcard" placeholder="请输入您的手机号码" maxlength="11" ></input>
</view>
</view>
</view>
<view class="btn-submit">
<button class="btn-block btn-orange" bindtap="questionSubmit">确认提交</button>
</view>
<view class="question-text">
<text>如问题无法简单描述清楚</text>
<text>可以直接拨打电话</text>
<view bindtap="callContact" data-tel="400-1234-567">400-1234-567</view>
</view>
</view>
wxss代码
.group{
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
background: #f9f9f9; font-size: 14px;
}
.group-header{
line-height: 70rpx;
display: flex;
padding: 0 20rpx;
background: #f9f9f9;
}
.group-body{
background: #fff;
border-top: 1rpx solid #ddd;
border-bottom: 1rpx solid #ddd; padding: 5rpx 20rpx;
}
.img-upload{
padding: 20rpx;
font-size: 0;
overflow: hidden;
}
.img-add{
width: 100rpx;
height: 100rpx;
float: left;
margin: 10rpx;
border: 1rpx dashed #ddd;
}
.input-item{
padding: 20rpx;
line-height: 2;
display: flex;
font-size: 30rpx;
border-top: 1rpx solid #e8e8e8;
}
.input-item:first-child{
border-top: 0;
}
.input-item-label{
display: block;
width: 5em;
color: #666;
}
.input-item-content{
color: #333;
flex:1;
}
.btn-submit{
padding: 20rpx;
}
.btn-block{
width: 100%;
line-height: 88rpx;
}
.btn-orange{
background: #f7982a;
color: #fff;
}
.question-text{
padding: 20rpx;
text-align: center;
}
.question-text text{
display: block;
color: #888;
font-size: 28rpx;
}
.question-text view{
font-size: 48rpx;
color: #f7982a;
}
欢迎大家收看我的****:微信小程序商城15天从零实战视频课程
https://edu.****.net/course/detail/19437