微信小程序实现表单验证源码
本文实例为大家分享了微信小程序实现表单验证的具体代码，供大家参考，具体内容如下
效果图
点击预约设计弹出表单
城市，面积不能输入，只能选择
点击位置获取当前定位
源码:
Wxml
<!--pages/designerList/designerDetail.wxml-->
<view>
<view class='tc m_t20'>
<image src='{{urlhttp + designerDetail.thumb}}' class='imglogo'></image>
<text class='font18 fontw7 block m_t5'>{{designerDetail.name}}</text>
<text class='inline_block c_theme font12' style='background:#ffd3b0;padding:4rpx 16rpx;'>{{designerDetail.honour}}</text>
<view class='font14'>
<view class='inline_block bd_all m_t10' style='border-color:#ff6000;padding:8rpx 30rpx;border-radius:70rpx;overflow:hidden'>
<text class='gray6'>设计费用：</text>
<text class='c_theme'>{{designerDetail.attr_3}}</text>
</view>
</view>
</view>
<view class='p_all15'>
<view class='radius5' style='box-shadow:#ccc 0px 1px 5px;overflow:hidden'>
<text class='block white p_tb10 tc font15 bg_gray6'>简介</text>
<view class='font15 gray6 lineH_m p_all10'>
<text class='block' wx:if="{{designerDetail.attr_2 !== ''}}">-作品：{{designerDetail.attr_2}}</text>
<text class='block' wx:if="{{designerDetail.attr_1 !== ''}}">-擅长：{{designerDetail.attr_1}}</text>
<text class='block' wx:if="{{designerDetail.attr_4 !== ''}}">-毕业院校：{{designerDetail.attr_4}}</text>
<text class='block' wx:if="{{designerDetail.attr_5 !== ''}}">-从业年限：{{designerDetail.attr_5}}</text>
<text class='block' wx:if="{{designerDetail.attr_6 !== ''}}">-设计理念：{{designerDetail.attr_6}}</text>
</view>
</view>
</view>
<!-- 案例图片 -->
<view class='p_tb10 p_lr15 font16 gray3'>案例作品</view>
<view class='p_lr15 p_b20'>
<view class='m_t10' wx:for="{{designerDetail.pics}}" bindtap='bindpreviewImage' id='{{index}}'>
<image src='{{urlhttp + item}}' mode='widthFix' style='width:100%;border-radius:40rpx;'></image>
</view>
</view>
<!-- 预约按钮 -->
<view style='height:100rpx;'></view>
<view class='pf footbtn flex'>
<view style='width:50%;border-color:white' class='bd_r white font18 tc bg_theme' data-type='预约设计' bindtap='orderTap'>预约设计</view>
<view style='width:50%;' class='white font18 tc bg_theme' data-type='预约量房' bindtap='orderTap'>预约量房</view>
</view>
<!-- 预约表单 -->
<view class='tip-content-dialog' hidden='{{dialogHidden}}'>
<view class='tip-dialog-view p_all20 bg_white' style='width:90%;border-radius40rpx;overflow:hidden;'>
<text class='font15 gray9 inline_block p_b10 p_lr10' bindtap='closeTap'>取消</text>
<form bindsubmit="formSubmit">
<view class='p_all10'>
<view class='formView'>
<view class='inputs bg_graye gray6 font15 p_tb10 p_lr10'>
<picker bindchange="bindPickerzone" value="{{index2}}" range="{{userZoneList}}">
<label class='fl m_t5'>所在城市</label>
<text class='fr m_t5'>﹀</text>
<input class='tr fr' type='text' disabled='disabled' value='{{userZoneList[index2]}}'></input>
<view class='cl'></view>
</picker>
</view>
<view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10' bindtap='getLocation'>
<label class='fl m_t5'>工程位置</label>
<text class='fr m_t5'>﹀</text>
<input class='tr fr' type='text' disabled='disabled' value='{{userlocation}}'></input>
<view class='cl'></view>
</view>
<view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10'>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{acreagelist}}">
<label class='fl m_t5'>房屋面积</label>
<text class='fr m_t5'>﹀</text>
<input class='tr fr' type='text' disabled='disabled' value='{{acreagelist[index]}}'></input>
<view class='cl'></view>
</picker>
</view>
<view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10'>
<label class='fl m_t5'>真实姓名</label>
<input class='tr fr' type='text' value='' name='name' placeholder='输入真实姓名'></input>
<view class='cl'></view>
</view>
<view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10'>
<label class='fl m_t5'>手机号码</label>
<input class='tr fr' type='number' maxlength='11' name='tele' value='' placeholder='输入手机号码'></input>
<view class='cl'></view>
</view>
</view>
</view>
<view class='tc c_theme font16 p_tb10'>{{orderType}}预约支付：￥{{price}}</view>
<view class='tc gray9 font13 p_tb10'>预约成功后工作人员将于2个工作日内确认，请保持手机畅通</view>
<view class='m_tb10 bg_white tc'>
<button class='bg_theme white btnsubmit font16 tc inline_block' form-type="submit" disabled='{{!btnStatus}}'>立即预约</button>
</view>
</form>
</view>
</view>
</view>
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;
}
同事的，可能代码有重复的，将就看，数据换成自己的就能用了。
相关文章
Vanora
2020-07-25
Judith
2021-05-18
Acacia
2021-06-08
Dawn
2020-01-16
Aurora
2021-06-23
Maleah
2021-03-26
Valora
2023-07-20
Ophelia
2023-07-20
Bonita
2023-07-20
Alexandra
2023-07-20
Rayna
2023-07-20
Adelle
2023-07-20
Viridis
2023-07-21
Octavia
2023-07-21
Bonita
2023-07-21
Ophelia
2023-07-21
Jacuqeline
2023-07-21