本文实例为大家分享了微信小程序实现表单验证的具体代码，供大家参考，具体内容如下
效果图
点击预约设计弹出表单
城市，面积不能输入，只能选择
点击位置获取当前定位
源码:
Wxml
{{designerDetail.name}} {{designerDetail.honour}} 案例作品 预约设计 预约量房
js
// pages/designerList/designerDetail.js
//获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
urlhttp: app.d.hostImg,//图片路径参数
designerDetail: {},
userlocation: '',//工程位置
acreagelist: ["60㎡以下", "60㎡-70㎡", "70㎡-100㎡", "100㎡以上"],//面积数组
userZoneList:[],//城市列表
price:0,
dialogHidden:true,
orderType:'',//预约类型
index: '',//面积下标
index2: '',//城市下标
btnStatus:true,
designerid:'',//设计师id
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
var id = options.id;
that.setData({
designerid:id,
})
console.log(id)
wx.showNavigationBarLoading();
wx.request({
url: app.d.ceshiUrl + 'home.designerDetail',
data: {
"id": id,
},
success: function (res) {
console.log(res)
var res = res.data;
that.setData({
designerDetail: res,
})
wx.hideNavigationBarLoading();
}
})
wx.request({
url: app.d.ceshiUrl + 'home.getService',
success: function (res) {
console.log(res)
var res = res.data;
that.setData({
userZoneList: res,
})
wx.hideNavigationBarLoading();
}
})
//支付金额
wx.request({
url: app.d.ceshiUrl + 'home.calc',
success: function (res) {
console.log(res)
var res = res.data;
that.setData({
price: res.price,
})
}
})
},
//选择所在区域
getLocation: function (e) {
var that = this;
wx.chooseLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
console.log(res)
that.setData({
userlocation: res.name,
latitude: latitude,
longitude: longitude,
})
}
})
},
//所在城市选择
bindPickerzone: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index2: e.detail.value
})
},
//房屋面积选择
bindPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
//图片预览
bindpreviewImage: function (e){
var that = this;
console.log(e.currentTarget.id)
var index = e.currentTarget.id;
var picslist = that.data.designerDetail.pics;
for (var i in picslist) {
picslist[i] = that.data.urlhttp + picslist[i];
}
wx.previewImage({
current: picslist[index], // 当前显示图片的http链接
urls: picslist // 需要预览的图片http链接列表
})
},
orderTap: function (e) {
var that = this;
console.log(e)
that.setData({
orderType: e.target.dataset.type,
dialogHidden: false,
})
},
closeTap: function () {
var that = this;
that.setData({
dialogHidden: true,
})
},
formSubmit: function (e) {
var that = this;
console.log(e.detail);
var value = e.detail.value;
var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;//电话校验
var acreage = that.data.acreagelist[that.data.index];
var userZone = that.data.userZoneList[that.data.index2];
var userlocation = that.data.userlocation;
that.setData({
btnStatus: false,
})
//所在城市
if (userZone == "" || userZone == null) {
wx.showModal({
title: "",
content: '请选择所在城市',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
that.setData({
btnStatus: true,
})
return false;
}
//工程位置
if (userlocation == "" || userlocation == null) {
wx.showModal({
title: "",
content: '请选择工程位置',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
that.setData({
btnStatus: true,
})
return false;
}
//房屋面积
if (acreage == "" || acreage == null) {
wx.showModal({
title: "",
content: '请选择您的房屋面积',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
that.setData({
btnStatus: true,
})
return false;
}
//姓名
if (value.name == "" || value.name == null) {
wx.showModal({
title: "",
content: '姓名不能为空，请输入姓名',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
that.setData({
btnStatus: true,
})
return false;
}
//电话
if (value.tele == "" || value.tele == null) {
wx.showModal({
title: "",
content: '联系电话不能为空，请输入联系电话',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
that.setData({
btnStatus: true,
})
return false;
}
if (!myreg.test(value.tele)) {
wx.showModal({
title: "",
content: '请输入正确的联系电话',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
that.setData({
btnStatus: true,
})
return false;
}
wx.showNavigationBarLoading();
wx.request({
url: app.d.ceshiUrl + 'home.booking',
data: {
"openid": wx.getStorageSync("openid"),
"zone": userZone,
"area": acreage,
"name": value.name,
"tel": value.tele,
"mark": that.data.orderType,
"desid": that.data.designerid,
},
success: function (res) {
console.log(res)
var res = res.data;
var wepay_no = res.wepay_no;
that.setData({
wepay_no: wepay_no,
})
//支付
wx.request({
url: app.d.ceshiUrl + 'home.pay',
data: {
'openid': wx.getStorageSync('openid'),
'wepay_no': wepay_no,
},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'Content-Type': 'application/x-www-form-urlencoded'
}, // 设置请求的 header
success: function (rese) {
console.log(rese.data.zero)
if (rese.data.zero == 1) {
wx.showModal({
title: '预约支付',
content: '您的账户余额充足，已使用您的账户余额扣除支付',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
wx.redirectTo({
url: '/pages/my/myMakeorder/myMakeorder',
})
}
}
})
}
else {
that.payment(rese.data)
}
wx.hideLoading();
},
fail: function () {
// fail
wx.hideLoading();
wx.showToast({
title: '网络异常！err:wxpay',
duration: 2000
});
}
})
wx.hideNavigationBarLoading();
}
})
},
payment: function (data) {
//console.log(data);
var that = this;
wx.requestPayment({
'timeStamp': data.timeStamp,
'nonceStr': data.nonceStr,
'package': data.package,
'signType': 'MD5',
'paySign': data.paySign,
success: function (res) {
console.log(res)
wx.showToast({
title: '预约提交成功',
icon: 'success',
duration: 2000,
success: function () {
//验证支付是否成功
wx.request({
url: app.d.ceshiUrl + 'home.payOrderSts',
data: {
'wepay_no': that.data.wepay_no,
},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'Content-Type': 'application/x-www-form-urlencoded'
}, // 设置请求的 header
success: function (rese) {
console.log(rese)
}
})
wx.redirectTo({
url: '/pages/my/myMakeorder/myMakeorder',
})
}
});
},
fail: function (res) {
console.log(res)
wx.showToast({
title: '支付取消',
icon: '../../images/icon_wrong.png',
duration: 2000,
success: function () {
wx.redirectTo({
url: '/pages/designerList/designerList',
})
}
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
样式：
/* pages/designerList/designerDetail.wxss */
.footbtn{
left: 0;
bottom: 0;
right: 0;
}
.footbtn view{
height: 100rpx;
line-height: 100rpx;
}
/* 表单 */
.formView{
width: 100%;
}
.inputs{
width: 100%;
border-radius: 10rpx;
}
.inputs input{
/* width: 68%; */
text-align: right!important;
display: inline-block;
padding-right: 15rpx;
}
.btnsubmit{
padding: 0 60rpx;
border-radius:60rpx;
height:70rpx;
line-height:70rpx;
}
.btnsubmit:disabled{
background: indianred;
}
/* @import 'common.wxss'; */
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
/*padding & margin */
.p_all10,.p_all15,.p_all20,.p_all30,.p_lr10,.p_lr15,.p_lr20,.p_tb10,.p_tb20,.p_tb5,.p_lr30,.p_tb15,.p_lr5{
box-sizing: border-box;
}
.p_all10{
padding: 20rpx;
}
.p_all15{
padding: 30rpx;
}
.p_all20{
padding: 40rpx;
}
.p_all30{
padding: 60rpx;
}
.p_lr10{
padding-left: 20rpx;
padding-right: 20rpx;
}
.p_tb10{
padding-top: 20rpx;
padding-bottom: 20rpx;
}
.p_tb5{
padding-top: 10rpx;
padding-bottom: 10rpx;
}
.p_tb15{
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.p_tb20{
padding-top: 40rpx;
padding-bottom: 40rpx;
}
.p_lr5{
padding-left: 10rpx;
padding-right: 10rpx;
}
.p_lr15{
padding-left: 30rpx;
padding-right: 30rpx;
}
.p_lr20{
padding-left: 40rpx;
padding-right: 40rpx;
}
.p_lr30{
padding-left: 60rpx;
padding-right: 60rpx;
}
.p_b10{padding-bottom: 20rpx;}
.p_b20{padding-bottom: 40rpx;}
.p_b50{padding-bottom: 100rpx;}
.m_t5{margin-top: 10rpx;}
.m_t10{margin-top: 20rpx;}
.m_t15{margin-top: 30rpx;}
.m_t20{margin-top: 40rpx;}
.m_t30{margin-top: 60rpx;}
.m_r5{margin-right: 10rpx;}
.m_r10{margin-right: 20rpx;}
.m_r15{margin-right: 30rpx;}
.m_r20{margin-right: 40rpx;}
.m_b10{margin-bottom: 20rpx;}
.m_b20{margin-bottom: 40rpx;}
.m_tb5{margin-top: 10rpx;margin-bottom: 10rpx;}
.m_tb10{margin-top: 20rpx;margin-bottom: 20rpx;}
.m_tb20{margin-top: 40rpx;margin-bottom: 40rpx;}
.m_lr10{margin-left:20rpx;margin-right: 20rpx;}
.m_lr20{margin-left:40rpx;margin-right: 40rpx;}
/*background & color */
.bg_white{background-color: white;}
.bg_grayf{background-color: #f5f5f5;}
.bg_graye{background-color: #eee;}
.bg_theme{background-color: #ff6000;}
.bg_lan{background-color: #343265;}
.bg_org{background-color: #ff9f00;}
.bg_black{background-color: #201e1f;}
.bg_gray9{background-color: #f9f9f9;}
.bg_grayc{background-color: #ccc;}
.bg_gray3{background-color: #333333;}
.bg_blue{background-color: #5b95ff;}
.bg_gray6{background-color: #666;}
.white{color: white;}
.blue{color: #00cafd;}
.black{color: black;}
.gray2{color: #222;}
.gray5{color: #555;}
.gray6{color: #666;}
.gray9{color: #999;}
.grayc{color: #ccc;}
.c_theme{color: #ff6000;}
.orange{color: orange;}
.yellow{color: yellow;}
.green{color: green;}
.red{color: red;}
.priceC{color: #f17f2b;}
/*font */
.font10{font-size: 20rpx;}
.font12{font-size: 24rpx;}
.font13{font-size: 26rpx;}
.font14{font-size: 28rpx;}
.font15{font-size: 30rpx;}
.font16{font-size: 32rpx;}
.font18{font-size: 36rpx;}
.font20{font-size: 40rpx;}
.font22{font-size: 44rpx;}
.font24{font-size: 48rpx;}
.font26{font-size: 52rpx;}
.font28{font-size: 56rpx;}
.fontw{font-weight: 680;}
.fontw7{font-weight: 700!important;}
/*border */
.bd_t{border-top: 1px solid #eee;}
.bd_b{border-bottom: 1px solid #eee;}
.bd_all{border: 1px solid #eee;}
.bd_tb{border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
.bd_r{border-right: 1px solid #eee;}
.bd_colorC{border-color: #ccc;}
.shadowC{box-shadow: #ccc 0px 0px 15px;}
.radius5{border-radius: 10rpx;}
.radius10{border-radius: 20rpx;}
/*伪类 */
.down_ico,
.left_ico,
.right_ico{position: relative;height: 100rpx;line-height: 100rpx;}
.right_ico::after{
content: "＞";
position: absolute;
height: 100rpx;
line-height: 100rpx;
top: 0;
right: 0;
color: #ccc;
font-size: 24rpx;
}
.left_ico{position: fixed;top: 0;left: 0;right: 0;z-index: 99;}
.left_ico::before{
content: "＜";
position: absolute;
height: 100rpx;
line-height: 100rpx;
top: 0;
left: 10rpx;
color: #fff;
font-size: 40rpx;
/* font-weight: 600; */
}
.flex{display: flex;}
.block{display: block;}
.inline_block{display: inline-block;}
.fr{float: right;}
.fl{float:left;}
.tc{text-align: center;}
.tl{text-align: left;}
.tr{text-align: right;}
.tj{text-align: justify;}
.ti{text-indent: 40rpx;}
.lineH_s text{line-height: 30rpx;}
.lineH_m text{line-height: 50rpx;}
.lineH_l text{line-height: 80rpx;}
.lineH_xl text{line-height: 100rpx;}
.pr{position: relative;}
.pa{position: absolute;}
.pf{position: fixed;}
/*头像 */
.imglogo{width: 150rpx;height: 150rpx;border-radius: 50%;overflow: hidden;}
.imglogo-s{width: 100rpx;height: 100rpx;border-radius: 50%;overflow: hidden;}
.cl{clear: both;}
/*溢出省略 */
.ellipsis{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
/*button */
.btn_m{
display: inline-block;
width: 80%;
padding: 30rpx 0;
text-align: center;
font-size: 32rpx;
margin: 10rpx 0;
border: solid 1px #eee;
}
/* 常用 */
.mask{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 99;
background:rgba(0, 0, 0, .5);
}
.tip-content-dialog{
position: fixed;
display: flex;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
z-index: 99999;
}
.tip-content-dialog .tip-dialog-view{
width: 80%;
margin: auto;
border-radius: 25rpx;
vertical-align: middle;
animation: tanchu 400ms ease-in;
/* overflow: hidden; */
padding: 20rpx;
}
.tip-content-dialog .btn{
background: #f2f7fa;
}
@keyframes tanchu{
from{
transform: scale(0,0);
-webkit-transform: scale(0,0);
}
to{
transform: scale(1,1);
-webkit-transform: scale(1,1);
}
}
.tip-content-dialog .dialogClose{
position: absolute;
right:20rpx;
top: 10rpx;
width: 60rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
.navigator-hover{
background-color:inherit;
color: inherit;
opacity: 1;
}
/* 评价列表 */
.commentList{
position: relative;
padding: 20rpx 20rpx 20rpx 120rpx;
background: white;
border-bottom: #eee 1px solid;
}
.commentList .userImg{/*头像*/
position: absolute;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
z-index: 99;
top: 20rpx;
left: 20rpx;
}
.commentList .userName{
font-size: 28rpx;
color: #555;
/* font-weight: 600; */
}
.commentList .stars image{
width: 25rpx;
height: 25rpx;
margin-right: 6rpx;
}
.commentList .commentTxt{
line-height: 40rpx;
padding-right: 20rpx;
}
.commentList .imglist image{
width: 90rpx;
height: 90rpx;
margin: 10rpx 10rpx 0px 0px;
}
.commentList .commentreply{
background-color: #eee;
line-height: 40rpx;
}
.dialogbtn{
border: white solid 1px;
border-radius: 40rpx;
display: inline-block;
margin: 10rpx auto;
}
/* 配送进度条 */
.sliderbar{
width: 100%;
height: 12rpx;
border-radius: 12rpx;
background: white;
margin: 90rpx auto -30rpx;
}
.sliderbar .barInner{
height: 100%;
border-radius: 15rpx;
}
.sliderbar .barInner .innertar{
height: 100%;
background: orange;
border-radius: 15rpx;
animation: jindu 1s ease;
}
@keyframes jindu {
from{
width: 0rpx;
}
to{
width: 100%;
}
}
.sliderIcon{
position: absolute;
width: 90rpx;
height: 90rpx;
z-index: 9;
top: -80rpx;
}
/* 覆盖button样式 */
button.form_button{
background-color:transparent;
padding:0;
margin:0;
display:inline;
position:static;
border:0;
padding-left:0;
padding-right:0;
border-radius:0;
/* font-size:0rpx; */
color:transparent;
}
button.form_button::after{
content:'';
width:0;
height:0;
-webkit-transform:scale(1);
transform:scale(1);
display:none;
background-color:transparent;
}
/* 订单小按钮 */
.orderbtn{
display: inline-block;
border-radius:40rpx;
padding: 8rpx 30rpx;
}
.orderbtn.defult{
border: #999 1px solid;
color: #666;
}
.orderbtn.on{
border: #ff6000 1px solid;
color: #ff6000;/*themeColor*/
}
/* public footer */
.footer{
z-index: 9;
left: 0;
right: 0;
bottom: 0;
height: 100rpx;
}
/* 授权窗口 */
.isMask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: #000;
opacity: 0.5;
}
.isLogin {
position: fixed;
padding: 50rpx 50rpx;
width: 480rpx;
height: 320rpx;
background: #fff;
top: 50%;
left: 50%;
margin-left: -280rpx;
margin-top: -185rpx;
z-index: 1001;
}
.isLoginBtn {
display: flex;
justify-content: space-around;
}
.isLoginBtn button {
background: #fff;
width: 100%;
height: 68repx;
padding-left: 0rpx;
padding-right: 0rpx;
margin-right: 0rpx;
margin-left: 0rpx;
font-size: 28rpx;
margin-top: 50rpx;
color: #4bad37;
}
.loginTitle {
font-size: 34rpx;
}
.loginshopImg {
height: 80rpx;
font-size: 26rpx;
padding: 20rpx 0rpx;
border-bottom: 1rpx solid #ececec;
}
.loginshopImg>image {
width: 68rpx;
height: 68rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.isAgary {
display: flex;
align-items: center;
font-size: 24rpx;
color: #666;
margin-top: 30rpx;
}
.isAgary>text {
margin-right: 20rpx;
}
/* menus */
.homeMenus{
display: inline-block;
width:20% ;
}
.homeMenus image{
width: 80rpx;
height: 80rpx;
}
/* modeltitle */
.title image{
width: 40rpx;
height: 37rpx;
margin-right: 20rpx;
}
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
/*padding & margin */
.p_all10,.p_all15,.p_all20,.p_all30,.p_lr10,.p_lr15,.p_lr20,.p_tb10,.p_tb5,.p_tb15{
box-sizing: border-box;
}
.p_all10{
padding: 20rpx;
}
.p_all15{
padding: 30rpx;
}
.p_all20{
padding: 40rpx;
}
.p_all30{
padding: 60rpx;
}
.p_lr10{
padding-left: 20rpx;
padding-right: 20rpx;
}
.p_tb10{
padding-top: 20rpx;
padding-bottom: 20rpx;
}
.p_tb5{
padding-top: 10rpx;
padding-bottom: 10rpx;
}
.p_tb15{
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.p_lr15{
padding-left: 30rpx;
padding-right: 30rpx;
}
.p_lr20{
padding-left: 40rpx;
padding-right: 40rpx;
}
.p_b10{padding-bottom: 20rpx;}
.p_b20{padding-bottom: 40rpx;}
.p_b50{padding-bottom: 100rpx;}
.m_t5{margin-top: 10rpx;}
.m_t10{margin-top: 20rpx;}
.m_t20{margin-top: 40rpx;}
.m_t30{margin-top: 60rpx;}
.m_r5{margin-right: 10rpx;}
.m_r10{margin-right: 20rpx;}
.m_r20{margin-right: 40rpx;}
.m_b10{margin-bottom: 20rpx;}
.m_tb10{margin: 20rpx 0;}
.m_lr10{margin: 0 20rpx;}
/*background & color */
.bg_white{background-color: white;}
.bg_grayf{background-color: #f5f5f5;}
.bg_graye{background-color: #eee;}
.bg_theme{background-color: #ff6000;}
.bg_lan{background-color: #343265;}
.bg_org{background-color: orange;}
.bg_black{background-color: #201e1f;}
.bg_gray9{background-color: #f9f9f9;}
.bg_grayc{background-color: #ccc;}
.white{color: white;}
.blue{color: #00cafd;}
.black{color: black;}
.gray2{color: #222;}
.gray5{color: #555;}
.gray6{color: #666;}
.gray9{color: #999;}
.c_theme{color: #ff6000;}
.orange{color: orange;}
.yellow{color: yellow;}
.red{color: red;}
.priceC{color: #f17f2b;}
/*font */
.font10{font-size: 20rpx;}
.font12{font-size: 24rpx;}
.font13{font-size: 26rpx;}
.font14{font-size: 28rpx;}
.font15{font-size: 30rpx;}
.font16{font-size: 32rpx;}
.font18{font-size: 36rpx;}
.font24{font-size: 48rpx;}
.fontw{font-weight: 600;}
/*border */
.bd_t{border-top: 1px solid #eee;}
.bd_b{border-bottom: 1px solid #eee;}
.bd_all{border: 1px solid #eee;}
.bd_tb{border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
.bd_r{border-right: 1px solid #eee;}
.bd_colorC{border-color: #ccc;}
.shadowC{box-shadow: #ccc 0px 0px 15px;}
.radius5{border-radius: 10rpx;}
.radius10{border-radius: 20rpx;}
/*伪类 */
.down_ico,
.left_ico,
.right_ico{position: relative;height: 100rpx;line-height: 100rpx;}
.right_ico::after{
content: "＞";
position: absolute;
height: 100rpx;
line-height: 100rpx;
top: 0;
right: 0;
color: #ccc;
font-size: 24rpx;
}
.left_ico{position: fixed;top: 0;left: 0;right: 0;z-index: 99;}
.left_ico::before{
content: "＜";
position: absolute;
height: 100rpx;
line-height: 100rpx;
top: 0;
left: 10rpx;
color: #fff;
font-size: 40rpx;
/* font-weight: 600; */
}
.flex{display: flex;}
.block{display: block;}
.inline_block{display: inline-block;}
.fr{float: right;}
.fl{float:left;}
.tc{text-align: center;}
.tl{text-align: left;}
.tr{text-align: right;}
.tj{text-align: justify;}
.ti{text-indent: 40rpx;}
.lineH_s text{line-height: 30rpx;}
.lineH_m text{line-height: 50rpx;}
.lineH_l text{line-height: 80rpx;}
.lineH_xl text{line-height: 100rpx;}
.pr{position: relative;}
.pa{position: absolute;}
/*头像 */
.imglogo{width: 140rpx;height: 140rpx;border-radius: 50%;overflow: hidden;}
.cl{clear: both;}
/*溢出省略 */
.ellipsis{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
/*button */
.btn_m{
display: inline-block;
width: 80%;
padding: 30rpx 0;
text-align: center;
font-size: 32rpx;
margin: 10rpx 0;
border: solid 1px #eee;
}
/* 常用 */
.mask{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 99;
background:rgba(0, 0, 0, .6);
}
.tip-content-dialog{
position: fixed;
display: flex;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,.6);
z-index: 99999;
}
.tip-content-dialog .tip-dialog-view{
width: 80%;
margin: auto;
border-radius: 15rpx;
vertical-align: middle;
animation: tanchu 400ms ease-in;
overflow: hidden;
padding: 20rpx;
}
.tip-content-dialog .btn{
background: #f2f7fa;
}
@keyframes tanchu{
from{
transform: scale(0,0);
-webkit-transform: scale(0,0);
}
to{
transform: scale(1,1);
-webkit-transform: scale(1,1);
}
}
.tip-content-dialog .dialogClose{
right:0rpx;
top: 10rpx;
width: 60rpx;
height: 60rpx;
}
.navigator-hover{
background-color:inherit;
color: inherit;
opacity: 1;
}
/* 评价列表 */
.commentList{
position: relative;
padding: 20rpx 20rpx 20rpx 120rpx;
background: white;
border-bottom: #eee 1px solid;
}
.commentList .userImg{/*头像*/
position: absolute;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
z-index: 99;
top: 20rpx;
left: 20rpx;
}
.commentList .userName{
font-size: 28rpx;
color: #555;
/* font-weight: 600; */
}
.commentList .stars image{
width: 25rpx;
height: 25rpx;
margin-right: 6rpx;
}
.commentList .commentTxt{
line-height: 40rpx;
padding-right: 20rpx;
}
.commentList .imglist image{
width: 90rpx;
height: 90rpx;
margin: 10rpx 10rpx 0px 0px;
}
.commentList .commentreply{
background-color: #eee;
line-height: 40rpx;
}
.dialogbtn{
border: white solid 1px;
border-radius: 40rpx;
display: inline-block;
margin: 10rpx auto;
}
/* 配送进度条 */
.sliderbar{
width: 100%;
height: 12rpx;
border-radius: 12rpx;
background: white;
margin: 90rpx auto -30rpx;
}
.sliderbar .barInner{
height: 100%;
border-radius: 15rpx;
}
.sliderbar .barInner .innertar{
height: 100%;
background: orange;
border-radius: 15rpx;
animation: jindu 1s ease;
}
@keyframes jindu {
from{
width: 0rpx;
}
to{
width: 100%;
}
}
.sliderIcon{
position: absolute;
width: 90rpx;
height: 90rpx;
z-index: 9;
top: -80rpx;
}
同事的，可能代码有重复的，将就看，数据换成自己的就能用了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。