更新预约日期
Showing
1 changed file
with
109 additions
and
109 deletions
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"> {{$t('reservation.notice1')}} | 106 | <img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> {{$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"> {{$t('reservation.notice2')}} | 113 | <img v-else class="notice-item-icon" src="@/assets/images/login/check.png"> {{$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=""> {{errorTips.e8}} | 122 | <img src="@/assets/images/common/icon-notice.png" alt=""> {{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> | ... | ... |
-
Please register or sign in to post a comment