recycapp/pages/exchange/createorder.vue

<template>
	<view>
	<form class="content" @submit="toPay" >
		<view class="content-top">
				<view>
						<view class="hs-box" v-if="useraddress && useraddress.id" @click="goAddress">
							<view class="hs-row " style="    justify-content: left;">   
								<view class="dizhi">
									<view class="person flex">
										<view>收货人：{{ useraddress.name || '' }}</view>
										<view >{{ useraddress.mobile || '' }}</view>
									</view>
									<view class="address">
										{{ useraddress.address || '' }}
									</view>
								</view> 
							</view>
						</view>
						<view class="" v-else>
							 
							<view @click="goAddress()"  class="addressrow">
								<view style="color:#fe4038" >添加收货地址</view>
								<uni-icons type="right" size="22" style="display: block;float: right;margin-top: -1px;"></uni-icons> 
							</view>
						</view> 
					
					<view class="top-line"></view>
				</view> 
			  
				<view class="tupian_box mr10">
					<view class="goods-li flex" >
						<image :src="info.thumb" mode="aspectFill" style="width:80px;height:80px"></image>
						<view class="fr">
							<view class="flex fr-t">
								<view class="info size28 overflow" style="height: 20px;">
									{{info.name || ''}}
								</view> 
							</view> 
							<view class="price size28 c9 flex">
								<view class="red-price overflow"  >
									{{info.point|| ''}}积分+{{info.price|| ''}}元
								</view>
								<view>× {{ number || '' }}</view> 
								 
							</view>
						</view>
					</view>  
				</view> 
				<view class="hs-box"> 
					<view class="hs-row"  >
						<view >
							所需积分
						</view>
						<view class="red-price">
							{{order_point|| ''}}积分
						</view>
					</view> 
				</view>
				<view class="hs-box mr10">
					<view class="hs-row"> 
						备注
					</view>
					<view class="hs-textarea "> 
						<textarea v-model="remark" placeholder="选填" maxlength="20" /> 
					</view>
				</view>
			</view>	  
			
		<view class="tj ">
			<view class="w96 auto flex">
				<view class="lr">
					<view class="zj" >
						合计：
						<text class=" price">{{order_point || '0' }}积分+{{order_amount|| '0'}}元</text>
					</view>
				</view>
				<button class=" submitorder"  form-type="submit" :disabled="submitStatus" :loading="submitStatus">立即下单</button>
		
			</view>
		</view>
		
		 
	</form>
	</view>
</template>

<script> 
	export default { 
		data() {
			return { 
				submitStatus: false, 
				info:{}, 
				goods_id:'', 
				order_point:0,
				order_amount:0,
				number:1, 
				list:[], 
				totalmoney:0, 
				useraddress:'',
				address_id:0
			}
		},
		onShow() { 
			let user_address = uni.getStorageSync('user_address');  
			if (user_address) {
				this.useraddress = user_address;
				this.address_id = user_address.id; 
				uni.removeStorageSync('user_address');  
			} 
		},
		onLoad(options) { 
			this.goods_id = options.goods_id
			this.number = options.number 
			this.getdata()
			this.userDefaultaddress(); 
		},
		methods: {    
			toPay(){ 
					if (this.submitStatus) {
						return false;
					}
					this.submitStatus = true;
				let data = {
					act:"add", 
					goods_id:this.goods_id,
					number:this.number, 
					remark:this.remark,
					address_id:this.address_id 
				}
				var _this =this;
				this.$api.createorderExchange(data,res=>{ 
					if(res.code == '1'){   
						if (res.data.pay_status == 2) {
							uni.showToast({ title: res.msg , icon: 'success' })
							setTimeout(function() {
								uni.redirectTo({url:'/pages/exchange/orderlist'}); 
							},2000);  
						} else {
							if(res.data.pay_status ==1){ 
								let data = {
									payment_code: 'wechatpay',
									payment_type: 1,  
								} 
								data['order_id'] = res.data.order_id ;
								this.$api.exchangePay(data, res => {
									if (res.code ==1 ) {
										uni.requestPayment({
											provider: 'wxpay',
											timeStamp: res.data.timeStamp,
											nonceStr: res.data.nonceStr,
											package: res.data.package,
											signType: res.data.signType,
											paySign: res.data.paySign,
											success: function(e) { 
												if (e.errMsg === 'requestPayment:ok') {
													uni.showToast({ title: "支付成功" , icon: 'success' })
													setTimeout(function() {
														uni.redirectTo({url:'/pages/exchange/orderlist'}); 
													},2000);  
												}
											},
											fail() {
													uni.redirectTo({url:'/pages/exchange/orderlist'}); 
											}
										});
									} else { 
										uni.showToast({ title: res.msg , icon: 'none' }) 
									}
								})
							}
						}
					}else{ 
						uni.showToast({ title: res.msg , icon: 'none' }) 
						this.submitStatus = false; 
					}
				},res => {
						this.submitStatus = false;
					}
				)	
			}, 
			getdata(){
				let data = {
					goods_id:this.goods_id, 
					number:this.number
				}
				this.$api.createorderExchange(data,res=>{ 
					if(res.code == '1'){
						this.info = res.data.goods
						this.order_point = res.data.order_point
						this.order_amount = res.data.order_amount
					}else{
						uni.showToast({ title: res.msg , icon: 'none' }) 
					}
				})
			}, 
			goAddress() {
				var token = uni.getStorageSync('userToken');  
				if (!token) {
						uni.navigateTo({
							url: '/pages/login/login'
						});  
					}else{
						uni.navigateTo({
							url: '/pages/address/list?type=order'
						});
					} 
			}, 
			userDefaultaddress() {
				this.$api.userDefaultAddress({}, res => {
					if (res.code ==1) {
						if(res.data){
							this.useraddress = res.data;
							this.address_id = this.useraddress.id;
						}
						
					}
				});
			}, 
		}
	}
</script>

<style>
	
	
	.dizhi{    margin-left: 10px;
    min-height: 15px;
    overflow: hidden;
    align-items: center;
    padding-right: 25px;}
	.person{justify-content: space-between;margin-bottom:5px}
	.address{font-size: 12px;}
.addressrow{background-color:#fff;justify-content: space-between;display:flex;padding:40rpx 26rpx 40rpx 20rpx}
.shop-row{    margin-left: 10px;
    min-height: 15px;
    overflow: hidden;
    align-items: center;
    padding-right: 25px;}
.goods-li{
	background-color: #fff;
	    padding: 10px 12px;
	box-sizing: border-box; }
.goods-li	image{
		width: 70px ! important;
		height: 70px;
	}
.goods-li	.fr{ 	flex: 0 0 calc(100% - 110px);
		margin-left:10px;
				justify-content: space-between;}
		.fr-t{justify-content: space-between;}
		.info{
			line-height: 40rpx;
			height: 80rpx;
			margin-bottom: 16rpx;
		}
	.goods-li	.price{display: flex;
				justify-content: space-between;}
	.goods-li		.rowbox {
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative; }
				.buy_g_num {
					position: absolute;
					background-color: #ffffff;
					border: 1px solid #fe5047;
					color: #fe5047;
					font-size: 24rpx;
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					border-radius: 50%;
					right: -12rpx;
					top: -18rpx;
				}
	 
	.tj{position: fixed;width: 100%;left: 0;background: #fff;height: 90rpx;bottom: 0;}
	.tj .lr{width:100%}
	.tj .w96{height:120rpx ;justify-content: space-between;}
	.tj .zj{    
	    padding-right: 20px;
	    line-height: 45px; 
	    text-align: right;}
	.tj .fsz28 {color: #e31712;}
	.tj .price {color: #e31712;font-size:16px}
	.submitorder{width:300rpx;height: 90rpx;font-size:14px;color:#fff;border-radius: 0px;background: #fe4038;text-align: center;line-height: 90rpx;color: #fff;}
.hs-textarea {
	padding: 0 26upx 20upx;
} 
 
/* #ifndef MP-WEIXIN */
.hs-textarea textarea {
	width: 100%;
	height: 100upx;
	font-size: 26upx;
	color: #333;
}	
	/* #endif */
	
 
	.top-line{    width: 100%;
	    height: 6rpx;
	    background-color: #fff;
	    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWMAAAADCAYAAABGQW4PAAAAAXNSR0IArs4c6QAAASRJREFUWEftVEFOAkEQrN5lhYS46h8MeoEzNy58wJBNkH9I4j5gN4F/EBKiL/AiR4+cwE+IJCasuDSZmxoz05G9bNJzm6Sma6qruimL6k3iyhyEcxx9eHUy21xLysSTrAV4z4XwMlbJIBDxmr9lvXqLqFIMN1SzzW/1WTINFoxm29nAMs4zA4/pbdD7Lo62UXjpgV4AXDhVOwAEjIPZ+1BSJ57mI/D+ToJ1YsgbJ31fxGtq7aKzEQOFcKtmuzvqszO9doBm29nAEs7zG1PeTvu11x/L2Fy2N6cN3/dSJnQBhE71fwEYa+avTvXhYyF5H092SxCuJFgrhrEG9p1kUBXxmlqfUbgEqBBu1exYxurz/yOu2Rb1rkTzvGHgCZTf/17ERugB65wHE+XzDfAAAAAASUVORK5CYII=);
	    background-repeat: repeat-x;
	    display: block;}
</style>