<template>
	<view class="compomets-mask">
		<view class="compomets-frame">
			<!--头部-->
			<view class="compomets-title">
				<!--关闭-->
				<view class="title-close">
					<uni-icons type="closeempty" size="28"></uni-icons>
				</view>
				<!--照片信息-->
				<view class="title-message">
					<view class="message-photo">
						<!--照片-->
						<image src="../../static/album/myVlog.png"></image>
						<!--放大-->
						<image src="../../static/album/icon04.png"></image>
					</view>
					<view class="message-other">
						<view class="other-name">单照片</view>
						<view class="other-buys">
							<view class="buys-money">
								<text>¥</text>
								<text>20</text>
							</view>
							<view class="buys-inNum">x1</view>
						</view>
					</view>
				</view>
			</view>
			<!--选择套餐-->
			<view class="compomets-setMeal">
				<view class="setMeal-label">选择套餐</view>
				<view class="setMeal-list setMeal-listAct">
					<view class="list-name">下载/打印/相框(金属)</view>
					<view class="list-unitPrice">¥30</view>
				</view>
				<view class="setMeal-list">
					<view class="list-name">下载/打印/相框(金属)</view>
					<view class="list-unitPrice">¥30</view>
				</view>
			</view>
			<!--信息填写-->
			<view class="compomets-from">
				<view class="compomets-commonBox">
					<view class="commonBox-name">打印份数</view>
					<u-number-box v-model="printNum"></u-number-box>
				</view>
				<view class="compomets-commonBox">
					<view class="commonBox-name">取件方式</view>
					<view class="commonBox-pickUp">
						<view class="pickUp-click">
							现场自取
						</view>
						<view class="pickUp-click pickUp-clickAct">
							邮寄到家
						</view>
					</view>
				</view>
				<view class="compomets-commonBox">
					<view class="commonBox-name">联系电话</view>
					<u--input  placeholder="请输入取片人手机号码" v-model="phoneNum" type="number"  border="none"  clearable></u--input>
				</view>
				<view class="compomets-commonBox">
					<view class="commonBox-name">取件地址</view>
					<view class="commonBox-picker" @click="show = true">
						<u-picker :show="show" :columns="columns" visibleItemCount="6" itemHeight="80" keyName="label" @confirm="addressFun" @cancel="show=false" ></u-picker>
						{{showAddress}}
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="compomets-commonBox">
					<view class="commonBox-name">备注</view>
					<u--input  placeholder="请输入备注信息" v-model="remarkMes"  border="none"  clearable></u--input>
				</view>
			</view>
			<!--支付方式-->
			<view class="compomets-payment">
				<view class="payment-mes">
					<image src="../../static/album/icon11.png"></image>
					<view>微信支付</view>
				</view>
				<view class="payment-radio">
					<view></view>
				</view>
			</view>
			<!--合计-->
			<view class="compomets-total">
				<view class="total-amount">
					<view class="amount-unit amount-unit333">合计：</view>
					<view class="amount-unit amount-unitD00">¥</view>
					<view class="amount-number">20</view>
				</view>
				<view class="total-btn">去结算</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  name: 'comA',
  props:{
  },
  data() {
    return {
      printNum:1,//打印份数
      phoneNum:'',//联系电话
      remarkMes:'',//备注信息
      show: false,//遮罩显隐---项目
      columns: [//遮罩列表---项目
			  [{
			    label: '雪月夜1',
			    // 其他属性值
			    id: 2021
			    // ...
			  }, {
			    label: '冷夜雨2',
			    id: 804
			  }, {
			    label: '冷夜雨3',
			    id: 804
			  }, {
			    label: '冷夜雨4',
			    id: 804
			  }, {
			    label: '冷夜雨5',
			    id: 804
			  }, {
			    label: '冷夜雨6',
			    id: 804
			  }, {
			    label: '冷夜雨7',
			    id: 804
			  }, {
			    label: '冷夜雨8',
			    id: 804
			  }]
      ],
      showAddress:'雪月夜',//显示内容---项目
    }
  },
  methods:{
    addressFun(e){//项目选择
		  this.showAddress = e.value[0].label
		  this.show=false
    },
  },
}
</script>

<style scoped lang="scss">
	.compomets-mask{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 40;
		background-color: rgba(0,0,0,.3);
	}
	.compomets-frame{
		width: 100%;
		max-height: 80vh;
		background: #F7F8FA;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		overflow: auto;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.compomets-title{
		background-color: #fff;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		padding: 64rpx 44rpx 40rpx 40rpx;
		position: relative;
		.title-close{
			position: absolute;
			top: 18rpx;
			right: 18rpx;
		}
		.title-message{
			display: flex;
			
			.message-photo{
				width: 160rpx;
				height: 160rpx;
				position: relative;
				image:nth-child(1){
					display: block;
					width: 160rpx;
					height: 160rpx;
				}
				image:nth-child(2){
					display: block;
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
				}
			}
			.message-other{
				display: flex;
				flex-direction:column;
				justify-content: space-between;
				flex: 1;
				padding-left: 20rpx;
				.other-name{
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;
					line-height: 28rpx;
					padding-top: 12rpx;
				}
				.other-buys{
					width: 100%;
					display: flex;
					justify-content: space-between;
					.buys-money{
						display: flex;
						font-weight: 600;
						color: #FF7D00;
						line-height: 28rpx;
						text:nth-child(1){
							font-size: 28rpx;
						}
						text:nth-child(2){
							font-size: 36rpx;
						}
					}
					.buys-inNum{
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						line-height: 28rpx;
					}
				}
			}
		}
	}
	.compomets-setMeal{
		background-color: #fff;
		padding: 0 0 40rpx 40rpx;
		margin-bottom: 20rpx;
		.setMeal-label{
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			margin-bottom: 30rpx;
		}
		.setMeal-list{
			display: flex;
			justify-content: space-between;
			width: 580rpx;
			height: 56rpx;
			background: #F7F7F7;
			border-radius: 8rpx;
			border: 2rpx solid #F7F7F7;
			font-weight: 600;
			font-size: 24rpx;
			line-height: 52rpx;
			padding: 0 20rpx 0 24rpx;
			margin-bottom: 24rpx;
			.list-name{
				color: #333333;
			}
			.list-unitPrice{
				color: #999999;
			}
		}
		.setMeal-list:nth-last-child(1){
			margin-bottom: 0;
		}
		.setMeal-listAct{
			background: #FFF2E9;
			border: 2rpx solid #FE6600;
			.list-name,
			.list-unitPrice{
				color: #FE6600;
			}
		}
	}
	.compomets-commonBox{//公共框
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		background-color: #fff;
		padding-left: 40rpx;
		border-bottom: solid 2rpx #EDEDED;
		.commonBox-name{
			width: 130rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 56rpx;
			padding-top: 22rpx;
		}
	}
	.compomets-from{
		margin-bottom: 20rpx;
		.compomets-commonBox:nth-last-child(1){
			border-bottom: none;
		}
		//打印份数
		/deep/ .u-number-box{
			margin-right: 38rpx;
		}
		/deep/ .u-number-box__minus,
		/deep/ .u-number-box__plus{
			width: 40rpx !important;
			height: 40rpx !important;
			background-color: #F7F7F7;
		}
		/deep/ .u-number-box__input{
			width: 56rpx !important;
			background-color: #fff !important;
		}
		//取件方式
		.commonBox-pickUp{
			flex: 1;
			display: flex;
			justify-content:flex-end;
			padding-right: 40rpx;
			padding-top: 24rpx;
			.pickUp-click{
				width: 160rpx;
				height: 52rpx;
				border-radius: 8rpx;
				border: 2rpx solid #EEEEEE;
				border-radius: 8rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 48rpx;
				text-align: center;
				margin-left: 20rpx;
			}
			.pickUp-clickAct{
				background: #FFF2E9;
				border: 2rpx solid #FE6600;
				font-weight: 600;
				color: #FE6600;
			}
		}
		//联系电话 备注
		/deep/ .u-input__content__field-wrapper__field{
			height: 56rpx !important;
			font-weight: 400;
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: 56rpx !important;
			text-align: right !important;
			padding-right: 76rpx;
		}
		//取件地址
		.commonBox-picker{
			flex: 1;
			display: flex;
			justify-content: flex-end;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 56rpx;
			padding: 22rpx 30rpx 0 0;
			text-align: right;
			position: relative;
			/deep/ .u-icon--right{
				height: 56rpx !important;
				margin-left: 10rpx !important;
				/deep/ .u-icon__icon{
					font-size: 28rpx !important;
					line-height: 56rpx !important;
					color: #999999;
				}
			}
		}
	}
	.compomets-payment{
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		background-color: #fff;
		padding-left: 40rpx;
		border-bottom: solid 2rpx #EDEDED;
		.payment-mes{
			display: flex;
			image{
				display: block;
				width: 40rpx;
				height: 40rpx;
				margin: 30rpx 24rpx 0 0;
			}
			view{
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
				line-height: 56rpx;
				margin-top: 22rpx;
			}
		}
		.payment-radio{
			width: 32rpx;
			height: 32rpx;
			border-radius: 16rpx;
			border: 2rpx solid #FE6600;
			margin: 34rpx 40rpx 0 0;
			position: relative;
			view{
				width: 16rpx;
				height: 16rpx;
				background: #FE6600;
				border-radius: 16rpx;
				margin: auto;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}
		}
	}
	.compomets-total{
		display: flex;
		justify-content: space-between;
		height: 120rpx;
		background-color: #fff;
		padding: 0 24rpx 0 24rpx;
		.total-amount{
			display: flex;
			padding-top: 32rpx;
			font-weight: 400;
			line-height: 56rpx;
			.amount-unit{
				font-size: 24rpx;
			}
			.amount-unit333{
				color: #333333;
			}
			.amount-unitD00{
				color: #FF7D00;
			}
			.amount-number{
				font-size: 40rpx;
				color: #FF7D00;
				line-height: 49rpx;
				margin-left: 2rpx;
				font-weight: bold;
			}
		}
		.total-btn{
			width: 200rpx;
			height: 80rpx;
			background: #FE6600;
			border-radius: 40rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			margin-top: 20rpx;
		}
	}
</style>