微信小程序企业版绿色订单确认选择支付设计制作开发教程

本文给大家带来的是微信小程序企业版绿色订单确认选择支付设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pay.wxml-->
<view class="w100">
	<form bindsubmit="bindBtnPay" report-submit="true" name="payForm">
		<view class="p_all bg_white df item">
			<view class="cp_photo">			
				<image src="{{itemData.LunBoProductImageUrl[0]}}"></image>
			</view>
			<view class="df_1">	
				<view class="font_14 mt5 ovh1">
		           {{itemData.ProductName}}
		        </view>
			<text class="gm_ovh_1h red pt10">¥{{itemData.Price}}</text>
			<!-- <view class="gms_view">
				<navigator url="##" class="">+</navigator>
		        <input bindconfirm="EventHandle" placeholder="1"/>
				<navigator url="##" class="">-</navigator>				
			</view> -->
			</view>
		</view>		
		
		<view class="p_all bg_white mt10 font_14">
		<navigator url="../user/address" hover-class="none">
			<view class="df">
				<view class="df_1 c6">
				<view class="l_h20">收货人：何仔仔<text class="fl_r mr10">15980968693</text></view>
				<view class="l_h20 mt5">地址：福建省厦门市湖里区xxxxxx号</view>
				</view>
				<image class="x_right mt15" src="/images/x_right.png"></image>			
			</view>
			</navigator>
		</view>	
<view class="xuan"  >
	<view class="hui">可使用优惠券：</view>
<!--设置监听器，当点击radio时调用-->
<radio-group bindchange="listenerRadioGroup" class="hui">
<!--label通常与radio和checkbox结合使用-->
  <label style="display: flex" wx:for-items="{{array}}" class="xuan">
  <radio value="{{item.name}}" checked="{{item.checked}}"/>{      		{item.value}}
 </label>
</radio-group>


</view>

		<view class="p_all bg_white mt10 font_14">
			<textarea class="min_60" auto-height name="remark" placeholder="备注" bindinput="remarkInput" value="{{remark}}"/> 
		</view>	

	<view class="zhifu mt10 tc">应共支付：<span class="font_20 red">￥{{itemData.Price}}</span></view>
	<!-- <navigator url="##" hover-class="none" class="zhifu mt10">支付宝<image class="x_right" src="/images/x_right.png"></image></navigator> -->
	<!-- <navigator url="##" hover-class="none" class="zhifu">银联支付<image class="x_right" src="/images/x_right.png"></image></navigator> -->
	<!-- <navigator url="../order/downline" hover-class="none" class="zhifu">线下支付<image class="x_right" src="/images/x_right.png"></image></navigator>
	<navigator url="../order/downline" hover-class="none" class="zhifu">线下支付<image class="x_right" src="/images/x_right.png"></image></navigator>
 -->
	<view class="p_all mt10">
		<view class="btnGreen">
			<!-- <button type="primary" id="btnPay" formType="submit" loading="{{loading}}" disabled="{{disabled}}">微信支付</button> -->
			<!-- <navigator url="../order/detail" hover-class="none">
				<button class="wx_pay_submit" type="primary" id="wxPay" formType="submit" >微信支付</button>
				<button class="xx_pay_submit" type="default" id="xxPay" formType="submit" >线下支付</button>
			</navigator> -->
			<button class="wx_pay_submit" type="primary" id="wxPay" disabled="{{btnDisabled}}" formType="submit" bindtap="createProductOrderByWX">微信支付</button>
			<button class="xx_pay_submit" type="default" id="xxPay" disabled="{{btnDisabled}}" formType="submit" bindtap="createProductOrderByXX">线下支付</button>
			
		</view>
	</view>


	</form>

</view>

二、wxss样式文件代码如下：

.item .cp_photo{ 
    width: 60px; 
    height: 60px;
    overflow: hidden; 
    border-radius: 3px; 
    margin-right: 10px;
}
.item .cp_photo image{ 
    width: 60px; 
    height: 60px;
}
.gm_ovh_2h{
    line-height:25px; 
    height: 50px; 
    margin:0; 
    overflow:hidden;  
    text-overflow:ellipsis; 
    display:-webkit-box; 
    -webkit-line-clamp:2;  
    -webkit-box-orient:vertical; 
    font-size: 16px;
}
.gm_ovh_1h{
    line-height:25px; 
    height: 25px; 
    margin:0; 
    overflow:hidden;  
    text-overflow:ellipsis; 
    display:-webkit-box; 
    -webkit-line-clamp:2;  
    -webkit-box-orient:vertical; 
    font-size: 16px;
} 
.h10_hui{
    height: 10px;
    width: 100%;
    background: #eee;
}

.min_60{
    min-height: 60px;
}

.w100{ width: 100%}

.iconWarn{
   vertical-align:top;padding-right:2px;
}

.iconClear{
  float:right;
  padding-top: 5px;
  padding-left: 10px;
  padding-right:10px;
  margin-top:-36px;
  height: 28px;
}

.inputStyle{
  height: 36px;
  line-height: 36px;
  padding-left: 2px;
  width:80%;
}

.tips{
  margin-bottom:10px;
}
.x_right{
    width:16px;
    height: 18px;
    display:inline-block; 
    vertical-align: middle;
    float: right; 
}
.zhifu{
    background: #fff;
    margin-bottom: 1px;
    padding: 4%;
    width: 92%;
    font-size: 14px;
    color: #666;
}
.font_20{
    font-size: 20px;
    font-weight: bold;
}
.xx_pay_submit{
  margin-top: 10px;
}
.gms_view{  
    width: 100%;
    display: inline-block;
    text-align: right;
}
.gms_view navigator{
    border: 1px solid #ddd;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #666;
    font-size: 12px;
    text-align: center;
    line-height: 22px;
    float: right;
    font-weight: bold;
    
}
.gms_view input{
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 12px;
    width: 30px;
    margin: 0 5px;
    text-align: center;
    color: #999;
    float: right;
}
.che{
    border-radius:50% ;
    width: 20px;
    height: 20px;
}
.hui{
    margin-left: 28rpx;
    font-size: 30rpx;
    
}
.xuan{
    padding: 10rpx 0;
    font-size: 30rpx;
}

三、js页面代码如下：

var app = getApp();
// pages/order/downline.js
Page({
  data:{
    itemData:{},
    userId:app.d.userId,
    supplierId:0,
    productId:0,//proId
    buyCount:0,
    paytype:0,//0线下1微信
    remark:'',
    cartId:0,
    addrId:122,//收货e地址//测试--
    btnDisabled:false,
    ture:false,
array:[
  {name: 'Jave', value: 'Android', checked: 'true'},
  {name: 'Object-C', value: 'IOS'},
  // {name: 'jsx', value: 'ReactNative'},
  // {name: 'js', value: 'WeChat'},
  // {name: 'Python', value: 'Web'},
 ]
  },
  
  onLoad:function(options){
    console.log(options);
    this.setData({
      cartId: options.cartId,
      productId: options.productId,
      buyCount: options.buyCount,
    });

    this.loadProductDetail();
  },
  loadProductDetail:function(){
    var that = this;

    wx.request({
      url: app.d.hostUrl + '/ztb/productDetailsZBT/GetProductDetails',
      method:'post',
      data: {
        ProID: that.data.productId,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        console.log(res)
        //--init data        
        var data = res.data.data[0];
        console.log(data);
        that.initProductData(data);
        that.setData({
          itemData:data,
          supplierId: data.SupplierID,
        });
        //endInitData
      },
    });
  },
  initProductData: function(data){
    data["LunBoProductImageUrl"] = [];

    var imgs = data.LunBoProductImage.split(';');
    for(let url of imgs){
      url && data["LunBoProductImageUrl"].push(app.d.hostImg + url);
    }

    data.Price = data.Price/100;
    data.VedioImagePath = app.d.hostImg + '/' +data.VedioImagePath;
    data.videoPath = app.d.hostImg + '/' +data.videoPath;
  },
  remarkInput:function(e){
    this.setData({
      remark: e.detail.value,
    })
  },
  tu:function(){
    this.setData({
      ture:true
    })
  },
  createProductOrderByWX:function(e){
    this.setData({
      paytype: 1,
    });

    this.createProductOrder();
  },
  createProductOrderByWX:function(e){
    this.setData({
      paytype: 1,
    });

    this.createProductOrder();
  },
  createProductOrderByXX:function(e){
    this.setData({
      paytype: 0,
    });

    this.createProductOrder();
  },
  createProductOrder:function(){
    this.setData({
      btnDisabled:true,
    })
    //创建订单
    var that = this;
    console.log(this.data);
    wx.request({
      url: app.d.hostUrl + '/ztb/orderZBT/AddOrderZBT',
      method:'post',
      data: {
        userId:app.d.userId,
        supplierId:that.data.supplierId,
        proId:that.data.productId,//proId
        buyCount:that.data.buyCount,
        paytype:that.data.paytype,//0线下1微信
        remark:that.data.remark,
        cartId:that.data.cartId,
        id:that.data.addrId,//收货地址//测试--
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        //--init data        
        var data = res.data;
        console.log(data);
        
        if(data.result == 'ok'){
          //创建订单成功
          if(that.data.paytype == 0){
            //线下支付
            
          }
          if(that.data.paytype == 1){
            //微信支付
            
          }
          //跳转到订单详情//不能跳转此处，因为没有orderID，只能跳转到待支付
          // wx.navigateTo({
          //   url: '/pages/order/detail?orderId='+data.OrderID,
          // });
          wx.navigateTo({
            url: '/pages/user/dingdan?currentTab=0',
          });
        }//endok
        //endInitData
      },
    });

  },


});

模板简介：该模板名称为【微信小程序企业版绿色订单确认选择支付设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。