manghe/components/weikuan.vue

<template>
	<view>
		<view class="address-window" :class="show==true?'on':''">
			<view class="weikuan">
				<view class="title">
					确认商品数量
				</view>
				<view v-for="item in info.cartInfo">
					<view class="product">
						<image :src="item.productInfo.image" mode=""></image>
						<view class="details">
							<view class="pTitle">
								{{item.productInfo.store_name}}
							</view>
							<view class="price">
								￥{{item.attrInfo.price}}
							</view>
						</view>
					</view>
					<view class="num">
						<text>数量:{{item.cart_num}}</text>
					</view>
					
				</view>
				<view class="totalInfo">
					<view class="totalItem">
						<text class="totalTitle">总计:</text>
						<text class="totalDesc">¥{{info.total_price}}</text>
					</view>
					<view class="totalItem">
						<text class="totalTitle">已支付:</text>
						<text class="totalDesc">¥{{info.pay_price}}</text>
					</view>
					<view class="totalItem">
						<text class="totalTitle">剩余尾款:</text>
						<text class="totalDesc">¥{{info.pay_money_wei}}</text>
					</view>
				</view>
				
				<view class="btnPay" @click="payHandle">
					支付尾款
				</view>
			</view>
		</view>
		<view class='mask' catchtouchmove="true" :hidden='show==false' @tap='close'></view>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	export default {
		props: {
			show: {
				type: Boolean,
				default: true
			},
			info:{
				type:Object,
				default:()=>{
					return {}
				}
			}
			
			
		},
		data() {
			return {
			
			};
		},

		methods: {
		
			close: function() {
				this.$emit("close")
			},
			payHandle(){
				this.$emit("weikuanPay")
				
			}
		
			
		},
		
	}
</script>

<style scoped lang="scss">
	.address-window {
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
	}

	.address-window.on {
		transform: translate3d(0, 0, 0);
	}
    .weikuan{
		padding:30rpx 24rpx 53rpx 24rpx;
		.title {
			text-align: center;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 34rpx;
			color: #333333;
		
		}
		.product{
			display: flex;
			margin-top:36rpx;
			image{
				width: 160rpx;
				height: 160rpx;
				background: #EEEEEE;
				border-radius: 20rpx;
			}
			.details{
				
				flex:1;
				margin-left:20rpx;
				.pTitle{
					
					margin-top: 16rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
				}
				.price{
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #E4884E;
					margin-top:25rpx;
				}
			}
		}
		.num{
			margin-top:60rpx;
			
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			
		}
		.totalInfo{
			display: flex;
			margin-top:40rpx;
			.totalItem{
				margin-right:31rpx;
				.totalTitle{
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					
				}
				.totalDesc{
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					
				}
			}
		}
		.btnPay{
			margin-top:50rpx;
			line-height: 98rpx;
			height: 98rpx;
			background: #A8D178;
			border-radius: 49px;
			border: 1px solid #A8D178;
		
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
		}
		
	}
	
	
</style>