更新预约日期
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