detailsewm.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428
  1. <template>
  2. <view class="page" :style="{'min-height':h+'px','padding-top':'0px'}">
  3. <!-- <c-nav-bar1 :title="titles"></c-nav-bar1> -->
  4. <view class="bg"></view>
  5. <view class="content">
  6. <view class="head">
  7. <text class="status disabled" v-if="getalllist.orderStatus=='0'">待支付</text>
  8. <text class="status disabled" v-if="getalllist.orderStatus=='-1'">已取消</text>
  9. <text class="status s2" v-if="getalllist.orderStatus=='4'">待使用</text>
  10. <text class="status s3" v-if="getalllist.orderStatus=='-3'">已退款</text>
  11. <text class="status s3" v-if="getalllist.orderStatus=='3'">已使用</text>
  12. </view>
  13. <view class="hand-title">
  14. 请在{{getalllist.activityEndTime.substring(0,10)}}日(含)前到店消费
  15. </view>
  16. <view class="ticketInfonmb">
  17. <view class="taocan">
  18. <view class="taocan1">
  19. <u--image :src="getalllist.productImg.split(',')[0]" width="168rpx" height="168rpx"></u--image>
  20. </view>
  21. <view class="taocan2">
  22. <view class="taoxxq1">
  23. {{getalllist.productName}}
  24. </view>
  25. <view class="taoxxq2">
  26. 周一至周日 · 需提前预约
  27. </view>
  28. <view class="taoxxq3">
  29. <view class="jiage1">
  30. <span>¥</span> {{getalllist.realityPay}}
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. <!-- 订单信息 -->
  37. <view class="basicInfo">
  38. <view class="chaoji">
  39. 套餐明细
  40. </view>
  41. <view class="taocanmx">
  42. <view class="taocanlistmx" v-for="(item,index) in JSON.parse(getalllist.productsDetail)" :key="index">
  43. <view class="taocanlistmx1">
  44. *{{item.name}}
  45. </view>
  46. <view class="taocanlistmx2">
  47. ({{item.number}}份)
  48. </view>
  49. <view class="taocanlistmx3">
  50. ¥{{item.price}}
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. <view class="basicInfo">
  56. <view class="chaoji" style="margin: 0 0 40rpx 0;">
  57. 订单信息
  58. </view>
  59. <view class="dingdanxinxi">
  60. <view class="dingdanxinxi1">
  61. <view class="dingdanxinxi2">
  62. 订单编号
  63. </view>
  64. <view class="dingdanxinxi3">
  65. {{getalllist.orderCode}}
  66. </view>
  67. </view>
  68. <view class="dingdanxinxi1">
  69. <view class="dingdanxinxi2">
  70. 付款时间
  71. </view>
  72. <view class="dingdanxinxi3">
  73. {{getalllist.paymentTime}}
  74. </view>
  75. </view>
  76. <view class="dingdanxinxi1">
  77. <view class="dingdanxinxi2">
  78. 订单总价
  79. </view>
  80. <view class="dingdanxinxi3">
  81. ¥{{getalllist.realityPay}}
  82. </view>
  83. </view>
  84. <view class="dingdanxinxi1">
  85. <view class="dingdanxinxi2">
  86. 实际付款
  87. </view>
  88. <view class="dingdanxinxi3">
  89. ¥{{getalllist.realityPay}}
  90. </view>
  91. </view>
  92. <view class="dingdanxinxi1">
  93. <view class="dingdanxinxi2">
  94. 联系方式
  95. </view>
  96. <view class="dingdanxinxi3">
  97. {{getalllist.guestPhone}}
  98. </view>
  99. </view>
  100. </view>
  101. </view>
  102. </view>
  103. <view class="btns">
  104. <view class="hexiao" @click="hexiaonima">
  105. 确认核销
  106. </view>
  107. </view>
  108. <u-toast ref="uToast"></u-toast>
  109. <!-- 取消弹框 -->
  110. <u-modal :show="showAgree" :title="title" :content='content' showCancelButton="true" confirmText='确定'
  111. confirmColor='#007A69' @confirm="confirm" @cancel='cancel'></u-modal>
  112. </view>
  113. </template>
  114. <script>
  115. export default {
  116. data() {
  117. return {
  118. titles: '订单详情',
  119. h: uni.getSystemInfoSync().windowHeight,
  120. mt: uni.getSystemInfoSync().statusBarHeight + 44,
  121. value: 1,
  122. status: 1,
  123. id: '',
  124. getalllist: {},
  125. bedData: {},
  126. arriveTime: '',
  127. arriveTimes: '',
  128. leaveTime: '',
  129. leaveTimes: '',
  130. count: '',
  131. orderId: '',
  132. price: '',
  133. form: {
  134. initiator: 2,
  135. orderCode: '',
  136. status: ''
  137. },
  138. num: 0,
  139. title: '温馨提示',
  140. content: '您确定要取消吗?确定取消将不可撤回,再次预订可能因为没有房间,影响后续行程!',
  141. showAgree: false,
  142. checkInTimeStart: '',
  143. checkOutTime: '',
  144. FormData: {
  145. arriveDate: "", // 到达时间(yyyy-MM-dd)
  146. leaveDate: "", //离开时间(yyyy-MM-dd)
  147. limit: 10, //每页显示记录数
  148. page: 1, //当前页码
  149. name: "",
  150. islandId: '', //岛屿id
  151. priceSort: '', //价格排序: 1有高高低, 0由低到高
  152. featureLabels: '', // 特色服务(逗号分割):字典FeatureLabels
  153. category: '', // 酒店类别(逗号分割): 字典HotelCategory
  154. },
  155. departWeek: '',
  156. departWeeks: '',
  157. weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
  158. checkInRooms: 0,
  159. hexiaodata:{},
  160. }
  161. },
  162. onLoad(option) {
  163. //this.id = option.orderId;
  164. //console.log('111111111111111111', this.id)
  165. //this.getList()
  166. console.log('++++++', JSON.parse(option.list));
  167. this.hexiaodata=JSON.parse(option.list);
  168. let postdata={
  169. merchantCategory:4,
  170. orderCode:JSON.parse(option.list).orderCode,
  171. };
  172. this.$api.get('/api/merchant/food/queryOrderDetail', postdata).then(res => {
  173. console.log('111111111111111111',res.data.data)
  174. this.getalllist=res.data.data;
  175. })
  176. },
  177. methods: {
  178. hexiaonima(){
  179. console.log('this.getalllist',this.hexiaodata)
  180. this.$api.post('/api/merchant/food/scenic/merchant/order/verifyOrderQrCode?writeOffCode',this.hexiaodata)
  181. .then(res => {
  182. if (res.data.code == 0) {
  183. this.$showToast('核销成功');
  184. uni.setStorageSync('list',{totalPrice:this.getalllist.realityPay});
  185. setTimeout(()=>{
  186. uni.navigateTo({
  187. url: '/pagesHouse/Mine/ordersList/outcome'
  188. })
  189. },1500)
  190. // uni.navigateBack({
  191. // delta: 1
  192. // });
  193. } else {
  194. this.$showToast(res.data.msg)
  195. }
  196. })
  197. },
  198. copyOrderNo(item) {
  199. let that = this;
  200. // #ifdef H5
  201. this.$copyText(item.orderCode).then(res => {
  202. this.$showToast('复制成功');
  203. })
  204. // #endif
  205. // #ifdef MP-WEIXIN
  206. uni.setClipboardData({
  207. data: item.orderCode,
  208. success(res) {
  209. that.$showToast('复制成功');
  210. },
  211. fail(err) {
  212. that.$showToast('复制失败');
  213. }
  214. })
  215. // #endif
  216. },
  217. toEvaluate(item) {
  218. item.guideId = item.id;
  219. item.sourceType = 2;
  220. uni.navigateTo({
  221. url: '/pagesMy/appraise/appraise?obj=' + JSON.stringify(item)
  222. })
  223. },
  224. // 导航
  225. navigation(item) {
  226. // let lat = item.lat
  227. // let lon = item.lon
  228. uni.openLocation({
  229. latitude: Number(item.lat),
  230. longitude: Number(item.lon),
  231. name: item.homestayName,
  232. });
  233. },
  234. // 去酒店详情
  235. cardBtn(item) {
  236. // 初始化
  237. let arriveDate = new Date().Format('yyyy-MM-dd')
  238. let mt = new Date().setDate(new Date().getDate() + 1);
  239. let leaveDate = new Date(mt).Format('yyyy-MM-dd')
  240. console.log(arriveDate, leaveDate);
  241. uni.navigateTo({
  242. url: "/pagesTrip/hotel/details/index?list=" +
  243. JSON.stringify([{
  244. homestayId: item.homestayId,
  245. name: '',
  246. arriveDate: arriveDate, // 到达时间(yyyy-MM-dd)
  247. leaveDate: leaveDate, //离开时间(yyyy-MM-dd)
  248. }, ]),
  249. });
  250. },
  251. // 立即支付
  252. pay() {
  253. var list = JSON.stringify({
  254. price: this.list.orderAmount,
  255. orderId: this.orderId
  256. })
  257. this.$api.post('/order/app/pay/createOrder', {
  258. orderCode: this.orderCode,
  259. tradeType: 'JSAPI',
  260. openId: JSON.parse(uni.getStorageSync('userInfo')).openId
  261. }, false).then(res => {
  262. // uni.navigateTo({
  263. // url: '/pagesTrip/hotel/paymentSuccess/index?list=' + list
  264. // })
  265. if (res.statusCode == 200 && res.data != null) {
  266. this.payShow = false;
  267. // var obj = { name: 'John', age: 25 };
  268. // wx.setStorageSync('wxPay', res.data);
  269. this.$wxPay(res.data).then(result => {
  270. uni.redirectTo({
  271. url: '/pagesTrip/hotel/paymentSuccess/index?list=' + list
  272. })
  273. })
  274. }
  275. })
  276. },
  277. // 拨打电话。
  278. phone() {
  279. uni.makePhoneCall({
  280. phoneNumber: this.getalllist.phone //仅为示例
  281. });
  282. },
  283. // 取消订单
  284. toStatus0() {
  285. this.showAgree = true
  286. },
  287. //确定取消
  288. confirm() {
  289. this.agree = true
  290. this.showAgree = false
  291. this.$api.post('/api/hotel/cancelOrder', this.form).then(res => {
  292. // uni.navigateBack(1)
  293. uni.navigateTo({
  294. url: '/pagesMy/order/index'
  295. })
  296. this.getList()
  297. })
  298. },
  299. // 取消
  300. cancel() {
  301. this.showAgree = false
  302. },
  303. // 删除订单
  304. toStatus1() {
  305. this.$refs.uToast.show({
  306. type: 'success',
  307. title: '',
  308. message: "正在开发",
  309. iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
  310. })
  311. },
  312. // 申请退款
  313. GoRefund() {
  314. uni.redirectTo({
  315. url: "/pagesTrip/fineFood/fineFood/reformoney?list=" + JSON.stringify(this.getalllist)
  316. })
  317. },
  318. // 再次预定
  319. applyAfterSales(item) {
  320. // 初始化
  321. let arriveDate = new Date().Format('yyyy-MM-dd')
  322. let mt = new Date().setDate(new Date().getDate() + 1);
  323. let leaveDate = new Date(mt).Format('yyyy-MM-dd')
  324. console.log(arriveDate, leaveDate);
  325. uni.navigateTo({
  326. url: "/pagesTrip/hotel/details/index?list=" +
  327. JSON.stringify([{
  328. homestayId: item.homestayId,
  329. name: '',
  330. arriveDate: arriveDate, // 到达时间(yyyy-MM-dd)
  331. leaveDate: leaveDate, //离开时间(yyyy-MM-dd)
  332. }, ]),
  333. });
  334. // this.$refs.uToast.show({
  335. // type: 'success',
  336. // title: '',
  337. // message: "正在开发",
  338. // iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
  339. // })
  340. },
  341. getList() {
  342. this.$api.get('/api/merchant/food/queryOrderDetail', {
  343. merchantCategory: 4,
  344. orderCode: this.id
  345. })
  346. .then(res => {
  347. console.log('res.data.data', res.data.data)
  348. this.getalllist = res.data.data;
  349. //this.qrFun(this.object.orderCode)
  350. // this.list = res.data.data
  351. // this.orderCode = res.data.data.orderCode
  352. // this.num = res.data.data.num
  353. // this.price = res.data.data.realityPay
  354. // this.orderId = res.data.data.id
  355. // this.checkInRooms = res.data.data.checkInRooms
  356. // this.bedData = res.data.data.bedData[0]
  357. // this.arriveTime = res.data.data.arriveDate.slice(5, 7); // 截取第一个字符
  358. // this.arriveTimes = res.data.data.arriveDate.slice(8, 10); // 截取第一个字符
  359. // this.leaveTime = res.data.data.leaveDate.slice(5, 7); // 截取第一个字符
  360. // this.leaveTimes = res.data.data.leaveDate.slice(8, 10); // 截取第一个字符
  361. // this.count = Math.abs(this.leaveTimes - this.arriveTimes);
  362. // this.checkInTimeStart = res.data.data.arriveDate.slice(11, 16)
  363. // this.checkOutTime = res.data.data.leaveDate.slice(11, 16)
  364. // this.landlinePhone = res.data.data.landlinePhone
  365. // this.form.orderCode = res.data.data.orderCode
  366. // this.form.status = res.data.data.orderStatus
  367. // this.FormData.arriveDate = res.data.data.arriveDate.slice(0, 10)
  368. // this.FormData.leaveDate = res.data.data.leaveDate.slice(0, 10)
  369. // this.departWeek = this.weeks[new Date(res.data.data.arriveDate).getDay()];
  370. // this.departWeeks = this.weeks[new Date(res.data.data.leaveDate).getDay()];
  371. // console.log('1111111', this.departWeek);
  372. // console.log('222222', this.departWeeks);
  373. // this.FormData.arriveDate=res.data.data.arriveDate
  374. })
  375. }
  376. }
  377. }
  378. </script>
  379. <style lang="scss" scoped>
  380. .dingdanxinxi {
  381. .dingdanxinxi1 {
  382. display: flex;
  383. .dingdanxinxi2 {
  384. width: 140rpx;
  385. height: 60rpx;
  386. font-family: PingFangSC, PingFang SC;
  387. font-weight: 400;
  388. font-size: 28rpx;
  389. color: #808080;
  390. line-height: 60rpx;
  391. text-align: justify;
  392. font-style: normal;
  393. }
  394. .dingdanxinxi3 {
  395. flex-grow: 1;
  396. height: 60rpx;
  397. font-family: PingFangSC, PingFang SC;
  398. font-weight: 400;
  399. font-size: 28rpx;
  400. color: #333333;
  401. line-height: 60rpx;
  402. text-align: justify;
  403. font-style: normal;
  404. }
  405. }
  406. }
  407. .chaoji {
  408. width: 100%;
  409. height: 40rpx;
  410. font-family: PingFang-SC, PingFang-SC;
  411. font-weight: bold;
  412. font-size: 40rpx;
  413. color: #1C1E41;
  414. line-height: 40rpx;
  415. text-align: left;
  416. font-style: normal;
  417. margin: 40rpx 0 0 0;
  418. }
  419. .goumai {
  420. position: fixed;
  421. bottom: 0rpx;
  422. left: 30rpx;
  423. background: #fff;
  424. width: 690rpx;
  425. height: 140rpx;
  426. margin: 0 auto;
  427. display: flex;
  428. align-items: center;
  429. justify-content: space-between;
  430. .goumai2 {
  431. width: 220rpx;
  432. height: 88rpx;
  433. background: #007A69;
  434. border-radius: 44px;
  435. font-family: PingFang-SC, PingFang-SC;
  436. font-weight: bold;
  437. font-size: 32rpx;
  438. color: #FFFFFF;
  439. line-height: 88rpx;
  440. text-align: center;
  441. font-style: normal;
  442. }
  443. .goumai1 {
  444. flex-grow: 1;
  445. height: 140rpx;
  446. display: flex;
  447. align-items: center;
  448. .zongji1 {
  449. height: 140rpx;
  450. font-family: PingFangSC, PingFang SC;
  451. font-weight: 400;
  452. font-size: 24rpx;
  453. color: #666666;
  454. line-height: 140rpx;
  455. text-align: left;
  456. font-style: normal;
  457. }
  458. .zongji2 {
  459. height: 140rpx;
  460. font-family: PingFangSC, PingFang SC;
  461. font-weight: 400;
  462. font-size: 24rpx;
  463. color: #FF4141;
  464. line-height: 140rpx;
  465. text-align: left;
  466. font-style: normal;
  467. }
  468. .zongji3 {
  469. height: 140rpx;
  470. font-family: DINAlternate, DINAlternate;
  471. font-weight: bold;
  472. font-size: 48rpx;
  473. color: #FF4141;
  474. line-height: 140rpx;
  475. text-align: left;
  476. font-style: normal;
  477. padding: 0 8rpx;
  478. }
  479. .zongji4 {}
  480. }
  481. }
  482. .canyu {
  483. width: 100%;
  484. height: 190rpx;
  485. display: flex;
  486. margin: 40rpx 0 40rpx 0;
  487. .canyu1 {
  488. width: 190rpx;
  489. height: 190rpx;
  490. }
  491. .canyu2 {
  492. flex-grow: 1;
  493. height: 190rpx;
  494. .papdang1 {
  495. width: 100%;
  496. height: 95rpx;
  497. display: flex;
  498. .haixian2 {
  499. width: 56rpx;
  500. height: 95rpx;
  501. display: flex;
  502. justify-content: center;
  503. align-items: center;
  504. }
  505. .haixian1 {
  506. flex-grow: 1;
  507. height: 95rpx;
  508. .xhpd1 {
  509. width: 100%;
  510. height: 47.5rpx;
  511. font-family: PingFang-SC, PingFang-SC;
  512. font-weight: bold;
  513. font-size: 32rpx;
  514. color: #111111;
  515. line-height: 47.5rpx;
  516. text-align: left;
  517. font-style: normal;
  518. padding-left: 20rpx;
  519. }
  520. .xhpd2 {
  521. width: 100%;
  522. height: 47.5rpx;
  523. display: flex;
  524. align-items: center;
  525. padding-left: 20rpx;
  526. .xhpd2new {
  527. height: 47.5rpx;
  528. font-family: PingFangSC, PingFang SC;
  529. font-weight: 400;
  530. font-size: 24rpx;
  531. color: #777777;
  532. line-height: 47.5rpx;
  533. text-align: left;
  534. font-style: normal;
  535. padding-right: 20rpx;
  536. }
  537. }
  538. }
  539. }
  540. .papdang2 {
  541. display: flex;
  542. padding-left: 20rpx;
  543. .yingyez1 {
  544. width: 78rpx;
  545. height: 47.5rpx;
  546. font-family: PingFangSC, PingFang SC;
  547. font-weight: 400;
  548. font-size: 26rpx;
  549. color: #333333;
  550. line-height: 47.5rpx;
  551. text-align: justify;
  552. font-style: normal;
  553. padding-right: 10rpx;
  554. }
  555. .yingyez2 {
  556. flex-grow: 1;
  557. height: 47.5rpx;
  558. font-family: PingFangSC, PingFang SC;
  559. font-weight: 400;
  560. font-size: 26rpx;
  561. color: #333333;
  562. line-height: 47.5rpx;
  563. text-align: left;
  564. font-style: normal;
  565. }
  566. }
  567. .papdang3 {
  568. padding-left: 20rpx;
  569. height: 47.5rpx;
  570. display: flex;
  571. align-items: center;
  572. .dizhinew1 {
  573. width: 30rpx;
  574. height: 47.5rpx;
  575. display: flex;
  576. align-items: center;
  577. justify-content: center;
  578. }
  579. .dizhinew2 {
  580. flex-grow: 1;
  581. height: 47.5rpx;
  582. font-family: PingFangSC, PingFang SC;
  583. font-weight: 400;
  584. font-size: 26rpx;
  585. color: #333333;
  586. line-height: 47.5rpx;
  587. text-align: justify;
  588. font-style: normal;
  589. }
  590. }
  591. }
  592. }
  593. .yyyue1new {
  594. width: 100%;
  595. min-height: 55rpx;
  596. font-family: PingFangSC, PingFang SC;
  597. font-weight: 400;
  598. font-size: 26rpx;
  599. color: #111111;
  600. line-height: 45rpx;
  601. text-align: left;
  602. font-style: normal;
  603. }
  604. .xuzhinew {
  605. width: 100%;
  606. min-height: 130rpx;
  607. display: flex;
  608. margin: 30rpx 0;
  609. .xuzhi1new {
  610. width: 260rpx;
  611. height: 55rpx;
  612. font-family: PingFangSC, PingFang SC;
  613. font-weight: 400;
  614. font-size: 26rpx;
  615. color: #666666;
  616. line-height: 45rpx;
  617. text-align: left;
  618. font-style: normal;
  619. }
  620. .xuzhi2new {
  621. flex-grow: 1;
  622. }
  623. }
  624. .taocanlistnewmx1 {
  625. width: 460rpx;
  626. height: 50rpx;
  627. font-family: PingFangSC, PingFang SC;
  628. font-weight: 400;
  629. font-size: 26rpx;
  630. color: #111111;
  631. line-height: 50rpx;
  632. text-align: left;
  633. font-style: normal;
  634. }
  635. .wuyiyi {
  636. width: 750rpx;
  637. height: 20rpx;
  638. background: #F5F8FA;
  639. }
  640. .taocanmx {
  641. margin: 30rpx 0;
  642. .taocanlistmx {
  643. display: flex;
  644. .taocanlistmx1 {
  645. width: 460rpx;
  646. height: 50rpx;
  647. font-family: PingFangSC, PingFang SC;
  648. font-weight: 400;
  649. font-size: 26rpx;
  650. color: #111111;
  651. line-height: 50rpx;
  652. text-align: left;
  653. font-style: normal;
  654. }
  655. .taocanlistmx2 {
  656. width: 150rpx;
  657. height: 50rpx;
  658. font-family: PingFangSC, PingFang SC;
  659. font-weight: 400;
  660. font-size: 26rpx;
  661. color: #999999;
  662. line-height: 50rpx;
  663. text-align: center;
  664. font-style: normal;
  665. }
  666. .taocanlistmx3 {
  667. width: 80rpx;
  668. height: 50rpx;
  669. font-family: PingFangSC, PingFang SC;
  670. font-weight: 400;
  671. font-size: 26rpx;
  672. color: #111111;
  673. line-height: 50rpx;
  674. text-align: right;
  675. font-style: normal;
  676. }
  677. }
  678. }
  679. .yyyue1 {
  680. width: 100%;
  681. height: 55rpx;
  682. font-family: PingFangSC, PingFang SC;
  683. font-weight: 400;
  684. font-size: 26rpx;
  685. color: #111111;
  686. line-height: 55rpx;
  687. text-align: left;
  688. font-style: normal;
  689. }
  690. .xuzhi {
  691. width: 100%;
  692. min-height: 130rpx;
  693. display: flex;
  694. .xuzhi1 {
  695. width: 90rpx;
  696. height: 55rpx;
  697. font-family: PingFangSC, PingFang SC;
  698. font-weight: 400;
  699. font-size: 26rpx;
  700. color: #666666;
  701. line-height: 55rpx;
  702. text-align: left;
  703. font-style: normal;
  704. }
  705. .xuzhi2 {
  706. flex-grow: 1;
  707. }
  708. }
  709. .basicInfo {
  710. width: 678rpx;
  711. margin: 0 auto;
  712. background: #fff;
  713. border-radius: 20rpx;
  714. padding: 20rpx;
  715. .chaoji {
  716. width: 100%;
  717. height: 40rpx;
  718. font-family: PingFang-SC, PingFang-SC;
  719. font-weight: bold;
  720. font-size: 40rpx;
  721. color: #1C1E41;
  722. line-height: 40rpx;
  723. text-align: left;
  724. font-style: normal;
  725. margin: 20rpx 0 40rpx 0;
  726. }
  727. .xianzhi {
  728. width: 100%;
  729. display: flex;
  730. border-bottom: 1px solid #e6e6e6;
  731. .xianzhi1 {
  732. width: 140rpx;
  733. height: 80rpx;
  734. font-family: PingFangSC, PingFang SC;
  735. font-weight: 400;
  736. font-size: 26rpx;
  737. color: #666666;
  738. line-height: 80rpx;
  739. text-align: left;
  740. font-style: normal;
  741. }
  742. .xianzhi2 {
  743. flex-grow: 1;
  744. height: 80rpx;
  745. font-family: PingFangSC, PingFang SC;
  746. font-weight: 400;
  747. font-size: 26rpx;
  748. color: #111111;
  749. line-height: 80rpx;
  750. text-align: left;
  751. font-style: normal;
  752. }
  753. }
  754. }
  755. .daoqi {
  756. height: 30rpx;
  757. font-family: PingFang-SC, PingFang-SC;
  758. font-weight: bold;
  759. font-size: 30rpx;
  760. color: #111111;
  761. line-height: 30rpx;
  762. text-align: center;
  763. font-style: normal;
  764. }
  765. .erweima {
  766. width: 100%;
  767. height: 340rpx;
  768. display: flex;
  769. align-items: center;
  770. justify-content: center;
  771. }
  772. .pjm {
  773. display: flex;
  774. .pjm1 {
  775. height: 32rpx;
  776. font-family: PingFang-SC, PingFang-SC;
  777. font-weight: bold;
  778. font-size: 32rpx;
  779. color: #111111;
  780. line-height: 32rpx;
  781. text-align: center;
  782. font-style: normal;
  783. }
  784. .pjm2 {
  785. height: 32rpx;
  786. font-family: PingFangSC, PingFang SC;
  787. font-weight: 400;
  788. font-size: 24rpx;
  789. color: #AAAAAA;
  790. line-height: 32rpx;
  791. text-align: left;
  792. font-style: normal;
  793. padding-left: 20rpx;
  794. }
  795. }
  796. .ticketInfonmb {
  797. box-sizing: border-box;
  798. width: 96%;
  799. margin: 0 auto 20rpx;
  800. padding: 10rpx 24rpx;
  801. border-radius: 20rpx;
  802. position: relative;
  803. background-color: #fff;
  804. z-index: 2;
  805. }
  806. .taocan {
  807. width: 690rpx;
  808. height: 226rpx;
  809. border-radius: 20px;
  810. background: #fff;
  811. display: flex;
  812. align-items: center;
  813. .taocan1 {
  814. width: 168rpx;
  815. height: 168rpx;
  816. //margin-left: 20rpx;
  817. }
  818. .taocan2 {
  819. flex-grow: 1;
  820. height: 168rpx;
  821. .taoxxq1 {
  822. height: 52rpx;
  823. font-family: PingFang-SC, PingFang-SC;
  824. font-weight: bold;
  825. font-size: 32rpx;
  826. color: #111111;
  827. line-height: 52rpx;
  828. text-align: left;
  829. font-style: normal;
  830. padding-left: 20rpx;
  831. }
  832. .taoxxq2 {
  833. height: 50rpx;
  834. font-family: PingFangSC, PingFang SC;
  835. font-weight: 400;
  836. font-size: 24rpx;
  837. color: #777777;
  838. line-height: 50rpx;
  839. text-align: left;
  840. font-style: normal;
  841. padding-left: 20rpx;
  842. }
  843. .taoxxq3 {
  844. height: 66rpx;
  845. display: flex;
  846. justify-content: space-between;
  847. align-items: center;
  848. .jiage1 {
  849. flex-grow: 1;
  850. height: 66rpx;
  851. font-family: PingFangSC, PingFang SC;
  852. font-weight: 500;
  853. font-size: 40rpx;
  854. color: #FF3E3E;
  855. line-height: 66rpx;
  856. text-align: left;
  857. font-style: normal;
  858. span {
  859. width: 24rpx;
  860. height: 66rpx;
  861. font-family: PingFangSC, PingFang SC;
  862. font-weight: 400;
  863. font-size: 24rpx;
  864. color: #FF3E3E;
  865. line-height: 66rpx;
  866. text-align: left;
  867. font-style: normal;
  868. padding-left: 20rpx;
  869. }
  870. }
  871. .right {
  872. width: 190rpx;
  873. height: 66rpx;
  874. display: flex;
  875. align-items: center;
  876. .icon {
  877. width: 44rpx;
  878. height: 44rpx;
  879. vertical-align: middle;
  880. }
  881. .number {
  882. font-size: 36rpx;
  883. vertical-align: middle;
  884. margin: 0 30rpx;
  885. }
  886. }
  887. }
  888. }
  889. }
  890. .bottom-list {
  891. display: flex;
  892. margin: 37rpx auto;
  893. justify-content: center;
  894. .image {
  895. width: 36rpx;
  896. height: 36rpx;
  897. margin: 0 8rpx;
  898. image {
  899. width: 100%;
  900. height: 100%;
  901. }
  902. }
  903. .text {
  904. font-size: 26rpx;
  905. color: #999999;
  906. font-weight: Regular;
  907. }
  908. }
  909. .minus,
  910. .plus {
  911. display: flex;
  912. align-items: center;
  913. // width: 44rpx;
  914. // height: 44rpx;
  915. // line-height: 44rpx;
  916. padding: 10rpx 10rpx;
  917. // padding-left: 8rpx;
  918. border: 1px solid #999;
  919. border-radius: 6rpx;
  920. text-align: center;
  921. }
  922. page {
  923. box-sizing: border-box;
  924. background-color: #F5F8FA;
  925. .content {
  926. position: relative;
  927. z-index: 3;
  928. padding-bottom: 160rpx;
  929. .hand-title {
  930. position: absolute;
  931. left: 20rpx;
  932. top: 100rpx;
  933. font-size: 24rpx;
  934. color: #fff;
  935. }
  936. }
  937. }
  938. .bg {
  939. height: 100%;
  940. position: fixed;
  941. // top: 44px;
  942. z-index: 1;
  943. width: 100%;
  944. background-image: linear-gradient(to bottom, #007A69, #F5F8FA, #F5F8FA);
  945. }
  946. .ticketInfo-demo {
  947. // border-bottom: 2rpx solid #EFEFEF;
  948. margin-top: 40rpx;
  949. .demo-layout {
  950. display: flex;
  951. align-items: center;
  952. text-align: center;
  953. margin: 0 80rpx;
  954. }
  955. }
  956. .two-center-two {
  957. box-sizing: border-box;
  958. .tit {
  959. font-size: 32rpx;
  960. color: #333333;
  961. margin: 20rpx 0;
  962. }
  963. .df-one {
  964. font-size: 32rpx;
  965. color: #333333;
  966. font-weight: bold;
  967. // .bg-purple-dark {
  968. // margin-left: 140rpx;
  969. // }
  970. // .demo-layout {
  971. // margin-left: 30rpx;
  972. // }
  973. }
  974. .df-two {
  975. border-bottom: 2rpx solid #EFEFEF;
  976. .bg-purple {
  977. // margin-right: 100rpx;
  978. width: 182rpx;
  979. margin-left: -13rpx;
  980. }
  981. .bg-purple-dark {
  982. // margin-left: 50rpx;
  983. }
  984. .bg-purple,
  985. .bg-purple-dark {
  986. font-size: 26rpx;
  987. color: #777777;
  988. font-weight: Regular;
  989. text-align: center;
  990. text {
  991. margin: 0 8rpx;
  992. }
  993. }
  994. .bg-purple-light {
  995. font-size: 24rpx;
  996. color: #666666;
  997. border: 1rpx solid #666666;
  998. text-align: center;
  999. border-radius: 50rpx;
  1000. }
  1001. }
  1002. }
  1003. .prices-content {
  1004. margin: 24rpx 0;
  1005. .txt1 {
  1006. font-size: 32rpx;
  1007. color: #111111;
  1008. font-weight: bold;
  1009. }
  1010. .txt2 {
  1011. margin: 12rpx 0;
  1012. font-size: 26rpx;
  1013. color: #777777;
  1014. font-weight: Regular;
  1015. }
  1016. }
  1017. .orderInfo {
  1018. box-sizing: border-box;
  1019. background-color: #fff;
  1020. border-radius: 16rpx;
  1021. width: 96%;
  1022. margin: 0 auto 20rpx;
  1023. .tit {
  1024. font-size: 32rpx;
  1025. color: #333;
  1026. padding-left: 30rpx;
  1027. padding-top: 40rpx;
  1028. font-weight: 600;
  1029. margin-bottom: 20rpx;
  1030. }
  1031. .txt {
  1032. font-size: 28rpx;
  1033. color: #666;
  1034. width: 115rpx;
  1035. }
  1036. .icon {
  1037. font-size: 28rpx;
  1038. color: #666;
  1039. }
  1040. .val {
  1041. font-size: 28rpx;
  1042. color: #666;
  1043. margin: 0 20rpx 0 30rpx;
  1044. }
  1045. .nums {
  1046. display: flex;
  1047. justify-content: space-between;
  1048. border-bottom: 1rpx solid #f0f2f5;
  1049. padding: 0 24rpx;
  1050. .input {
  1051. margin: 0 30rpx;
  1052. font-size: 28rpx;
  1053. }
  1054. text {
  1055. margin: 20rpx 0;
  1056. &:nth-child(1) {
  1057. font-size: 28rpx;
  1058. color: #333;
  1059. font-weight: 400;
  1060. }
  1061. &:nth-child(3) {
  1062. font-size: 36rpx;
  1063. color: #FF4141;
  1064. margin-right: 40rpx;
  1065. }
  1066. &.icon {
  1067. display: inline-block;
  1068. width: 100rpx;
  1069. flex: 1;
  1070. text-align: right;
  1071. padding-top: 12rpx;
  1072. }
  1073. }
  1074. // .minus,
  1075. // .plus {
  1076. // width: 44rpx;
  1077. // height: 44rpx;
  1078. // line-height: 44rpx;
  1079. // padding: 11rpx 9rpx;
  1080. // border: 1px solid #999;
  1081. // border-radius: 6rpx;
  1082. // }
  1083. .plus {
  1084. background-color: #0EBFFE;
  1085. border-color: #0EBFFE;
  1086. }
  1087. }
  1088. }
  1089. .ticketInfo {
  1090. box-sizing: border-box;
  1091. width: 96%;
  1092. margin: 0 auto 20rpx;
  1093. padding: 44rpx 24rpx;
  1094. border-radius: 20rpx;
  1095. position: relative;
  1096. background-color: #fff;
  1097. z-index: 2;
  1098. .ticketInfo-hander {
  1099. display: flex;
  1100. .image {
  1101. width: 130rpx;
  1102. height: 136rpx;
  1103. border-radius: 12rpx;
  1104. margin-right: 20rpx;
  1105. image {
  1106. width: 100%;
  1107. height: 100%;
  1108. }
  1109. }
  1110. }
  1111. .name {
  1112. font-size: 32rpx;
  1113. color: #333;
  1114. font-weight: bold;
  1115. width: 100%;
  1116. }
  1117. .date {
  1118. // padding: 20rpx 0 32rpx;
  1119. padding-top: 40rpx;
  1120. text {
  1121. font-size: 26rpx;
  1122. &:nth-child(1) {
  1123. color: #808080;
  1124. }
  1125. &:nth-child(2) {
  1126. color: #FF7D01;
  1127. margin-left: 30rpx;
  1128. }
  1129. }
  1130. }
  1131. .topHead {
  1132. width: 96%;
  1133. margin: 0 auto;
  1134. background-color: #F5F8FA;
  1135. padding: 28rpx 0 28rpx 84rpx;
  1136. border-radius: 16rpx;
  1137. position: relative;
  1138. text {
  1139. position: absolute;
  1140. left: 0;
  1141. top: 0;
  1142. z-index: 1;
  1143. border-radius: 16rpx 0 0 16rpx;
  1144. width: 48rpx;
  1145. color: #fff;
  1146. font-size: 20rpx;
  1147. background-color: #484F61;
  1148. text-align: center;
  1149. height: 100%;
  1150. padding: 15rpx 10rpx 0;
  1151. }
  1152. .p {
  1153. font-size: 28rpx;
  1154. color: #333;
  1155. &:nth-of-type(1) {
  1156. font-weight: 600;
  1157. margin-bottom: 16rpx;
  1158. }
  1159. }
  1160. }
  1161. .code {
  1162. margin-top: 40rpx;
  1163. text-align: center;
  1164. position: relative;
  1165. .cover,
  1166. .sx {
  1167. position: absolute;
  1168. background-color: rgba(255, 255, 255, 0.5);
  1169. width: 340rpx;
  1170. height: 340rpx;
  1171. top: 66rpx;
  1172. left: 50%;
  1173. transform: translate(-50%, 0);
  1174. }
  1175. .sx {
  1176. width: 120rpx;
  1177. height: 120rpx;
  1178. top: 150rpx;
  1179. background: transparent;
  1180. }
  1181. .txt {
  1182. font-size: 28rpx;
  1183. }
  1184. image {
  1185. width: 340rpx;
  1186. height: 340rpx;
  1187. margin: 30rpx 0;
  1188. }
  1189. }
  1190. }
  1191. .head {
  1192. box-sizing: border-box;
  1193. padding: 34rpx 24rpx 60rpx;
  1194. display: flex;
  1195. position: relative;
  1196. z-index: 2;
  1197. text {
  1198. color: #fff;
  1199. &:nth-child(1),
  1200. &:nth-child(3) {
  1201. font-size: 44rpx;
  1202. }
  1203. &:nth-child(2) {
  1204. flex: 1;
  1205. text-align: right;
  1206. width: 100px;
  1207. font-size: 36rpx;
  1208. }
  1209. }
  1210. }
  1211. .btns {
  1212. box-sizing: border-box;
  1213. width: 100%;
  1214. position: fixed;
  1215. bottom: 0;
  1216. z-index: 4;
  1217. left: 0;
  1218. display: flex;
  1219. padding: 32rpx 32rpx 50rpx;
  1220. background-color: #fff;
  1221. gap: 0 20rpx;
  1222. box-shadow: 0 -8rpx 16rpx rgba(0, 0, 0, 0.06);
  1223. .hexiao{
  1224. width: 690rpx;
  1225. height: 88rpx;
  1226. background: #007A69;
  1227. border-radius: 44rpx;
  1228. font-family: PingFang-SC, PingFang-SC;
  1229. font-weight: bold;
  1230. font-size: 32rpx;
  1231. color: #FFFFFF;
  1232. line-height: 88rpx;
  1233. text-align: center;
  1234. font-style: normal;
  1235. }
  1236. }
  1237. </style>