欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序订单确认支付信息页面样式设计制作开发教程

    2018-07-02 09:34 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序订单确认支付信息页面样式设计制作开发教程,制作好以后效果图如下:
    一、wxml页面代码如下:
    <!--pay.wxml-->
    <view class="w100">
    		<view class="p_all bg_white df item" wx:for="{{productData}}">
    			<view class="cp_photo">			
    				<image src="{{item.photo_x}}"></image>
    			</view>
    			<view class="df_1">	
    				<view class="font_14 mt5 ovh1">
    		           {{item.name}}
    		        </view>
    			<text class="gm_ovh_1h red pt10">¥{{item.price}}</text>
    			<text class="gm_ovh_1h pt10">数量:{{item.num}}</text>
    			</view>
    		</view>		
    		
    		<view class="p_all bg_white mt10 font_14" wx:if="{{addemt==0}}">
    		   <navigator url="../address/user-address/user-address?cartId={{cartId}}" hover-class="none">
    			<view class="df">
    				<view class="df_1 c6">
    				<view class="l_h20">收货人:{{address.name}}<text class="fl_r mr10">{{address.tel}}</text></view>
    				<view class="l_h20 mt5">地址:{{address.address_xq}}</view>
    				</view>
    				<image class="x_right mt15" src="/images/x_right.png"></image>			
    			</view>
    			</navigator>
    		</view>
    		<view class="p_all bg_white mt10 font_14" wx:else>
    		   <navigator url="../address/user-address/user-address?cartId={{cartId}}" hover-class="none">
    			<view class="df">
    				添加收货地址		
    			</view>
    			</navigator>
    		</view>
    			
    <view class="xuan" wx:if="{{vou!=''}}" >
    	<view class="hui">可使用优惠券:</view>
    <!--设置监听器,当点击radio时调用-->
    <radio-group bindchange="listenerRadioGroup" class="hui">
    <!--label通常与radio和checkbox结合使用-->
      <label style="display: flex" wx:for="{{vou}}" class="xuan" bindtap="getvou" data-id="{{item.vid}}" data-price="{{item.amount}}">
      <radio value="{{item.vid}}" />满{{item.full_money}}立减{{item.amount}}元
     </label>
     <label style="display: flex" class="xuan" bindtap="getvou" data-id="0" data-price="0">
      <radio value="0"/>不使用优惠券
     </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">¥ {{total}}</span></view>
    	<view class="p_all mt10">
    		<view class="btnGreen">
    			<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>
    </view>

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议