lipin/pages/users/purchase/index.vue

<template>
	<view>
		<view class="top">
			<image src="../../../static/images/bg.png" mode="widthFix"></image>
			<view class="title">无忧快捷发货</view>
		</view>
		<view class="platform">
			<view class="step step1">1.选择数据来源平台</view>
			<radio-group @change="changePlatform">
				<view class="list">
					<view :class="item.id == platformId ? 'item active' : 'item'" v-for="(item,index) in platform" :key="index">
						<text :class="'iconfont icon-'+item.code"></text>
						{{item.name}}
						<radio :value="item.id.toString()" />
					</view>				
				</view>
			</radio-group>
		</view>
		<view class="address">
			<view class="step">2.填写收货地址</view>
			<view class="form">
				<view class="input">
					订单号<input type='text' placeholder='请输入订单号(可不填)' placeholder-class='placeholder' v-model="delivery.out_order_id"></input>
				</view>
				<view class="input">
					收货人<input type='text' placeholder='请输入收货人姓名' placeholder-class='placeholder' v-model="delivery.name"></input>
				</view>
				<view class="input">
					手机号<input type='number' placeholder='请输入手机号码' placeholder-class='placeholder' v-model="delivery.mobile"></input>
				</view>
				<textarea placeholder-style="color:#ccc;font-size:28rpx;" placeholder="示例: 浙江省 台州市 椒江区 市府大道12号" v-model="delivery.address" @blur="getExtraFreight"/>
			</view>
		</view>
		<view class="gift">
			<view class="step">3.选择赠送礼品</view>
			<view class="warehouse">
				<view v-for="(item,index) in warehouse" :key="index" :class='item.id == warehouseId ? "on" : ""' @click='changeWarehouse(index)'>
					{{item.name}}
				</view>
			</view>
			<radio-group @change="changeProduct" v-if="productList.length > 0">
				<view class="product" v-for="(item , index) in productList" :key="index">
					<radio :value="index.toString()" :checked="index == current"/>
					<image :src="item.img"></image>
					<view class="info">									
						<view>{{item.title}}</view>
						<view class="price">￥{{item.price}}</view>
						<view class="text">
							<view>{{item.wget}}kg/件</view>
							<view>库存{{item.count}}</view>
						</view>
					</view>
				</view>
			</radio-group>
			<view class="noProduct" v-else>暂无产品</view>
		</view>
		<view class="bottom">
			<view>
				<view>礼品金额：<text>￥{{price}}</text>，运费：<text>￥{{freight}}</text></view>
				<view v-if="extraFreight">偏远地区加钱：<text>￥{{extraFreight}}</text></view>
				<view class="total">总价：<text>￥{{total}}</text></view>
			</view>
			<button @click="submit">提交订单</button>
		</view>
		
		<wyb-popup ref="payOrder" type="bottom" height="500" width="400" radius="8">
			<view class="popup">
				<view class="title">
					支付订单<text class="iconfont icon-guanbi" @click='close'></text>
				</view>
				<view>支付单号：{{payData.order_id}}</view>
				<view>商品名称：{{payData.title}}</view>
				<view>发货数量：{{payData.count}}</view>
				<view>支付金额：￥{{payData.all_price}}</view>
				<view>支付方式：
					<view class="payway">
						<text class="iconfont icon-yuezhifu"></text>余额支付
						<image src="../../../static/images/icon.png" mode="widthFix"></image>
					</view>
					<view class="balance">账户余额：￥{{payData.user_money}}<text @click="go">充值</text></view>
				</view>
				<button @click="pay(payData.order_id)">立即支付</button>
			</view>
		</wyb-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	import {		
		platformList,
		ApiWarehouse,
		productList,
		submitOrder,
		payOrder,
		balancePay
	} from '@/api/api.js';
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			wybPopup
		},
		data() {
			return {
				platform: [],
				platformId: '',
				warehouse: [],
				warehouseData: [],
				warehouseId: '',
				warehouseIndex: '',
				expId: '',
				productList: [],
				productId: '',
				current: -1,
				delivery: {
					out_order_id: '',
					name: '',
					mobile: '',
					address: '',
					shop_name: ''
				},
				price: 0,
				freight: 0,
				extraFreight: 0,
				total: 0,
				payData: {}
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad() {			
		    if (this.isLogin) {
		    	this.getPlatform();
				this.getWarehouse();
				this.getProductList();
		    }else{
				toLogin();
			}
		},
		methods: {
			getPlatform: function() {
				let that = this;
				platformList().then(res => {
					that.platform = res.data.list;
				});
			},
			getWarehouse: function() {
				let that = this;
				ApiWarehouse().then(res => {
					that.warehouse = res.data;
					that.warehouseData = res.data;
				});
			},
			getProductList: function() {
				let that = this;
				productList({
					warehouse: that.warehouseId,
					countType: 1,
					pageSize: 5
				}).then(res => {
					that.productList = res.data.list;
				});
			},
			changePlatform:function(evt) {
				let that = this;
				that.platformId = evt.target.value;
				that.tabWarehouse(that.platformId);
				that.warehouseId = that.warehouse[0].id;
				that.warehouseIndex = 0;
				if(that.warehouse[0].expCode.length > 0){
					that.expId = that.warehouse[0].expCode[0].id;
					that.freight = parseFloat(that.warehouse[0].expCode[0].money);
					that.total = that.price + that.freight;
				}	
				that.getProductList();
				that.getExtraFreight();
			},
			//选择平台后切换仓库
			tabWarehouse:function(id){
			    var data = [];
			    //判断仓库
			    for (var i in this.warehouseData) {
			        var idsAr = this.warehouseData[i].platform_ids.split(',');
			        if(idsAr.indexOf(id) >= 0) {
			            data.push(this.warehouseData[i]);
			        }
			    }
			    this.warehouse = data;
			},
			changeWarehouse:function(index) {
				let that = this;
				if (!that.platformId) return that.$util.Tips({
					title: '请先选择数据来源平台'
				});
				that.warehouseId = that.warehouse[index].id;
				that.warehouseIndex = index;
				if(that.warehouse[index].expCode.length > 0){
					that.expId = that.warehouse[index].expCode[0].id;
					that.freight = parseFloat(that.warehouse[index].expCode[0].money);
				}else{
					that.freight = 0;
				}
				that.current = -1;
				that.productId = '';
				that.price = 0;
				that.getProductList();
				that.getExtraFreight();
			},
			changeProduct:function(evt) {
				let that = this;
				if (!that.platformId) return that.$util.Tips({
					title: '请先选择数据来源平台'
				});
				let index = evt.target.value;
				that.current = index;
				that.productId = that.productList[index].id;
				that.price = parseFloat(that.productList[index].price);
				that.total = (parseFloat(that.price) + parseFloat(that.freight) + parseFloat(that.extraFreight)).toFixed(2);
			},
			//偏远地区加钱
			getExtraFreight:function () {
				let that = this;
				if(that.delivery.address.indexOf("北京") != -1){
					that.extraFreight = parseFloat(that.warehouse[that.warehouseIndex].beijing);
				}
				if(that.delivery.address.indexOf("上海") != -1){
					that.extraFreight = parseFloat(that.warehouse[that.warehouseIndex].shanghai);
				}
				if(that.delivery.address.indexOf("青海") != -1){
					that.extraFreight = parseFloat(that.warehouse[that.warehouseIndex].qinghai);
				}
				that.total = (parseFloat(that.price) + parseFloat(that.freight) + parseFloat(that.extraFreight)).toFixed(2);
			},
			submit: function() {
				let that = this;
				if (!that.platformId) return that.$util.Tips({
					title: '请选择数据来源平台'
				});
				if (!that.delivery.name) return that.$util.Tips({
					title: '请输入收货人姓名'
				});
				if (!that.delivery.mobile) return that.$util.Tips({
					title: '请输入手机号码'
				});
				if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.delivery.mobile))) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (!that.delivery.address) return that.$util.Tips({
					title: '请输入收货地址'
				});
				if(that.delivery.address.indexOf("新疆") != -1 || that.delivery.address.indexOf("西藏") != -1) return that.$util.Tips({
					title: '新疆西藏地区不发货'
				});
				if (!that.productId) return that.$util.Tips({
					title: '请选择赠送礼品'
				});
				let orderAr = [];
				orderAr.push(that.delivery);
				submitOrder({
					platformId: that.platformId,
					warehouseId: that.warehouseId,
					proId: that.productId,					
					expId: that.expId,
					orderAr: orderAr,
					mono: '',
					extraFreight: that.extraFreight
				}).then(res => {
					payOrder({'order_id':res.data.order_id}).then(res => {
						that.payData = res.data;
						that.$refs.payOrder.show();
					});					
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				});
			},
			close() {
				this.$refs.payOrder.hide();
			},
			pay: function(order_id) {
				let that = this;
				balancePay({'order_id':order_id}).then(res => {
					that.$util.Tips({
						title:res.data.msg
					},{
						tab: 2,
						url: '/pages/users/order/index?status=1'
					})
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				});
			},
			go() {
				uni.navigateTo({
					url: `/pages/users/recharge/index`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.top{
		background: #ff5c00;
		position: relative;
		image{
			width:100%;
		}
		.title{
			position: absolute;
			top:50rpx;
			left:30rpx;
			font-size: 46rpx;
			color:#fff;
		}
	}
	.step{
		font-weight: 600;
		color:#262626;
		margin-bottom: 20rpx;
	}
	.platform{
		background: #fff;
		width:700rpx;
		margin: -200rpx 25rpx 0 25rpx;
		padding: 30rpx 10rpx;
		border-radius: 20rpx;
		position: relative;
		z-index: 100;
		.step1{
			padding-left: 10rpx;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			.item{
				width:320rpx;
				margin: 10rpx;
				border: 1px solid #ddd;
				border-radius: 4rpx;
				display: flex;
				align-items: center;
				padding: 0 15rpx;
				line-height: 92rpx;
				.iconfont{
					font-size: 45rpx;
					margin-right: 15rpx;
				}
				.icon-taobao{color:#FF780A;font-size: 50rpx;}
				.icon-t1688{color:#FF5400;font-size: 65rpx;margin-right: 0;}
				.icon-jd{color:#E0251B;}
				.icon-pdd{color:#E12E24;}
				.icon-othen{color:#488EFF;}
				radio{
					flex-grow:1;
					text-align: right;
				}				
			}
			.active{
				border: 1px solid #ff5c00;
			}
		}
	}
	.address{
		background: #fff;
		width:700rpx;
		margin:20rpx 25rpx 0 25rpx;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
		.form{
			.input{
				display: flex;
				padding: 20rpx 0;
				border-bottom: 1px solid #eee;				
				input{
					margin-left: 40rpx;
					font-size: 28rpx;
					.placeholder{
						color:#ccc;
						font-size: 28rpx;
					}
				}
			}
			textarea{
				height:120rpx;
				padding-top: 20rpx;
				font-size: 28rpx;
			}
		}
	}
	.gift{
		background: #fff;
		width:700rpx;
		margin:20rpx 25rpx 140rpx 25rpx;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
		.warehouse{
			display: flex;
			flex-wrap: wrap;
			margin: 30rpx 0 10rpx 0;
			view{
				padding: 10rpx 7rpx;
				margin-bottom: 10rpx;
				border: 1rpx solid #eee;
			}
			view:nth-child(odd){
				margin-right: 10rpx;
			}
			.on{
				border: 1rpx solid #ff5c00;
				color: #ff5c00;
			}
		}
		.product{
			display: flex;
			margin-top: 20rpx;
			radio{
				line-height: 160rpx;
				margin-right: 10rpx;
			}
			image{
				width:160rpx;
				height:160rpx;
			}
			.info{
				padding-left: 20rpx;
				flex-grow: 1;
				.price{
					color: #f5222d;
					font-size: 32rpx;
					font-weight: bold;
					margin-top: 40rpx;
				}
				.text{
					display: flex;
					justify-content:space-between;
					font-size: 24rpx;
					color:#666;
				}
			}
		}
		.noProduct{
			text-align: center;
			height:120rpx;
			line-height: 120rpx;
		}
	}
	.bottom{
		background: #fff;
		position: absolute;
		bottom: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width:100%;
		height:120rpx;
		padding: 0 32rpx;
		text{
			color:#ea312b;
		}
		.total{
			display: flex;
			align-items: center;
			text{
				font-size: 36rpx;
				font-weight: 600;
			}
		}
		button{
			width:220rpx;
			height:80rpx;
			line-height: 80rpx;
			background: #ff5c00;
			color:#fff;
			font-size: 32rpx;
			border-radius: 50rpx;
		}
	}
	.popup{
		padding: 30rpx;
		view{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: 10rpx;
		}
		.title{
			justify-content: space-between;			
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}
		.payway{
			display: flex;
			position: relative;
			border: 1rpx solid #ff5c00;
			border-radius: 8rpx;
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 10rpx;
			.iconfont{
				color:#ff5c00;
				margin-right: 5rpx;
			}
			image{
				width:40rpx;
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}
		.balance{
			margin-left: 140rpx;
			color:#aaa;
			text{
				border: 1rpx solid #ff5c00;
				color:#ff5c00;
				margin-left: 30rpx;
				padding: 3rpx 20rpx;
				border-radius: 30rpx;
			}
		}
		button{
			background: #ff5c00;
			color:#fff;
			border-radius: 40rpx;
			font-size: 32rpx;
			line-height: 80rpx;
			margin-top: 30rpx;
		}
	}
</style>