mallOrderDetail.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938
  1. <template>
  2. <view class="box">
  3. <!-- 自定义导航 -->
  4. <view class="zdyNavBox">
  5. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  6. <view class="zdyNav">
  7. <view class="zdyNavLeft">
  8. <image src="../../../static/img/nav_icon_back.png" mode="" class="backImg" @click="goback"></image>
  9. <image src="../../../static/img/nav_icon_home.png" mode="" class="homeImg" @click="gohome"></image>
  10. </view>
  11. <view class="zdyNavTitle">订单详情</view>
  12. <view style="width: 100px;"></view>
  13. </view>
  14. </view>
  15. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  16. <view style="height: 44px;"></view>
  17. <view class="top">
  18. <view class="orderState">
  19. <image src="../../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
  20. <view class="SheetState" v-if="orderData.data.sheetState == 1">待付款</view>
  21. <view class="SheetState" v-if="orderData.data.sheetState == 2">待服务</view>
  22. <view class="SheetState" v-if="orderData.data.sheetState == 3">已完成</view>
  23. <view class="SheetState" v-if="orderData.data.sheetState == 4">已取消</view>
  24. </view>
  25. </view>
  26. <!-- 店铺信息 -->
  27. <view class="shopBox">
  28. <image src="../../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
  29. <view class="shopCont">
  30. <view class="shopName">{{orderData.shopInfo.shopName}}</view>
  31. <view class="Address">
  32. {{orderData.shopInfo.provinceName}}{{orderData.shopInfo.cityName}}{{orderData.shopInfo.areaName}}{{orderData.shopInfo.address}}
  33. </view>
  34. </view>
  35. <view class="shopRightBox" @click="map">
  36. <image src="../../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image>
  37. <view class="shopRihgtTxt">地图</view>
  38. </view>
  39. <view class="shopsx"></view>
  40. <view class="shopRightBox" @click="call">
  41. <image src="../../../static/img/icon_phone.png" mode="" class="shopRightImg"></image>
  42. <view class="shopRihgtTxt">电话</view>
  43. </view>
  44. </view>
  45. <!-- 订单内容 -->
  46. <view class="information" v-if="orderData.OpenSheetQRCodeList">
  47. <view class="detailedTitle">订单内容</view>
  48. <view class="goodsName">{{orderData.OpenSheetQRCodeList.itemName}}</view>
  49. <view class="informationLine2">
  50. <view class="salePrice"><span
  51. class="informationNum">¥</span>{{orderData.OpenSheetQRCodeList.salePrice}}</view>
  52. <view class="informationNum" style="color: #999999;">
  53. x{{orderData.OpenSheetQRCodeList.itemQty}}</view>
  54. </view>
  55. <view v-if="orderData.data.sheetState != 1" class="line"></view>
  56. <view v-if="orderData.data.sheetState != 1">
  57. <view class="goodsName">
  58. 券码信息({{orderData.OpenSheetQRCodeList.noWriteoffQty?orderData.OpenSheetQRCodeList.noWriteoffQty:0}}张可用)
  59. </view>
  60. <view class="detailedLine" v-for="(v,index) in orderData.OpenSheetQRCodeList.OpenSheetQRCode">
  61. <view v-if="v.writeoffState==1" class="detailedName">
  62. <view class="redPoint"></view>
  63. <view class="code">{{v.qrCode}}</view>
  64. <view class="quanState">待使用</view>
  65. </view>
  66. <view v-if="v.writeoffState==3" class="detailedName">
  67. <view class="redPoint"></view>
  68. <view class="code old" >{{v.qrCode}}</view>
  69. <view class="quanState2">已使用</view>
  70. </view>
  71. <image src="../../../static/img/icon_erweima.png" mode="" style="width: 36rpx;height: 36rpx;"
  72. v-if="v.writeoffState==1" @click="isShowMa=true"></image>
  73. </view>
  74. </view>
  75. </view>
  76. <!-- 套餐内容 -->
  77. <view class="information" v-if="SheetType==3">
  78. <view class="detailedTitle">套餐内容</view>
  79. <!-- 项目 -->
  80. <view class="itemBox" v-if="orderData.projectList.length>0">
  81. <!-- 头 -->
  82. <view class="itemTop">
  83. <view class="topTitle leftItem">项目名称</view>
  84. <view class="topTitle">数量</view>
  85. <view class="topTitle">有效期</view>
  86. </view>
  87. <view v-for="(item,index) in orderData.projectList" :key="index">
  88. <view class="itemContent">
  89. <view class="topTitle leftItem">{{item.flowName}}</view>
  90. <view class="topTitle2">{{item.flowQty}}</view>
  91. <view class="topTitle">{{item.date}}</view>
  92. </view>
  93. </view>
  94. </view>
  95. <!-- 商品 -->
  96. <view class="itemBox" v-if="orderData.shopList.length>0">
  97. <!-- 头 -->
  98. <view class="itemTop">
  99. <view class="topTitle leftItem">商品名称</view>
  100. <view class="topTitle">数量</view>
  101. <view class="topTitle">有效期</view>
  102. </view>
  103. <view v-for="(item,index) in orderData.shopList" :key="index">
  104. <view class="itemContent">
  105. <view class="topTitle leftItem">{{item.flowName}}</view>
  106. <view class="topTitle2">{{item.flowQty}}</view>
  107. <view class="topTitle">{{item.date}}</view>
  108. </view>
  109. </view>
  110. </view>
  111. </view>
  112. <!-- 实付款 -->
  113. <view class="money">
  114. <view class="informationNum">实付款:</view>
  115. <view class="informationNum" style="color: #FF0000;font-weight: bold;">¥{{orderData.data.realMoney}}</view>
  116. </view>
  117. <!-- 订单信息 -->
  118. <view class="information">
  119. <view class="detailedTitle">订单信息</view>
  120. <view class="informationLine">
  121. <view class="informationTxt">订单单号:</view>
  122. <view class="informationNum">{{orderData.data.code}}<span class="codeCopy"
  123. @click="copy(orderData.data.code)">复制</span></view>
  124. </view>
  125. <view class="informationLine">
  126. <view class="informationTxt">下单人:</view>
  127. <view class="informationNum">{{orderData.data.userMobilePhone}}</view>
  128. </view>
  129. <view class="informationLine">
  130. <view class="informationTxt">下单时间:</view>
  131. <view class="informationNum">{{orderData.data.createTime}}</view>
  132. </view>
  133. <view class="informationLine">
  134. <view class="informationTxt">订单备注:</view>
  135. <view class="informationNum" style="width: 510rpx;">{{orderData.data.comment?orderData.data.comment:''}}</view>
  136. </view>
  137. </view>
  138. <!-- 支付信息 -->
  139. <view class="information">
  140. <view class="detailedTitle">支付信息</view>
  141. <view class="informationLine">
  142. <view class="informationTxt">支付状态:</view>
  143. <view class="informationNum" v-if="orderData.data.payState==1">未支付</view>
  144. <view class="informationNum" v-if="orderData.data.payState==2">已支付</view>
  145. </view>
  146. <view class="informationLine">
  147. <view class="informationTxt">支付方式:</view>
  148. <view class="informationNum" v-if="orderData.data.payType==1">在线支付</view>
  149. <view class="informationNum" v-if="orderData.data.payType==2">线下支付</view>
  150. </view>
  151. <view class="informationLine">
  152. <view class="informationTxt">支付时间:</view>
  153. <view class="informationNum">{{orderData.data.payTime?orderData.data.payTime:'-'}}</view>
  154. </view>
  155. </view>
  156. <view style="height: 50rpx;background-color: #F4F5F7;"></view>
  157. <view class="bottom" v-if="orderData.data.sheetState == 1">
  158. <view class="cancel" @click="cancelBespeak">取消订单</view>
  159. <view class="defer" @click="pay">立即支付</view>
  160. </view>
  161. <!-- 券码 -->
  162. <view class="maBox" v-if="isShowMa==true" @click="isShowMa=false">
  163. <view class="querenMa">
  164. <view class="maTop">
  165. <view class="maTitle">请到店出示券码即可开始服务</view>
  166. <image @click="isShowMa=false" src="../../../static/img/icon_delete.png" mode=""
  167. style="width: 26rpx;height: 26rpx;margin-left: 10rpx;"></image>
  168. </view>
  169. <swiper class="swiper" circular :autoplay="false" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
  170. <swiper-item v-for="(item,index) in orderData.OpenSheetQRCodeList.OpenSheetQRCode">
  171. <view class="swiper-item">
  172. <view class="maCode">{{item.qrCode}}</view>
  173. <view class="maBoximg">
  174. <tki-qrcode cid="qrcode1" ref="qrcode" :val="item.qrCode" :size="400" :unit="unit"
  175. :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
  176. :loadMake="loadMake" :usingComponents="true" @result="qrR" />
  177. </view>
  178. </view>
  179. </swiper-item>
  180. </swiper>
  181. </view>
  182. </view>
  183. </view>
  184. </template>
  185. <script>
  186. import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
  187. export default {
  188. components: {
  189. tkiQrcode
  190. },
  191. data() {
  192. return {
  193. id: '',
  194. iStatusBarHeight:'',
  195. SheetType: '', //SheetType 1 商品2项目3套餐4救援5钣喷6集客
  196. orderData: '',
  197. onval: true, // val值变化时自动重新生成二维码
  198. loadMake: true, // 组件加载完成后自动生成二维码
  199. size: 500,
  200. qrcodeShow: false,
  201. qrcodeTop: '-100vh',
  202. qrcodeTopVal: '',
  203. ifShow: false,
  204. val: '二维码', // 要生成的二维码值
  205. unit: 'upx', // 单位
  206. background: '#b4e9e2', // 背景色
  207. foreground: '#309286', // 前景色
  208. pdground: '#262637', // 角标色
  209. icon: '', // 二维码图标
  210. iconsize: 40, // 二维码图标大小
  211. lv: 3, // 二维码容错级别 , 一般不用设置,默认就行
  212. src: '', // 二维码生成后的图片地址或base64
  213. isShowMa: false,
  214. }
  215. },
  216. onLoad(opt) {
  217. this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  218. this.id = opt.id
  219. this.SheetType = opt.SheetType
  220. if (this.id) {
  221. this.getData()
  222. }
  223. },
  224. methods: {
  225. pay(){
  226. this.$http('openMallOrder/unifiedPay', {
  227. sheetId:this.id
  228. },'POST').then(res => {
  229. if(res.code==0){
  230. this.requestPayment(res.data)
  231. }else{
  232. uni.showToast({
  233. title: res.msg,
  234. icon: 'none',
  235. duration: 3000
  236. });
  237. }
  238. })
  239. },
  240. requestPayment(res){
  241. var payInfo=res;
  242. //console.log(payInfo)
  243. //console.log(String(Date.now()))
  244. var that=this;
  245. uni.requestPayment({
  246. provider: 'wxpay',
  247. //timeStamp: String(Date.now()),
  248. timeStamp: payInfo.timeStamp,
  249. nonceStr: payInfo.nonceStr,
  250. package:payInfo.package,
  251. signType: payInfo.signType,
  252. paySign: payInfo.paySign,
  253. appid:payInfo.appId,
  254. success: function (res) {
  255. console.log('success:' + JSON.stringify(res));
  256. uni.showToast({
  257. title: '支付成功',
  258. icon:'none',
  259. duration: 2000
  260. });
  261. that.getData()
  262. },
  263. fail: function (err) {
  264. console.log(err)
  265. uni.showToast({
  266. title: '支付失败',
  267. icon:'none',
  268. duration: 2000
  269. });
  270. }
  271. });
  272. },
  273. copy(txt) {
  274. uni.setClipboardData({
  275. data: txt,
  276. success: function() {
  277. uni.showToast({
  278. title: '复制成功',
  279. icon: 'none',
  280. duration: 2000
  281. });
  282. }
  283. });
  284. },
  285. upTime() {
  286. uni.showLoading({
  287. title: '加载中'
  288. })
  289. var that = this
  290. this.$http('openreservation/carOwner/updateTimeOfAppointment', {
  291. id: this.id,
  292. shopId: this.orderData.shopInfo.id,
  293. billDate: this.billDate
  294. }, 'POST').then(res => {
  295. uni.hideLoading();
  296. // var list = res.data.Items
  297. var list = res.data
  298. console.log("result+=", res.data);
  299. uni.showToast({
  300. title: '延期成功',
  301. icon: 'none',
  302. duration: 2000
  303. });
  304. setTimeout(function() {
  305. that.getData();
  306. }, 1000);
  307. })
  308. },
  309. cancelBespeak(){
  310. var that = this
  311. uni.showModal({
  312. title: '提示',
  313. content: '是否取消该订单',
  314. cancelText:'否',
  315. confirmText:'是',
  316. success: function (res) {
  317. if (res.confirm) {
  318. uni.showLoading({
  319. title: '加载中'
  320. })
  321. that.$http('openOrderManagement/updateSheetState', {
  322. id: that.id,
  323. }, 'POST').then(res => {
  324. uni.hideLoading();
  325. // var list = res.data.Items
  326. uni.showToast({
  327. title: '取消成功',
  328. icon: 'none',
  329. duration: 2000
  330. });
  331. setTimeout(function() {
  332. that.getData();
  333. }, 1000);
  334. })
  335. } else if (res.cancel) {
  336. }
  337. }
  338. });
  339. },
  340. map() {
  341. console.log("打开地图")
  342. var that = this;
  343. if (!that.orderData.shopInfo.lat || !that.orderData.shopInfo.lng) {
  344. uni.showToast({
  345. title: '该店铺未设置定位',
  346. icon: 'none',
  347. duration: 3000
  348. });
  349. } else {
  350. uni.openLocation({
  351. latitude: Number(that.orderData.shopInfo.lat),
  352. longitude: Number(that.orderData.shopInfo.lng),
  353. name: that.orderData.shopInfo.shopName,
  354. address: that.orderData.shopInfo.provinceName + that.orderData.shopInfo.cityName + that
  355. .orderData.shopInfo.areaName + that.orderData.shopInfo.address,
  356. success: function() {
  357. console.log('success');
  358. },
  359. fail(err) {
  360. console.log(err)
  361. }
  362. });
  363. }
  364. },
  365. call() {
  366. uni.makePhoneCall({
  367. phoneNumber: this.orderData.shopInfo.mobilePhone
  368. });
  369. },
  370. getData() {
  371. uni.showLoading({
  372. title: '加载中'
  373. });
  374. this.$http('openOrderManagement/queryOpenSheet', {
  375. id: this.id,
  376. }, 'GET').then(res => {
  377. uni.hideLoading();
  378. this.orderData = res.data;
  379. })
  380. },
  381. goback() {
  382. uni.navigateBack({
  383. delta: 1
  384. })
  385. },
  386. gohome(){
  387. uni.switchTab({
  388. url:'../../index/index'
  389. })
  390. },
  391. },
  392. onPullDownRefresh() {
  393. this.getData()
  394. setTimeout(function() {
  395. uni.stopPullDownRefresh();
  396. }, 1000);
  397. },
  398. }
  399. </script>
  400. <style scoped>
  401. .box {
  402. min-height: 100vh;
  403. background: #F4F5F7;
  404. padding-bottom: 135rpx;
  405. }
  406. .zdyNavBox{
  407. width: 100vw;
  408. background: #FFFFFF;
  409. position: fixed;
  410. top: 0;
  411. left: 0;
  412. z-index: 9999999;
  413. }
  414. .zdyNav{
  415. height: 44px;
  416. display: flex;
  417. justify-content: space-between;
  418. align-items: center;
  419. }
  420. .backImg{
  421. width: 44rpx;
  422. height: 44rpx;
  423. margin: 0 20rpx;
  424. }
  425. .homeImg{
  426. width: 44rpx;
  427. height: 44rpx;
  428. }
  429. .zdyNavLeft{
  430. display: flex;
  431. align-items: center;
  432. }
  433. .zdyNavTitle{
  434. width: 100vw;
  435. height: 44px;
  436. background: #FFFFFF;
  437. text-align: center;
  438. font-size: 34rpx;
  439. line-height: 44px;
  440. }
  441. .top {
  442. height: 190rpx;
  443. background-color: #FF0000;
  444. }
  445. .orderState {
  446. display: flex;
  447. justify-content: center;
  448. align-items: center;
  449. padding-top: 40rpx;
  450. }
  451. .SheetState {
  452. display: flex;
  453. justify-content: center;
  454. font-size: 36rpx;
  455. font-weight: 500;
  456. color: #FFFFFF;
  457. margin-left: 15rpx;
  458. }
  459. .timeEditImg {
  460. width: 25rpx;
  461. height: 25rpx;
  462. padding-left: 20rpx;
  463. }
  464. .shopBoximg {
  465. width: 40rpx;
  466. height: 40rpx;
  467. }
  468. .shopRightImg {
  469. width: 44rpx;
  470. height: 45rpx;
  471. }
  472. .shopsx {
  473. width: 1px;
  474. height: 50rpx;
  475. background: #EEEEEE;
  476. margin-top: 30rpx;
  477. margin-left: 28rpx;
  478. }
  479. .shopBox {
  480. display: flex;
  481. padding: 30rpx 20rpx;
  482. margin: 0rpx 24rpx;
  483. margin-top: -60rpx;
  484. background-color: #FFFFFF;
  485. border-radius: 10rpx;
  486. }
  487. .shopCont {
  488. width: 405rpx;
  489. padding-left: 20rpx;
  490. }
  491. .shopName {
  492. font-size: 30rpx;
  493. font-weight: bold;
  494. color: #3C3C3C;
  495. line-height: 42rpx;
  496. }
  497. .Address {
  498. color: #999999;
  499. font-size: 24rpx;
  500. margin-top: 10rpx;
  501. }
  502. .shopRihgtTxt {
  503. color: #999999;
  504. font-size: 24rpx;
  505. }
  506. .shopRightBox {
  507. padding-left: 28rpx;
  508. }
  509. .detailedTitle {
  510. padding: 23rpx 20rpx;
  511. display: flex;
  512. text-align: center;
  513. align-content: flex-start;
  514. border-bottom: 1rpx solid #EEEEEE;
  515. font-size: 30rpx;
  516. font-weight: bold;
  517. color: #3C3C3C;
  518. }
  519. .detailedLine {
  520. display: flex;
  521. padding: 16rpx 20rpx;
  522. justify-content: space-between;
  523. align-items: center;
  524. }
  525. .detailedImg {
  526. width: 120rpx;
  527. height: 120rpx;
  528. border-radius: 10rpx;
  529. }
  530. .detailedName {
  531. display: flex;
  532. align-items: center;
  533. }
  534. .code {
  535. font-size: 26rpx;
  536. color: #333333;
  537. font-weight: bold;
  538. width: 180rpx
  539. }
  540. .old {
  541. color: #999999;
  542. font-weight: 400;
  543. text-decoration: line-through;
  544. }
  545. .redPoint {
  546. width: 10rpx;
  547. height: 10rpx;
  548. background: #FF0000;
  549. border-radius: 10rpx;
  550. margin-right: 10rpx;
  551. }
  552. .quanState {
  553. font-size: 22rpx;
  554. color: #F19D01;
  555. padding: 0 10rpx;
  556. border: 1rpx solid #F19D01;
  557. border-radius: 4rpx;
  558. margin-left: 20rpx;
  559. }
  560. .quanState2{
  561. font-size: 22rpx;
  562. color: #999999;
  563. padding: 0 10rpx;
  564. border: 1rpx solid #DDDDDD;
  565. border-radius: 4rpx;
  566. margin-left: 20rpx;
  567. }
  568. .information {
  569. background: #FFFFFF;
  570. border-radius: 10rpx;
  571. margin: 20rpx 24rpx;
  572. padding-bottom: 15rpx;
  573. }
  574. .informationLine {
  575. display: flex;
  576. padding: 15rpx 20rpx;
  577. }
  578. .informationLine2 {
  579. display: flex;
  580. justify-content: space-between;
  581. font-size: 26rpx;
  582. padding: 0 20rpx;
  583. }
  584. .salePrice {
  585. font-size: 26rpx;
  586. font-weight: 500;
  587. color: #333333;
  588. line-height: 45rpx;
  589. }
  590. .money {
  591. background: #FFFFFF;
  592. border-radius: 10rpx;
  593. margin: 20rpx 24rpx;
  594. display: flex;
  595. justify-content: space-between;
  596. font-size: 26rpx;
  597. padding: 30rpx 20rpx;
  598. }
  599. .informationTxt {
  600. width: 190rpx;
  601. font-size: 26rpx;
  602. color: #999999;
  603. }
  604. .line {
  605. height: 20rpx;
  606. background-color: #FFFFFF;
  607. border-bottom: 1rpx solid #EEEEEE;
  608. }
  609. .goodsName {
  610. padding: 20rpx 20rpx 15rpx;
  611. color: #333333;
  612. font-size: 26rpx;
  613. }
  614. .informationNum {
  615. color: #333333;
  616. font-size: 26rpx;
  617. }
  618. .codeCopy {
  619. width: 77rpx;
  620. height: 36rpx;
  621. background: #F4F5F7;
  622. border-radius: 22rpx;
  623. font-size: 24rpx;
  624. color: #333333;
  625. text-align: center;
  626. line-height: 33rpx;
  627. padding: 0 15rpx;
  628. margin-left: 20rpx;
  629. }
  630. .orderBottom {
  631. width: 750rpx;
  632. height: 98rpx;
  633. background: #FFFFFF;
  634. position: fixed;
  635. left: 0;
  636. bottom: 0;
  637. display: flex;
  638. justify-content: flex-end;
  639. }
  640. .bottom {
  641. display: flex;
  642. justify-content: flex-end;
  643. padding: 20rpx;
  644. background-color: #FFFFFF;
  645. align-items: center;
  646. height: 98rpx;
  647. width: 100vw;
  648. position: fixed;
  649. bottom: 0rpx;
  650. padding-bottom: constant(safe-area-inset-bottom);
  651. padding-bottom: env(safe-area-inset-bottom);
  652. }
  653. .cancel {
  654. color: #3C3C3C;
  655. font-size: 28rpx;
  656. width: 150rpx;
  657. height: 56rpx;
  658. border-radius: 36rpx;
  659. border: 1rpx solid #DDDDDD;
  660. text-align: center;
  661. line-height: 56rpx;
  662. margin-right: 40rpx;
  663. }
  664. .defer {
  665. color: #D53533;
  666. font-size: 28rpx;
  667. width: 150rpx;
  668. height: 56rpx;
  669. border-radius: 36rpx;
  670. border: 1rpx solid #D53533;
  671. text-align: center;
  672. line-height: 56rpx;
  673. margin-right: 40rpx;
  674. }
  675. .itemBox {
  676. margin: 20rpx;
  677. border-radius: 10rpx;
  678. border: 2rpx solid #EEEEEE;
  679. }
  680. .itemTop {
  681. padding: 18rpx 20rpx;
  682. background-color: #FFEFD5;
  683. display: flex;
  684. justify-content: space-between;
  685. align-content: center;
  686. }
  687. .topTitle {
  688. font-size: 26rpx;
  689. color: #333333;
  690. margin-right: 10rpx;
  691. }
  692. .topTitle2{
  693. font-size: 26rpx;
  694. color: #333333;
  695. margin-right: 40rpx;
  696. }
  697. .leftItem {
  698. flex-grow: 1;
  699. }
  700. .itemContent {
  701. padding: 20rpx;
  702. background-color: #FFFFFF;
  703. display: flex;
  704. justify-content: space-between;
  705. align-content: center;
  706. }
  707. .maBox {
  708. width: 100%;
  709. height: 100vh;
  710. background: rgba(0, 0, 0, 0.4);
  711. position: fixed;
  712. left: 0;
  713. top: 0;
  714. z-index: 9999;
  715. }
  716. .querenMa {
  717. width: 578;
  718. height: 640rpx;
  719. background: #ffffff;
  720. margin: 0 86rpx;
  721. margin-top: 50%;
  722. border-radius: 24rpx;
  723. }
  724. .maTop {
  725. display: flex;
  726. justify-content: space-between;
  727. align-items: center;
  728. padding: 30rpx 20rpx 15rpx;
  729. }
  730. .maTitle {
  731. color: #666666;
  732. font-size: 26rpx;
  733. text-align: center;
  734. padding-left: 100rpx;
  735. }
  736. .swiper{
  737. width: 100%;
  738. height: 85%;
  739. background: #FFFFFF;
  740. }
  741. .swiper-item{
  742. width: 100%;
  743. height: 100%;
  744. }
  745. .maCode {
  746. font-size: 30rpx;
  747. font-weight: 500;
  748. color: #333333;
  749. line-height: 42rpx;
  750. margin-bottom: 40rpx;
  751. text-align: center;
  752. }
  753. .maBoximg {
  754. width: 400rpx;
  755. height: 400rpx;
  756. margin-left: 86rpx;
  757. }
  758. </style>