index.vue 46 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666
  1. <template>
  2. <div class="mine">
  3. <div class="left">
  4. <div class="user-info">
  5. <div class="user-img">
  6. <img :src="userInfo.image"
  7. alt />
  8. </div>
  9. <div class="user-span">
  10. <div class="name">
  11. 昵称:
  12. <span>{{userInfo.nickname}}</span>
  13. </div>
  14. <div class="sex">
  15. 性别:
  16. <span>{{userInfo.sex}}</span>
  17. </div>
  18. <div class="age">
  19. 肤龄:
  20. <span>{{userInfo.age==1?'男':userInfo.age==2?'女':'保密'}}</span>
  21. </div>
  22. <div class="skin-type">
  23. 肤质:
  24. <span>{{userInfo.skin}}</span>
  25. </div>
  26. </div>
  27. </div>
  28. <div class="user-record">
  29. <div class="fraction"
  30. @click="isPore=true">
  31. <div class="title">肌肤得分</div>
  32. <div class="num">{{userInfo.score}}分</div>
  33. </div>
  34. <div class="status">
  35. <div class="title">皮肤状态</div>
  36. <div class="tips">{{userInfo.skin_status}}</div>
  37. </div>
  38. <div class="times">
  39. <div class="title">上传检测时间</div>
  40. <div class="ts">{{userInfo.check_time}}</div>
  41. </div>
  42. </div>
  43. <div class="lable">
  44. <div class="lable-title">面诊标签</div>
  45. <div class="lable-list">
  46. <div v-for="(item,index) in lableList"
  47. :key="index"
  48. class="lable-info">{{item}}</div>
  49. </div>
  50. </div>
  51. <div class="ps">
  52. <div class="ps-title">备注</div>
  53. <div class="ps-text">{{remarks | ellipsis(20)}}</div>
  54. </div>
  55. <div class="programme">
  56. <div class="tab">
  57. <div class="tab-title">执行方案</div>
  58. </div>
  59. <div class="programme-list">
  60. <div :class="['programme-info',item.onSelect?'programme-active':'']"
  61. v-for="(item,index) in programmeList"
  62. :key="index"
  63. @click="onOperation(index)">
  64. <div class="programme-left">
  65. <div class="programme-img">
  66. <img :src="item.cover_url"
  67. alt />
  68. </div>
  69. <div class="programme-tips">
  70. <div class="tips-title">{{item.name|ellipsis(9)}}</div>
  71. <div class="tips-title">{{item.desc|ellipsis(9)}}</div>
  72. <div class="tips-title">
  73. 仪器:
  74. <span>{{item.device_name|ellipsis(9)}}</span>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="programme-right">
  79. <div class="frequency">
  80. 执行频率:
  81. <span>{{item.rate}}</span>
  82. </div>
  83. <div class="duration">
  84. 持续时长:
  85. <span>{{item.duration}}</span>
  86. </div>
  87. </div>
  88. <div class="operation"
  89. v-if="item.onSelect">
  90. <div class="edit">编辑</div>
  91. <div class="delete">删除</div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="right">
  98. <div class="shop-info">
  99. <div class="shpo-name">
  100. 预约店铺:
  101. <span>{{userInfos.store_name}}</span>
  102. </div>
  103. <div class="shpo-address">
  104. 门店地址:
  105. <span>{{order_data.address}}</span>
  106. </div>
  107. <!-- <div class="shpo-ts">
  108. 美容时间:
  109. <span>{{order_data.order_time}}</span>
  110. </div>-->
  111. </div>
  112. <div class="project">
  113. <div class="project-title">
  114. <div>
  115. <span>{{order_data.project_list?order_data.project_list.length:0}}个</span>项目
  116. </div>
  117. <div v-if="order_data.type!='one'"
  118. class="add-project"
  119. @click="addProject">添加</div>
  120. </div>
  121. <div class="project-list">
  122. <div class="project-info"
  123. v-for="(item,index) in order_data.project_list"
  124. :key="index">
  125. <div class="project-image">
  126. <img :src="item.cover_url" />
  127. </div>
  128. <div class="project-content">
  129. <div class="title-price">
  130. <div class="project-tit">{{item.name}}</div>
  131. <div class="project-price">
  132. <span class="min-size">¥</span>
  133. {{Number(item.price).toFixed(2)}}
  134. </div>
  135. </div>
  136. <div class="project-tips">{{item.product_names}}</div>
  137. <div class="project-zoom">
  138. <div>
  139. <span v-if="item.device_name">{{item.device_name}}({{item.room}}){{item.use_time}}分钟</span>
  140. </div>
  141. <div v-if="order_data.type!='one'">
  142. <img @click="eidt(item)"
  143. src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/eidt.png" />
  144. <img @click="deleteProject(item)"
  145. class="delete"
  146. src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/delete.png"
  147. alt />
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. <div class="cost"
  155. v-if="!isChange || order_data.project_list.length>0">
  156. <div class="over-price">
  157. 合计:
  158. <span class="price-num">
  159. <span class="min-size">¥</span>
  160. {{reservationPrice}}
  161. <span class="min-size"></span>
  162. </span>
  163. </div>
  164. </div>
  165. <div class="payment"
  166. @click="determine">确定订单</div>
  167. </div>
  168. <!-- 选择优惠券 -->
  169. <mine-pupop :show="isCoupun">
  170. <div class="coupon-block">
  171. <div class="delete-pupop"
  172. @click="isCoupun=false">
  173. <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
  174. alt />
  175. </div>
  176. <div class="coupon-pupop-title">选择优惠券</div>
  177. <ul class="coupon-lists">
  178. <li class="coupon-info"
  179. v-for="item,index in couponList"
  180. :key="index">
  181. <!-- 1: '抵扣券',
  182. 2: '满减券',
  183. 3: '全额减免券',
  184. 4: '项目卡券'-->
  185. <div class="coupon-tips-text">{{item.type==1?'抵扣券':item.type==2?'满减券':item.type==3?'全额减免券':'项目卡券'}}</div>
  186. <div class="top">
  187. <div v-if="item.type==3"
  188. class="discount-over">全免</div>
  189. <div v-else
  190. class="discount">
  191. <div class="price-num">
  192. <span class="size">¥</span>
  193. {{item.price}}
  194. </div>
  195. <div class="price-tips">{{item.full_price}}</div>
  196. </div>
  197. <div class="coupon-tip">
  198. <div class="tips-title">{{item.coupon_name}}</div>
  199. <div class="tips-ts">有效期至{{item.ex_time}}</div>
  200. </div>
  201. <div class="choice-icon"
  202. @click="selectPupop(item,index)">
  203. <img :src="item.isSelect?select:unSelect" />
  204. </div>
  205. </div>
  206. <div class="bottom">
  207. <div class="coupon-notes"
  208. @click="isOver=!isOver">
  209. <div class="notes-text min-size">
  210. <span v-if="!isOver">{{item.coupon_desc |ellipsis(20)}}</span>
  211. <span v-else>{{item.coupon_desc}}</span>
  212. </div>
  213. <div class="notes-icon">
  214. <img :src="isOver?open:unOpen"
  215. alt />
  216. </div>
  217. </div>
  218. </div>
  219. </li>
  220. </ul>
  221. </div>
  222. </mine-pupop>
  223. <!-- 选择项目 -->
  224. <mine-pupop :show="isProject">
  225. <div class="project-block">
  226. <div class="delete-pupop"
  227. @click="isProject=false">
  228. <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
  229. alt />
  230. </div>
  231. <div class="project-pupop-title">选择项目</div>
  232. <div class="project-select">
  233. <el-select v-model="classifyInfo"
  234. placeholder="请选择分类"
  235. style="width: 295px;"
  236. @change="getClassify"
  237. size="mini">
  238. <el-option v-for="item in classifyList"
  239. :key="item.id"
  240. :label="item.name"
  241. :value="item.id">
  242. </el-option>
  243. </el-select>
  244. </div>
  245. <div class="project-select">
  246. <el-select v-model="projectInfo"
  247. placeholder="请选择项目"
  248. style="width: 295px;"
  249. :disabled="classifyInfo.length==0?true:false"
  250. @change="getProducts"
  251. size="mini">
  252. <el-option v-for="item in projectList"
  253. :key="item.id"
  254. :label="item.name"
  255. :value="item.id"></el-option>
  256. </el-select>
  257. </div>
  258. <div class="products-select">
  259. <el-select v-model="productsInfo"
  260. placeholder="请选择升级产品包"
  261. style="width: 295px;"
  262. :disabled="projectInfo.length==0?true:false"
  263. size="mini">
  264. <el-option v-for="item in productsList"
  265. :key="item.id"
  266. :label="item.name"
  267. :value="item.id"></el-option>
  268. </el-select>
  269. </div>
  270. <div class="products-button"
  271. @click="orderUpdate">确定</div>
  272. </div>
  273. </mine-pupop>
  274. <!-- 选择时间 -->
  275. <mine-pupop :show="isTs">
  276. <div class="ts-block">
  277. <div class="delete-pupop"
  278. @click="isTs=false">
  279. <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
  280. alt />
  281. </div>
  282. <div class="ts-pupop-title">选择时间</div>
  283. <div class="ts-content">
  284. <ul class="ts-table">
  285. <li v-for="item,index in tsTableList"
  286. :key="index"
  287. @click="changetsTable(index)"
  288. :class="tsTableIndex==index?'ts-table-active':''">
  289. <div>{{item.text}}</div>
  290. <div>{{item.ts}}</div>
  291. </li>
  292. </ul>
  293. <div v-if="tsBodyList.day">
  294. <div class="time-slot">
  295. <div class="day"
  296. @click="changeActive(1)"
  297. :style="active==1?'color: #333333;font-weight: 600;':''">{{ tsBodyList.day.name}}</div>
  298. <div class="night"
  299. @click="changeActive(0)"
  300. :style="active==0?'color: #333333;font-weight: 600;':''">{{tsBodyList.night.name}}</div>
  301. </div>
  302. <ul class="ts-boty"
  303. v-if="active==1">
  304. <li v-for="item,index in tsBodyList.day.list"
  305. :key="index">
  306. <div :style="item.status==0?'color: #D3D3D3;':''"
  307. @click="selectTime(item)"
  308. :class="timeIndexText==item.order_time?'time-active':''">{{item.order_time}}</div>
  309. </li>
  310. </ul>
  311. <ul class="ts-boty"
  312. v-else>
  313. <li v-for="item,index in tsBodyList.night.list"
  314. :key="index">
  315. <div :style="item.status==0?'color: #D3D3D3;':''"
  316. @click="selectTime(item)"
  317. :class="timeIndexText==item.order_time?'time-active':''">{{item.order_time}}</div>
  318. </li>
  319. </ul>
  320. </div>
  321. </div>
  322. <el-button class="ts-button"
  323. :style="this.timeIndexText.length == 0?'background: rgb(211, 211, 211);':''"
  324. @click="comfigTs">确认</el-button>
  325. </div>
  326. </mine-pupop>
  327. <!-- 皮肤状态 -->
  328. <mine-pupop :show="isPore">
  329. <div class="pore-block">
  330. <div class="delete-pupop"
  331. @click="isPore=false">
  332. <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
  333. alt />
  334. </div>
  335. <div class="pore-content">
  336. <ul>
  337. <li class="pore-info"
  338. v-for="item,index in poreList"
  339. :key="index">
  340. <div class="pore-top">
  341. <div class="pore-title">
  342. <div>{{item.name}}</div>
  343. <div class="pore-medium"
  344. v-if="item.main_item">{{item.main_item.name}}{{item.main_item.num}}</div>
  345. </div>
  346. <div class="pore-over">
  347. <div class="min-size"
  348. v-for="value,index in item.items"
  349. :key="index">{{value.name}}{{value.num}}个</div>
  350. </div>
  351. </div>
  352. <div class="pore-bottom min-size">{{item.suggest | ellipsis(85)}}</div>
  353. </li>
  354. </ul>
  355. </div>
  356. </div>
  357. </mine-pupop>
  358. </div>
  359. </template>
  360. <script>
  361. import minePupop from "../../../components/minePupop/index.vue";
  362. import QRCode from "qrcodejs2";
  363. import api from "../../../server/home";
  364. export default {
  365. components: { minePupop },
  366. data () {
  367. return {
  368. open:
  369. "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/openNotes.png",
  370. unOpen:
  371. "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/upDate.png",
  372. select:
  373. "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/select.png",
  374. unSelect:
  375. "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/coupon/unSelect.png",
  376. userInfo: {},
  377. //面部标签
  378. lableList: [],
  379. //执行方案
  380. programmeList: [],
  381. order_data: {
  382. project_list: []
  383. }, //门店
  384. //项目列表
  385. projectList: [],
  386. //项目分类列表
  387. classifyList: [],
  388. //升级包列表
  389. productsList: [],
  390. //时间列表(头部)
  391. tsTableList: [],
  392. tsTableIndex: 0,
  393. active: 1,
  394. //时间列表(body)
  395. tsBodyList: {},
  396. //皮肤状态列表
  397. poreList: [],
  398. //优惠券列表
  399. couponList: [],
  400. //已选择的优惠券
  401. selectCouponList: [],
  402. //已选择优惠券的id(同一个id只能选择一张优惠券)
  403. selectCouponListId: [],
  404. //支付方式
  405. timesInfo: "",
  406. reservationPrice: 0, //预约费用
  407. projectInfo: "",
  408. productsInfo: "",
  409. timeIndexText: "", //当前选择的时间
  410. weekInfo: "",
  411. programmeIndex: "",
  412. classifyInfo: '',
  413. remarks: "",
  414. isCoupun: false, //是否展示优惠券弹窗
  415. isOver: false, //优惠券注释
  416. isProject: false, //是否展示选择项目弹窗
  417. isTs: false, //是否展示选择时间弹窗
  418. isPore: false, //皮肤状态弹窗
  419. choicePayType: false, //支付弹窗
  420. PayStatus: false, //支付状态弹窗
  421. isPayCode: true, //是否展示支付二维码
  422. id: 0, //订单id
  423. lastProjectPrice: "", //项目已选择的升级包
  424. isChange: false, //项目是否有改变
  425. isEditProject: false, //是否编辑项目
  426. payStatusInterval: null, //轮循拉支付状态
  427. page: 1,
  428. limit: 200,
  429. needSelect: false,
  430. coupSelectType: "",
  431. productDiscount: "",
  432. isSelectCoup: [], // 选择的优惠券
  433. // 下面是支付的数据
  434. showMoney: 0, // 价值总额
  435. discountPrice: 0, //活动后金额
  436. discount: 0, //折扣类型
  437. userInfos: {}
  438. // showRuleText: 10086,
  439. };
  440. },
  441. computed: {},
  442. watch: {},
  443. methods: {
  444. toHome () {
  445. this.$router.replace("/home");
  446. },
  447. getProjectClassify () {
  448. api.projectClassify().then(res => {
  449. this.classifyList = res.data.list
  450. })
  451. },
  452. getProjectList (e) {
  453. api.getProjectList({ id: e }).then(res => {
  454. this.projectList = res.data.list;
  455. });
  456. },
  457. getClassify (e) {
  458. this.projectInfo = ''
  459. console.log(e);
  460. this.getProjectList(e)
  461. },
  462. getProducts (e) {
  463. // this.productsInfo = ''
  464. api.getProducts({ id: e }).then(res => {
  465. this.productsList = res.data.list;
  466. this.productsList.forEach(item => {
  467. if (this.productsInfo == item.id) {
  468. this.lastProjectPrice = Number(item.price);
  469. }
  470. });
  471. });
  472. },
  473. eidt (item) {
  474. this.projectInfo = item.id;
  475. this.productsInfo =
  476. item.product_ids == "" ? "" : Number(item.product_ids);
  477. this.getProducts(item.id);
  478. this.isEditProject = true;
  479. this.isProject = true;
  480. },
  481. deleteProject (item) {
  482. this.order_data.project_list.forEach((res, index) => {
  483. if (item.id == res.id) {
  484. this.order_data.project_list.splice(index, 1);
  485. this.$message({
  486. message: "删除成功",
  487. type: "success"
  488. });
  489. }
  490. });
  491. },
  492. addProject () {
  493. this.projectInfo = "";
  494. this.productsInfo = "";
  495. this.isEditProject = false;
  496. this.isProject = true;
  497. },
  498. //新增
  499. orderUpdate () {
  500. // 编辑
  501. if (this.isEditProject) {
  502. if (this.productsInfo != "") {
  503. this.order_data.project_list.forEach(e => {
  504. console.log(this.projectInfo)
  505. console.log(this.projectInfo == e.id)
  506. if (this.projectInfo == e.id) {
  507. this.productsList.forEach(item => {
  508. e.product_ids = this.productsInfo;
  509. if (item.id == e.product_ids) {
  510. if (e.product_ids != "") {
  511. e.price = Number(e.price) - Number(this.lastProjectPrice);
  512. }
  513. this.isChange = true;
  514. e.product_names = item.name;
  515. console.log(
  516. Number(e.price),
  517. Number(item.price),
  518. "Number(e.price) + Number(item.price)"
  519. );
  520. e.price = Number(e.price) + Number(item.price);
  521. this.isProject = false;
  522. this.isEditProject = false;
  523. this.calculationPrice();
  524. }
  525. });
  526. }
  527. });
  528. } else {
  529. this.isProject = false;
  530. return;
  531. }
  532. } else {
  533. //新增
  534. let isIndexOf = false;
  535. if (this.projectInfo.length == 0) return;
  536. this.order_data.project_list.forEach(res => {
  537. if (this.projectInfo == res.id) {
  538. isIndexOf = true;
  539. this.$message.error("该项目已存在");
  540. }
  541. });
  542. if (isIndexOf) return;
  543. //项目包重组
  544. let projectInfo = {},
  545. nowProjectInfo = {},
  546. productsInfo = {};
  547. this.projectList.forEach(item => {
  548. if (this.projectInfo == item.id) {
  549. nowProjectInfo = item;
  550. }
  551. });
  552. if (this.productsInfo.length != 0) {
  553. this.productsList.forEach(item => {
  554. if (item.id == this.productsInfo) {
  555. productsInfo = item;
  556. }
  557. });
  558. }
  559. projectInfo["name"] = nowProjectInfo.name;
  560. projectInfo["id"] = nowProjectInfo.id;
  561. projectInfo["cover_url"] = nowProjectInfo.cover_url;
  562. projectInfo["device_name"] = "";
  563. projectInfo["room"] = "";
  564. projectInfo["use_time"] = "";
  565. projectInfo["price"] = nowProjectInfo.price;
  566. projectInfo["product_names"] = "";
  567. if (Object.keys(productsInfo).length > 0) {
  568. projectInfo["product_ids"] = productsInfo.id;
  569. projectInfo.product_names = productsInfo.name;
  570. projectInfo.price += Number(productsInfo.price);
  571. }
  572. this.order_data.project_list.push(projectInfo);
  573. this.isChange = true;
  574. this.isProject = false;
  575. this.calculationPrice();
  576. }
  577. },
  578. //获取最近七天的时间
  579. getWeekDate () {
  580. //获取系统当前时间
  581. let now = new Date();
  582. let nowTime = now.getTime();
  583. let oneDayTime = 24 * 60 * 60 * 1000;
  584. let tsTableList = [];
  585. for (let i = 0; i < 7; i++) {
  586. //显示周一
  587. let ShowTime = nowTime + i * oneDayTime;
  588. //初始化日期时间
  589. let myDate = new Date(ShowTime);
  590. let year = myDate.getFullYear();
  591. let month = myDate.getMonth() + 1;
  592. let date = myDate.getDate();
  593. let str = "周" + "日一二三四五六".charAt(myDate.getDay());
  594. let tsTableInfo = {};
  595. tsTableInfo["text"] = i == 0 ? "今天" : i == 1 ? "明天" : str;
  596. tsTableInfo["ts"] = month + "-" + date;
  597. tsTableInfo["order_day"] = year + "-" + month + "-" + date;
  598. tsTableList.push(tsTableInfo);
  599. }
  600. this.tsTableList = tsTableList;
  601. },
  602. //确定订单&支付
  603. determine () {
  604. if (this.order_data.project_list == 0) {
  605. this.$message.error(
  606. "项目选择不能为空!"
  607. );
  608. return;
  609. }
  610. this.getWeekDate();
  611. this.getOrderTime();
  612. this.order_time = "";
  613. this.tsTableIndex = 0;
  614. this.isTs = true;
  615. },
  616. //确定时间选择
  617. comfigTs () {
  618. let that = this;
  619. if (this.timeIndexText.length == 0) return;
  620. let order_data = [];
  621. this.order_data.project_list.forEach(item => {
  622. let order_data_info = {};
  623. order_data_info["id"] = item.id;
  624. if (item.product_ids != "") {
  625. order_data_info["product_id"] = item.product_ids;
  626. }
  627. order_data.push(order_data_info);
  628. });
  629. let params = {
  630. user_id: this.userInfo.user_id,
  631. order_data: JSON.stringify(order_data),
  632. order_day: this.tsTableList[this.tsTableIndex].order_day,
  633. order_time: this.timeIndexText
  634. };
  635. this.$loading({
  636. lock: true,
  637. text: '加载中',
  638. spinner: 'el-icon-loading',
  639. background: 'rgba(0, 0, 0, 0.7)'
  640. })
  641. api.padOrderAdd(params).then(res => {
  642. if (res.code == 200) {
  643. this.$loading().close()
  644. // 关闭当前页面并且跳转
  645. that.$router.push({
  646. path: "/confirmOrder/details",
  647. query: {
  648. id: res.data.order_id
  649. }
  650. });
  651. }
  652. });
  653. },
  654. //计算预约费用
  655. calculationPrice () {
  656. this.reservationPrice = 0;
  657. this.order_data.project_list.forEach(res => {
  658. this.reservationPrice += Number(res.price);
  659. });
  660. },
  661. changePayStatus () {
  662. this.PayStatus = false;
  663. if (this.payStatusInterval) {
  664. //如果定时器在运行则关闭
  665. clearInterval(this.payStatusInterval);
  666. }
  667. },
  668. payStatus () {
  669. api.payStatus({ id: this.id }).then(res => {
  670. if (res.data.pay_status == 1) {
  671. clearInterval(this.payStatusInterval);
  672. this.isPayCode = false;
  673. }
  674. });
  675. },
  676. //数组包含关系
  677. includes (arr1, arr2) {
  678. return arr2.every(val => arr1.includes(val));
  679. },
  680. //选中优惠券
  681. // selectPupop (item, index) {
  682. // this.couponList[index].Select = !this.couponList[index].Select
  683. // this.selectCouponList = this.couponList.filter(res => {
  684. // return res.Select == true
  685. // })
  686. // this.selectCouponList.forEach(res => {
  687. // })
  688. // },
  689. // 不可以用的不显示,如果同时有项目劵、抵扣劵、满减劵,只能用一种类型,其他劵不显示
  690. // 1、针对单个项目,项目劵可以多选
  691. // 2、抵扣劵、满减劵针对的是整个订单,当用户已使用了单个项目劵时,抵扣劵、满减劵就不能使用
  692. // 3、优惠劵可以给多个项目抵扣,
  693. // 4、默认抵扣金额最高的
  694. // 5、优惠劵排序,到期时间倒叙
  695. changeActive (e) {
  696. this.active = e;
  697. },
  698. selectTime (item) {
  699. if (item.status == 0) return;
  700. this.timeIndexText = item.order_time;
  701. },
  702. changetsTable (index) {
  703. this.tsTableIndex = index;
  704. this.getOrderTime();
  705. },
  706. getOrderTime () {
  707. let ids = "",
  708. idsList = [];
  709. this.order_data.project_list.forEach(res => {
  710. idsList.push(res.id);
  711. });
  712. ids = idsList.toString();
  713. let params = {
  714. ids: ids,
  715. order_day: this.tsTableList[this.tsTableIndex].order_day
  716. };
  717. api.getOrderTime(params).then(res => {
  718. this.tsBodyList = res.data;
  719. });
  720. },
  721. onOperation (index) {
  722. if (this.programmeList[index].onSelect) {
  723. this.$set(
  724. this.programmeList[index],
  725. "onSelect",
  726. !this.programmeList[index].onSelect
  727. );
  728. } else {
  729. this.$set(this.programmeList[index], "onSelect", true);
  730. }
  731. },
  732. //获取订单折扣类型
  733. getOrderDiscount () {
  734. api.getOrderDiscount({ id: this.id }).then(res => {
  735. this.discount = res.data.discount;
  736. this.getOrderInfo();
  737. });
  738. },
  739. getUserInfo () {
  740. let that = this;
  741. api.getUserInfo().then(res => {
  742. if (res.code == 200) {
  743. this.userInfos = res.data;
  744. }
  745. });
  746. }
  747. },
  748. created () {
  749. this.getUserInfo();
  750. let data = this.$route.query.data;
  751. console.log(data);
  752. if (data) {
  753. this.data = JSON.parse(data);
  754. }
  755. this.userInfo = this.data.user;
  756. this.lableList = this.data.tags;
  757. this.remarks = this.data.remark;
  758. this.programmeList = this.data.scheme_list;
  759. // this.order_data = this.data.order_data;
  760. this.reservationPrice = 0;
  761. this.poreList = this.data.detail_list;
  762. this.getProjectClassify()
  763. // this.getProjectList();
  764. // this.getOrderDiscount()
  765. },
  766. mounted () { },
  767. destroyed () {
  768. if (this.payStatusInterval) {
  769. //如果定时器在运行则关闭
  770. clearInterval(this.payStatusInterval);
  771. }
  772. }
  773. };
  774. </script>
  775. <style lang='less' scoped>
  776. .mine {
  777. height: 100%;
  778. display: flex;
  779. .left {
  780. width: 318px;
  781. padding: 12px 12px 0 12px;
  782. background: #ffffff;
  783. box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
  784. border-radius: 8px;
  785. font-size: 13px;
  786. font-family: PingFangSC-Regular, PingFang SC;
  787. font-weight: 400;
  788. color: #999999;
  789. line-height: 18px;
  790. overflow: scroll;
  791. height: 100%;
  792. .user-info {
  793. display: flex;
  794. align-items: center;
  795. .user-img {
  796. width: 96px;
  797. img {
  798. width: 100%;
  799. display: block;
  800. }
  801. }
  802. .user-span {
  803. margin-left: 12px;
  804. span {
  805. color: #333333;
  806. }
  807. }
  808. }
  809. .user-record {
  810. margin-top: 16px;
  811. display: flex;
  812. justify-content: space-between;
  813. .num {
  814. font-size: 18px;
  815. font-family: OPPOSans-B, OPPOSans;
  816. font-weight: normal;
  817. color: #fa7d22;
  818. line-height: 29px;
  819. }
  820. .tips {
  821. font-size: 13px;
  822. font-family: PingFangSC-Regular, PingFang SC;
  823. font-weight: 400;
  824. color: #333333;
  825. line-height: 30px;
  826. }
  827. .ts {
  828. font-size: 13px;
  829. font-family: PingFangSC-Regular, PingFang SC;
  830. font-weight: 400;
  831. color: #333333;
  832. line-height: 30px;
  833. }
  834. }
  835. .lable {
  836. margin-top: 23px;
  837. width: 100%;
  838. overflow: scroll;
  839. background: #ffffff;
  840. .lable-title {
  841. font-size: 14px;
  842. font-family: PingFangSC-Medium, PingFang SC;
  843. font-weight: 500;
  844. color: #333333;
  845. line-height: 20px;
  846. margin-bottom: 14px;
  847. }
  848. .lable-list {
  849. width: 100%;
  850. min-height: 105rpx;
  851. .lable-info {
  852. display: inline-block;
  853. padding: 0 12px;
  854. margin-left: 10px;
  855. height: 24px;
  856. line-height: 24px;
  857. border-radius: 2px;
  858. border: 1px solid #d6d6d6;
  859. margin-bottom: 10px;
  860. }
  861. .add-lable {
  862. display: inline-block;
  863. width: 27px;
  864. height: 24px;
  865. line-height: 24px;
  866. font-size: 12px;
  867. font-family: PingFang-SC-Regular, PingFang-SC;
  868. font-weight: 400;
  869. color: #333333;
  870. text-align: center;
  871. margin-left: 10px;
  872. border-radius: 2px;
  873. border: 1px solid #d6d6d6;
  874. }
  875. }
  876. .remarks {
  877. /deep/ .el-textarea__inner:focus {
  878. border-color: #fa852f;
  879. }
  880. }
  881. }
  882. .ps {
  883. font-size: 14px;
  884. font-family: PingFangSC-Medium, PingFang SC;
  885. font-weight: 500;
  886. color: #333333;
  887. line-height: 20px;
  888. .ps-text {
  889. margin-top: 10px;
  890. font-size: 12px;
  891. font-weight: 400;
  892. color: #666666;
  893. line-height: 17px;
  894. }
  895. }
  896. .programme {
  897. margin-top: 20px;
  898. width: 100%;
  899. background: #ffffff;
  900. border-radius: 8px;
  901. .tab {
  902. display: flex;
  903. align-items: center;
  904. justify-content: space-between;
  905. .tab-title {
  906. font-size: 14px;
  907. font-family: PingFangSC-Medium, PingFang SC;
  908. font-weight: 500;
  909. color: #333333;
  910. line-height: 20px;
  911. }
  912. }
  913. .programme-list {
  914. margin-top: 10px;
  915. position: relative;
  916. z-index: 1;
  917. .programme-info {
  918. position: relative;
  919. margin-bottom: 10px;
  920. border-radius: 4px;
  921. border: 1px solid #f5f5f5;
  922. display: flex;
  923. justify-content: space-between;
  924. padding: 8px 8px 8px 10px;
  925. align-items: center;
  926. .programme-left {
  927. display: flex;
  928. align-items: center;
  929. .programme-img {
  930. width: 48px;
  931. display: inline-block;
  932. img {
  933. width: 100%;
  934. display: block;
  935. }
  936. }
  937. .programme-tips {
  938. display: inline-block;
  939. margin-left: 10px;
  940. font-size: 10px;
  941. font-family: PingFangSC-Regular, PingFang SC;
  942. font-weight: 400;
  943. color: #999999;
  944. line-height: 14px;
  945. zoom: 0.83;
  946. }
  947. }
  948. .programme-right {
  949. font-size: 12px;
  950. font-family: PingFangSC-Regular, PingFang SC;
  951. font-weight: 400;
  952. color: #333333;
  953. line-height: 17px;
  954. .duration {
  955. margin-top: 14px;
  956. }
  957. }
  958. .operation {
  959. position: absolute;
  960. left: 50%;
  961. transform: translateX(-50%);
  962. top: 10px;
  963. z-index: 10;
  964. width: 44px;
  965. background: #ffffff;
  966. box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
  967. 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
  968. 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
  969. border-radius: 2px;
  970. padding: 10px;
  971. font-size: 12px;
  972. font-family: PingFangSC-Regular, PingFang SC;
  973. font-weight: 400;
  974. color: #333333;
  975. line-height: 17px;
  976. .delete {
  977. margin-top: 20px;
  978. }
  979. }
  980. }
  981. .programme-active {
  982. border: 1px solid #fa852f;
  983. }
  984. }
  985. }
  986. }
  987. .right {
  988. margin-left: 18px;
  989. position: relative;
  990. flex: 1;
  991. .shop-info {
  992. background: #ffffff;
  993. box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
  994. border-radius: 8px;
  995. padding: 12px;
  996. font-size: 13px;
  997. font-family: PingFangSC-Regular, PingFang SC;
  998. font-weight: 400;
  999. color: #999999;
  1000. line-height: 24px;
  1001. span {
  1002. font-weight: 500;
  1003. color: #333333;
  1004. }
  1005. }
  1006. .project {
  1007. margin-top: 18px;
  1008. background: #ffffff;
  1009. box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
  1010. border-radius: 8px;
  1011. padding: 16px 12px 12px 12px;
  1012. .project-title {
  1013. padding-bottom: 7px;
  1014. font-size: 14px;
  1015. font-family: PingFangSC-Medium, PingFang SC;
  1016. font-weight: 500;
  1017. color: #333333;
  1018. line-height: 20px;
  1019. display: flex;
  1020. justify-content: space-between;
  1021. align-items: center;
  1022. span {
  1023. color: #fa7d22;
  1024. }
  1025. .add-project {
  1026. width: 60px;
  1027. height: 28px;
  1028. background: #fa7d22;
  1029. border-radius: 8px;
  1030. font-size: 14px;
  1031. font-family: PingFangSC-Medium, PingFang SC;
  1032. font-weight: 500;
  1033. color: #ffffff;
  1034. line-height: 28px;
  1035. text-align: center;
  1036. }
  1037. }
  1038. .project-list {
  1039. padding-top: 10px;
  1040. height: 220px;
  1041. overflow: scroll;
  1042. .project-info {
  1043. margin-bottom: 10px;
  1044. display: flex;
  1045. .project-image {
  1046. width: 60px;
  1047. height: 60px;
  1048. img {
  1049. width: 100%;
  1050. display: block;
  1051. }
  1052. }
  1053. .project-content {
  1054. flex: 1;
  1055. margin-left: 10px;
  1056. .title-price {
  1057. display: flex;
  1058. justify-content: space-between;
  1059. font-size: 14px;
  1060. font-family: PingFangSC-Medium, PingFang SC;
  1061. font-weight: 500;
  1062. color: #292929;
  1063. line-height: 22px;
  1064. }
  1065. .project-tips {
  1066. font-size: 12px;
  1067. font-family: PingFangSC-Regular, PingFang SC;
  1068. font-weight: 400;
  1069. color: #999999;
  1070. line-height: 18px;
  1071. }
  1072. .project-zoom {
  1073. font-size: 12px;
  1074. font-family: PingFangSC-Regular, PingFang SC;
  1075. font-weight: 400;
  1076. color: #fa7d22;
  1077. line-height: 18px;
  1078. display: flex;
  1079. align-items: center;
  1080. justify-content: space-between;
  1081. img {
  1082. width: 20px;
  1083. }
  1084. .delete {
  1085. margin-left: 10px;
  1086. }
  1087. }
  1088. }
  1089. }
  1090. }
  1091. }
  1092. .cost {
  1093. overflow: scroll;
  1094. background: #ffffff;
  1095. border-radius: 8px;
  1096. margin-top: 18px;
  1097. padding: 10px 19px 11px 12px;
  1098. font-size: 14px;
  1099. font-family: PingFangSC-Regular, PingFang SC;
  1100. font-weight: 400;
  1101. color: #333333;
  1102. line-height: 20px;
  1103. .cost-coupon-list {
  1104. border-bottom: 1px solid #f9f9f9;
  1105. }
  1106. .cost-title {
  1107. display: flex;
  1108. justify-content: space-between;
  1109. }
  1110. .coupon {
  1111. margin-top: 10px;
  1112. display: flex;
  1113. justify-content: space-between;
  1114. .coupon-tips {
  1115. display: flex;
  1116. align-items: center;
  1117. .coupon-icon {
  1118. width: 16px;
  1119. img {
  1120. width: 100%;
  1121. display: block;
  1122. }
  1123. }
  1124. .coupon-title {
  1125. margin-left: 3px;
  1126. }
  1127. .coupon-tip {
  1128. margin-left: 10px;
  1129. background: #ffefeb;
  1130. border-radius: 4px;
  1131. border: 1px solid #ff3007;
  1132. font-size: 10px;
  1133. font-family: PingFangSC-Regular, PingFang SC;
  1134. font-weight: 400;
  1135. color: #ff3007;
  1136. line-height: 14px;
  1137. padding: 2px 6px;
  1138. zoom: 0.83;
  1139. }
  1140. }
  1141. }
  1142. .coupon-ps {
  1143. margin-left: -6px;
  1144. margin-top: 11px;
  1145. display: flex;
  1146. justify-content: space-between;
  1147. font-size: 12px;
  1148. font-family: PingFangSC-Regular, PingFang SC;
  1149. font-weight: 400;
  1150. color: #333333;
  1151. line-height: 17px;
  1152. .cou-price {
  1153. font-weight: 500;
  1154. color: #ff3007;
  1155. }
  1156. }
  1157. .over-price {
  1158. margin-top: 14px;
  1159. text-align: right;
  1160. .price-num {
  1161. font-size: 18px;
  1162. font-family: PingFangSC-Medium, PingFang SC;
  1163. font-weight: 500;
  1164. color: #ff3007;
  1165. line-height: 25px;
  1166. }
  1167. }
  1168. }
  1169. .payment {
  1170. position: absolute;
  1171. bottom: 0;
  1172. margin-top: 18px;
  1173. left: 50%;
  1174. transform: translateX(-50%);
  1175. width: 176px;
  1176. height: 28px;
  1177. background: #fa7d22;
  1178. border-radius: 14px;
  1179. font-size: 14px;
  1180. font-family: PingFangSC-Medium, PingFang SC;
  1181. font-weight: 500;
  1182. color: #ffffff;
  1183. line-height: 28px;
  1184. text-align: center;
  1185. }
  1186. }
  1187. .coupon-block {
  1188. width: 540px;
  1189. height: 400px;
  1190. background: #ffffff;
  1191. border-radius: 8px;
  1192. position: relative;
  1193. padding: 42px;
  1194. .delete-pupop {
  1195. width: 32px;
  1196. position: absolute;
  1197. right: 5px;
  1198. top: 5px;
  1199. img {
  1200. width: 100%;
  1201. }
  1202. }
  1203. .coupon-pupop-title {
  1204. font-size: 14px;
  1205. font-family: PingFangSC-Medium, PingFang SC;
  1206. font-weight: 500;
  1207. color: #333333;
  1208. line-height: 20px;
  1209. text-align: center;
  1210. }
  1211. .coupon-lists {
  1212. display: inline-block;
  1213. position: relative;
  1214. left: 50%;
  1215. transform: translateX(-50%);
  1216. margin-top: 20px;
  1217. height: 228px;
  1218. overflow: scroll;
  1219. .coupon-info {
  1220. width: 345px;
  1221. margin-bottom: 20px;
  1222. padding: 20px 14px 10px 14px;
  1223. position: relative;
  1224. background: #fff4e6;
  1225. border-radius: 12px;
  1226. .coupon-tips-text {
  1227. position: absolute;
  1228. left: 0;
  1229. top: 0;
  1230. padding: 0 8px;
  1231. height: 18px;
  1232. background: #875617;
  1233. border-radius: 12px 0px 12px 0px;
  1234. font-size: 12px;
  1235. font-family: PingFangSC-Medium, PingFang SC;
  1236. font-weight: 500;
  1237. color: #ffffff;
  1238. line-height: 18px;
  1239. zoom: 0.83;
  1240. text-align: center;
  1241. }
  1242. .top {
  1243. display: flex;
  1244. justify-content: space-between;
  1245. align-items: center;
  1246. padding-bottom: 10px;
  1247. border-bottom: 1px dashed #ffdfb6;
  1248. .all-free {
  1249. font-size: 22px;
  1250. font-family: PingFangSC-Medium, PingFang SC;
  1251. font-weight: 500;
  1252. color: #ff3007;
  1253. line-height: 30px;
  1254. }
  1255. .discount {
  1256. .price-num {
  1257. font-size: 28px;
  1258. font-family: PingFangSC-Medium, PingFang SC;
  1259. font-weight: 500;
  1260. color: #ff3007;
  1261. line-height: 40px;
  1262. .size {
  1263. font-size: 14px;
  1264. line-height: 20px;
  1265. }
  1266. }
  1267. .price-tips {
  1268. font-size: 12px;
  1269. font-family: PingFangSC-Regular, PingFang SC;
  1270. font-weight: 400;
  1271. color: #ff3007;
  1272. line-height: 17px;
  1273. }
  1274. }
  1275. .discount-over {
  1276. font-size: 22px;
  1277. font-family: PingFangSC-Medium, PingFang SC;
  1278. font-weight: 500;
  1279. color: #ff3007;
  1280. line-height: 30px;
  1281. }
  1282. .coupon-tip {
  1283. .tips-title {
  1284. font-size: 16px;
  1285. font-family: PingFangSC-Medium, PingFang SC;
  1286. font-weight: 500;
  1287. color: #875617;
  1288. line-height: 22px;
  1289. }
  1290. .tips-ts {
  1291. margin-top: 4px;
  1292. font-size: 12px;
  1293. font-family: PingFangSC-Regular, PingFang SC;
  1294. font-weight: 400;
  1295. color: #875617;
  1296. line-height: 17px;
  1297. }
  1298. }
  1299. .choice-icon {
  1300. width: 20px;
  1301. img {
  1302. width: 100%;
  1303. }
  1304. }
  1305. }
  1306. .bottom {
  1307. padding-top: 9px;
  1308. .coupon-notes {
  1309. display: flex;
  1310. justify-content: space-between;
  1311. .notes-text {
  1312. width: 314px;
  1313. font-size: 12px;
  1314. font-family: PingFangSC-Regular, PingFang SC;
  1315. font-weight: 400;
  1316. color: #c38029;
  1317. line-height: 18px;
  1318. }
  1319. .notes-icon {
  1320. width: 24px;
  1321. img {
  1322. width: 100%;
  1323. }
  1324. }
  1325. }
  1326. }
  1327. }
  1328. }
  1329. }
  1330. .project-block {
  1331. width: 540px;
  1332. height: 400px;
  1333. background: #ffffff;
  1334. border-radius: 8px;
  1335. position: relative;
  1336. padding: 42px;
  1337. .delete-pupop {
  1338. width: 32px;
  1339. position: absolute;
  1340. right: 5px;
  1341. top: 5px;
  1342. img {
  1343. width: 100%;
  1344. }
  1345. }
  1346. .project-pupop-title {
  1347. font-size: 14px;
  1348. font-family: PingFangSC-Medium, PingFang SC;
  1349. font-weight: 500;
  1350. color: #333333;
  1351. line-height: 20px;
  1352. text-align: center;
  1353. }
  1354. .project-select {
  1355. text-align: center;
  1356. margin-top: 26px;
  1357. }
  1358. .products-select {
  1359. text-align: center;
  1360. margin-top: 20px;
  1361. }
  1362. .products-button {
  1363. position: absolute;
  1364. bottom: 42px;
  1365. left: 50%;
  1366. transform: translateX(-50%);
  1367. width: 176px;
  1368. height: 28px;
  1369. background: #fa7d22;
  1370. border-radius: 14px;
  1371. font-size: 14px;
  1372. font-family: PingFangSC-Medium, PingFang SC;
  1373. font-weight: 500;
  1374. color: #ffffff;
  1375. line-height: 28px;
  1376. text-align: center;
  1377. }
  1378. }
  1379. .ts-block {
  1380. width: 540px;
  1381. height: 420px;
  1382. background: #ffffff;
  1383. border-radius: 8px;
  1384. position: relative;
  1385. padding: 42px 105px;
  1386. .delete-pupop {
  1387. width: 32px;
  1388. position: absolute;
  1389. right: 5px;
  1390. top: 5px;
  1391. img {
  1392. width: 100%;
  1393. }
  1394. }
  1395. .ts-pupop-title {
  1396. font-size: 14px;
  1397. font-family: PingFangSC-Medium, PingFang SC;
  1398. font-weight: 500;
  1399. color: #333333;
  1400. line-height: 20px;
  1401. text-align: center;
  1402. }
  1403. .ts-content {
  1404. .ts-table {
  1405. font-size: 14px;
  1406. font-family: PingFangSC-Medium, PingFang SC;
  1407. font-weight: 500;
  1408. color: #999999;
  1409. line-height: 20px;
  1410. padding: 9px 0;
  1411. display: flex;
  1412. justify-content: space-between;
  1413. li {
  1414. text-align: center;
  1415. }
  1416. .ts-table-active {
  1417. color: #fa7d22;
  1418. border-bottom: 4px solid #fa4622;
  1419. }
  1420. }
  1421. .time-slot {
  1422. margin-top: 20px;
  1423. display: flex;
  1424. justify-content: space-between;
  1425. font-size: 16px;
  1426. font-family: PingFangSC-Regular, PingFang SC;
  1427. font-weight: 400;
  1428. color: #999999;
  1429. line-height: 22px;
  1430. }
  1431. .ts-boty {
  1432. margin-top: 10px;
  1433. margin-left: -19px;
  1434. display: flex;
  1435. justify-content: unset;
  1436. flex-wrap: wrap;
  1437. li {
  1438. margin-top: 10px;
  1439. width: 68px;
  1440. margin-left: 19px;
  1441. height: 30px;
  1442. line-height: 30px;
  1443. text-align: center;
  1444. background: #f9f9f9;
  1445. border-radius: 8px;
  1446. font-size: 16px;
  1447. font-family: PingFangSC-Regular, PingFang SC;
  1448. font-weight: 400;
  1449. color: #333333;
  1450. }
  1451. .time-active {
  1452. background: #fff0e6;
  1453. border: 1px solid #fa7d22;
  1454. font-weight: 500;
  1455. color: #fa7d22;
  1456. }
  1457. }
  1458. }
  1459. .ts-button {
  1460. position: absolute;
  1461. bottom: 42px;
  1462. padding: 0;
  1463. left: 50%;
  1464. transform: translateX(-50%);
  1465. width: 176px;
  1466. height: 28px;
  1467. background: #fa7d22;
  1468. border-radius: 14px;
  1469. font-size: 14px;
  1470. font-family: PingFangSC-Medium, PingFang SC;
  1471. font-weight: 500;
  1472. color: #ffffff;
  1473. line-height: 28px;
  1474. text-align: center;
  1475. }
  1476. }
  1477. .pore-block {
  1478. width: 540px;
  1479. height: 400px;
  1480. background: #ffffff;
  1481. border-radius: 8px;
  1482. position: relative;
  1483. padding: 42px;
  1484. .delete-pupop {
  1485. width: 32px;
  1486. position: absolute;
  1487. right: 5px;
  1488. top: 5px;
  1489. img {
  1490. width: 100%;
  1491. }
  1492. }
  1493. .pore-content {
  1494. overflow: scroll;
  1495. height: 310px;
  1496. .pore-info {
  1497. margin-top: 10px;
  1498. border-radius: 4px;
  1499. border: 1px solid #f5f5f5;
  1500. .pore-top {
  1501. display: flex;
  1502. justify-content: space-between;
  1503. align-items: center;
  1504. font-size: 14px;
  1505. font-family: PingFangSC-Regular, PingFang SC;
  1506. font-weight: 400;
  1507. color: #666666;
  1508. line-height: 20px;
  1509. padding: 10px;
  1510. .pore-title {
  1511. .pore-medium {
  1512. font-size: 18px;
  1513. color: #fa7d22;
  1514. line-height: 25px;
  1515. }
  1516. }
  1517. .pore-over {
  1518. font-size: 12px;
  1519. }
  1520. }
  1521. .pore-bottom {
  1522. padding: 6px 8px;
  1523. background: #f5f5f5;
  1524. border-radius: 4px;
  1525. font-size: 12px;
  1526. font-family: PingFang-SC-Regular, PingFang-SC;
  1527. font-weight: 400;
  1528. color: #333333;
  1529. line-height: 14px;
  1530. }
  1531. }
  1532. }
  1533. }
  1534. .pay-block {
  1535. width: 540px;
  1536. height: 400px;
  1537. background: #ffffff;
  1538. border-radius: 8px;
  1539. position: relative;
  1540. padding: 42px;
  1541. .delete-pupop {
  1542. width: 32px;
  1543. position: absolute;
  1544. right: 5px;
  1545. top: 5px;
  1546. img {
  1547. width: 100%;
  1548. }
  1549. }
  1550. .pay-title {
  1551. font-size: 14px;
  1552. font-family: PingFangSC-Medium, PingFang SC;
  1553. font-weight: 500;
  1554. color: #333333;
  1555. line-height: 20px;
  1556. text-align: center;
  1557. }
  1558. .pay-suc {
  1559. margin-top: 40px;
  1560. margin-bottom: 80px;
  1561. text-align: center;
  1562. img {
  1563. width: 140px;
  1564. }
  1565. }
  1566. .pay-price {
  1567. margin-top: 10px;
  1568. font-size: 14px;
  1569. font-family: OPPOSans-B, OPPOSans;
  1570. font-weight: normal;
  1571. color: #fa4622;
  1572. text-align: center;
  1573. line-height: 31px;
  1574. span {
  1575. font-size: 20px;
  1576. }
  1577. }
  1578. .banner {
  1579. margin-top: 24px;
  1580. .qrCode {
  1581. text-align: center;
  1582. }
  1583. }
  1584. .pay-list {
  1585. width: 338px;
  1586. margin-top: 8px;
  1587. position: relative;
  1588. left: 50%;
  1589. transform: translateX(-50%);
  1590. .pay-info {
  1591. margin-top: 16px;
  1592. display: flex;
  1593. justify-content: space-between;
  1594. align-items: center;
  1595. height: 44px;
  1596. border-radius: 35px;
  1597. border: 1px solid #d0d0d0;
  1598. padding: 0 20px;
  1599. .pay-left {
  1600. margin-left: 8px;
  1601. font-size: 16px;
  1602. font-family: PingFangSC-Regular, PingFang SC;
  1603. font-weight: 400;
  1604. color: #333333;
  1605. line-height: 22px;
  1606. display: flex;
  1607. align-items: center;
  1608. img {
  1609. width: 24px;
  1610. }
  1611. span {
  1612. margin-left: 20px;
  1613. }
  1614. }
  1615. .pay-right {
  1616. img {
  1617. width: 24px;
  1618. }
  1619. }
  1620. }
  1621. }
  1622. .pay-button {
  1623. margin-top: 28px;
  1624. width: 176px;
  1625. height: 28px;
  1626. background: #fa7d22;
  1627. border-radius: 14px;
  1628. font-size: 14px;
  1629. font-family: PingFangSC-Medium, PingFang SC;
  1630. font-weight: 500;
  1631. color: #ffffff;
  1632. line-height: 28px;
  1633. text-align: center;
  1634. position: relative;
  1635. left: 50%;
  1636. transform: translateX(-50%);
  1637. }
  1638. }
  1639. }
  1640. </style>