300 lines
8.9 KiB
Vue
300 lines
8.9 KiB
Vue
<template>
|
||
<view class="content column">
|
||
|
||
<text style="margin-top: 100rpx; text-align: center;">发起预约</text>
|
||
|
||
|
||
<view class=""
|
||
style="width: 90%; background-color: #F2F3F5; border-radius: 10rpx; margin: 30rpx auto 0; display: flex; justify-content: center;">
|
||
<view class="column" style="width: 95%; margin-bottom: 20rpx;">
|
||
|
||
<text style="font-size: 26rpx; margin-bottom: 10rpx; margin-top: 20rpx;">开始时间</text>
|
||
<uni-datetime-picker style="width: 50px;" type="datetime" v-model="startTimeStr" @change="changeLog" />
|
||
|
||
<text style="font-size: 26rpx; margin-bottom: 10rpx; margin-top: 30rpx;">结束时间</text>
|
||
<uni-datetime-picker style="margin-top: 10rpx;" type="datetime" v-model="endTimeStr"
|
||
@change="changeLog2" />
|
||
<text v-if="hours!=''" style="font-size: 26rpx; margin-top: 20rpx;">合计：{{hours}}小时{{minutes}}分钟</text>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<view class="column" style="width: 90%; border-radius: 10rpx; margin: 40rpx auto 0; background-color: #F2F3F5;">
|
||
<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">组局名称</text>
|
||
|
||
<view class=""
|
||
style="width: 90%; background-color: white; margin-left: 20rpx; margin-top: 20rpx; height: 70rpx; display: flex; align-items: center; padding-left: 20rpx;">
|
||
<input class="uni-input" placeholder="请输入组局名称" style="font-size: 24rpx;" />
|
||
</view>
|
||
|
||
<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">房间</text>
|
||
|
||
<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
|
||
<uni-data-select v-model="roomValue" :localdata="range" @change="change"></uni-data-select>
|
||
</view>
|
||
|
||
<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">人数</text>
|
||
|
||
<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
|
||
<uni-data-select v-model="peopleValue" :localdata="peopleRange" @change="change"></uni-data-select>
|
||
</view>
|
||
|
||
<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">玩法类型</text>
|
||
|
||
<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
|
||
<uni-data-select v-model="peopleValue" :localdata="peopleRange" @change="change"></uni-data-select>
|
||
</view>
|
||
|
||
<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">具体规则</text>
|
||
|
||
<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
|
||
<uni-data-select v-model="peopleValue" :localdata="peopleRange" @change="change"></uni-data-select>
|
||
</view>
|
||
|
||
<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">其他补充</text>
|
||
<view class=""
|
||
style="width: 90%; background-color: white; margin-left: 20rpx; margin-top: 20rpx; margin-bottom: 20rpx; height: 70rpx; display: flex; align-items: center; padding-left: 20rpx;">
|
||
<input class="uni-input" placeholder="请输入补充信息" style="font-size: 24rpx;" />
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="column" style="width: 90%; border-radius: 10rpx; margin: 40rpx auto 0; background-color: #F2F3F5;">
|
||
|
||
<view class="row" style="margin-top: 20rpx; margin-left: 20rpx;">
|
||
<view class="" style="width: 120rpx; font-size: 26rpx; align-items: center;">
|
||
是否禁烟
|
||
</view>
|
||
|
||
<radio-group class="" style="margin-left: 50rpx;">
|
||
<label class="" style="font-size: 24rpx;">
|
||
<radio value="r1" color="#007aff" style="transform:scale(0.7);" :checked="true" />禁烟
|
||
</label>
|
||
<label class="" style="font-size: 24rpx;">
|
||
<radio value="r2" color="#007aff" style="transform:scale(0.7);" />不禁烟
|
||
</label>
|
||
|
||
</radio-group>
|
||
|
||
</view>
|
||
|
||
<view class="row" style="margin-top: 20rpx; margin-left: 20rpx;">
|
||
<view class="" style="width: 120rpx; font-size: 26rpx; align-items: center;">
|
||
性别
|
||
</view>
|
||
<radio-group class="" style="margin-left: 50rpx;">
|
||
<label class="" style="font-size: 24rpx;">
|
||
<radio value="r1" color="#007aff" style="transform:scale(0.7);" :checked="true" />不限
|
||
</label>
|
||
<label class="" style="font-size: 24rpx;">
|
||
<radio value="r2" color="#007aff" style="transform:scale(0.7);" />男
|
||
</label>
|
||
<label class="" style="font-size: 24rpx;">
|
||
<radio value="r3" color="#007aff" style="transform:scale(0.7);" />女
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
|
||
<view class="row" style="margin-top: 20rpx; margin-left: 20rpx; margin-bottom: 20rpx;">
|
||
<view class="" style="width: 120rpx; font-size: 26rpx; align-items: center;">
|
||
信誉
|
||
</view>
|
||
|
||
<view class="counter-container">
|
||
<!-- 减号按钮 -->
|
||
<view class="" @click="decrement" :disabled="currentValue <= 0">
|
||
<uni-icons type="minus" size="24" color="#666" />
|
||
</view>
|
||
|
||
<!-- 数值显示 -->
|
||
<view class="counter-value">
|
||
{{ currentValue.toFixed(1) }}
|
||
</view>
|
||
|
||
<!-- 加号按钮 -->
|
||
<view class="" @click="increment" :disabled="currentValue >= 5">
|
||
<uni-icons type="plus" size="24" color="#666" />
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
|
||
</view>
|
||
|
||
<view class="column" style="width: 90%; border-radius: 10rpx; margin: 20rpx auto 0; background-color: #F2F3F5;">
|
||
|
||
<view class="row" style="margin-top: 20rpx; margin-left: 20rpx;">
|
||
<view class="" style=" font-size: 26rpx; align-items: center;">
|
||
鸽子费（保证金）
|
||
</view>
|
||
<radio-group class="" style="margin-left: 50rpx;">
|
||
<label class="" style="font-size: 24rpx;">
|
||
<radio value="r1" color="#007aff" style="transform:scale(0.7);" :checked="true" />0元
|
||
</label>
|
||
<label class="" style="font-size: 24rpx;">
|
||
<radio value="r2" color="#007aff" style="transform:scale(0.7);" />5元
|
||
</label>
|
||
<label class="" style="font-size: 24rpx;">
|
||
<radio value="r3" color="#007aff" style="transform:scale(0.7);" />10元
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
|
||
<text
|
||
style="font-size: 24rpx; margin-left: 20rpx; margin-bottom: 20rpx;">除发起者外，其他参与人需缴纳鸽子费。若有参与者在预约后没有赴约，其鸽子费由在场的所有人平分。组局成功或失败后鸽子费将全额返还。</text>
|
||
</view>
|
||
|
||
<view class="center" style="width: 90%; border-radius: 10rpx; margin: 20rpx auto 0; background-color: #1989FA;">
|
||
<text style="margin: 20rpx; color: white;">发起预约</text>
|
||
</view>
|
||
|
||
<view class="center" style="width: 90%; margin: 20rpx auto 20rpx;">
|
||
<text style="color: #979797; font-size: 24rpx;">组局成功后，发起者可通过店员领取线下红包</text>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
startTimeStr: "",
|
||
endTimeStr: "",
|
||
hours: "",
|
||
minutes: "",
|
||
roomValue: "",
|
||
peopleValue: "",
|
||
range: [{
|
||
"value": 0,
|
||
"text": "808号-大包，30元/小时",
|
||
}, {
|
||
"value": 1,
|
||
"text": "807号-大包，30元/小时",
|
||
}, {
|
||
"value": 2,
|
||
"text": "806号-大包，30元/小时",
|
||
}, {
|
||
"value": 3,
|
||
"text": "805号-大包，30元/小时",
|
||
}, ],
|
||
|
||
peopleRange: [{
|
||
"value": 0,
|
||
"text": "1人",
|
||
}, {
|
||
"value": 1,
|
||
"text": "2人",
|
||
}, {
|
||
"value": 2,
|
||
"text": "3人",
|
||
}, {
|
||
"value": 3,
|
||
"text": "4人",
|
||
}, ],
|
||
currentValue: 0,
|
||
// 增加0.5
|
||
increment() {
|
||
if (this.currentValue < 5) {
|
||
this.currentValue += 0.5;
|
||
// 确保不会超过最大值5
|
||
if (this.currentValue > 5) {
|
||
this.currentValue = 5;
|
||
}
|
||
}
|
||
},
|
||
|
||
// 减少0.5
|
||
decrement() {
|
||
if (this.currentValue > 0) {
|
||
this.currentValue -= 0.5;
|
||
// 确保不会小于0
|
||
if (this.currentValue < 0) {
|
||
this.currentValue = 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
changeLog(e) {
|
||
console.log('change事件:', e);
|
||
this.setTime();
|
||
},
|
||
changeLog2(e) {
|
||
console.log('change事件2:', e);
|
||
this.setTime();
|
||
},
|
||
|
||
|
||
setTime() {
|
||
|
||
if (this.startTimeStr == "" || this.endTimeStr == "") {
|
||
return;
|
||
}
|
||
|
||
// 转换为Date对象
|
||
const startTime = new Date(this.startTimeStr.replace(/-/g, '/'));
|
||
const endTime = new Date(this.endTimeStr.replace(/-/g, '/'));
|
||
|
||
// 计算毫秒差
|
||
const timeDiff = endTime - startTime;
|
||
|
||
// 转换为总分钟数
|
||
const totalMinutes = Math.floor(timeDiff / 1000 / 60);
|
||
|
||
// 计算小时和分钟
|
||
this.hours = Math.floor(totalMinutes / 60);
|
||
this.minutes = totalMinutes % 60;
|
||
|
||
console.log(`两个时间相差 ${this.hours} 小时 ${this.minutes} 分钟`);
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
width: 100%;
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.counter-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 50rpx;
|
||
}
|
||
|
||
.counter-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
padding: 0;
|
||
line-height: 1;
|
||
}
|
||
|
||
.minus-btn {
|
||
background-color: #f5f5f5;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
|
||
.counter-value {
|
||
width: 120rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
</style> |