null/pages/mang/confirm.vue

<template>
	<view class="page">
		<view class="pro-sec flex-row justify-between section_3">
			<view class="flex-row">
				<image src="/static/temp/pro.png" class="image_5" mode="aspectFill" />
				<view class="flex-col group_7">
					<view class="flex-col items-start">
						<text class="text_2 clamp">幸福西饼Rice盲盒</text>
						<view class="stars align-center"><image src="/static/mang_star.png" class="image_6" v-for="(item, idx) in 3" :key="idx" /></view>
					</view>
					<view class="group_9">
						<text class="text_3">￥</text>
						<text class="text_4">149.00</text>
					</view>
				</view>
			</view>
			<view class="flex-col items-end group_10">
				<text class="text_7">随机搭配</text>
				<!-- <text class="text_8">*1</text> -->
				<uni-number-box
					class="step"
					:min="1"
					:max="stock"
					:disabled="number >= stock"
					:value="number"
					:isMax="number >= stock ? true : false"
					:isMin="number === 1"
					@eventChange="numberChange"
				></uni-number-box>
			</view>
		</view>
		<view class="loc-sec flex-col">
		  <view class="flex-row section_5">
			<view class="flex-col items-start group_11">
			  <text class="text_9 clamp">幸福西饼万达店</text>
			  <text class="text_11 clamp2">长安路与香港路交汇处万达广场3楼1104</text>
			</view>
			<view class="align-center group_12">
			  <view class="section_6"></view>
			  <image
				src="/static/confirm-phone.png"
				class="image_7"
			  />
			</view>
		  </view>
		  <view class="flex-row justify-between group_13">
			<text class="text_12">自提时间</text>
			<view class="flex-row" @tap="openTime">
			  <text class="text_14" :class="{active: show_time}">{{show_time? show_time : '请选择'}}</text>
			  <image
				src="/static/confirm-rarrow.png"
				class="image_8"
			  />
			</view>
		  </view>
		</view>
		<view class="price-sec flex-col">
			  <view class="flex-row justify-between group_15">
				<text class="text_16">商品总额</text>
				<text class="text_17">￥149.00</text>
			  </view>
			  <view class="flex-row justify-between group_13">
				<text class="text_12">优惠券</text>
				<view class="flex-row group_16" @tap="showCoupons">
				  <text class="text_14">请选择</text>
				  <image
					src="/static/confirm-rarrow.png"
					class="image_8"
				  />
				</view>
			  </view>
		</view>
		<view class="note-sec flex-col">
			  <text class="text_20">订单备注</text>
			  <view class="flex-col items-start text-wrapper">
				  <textarea class="area" placeholder="请输入备注信息"></textarea>
			  </view>
		</view>
	    <safeArea height="128rpx">
			<template v-slot:btn>
				<view class="btn-wrap justify-between">
					  <view class="align-center group_17">
					    <text class="text_22">待支付</text>
					    <view class="group_18 align-center">
					      <text class="text_23">￥</text>
					      <text class="text_24 clamp">151.00</text>
					    </view>
					  </view>
					  <view class="flex-col items-center text-wrapper_1"><text class="text_25">立即支付</text></view>
				</view>
			</template>
		</safeArea>
		<datetime @rundata="getTime" ref="timeRef" :end='enddate' :start='startdate' default='start'></datetime>
		<popup ref="couponRef" type="bottom">
			<view class="coupon-panel">
				<view class="cancel-wrap align-center justify-center">
					<text class="zicon zicon-quxiao ic" @tap="hideCoupons"></text>
				</view>
				<view class="title-wrap">
					选择优惠券
				</view>
				<view class="content-wrap">
					<scroll-view scroll-y="true" class="scroll">
						<view class="item flex-col justify-center" v-for="(item,idx) in 10" :key="idx">
							<view class="name clamp">店铺优惠1</view>
							<view class="tips">
								<text class="stxt">消费金额</text>
								<text class="mtxt">满30减5</text>
							</view>	
						</view>	
					</scroll-view>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
import uniNumberBox from './components/uni-number-box.vue';
import datetime from './components/datetime.vue';
export default {
	components: {
		uniNumberBox,
		datetime
	},
	data() {
		return {
			stock: 10000,
			number: 1,
			show_time:'', //自提时间
			couponList: [], //优惠券列表
			useCouponIndex: -1,
			coupon_price: 0.0, //优惠券金额
			price: 0.0, //商品金额
			total: 0.0 ,//实付金额
			startdate: '',
			enddate: '2042-05-30 23:59',
		};
	},
	onLoad() {
		let date = new Date();
		this.startdate = this.handleDatetime(date);
	},
	methods: {
		//数量
		async numberChange(data) {
			//number,index
			this.number = data.number;
			this.calcTotal();
		},
		// 计算价格
		calcTotal() {
			let price = 0;
			let number = 0; // 产品数量

			//计算出当前产品price,number
			this.price = price.toFixed(2);
			let total = price;

			// 检查当前优惠券是否满足使用条件
			this.coupon_price = 0.0;
			if (this.useCouponIndex != -1 && this.couponList && this.couponList[this.useCouponIndex]) {
				this.coupon_price = this.couponList[this.useCouponIndex].value;
				if (this.price >= this.couponList[this.useCouponIndex].least) {
					total = total - this.coupon_price;
				} else {
					this.$tools.msg('选中的优惠券不满足使用条件', 2000);
					this.useCouponIndex = -1; //取消选中的优惠券
					this.coupon_price = 0; //设置优惠金额为0
					total = total - this.coupon_price;
				}
			}
		},
	    //时间
		handleStrLength(num){
			return String(num).length < 2 ? '0' + num : num;
		},
		handleDatetime(date){
			let m = this.handleStrLength(date.getMonth() + 1);
			let d = this.handleStrLength(date.getDate());
			let h = this.handleStrLength(date.getHours());
			let mm = this.handleStrLength(date.getMinutes());
			let dateStr = date.getFullYear() + "-" + m + "-" + d + " " + h + ":" + mm;
			return dateStr;
		},
		getTime(e){
	    	this.show_time=e;
	    	// var date= new Date(e.replace(/-/g, "/"));
	    },
	    openTime(){
	    	this.$refs.timeRef.open();
	    },
		showCoupons(){
			this.$refs.couponRef.show();
		},
		hideCoupons(){
			this.$refs.couponRef.hide();
		},
		
	}
};
</script>

<style lang="scss">
page {
	background-color: #f8f8f8;
}
.page {
	padding: 20rpx 30rpx;
}
.pro-sec {
	padding: 22rpx 17rpx 24rpx 20rpx;
	background-color: #ffffff;
	box-shadow: 0px 6rpx 10rpx #2a2a2a14;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	position: relative;
	.image_5 {
		width: 154rpx;
		height: 154rpx;
	}
	.group_7 {
		margin-left: 15rpx;
		margin-bottom: 10rpx;
	}
	.text_2 {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
		max-width: 370rpx;
	}
	.image_6 {
		margin-top: 10rpx;
		width: 28rpx;
		height: 28rpx;
		margin-right: 4rpx;
	}
	.group_9 {
		margin-top: 51rpx;
		align-self: flex-start;
		line-height: 28rpx;
	}
	.text_3 {
		color: #fc4d37;
		font-size: 30rpx;
		font-family: PingFang;
		letter-spacing: 1.2rpx;
	}
	.text_4 {
		color: #fc4d37;
		font-size: 36rpx;
		font-family: PingFang;
		letter-spacing: 1.44rpx;
	}

	.group_10 {
		margin: 4rpx 0 5rpx;
	}
	.text_7 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
	}
	.text_8 {
		margin-top: 106rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 18rpx;
	}
	.step {
		margin-top: 86rpx;
	}
}
.loc-sec{
	  margin-top: 24rpx;
	  padding: 30rpx 20rpx 0 24rpx;
	  background-color: #ffffff;
	  box-shadow: 0px 6rpx 10rpx #2a2a2a14;
	  border-radius: 20rpx;
	.section_5 {
	  padding: 27rpx 20rpx 24rpx;
	  background-color: #f7f7f7;
	  border-radius: 10rpx;
	}
	.group_11 {
	  margin-bottom: 6rpx;
	  flex: 1 1 auto;
	}
	.text_9 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  max-width: 500rpx;
	}
	.text_11 {
	  margin-top: 20rpx;
	  color: #666666;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 36rpx;
	  max-width: 500rpx;
	}
	.group_12 {
	  margin-left: 40rpx;
	  margin-right: 10rpx;
	  flex-shrink: 0;
	}
	.section_6 {
	  background-color: #0000001a;
	  width: 1rpx;
	  height: 80rpx;
	}
	.image_7 {
	  margin-left: 30rpx;
	  align-self: center;
	  width: 48rpx;
	  height: 48rpx;
	}
	.group_13 {
	  padding: 40rpx 0;
	}
	.text_12 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  line-height: 28rpx;
	  letter-spacing: 1.2rpx;
	}
	.text_14 {
	  color: #999999;
	  font-size: 28rpx;
	  font-family: PingFang;
	  &.active{
		  color: #333;
	  }
	}
	.image_8 {
	  margin: 4rpx 0 4rpx 11rpx;
	  flex-shrink: 0;
	  width: 10rpx;
	  height: 18rpx;
	}
}
.price-sec{
	  margin-top: 24rpx;
	  padding-left: 21rpx;
	  padding-right: 12rpx;
	  background-color: #ffffff;
	  box-shadow: 0px 6rpx 10rpx #2a2a2a14;
	  border-radius: 20rpx;
	.group_15 {
	  padding: 40rpx 0;
	  border-bottom: solid 2rpx #0000001a;
	}
	.text_16 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  letter-spacing: 1.2rpx;
	}
	.text_17 {
	  margin-bottom: 3rpx;
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	}
	.group_13 {
	  padding: 40rpx 0;
	}
	.text_12 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  line-height: 28rpx;
	  letter-spacing: 1.2rpx;
	}
	.group_16 {
	  margin-right: 8rpx;
	}
	.text_14 {
	  color: #999999;
	  font-size: 28rpx;
	  font-family: PingFang;
	  line-height: 26rpx;
	}
	.image_8 {
	  margin: 4rpx 0 4rpx 11rpx;
	  flex-shrink: 0;
	  width: 10rpx;
	  height: 18rpx;
	}
}
.note-sec{
	  margin-top: 24rpx;
	  padding: 40rpx 20rpx 40rpx 21rpx;
	  background-color: #ffffff;
	  box-shadow: 0px 6rpx 10rpx #2a2a2a14;
	  border-radius: 20rpx;
	.text_20 {
	  align-self: flex-start;
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  letter-spacing: 1.2rpx;
	}
	.text-wrapper {
	  margin-left: 3rpx;
	  margin-top: 30rpx;
	  background-color: #f7f7f7;
	  border-radius: 10rpx;
	  .area{
		  padding: 18rpx;
		  font-size: 24rpx;
		  color: #333;
		  line-height: 36rpx;
		  width: 646rpx;
		  height: 147rpx;
	  }
	}
}
.btn-wrap{
	  padding: 32rpx 20rpx 20rpx 29rpx;
	  background-color: #ffffff;
	  box-shadow: 0px 0px 14rpx #0000001a;
	  height: 128rpx;
	.group_17 {
	  align-self: center;
	}
	.text_22 {
	  color: #999999;
	  font-size: 28rpx;
	  font-family: PingFang;
	}
	.group_18 {
	  margin-left: 11rpx;
	  line-height: 28rpx;
	  height: 29rpx;
	}
	.text_23 {
	  color: #ff342e;
	  font-size: 28rpx;
	  font-family: PingFang;
	}
	.text_24 {
	  color: #ff342e;
	  font-size: 36rpx;
	  font-family: PingFang;
	  max-width: 320rpx;
	}
	.text-wrapper_1 {
	  padding: 24rpx 0 23rpx;
	  background-color: #92b99c;
	  border-radius: 38rpx;
	  width: 228rpx;
	  height: 76rpx;
	}
	.text_25 {
	  color: #ffffff;
	  font-size: 30rpx;
	  font-family: PingFang;
	}
}
.coupon-panel{
	width: 750rpx;
	// height: 441rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	position: relative;
	.cancel-wrap{
		width: 68rpx;
		height: 68rpx;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 2;
		.ic{
			font-size: 24rpx;
			color: #999;
		}
	}
	.title-wrap{
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.content-wrap{
		padding: 30rpx;
		// padding-bottom:  30rpx + calc( var(--safe-area-inset-bottom) / 2);
		.scroll{
			min-height: 350rpx;
			max-height: 600rpx;
		}
		.item{
			width: 690rpx;
			height: 133rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 0 30rpx;
		}
		.name{
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.tips{
			margin-top: 24rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			.mtxt{
				color:$base-color;
			}
		}
	}
	
}
</style>