come.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699
  1. <template>
  2. <view class="yybox">
  3. <nav-bar navtit="来访预约" rtype="come" @getDetail="getSerch"></nav-bar>
  4. <view class="yydet">
  5. <!-- 顶部选填情况 -->
  6. <view class="flex0">
  7. <step-bar :steps="barsteps" :datainfo="datainfo" :fixeda="fixedflag" ></step-bar>
  8. </view>
  9. <view class="ytbox">
  10. <uni-forms ref="form" class="ytforms" :rules="rules" :modelValue="datainfo">
  11. <view v-for="(ite,idx) in steps" :key="idx" @click="getInFn(ite.val)">
  12. <view class="ytsbox">
  13. <view class="yttit">{{ite.tit}}</view>
  14. <block v-if="ite.val==0" >
  15. <!-- 日历 :configWeek="configWeek" :configHoliday="configHoliday" :firstDayOfWeek="firstDayOfWeek" :signList="signList" @monthChange="monthChange" @getIsSelDayFn="getIsSelDayFn" @shrinkClick="shrinkClick"-->
  16. <lunc-calendar ref="calendar" :configWeek="configWeek" :showLunar="false" :showMonthBg="false" :showShrink="true"
  17. @dayChange="dayChange" weekType="" >
  18. </lunc-calendar>
  19. <view class="ytime">
  20. <view class="ytimea">
  21. <view class="ytimel">选择时间</view>
  22. <view class="lread" @click="getTimeFn(1)">
  23. <view class="lreadl">
  24. <image :src="choseimg" v-if="timeType==1"></image>
  25. <image :src="nchoseimg" v-else></image>
  26. </view>
  27. <view class="tit">上午</text></view>
  28. </view>
  29. <view class="lread" @click="getTimeFn(2)">
  30. <view class="lreadl">
  31. <image :src="choseimg" v-if="timeType==2"></image>
  32. <image :src="nchoseimg" v-else></image>
  33. </view>
  34. <view class="tit">下午</text></view>
  35. </view>
  36. </view>
  37. <view class="ytimeb">
  38. <view class="list" :class="[ite.reservatConfigStatus=='Y'?'box3':'box1',timeid==ite.reservatConfigTimeId?'box2':'']" v-for="(ite,idx) in timeList" :key="idx" @click="getChose(ite)">
  39. <view class="tit">{{typeFn(ite.reservatConfigTimeBegin)}}-{{typeFn(ite.reservatConfigTimeEnd)}}</view>
  40. <!-- <view class="txt">{{ite.reservatConfigStatus=='Y'?'可预约':'已约满'}}</view> -->
  41. </view>
  42. </view>
  43. </view>
  44. <!-- <view class="ytime">
  45. <view class="ytimel">选择时间</view>
  46. <view class="ytst flext">
  47. <image :src="tipimg"></image>工作日上午
  48. <block v-if="amBegin">{{amBegin}}-{{amEnd}} </block>
  49. <block v-else>暂无预约时间</block>
  50. ; 下午
  51. <block v-if="pmBegin">{{pmBegin}}-{{pmEnd}}</block>
  52. <block v-else>暂无预约时间</block>
  53. </view>
  54. <view class="flexc ytimea">
  55. <view class="timebtn">
  56. <picker range-key='dictLabel' :disabled="disabled" :value="timeidx" :range="timerange" @change="bindTimeChangea">
  57. <view class="flex1 " :class="timetype?'co16 fw f16':'coa f14'">{{timetype||'请选择'}}</view>
  58. </picker>
  59. </view>
  60. <image :src="rowline" class="rowline"></image>
  61. <view class="timebtn">
  62. <picker mode ="time" :start="start" :end="endtime?endtime:end" :value="starttime" @change="bindTimeChangeb">
  63. <view class="flex1 " :class="starttime?'co16 fw f16':'coa f14'">{{starttime||'请选择时间'}}</view>
  64. </picker>
  65. </view>
  66. <image :src="rowline" class="rowline"></image>
  67. <view class="timebtn">
  68. <picker mode ="time" :start="starttime?starttime:start" :end="end" :value="endtime" @change="bindTimeChangec">
  69. <view class="flex1" :class="endtime?'co16 fw f16':'coa f14'">{{endtime||'请选择时间 '}}</view>
  70. </picker>
  71. </view>
  72. </view>
  73. </view> -->
  74. </block>
  75. <view v-if="ite.val==1" class="pt5">
  76. <uni-forms-item label="人数" required name="visitNum">
  77. <!-- <view class=" ytchose">
  78. <view class="flexc">
  79. <image :src="downimg" class="numbtn" @click="_calcValue('minus')"></image>
  80. <input type="number" v-model="inputValue" class="numinp" />
  81. <image :src="upimg" class="numbtn" @click="_calcValue('plus')"></image>
  82. </view>
  83. </view> -->
  84. <uni-easyinput :inputBorder="false" type="number" v-model="datainfo.visitNum" placeholder="请输入人数">
  85. </uni-easyinput>
  86. </uni-forms-item>
  87. <uni-forms-item label="姓名" required name="visitName">
  88. <uni-easyinput :inputBorder="false" v-model="datainfo.visitName" placeholder="请输入姓名">
  89. </uni-easyinput>
  90. </uni-forms-item>
  91. <uni-forms-item label="手机号码" required name="visitPhone">
  92. <uni-easyinput :inputBorder="false" type="number" v-model="datainfo.visitPhone" placeholder="请输入手机号码">
  93. </uni-easyinput>
  94. </uni-forms-item>
  95. <uni-forms-item label="来访地点" required name="appointmentSite">
  96. <!-- jluly -->
  97. <view class="flexc flex1">
  98. <picker class="pickbox" range-key='dictLabel' :disabled="disabled" :value="adridx" :range="adrlist" @change="bindTimeChangea">
  99. <view class="flex1 " :class="adrtype?'co16 fw5 f14':'cod f14'">{{adrtype||'请选择'}}</view>
  100. </picker>
  101. </view>
  102. </uni-forms-item>
  103. <uni-forms-item label="来访事由" required name="visitReason">
  104. <uni-easyinput :inputBorder="false" v-model="datainfo.visitReason" placeholder="请输入来访事由">
  105. </uni-easyinput>
  106. </uni-forms-item>
  107. <!-- <uni-forms-item label="是否接待" required name="visitName" v-if="yktypes==1">
  108. <view class="flexc ytchose">
  109. <view class="lread" @click="getisReceptionFn">
  110. <view class="lreadl">
  111. <image :src="choseimg" v-if="isReception=='Y'"></image>
  112. <image :src="nchoseimg" v-else></image>
  113. </view>
  114. <view class="tit">是</text></view>
  115. </view>
  116. <view class="lread" @click="isReception='N'">
  117. <view class="lreadl">
  118. <image :src="choseimg" v-if="isReception=='N'"></image>
  119. <image :src="nchoseimg" v-else></image>
  120. </view>
  121. <view class="tit">否</text></view>
  122. </view>
  123. </view>
  124. </uni-forms-item> -->
  125. <uni-forms-item label="补充事由" name="visitRemark">
  126. <textarea placeholder="可补充填写" v-model="datainfo.visitRemark" placeholder-style="color:#aaa;" :auto-height="autoHeight" ></textarea>
  127. </uni-forms-item>
  128. </view>
  129. <!-- v-if="ite.val==1&&datainfo.visitName" -->
  130. <view class="pt12 pb18" v-if="ite.val==2">
  131. <view class="facea flexccc" @click="getFaceFn">
  132. <image :src="faceimg" class="addimg"></image>
  133. <view>点击进行面容认证</view>
  134. <image v-if="datainfo.humanFaceData" :src="baseUrl+datainfo.humanFaceData" class="faceb"></image>
  135. </view>
  136. <view class="facetip">面容认证仅能由<text>{{datainfo.visitName}}</text>本人完成</view>
  137. <view class="flexcc">
  138. <view class="flexccc facetips">
  139. <image :src="ftipa"></image>
  140. <view>避免遮挡</view>
  141. </view>
  142. <view class="flexccc facetips">
  143. <image :src="ftipb"></image>
  144. <view>光线充足</view>
  145. </view>
  146. <view class="flexccc facetips">
  147. <image :src="ftipc"></image>
  148. <view>正对手机</view>
  149. </view>
  150. </view>
  151. </view>
  152. </view>
  153. </view>
  154. </uni-forms>
  155. <view class="ybtn flexcc" @click="getSubmit">确认提交</view>
  156. </view>
  157. </view>
  158. </view>
  159. </template>
  160. <script>
  161. import { uploadPhoto } from '@/api/system/user.js';
  162. import config from '@/config.js';
  163. import navBar from "@/components/toptab/navbar.vue"
  164. import stepBar from "@/components/order/stepbar.vue"
  165. import luncCalendar from "@/components/lunc-calendar/lunc-calendar.vue"
  166. import {getDictionaryFn} from "@/api/mine/register.js"
  167. import {getReservatTime,getReservatAdd,getConfigList} from "@/api/mine/order.js"
  168. export default {
  169. components:{stepBar,luncCalendar,navBar},
  170. data(){
  171. return{
  172. baseUrl:config.baseUrl,
  173. tipimg:require('@/static/images/order/come/tip.png'),
  174. rowline:require('@/static/images/order/come/rowline.png'),
  175. faceimg:require('@/static/images/order/come/faceimg.png'),
  176. ftipa:require('@/static/images/order/come/ftipa.png'),
  177. ftipb:require('@/static/images/order/come/ftipb.png'),
  178. ftipc:require('@/static/images/order/come/ftipc.png'),
  179. choseimg:require("@/static/images/order/comes/chose.png"),
  180. nchoseimg:require("@/static/images/order/comes/nchosec.png"),
  181. downimg:require("@/static/images/order/comes/down.png"),
  182. upimg:require("@/static/images/order/comes/add.png"),
  183. adrlist:[],
  184. adrtype:'',
  185. adridx:-1,
  186. amList:[],
  187. pmList:[],
  188. timeType:1,//1: AM 2: PM",
  189. timeList:[],//时间段
  190. timeid:'',
  191. //status: 填写状态 0:未填 1:在填 2:填完 {tit:'面容认证',status:0,val:2}
  192. barsteps:[{tit:'信息填写',status:1,val:0},{tit:'等待审核',status:0,val:1},{tit:'审核成功',status:0,val:2},{tit:'已完成',status:0,val:3}],
  193. steps:[{tit:'预约日期',status:1,val:0},{tit:'信息填写',status:0,val:1},{tit:'面容认证',status:0,val:2}],
  194. fixedflag:true,
  195. rules: {
  196. // visitPhone: {rules: [{required: true,errorMessage: '请输入联系电话'},{pattern:"^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$",errorMessage: '请输入正确的联系方式'}]},
  197. },
  198. autoHeight:true,
  199. disabled:false,
  200. intype:0,
  201. datainfo:{
  202. humanFaceData:'',
  203. },
  204. inputValue:1,
  205. step:1,
  206. min:1,
  207. signList: [],
  208. configWeek:[],
  209. configHoliday:'Y',
  210. firstDayOfWeek:'sunday',
  211. dayflag:false,
  212. month:'',
  213. year:'',
  214. kaTime:'',
  215. changetime:'',//改变的日期
  216. timeday:'',//选择的日期
  217. visitDate:'',
  218. id:'',
  219. jdryflag:true,//当前时间段是否能接待
  220. }
  221. },
  222. watch:{
  223. // intype(val){
  224. // var data=this.datainfo;
  225. // if(val!=0){
  226. // if(data.visitDate&&data.visitTime) this.steps[0].status=2;
  227. // else if(!data.visitDate||!data.visitTime) this.steps[0].status=0;
  228. // }
  229. // if(val!=1){
  230. // if(this.yktypes==1){
  231. // if(this.inputValue&&data.visitPhone&&data.visitName&&data.visitUnitName) this.steps[1].status=2;
  232. // else if(!this.inputValue||!data.visitPhone||!data.visitName||!data.visitUnitName) this.steps[1].status=0;
  233. // }else{
  234. // if(this.inputValue&&data.visitPhone&&data.visitName) this.steps[1].status=2;
  235. // else if(!this.inputValue||!data.visitPhone) this.steps[1].status=0;
  236. // }
  237. // }
  238. // }
  239. },
  240. onLoad: function(e) {
  241. // this.id=e.id;
  242. // this.id='881659';
  243. this.time();
  244. this.init()
  245. this.getReservatTime();
  246. // this.getConfigList()
  247. uni.$on('refreshFace',(e) => {
  248. this.datainfo.humanFaceData=e
  249. })
  250. },
  251. methods:{
  252. bindTimeChangea(e){
  253. var val=e.detail.value;
  254. this.adrtype=this.adrlist[val].dictLabel
  255. this.datainfo.appointmentSite=this.adrlist[val].dictValue
  256. },
  257. getSerch(){
  258. this.$tab.navigateTo('/pages/order/search')
  259. },
  260. getFaceFn(){
  261. var that = this;
  262. // uni.chooseImage({
  263. // count: 1, //默认9
  264. // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  265. // sourceType: ['camera'],
  266. // success: function(res) {
  267. // const tempFilePaths = res.tempFilePaths;
  268. // // 文件上传
  269. // let data = { name: 'file', filePath: res.tempFilePaths[0] };
  270. // uploadPhoto(data).then(response => {
  271. // that.datainfo.humanFaceData = response.fileName;
  272. // });
  273. // }
  274. // });
  275. this.$tab.navigateTo('/pages/order/face')
  276. },
  277. init(){
  278. // 记录来源
  279. getDictionaryFn('jluly').then(res=>{
  280. if(res.code==200){
  281. this.adrlist = res.data.map(v => {
  282. return {
  283. dictLabel: v.dictLabel,
  284. dictValue: v.dictValue
  285. }
  286. })
  287. }
  288. })
  289. },
  290. getReservatTime(itime){
  291. getReservatTime().then(res=>{
  292. if(res.code==200){
  293. var data=res.rows;
  294. var amList=[],pmList=[]
  295. data.forEach(ite=>{
  296. if(ite.reservatConfigType==1){
  297. amList.push(ite)
  298. }else if(ite.reservatConfigType==2){
  299. pmList.push(ite)
  300. }
  301. })
  302. if(amList.length){
  303. this.timeList=amList;
  304. this.timeType=1
  305. }else{
  306. this.timeList=pmList;
  307. this.timeType=2
  308. }
  309. this.amList=amList
  310. this.pmList=pmList
  311. }
  312. })
  313. },
  314. time() {
  315. var date = new Date();
  316. var y = date.getFullYear();
  317. var m = date.getMonth() + 1;
  318. var d = date.getDate();
  319. var h = date.getHours();
  320. var min = date.getMinutes();
  321. var s = date.getSeconds();
  322. var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
  323. var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
  324. var yearStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
  325. var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
  326. '0' + s) : s);
  327. this.kaTime = yearStr;
  328. this.datainfo.visitDate=yearStr;
  329. this.year=y;
  330. this.month=m;
  331. },
  332. typeFn(data){
  333. return data?data.substring(0,5):''
  334. },
  335. getChose(ite){
  336. if(ite.reservatConfigStatus=='Y'){
  337. this.timeid=ite.reservatConfigTimeId;
  338. this.datainfo.visitTime=ite.reservatConfigTimeBegin+'-'+ite.reservatConfigTimeEnd;
  339. this.datainfo.reservatConfigTimeId=ite.reservatConfigTimeId;
  340. // 判断当前时间段是否有接待员
  341. // if(ite.receptionPersonnelType=='N'){
  342. // this.jdryflag=true
  343. // }else{
  344. // this.jdryflag=false
  345. // this.isReception='N'
  346. // }
  347. }
  348. },
  349. getTimeFn(type){
  350. if(type==1){
  351. this.timeType=1;
  352. this.timeList=this.amList;
  353. }else{
  354. this.timeType=2;
  355. this.timeList=this.pmList;
  356. }
  357. },
  358. clearboth(){
  359. var time=this.datainfo.visitDate
  360. this.datainfo={};
  361. this.datainfo.visitDate=time;
  362. this.timeid='';
  363. this.adrtype='';
  364. // this.getReservatTime(this.changetime)
  365. },
  366. getSubmit(){
  367. var that=this;
  368. if(!this.datainfo.visitDate){
  369. this.$toast('请选择预约日期')
  370. return
  371. }
  372. if(!this.datainfo.visitTime){
  373. this.$toast('请选择时间')
  374. return
  375. }
  376. var str='预约成功'
  377. // if(this.inputValue==0){
  378. // this.$toast('请输入来访人数')
  379. // return
  380. // }
  381. // if(this.inputValue<0){
  382. // this.$toast('请输入正确的来访人数')
  383. // return
  384. // }
  385. if(!this.datainfo.visitNum){
  386. this.$toast('请输入人数')
  387. return
  388. }
  389. if(this.datainfo.visitNum<1){
  390. this.$toast('请输入正确的人数')
  391. return
  392. }
  393. if(!this.datainfo.visitName){
  394. this.$toast('请输入姓名')
  395. return
  396. }
  397. var phone=this.datainfo.visitPhone
  398. if(!phone){
  399. this.$toast('请输入手机号码')
  400. return
  401. }
  402. let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
  403. if (phone && !regphone.test(phone)) {
  404. that.$toast("请输入正确的手机号")
  405. return
  406. }
  407. if(!this.adrtype){
  408. this.$toast('请选择来访地点')
  409. return
  410. }
  411. if(!this.datainfo.visitReason){
  412. this.$toast('请输入来访事由')
  413. return
  414. }
  415. if(this.datainfo.visitName&&!this.datainfo.humanFaceData){
  416. this.$toast('请进行面容识别')
  417. return
  418. }
  419. // that.clearboth()
  420. // console.log(this.datainfo)
  421. // return
  422. this.$refs.form.validate().then(res => {
  423. var params={};
  424. params=this.datainfo
  425. getReservatAdd(params).then(res=>{
  426. if(res.code==200){
  427. this.$toast(str)
  428. setTimeout(function(){
  429. that.clearboth()
  430. },1500)
  431. }else{
  432. this.$toast(res.msg)
  433. }
  434. })
  435. })
  436. },
  437. dayChange(e){
  438. console.log(e,1)
  439. this.datainfo.visitDate=e.date;
  440. },
  441. getIsSelDayFn(e){
  442. // this.datainfo.visitDate=e.date;
  443. },
  444. getInFn(idx){
  445. // this.intype=idx;
  446. // this.steps[idx].status=1
  447. },
  448. // getConfigList(){
  449. // getConfigList().then(res=>{
  450. // if(res.code==200){
  451. // if(res.rows&&res.rows.length){
  452. // var week=res.rows[0].reservatConfigWeek;
  453. // var weeka=week.split(',');
  454. // var weekarr=[]
  455. // weeka.forEach(ite=>{
  456. // weekarr.push(Number(ite))
  457. // })
  458. // this.configWeek=weekarr;
  459. // this.configHoliday=res.rows[0].reservatConfigHoliday;
  460. // }
  461. // }
  462. // })
  463. // },
  464. // getisReceptionFn(){
  465. // if(this.jdryflag){
  466. // this.isReception='Y'
  467. // }else{
  468. // this.$toast('当前时间段暂无预约人员')
  469. // }
  470. // },
  471. // _calcValue(type) {
  472. // // if (this.disabled) {
  473. // // return;
  474. // // }
  475. // const scale = this._getDecimalScale();
  476. // let value = this.inputValue * scale;
  477. // let step = this.step * scale;
  478. // if (type === "minus") {
  479. // value -= step;
  480. // if (value < (this.min * scale)) {
  481. // return;
  482. // }
  483. // if (value > (this.max * scale)) {
  484. // value = this.max * scale
  485. // }
  486. // }
  487. // if (type === "plus") {
  488. // value += step;
  489. // if (value > (this.max * scale)) {
  490. // return;
  491. // }
  492. // if (value < (this.min * scale)) {
  493. // value = this.min * scale
  494. // }
  495. // }
  496. // this.inputValue = (value / scale).toFixed(String(scale).length - 1);
  497. // },
  498. // _getDecimalScale() {
  499. // let scale = 1;
  500. // // 浮点型
  501. // if (~~this.step !== this.step) {
  502. // scale = Math.pow(10, String(this.step).split(".")[1].length);
  503. // }
  504. // return scale;
  505. // },
  506. // dayChange(e){
  507. // if(e.daySign&&e.daySign.length){
  508. // var daySign=e.daySign[0];
  509. // this.amList=daySign.amList||[];
  510. // this.pmList=daySign.pmList||[];
  511. // if(this.reservatConfigType==1){
  512. // this.timeList=this.amList;
  513. // }else if(this.reservatConfigType==2){
  514. // this.timeList=this.pmList;
  515. // }
  516. // this.timeid='';
  517. // this.datainfo.visitDate=daySign.date;
  518. // this.datainfo.visitTime='';
  519. // }
  520. // },
  521. // monthChange(e){
  522. // var y=e.year;
  523. // var m=e.month;
  524. // if(y==this.year&&m==this.month){
  525. // this.getReservatTime()
  526. // this.changetime='';
  527. // }else{
  528. // var time=y + '-' + m + '-' + '01'
  529. // this.changetime=time
  530. // this.getReservatTime(time)
  531. // }
  532. // },
  533. // 选中的日期
  534. // getIsSelDayFn(e){
  535. // if(e.sign&&e.sign.length&&this.timeday!=e.date){
  536. // this.timeday=e.date;
  537. // if(this.configWeek.indexOf(e.week)!=-1 || e.isHoliday&&this.configHoliday=='N'){
  538. // this.dayflag=false;
  539. // }else{
  540. // if(e.sign&&e.sign.length){
  541. // var sign=JSON.parse(JSON.stringify(e.sign))
  542. // var signes=JSON.parse(JSON.stringify(sign[0]));
  543. // var amList=JSON.parse(JSON.stringify(signes.amList))||[];
  544. // var pmList=JSON.parse(JSON.stringify(signes.pmList))||[];
  545. // this.jdryflag=true;
  546. // if(this.timeType==1){
  547. // this.timeList=amList;
  548. // }else{
  549. // this.timeList=pmList;
  550. // }
  551. // this.amList=amList
  552. // this.pmList=pmList
  553. // this.timeid='';
  554. // var y=e.year;
  555. // var m=e.month;
  556. // var d=e.day;
  557. // this.datainfo.visitDate=y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
  558. // this.datainfo.visitTime='';
  559. // if(signes.title=='可预约'){
  560. // this.dayflag=true;
  561. // }else{
  562. // this.dayflag=false;
  563. // }
  564. // }
  565. // }
  566. // }
  567. // },
  568. // shrinkClick(e){
  569. // console.log(e,3)
  570. // },
  571. },
  572. }
  573. </script>
  574. <style lang="scss" scoped>
  575. .ytbox /deep/ .uni-forms .uni-forms-item{padding: 20rpx 16rpx 20rpx;border-bottom: 2rpx solid #E6E6E6;margin-bottom: 0;}
  576. .ytbox /deep/ .uni-forms-item__label{flex: 0 0 auto;width: 144rpx !important;font-size: 28rpx;font-weight: bold;position: relative;color: #343434;text-align-last: justify;}
  577. .ytbox /deep/ .uni-forms-item__label text{flex: 1;}
  578. .ytbox /deep/ .uni-forms-item__label .is-required{position: absolute;right: 0;color: #F10C31;margin-top: 16rpx;}
  579. .ytbox /deep/ uni-textarea{flex: 1;width: auto;text-align: right;}
  580. .ytbox /deep/ .uni-textarea-placeholder{font-size: 28rpx;color: #DDDDDD !important;}
  581. .ytbox /deep/ .uni-easyinput__placeholder-class{font-size: 28rpx;color: #DDDDDD;}
  582. .ytbox /deep/ .uni-forms-item__content{display: flex;align-items: center;flex-direction: row;}
  583. .ytbox /deep/ .uni-easyinput{flex: 1;text-align: right;}
  584. .ytsbox /deep/ .uni-forms-item:last-child{border-bottom: none;}
  585. .ytbox /deep/ .uni-easyinput__content-input{font-size: 28rpx;}
  586. .ytbox /deep/ .uni-forms-item__error{margin-top:20rpx;left: auto;right: 0;}
  587. .ytbox{width: 684rpx;margin: 0 auto;padding-bottom: 44rpx;padding-top: 24rpx;position: relative;flex: 1;overflow: auto;}
  588. .ytforms{
  589. .yttit{font-size: 28rpx;font-weight: bold;margin-bottom: 10rpx;
  590. color: #161616;display: flex;align-items: center;padding: 0rpx 26rpx;box-sizing: border-box;position: relative;
  591. &::before{content: '';width: 6rpx;height: 34rpx;background: $com-cd3;border-radius: 4rpx;position: absolute;top: 50%;transform: translateY(-50%);left: 0rpx;}
  592. }
  593. .ytsbox{background-color: #ffffff;padding: 32rpx 28rpx 0;border-radius: 14rpx;margin-bottom: 24rpx;
  594. &.boxa{padding: 24rpx 48rpx;}
  595. // &.boxb{padding-bottom:10rpx;}
  596. .ytime{padding:60rpx 0 0;
  597. .ytimea{display: flex;align-items: center;margin-bottom: 32rpx;
  598. .ytimel{font-size: 30rpx;font-weight: bold;color: #161616;flex:1;}
  599. }
  600. .ytimeb{
  601. display: flex;align-items: center;flex-wrap: wrap;
  602. .list{
  603. width: 196rpx;
  604. height: 120rpx;
  605. display: flex;align-items: center;justify-content: center;flex-direction: column;
  606. border-radius:6rpx;margin-bottom: 30rpx;margin-right: 18rpx;box-sizing: border-box;
  607. &:nth-of-type(3n){margin-right: 0;}
  608. &.box1{background: #F3F3F3;
  609. view{color: #AAAAAA;}
  610. }
  611. &.box2{border: 1px solid $com-cd3 !important;
  612. .tit{color: $com-cd3 !important;}
  613. }
  614. &.box3{border: 1px solid #DADADA;
  615. }
  616. view{font-size: 28rpx;font-weight: 500;color: #161616;font-family: PingFang SC;}
  617. .tit{margin-bottom: 6rpx;}
  618. }
  619. }
  620. }
  621. // .ytime{padding:20rpx 0 46rpx;
  622. // .ytimel{font-size: 28rpx;font-weight: bold;color: #161616;flex:1;position: relative;padding-left: 26rpx;margin-bottom: 32rpx;
  623. // &::before{content: '';width: 6rpx;height: 34rpx;background: $com-cd3;border-radius: 4rpx;position: absolute;top: 50%;transform: translateY(-50%);left: 0rpx;}
  624. // }
  625. // .ytst{font-size: 26rpx;font-weight: 500;color: #666666;margin-bottom: 28rpx;
  626. // image{width: 24rpx;height: 24rpx;margin-right: 8rpx;flex: 0 0 auto;margin-top: 6rpx;}
  627. // }
  628. // .ytimea{padding: 10rpx 0 0;
  629. // .rowline{width: 64rpx;height: 20rpx;margin: 0 10rpx;flex: 0 0 auto;}
  630. // .timebtn{flex: 1;height: 70rpx;border: 2rpx solid #0391FD;
  631. // border-radius: 14rpx;text-align: center;line-height: 70rpx;box-sizing: border-box;}
  632. // }
  633. // }
  634. .ytchose{flex: 1; display: flex;align-items: center;justify-content: flex-end;
  635. .numbtn{width: 32rpx;height: 32rpx;flex: 0 0 auto;}
  636. .numinp{margin: 0 28rpx;width: 124rpx;height: 56rpx;background: #FFFFFF;border: 2rpx solid #0391FD;border-radius: 2rpx;text-align: center;box-sizing: border-box;}
  637. }
  638. }
  639. .lread{
  640. display: flex;align-items: flex-start;justify-content: center;margin-left: 40rpx;
  641. .lreadl{padding-top: 4rpx;
  642. image{width: 28rpx;height: 28rpx;margin-right: 26rpx;}
  643. }
  644. .tit{font-size: 28rpx;font-weight: 500;color: #666666;
  645. }
  646. }
  647. }
  648. // 按钮
  649. .ybtn{width: 684rpx;height: 90rpx;background: $com-cd3;border-radius: 14rpx;margin: 56rpx auto 0;font-size: 28rpx;font-weight: 500;color: #FFFFFF;
  650. &.btn1{background-color: #9a9c9e;}
  651. }
  652. .pickbox{flex: 1;text-align: right;font-weight: 500;font-size: 28rpx;color: #161616;}
  653. // 面容
  654. .facea{width: 100%;height: 174rpx;background: #FFFFFF;border-radius: 14rpx;border: 2rpx dashed #DADADA;margin-bottom: 46rpx;position: relative;overflow: hidden;
  655. .addimg{width: 64rpx;height: 64rpx;margin-bottom: 14rpx;z-index: 1;}
  656. view{font-weight: 500;color: #AAAAAA;font-size: 26rpx;z-index: 1;}
  657. .faceb{
  658. width: 624rpx;height: 170rpx;position: absolute;
  659. }
  660. }
  661. .facetip{text-align: center;font-weight: 500;font-size: 22rpx;color: #666666;margin-bottom: 50rpx;
  662. text{color: $com-cd3;font-weight: 500;padding: 0 4rpx;}
  663. }
  664. .facetips{width: 188rpx;
  665. image{width: 98rpx;height: 98rpx;margin-bottom: 20rpx;}
  666. view{font-weight: 500;font-size: 22rpx;color: #828CA7;}
  667. }
  668. </style>