changshu_WeChat/components/DateSelector.vue

<template>
    <view>
        <!-- 使用日期 -->
        <view class="date-box">
            <view class="dateList" id="dateList">
                <view class="date flex-column" v-for="(item,index) in dateList" :key="index" :id="'dateItem_' + index"
                      :class="index == dateIndex && item.stock!=0?'active':''" @click="handleChangeDate(item,index)">
                    <view class="weekDay">{{ShowDateDay(new Date(item.date).getDay())}}</view>
                    <view class="dateNum">{{getDatePrefix(item)}}</view>
                    <view class="price" v-if="item.stock != 0">{{item.money == 0? '免费' : '￥' + (item.money / 100)}}</view>
                    <view class="noPrice" v-if="item.stock == 0">售罄</view>
                </view>
                <view class="more flex-around" @click="handleOpenCal">
                    <view>更多<br>日期</view>
                    <view>></view>
                </view>
            </view>
        </view>
        <view class="stock-box" v-if="stockList && stockList.length > 0">
            <view v-for="(item,index) in stockList" :key="index"
                  :class="['stockItem', stockIndex == index && item.stock_number>0?'active': item.stock_number == 0? 'disabled' : '']"
                  @click="handleChangeStock(item,index)">
                {{item.start_time}}-{{item.end_time}}
                {{item.stock_number == 0? '无票' : '有票'}}
            </view>
        </view>
    </view>
</template>

<script>
import moment from "moment";
export default {
    props: {
        dateList: {
            type: Array,
            default: () => []
        },
        dateIndex: {
            type: Number,
            default: null
        },
        stockList: {
            type: Array,
            default: () => []
        },
        stockIndex: {
            type: Number,
            default: null
        }
    },
	data() {
		return {
			
		}
	},
	methods: {
		// 日期前加今天明天
		getDatePrefix(item) {
			if (!item) {
				proxy.$toast('价格日历有误')
				return ''
			}
			let date = item.date
			let nowDate = moment(new Date()).format('yyyy-MM-DD')
			let tomDate = moment(new Date(new Date().getTime() + 24 * 60 * 60 * 1000)).format('yyyy-MM-DD')
			let aftDate = moment(new Date(new Date().getTime() + 24 * 60 * 60 * 1000 * 2)).format('yyyy-MM-DD')
			let pre = ''
			if (date == nowDate) pre = '今天'
			else if (date == tomDate) pre = '明天'
			else if (date == aftDate) pre = '后天'
			return date.substring(5, 10)
		},
		handleChangeDate(item, index) {
			if (item.stock != 0) {
				let data = {
					item, index
				}
				this.$emit('changeDate', data);
			}
		},
		handleChangeStock(item, index) {
			if (item.stock_number != 0) {
				let data = {
					item, index
				}
				this.$emit('changeStock', data);
			}
		},
		handleOpenCal() {
			this.$emit('openCal');
		}
	}
}
</script>

<style lang="scss" scoped>
.date-box{
    height: auto;
    position: relative;

  .ticket-title{
        padding-left: 20rpx;
        border-bottom: 1rpx solid #CCCCCC;
        font-size: 33rpx;
        font-family: PingFangSC;
        font-weight: 500;
        color: #000000;
        height: 113rpx;
        line-height: 113rpx;
    }

  .dateList{
        height: 164rpx;
        text-align: center;
        display: flex;
        align-items: center;
        padding-right: 120rpx;
        overflow-x: auto;

      .date{
            width: 120rpx;
            height: 133rpx;
            border-radius: 10rpx;
            justify-content: space-around;
            background: #F5F5F5;
            margin-right: 15rpx;
            flex-shrink: 0;
            font-weight: 500;
            font-size: 27rpx;
            color: #000000;

          .dateNum{

            }
          .price{
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #EE3E3B;
            }
          .noPrice{
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #666666;
            }
        }

      .active{
            background: #00AEA0;
            color: #FFFFFF;
            border: none;
          .dateNum{
                color: #FFFFFF;
            }
          .price{
                color: #FFFFFF;
            }
        }

      .more{
            width: 120rpx;
            height: 164rpx;
            font-weight: bold;
            font-size: 27rpx;
            color: #00AEA0;
            position: absolute;
            right: -5rpx;
            padding-left: 20rpx;
            background-color: #fff;
        }
    }
  .dateList::-webkit-scrollbar {
        display: none;
    }
}

.stock-box{
    margin-top: 34rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

  .stockItem{
        width: 340rpx;
        height: 64rpx;
        background: #F5F5F5;
        border-radius: 10rpx;
        text-align: center;
        line-height: 64rpx;
        font-weight: 400;
        font-size: 25rpx;
        color: #000000;
        margin-bottom: 20rpx;
    }

  .active{
        background: #00AEA0;
        color: #FFFFFF;
    }
  .disabled{
        color: #999999;
    }
}
</style>