mallOrderDetail.vue 24 KB

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