kailin_mp/pages/car/order.vue

<template>
	<view>
		<view class="custom_addr" @click="showAddrPopup()">
			<view class="contact_user">
				<text class="contact_none" v-if="!checkedAddr.id">请选择收货地址</text>
				<text class="contact_name" >{{checkedAddr.contact_name}}</text>
				<text class="contact_phone" >{{checkedAddr.contact_phone}}</text>
				<text class="contact_more"> &gt;</text>
				<text class="contact_shop" >{{checkedAddr.contact_shop}}</text>
			</view>
			<view class="contact_addr">
				{{checkedAddr.contact_province}} {{checkedAddr.contact_city}} {{checkedAddr.contact_area}} {{checkedAddr.contact_addr}}
			</view>
		</view>
		<view class="car_list">
			<view class="car_item" v-for="(item,index) in cartList" :key="index">
				<view class="box_left">
					<image class="car_image" :src="item.thumb" mode=""></image>
				</view>
				<view class="box_center">
					<view class="car_name">{{item.name}}</view>
					<view class="car_spec">{{item.spec}}</view>
					<view class="car_price">
						<text class="price">￥{{item.price}}</text>
					</view>
				</view>
				<view class="box_right">
					<view class="buy_num_box">
						<view class="buy_num">共{{item.buy_num}}件</view>
					</view>
				</view>
			</view>
		</view>
		<view class="to_select_coupon" v-if="couponList.length" @click="popupCoupon()">
			<text>优惠券</text>
			<view class="coupon_deduction">{{couponUsed}}</view>
		</view>
		<view class="bottom_box">
			<view class="price_box">
				合计：<text class="price_total">￥{{priceTotal}}</text>
			</view>
			<button class="to_order" @click="createOrder()" data-eventsync="true">提交预约</button>
		</view>
		<uni-popup ref="popup" type="bottom" class="popup" background-color="#FFFFFF" @touchmove.stop.prevent="()=>{}">
			<view class="coupon_list">
				<view class="coupon_item" v-for="(item,index) in couponList" :key="index" @click="checkedCoupon(index)">
					<view class="box_left">
						<view class="rebate" v-if="item.rebate_type == 1" > ￥{{item.rebate}}</view>
						<view class="rebate" v-if="item.rebate_type == 2" > 打 {{item.rebate}} 折</view>
						<view class="rebate" v-if="item.rebate_type == 3" > 
							赠 
							<text v-if="item.rebate_scope.length"> {{item.rebate_scope[0].product_name}} </text> 
						</view>
						<view class="std_pay"> 满{{item.std_pay}}</view>
					</view>
					<view class="box_right">
						<view class="coupon_title">
							<view class="coupon_name" v-if="item.rebate_type == 1">满减券</view>
							<view class="coupon_name" v-if="item.rebate_type == 2">折扣券</view>
							<view class="coupon_name" v-if="item.rebate_type == 3">赠品券</view> 
						</view>
						<view class="product_scope">
							<text class="" v-if="item.type_id == 1">限定商品可用</text>
							<text class="" v-if="item.type_id == 2">全场可用</text>
							<view class="check_label" >
								<view class="isstd" v-if="!item.is_std">不可用</view> 
								<image class="checkbox" v-if="item.is_std" :src="item.checked?'../../static/icon/checked.png':'../../static/icon/checkbox.png'"></image>
							</view>
						</view>
						<view class="coupon_info">
							<view class="coupon_exp">{{item.exp_time}} 到期</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="addrPopup" type="bottom" class="popup" background-color="#FFFFFF" >
			<view class="popup_title">收货地址 <navigator url="/pages/addr/index?notify=addr" class="to_addr_page">管理</navigator> </view>
			<view class="addr_list">
				<view class="addr_item" v-for="(item,index) in addrList" :key="index" @click="checkedAddrItem(item)">
					<view class="radio_label">
						<image class="radio_icon" :src="item.id == checkedAddr.id? '../../static/icon/radioed.png' : '../../static/icon/radio.png'" ></image> 
					</view>
					<view class="contact_user">
						<text class="contact_name">{{item.contact_name}}</text>
						<text class="contact_phone">{{item.contact_phone}}</text>
						<text class="contact_default" v-if="item.is_default">默认</text>
					</view>
					<view class="contact_addr">
						{{item.contact_province}} {{item.contact_city}} {{item.contact_area}} {{item.contact_addr}}
					</view>
				</view>
			</view>
			<view class="create_box">
				<navigator url="/pages/addr/index?notify=addr&type=create" class="create_addr"  >新建收货地址</navigator>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 购物车列表
				cartList:[],
				// 优惠券列表
				couponList:[],
				// 请求参数
				requestParam:{
					cart_ids:"",
				},
				// 总价
				priceTotal:'0.00',
				// 优惠券使用
				couponUsed:"去使用 >",
				// 扣减金额
				rebatePrice:0.00,
				// 已经选择的优惠券ID
				customCoupon: 0,
				// 地址列表
				addrList:[],
				// 已选地址
				checkedAddr:{
					id:0,
					contact_name:"",
					contact_phone:"",
					contact_province:"",
					contact_city:"",
					contact_area:"",
					contact_addr:"",
					is_default:0,
				}
			}
		},
		onLoad(param) {
			// 获取路由参数
			this.requestParam.cart_ids = param.cart_ids;
			var that = this;
			// 监听地址变动
			uni.$on('addr_list_change',function(data){
				// 地址列表
				that.addrList = data.list;
				
			})
		},
		onShow() {
			// 结果
			this.$http.request('api/shop_cart/check_list',this.requestParam).then((re)=>{
				if( re.code == 'success' ){
					// 赋值
					this.cartList = re.data;
					// 结果
					this.$http.request('api/custom_coupon/get_checked',this.requestParam).then((re)=>{
						if( re.code == 'success' ){
							// 循环优惠券
							for (let i in re.data) {
								/* 商品的总价格，决定是否可用 */
								var totalPrice	 = 0.00;
								// 循环产品，
								for (let j in this.cartList) {
									// 如果是商品券
									if( re.data[i].type_id == 1 ){
										// 判断商品是不是在商品范围
										var isScope = false;
										// 循环商品范围
										for (let k in re.data[i].product_scope) {
											// 如果存在商品范围
											if( re.data[i].product_scope[k].product_id == this.cartList[j].product_id) isScope = true;
										}
										// 范围内的做计算
										if( isScope ){
											totalPrice = this.$decimal.add(totalPrice,this.$decimal.mul(this.cartList[j].price,this.cartList[j].buy_num));
										}
									// 店铺券
									}else{
										// 折扣券以及满减券的话，计算价格
										totalPrice = this.$decimal.add(totalPrice,this.$decimal.mul(this.cartList[j].price,this.cartList[j].buy_num));
									}
								}
								// 判断价格到不到限额
								re.data[i].is_std = totalPrice.toFixed() >= this.$decimal.mul(re.data[i].std_pay,1).toFixed();
							}
							// 赋值
							this.couponList = re.data;
						}
					});
					// 计算价格
					this.priceHandler();
				}
			});
			// 地址列表
			this.getAddrList();
		},
		onPullDownRefresh() {
			// 请求列表
			this.$http.request('api/shop_cart/check_list',this.requestParam).then((re)=>{
				if( re.code == 'success' ){
					// 赋值
					this.cartList = re.data;
					this.priceHandler();
				}
			});
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			
		},
		methods: {
			// 地址弹出层
			showAddrPopup(){
				// 显示下单弹出层
				this.$refs.addrPopup.open('bottom');
			},
			// 价格计算
			priceHandler(){
				// 总价格
				let priceTotal 	= 0;
				// 循环处理
				for (let index in this.cartList) {
					priceTotal = this.$decimal.add(priceTotal,this.$decimal.mul(this.cartList[index].price,this.cartList[index].buy_num));
				}
				// 扣减数据
				priceTotal		= this.$decimal.sub(priceTotal,this.rebatePrice);
				// 小数点保留
				this.priceTotal = priceTotal.toFixed(2)
			},
			// 创建订单
			createOrder(){
				// 不可预约
				if( !this.$checkAccess.alertCity() ) return;
				// 需要下单的产品列表
				let productList = [];
				// 循环列表数据
				for (let index in this.cartList) {
					// 购买数量必须大于0的才行
					if( this.cartList[index].buy_num > 0 ){
						// 追加需要下单的数据
						productList.push({product_id: this.cartList[index].product_id,buy_num:this.cartList[index].buy_num,product_skuid:this.cartList[index].skuid});
					}
				}
				if( productList.length <= 0) {
					uni.showToast({
						title:"未选择可预约的产品",
						icon:"none",
					})
					return ;
				}
				// 地址未填
				if( !this.checkedAddr.id ) {
					uni.showToast({
						title:"请选择收货地址",
						icon:"none"
					})
					return;
				}
				//需要下单的产品信息参数传给OrederCompletion页面
				let productInfo = [];
				for (let index in this.cartList) {
					// 购买数量必须大于0的才行
					if( this.cartList[index].buy_num > 0 ){
						// 追加需要下单的数据
						productInfo.push({name:this.cartList[index].name,spec:this.cartList[index].spec,price:this.cartList[index].price});
					}
				}
				// 转成json字符串
				productInfo = JSON.stringify(productInfo);
				//加密json格式成编码数组
				let encodedArray = encodeURIComponent(productInfo);
				// 转成json字符串传输
				productList		= JSON.stringify(productList);
				// 请求接口
				this.$http.request('api/orders/create',{"product_list":productList,'custom_coupon_id':this.customCoupon,'is_cart':1,'addr_id':this.checkedAddr.id},'post').then((re)=>{
					// 判断结果
					if( re.code == 'success' ) {
						// 跳转到报单完成页面
						uni.redirectTo({url:`/pages/orders/completion?params=${encodedArray}`})
						return ;
					}else{
						uni.showToast({title: re.msg,icon:"none"})
					}
				});
			},
			// 弹出优惠券
			popupCoupon(){
				this.$refs.popup.open();
			},
			// 选择优惠券
			checkedCoupon(index){
				// 单个设置选中/未选
				this.couponList[index].checked = this.couponList[index].checked ? 0 : 1;
				// 循环处理
				for (let i in this.couponList) {
					// 有未选的就不做全选
					if( index != i ) this.couponList[i].checked = 0;
				}
				// 如果未选中，提示可用
				if( !this.couponList[index].checked ) this.couponUsed = '去使用 >';
				// 已经选择的优惠券ID
				this.customCoupon  = this.couponList[index].checked ? this.couponList[index].id : 0
				// 计算扣减
				this.couponRebate();
				// 计算价格
				this.priceHandler();
				// 关闭弹窗
				this.$refs.popup.close();
			},
			// 计算优惠券扣减
			couponRebate(){
				// 默认扣减0
				this.rebatePrice 	= 0;
				// 循环优惠券
				for (let i in this.couponList) {
					// 判断是否选中
					if( !this.couponList[i].checked ){
						// 未选择的不管
						continue;
					}
					/* 商品的总价格，决定是否可用 */
					var totalPrice	 = 0.00;
					// 循环产品，
					for (let j in this.cartList) {
						// 如果是商品券
						if( this.couponList[i].type_id == 1 ){
							// 判断商品是不是在商品范围
							var isScope = false;
							// 循环商品范围
							for (let k in this.couponList[i].product_scope) {
								// 如果存在商品范围
								if( this.couponList[i].product_scope[k].product_id == this.cartList[j].product_id) isScope = true;
							}
							// 范围内的做计算
							if( isScope ) totalPrice = this.$decimal.add(totalPrice,this.$decimal.mul(this.cartList[j].price,this.cartList[j].buy_num));
						// 店铺券
						}else{
							// 折扣券以及满减券的话，计算价格
							totalPrice = this.$decimal.add(totalPrice,this.$decimal.mul(this.cartList[j].price,this.cartList[j].buy_num));
						}
					}
					// 如果是可以用的话
					if( parseFloat(totalPrice.toFixed())  >= parseFloat(this.$decimal.mul(this.couponList[i].std_pay,1).toFixed()) ){
						// 扣减金额
						let rebatePrice = 0;
						// 满减
						if( this.couponList[i].rebate_type == 1 ){
							// 计算扣减数据
							rebatePrice 	= this.$decimal.mul(this.couponList[i].rebate,1);
							// 替换文字
							this.couponUsed = "￥-" + rebatePrice.toFixed(2);
						}
						// 折扣
						if( this.couponList[i].rebate_type == 2 ){
							// 折扣
							rebatePrice 	= this.$decimal.mul(totalPrice,this.couponList[i].rebate);
							// -0.1 表示折扣
							rebatePrice		= this.$decimal.sub(totalPrice,rebatePrice.mul(0.1));
							// 替换文字
							this.couponUsed = "￥-" + rebatePrice.toFixed(2);
						}
						//  赠品
						if( this.couponList[i].rebate_type == 3 ){
							// 替换文字
							this.couponUsed = "送" + ( this.couponList[i].rebate_scope.length ? this.couponList[i].rebate_scope[0].product_name: "");
						}
						// 小数点保留
						this.rebatePrice  	= rebatePrice.toFixed(2);
					}
				}
			},
			// 选择地址
			checkedAddrItem(item){
				this.checkedAddr = item;
				this.$refs.addrPopup.close();
			},
			getAddrList(){
				// 判断数据
				this.$http.request('api/custom_addr/get_list').then((callback)=>{
					// 获取成功
					if( callback.code == 'success' ){
						this.addrList  = callback.data;
						// 如果有的话
						if( this.addrList.length ){
							// 获取默认的
							for (let i in this.addrList) {
								// 如果是默认的
								if( this.addrList[i].is_default ) this.checkedAddr = this.addrList[i];
							}
							// 如果没有默认的话
							if( !this.checkedAddr.id ){
								this.checkedAddr = this.addrList[this.addrList.length-1];
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.custom_addr{
		width: 680rpx;
		display: block;
		font-size: 24rpx;
		overflow: hidden;
		margin: 0rpx auto;
		line-height: 40rpx;
		padding: 20rpx 35rpx;
		background-color: #FFFFFF;
		border-bottom: 2rpx solid #dddddd;
		.contact_user{
			display: block;
			font-size: 24rpx;
			line-height: 50rpx;
			.contact_none{
				font-size: 26rpx;
				font-weight: bold;
			}
			.contact_name{
				font-size: 26rpx;
				font-weight: bold;
				margin-right: 16rpx;
			}
			.contact_more{
				float: right;
				font-size: 40rpx;
				font-weight: bold;
			}
			.contact_shop{
				float: right;
				font-size: 26rpx;
				margin-right: 16rpx;
			}
		}
		.contact_addr{
			width: 620rpx;
			display: block;
			font-size: 24rpx;
			line-height: 30rpx;
			padding: 10rpx 5rpx;
		}
	}
	.car_list{
		display: block;
		overflow: hidden;
		margin: 0rpx auto;
		margin-top: 20rpx;
		margin-bottom: 160rpx;
		background: #FFFFFF;
		.car_item{
			height: 170rpx;
			display: block;
			overflow: hidden;
			margin: 0rpx auto;
			padding: 20rpx 35rpx;
			border-bottom: 2rpx solid #DDDDDD;
			.box_left{
				float: left;
				width: 140rpx;
				height: 190rpx;
				margin-top: 10rpx;
				.car_image{
					width: 140rpx;
					height: 140rpx;
					border-radius: 5rpx;
				}
			}
			.box_center{
				float: left;
				width: 300rpx;
				margin-left: 25rpx;
				.car_name{
					max-height: 80rpx;
					font-size: 30rpx;
					line-height: 50rpx;
					overflow: hidden;
				}
				.car_spec{
					color: #999999;
					font-size: 24rpx;
					line-height: 60rpx;
					max-height: 60rpx;
					overflow: hidden;
				}
				.car_price{
					font-size: 30rpx;
					line-height: 60rpx;
					.price{
						color: red;
					}
				}
			}
			.box_right{
				float: right;
				width: 185rpx;
				.buy_num_box{
					float: right;
					color: #333333;
					overflow: hidden;
					font-size: 24rpx;
					margin-top: 130rpx;
					text-align: center;
					.buy_num{
						float: left;
						width: 100rpx;
						height: 30rpx;
						font-size: 24rpx;
						line-height: 30rpx;
						padding: 0rpx 0rpx;
						border-radius: 8rpx;
					}
					
				}
			}
		}
		.car_item:last-child{
			border-bottom: none;
		}
	}
	.to_select_coupon{
		display: block;
		height: 120rpx;
		font-size: 30rpx;
		margin: 20rpx auto;
		background: #FFFFFF;
		padding: 0rpx 35rpx;
		line-height: 120rpx;
		.coupon_deduction{
			color: red;
			float: right;
			font-size: 26rpx;
		}
	}
	.bottom_box{
		left: 0rpx;
		width: 100%;
		height: 140rpx;
		display: block;
		position: fixed;
		overflow: hidden;
		background: #FFFFFF;
		padding: 0rpx 35rpx;
		bottom: var(--window-bottom);
		.price_box{
			float: left;
			width: 500rpx;
			display: block;
			color: #666666;
			font-size: 26rpx;
			text-align: right;
			line-height: 100rpx;
			margin-right: 20rpx;
			.price_total{
				color: red;
				font-size: 30rpx;
			}
		}
		.to_order{
			float: left;
			width: 180rpx;
			height: 80rpx;
			display: block;
			color: #FFFFFF;
			font-size: 28rpx;
			margin-top: 10rpx;
			line-height: 80rpx;
			padding: 0rpx 0rpx;
			text-align: center;
			border-radius: 40rpx;
			background-color: #E03519;
		}
	}
	.popup{
		.popup_title{
			display: block;
			overflow: hidden;
			margin: 0rpx auto;
			font-size: 36rpx;
			height: 120rpx;
			line-height: 120rpx;
			padding: 0rpx 20rpx;
			border-bottom: 10rpx solid #F8F8F8;
			.to_addr_page{
				float: right;
				color: #F59A23;
				display: block;
				height: 120rpx;
				line-height: 120rpx;
				font-size: 26rpx;
				padding: 0rpx 10rpx;
			}
		}
		.coupon_list{
			display: block;
			overflow: hidden;
			margin: 10rpx auto;
			min-height: 600rpx;
			background: #FFFFFF;
			padding-bottom: 50rpx;
			.coupon_item{
				height: 200rpx;
				display: block;
				margin: 10rpx auto;
				border-bottom: 2rpx solid #DDDDDD;
				.box_left{
					float: left;
					width: 160rpx;
					height: 160rpx;
					font-size: 20rpx;
					text-align: center;
					margin-left: 35rpx;
					line-height: 60rpx;
					margin-top: 20rpx;
					background: pink;
					.rebate{
						width: 120rpx;
						height: 60rpx;
						margin: 0rpx auto;
						line-height: 60rpx;
						margin-top: 20rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.box_right{
					float: left;
					width: 485rpx;
					margin-left: 35rpx;
					padding-top: 20rpx;
					.coupon_title{
						width: 485rpx;
						max-height: 80rpx;
						font-size: 30rpx;
						overflow: hidden;
						line-height: 40rpx;
						padding: 0rpx 0rpx;
						.coupon_name{
							float: left;
							height: 40rpx;
							width: 380rpx;
						}
						.coupon_status{
							width: 85rpx;
							float: right;
							color: #999999;
							font-size: 24rpx;
						}
					}
					.product_scope{
						width: 485rpx;
						height: 80rpx;
						color: #999999;
						font-size: 24rpx;
						overflow: hidden;
						line-height: 80rpx;
						.check_label{
							float: right;
							display: block;
							overflow: hidden;
							padding: 20rpx 20rpx;
							.isstd{
								line-height: 40rpx;
							}
							.checkbox{
								float: right;
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
					.coupon_info{
						width: 485rpx;
						max-height: 80rpx;
						font-size: 30rpx;
						overflow: hidden;
						line-height: 40rpx;
						padding: 0rpx 0rpx;
						.coupon_exp{
							float: left;
							font-size: 20rpx;
						}
					}
				}
			}
			.coupon_item:last-child{
				border-bottom: none;
			}
		}
		.addr_list{
			width: 730rpx;
			display: block;
			overflow: hidden;
			margin: 0rpx auto;
			min-height: 500rpx;
			.addr_item{
				display: block;
				font-size: 24rpx;
				overflow: hidden;
				line-height: 40rpx;
				padding: 15rpx 10rpx;
				border-radius: 15rpx;
				border-bottom: 2rpx solid #dddddd;
				.radio_label{
					width: 40rpx;
					float: left;
					height: 50rpx;
					padding-top: 30rpx;
					margin-right: 20rpx;
					.radio_icon{
						float: left;
						width: 40rpx;
						height: 40rpx;
					}
				}
				.contact_user{
					float: left;
					width: 640rpx;
					display: block;
					height: 50rpx;
					font-size: 24rpx;
					line-height: 50rpx;
					.contact_name{
						font-size: 26rpx;
						font-weight: bold;
						margin-right: 16rpx;
					}
					.contact_default{
						color: #F59A23;
						font-size: 20rpx;
						margin-left: 16rpx;
						border: 1rpx solid #F59A23;
					}
					.contact_shop{
						float: right;
						font-size: 26rpx;
						margin-right: 16rpx;
					}
				}
				.contact_addr{
					float: left;
					width: 640rpx;
					display: block;
					font-size: 24rpx;
					line-height: 30rpx;
					padding: 10rpx 5rpx;
				}
			}
		}
		.create_box{
			height: 140rpx;
			display: block;
			.create_addr{
				width: 700rpx;
				height: 80rpx;
				display: block;
				color: #FFFFFF;
				font-size: 30rpx;
				overflow: hidden;
				line-height: 80rpx;
				padding: 0rpx 0rpx;
				text-align: center;
				margin: 0rpx auto;
				margin-top: 20rpx;
				border-radius: 40rpx;
				background-color: #E03519;
			}
		}
	}
</style>