null/pages/mang/confirm.vue

<template>
	<!-- v-if="info.id" -->
	<view class="page" >
		
		<view class="pro-sec flex-row justify-between section_3">
			<view class="flex-row">
				<image :src="info.goods_img" class="image_5" mode="aspectFill" />
				<view class="flex-col group_7">
					<view class="flex-col items-start">
						<text class="text_2 clamp">{{info.goods_name}}</text>
						<view class="stars align-center"><image src="/static/mang_star.png" class="image_6" v-for="(item, idx) in info.rank" :key="idx" /></view>
					</view>
					<view class="group_9">
						<text class="text_3">￥</text>
						<text class="text_4">{{info.shop_price}}</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">{{info.shop_name}}</text>
			  <text class="text_11 clamp2">{{info.full_address}}</text>
			</view>
			<view class="align-center group_12" @tap="makePhone">
			  <view class="section_6"></view>
			  <image
				src="/static/confirm-phone.png"
				class="image_7"
			  />
			</view>
		  </view>
		  <view class="flex-row justify-between group_13" @tap="navTo('/pages/address/address',{sourcePage:'mang'},{isCheckLogin:true})">
				<text class="text_12">您的地址</text>
				<view class="flex-row" >
				  <text class="text_14 clamp" :class="{active: addrInfo.address}">{{addrInfo.address? addrInfo.address : '请选择'}}</text>
				  <image
					src="/static/confirm-rarrow.png"
					class="image_8"
				  />
				</view>
		  </view>
		  <view class="flex-row justify-between group_13" @tap="openTime">
			<text class="text_12">自提时间</text>
			<view class="flex-row" >
			  <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">￥{{total}}</text>
			  </view>
			  <view class="flex-row justify-between group_13" @tap="showCoupons">
				<text class="text_12">优惠券</text>
				<view class="flex-row group_16" >
				  <text class="text_14" :class="{active: coupon_price>0}">{{ coupon_price>0 ? `-${coupon_price}`: '请选择'}}</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="请输入备注信息" v-model="remark"></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">{{realTotal}}</text>
					    </view>
					  </view>
					  <view class="flex-col items-center text-wrapper_1" :class="{disabled: isSubmitted}" @tap="$tools.throttle(submit)"><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 couponList" :key="idx"
						  @tap="tapCoupon(idx)"
						>
							<view class="name clamp">{{item.title}}</view>
							<view class="tips">
								<text class="stxt">消费金额</text>
								<text class="mtxt">{{item.handel_des}}</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 {
			id:'', //盲盒id
			shopId:'', //店铺id
			info:{},
			stock: 1000000,
			number: 1,
			
			couponList: [], //优惠券列表
			useCouponIndex: -1,
			coupon_price: 0.0, //优惠券金额
			total: 0.0 ,//总额
			realTotal:0.0,//实付金额
			
			startdate: '',
			enddate: '2042-05-30 23:59',
			show_time:'', //自提时间
			
			address:{},
			
			remark:'',
			pay_type: '', //1=余额支付,2微信支付
		};
	},
	async onLoad(e) {
		let date = new Date();
		this.startdate = this.$tools.handleDateTime(date);
		this.id =e.id;
		this.shopId = e.shopId;
		await this.getInfo();
		this.number = 1;
		this.stock = this.info.num;
		this.calcTotal();
	},
	methods: {
		async getInfo(){
			let sendData={
				goods_id:this.id,
				lng: this.addrInfo.address ? this.addrInfo.address_lng : '',
				lat: this.addrInfo.address ? this.addrInfo.address_lat : '',
			}
			let res = await this.$request('goods.info',sendData);
			this.info = res.data.goods_info;
		},
		//数量
		async numberChange(data) {
			this.number = data.number;
			this.calcTotal();
		},
		makePhone(){
			uni.makePhoneCall({
				phoneNumber: this.info.shop_mobile
			})
		},
		// 计算价格
		calcTotal() {
			let price = parseFloat(this.info.shop_price).toFixed(2);
			let number = this.number; // 产品数量
			this.total = price * number;
			this.realTotal = price * number;
			// 检查当前优惠券是否满足使用条件
			this.coupon_price = 0.0;
			if (this.useCouponIndex != -1 && this.couponList && this.couponList[this.useCouponIndex]) {
				this.coupon_price = this.couponList[this.useCouponIndex].money;
				if (this.total >= this.couponList[this.useCouponIndex].min_money) {
					this.realTotal = this.total - this.coupon_price;
				} else {
					this.$tools.msg('选中的优惠券不满足使用条件', 2000);
					this.useCouponIndex = -1; //取消选中的优惠券
					this.coupon_price = 0; //设置优惠金额为0
					this.realTotal = this.total - this.coupon_price;
				}
			}
		},
		getTime(e){
	    	this.show_time=e;
	    	// var date= new Date(e.replace(/-/g, "/"));
	    },
	    openTime(){
	    	this.$refs.timeRef.open();
	    },
		async showCoupons(){
			let sendData = {
				shop_id: this.shopId,
				total_amount: this.total,
			}
			let res = await this.$request('goods.shopCoupons',sendData);
			this.couponList = res.data;
			this.$refs.couponRef.show();
		},
		hideCoupons(){
			this.$refs.couponRef.hide();
		},
		tapCoupon(idx){
			this.hideCoupons();
			if(idx === this.useCouponIndex){
				return;
			}
			this.useCouponIndex = idx;
			this.calcTotal();
		},
		async submit(){
			if(!this.addrInfo.id){
				this.$tools.msg('请选择您的地址')
				return;
			}else if(! this.show_time){
				this.$tools.msg('请输入自提时间')
				return;
			}
			let sendData={
				id:this.id,
				shop_id:this.shopId,
				buy_number: this.number,
				self_hours:this.show_time,
				coupon_id: this.useCouponIndex !== -1 ? this.couponList[this.useCouponIndex].id : '',
				address_id: this.addrInfo.id,
				remark: this.remark,
			}
			let res=await this.$request('order.add',sendData);
			this.navTo('/pages/public/pay',{orderId:res.data.id})
		},
	}
};
</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;
	  border-bottom: 2rpx solid #eee;
	  &:last-child{
		  border: none;
	  }
	}
	.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;
	  max-width: 400rpx;
	  &.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;
	  &.active{
		  color: #ff342e;
	  }
	}
	.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;
	  &.disabled{
		  background-color: #eee;
	  }
	}
	.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>