CBB3/pages/user/buy/balance.vue

<style>
	.m-app{width:100vw}
	/* 头部 */
	.app-header{width:100%;background: #ffffff;}
	.mp-padding{width:100%;height:50px;}
	button.back-btn{width:22px;height:32px;}
	button.back-btn image{width:22px;height:22px;}
	.mp-title{color:#333333;font-size: 16px;font-weight: 700;text-align: center;width:100%;height:50px;line-height: 50px;position: relative;}
	.mp-title button.back-btn{position: absolute;left:12px;top:9px}
	
	/* 滚动内容区域 */
	scroll-view.mid-body{margin-top:8px;width:100%;height:calc(100vh  - 8px - 60px);}
	/* 用户地址 */
	.order-user{background: #ffffff;padding:15px;width:calc(100% - 30px);position: relative;}
	.pay-add{padding:20px 15px;background-color:#fff;display:flex;align-items:center;border-top:1px #f5f5f5 solid}
	.pa-left{width:34px;height:34px;margin-right:10px}
	.pa-left image{width:100%;height:100%;display:block}
	.pa-right{width:22px;height:22px;margin-left:auto}
	.pa-right image{width:100%;height:100%;display:block}
	.pa-middle{width:75%}
	.pam-top{display:flex;align-items:center}
	.pamt-left{color:#484747;font-size:14px}
	.pamt-right{color:#7E7E7E;font-size:13px;margin-left:10px}
	.pam-bot{color:#484747;font-size:12px;margin-top:5px;line-height:20px}
	.pay-goods{background:#fff;display:flex;align-items:center}
	.pg-left{width:90px;height:90px;margin-right:15px}
	.pg-left image{width:100%;height:100%;display:block;border-radius:10px}
	.pg-right{width:68%}
	.pgr-top{width:100%;color:#484747;font-size:14px;font-weight:500;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
	.pgr-middle{margin-top:5px}
	.pgrm-vip{width:auto;height:20px;background-color:#F1F1F1;text-align:center;line-height:20px;color:#019560;font-size:10px;border-radius:4px;display:inline-block;margin-right:5px;padding:0px 10px}
	.pgrm-gui{color:#7E7E7E;font-size:10px}
	.pgr-bot{display:flex;align-items:center;margin-top:5px}
	.pgrb-left{display:flex;align-items:baseline}
	.pgrbl-left{color:#fd3b39;font-size:18px;font-weight:500}
	.pgrbl-right{color:#7E7E7E;font-size:10px;text-decoration:line-through;margin-left:5px}
	.pgrb-right{margin-left:auto;color:#7E7E7E;font-size:10px}
	.pay-btn{position:fixed;height:60px;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:flex-end;background-color:#fff}
	.bp-right{width:140px;height:40px;text-align:center;line-height:40px;color:#fff;background:#fd3b39;border-radius:100px;font-size:16px;margin:0 15px 0 20px}
	.bp-left{color:#7E7E7E;font-size:16px}
	.bp-left text:last-child{color:#fd3b39;font-weight:500}
	.pay-type{margin-top:10px;background-color:#fff}
	.pt{padding:0 15px;height:50px;display:flex;align-items:center;margin:auto;color:#3F3E3E;border-bottom:1px #f5f5f5 solid}
	.pt-left{display:flex;align-items:center;font-size:14px}
	.pt-left image{width:28px;height:28px;margin-right:10px;border-radius:4px}
	.pt-right{margin-left:auto}
	.pt-right image{width:24px;height:24px}
	.sku-name{font-size: 12px;}
	/* 订单信息 */
	.order-msg{width:calc(100% - 15px);background: #ffffff;margin-top: 8px;padding-left: 15px;}
	.order-msg-item{border-bottom:1px solid #EEEEEE;width:calc(100% - 15px);padding-right: 15px;}
	.order-msg-item:last-child{border-bottom:0px}
	.order-msg-title{font-size: 14px;color:#333333;width:calc(100% - 80px);}
	.order-msg-v{width:80px;height:44px;}
	.order-msg-jifen{ height: 44px; color: #7C7BFE; font-size: 14px;}
	.order-msg-v text{width:100%;text-align: right;font-size: 14px;color:#333333;}
	.order-msg-v .check{width: 20px;height: 20px;}
	button.msg-btn{width:16px;height:44px;}
	button.msg-btn image{width:16px;height:16px;display: block;}
	
	
	.app-footer{position: absolute;bottom:0px;left:0px;padding:0px 15px;width:calc(100% - 30px);height:50px;background: #ffffff;}
	button.sub-btn{height:36px;line-height: 36px;text-align: center;width:100px;text-align: center; border-radius: 18px;font-size: 14px;font-weight: 700; color:#ffffff;background:#fd3b39;}
    button.sub-btn.not-btn{background: #7E7E7E;}
	
	.footer-info{width:calc(100% - 100px);text-align: left;}
	.footer-title{font-size: 14px;color:#333333;}
	.footer-price{font-size: 18px;color:#ffab2b;font-weight: 700;}
	.dk-total{margin-left: 10px;font-size: 12px;color: #fd3b39;}
	
</style>

<template>
	<view class="m-app">
		<form report-submit="true" @submit="formSubmit">
			<view class="app-header">
				<view class="top-bar" :style="'height:' + barHeight + 'px'"></view>
				<view class="mp-padding fx-r fx-bc">
					<view class="mp-title">
						<button class="nt back-btn fx-r fx-bc fx-ac" @click="tapBack">
							<image src="/static/img/arrow_next.png"></image>
						</button>
						<text>确认订单</text>
					</view>
				</view>
			</view>
			<scroll-view class="mid-body" scroll-y="true" @scrolltolower="loadMoreData">
				<view class="pay-add"  @tap="tapAddress" v-if="data.address != null">
					<view class="pa-left">
						<image src="/static/img/ck-addresss.png"></image>
					</view>
					<view class="pa-middle" >
						<view class="pam-top">
							<view class="pamt-left">
								<text>{{data.address.name}}</text>
							</view>
							<view class="pamt-right">
								<text>{{data.address.tel}}</text>
							</view>
						</view>
						<view class="pam-bot">
							<text>{{data.address.address}}</text>
						</view>
					</view>
					<view class="pa-right">
						<image src="/static/img/ic_next.png"></image>
					</view>
				</view>
				
				<view class="pay-add"  @tap="tapAddress" v-if="data.address == null">
					<view class="pa-left">
						<image src="/static/img/ck-addresss.png"></image>
					</view>
					<view class="pa-middle">
						<view class="pam-xuan">
							<text>请选择您的收货地址！</text>
						</view>
					</view>
					<view class="pa-right">
						<image src="/static/img/ic_next.png"></image>
					</view>  
				</view>
				
				<view style="padding: 15px;background: #fff;margin-top: 10px;" v-for="(item,index) in data.info">
					<view class="pay-goods">
						<view class="pg-left">
							<image :src="item.img" mode="aspectFill"></image>
						</view>
						<view class="pg-right">
							<view>
								<view class="pgr-top">
									<text>{{item.title}}</text>
								</view>
								<view class="sku-name" style="color: #7E7E7E;">
									<text>{{item.sku_text}}</text>
								</view>
							</view>
							<view class="pgr-bot">
								<view class="pgrb-left">
									<view class="pgrbl-left">¥{{item.promotion}}</view>
									<view class="pgrbl-right">¥{{item.old_price}}</view>
								</view>
								<view class="pgrb-right">x{{item.count}}</view>
							</view>
						</view>
					</view>
					
				</view>
				
			
				
				<view class="order-msg">
					<view class="order-msg-item fx-r fx-bc">
						<view class='order-msg-title'>邮费</view>
						<view class='order-msg-v fx-r fx-bc fx-ae'>
							<text>￥{{utils.returnFloat(data.postage)}}</text>
						</view>
					</view>
					
			
					<view class="order-msg-item fx-r fx-bc" v-if="data.balance_money > 0">
						<view class="order-msg-title">提货积分
						<text style="color: #fd3b39;font-weight: bold;">({{ data.balance_money }})</text>
						</view>
						
						
						<view  class="order-msg-v fx-r fx-bc fx-ae" @tap="tapBalanceItem">
							<image class="check" src="/static/img/rcheck-btn.png" v-if="isBalance" mode="widthFix"></image>
							<image class="check" src="/static/img/rcheck.png" v-else mode="widthFix"></image>
						</view>
					</view>
					   
					
					
					<view class="order-msg-item fx-r fx-bc">
						<view class='order-msg-title'>总订单金额</view>
						<view class='order-msg-v fx-r fx-bc fx-ae'>
							<text>￥{{utils.returnFloat(allPrice)}}</text>
						</view>
					</view>
				</view>
				<view style="height:50px"></view>
			</scroll-view>	
			
			
			
		
		<view class="app-footer fx-r fx-bc fx-ae">
			<view class="footer-info fx-r fx-bc">
				<text class="footer-title">合计：</text>
				<text class="footer-price">￥{{utils.returnFloat(allPrice)}}</text>
				<view class="dk-total" v-if="isBalance">
					提货积分<text>{{ data.allMoney > data.balance_money ?  data.balance_money : data.allMoney }}</text>
				</view>
				
			</view>
			<button class="nt sub-btn" :class=" !isBalance || data.balance_money <  data.allMoney ? 'not-btn' : '' " formType="submit">提交订单</button>
		</view>
	</form>	
	
		<ui-pay ref="uipay"></ui-pay>
	
	</view>
</template>
<style>
	.pop-bank{ position: fixed; width: 100%;height: 100vh;top: 0;left: 0;background: rgba(0,0,0,0.2);}
	.pop-bank .pop-body{width: 90%;background: #fff;border-radius: 8px;height: 60vh;}
	.pop-bank .pop-top{height: 40px;border-bottom: 1px solid #F1F1F1; position: relative;}
	.pop-bank .pop-top{ text-align: center; line-height: 40px;font-size: 18px;}
	.pop-bank .pop-left{position: absolute;font-size: 14px;color: #007AFF;left: 10px;top: 0px;}
	.pop-bank .pop-top .close image{width: 20px;height: 20px; position: absolute; right: 10px;top: 10px;}
	.pop-bank scroll-view{height: calc(60vh - 100px);}
	.pop-bank .pop-bank-list{ border-bottom: 1px solid #F1F1F1; padding: 20px;}
	.pop-bank .pop-bank-list:hover{background: #F1F1F1;}
	.pop-bank .pop-bank-list image{width: 20px;height: 20px;}
	.pop-bank .pop-bank-list text{ margin-left: 10px;}
	.pop-bank .pop-bank-add{ height: 60px;text-align: center;line-height: 60px;font-size: 18px;}
	.view-btn{height: 40px;border-top: 1px solid #F1F1F1;line-height: 40px;text-align: center;color: #007AFF;}
	
	
	
	
	.pop-xiyi{ position: fixed; width: 100%;height: 100vh;top: 0;left: 0;background: rgba(0,0,0,0.2);}
	.pop-body{width: 90%;background: #fff;border-radius: 8px;height: 80vh;}
	.pop-body .foot{height: 40px;border-top: 1px solid #F1F1F1;}
	.pop-body .pop-scrolly{height: calc(100% - 40px);}
	.pop-body .foot .hr{width: 1px;height: 40px;background: #F1F1F1;}
	.pop-body .foot .btn1{background: #f28d20;border-radius: 0px 0px 0 8px;color: #fff;}
	.pop-body .foot .btn2{background: #f1f1f1;color: #333;border-radius: 0px 0px 8px 0 ;}
	.pv-igv{height: 100%;color: #00c1c2;font-size: 12px;text-align: left;margin-top: 6px;}
</style>
<script>
	import {mapState,mapMutations } from 'vuex'
	var addressId = 0;
	import uParse from '@/components/gaoyia-parse/parse.vue';
	import uiPay from '@/components/ui-pay/index.vue';
	export default {
		components: {
			uParse,
			uiPay
		},
		computed: mapState(['user','sysData']),
		data() {
			return {
				subData:[],
				data:{info:[],allMoney:0,heMoney:0,postage:0,voucher:[]},
				allPrice : 0,
				payType:"unionpay",
				isBalance: true,
				box:false,
				barHeight:0
			}
		},
		/**
		 * 购物车
		 */
		onLoad(options) {
			var that = this;
			//获取提交参数
			if(!this.utils.isDefine(options.data)){
				this.tapBack();
				return;
			}
			
			
			if(this.sysData.bank == 1) {
				this.payType = 'unionpay';
			}
			
			if(this.sysData.wxpay == 1) {
				this.payType = 'wxpay';
			}
			
			if(this.sysData.ailpay == 1) {
				this.payType = 'ailpay';
			}
			
			this.barHeight = this.$device.statusBarHeight;
			try{
				this.subData = JSON.parse(options.data);
				
				uni.$on('selectAddress',function(data){
					addressId = data.addressId;
					that.initView();
				});
			}catch(e){
				uni.showModal({title: '系统提示',content:'数据异常',showCancel: false});
			}
				
			uni.$on('bankInit',()=>{
				this.tapPayBank();
			});
		},
		onShow(){
			this.initView();
		},
		/**
		 * 页面卸载
		 */
		onUnload:function(){
			uni.$off('selectAddress',()=>{});
			uni.$off('bankInit',()=>{});
			if(this.$refs['uipay'] != null) this.$refs.uipay.hide();
		},
		methods: {
			...mapMutations(['checkUserLogin','payPayment']),
			/**
			 * 数据
			 */
			initView:function(){
				this.getData();
			},
			/**
			 * 获取当前数据
			 */
			getData:function(){
				var that = this,postData = {};
				postData.subData = JSON.stringify(this.subData);
				postData.token = this.user.token;
				postData.addressId = addressId;
				this.utils.loadIng("获取数据中..");
				this
					.request
					.post("getBalance",postData)
					.then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							if(res.data.address == '') {
								res.data.address = null;
							} else {
								addressId = res.data.address.id;
							}
							for(var i in res.data.info) {
								res.data.info[i].o_select = false;
							}
							that.data = res.data;
							that.AllCount();
						} else{
							uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
						}
					})
					.catch(err=>{
						console.log(err);
						uni.hideLoading();
						that.utils.showModal("加载失败，重新点击尝试！",function(){
							that.initView();
						});
					});
			},
			/**
			 * 选择地址
			 */
			tapAddress:function(){
				uni.navigateTo({url: "/pages/user/address/address?type=select"});
			},
			/**
			 * 是否足够金额支付
			 */
			tapBalanceItem:function(){
				this.isBalance = !this.isBalance;
				this.AllCount();
			},
			
			/**
			 * 全部金额
			 */
			AllCount:function(){
				var price = 0;
				//人民币支付
				for(var i in this.data.info) {
					var d = this.data.info[i];
					var vmoney = parseInt(this.data.info[i].count) * parseFloat(this.data.info[i].promotion);
					price += vmoney;
				}
				price += parseFloat(this.data.postage);
				this.allPrice = price;
				this.data.allMoney = price;	
				if(this.isBalance) {
					if(price > this.data.balance_money) {
						this.allPrice = price - parseFloat(this.data.balance_money);
					} else {
						this.allPrice = 0 ;
					}
				}
			},
			closeBox:function(){
					this.box = false;
			},
			/**
			 * 支付确认
			 */
			tapCheckPay: function() {
				this.submitPost(0);
			},
			formSubmit: function(e) {
				this.submitPost(0);
			},
			/**
			 * 提交数据
			 */
			submitPost:function(type){
				
				if(addressId ==''){
					return this.utils.Tip("请选择地址");
				}
				
				if(!this.isBalance) {
					return this.utils.Tip("请选择提货积分抵扣");
				}
				
				if(this.data.balance_money <  this.data.allMoney) {
					return this.utils.Tip("积分不足，无法抵扣！");
				}
			
				var that = this,postData = {};
				postData.subData = JSON.stringify(this.subData);
				postData.addressId = addressId;
				postData.isBalance = this.isBalance ? 1 : 0;
				postData.deviceType = this.$deviceType;
				postData.payType = this.payType;
				this.utils.loadIng("获取数据中..");
				this
					.request
					.post("addOrder",postData)
					.then(res=>{
						if(res.code == 200) {
							if(res.data.status == 1) {
								uni.hideLoading();
								uni.redirectTo({
									url: '/pages/user/buy/order_ok?orderId=' + res.data.order_id + "&but_type=" + this.payType
								});
							} else {
								this.payPayment({
									page	  : this,
									payType   : this.payType,
									orderId   : res.data.order_id,
									buyType	  : res.data.buy_type,
									bankId	  : this.bankId,
									isClose   : 1,//是否关闭本页
									afterFn	  : ()=>{
										uni.hideLoading();
									}
								});
							}
						} else {
							uni.hideLoading();
							uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
						}
					})
					.catch(err=>{
						uni.hideLoading();
						this.utils.showModal("加载失败，重新点击尝试！",function(){
							that.initView();
						});
					});
			},
			
			//下拉触底
			loadMoreData: function(e) {
				console.log(e)

			},
			/**
			 * 选择select
			 * @param {Object} type
			 */
			payTypeSelect:function(type){
				this.payType = type
			},
			tapBack: function() {
				uni.navigateBack();
			}
		}
	}
</script>