<view class="container">
<image class="tit" src="{{guanggao}}"></image>
<!--没交保证金-->
<view class="classname" wx:if="{{shopmoney==false}}">
<form bindsubmit="reg">
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}" style="display:block">
<radio value="{{item.name}}" checked="{{item.checked}}" style="text-align: left; margin:20rpx 120rpx;margin-right:20rpx;"/>
￥<input class="inp" name="money" value="" />
</label>
</radio-group>
<view class="jj">请核对好信息，金额请填整数</view>
<view class="shuoming">
<checkbox-group class="group" bindchange="checkboxChange">
<view class="label-1" wx:for-items="{{checkboxItems}}">
<label >
<checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox>
<view class="label-1__icon">
<view class="label-1__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
</view>
</label>
<text class="label-1__text">{{item.value}}</text><text class="label-2__text" style="color:#7171C6" bindtap="modalTap">【缴纳保证金说明】</text>
</view>
</checkbox-group>
</view>
<button type=""
form-type="submit" hover-class='button-hover' class='su'>立刻缴纳</button>
</form>
</view>
<!--已经交了保证金-->
<view class="classname" wx:else>
<form bindsubmit="reg">
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}" style="display:block">
<radio value="{{item.name}}" checked="{{item.checked}}" style="text-align: left; margin:20rpx 120rpx;margin-right:20rpx;"/>
你已交保证金￥{{shopmoney}}
</label>
</radio-group>
<button type="" hover-class='button-hover' class='su' bindtap="refund">申请退还保证金</button>
</form>
</view>
</view>
|
.tit {
height: 300rpx;
width: 100%;
}
.container {
padding: 0px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
font-family: '微软雅黑';
}
.classname {
margin-top: 30rpx;
width: 100%;
/*text-align: center;*/
padding-bottom: 150rpx;
}
.jj {
font-size: 28rpx;
padding-top: 20rpx;
font-family: "微软雅黑", "黑体";
margin: 0 auto;
width: 495rpx;
color: #ccc;
padding-bottom: 20rpx;
}
.xing {
font-family: "微软雅黑", "黑体";
height: 54rpx;
width: 579rpx;
border-radius: 10rpx;
background: #fff;
margin: 0 auto;
text-align: left;
line-height: 54rpx;
font-size: 28rpx;
padding: 10rpx;
margin-top: 38rpx;
padding-left: 30rpx;
}
.xi {
font-family: "微软雅黑", "黑体";
height: 200rpx;
width: 579rpx;
border-radius: 10rpx;
background: #fff;
margin: 0 auto;
text-align: left;
line-height: 54rpx;
font-size: 28rpx;
padding: 10rpx;
margin-top: 38rpx;
padding-left: 30rpx;
}
.placeholder {
color: #ccc;
font-size: 26rpx;
}
.in {
float: right;
width: 75%;
padding-top: 0rpx;
font-size: 28rpx;
color: #000;
}
.i {
float: right;
width: 72%;
height: 100%;
padding-top: 12rpx;
font-size: 28rpx;
color: #000;
}
textarea {
height: 100px;
}
.t {
font-family: "微软雅黑", "黑体";
width: 20%;
height: 60rpx;
/*background: #fff;*/
margin-left: 57rpx;
padding: 5rpx;
line-height: 60rpx;
margin-top: 40rpx;
font-size: 28rpx;
display: inline-block;
border: 1px solid #ccc;
float: left;
}
.su {
width: 50%;
color: #fff;
height: 69rpx;
line-height: 69rpx;
font-size: 30rpx;
font-family: "微软雅黑", "黑体";
top: 103rpx;
background: red;
}
button[type="primary"] {
color: #000;
background-color: #fff;
}
.shuoming{
height: 50rpx;
font-size: 30rpx;
text-align: center;
}
.label-1, .label-2{
margin-bottom: 15px;
}
.label-1__text, .label-2__text {
display: inline-block;
vertical-align: middle;
}
.label-1__icon {
position: relative;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
background: #fcfff4;
border: 1px solid #ccc
}
.label-1__icon-checked {
position: absolute;
top: 3px;
left: 3px;
width: 12px;
height: 12px;
background: #d9002f;
}
.inp{
width: 286rpx;
border: 1px solid #ccc;
display: inline-block;
line-height: 50rpx;
overflow: initial; min-height:1.7rem;
padding-left: 20rpx;
background: #fff;
}
|
var app = getApp();
var common = require("../../utils/common.js");
Page({
data: {
checkboxItems: [
{ name: 'USA', value: '我已了解并阅读了' },
],
items: [
{ name: 'USA', value: '￥' ,checked:true},
],
content: '',
},
radioChange: function (e) {
console.log('radio发生change事件，携带value值为：', e.detail.value)
},
modalTap: function () {
var that=this;
wx.showModal({
title: '保证金说明',
content: that.data.content,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
// 表单
reg: function (e) {
console.log(e.detail.value);
var that=this;
var formdata=e.detail.value;
if (that.data.checkboxItems[0].checked == true) {
if(formdata.money>=1000){
that.markorder(formdata.money);
}else{
wx.showToast({
title: '保证金最低1000元.',
})
}
} else {
wx.showToast({
title: '请阅读缴纳保证金说明并同意！',
duration: 3000
});
}
},
checkboxChange: function (e) {
var checked = e.detail.value
var changed = {}
console.log(this.data.checkboxItems[0].name)
if (checked.indexOf(this.data.checkboxItems[0].name) !== -1) {
changed['checkboxItems[0].checked'] = true
} else {
changed['checkboxItems[0].checked'] = false
}
this.setData(changed)
console.log(changed)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
that.loadinfo();
},
loadinfo: function () {
var that = this;
wx.request({
url: app.d.ceshiUrl + '/Api/Renzheng/caution_money_info',
method: 'post',
data: {uid:app.globalData.userInfo.id},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
//--init data
var status = res.data.status;
if (status == 1) {
console.log(res.data.respondData);
that.setData({
guanggao: res.data.respondData.guanggao,
content: res.data.respondData.content,
shopmoney: res.data.respondData.shopmoney
})
} else {
wx.showToast({
title: res.data.message,
})
}
},
fail: function () {
// fail
wx.showToast({
title: '网络异常！',
duration: 30000
});
}
})
},
markorder: function (money){
var that=this;
wx.request({
url: app.d.ceshiUrl + '/Api/Renzheng/markorder',
method: 'post',
data: {
//uid:uid,pid:pro_id,aid:addr_id,sid:shop_id,buff:buff,num:num,price_yh:price_yh,p_price:p_price,price:z_price,type:pay_type,yunfei:yun_id,cart_id:cart_id,remark:ly
uid: app.globalData.userInfo.id,
price: money,//总价
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
//--init data
var data = res.data;
console.log(data);
if (data.status == 1) {
//创建订单成功
wx.showToast({
title: '下单成功!',
duration:2000,
})
that.wxpay(money,data.respondData.order_id);
} else {
wx.showToast({
title: "下单失败!",
})
}
},
});
},
wxpay: function(money,orderid){
wx.request({
url: app.d.ceshiUrl + '/Api/Renzheng/dowxpay',
data: {
order_id: orderid,
uid: app.globalData.userInfo.id,
},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'Content-Type': 'application/x-www-form-urlencoded'
}, // 设置请求的 header
success: function (res) {
if (res.data.status == 1) {
var order = res.data.success;
console.log(order);
wx.requestPayment({
timeStamp: order.timeStamp,
nonceStr: order.nonceStr,
package: order.package,
signType: 'MD5',
paySign: order.paySign,
success: function (res) {
wx.showToast({
title: "支付成功!",
})
},
fail: function () {
wx.showToast({
title: "支付失败!",
})
}
})
}
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
refund:function (){
wx.showToast({
title: '请联系客服进行此项操作！谢谢！',
duration:5000,
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
}
})
|
模板简介：该模板名称为【微信小程序已交保证金提示页面样式设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
