tourist/subPackages/line/order.vue

<template>
	<view class="bg">
		<view class="date-all-box">
			<view class="month-box">
			    <view @click="changeMonth(index)" :class="'month-item' + (monthIndex == index ? ' active' : '')"
				 v-for="(item, index) in months" :key="index" v-if="emptyList[index].isShow">
			        {{ item }}月
			    </view>
			</view>
			
			<view class="day-header">
			    <view class="day-header-item">日</view>
			    <view class="day-header-item">一</view>
			    <view class="day-header-item">二</view>
			    <view class="day-header-item">三</view>
			    <view class="day-header-item">四</view>
			    <view class="day-header-item">五</view>
			    <view class="day-header-item">六</view>
			</view>
			
			<view class="day-box" v-if="selectDate">
				<view class="day-item" v-for="(item, index) in emptyList[monthIndex].empty" :key="index">
				    <view class="date-item-in">
				        <view class="date-num"></view>
				        <view class="date-price-place"></view>
				    </view>
				</view>
				<view
				    :class="'day-item' + (selectDate['selectMonth'] == months[monthIndex] && selectDate['selectDate'] == index + 1 ? ' active' : '')"
				    v-for="(item, index) in emptyList[monthIndex].days" :key="index"
				>
				    <view class="date-item-in" @click="selectDateFun(index + 1)">
				        <view
				            :class="
				                'date-num' + (prices[months[monthIndex] + '-' + (index + 1)] && prices[months[monthIndex] + '-' + (index + 1)].product_price != null ? ' active' : '')
				            "
				        >
				            {{ index + 1 >= 10 ? index + 1 : '0' + (index + 1) }}
				        </view>
				        <view
				            class="price"
				            v-if="
				                prices[months[monthIndex] + '-' + (index + 1)] &&
				                prices[months[monthIndex] + '-' + (index + 1)].product_price != null &&
				                prices[months[monthIndex] + '-' + (index + 1)].store != null
				            "
				        >
				            ￥{{ prices[months[monthIndex] + '-' + (index + 1)].m_price / 100 }}
				        </view>
				        <view class="date-price-place" v-else-if="prices[months[monthIndex] + '-' + (index + 1)] && prices[months[monthIndex] + '-' + (index + 1)].store == 0">
				            售罄
				        </view>
				        <view class="date-price-place" v-else></view>
				    </view>
				</view>
			</view>
		</view>
		
		<view class="box" v-for="(item, index) in sku" :key="index">
		    <view class="box-top">
		        <view class="box-title">{{ item.title }}</view>
		        <view class="box-tip text-overflow">{{ item.sku_type_info }}</view>
		        <view :class="'iconfont' + (nums[index] == 0 ? ' disable' : '')" @click="minus(index)">-</view>
		        <view class="number">{{ nums[index] }}</view>
		        <view :class="'iconfont' + (nums[index] == selectDate['info'][index].store ? ' disable' : '')" @click="add(index)">+</view>
		    </view>
		
		    <view class="single-price" v-if="selectDate">{{ selectDate['info'][index].money / 100 }}</view>
		</view>
		
		<view class="fixed-bottom">
		    <text class="fixed-text">合计：</text>
		    <view class="price">{{ totalPrice() / 100 }}</view>
		    <view class="btn" @tap="order">下一步</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				months: [],
				monthIndex: 0,
				productInfo: null,
				sku: [],
				nums: [],
				selectDate: null,
				price: 0,
				prices: {},
				emptyList: [
					{
						empty: 0,
						days: 0,
						isShow: false
					},
					{
						empty: 0,
						days: 0,
						isShow: false
					},
					{
						empty: 0,
						days: 0,
						isShow: false
					},
					{
						empty: 0,
						days: 0,
						isShow: false
					},
					{
						empty: 0,
						days: 0,
						isShow: false
					},
					{
						empty: 0,
						days: 0,
						isShow: false
					}
				],
				years: []
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getSku()
			this.initDate()
		},
		methods: {
			// 下一步
			order() {
				let selectDate = this.selectDate;
				let sku = this.sku;
				let nums = this.nums;
				let allNum = 0;
				if (!selectDate) {
				    uni.showToast({
				        title: '请先选择日期',
				        icon: 'none'
				    });
				    return;
				}
				sku.map((item, index) => {
				    item.num = nums[index];
				    allNum = allNum + nums[index];
				    item.price = selectDate.info[index].money;
				});
				if (allNum == 0) {
				    uni.showToast({
				        title: '至少选择一个规格',
				        icon: 'none'
				    });
				    return;
				}
				
				let data = {
					sku: sku,
					selectDate: selectDate,
					price: this.totalPrice()
				}
				this.$store.commit('changeLineInfo',data)
				
				uni.navigateTo({
					url: '/subPackages/line/orders'
				})
			},
			// 减少数量
			minus(index) {
			    if (!this.selectDate) {
			        uni.showToast({
			            title: '请先选择出行日期',
			            icon: 'none'
			        });
			        return;
			    }
			    let nums = this.nums;
			    if (nums[index] == 0) {
			        return;
			    }
			    nums[index] = nums[index] - 1;
				this.nums = nums
				this.$forceUpdate()
			},
			// 添加数量
			add(index) {
				if (!this.selectDate) {
				    uni.showToast({
				        title: '请先选择出行日期',
				        icon: 'none'
				    });
				    return;
				}
			    let nums = this.nums;
			    let sku = this.sku;
			    
			    if (this.selectDate.info[index].store == nums[index]) {
					uni.showToast({
					    title: '无库存',
					    icon: 'none'
					});
			        return;
			    }
			    nums[index] = nums[index] + 1;
				this.nums = nums
				this.$forceUpdate()
			},
			// 切换月份
			changeMonth(index) {
				this.monthIndex = index
			},
			// 选择日期
			selectDateFun(item) {
			    // 选择日期
			    let selectMonth = this.months[this.monthIndex];
			    if (!selectMonth) {
			        return;
			    }
			    let info = this.prices[selectMonth + '-' + item];
			    if (info && info.product_price && info.product_price !== null && info.store != 0) {
			        info.selectMonth = selectMonth;
			        info.selectDate = item;
					
					this.selectDate = info;
			    }
			},
			// 获取产品下的规格
			getSku() {
				this.Post({
					goods_id: this.id
				},'/api/goods/getSpecificationsByGoodsId').then(res => {
					let nums = [];
					res.data.map((item) => {
					    nums.push(0);
					});
					this.sku = res.data,
					this.nums = nums
				})
			},
			// 总价
			totalPrice() {
				let selectDate = this.selectDate;
				let nums = this.nums;
				let price = 0;
				nums.map((num, index) => {
				    price = price + num * selectDate.info[index].money;
				});
				return price
			},
			initDate() {
				let today = new Date();
				let month = today.getMonth() + 1;
				this.months[0] = today.getMonth() + 1
				for (let i = 1; i < 6; i++) {
					this.months[i] = (month + i) % 12 == 0 ? 12 : (month + i) % 12
				}
				
				let year1 = today.getFullYear();
				let year2 = this.months[0] < this.months[1] ? year1 : year1 + 1
				let year3 = this.months[1] < this.months[2] ? year2 : year2 + 1
				let year4 = this.months[2] < this.months[3] ? year3 : year3 + 1
				let year5 = this.months[3] < this.months[4] ? year4 : year4 + 1
				let year6 = this.months[4] < this.months[5] ? year5 : year5 + 1
				
				this.years = [year1,year2,year3,year4,year5,year6]
				
				for (let i = 0; i < 6; i++) {
					this.emptyList[i].empty = this.getMonthDays(this.months[i], this.years[i])[1]
					this.emptyList[i].days = this.getMonthDays(this.months[i], this.years[i])[0]
				}
				
				// 是否展示日历
				this.Post({
					goods_id: this.id,
					start_date: this.formatDate(today),
					end_date: this.years[5] + '-' + this.months[5] + '-' + this.emptyList[5].days
				},'/api/goods/getStoreByMonth').then(res => {
					let data = res.data
					for (let i = 0; i < 6; i++) {
						this.emptyList[i].isShow = data[i].store > 0 ? true : false
					}
				})
				
				let selectDate;
			    let selectMonth;
				this.Post({
					goods_id: this.id,
					start_date: this.formatDate(today),
					end_date: this.years[5] + '-' + this.months[5] + '-' + this.emptyList[5].days
				},'/api/goods/get_product_sku_price_by_date').then(res => {
					let prices = {};
					res.data.map((item) => {
					    // 给规格排序
					    for (let i = 0; i < item.info.length; i++) {
					        for (let j = i + 1; j < item.info.length; j++) {
					            if (item.info[i].sku_info.id > item.info[j].sku_info.id) {
					                [item.info[i], item.info[j]] = [item.info[j], item.info[i]];
					            }
					        }
					    }
					    let store = 0;
					    item.info.map((i) => {
					        store = store + i.store;
					    });
					    item.store = store;
					    if (item.store != 0) {
					        let date = item.date.split('-').splice(1, 2);
					        let newDate = [];
					        date.map((d) => {
					            d = parseInt(d);
					            newDate.push(d);
					        });
					        if (!selectDate) {
					            selectDate = newDate[1];
					            selectMonth = newDate[0];
					        }
					        prices[newDate.join('-')] = item;
					    }
					});
					this.prices = prices
					if (!selectDate) {
					    return;
					}
					let info = prices[selectMonth + '-' + selectDate];
					info.selectMonth = selectMonth;
					info.selectDate = selectDate;
					this.selectDate = info;
					this.monthIndex = this.emptyList.findIndex(i => i.isShow == true)
				})
			},
			// 获取这个月有几天
			getMonthDays(month, year) {
			    let date = new Date(year + '/' + month + '/01').getDay();
			    if (month == 2) {
			        if ((year % 100 !== 0 && year % 4 == 0) || year % 400 == 0) {
			            return [29, date];
			        } else {
			            return [28, date];
			        }
			    } else if ((month < 8 && month % 2 == 1) || (month >= 8 && month % 2 == 0)) {
			        return [31, date];
			    } else {
			        return [30, date];
			    }
			},
			formatDate(date){
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return [year, month, day].join('-');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
	    background: #f6f6f6;
		padding-bottom: 200rpx;
	}
	
	.date-all-box {
	    margin: 0 25rpx;
		
		.month-box {
		    padding: 0 20rpx;
		    height: 116rpx;
		    display: flex;
		    border-bottom: 1rpx solid #ccc;
		    align-items: center;
			
			.month-item {
			    margin-right: 70rpx;
			    font-size: 33rpx;
			    color: #000;
			    font-weight: 500;
			    line-height: 116rpx;
			    position: relative;
				white-space: nowrap;
			}
			.month-item.active::after {
			    content: '1';
			    display: block;
			    font-size: 0;
			    position: absolute;
			    left: 0;
			    right: 0;
			    height: 8rpx;
			    background: #96684F;
			    border-radius: 4rpx;
			    bottom: 0;
			}
		}
		
		.day-header {
		    padding-top: 40rpx;
		    line-height: 45rpx;
		    font-size: 29rpx;
		    color: #000;
		    display: flex;
		    align-items: center;
		    flex-wrap: wrap;
		    margin-bottom: 50rpx;
			
			.day-header-item {
			    width: calc(690rpx / 7);
			    text-align: center;
			    flex-shrink: 0;
			}
		}
		
		.day-box {
		    display: flex;
		    align-items: center;
		    font-size: 35rpx;
		    flex-wrap: wrap;
		    color: #999;
			
			.day-item {
				width: calc(690rpx / 7);
				text-align: center;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 30rpx;
				
				.date-item-in {
				    width: 98rpx;
				    display: flex;
				    align-items: center;
				    justify-content: space-around;
				    flex-direction: column;
				    height: 98rpx;
					
					.date-num {
					    line-height: 40rpx;
					}
					.date-num.active {
					    color: #000;
					}
					
					.price {
					    font-size: 23rpx;
					    color: #D62828;
					    line-height: 20rpx;
					}
					.price::after {
					    content: '起';
					    font-size: 17rpx;
					}
					
					.date-price-place {
					    height: 20rpx;
					}
				}
			}
			.day-item.active {
			    .date-item-in {
			        background: #96684F;
			        color: #fff;
			        border-radius: 7rpx;
					
					.price {
					    color: #fff;
					}
					
					.date-num {
					    color: #fff;
					}
			    }
			}
		}
	}
	
	.box {
	    background: white;
	    margin: 25rpx;
	    background: #ffffff;
	    border-radius: 9rpx;
	    padding: 29rpx 20rpx;
		
		.box-top {
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    line-height: 50rpx;
		    font-size: 28rpx;
			font-weight: bold;
		    color: #666;
			
			.box-title {
			    font-size: 31rpx;
				font-weight: bold;
			    color: #000;
			}
			
			.box-tip {
			    flex: 1;
			    margin-left: 30rpx;
			}
			
			.iconfont {
			    color: #000;
			    font-size: 34rpx;
				width: 50rpx;
				text-align: center;
			}
			
			.iconfont.disable {
			    color: #666;
			}
			
			.number {
			    width: 67rpx;
			    height: 50rpx;
			    background: #f0f0f0;
			    border-radius: 7rpx;
			    text-align: center;
			    margin: 0 10rpx;
			}
		}
		
		.single-price {
		    font-size: 33rpx;
		    color: #d62828;
		    text-align: right;
		    margin-top: 20rpx;
			font-weight: bold;
		}
		.single-price::before {
		    content: '￥';
		    font-size: 24rpx;
		    margin-right: 4rpx;
		}
	}
	
	.fixed-bottom {
	    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    height: 148rpx;
	    background: white;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 0 26rpx;
	    box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
	    z-index: 999;
		
		.fixed-text {
		    flex-shrink: 0;
		    font-size: 32rpx;
		}
		
		.price {
		    flex: 1;
		    font-size: 40rpx;
		    color: #D62828;
		    font-weight: bold;
		}
		.price::before {
			font-weight: bold;
			font-size: 24rpx;
			content: '￥';
		}
		
		.btn {
		    width: 233rpx;
		    text-align: center;
		    line-height: 73rpx;
		    background: #DC2525;
			border-radius: 11rpx;
		    color: #fff;
		    font-weight: bold;
		    font-size: 32rpx;
		    margin-left: 30rpx;
		}
	}
</style>