9b597c77 by joe

更新预约日期

1 parent 8261d776
1 1
2 <template> 2 <template>
3 <div> 3 <div>
4 <auth :model="'suggest'" @onLogin="userLogin" ref="auth"></auth> 4 <auth :model="'suggest'" @onLogin="userLogin" ref="auth"></auth>
5 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> 5 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
6 6
7 <div class="reservation-container"> 7 <div class="reservation-container">
8 <div class="gird-g form"> 8 <div class="gird-g form">
9 <div class="pure-u-1 pure-u-md-1-2 form-item"> 9 <div class="pure-u-1 pure-u-md-1-2 form-item">
10 <div class="label"> 10 <div class="label">
11 <div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}} 11 <div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}}
12 </div> 12 </div>
13 <div class="ipt-wrap"> 13 <div class="ipt-wrap">
14 <input class="ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.name"> 14 <input class="ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.name">
15 </div> 15 </div>
16 <div class="validator" v-if="errorTips.e1.length > 0"> 16 <div class="validator" v-if="errorTips.e1.length > 0">
17 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}} 17 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
18 </div> 18 </div>
19 </div> 19 </div>
20 20
21 <div class="pure-u-1 pure-u-md-1-2 form-item"> 21 <div class="pure-u-1 pure-u-md-1-2 form-item">
22 <div class="label"> 22 <div class="label">
23 <div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}} 23 <div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}}
24 </div> 24 </div>
25 <div class="ipt-wrap"> 25 <div class="ipt-wrap">
26 <div class="down-arrow"></div> 26 <div class="down-arrow"></div>
27 <el-select class="ipt" v-model="data.contactType"> 27 <el-select class="ipt" v-model="data.contactType">
28 <el-option v-for="(item,index) in contactTypes" :key="index" :value="item.value" :label="item.name"></el-option> 28 <el-option v-for="(item,index) in contactTypes" :key="index" :value="item.value" :label="item.name"></el-option>
29 </el-select> 29 </el-select>
30 </div> 30 </div>
31 </div> 31 </div>
32 32
33 <div class="pure-u-1 pure-u-md-1-2 form-item"> 33 <div class="pure-u-1 pure-u-md-1-2 form-item">
34 <div class="label"> 34 <div class="label">
35 <div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}} 35 <div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}}
36 </div> 36 </div>
37 <div class="ipt-wrap"> 37 <div class="ipt-wrap">
38 <input class="ipt" :class="{err : errorTips.e3.length > 0}" type="text" v-model="data.contactMethod"> 38 <input class="ipt" :class="{err : errorTips.e3.length > 0}" type="text" v-model="data.contactMethod">
39 </div> 39 </div>
40 <div class="validator" v-if="errorTips.e3.length > 0"> 40 <div class="validator" v-if="errorTips.e3.length > 0">
41 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}} 41 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
42 </div> 42 </div>
43 </div> 43 </div>
44 44
45 <div class="pure-u-1 pure-u-md-1-2 form-item"> 45 <div class="pure-u-1 pure-u-md-1-2 form-item">
46 <div class="label"> 46 <div class="label">
47 <div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}} 47 <div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}}
48 </div> 48 </div>
49 <div class="ipt-wrap"> 49 <div class="ipt-wrap">
50 <div class="down-arrow"></div> 50 <div class="down-arrow"></div>
51 <el-select class="ipt" v-model="data.reservationType"> 51 <el-select class="ipt" v-model="data.reservationType">
52 <el-option v-for="(item,index) in reservationTypes" :key="index" :value="item.value" :label="item.name"></el-option> 52 <el-option v-for="(item,index) in reservationTypes" :key="index" :value="item.value" :label="item.name"></el-option>
53 </el-select> 53 </el-select>
54 </div> 54 </div>
55 </div> 55 </div>
56 56
57 <div class="pure-u-1 form-item"> 57 <div class="pure-u-1 form-item">
58 <div class="label"> 58 <div class="label">
59 <div class="icon"><img src="@/assets/images/reservation/icon-re-arrow-reservation.png"></div>{{$t('reservation.reservationRemark')}} 59 <div class="icon"><img src="@/assets/images/reservation/icon-re-arrow-reservation.png"></div>{{$t('reservation.reservationRemark')}}
60 </div> 60 </div>
61 <div class="ipt-wrap"> 61 <div class="ipt-wrap">
62 <textarea :placeholder="$t('reservation.reservationRemarkPlaceholder')" class="ipt textarea" :class="{err : errorTips.e5.length > 0}" v-model="data.instruction"></textarea> 62 <textarea :placeholder="$t('reservation.reservationRemarkPlaceholder')" class="ipt textarea" :class="{err : errorTips.e5.length > 0}" v-model="data.instruction"></textarea>
63 </div> 63 </div>
64 <div class="validator" v-if="errorTips.e5.length > 0"> 64 <div class="validator" v-if="errorTips.e5.length > 0">
65 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e5}} 65 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e5}}
66 </div> 66 </div>
67 </div> 67 </div>
68 68
69 <div class="pure-u-1 form-item form-item2"> 69 <div class="pure-u-1 form-item form-item2">
70 <div class="label"> 70 <div class="label">
71 <div class="icon"><img src="@/assets/images/reservation/icon-re-custom.png"></div>{{$t('reservation.hkClient')}} 71 <div class="icon"><img src="@/assets/images/reservation/icon-re-custom.png"></div>{{$t('reservation.hkClient')}}
72 </div> 72 </div>
73 <div class="cont"> 73 <div class="cont">
74 <div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('reservation.yes')}}</div> 74 <div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('reservation.yes')}}</div>
75 <div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('reservation.no')}}</div> 75 <div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('reservation.no')}}</div>
76 </div> 76 </div>
77 </div> 77 </div>
78 78
79 <!-- 联络时间 --> 79 <!-- 联络时间 -->
80 <div class="pure-u-1 form-item"> 80 <div class="pure-u-1 form-item">
81 <div class="form-item3"> 81 <div class="form-item3">
82 <div class="label"> 82 <div class="label">
83 <div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('reservation.contactTime')}} 83 <div class="icon"><img src="@/assets/images/reservation/icon-re-calendar.png"></div>{{$t('reservation.contactTime')}}
84 </div> 84 </div>
85 <div class="ipt-wrap" :class="{err:errorTips.e7.length>0}"> 85 <div class="ipt-wrap" :class="{err:errorTips.e7.length>0}">
86 <!-- <input class="ipt" type="date" v-model="data.contactDate" :class="{err : errorTips.e7.length > 0}"> --> 86 <!-- <input class="ipt" type="date" v-model="data.contactDate" :class="{err : errorTips.e7.length > 0}"> -->
87 <date-picker v-model="data.contactDate" :check="checkDate" :filtModel="['history']"></date-picker> 87 <date-picker v-model="data.contactDate" :check="checkDate" :filtModel="['history','holiday','today']"></date-picker>
88 </div> 88 </div>
89 <div class="validator" v-if="errorTips.e7.length > 0"> 89 <div class="validator" v-if="errorTips.e7.length > 0">
90 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e7}} 90 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e7}}
91 </div> 91 </div>
92 <div class="mt8"> 92 <div class="mt8">
93 <div class="label"> 93 <div class="label">
94 </div> 94 </div>
95 <!-- <div class="calendar"> 95 <!-- <div class="calendar">
96 <img src="@/assets/images/reservation/re-calendar.png"> 96 <img src="@/assets/images/reservation/re-calendar.png">
97 </div> --> 97 </div> -->
98 </div> 98 </div>
99 </div> 99 </div>
100 </div> 100 </div>
101 101
102 </div> 102 </div>
103 103
104 <div class="box notice"> 104 <div class="box notice">
105 <p class="notice-item text-jtf"> 105 <p class="notice-item text-jtf">
106 <img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice1')}} 106 <img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice1')}}
107 </p> 107 </p>
108 <p class="notice-item pointer" @click="checked = !checked"> 108 <p class="notice-item pointer" @click="checked = !checked">
109 <!-- <img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png"> 109 <!-- <img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png">
110 <img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> --> 110 <img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> -->
111 111
112 <img v-if="!checked" class="notice-item-icon" src="@/assets/images/login/uncheck.png"> 112 <img v-if="!checked" class="notice-item-icon" src="@/assets/images/login/uncheck.png">
113 <img v-else class="notice-item-icon" src="@/assets/images/login/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice2')}} 113 <img v-else class="notice-item-icon" src="@/assets/images/login/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice2')}}
114 </p> 114 </p>
115 </div> 115 </div>
116 116
117 <div class="submit-btn flex-center" :class="{disabled : submitBtnDisabled}" @click="submitHandler"> 117 <div class="submit-btn flex-center" :class="{disabled : submitBtnDisabled}" @click="submitHandler">
118 <van-loading v-if="isSubmit" /> 118 <van-loading v-if="isSubmit" />
119 <span>{{$t('reservation.submitBtn')}}</span> 119 <span>{{$t('reservation.submitBtn')}}</span>
120 </div> 120 </div>
121 <div class="flex-center validator" v-if="errorTips.e8.length > 0"> 121 <div class="flex-center validator" v-if="errorTips.e8.length > 0">
122 <img src="@/assets/images/common/icon-notice.png" alt=""> &nbsp; {{errorTips.e8}} 122 <img src="@/assets/images/common/icon-notice.png" alt=""> &nbsp; {{errorTips.e8}}
123 </div> 123 </div>
124 124
125 </div> 125 </div>
126 </div> 126 </div>
127 </template> 127 </template>
128 128
129 <script src="./reservation.js"></script> 129 <script src="./reservation.js"></script>
......