mallOrderDetail.vue 46 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897
  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="shuaxin" v-if="orderData.data.sheetState == 1 &&sx" @click="shuaxinFn">
  19. 如果支付状态未及时更新,请点击 <span style="color: #3F90F7;">刷新</span>
  20. </view> -->
  21. <view class="topBox">
  22. <view class="top" >
  23. <view class="orderState">
  24. <view class="SheetState" v-if="orderData.data.sheetState == 1">待付款</view>
  25. <view class="SheetState" v-if="orderData.data.sheetState == 2">待服务</view>
  26. <view class="SheetState" v-if="orderData.data.sheetState == 3">已完成</view>
  27. <view class="SheetState" v-if="orderData.data.sheetState == 4">已取消</view>
  28. </view>
  29. </view>
  30. </view>
  31. <!-- 店铺信息 -->
  32. <view class="shopBox" v-if="orderData">
  33. <image src="../../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
  34. <view class="shopCont">
  35. <view class="shopName">{{orderData.shopInfo.shopName}}</view>
  36. <view class="Address">
  37. {{orderData.shopInfo.provinceName}}{{orderData.shopInfo.cityName}}{{orderData.shopInfo.areaName}}{{orderData.shopInfo.address}}
  38. </view>
  39. </view>
  40. <view class="shopRightBox" @click="map">
  41. <image src="../../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image>
  42. <view class="shopRihgtTxt">地图</view>
  43. </view>
  44. <view class="shopsx"></view>
  45. <view class="shopRightBox" @click="call">
  46. <image src="../../../static/img/icon_phone.png" mode="" class="shopRightImg"></image>
  47. <view class="shopRihgtTxt">电话</view>
  48. </view>
  49. </view>
  50. <!-- 订单内容 -->
  51. <view class="information">
  52. <view class="detailedTitle">订单内容</view>
  53. <view style="padding-bottom: 15rpx;" v-if="orderData.openSheetDetail.length>0" v-for="(item,index) in orderData.openSheetDetail" :key="index">
  54. <view class="goodsName">{{item.itemName}}</view>
  55. <view class="informationLine2">
  56. <view class="salePrice"><span
  57. class="informationNum">¥</span>{{item.salePrice}}</view>
  58. <view class="informationNum" style="color: #999999;">
  59. x{{item.itemQty}}</view>
  60. </view>
  61. </view>
  62. <!-- <view v-if="orderData.data.sheetState != 1 && orderData.data.sheetState != 4" class="line"></view> -->
  63. <view v-if="orderData.data.sheetState != 1 && orderData.data.sheetState != 4">
  64. <!-- <view class="goodsName">
  65. 券码信息({{quanMaList.length?quanMaList.length:0}}张可用)
  66. </view>
  67. <view class="detailedLineBox" v-for="(v,index) in orderData.OpenSheetQRCode">
  68. <view class="detailedLine">
  69. <view v-if="v.writeoffState==1" class="detailedName">
  70. <view class="redPoint"></view>
  71. <view class="code">{{v.qrCode}}</view>
  72. <view class="quanState">待使用</view>
  73. </view>
  74. <view v-if="v.writeoffState==3" class="detailedName">
  75. <view class="redPoint"></view>
  76. <view class="code old" >{{v.qrCode}}</view>
  77. <view class="quanState2">已使用</view>
  78. </view>
  79. <image src="../../../static/img/icon_erweima.png" mode="" style="width: 36rpx;height: 36rpx;"
  80. v-if="v.writeoffState==1" @click="isShowMaSHow(index)"></image>
  81. </view>
  82. <view class="writeoffLineBox" v-if="v.writeoffState==3">
  83. <view class="writeoffLine">
  84. <view class="writeoffLineTxt">核销时间:{{v.writeoffTime}}</view>
  85. <view class="writeoffLineTxt">核销人:{{v.writeoffName}}</view>
  86. </view>
  87. <view class="writeoffLine">
  88. <view class="writeoffLineTxt">核销门店:{{v.writeoffShopName?v.writeoffShopName:''}}</view>
  89. </view>
  90. </view>
  91. </view> -->
  92. <view class="newCodeBox" v-if="sheetQRCodeList1.length>0">
  93. <view class="newQrcode">
  94. <swiper class="swiper" style="height: 400rpx;" circular :current='swiperIndex' :autoplay="false" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#EC0F0A">
  95. <swiper-item v-for="(item,index) in sheetQRCodeList1" style="height: 400rpx;">
  96. <view class="swiper-item">
  97. <tki-qrcode cid="qrcode1" ref="qrcode" :val="item.qrCode" :size="300" :unit="unit"
  98. :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
  99. :loadMake="loadMake" :usingComponents="true" @result="qrR" />
  100. </view>
  101. </swiper-item>
  102. </swiper>
  103. </view>
  104. <view class="newQrcodeTs" @click="qmshowFn">
  105. 待使用<span>{{orderData.unWriteoff}}</span>份券码
  106. <image src="../../../static/img2/jt1.png" mode="" class="jtImg1 dsyjt"></image>
  107. </view>
  108. </view>
  109. </view>
  110. </view>
  111. <view style="padding-left: 24rpx;padding-right: 24rpx;" v-if="orderData.writeoff!=0||orderData.refund!=0">
  112. <view class="ysyBox" v-if="orderData">
  113. <view class="ysyLeft" style="font-weight: 500;color: #222222;">
  114. <span v-if="orderData.writeoff!=0">已使用({{orderData.writeoff}})</span>
  115. <span v-if="orderData.writeoff!=0&&orderData.refund!=0">·</span>
  116. <span v-if="orderData.refund!=0">退款({{orderData.refund}})</span>
  117. </view>
  118. <view class="ysyRgiht" @click="sheetQRCode">
  119. <span style="color: #9A9A9A;padding-right: 16rpx;">查看详情</span>
  120. <image src="../../../static/img2/jt1.png" mode="" class="jtImg1"></image>
  121. </view>
  122. </view>
  123. </view>
  124. <!-- 套餐内容 -->
  125. <view class="information tcinformation" v-if="SheetType==3">
  126. <view class="detailedTitle">套餐内容</view>
  127. <!-- 项目 -->
  128. <view class="itemBox" v-if="orderData.projectList.length>0">
  129. <!-- 头 -->
  130. <view class="itemTop">
  131. <view class="leftItem">项目名称</view>
  132. <view class="topTitle">数量</view>
  133. <view class="topTitle">有效期</view>
  134. </view>
  135. <view v-for="(item,index) in orderData.projectList" :key="index">
  136. <view class="itemContent">
  137. <view class="leftItem">{{item.flowName}}</view>
  138. <view class="topTitle">{{item.flowQty}}</view>
  139. <view class="topTitle">{{item.date}}</view>
  140. </view>
  141. </view>
  142. </view>
  143. <!-- 商品 -->
  144. <view class="itemBox" v-if="orderData.shopList.length>0">
  145. <!-- 头 -->
  146. <view class="itemTop">
  147. <view class="leftItem">商品名称</view>
  148. <view class="topTitle">数量</view>
  149. <view class="topTitle">有效期</view>
  150. </view>
  151. <view v-for="(item,index) in orderData.shopList" :key="index">
  152. <view class="itemContent">
  153. <view class="leftItem">{{item.flowName}}</view>
  154. <view class="topTitle">{{item.flowQty}}</view>
  155. <view class="topTitle">{{item.date}}</view>
  156. </view>
  157. </view>
  158. </view>
  159. </view>
  160. <!-- 实付款 -->
  161. <view class="money" v-if="orderData">
  162. <view style="display: flex;justify-content: space-between;border-bottom: 1px solid #EEEEEE;padding-bottom: 20rpx;">
  163. <view class="informationNum">商品费</view>
  164. <view class="informationNum" >¥{{orderData.data.totalMoney}}</view>
  165. </view>
  166. <view style="font-weight: bold;text-align: right;padding-top: 20rpx;">
  167. 实付款
  168. <span style="color: #CE0000;">¥{{orderData.data.realMoney}}</span>
  169. </view>
  170. </view>
  171. <!-- 订单信息 -->
  172. <view class="information">
  173. <!-- <view class="detailedTitle">订单信息</view> -->
  174. <view class="informationLine" v-if="orderData">
  175. <view class="informationTxt">订单单号:</view>
  176. <view class="informationNum" style=" display: flex;">
  177. <image src="../../../static/img2/copy.png" mode="" @click="copy(orderData.data.code)" class="copyIcon"></image>
  178. {{orderData.data.code}}
  179. <!-- <span class="codeCopy" @click="copy(orderData.data.code)">复制</span> -->
  180. </view>
  181. </view>
  182. <view class="informationLine">
  183. <view class="informationTxt">下单人:</view>
  184. <view class="informationNum">{{orderData.data.userMobilePhone}}</view>
  185. </view>
  186. <view class="informationLine">
  187. <view class="informationTxt">下单时间:</view>
  188. <view class="informationNum">{{orderData.data.createTime}}</view>
  189. </view>
  190. <view class="informationLine NoBorder">
  191. <view class="informationTxt">订单备注:</view>
  192. <view class="informationNum" style="width: 510rpx;">{{orderData.data.comment?orderData.data.comment:''}}</view>
  193. </view>
  194. </view>
  195. <!-- 支付信息 -->
  196. <view class="information">
  197. <!-- <view class="detailedTitle">支付信息</view> -->
  198. <view class="informationLine">
  199. <view class="informationTxt">支付状态:</view>
  200. <view class="informationNum" v-if="orderData.data.payState==1">未支付</view>
  201. <view class="informationNum" v-if="orderData.data.payState==2">已支付</view>
  202. </view>
  203. <view class="informationLine">
  204. <view class="informationTxt">支付方式:</view>
  205. <view class="informationNum" v-if="orderData.data.payType==1">在线支付</view>
  206. <view class="informationNum" v-if="orderData.data.payType==2">线下支付</view>
  207. </view>
  208. <view class="informationLine NoBorder">
  209. <view class="informationTxt">支付时间:</view>
  210. <view class="informationNum">{{orderData.data.payTime?orderData.data.payTime:'-'}}</view>
  211. </view>
  212. </view>
  213. <!-- 核销信息 -->
  214. <view class="information writeoffXx" v-if="orderData.data.sheetState == 3">
  215. <!-- <view class="detailedTitle">核销信息</view> -->
  216. <view class="informationLine">
  217. <view class="informationTxt">核销状态:</view>
  218. <view class="informationNum" v-if="orderData.data.writeoffState==1">未核销</view>
  219. <view class="informationNum" v-if="orderData.data.writeoffState==2">部分核销</view>
  220. <view class="informationNum" v-if="orderData.data.writeoffState==3">已核销</view>
  221. </view>
  222. <view class="informationLine">
  223. <view class="informationTxt">核销时间:</view>
  224. <view class="informationNum">{{orderData.data.writeoffTime?orderData.data.writeoffTime:'-'}} {{orderData.data.writeoffName}}</view>
  225. </view>
  226. <view class="informationLine NoBorder">
  227. <view class="informationTxt">核销门店:</view>
  228. <view class="informationNum">{{orderData.data.writeoffShopName?orderData.data.writeoffShopName:'-'}}</view>
  229. </view>
  230. </view>
  231. <view style="height: 50rpx;background-color: #F4F5F7;"></view>
  232. <view class="bottom" v-if="orderData.data.sheetState == 1">
  233. <view class="cancel" @click="cancelBespeak">取消订单</view>
  234. <view class="defer" @click="pay">立即支付</view>
  235. </view>
  236. <view v-if="canRefund==0">
  237. <view class="bottom" v-if="orderData.data.sheetState == 2||orderData.data.sheetState == 5">
  238. <view class="cancel" @click="cancelOrder" >申请退款</view>
  239. </view>
  240. </view>
  241. <!-- 券码 -->
  242. <view class="maBox" v-if="isShowMa==true" @click="isShowMaHide">
  243. <view class="querenMa">
  244. <view class="maTop">
  245. <view class="maTitle">请到店出示券码即可开始服务</view>
  246. <image @click="isShowMaHide" src="../../../static/img/icon_delete.png" mode=""
  247. style="width: 26rpx;height: 26rpx;margin-left: 10rpx;"></image>
  248. </view>
  249. <swiper class="swiper" circular :current='swiperIndex' :autoplay="false" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#EC0F0A">
  250. <swiper-item v-for="(item,index) in quanMaList">
  251. <view class="swiper-item">
  252. <view class="maCode">{{item}}</view>
  253. <view class="maBoximg">
  254. <tki-qrcode cid="qrcode1" ref="qrcode" :val="item" :size="400" :unit="unit"
  255. :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
  256. :loadMake="loadMake" :usingComponents="true" @result="qrR" />
  257. </view>
  258. </view>
  259. </swiper-item>
  260. </swiper>
  261. </view>
  262. </view>
  263. <!-- 手机号授权 -->
  264. <view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
  265. <view class="authorizCont" @click.stop="">
  266. <view class="authorizName">{{wxOpenData.miniAppName}}</view>
  267. <view class="authorizMs">未注册的手机号登录后将自动创建会员账号,如果您不同意授权获取手机号,会影响您使用我们的产品和服务。</view>
  268. <button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
  269. </view>
  270. <view style="text-align: center;padding-top: 56rpx;">
  271. <image src="../../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
  272. </view>
  273. </view>
  274. <!-- 退款原因 -->
  275. <view class="tuikuanBox" v-if="isShowTui==true">
  276. <view class="tuikuan">
  277. <view class="tuiTop">
  278. <view class="tuiTitle">退款</view>
  279. <image @click="isShowTuiHide" src="../../../static/img/icon_delete.png" mode=""
  280. style="width: 26rpx; height: 26rpx;"></image>
  281. </view>
  282. <view class="contLine">
  283. <view class="contlineLeft">
  284. <image src="../../static/img/icon_star.png" mode="" class="star"></image>
  285. 退款原因
  286. </view>
  287. <view class="contlineRight carModelRight" @click="">
  288. <picker class="carModel" @change="bindChange" mode="selector" :value="index"
  289. :range="tuicauseList" range-key="contents">
  290. <view class="uni-input">{{tuicauseList[index].contents}}</view>
  291. <!-- <view class="uni-input noColor" v-else>请选择</view> -->
  292. </picker>
  293. <image src="../../static/img/little_rightArrow.png" mode="" class="contlineRightJt"></image>
  294. </view>
  295. </view>
  296. <view class="contLine">
  297. <view class="contlineLeft">
  298. <image src="../../static/img/icon_star.png" mode="" class="star"></image>
  299. 退款金额
  300. </view>
  301. <view class="contlineRight carModelRight" @click="cktime">
  302. <span class="carModel">{{orderData.data.realMoney}}</span>
  303. </view>
  304. </view>
  305. <view class="contLine">
  306. <view class="contlineLeft">
  307. <image src="" mode="" class="star"></image>
  308. 补充描述
  309. </view>
  310. <view class="contlineRight">
  311. <textarea placeholder-style="color:#999999" placeholder="请输入" v-model="tuikuanContent"
  312. class="contlineRightInput" maxlength="-1" auto-height="true" @confirm="feedDone" />
  313. </view>
  314. </view>
  315. <view class="tuiBtns">
  316. <view class="btn" @click="isShowTuiHide">取消</view>
  317. <view class="btn2" @click="goTui">确认退款</view>
  318. </view>
  319. </view>
  320. </view>
  321. <view class="tkBox" v-if="qmShow" @click="qmHide">
  322. <view class="tkContBox" @click.stop="">
  323. <view class="tkTop">
  324. <view style="width: 22rpx;"></view>
  325. <view class="tkTitle">券码信息({{orderData.unWriteoff}})</view>
  326. <image @click="qmHide" src="../../../static/img2/chahao.png" mode="" class="chahaoIMg"></image>
  327. </view>
  328. <view class="tkLineBox3">
  329. <view class="tkLine" v-for="(item,index) in sheetQRCodeList1">
  330. <view class="tkLineLeft">
  331. <span style="color: #9A9A9A;">券码</span>
  332. <span style="color: #222222;padding-left: 66rpx;">{{item.qrCode}}</span>
  333. </view>
  334. <view class="tkLineRight" style="color: #576B95;" @click="copy(item.qrCode)">复制</view>
  335. </view>
  336. </view>
  337. </view>
  338. </view>
  339. <view class="tkBox" v-if="syShow" @click="syHide" >
  340. <view class="tkContBox2" @click.stop="">
  341. <view class="tkTop">
  342. <view style="width: 22rpx;"></view>
  343. <view class="tkTitle">详情</view>
  344. <image @click="syHide" src="../../../static/img2/chahao.png" mode="" class="chahaoIMg"></image>
  345. </view>
  346. <view class="tklineBox2">
  347. <view class="tkline2" v-for="(item,index) in sheetQRCodeList">
  348. <view class="tklineTop2">
  349. <view class="tkZt">
  350. <!-- 已使用无退款:orderType=1 已使用有退款:orderType=3 未使用有退款:orderType=2 -->
  351. <span v-if="item.orderType==3||item.orderType==1">已使用</span>
  352. <span v-if="item.orderType==2">未使用</span>
  353. <span v-if="item.refundState==0"></span>
  354. <span v-if="item.refundState==1">·退款中</span>
  355. <span v-if="item.refundState==2">·退款成功</span>
  356. <span v-if="item.refundState==3">·退款拒绝</span>
  357. <span v-if="item.refundState==4">·退款失败</span>
  358. </view>
  359. <view class="tkSeeD" @click="refundDetail(item)" v-if="item.orderType!=1">
  360. <span>退款详情</span>
  361. <image src="../../../static/img2/jt1.png" mode="" class="jtImg1"></image>
  362. </view>
  363. <view class="tkSeeD" @click="goSh(item)" v-if="item.orderType==1">
  364. <span>申请售后</span>
  365. <image src="../../../static/img2/jt1.png" mode="" class="jtImg1"></image>
  366. </view>
  367. </view>
  368. <view class="tkRow">
  369. <view class="tlRowLeft" v-if="item.orderType==3||item.orderType==1">使用份数</view>
  370. <view class="tlRowLeft" v-else>退款份数</view>
  371. <view style="color: #222222;" v-if="item.orderType==3||item.orderType==1">1份</view>
  372. <view style="color: #222222;" v-else>{{item.couponCount}}份</view>
  373. </view>
  374. <view class="tkRow" v-if="item.orderType==3||item.orderType==1">
  375. <view class="tlRowLeft">消费门店</view>
  376. <view style="color: #222222;">{{item.writeoffShopName?item.writeoffShopName:''}}</view>
  377. </view>
  378. <view class="tkRow" v-if="item.orderType==3||item.orderType==1">
  379. <view class="tlRowLeft">消费时间</view>
  380. <view style="color: #222222;">{{item.writeoffTime?item.writeoffTime:''}}</view>
  381. </view>
  382. <view class="tkRow" v-if="item.orderType==1">
  383. <view class="tlRowLeft">券&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</view>
  384. <view style="color: #222222;" class="xiahuaxian">{{item.qrCode}}</view>
  385. </view>
  386. <view class="tkRow" v-if="item.orderType==3">
  387. <view class="tlRowLeft">券&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</view>
  388. <view style="color: #222222;width: 480rpx; white-space: normal; word-break: break-all;" class="xiahuaxian">{{item.couponCode}}</view>
  389. </view>
  390. <view class="tkRow" v-if="item.orderType==2">
  391. <view class="tlRowLeft">退款金额</view>
  392. <view style="color: #222222;">{{item.money?item.money:''}}</view>
  393. </view>
  394. <view class="tkRow" v-if="item.orderType==2">
  395. <view class="tlRowLeft">退款方式</view>
  396. <view style="color: #222222;">原路返回</view>
  397. </view>
  398. <view class="tkRow" v-if="item.orderType==2">
  399. <view class="tlRowLeft">到账时间</view>
  400. <view style="color: #222222;">{{item.refundTime?item.refundTime:''}}</view>
  401. </view>
  402. <view class="tkRow" v-if="item.orderType==2">
  403. <view class="tlRowLeft">券&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</view>
  404. <view style="color: #222222;width: 480rpx; white-space: normal; word-break: break-all;" class="">{{item.couponCode}}</view>
  405. </view>
  406. </view>
  407. <nodata v-if="sheetQRCodeList.length==0"></nodata>
  408. </view>
  409. </view>
  410. </view>
  411. <view class="tkBox" v-if="xsShow" @click="xsHide">
  412. <view class="tkContBox" @click.stop="">
  413. <view class="tkTop">
  414. <view style="width: 22rpx;"></view>
  415. <view class="tkTitle">申请售后</view>
  416. <image @click="xsHide" src="../../../static/img2/chahao.png" mode="" class="chahaoIMg"></image>
  417. </view>
  418. <view class="zxSj">
  419. <view class="zxSjleft">
  420. <view class="zxTitle">咨询商家</view>
  421. <view class="zxTitle2">联系商家,提高退款效率</view>
  422. </view>
  423. <view class="zxSjRgiht" @click="call">
  424. <image src="/static/timg/wgcall.png" mode="" class="zxCallImg"></image>
  425. </view>
  426. </view>
  427. <view class="zkRefund" @click="goshFn">
  428. <span>已与商家协商一致,发起退款</span>
  429. <image src="../../../static/img2/jt1.png" mode="" class="jtImg1"></image>
  430. </view>
  431. </view>
  432. </view>
  433. </view>
  434. </template>
  435. <script>
  436. import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
  437. import homenav from "@/components/homenav/nav.vue"
  438. import nodata from '@/components/nodata/nodata.vue'
  439. export default {
  440. components: {
  441. tkiQrcode,homenav,nodata
  442. },
  443. data() {
  444. return {
  445. id: '',
  446. iStatusBarHeight:'',
  447. SheetType: '', //SheetType 1 商品2项目3套餐4救援5钣喷6集客
  448. orderData: '',
  449. onval: true, // val值变化时自动重新生成二维码
  450. loadMake: true, // 组件加载完成后自动生成二维码
  451. size: 500,
  452. qrcodeShow: false,
  453. qrcodeTop: '-100vh',
  454. qrcodeTopVal: '',
  455. ifShow: false,
  456. val: '二维码', // 要生成的二维码值
  457. unit: 'upx', // 单位
  458. background: '#b4e9e2', // 背景色
  459. foreground: '#309286', // 前景色
  460. pdground: '#262637', // 角标色
  461. icon: '', // 二维码图标
  462. iconsize: 40, // 二维码图标大小
  463. lv: 3, // 二维码容错级别 , 一般不用设置,默认就行
  464. src: '', // 二维码生成后的图片地址或base64
  465. isShowMa: false,
  466. quanMaList:[],
  467. themeColor:'',
  468. authorizShow:false,
  469. userInfo:'',
  470. ext:'',
  471. isShowTui:false,
  472. index:0,
  473. tuicauseList: [],
  474. tuikuanContent: '',
  475. swiperIndex:0,
  476. sx:'',
  477. qmShow:false,
  478. syShow:false,
  479. sheetQRCodeList:'',
  480. sheetQRCodeList1:'',
  481. xsShow:false,
  482. shItem:'',
  483. canRefund:1,
  484. }
  485. },
  486. onLoad(opt) {
  487. this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  488. this.id = opt.id
  489. //this.id='2D524C99-BE6F-4E63-93FC-B76172C118E0'
  490. this.SheetType = opt.SheetType
  491. this.themeColor = uni.getStorageSync("themeColor");
  492. this.userInfo=this.$store.state.userInfo;
  493. this.ext=this.$common.getExtStoreId();
  494. if(this.userInfo){
  495. if (this.id) {
  496. this.getData();
  497. this.getTuiKuanData()
  498. }
  499. }else{
  500. this.$common.automaticlogin().then(val => {
  501. this.userInfo=this.$store.state.userInfo;
  502. this.wxOpenData=this.$store.state.wxOpenData;
  503. this.themeColor = uni.getStorageSync("themeColor");
  504. if (this.id) {
  505. this.getData();
  506. this.getTuiKuanData()
  507. }
  508. if(!this.userInfo){
  509. this.authorizShow=true
  510. }
  511. })
  512. }
  513. this.sx=opt.sx
  514. // this.getsheetQRCode()
  515. },
  516. methods: {
  517. getsheetQRCode(){
  518. this.$http('openOrderManagement/sheetQRCodeList', {
  519. type:1,
  520. sheetID: this.id,
  521. }, 'GET').then(res => {
  522. })
  523. },
  524. sheetQRCode(){
  525. uni.showLoading({
  526. title: '加载中'
  527. })
  528. this.$http('openOrderManagement/sheetQRCodeList', {
  529. type:2,
  530. sheetID: this.id,
  531. }, 'GET').then(res => {
  532. uni.hideLoading();
  533. this.syShow=true;
  534. this.sheetQRCodeList=res.data
  535. })
  536. },
  537. qmshowFn(){
  538. uni.showLoading({
  539. title: '加载中'
  540. })
  541. this.$http('openOrderManagement/sheetQRCodeList', {
  542. type:1,
  543. sheetID: this.id,
  544. }, 'GET').then(res => {
  545. uni.hideLoading();
  546. this.qmShow=true;
  547. this.sheetQRCodeList1=res.data
  548. })
  549. //this.qmShow=true
  550. },
  551. qmHide(){
  552. this.qmShow=false
  553. },
  554. syHide(){
  555. this.syShow=false;
  556. },
  557. shuaxinFn(){
  558. this.sxNum=1
  559. this.getData();
  560. //this.getTuiKuanData()
  561. },
  562. cancelOrder(){
  563. //this.isShowTui=true;
  564. uni.navigateTo({
  565. url:'../../subPack/refund?type=1&id='+this.id
  566. })
  567. },
  568. goSh(item){
  569. this.shItem=item
  570. var that=this
  571. uni.setStorage({
  572. key: 'shData',
  573. data: item,
  574. success: function () {
  575. that.xsShow=true
  576. }
  577. });
  578. },
  579. goshFn(){
  580. uni.navigateTo({
  581. url:'../../subPack/refund?type=2&id='+this.id
  582. })
  583. },
  584. refundDetail(item){
  585. uni.navigateTo({
  586. url:'../../subPack/refundDetail?id='+item.refundSheetID
  587. })
  588. },
  589. xsHide(){
  590. this.xsShow=false
  591. },
  592. goTui(){
  593. var that=this;
  594. uni.showLoading({
  595. title: '加载中'
  596. })
  597. let yuanyin = this.tuicauseList[this.index].contents
  598. that.$http('openMallOrder/cancelOrder', {
  599. realMoney:that.orderData.data.realMoney,
  600. sheetId: that.id,
  601. refundReason:yuanyin,
  602. refundComment:this.tuikuanContent,
  603. }, 'POST').then(res => {
  604. uni.hideLoading();
  605. // var list = res.data.Items
  606. this.isShowTui=false;
  607. if(res.code==0){
  608. uni.showToast({
  609. title: '取消成功',
  610. icon: 'none',
  611. duration: 2000
  612. });
  613. setTimeout(function() {
  614. that.getData();
  615. }, 1000);
  616. }else{
  617. uni.showToast({
  618. title: res.msg,
  619. icon: 'none',
  620. duration: 3000
  621. });
  622. }
  623. })
  624. },
  625. isShowTuiHide(){
  626. this.isShowTui=false;
  627. },
  628. bindChange(e) {
  629. console.log(e);
  630. this.index = e.detail.value
  631. },
  632. getTuiKuanData() {
  633. console.log("退款原因")
  634. this.$http('openMallOrder/getOpenReason', {
  635. // id: this.id,
  636. }, 'GET').then(res => {
  637. this.tuicauseList = res.data;
  638. })
  639. },
  640. isShowMaSHow(index){
  641. this.swiperIndex=index
  642. this.isShowMa=true
  643. },
  644. isShowMaHide(){
  645. this.isShowMa=false
  646. },
  647. decryptPhoneNumber: function(e) {
  648. console.log(e);
  649. this.code=e.detail.code
  650. this.wxPhoneLogin()
  651. this.authorizShow=false;
  652. },
  653. wxPhoneLogin(){
  654. var that=this;
  655. this.$http('miniApp2/sys/wxPhoneLogin', {
  656. appId:this.ext.appId,
  657. unionId:this.ext.unionId,
  658. code:this.code,
  659. openId:this.wxOpenData.openid
  660. },'POST').then(res => {
  661. var data = res.data;
  662. if(data.loginInfo){
  663. this.userInfo=data.loginInfo.openUser;
  664. this.wxOpenData=data.loginInfo;
  665. this.$store.commit('mutationswxOpenData', data)
  666. this.$store.commit('mutationsuserInfo', this.userInfo)
  667. this.getData()
  668. }
  669. })
  670. },
  671. pay(){
  672. this.$http('openMallOrder/unifiedPay', {
  673. sheetId:this.id
  674. },'POST').then(res => {
  675. if(res.code==0){
  676. this.requestPayment(res.data)
  677. }else{
  678. uni.showToast({
  679. title: res.msg,
  680. icon: 'none',
  681. duration: 3000
  682. });
  683. }
  684. })
  685. },
  686. requestPayment(res){
  687. var payInfo=res;
  688. //console.log(payInfo)
  689. //console.log(String(Date.now()))
  690. var that=this;
  691. uni.requestPayment({
  692. provider: 'wxpay',
  693. //timeStamp: String(Date.now()),
  694. timeStamp: payInfo.timeStamp,
  695. nonceStr: payInfo.nonceStr,
  696. package:payInfo.package,
  697. signType: payInfo.signType,
  698. paySign: payInfo.paySign,
  699. appid:payInfo.appId,
  700. success: function (res) {
  701. console.log('success:' + JSON.stringify(res));
  702. uni.showToast({
  703. title: '支付成功',
  704. icon:'none',
  705. duration: 2000
  706. });
  707. that.getData()
  708. },
  709. fail: function (err) {
  710. console.log(err)
  711. uni.showToast({
  712. title: '支付失败',
  713. icon:'none',
  714. duration: 2000
  715. });
  716. }
  717. });
  718. },
  719. copy(txt) {
  720. uni.setClipboardData({
  721. data: txt,
  722. success: function() {
  723. uni.showToast({
  724. title: '复制成功',
  725. icon: 'none',
  726. duration: 2000
  727. });
  728. }
  729. });
  730. },
  731. upTime() {
  732. uni.showLoading({
  733. title: '加载中'
  734. })
  735. var that = this
  736. this.$http('openreservation/carOwner/updateTimeOfAppointment', {
  737. id: this.id,
  738. shopId: this.orderData.shopInfo.id,
  739. billDate: this.billDate
  740. }, 'POST').then(res => {
  741. uni.hideLoading();
  742. // var list = res.data.Items
  743. var list = res.data
  744. if(res.code==0){
  745. uni.showToast({
  746. title: '延期成功',
  747. icon: 'none',
  748. duration: 2000
  749. });
  750. setTimeout(function() {
  751. that.getData();
  752. }, 1000);
  753. }else{
  754. uni.showToast({
  755. title: res.msg,
  756. icon: 'none',
  757. duration: 3000
  758. });
  759. }
  760. })
  761. },
  762. cancelBespeak(){
  763. var that = this
  764. uni.showModal({
  765. title: '提示',
  766. content: '是否取消该订单',
  767. cancelText:'否',
  768. confirmText:'是',
  769. success: function (res) {
  770. if (res.confirm) {
  771. uni.showLoading({
  772. title: '加载中'
  773. })
  774. that.$http('openOrderManagement/updateSheetState', {
  775. id: that.id,
  776. }, 'POST').then(res => {
  777. uni.hideLoading();
  778. if(res.code==0){
  779. uni.showToast({
  780. title: '取消成功',
  781. icon: 'none',
  782. duration: 2000
  783. });
  784. setTimeout(function() {
  785. that.getData();
  786. }, 1000);
  787. }else{
  788. uni.showToast({
  789. title: res.msg,
  790. icon: 'none',
  791. duration: 3000
  792. });
  793. }
  794. })
  795. } else if (res.cancel) {
  796. }
  797. }
  798. });
  799. },
  800. map() {
  801. console.log("打开地图")
  802. var that = this;
  803. if (!that.orderData.shopInfo.lat || !that.orderData.shopInfo.lng) {
  804. uni.showToast({
  805. title: '该店铺未设置定位',
  806. icon: 'none',
  807. duration: 3000
  808. });
  809. } else {
  810. uni.openLocation({
  811. latitude: Number(that.orderData.shopInfo.lat),
  812. longitude: Number(that.orderData.shopInfo.lng),
  813. name: that.orderData.shopInfo.shopName,
  814. address: that.orderData.shopInfo.provinceName + that.orderData.shopInfo.cityName + that
  815. .orderData.shopInfo.areaName + that.orderData.shopInfo.address,
  816. success: function() {
  817. console.log('success');
  818. },
  819. fail(err) {
  820. console.log(err)
  821. }
  822. });
  823. }
  824. },
  825. call() {
  826. //this.shItem
  827. uni.makePhoneCall({
  828. phoneNumber:this.orderData.shopInfo.mobilePhone//this.shItem.mobilePhone// this.orderData.shopInfo.mobilePhone
  829. });
  830. },
  831. getData() {
  832. uni.showLoading({
  833. title: '加载中'
  834. });
  835. this.$http('openOrderManagement/queryOpenSheet', {
  836. id: this.id,
  837. }, 'GET').then(res => {
  838. uni.hideLoading();
  839. this.orderData = res.data;
  840. if (this.quanMaList) {
  841. this.quanMaList = [];
  842. }
  843. let maList = this.orderData.OpenSheetQRCode;
  844. if (maList) {
  845. maList.forEach(item =>{
  846. if (item.writeoffState==1) {
  847. this.quanMaList.push(item.qrCode);
  848. }
  849. })
  850. }
  851. if(this.sx&&this.sxNum){
  852. uni.showToast({
  853. title: '刷新成功',
  854. icon: 'none',
  855. duration: 3000
  856. });
  857. }
  858. //console.log('可用券码--',this.quanMaList);
  859. uni.setStorage({
  860. key: 'orderData',
  861. data: this.orderData,
  862. success: function () {
  863. }
  864. });
  865. var canRefund=0
  866. var openSheetDetail=this.orderData.openSheetDetail
  867. openSheetDetail.forEach(item=>{
  868. if(item.canRefund==1){
  869. canRefund=1
  870. }
  871. })
  872. this.canRefund=canRefund
  873. })
  874. this.$http('openOrderManagement/sheetQRCodeList', {
  875. type:1,
  876. sheetID: this.id,
  877. }, 'GET').then(res => {
  878. this.sheetQRCodeList1=res.data
  879. })
  880. },
  881. goback() {
  882. uni.navigateBack({
  883. delta: 1
  884. })
  885. },
  886. gohome(){
  887. uni.switchTab({
  888. url:'../../index/index'
  889. })
  890. },
  891. },
  892. onPullDownRefresh() {
  893. this.getData()
  894. setTimeout(function() {
  895. uni.stopPullDownRefresh();
  896. }, 1000);
  897. },
  898. }
  899. </script>
  900. <style scoped>
  901. .box {
  902. min-height: 100vh;
  903. background: #F4F5F7;
  904. padding-bottom: 135rpx;
  905. }
  906. .zdyNavBox{
  907. width: 100vw;
  908. background: #FFFFFF;
  909. position: fixed;
  910. top: 0;
  911. left: 0;
  912. z-index: 9999999;
  913. }
  914. .zdyNav{
  915. height: 44px;
  916. display: flex;
  917. justify-content: space-between;
  918. align-items: center;
  919. }
  920. .backImg{
  921. width: 44rpx;
  922. height: 44rpx;
  923. margin-left: 10rpx;
  924. margin-right: 20rpx;
  925. }
  926. .homeImg{
  927. width: 44rpx;
  928. height: 44rpx;
  929. }
  930. .zdyNavLeft{
  931. display: flex;
  932. align-items: center;
  933. }
  934. .zdyNavTitle{
  935. width: 100vw;
  936. height: 44px;
  937. background: #FFFFFF;
  938. text-align: center;
  939. font-size: 34rpx;
  940. line-height: 44px;
  941. }
  942. .topBox{
  943. padding: 24rpx;
  944. }
  945. .top {
  946. height: 100rpx;
  947. background: #FFFFFF;
  948. border-radius: 11rpx;
  949. text-align: center;
  950. line-height: 100rpx;
  951. font-weight: 500;
  952. font-size: 30rpx;
  953. color: #EC0F0A;
  954. line-height: 100rpx;
  955. }
  956. .orderState {
  957. display: flex;
  958. justify-content: center;
  959. align-items: center;
  960. }
  961. /* .SheetState {
  962. display: flex;
  963. justify-content: center;
  964. font-size: 36rpx;
  965. font-weight: 500;
  966. color: #FFFFFF;
  967. margin-left: 15rpx;
  968. } */
  969. .timeEditImg {
  970. width: 25rpx;
  971. height: 25rpx;
  972. padding-left: 20rpx;
  973. }
  974. .shopBoximg {
  975. width: 40rpx;
  976. height: 40rpx;
  977. }
  978. .shopRightImg {
  979. width: 44rpx;
  980. height: 45rpx;
  981. }
  982. .shopsx {
  983. width: 1px;
  984. height: 50rpx;
  985. background: #EEEEEE;
  986. margin-top: 30rpx;
  987. margin-left: 28rpx;
  988. }
  989. .shopBox {
  990. display: flex;
  991. padding: 30rpx 20rpx;
  992. margin: 0rpx 24rpx;
  993. background-color: #FFFFFF;
  994. border-radius: 10rpx;
  995. }
  996. .shopCont {
  997. width: 405rpx;
  998. padding-left: 20rpx;
  999. }
  1000. .shopName {
  1001. font-size: 30rpx;
  1002. font-weight: bold;
  1003. color: #3C3C3C;
  1004. line-height: 42rpx;
  1005. }
  1006. .Address {
  1007. color: #999999;
  1008. font-size: 24rpx;
  1009. margin-top: 10rpx;
  1010. }
  1011. .shopRihgtTxt {
  1012. color: #999999;
  1013. font-size: 24rpx;
  1014. }
  1015. .shopRightBox {
  1016. padding-left: 28rpx;
  1017. }
  1018. .detailedTitle {
  1019. padding: 23rpx 20rpx 23rpx 0;
  1020. display: flex;
  1021. text-align: center;
  1022. align-content: flex-start;
  1023. border-bottom: 1rpx solid #EEEEEE;
  1024. font-size: 30rpx;
  1025. font-weight: bold;
  1026. color: #3C3C3C;
  1027. }
  1028. .detailedLine {
  1029. display: flex;
  1030. padding: 16rpx 20rpx;
  1031. justify-content: space-between;
  1032. align-items: center;
  1033. }
  1034. .detailedImg {
  1035. width: 120rpx;
  1036. height: 120rpx;
  1037. border-radius: 10rpx;
  1038. }
  1039. .detailedName {
  1040. display: flex;
  1041. align-items: center;
  1042. }
  1043. .code {
  1044. font-size: 26rpx;
  1045. color: #333333;
  1046. font-weight: bold;
  1047. width: 180rpx
  1048. }
  1049. .old {
  1050. color: #999999;
  1051. font-weight: 400;
  1052. text-decoration: line-through;
  1053. }
  1054. .redPoint {
  1055. width: 10rpx;
  1056. height: 10rpx;
  1057. background: #EC0F0A;
  1058. border-radius: 10rpx;
  1059. margin-right: 10rpx;
  1060. }
  1061. .quanState {
  1062. font-size: 22rpx;
  1063. color: #F19D01;
  1064. padding: 0 10rpx;
  1065. border: 1rpx solid #F19D01;
  1066. border-radius: 4rpx;
  1067. margin-left: 20rpx;
  1068. }
  1069. .quanState2{
  1070. font-size: 22rpx;
  1071. color: #999999;
  1072. padding: 0 10rpx;
  1073. border: 1rpx solid #DDDDDD;
  1074. border-radius: 4rpx;
  1075. margin-left: 20rpx;
  1076. }
  1077. .information {
  1078. background: #FFFFFF;
  1079. border-radius: 10rpx;
  1080. margin: 20rpx 24rpx;
  1081. padding-bottom: 15rpx;
  1082. }
  1083. .information{
  1084. padding: 0 20rpx;
  1085. }
  1086. .informationLine {
  1087. display: flex;
  1088. justify-content: space-between;
  1089. padding:20rpx 0rpx;
  1090. border-bottom: 1px solid #EEEEEE;
  1091. color: #222222;
  1092. }
  1093. .informationLine2 {
  1094. display: flex;
  1095. justify-content: space-between;
  1096. font-size: 26rpx;
  1097. /* padding: 0 20rpx; */
  1098. }
  1099. .salePrice {
  1100. font-size: 26rpx;
  1101. font-weight: 500;
  1102. color: #333333;
  1103. line-height: 45rpx;
  1104. }
  1105. .money {
  1106. background: #FFFFFF;
  1107. border-radius: 10rpx;
  1108. margin: 20rpx 24rpx;
  1109. /* display: flex;
  1110. justify-content: space-between; */
  1111. font-size: 26rpx;
  1112. padding: 30rpx 20rpx;
  1113. }
  1114. .informationTxt {
  1115. width: 190rpx;
  1116. font-size: 26rpx;
  1117. /* color: #999999; */
  1118. }
  1119. .line {
  1120. height: 20rpx;
  1121. background-color: #FFFFFF;
  1122. border-bottom: 1rpx solid #EEEEEE;
  1123. }
  1124. .goodsName {
  1125. padding: 20rpx 20rpx 15rpx 0;
  1126. color: #333333;
  1127. font-size: 26rpx;
  1128. }
  1129. .informationNum {
  1130. /* color: #333333; */
  1131. font-size: 26rpx;
  1132. text-align: right;
  1133. }
  1134. .codeCopy {
  1135. width: 77rpx;
  1136. height: 36rpx;
  1137. background: #F4F5F7;
  1138. border-radius: 22rpx;
  1139. font-size: 24rpx;
  1140. color: #333333;
  1141. text-align: center;
  1142. line-height: 33rpx;
  1143. padding: 0 15rpx;
  1144. margin-left: 20rpx;
  1145. }
  1146. .orderBottom {
  1147. width: 750rpx;
  1148. height: 98rpx;
  1149. background: #FFFFFF;
  1150. position: fixed;
  1151. left: 0;
  1152. bottom: 0;
  1153. display: flex;
  1154. justify-content: flex-end;
  1155. }
  1156. .bottom {
  1157. display: flex;
  1158. justify-content: flex-end;
  1159. padding: 20rpx;
  1160. background-color: #FFFFFF;
  1161. /* align-items: center; */
  1162. height: 98rpx;
  1163. width: 100vw;
  1164. position: fixed;
  1165. bottom: 0rpx;
  1166. padding-bottom: constant(safe-area-inset-bottom);
  1167. padding-bottom: env(safe-area-inset-bottom);
  1168. }
  1169. .cancel {
  1170. color: #3C3C3C;
  1171. font-size: 28rpx;
  1172. width: 130rpx;
  1173. height: 56rpx;
  1174. border-radius: 8rpx;
  1175. border: 2rpx solid #DDDDDD;
  1176. text-align: center;
  1177. line-height: 56rpx;
  1178. margin-right: 40rpx;
  1179. }
  1180. .defer {
  1181. color: #EC0F0A;
  1182. font-size: 28rpx;
  1183. width: 130rpx;
  1184. height: 56rpx;
  1185. border-radius: 8rpx;
  1186. border: 2rpx solid #EC0F0A;
  1187. text-align: center;
  1188. line-height: 56rpx;
  1189. margin-right: 40rpx;
  1190. }
  1191. .itemBox {
  1192. margin: 20rpx;
  1193. border-radius: 10rpx;
  1194. border: 2rpx solid #EEEEEE;
  1195. }
  1196. .itemTop {
  1197. padding: 18rpx 20rpx;
  1198. padding-right: 0;
  1199. background-color: #FFEFD5;
  1200. display: flex;
  1201. justify-content: space-between;
  1202. align-content: center;
  1203. }
  1204. .topTitle {
  1205. width: 104rpx;
  1206. font-size: 26rpx;
  1207. color: #333333;
  1208. margin-right: 20rpx;
  1209. text-align: right;
  1210. }
  1211. .leftItem {
  1212. font-size: 26rpx;
  1213. color: #333333;
  1214. margin-right: 20rpx;
  1215. flex-grow: 1;
  1216. /* 隐藏文字显示 ...不换行 */
  1217. overflow: hidden;
  1218. text-overflow: ellipsis;
  1219. white-space: nowrap;
  1220. }
  1221. .itemContent {
  1222. padding: 20rpx;
  1223. padding-right: 0;
  1224. background-color: #FFFFFF;
  1225. display: flex;
  1226. justify-content: space-between;
  1227. align-content: center;
  1228. }
  1229. .maBox {
  1230. width: 100%;
  1231. height: 100vh;
  1232. background: rgba(0, 0, 0, 0.4);
  1233. position: fixed;
  1234. left: 0;
  1235. top: 0;
  1236. z-index: 9999;
  1237. }
  1238. .querenMa {
  1239. width: 578;
  1240. height: 640rpx;
  1241. background: #ffffff;
  1242. margin: 0 86rpx;
  1243. margin-top: 50%;
  1244. border-radius: 24rpx;
  1245. }
  1246. .maTop {
  1247. display: flex;
  1248. justify-content: space-between;
  1249. align-items: center;
  1250. padding: 30rpx 20rpx 15rpx;
  1251. }
  1252. .maTitle {
  1253. color: #666666;
  1254. font-size: 26rpx;
  1255. text-align: center;
  1256. padding-left: 100rpx;
  1257. }
  1258. .swiper{
  1259. width: 100%;
  1260. height: 85%;
  1261. background: #FFFFFF;
  1262. }
  1263. .swiper-item{
  1264. width: 100%;
  1265. height: 100%;
  1266. }
  1267. .maCode {
  1268. font-size: 30rpx;
  1269. font-weight: 500;
  1270. color: #333333;
  1271. line-height: 42rpx;
  1272. margin-bottom: 40rpx;
  1273. text-align: center;
  1274. }
  1275. .maBoximg {
  1276. width: 400rpx;
  1277. height: 400rpx;
  1278. margin-left: 86rpx;
  1279. }
  1280. .authorizBox{
  1281. width: 100vw;
  1282. height: 100vh;
  1283. background: rgba(0, 0, 0, 0.5);
  1284. position: fixed;
  1285. top: 0;
  1286. left: 0;
  1287. }
  1288. .authorizCont{
  1289. margin-top: 30vh;
  1290. width: 564rpx;
  1291. height: 408rpx;
  1292. background: #FFFFFF;
  1293. border-radius: 24rpx;
  1294. margin-left: 93rpx;
  1295. position: relative;
  1296. }
  1297. .authorizCloseImg{
  1298. width: 62rpx;
  1299. height: 62rpx;
  1300. }
  1301. .sqLogoBox{
  1302. width: 180rpx;
  1303. height: 180rpx;
  1304. background: #FFFFFF;
  1305. border-radius: 90rpx;
  1306. text-align: center;
  1307. position: absolute;
  1308. top: -50rpx;
  1309. left: 192rpx;
  1310. }
  1311. .authorizName{
  1312. color: #333333;
  1313. line-height: 42rpx;
  1314. font-size: 30rpx;
  1315. text-align: center;
  1316. padding-top: 58rpx;
  1317. }
  1318. .authorizMs{
  1319. color: #999999;
  1320. line-height: 36rpx;
  1321. font-size: 26rpx;
  1322. width: 452rpx;
  1323. padding-top: 24rpx;
  1324. text-align: center;
  1325. margin-left: 56rpx;
  1326. }
  1327. .authorizContbutton{
  1328. width: 422rpx;
  1329. height: 88rpx;
  1330. background: #EC0F0A;
  1331. border-radius: 44rpx;
  1332. line-height: 88rpx;
  1333. text-align: center;
  1334. font-size:30rpx;
  1335. color: #FFFFFF;
  1336. margin-top: 62rpx;
  1337. margin-left:71rpx;
  1338. }
  1339. .tuikuanBox {
  1340. width: 100%;
  1341. height: 100vh;
  1342. background: rgba(0, 0, 0, 0.4);
  1343. position: fixed;
  1344. left: 0;
  1345. top: 0;
  1346. z-index: 999;
  1347. }
  1348. .tuikuan {
  1349. width: 638rpx;
  1350. height: 720rpx;
  1351. background: #ffffff;
  1352. margin: 0 36rpx;
  1353. margin-top: 50%;
  1354. border-radius: 24rpx;
  1355. padding: 30rpx 20rpx;
  1356. }
  1357. .tuiTop {
  1358. display: flex;
  1359. justify-content: space-between;
  1360. margin-bottom: 36rpx;
  1361. }
  1362. .tuiTitle {
  1363. width: 56rpx;
  1364. height: 40rpx;
  1365. font-size: 28rpx;
  1366. font-weight: 500;
  1367. color: #3C3C3C;
  1368. line-height: 40rpx;
  1369. }
  1370. .contLine {
  1371. display: flex;
  1372. justify-content: space-between;
  1373. font-size: 28rpx;
  1374. padding: 30rpx 0;
  1375. border-bottom: 1px solid #EEEEEE;
  1376. }
  1377. .contlineLeft {
  1378. color: #666666;
  1379. line-height: 40rpx;
  1380. align-items: center;
  1381. }
  1382. .star {
  1383. width: 14rpx;
  1384. height: 14rpx;
  1385. padding-bottom: 5rpx;
  1386. }
  1387. .carModel {
  1388. width: 350rpx;
  1389. text-align: left;
  1390. }
  1391. .noColor {
  1392. color: #CCCCCC;
  1393. }
  1394. .carModelRight {
  1395. display: flex;
  1396. justify-content: flex-start;
  1397. align-items: center;
  1398. }
  1399. .contlineRight {
  1400. color: #333333;
  1401. line-height: 40rpx;
  1402. width: 400rpx;
  1403. text-align: right;
  1404. }
  1405. .contlineRightInput {
  1406. color: #333333;
  1407. text-align: left;
  1408. font-size: 28rpx;
  1409. min-height: 182rpx;
  1410. width: 400rpx;
  1411. }
  1412. .contlineRightJt {
  1413. width: 30rpx;
  1414. height: 30rpx;
  1415. }
  1416. .tuiBtns {
  1417. display: flex;justify-content: space-around;
  1418. padding: 40rpx 20rpx 10rpx;
  1419. }
  1420. .btn {
  1421. width: 250rpx;
  1422. height: 70rpx;
  1423. background: #F4F5F7;
  1424. border-radius: 10rpx;
  1425. font-size: 28rpx;
  1426. font-weight: 500;
  1427. color: #3C3C3C;
  1428. line-height: 70rpx;
  1429. text-align: center;
  1430. }
  1431. .btn2 {
  1432. width: 250rpx;
  1433. height: 70rpx;
  1434. background: #3F90F7;
  1435. border-radius: 10rpx;
  1436. font-size: 28rpx;
  1437. font-weight: 500;
  1438. color: #FFFFFF;
  1439. line-height: 70rpx;
  1440. text-align: center;
  1441. }
  1442. .writeoffLine{
  1443. display: flex;justify-content: space-between;
  1444. color: #999999;font-size: 24rpx;
  1445. line-height: 33rpx;padding-top: 8rpx;
  1446. }
  1447. .writeoffLineBox{
  1448. padding: 0 20rpx;
  1449. }
  1450. .detailedLineBox .detailedLine{
  1451. padding-bottom: 0rpx;
  1452. }
  1453. .writeoffXx .informationNum{
  1454. width: 500rpx;
  1455. }
  1456. .detailedLineBox{
  1457. padding-bottom: 10rpx;
  1458. }
  1459. .shuaxin{
  1460. color: #333333;
  1461. height: 72rpx;
  1462. background: #FDF7EB;
  1463. line-height: 72rpx;
  1464. padding-left: 24rpx;
  1465. font-size: 26rpx;
  1466. }
  1467. .newQrcode{
  1468. text-align: center;padding-top: 30rpx;
  1469. }
  1470. .newQrcodeTs{
  1471. font-size: 28rpx;
  1472. color: #222222;
  1473. }
  1474. .jtImg1{
  1475. width: 10rpx;height: 20rpx;
  1476. }
  1477. .newQrcodeTs {
  1478. text-align: center;
  1479. padding-top: 10rpx;
  1480. padding-bottom: 30rpx;
  1481. }
  1482. .ysyBox{
  1483. background: #ffffff;
  1484. border-radius: 16rpx;
  1485. display: flex;
  1486. justify-content: space-between;
  1487. font-size: 26rpx;
  1488. padding: 30rpx 24rpx;
  1489. }
  1490. .copyIcon{
  1491. width: 30rpx;height: 30rpx;
  1492. margin-top: 4rpx;margin-right: 6rpx;
  1493. }
  1494. .newQrcode .swiper-item{
  1495. text-align: center;
  1496. }
  1497. .chahaoIMg{
  1498. width: 22rpx;height: 22rpx;
  1499. padding-top: 4rpx;
  1500. padding-left: 10px;
  1501. padding-right: 10rpx;
  1502. padding-bottom: 10rpx;
  1503. }
  1504. .tkBox{
  1505. position: fixed;
  1506. background: rgba(0, 0, 0, 0.4);
  1507. width: 100%;height: 100%;
  1508. top: 0;
  1509. left: 0;
  1510. }
  1511. .tkContBox{
  1512. width: 750rpx;
  1513. height: 483rpx;
  1514. background: #F8F8F8;
  1515. border-radius: 28rpx 28rpx 0rpx 0rpx;
  1516. position: absolute;
  1517. left: 0;
  1518. bottom: 0;
  1519. padding-bottom: constant(safe-area-inset-bottom);
  1520. padding-bottom: env(safe-area-inset-bottom);
  1521. }
  1522. .tkContBox2{
  1523. width: 750rpx;
  1524. height: 60vh;
  1525. background: #F8F8F8;
  1526. border-radius: 28rpx 28rpx 0rpx 0rpx;
  1527. position: absolute;
  1528. left: 0;
  1529. bottom: 0;
  1530. padding-bottom: constant(safe-area-inset-bottom);
  1531. padding-bottom: env(safe-area-inset-bottom);
  1532. }
  1533. .tkTop{
  1534. display: flex;justify-content: space-between;
  1535. padding: 30rpx 40rpx 30rpx 40rpx;
  1536. font-weight: 500;
  1537. font-size: 28rpx;
  1538. color: #222222;
  1539. }
  1540. .tkLineBox{
  1541. background: #FFFFFF;
  1542. border-radius: 16rpx;
  1543. margin: 0 33rpx;
  1544. height: 380rpx;
  1545. overflow: scroll;
  1546. }
  1547. .tkLineBox3{
  1548. border-radius: 16rpx;
  1549. margin: 0 33rpx;
  1550. height: 380rpx;
  1551. overflow: scroll;
  1552. }
  1553. .tkLine{
  1554. display: flex;justify-content: space-between;
  1555. font-size: 26rpx;
  1556. padding: 24rpx 30rpx;
  1557. border-bottom: 1px solid #EEEEEE;
  1558. }
  1559. .tkLineBox3 .tkLine{
  1560. background: #FFFFFF;
  1561. font-size: 28rpx;
  1562. }
  1563. .tkLine:last-child {
  1564. border:none;
  1565. }
  1566. .tklineBox2{
  1567. padding:0 24rpx;
  1568. height: 55vh;
  1569. overflow: scroll;
  1570. }
  1571. .tkline2{
  1572. background: #FFFFFF;
  1573. border-radius: 16rpx;
  1574. padding: 32rpx 24rpx;
  1575. margin-bottom: 20rpx;
  1576. }
  1577. .tklineTop2{
  1578. display: flex;justify-content: space-between;
  1579. }
  1580. .tkZt{
  1581. font-weight: 500;
  1582. font-size: 28rpx;
  1583. color: #222222;
  1584. line-height: 40rpx;
  1585. }
  1586. .tkSeeD{
  1587. font-weight: 400;
  1588. font-size: 28rpx;
  1589. color: #9A9A9A;
  1590. line-height: 40rpx;
  1591. }
  1592. .tkSeeD .jtImg1{
  1593. margin-left: 4rpx;
  1594. }
  1595. .tkRow{
  1596. display: flex;
  1597. font-size: 28rpx;
  1598. padding-top: 18rpx;
  1599. }
  1600. .tlRowLeft{
  1601. color: #9A9A9A;width: 140rpx;
  1602. }
  1603. .zxSj{
  1604. background: #FFFFFF;
  1605. border-radius: 16rpx;
  1606. margin: 0 24rpx;
  1607. display: flex;justify-content: space-between;
  1608. }
  1609. .zxCallImg{
  1610. width: 34rpx;height: 34rpx;
  1611. }
  1612. .zxTitle{
  1613. font-weight: 500;
  1614. font-size: 28rpx;
  1615. color: #222222;
  1616. line-height: 40rpx;
  1617. }
  1618. .zxTitle2{
  1619. font-size: 24rpx;
  1620. color: #9A9A9A;
  1621. padding-top: 12rpx;
  1622. }
  1623. .zxSjleft{
  1624. padding: 32rpx;
  1625. }
  1626. .zxSjRgiht{
  1627. width: 79rpx;
  1628. height: 79rpx;
  1629. border: 2rpx solid #EEEEEE;
  1630. border-radius: 50%;
  1631. display: flex;
  1632. justify-content: center;
  1633. align-items: center;
  1634. margin-top: 32rpx;
  1635. margin-right: 32rpx;
  1636. }
  1637. .zkRefund{
  1638. display: flex;justify-content: center;
  1639. font-size: 28rpx;
  1640. color: #333333;
  1641. padding-top: 30rpx;
  1642. }
  1643. .zkRefund .jtImg1{
  1644. margin-left: 6rpx;margin-top: 12rpx;
  1645. }
  1646. .dsyjt{
  1647. margin-left: 10rpx;margin-top: 10rpx;
  1648. }
  1649. .newQrcodeTs{
  1650. display: flex;
  1651. justify-content: center;
  1652. }
  1653. .NoBorder{
  1654. border: none !important;
  1655. }
  1656. .xiahuaxian{
  1657. text-decoration: line-through;
  1658. }
  1659. .tcinformation{
  1660. padding: 0 0 30rpx 0;
  1661. }
  1662. </style>