You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
575 lines
14 KiB
575 lines
14 KiB
<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: #248BAA;
|
|
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: #F84A56;
|
|
line-height: 20rpx;
|
|
}
|
|
.price::after {
|
|
content: '起';
|
|
font-size: 17rpx;
|
|
}
|
|
|
|
.date-price-place {
|
|
height: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
.day-item.active {
|
|
.date-item-in {
|
|
background: #248BAA;
|
|
color: #fff;
|
|
border-radius: 7rpx;
|
|
|
|
.price {
|
|
color: #fff;
|
|
}
|
|
|
|
.date-num {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.box {
|
|
background: white;
|
|
margin: 25rpx;
|
|
background: #ffffff;
|
|
border-radius: 9rpx;
|
|
padding: 35rpx 20rpx;
|
|
|
|
.box-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
line-height: 50rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
|
|
.box-title {
|
|
font-size: 31rpx;
|
|
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 23rpx;
|
|
}
|
|
}
|
|
|
|
.single-price {
|
|
font-size: 33rpx;
|
|
color: #d62828;
|
|
text-align: right;
|
|
margin-top: 20rpx;
|
|
}
|
|
.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-left: 26rpx;
|
|
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
|
|
z-index: 999;
|
|
|
|
.fixed-text {
|
|
flex-shrink: 0;
|
|
font-size: 29rpx;
|
|
}
|
|
|
|
.price {
|
|
flex: 1;
|
|
font-size: 36rpx;
|
|
color: #F84A56;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.btn {
|
|
width: 293rpx;
|
|
text-align: center;
|
|
line-height: 87rpx;
|
|
background: linear-gradient(-90deg, #F84A56, #FF9834);
|
|
border-radius: 43rpx;
|
|
color: #fff;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
margin-left: 30rpx;
|
|
}
|
|
}
|
|
</style>
|