order.vue 55 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963
  1. <template>
  2. <view>
  3. <!-- <sjs src="../../../utils/formatFuc.sjs" module="utils" /> -->
  4. <view class="poster" v-if="myqr_show">
  5. <view>
  6. <image :src="myqr_url" :style="'width:' + myqr_width + 'rpx;'" mode="widthFix"></image>
  7. <view class="tool">
  8. <view>
  9. <button open-type="share" class="share-btn">
  10. <image class="img" style="width: 85rpx; margin-right: 25rpx" mode="widthFix" src="/static/images/share/p_dy.png"></image>
  11. </button>
  12. </view>
  13. <view>
  14. <image class="img" mode="widthFix" @tap="goSaveQrcode" src="/static/images/share/p_save.png"></image>
  15. </view>
  16. </view>
  17. <view style="text-align: center">
  18. <image class="closeImg" @tap="hidePoster" src="/static/images/share/close.png"></image>
  19. </view>
  20. </view>
  21. </view>
  22. <view class="appoint-tabs-wrapper">
  23. <view :class="'appoint-tab-item ' + (showType == 0 ? 'active' : '')" data-tab="0" @tap="onTabChange">全 部</view>
  24. <view :class="'appoint-tab-item ' + (showType == 1 ? 'active' : '')" data-tab="1" @tap="onTabChange">待支付</view>
  25. <view :class="'appoint-tab-item ' + (showType == 2 ? 'active' : '')" data-tab="2" @tap="onTabChange">待服务</view>
  26. <view :class="'appoint-tab-item ' + (showType == 3 ? 'active' : '')" data-tab="3" @tap="onTabChange">售后</view>
  27. <!-- <view class="appoint-tab-item {{showType==4?'active':''}}" data-tab="4" bindtap="onTabChange">待评价</view> -->
  28. </view>
  29. <view class="container" :style="'filter:blur(' + myqr_blur + 'rpx)'">
  30. <!-- <view class="orders-switch">
  31. <view class="item {{ showType == 0 ? 'active' : ''}}" bindtap="switchTab" data-index='0'>
  32. <view class="txt">全部</view>
  33. </view>
  34. <view class="item {{ showType == 1 ? 'active' : ''}}" bindtap="switchTab" data-index='1'>
  35. <view class="txt">待付款</view>
  36. </view> -->
  37. <!-- <view class="item {{ showType == 2 ? 'active' : ''}}" bindtap="switchTab" data-index='2'>
  38. <view class="txt">待发货</view>
  39. </view> -->
  40. <!-- <view class="item {{ showType == 3 ? 'active' : ''}}" bindtap="switchTab" data-index='3'>
  41. <view class="txt">待上门</view>
  42. </view>
  43. <view class="item {{ showType == 4 ? 'active' : ''}}" bindtap="switchTab" data-index='4'>
  44. <view class="txt">待评价</view>
  45. </view>
  46. </view> -->
  47. <!-- <van-tabs active="{{showType }}" color="#09afff" bind:change="onTabChange">
  48. <van-tab title="全部" name="0"></van-tab>
  49. <van-tab title="待付款" name="1"></van-tab>
  50. <van-tab title="服务中" name="3"></van-tab>
  51. <van-tab title="待评价" name="4"></van-tab>
  52. </van-tabs> -->
  53. <!--
  54. <view class="appoint-tabs-wrapper">
  55. <view class="appoint-tab-item {{showType==0?'active':''}}" data-tab="0" bindtap="onTabChange">全 部</view>
  56. <view class="appoint-tab-item {{showType==1?'active':''}}" data-tab="1" bindtap="onTabChange">待付款</view>
  57. <view class="appoint-tab-item {{showType==3?'active':''}}" data-tab="3" bindtap="onTabChange">服务中</view>
  58. <view class="appoint-tab-item {{showType==4?'active':''}}" data-tab="4" bindtap="onTabChange">待评价</view>
  59. </view> -->
  60. <view class="no-order" v-if="orderList.length <= 0">
  61. <view class="c">
  62. <text>还没有任何订单呢</text>
  63. </view>
  64. </view>
  65. <view class="orders">
  66. <!-- 工单提醒 -->
  67. <block v-if="showType == 0">
  68. <view v-for="(item, index) in tipsList" :key="index" class="tips-item">
  69. <view class="tips-item-title">
  70. <view class="item-title-left">
  71. <image mode="aspectFit"
  72. src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-store.png"></image>
  73. <text>服务提醒</text>
  74. </view>
  75. <view class="item-title-right">{{item.statusName}}</view>
  76. </view>
  77. <view class="tips-item-line">
  78. <view class="line-left">
  79. 预约时间
  80. </view>
  81. <view class="line-right" v-if="item.bookDateTime.split(',').length>=3">
  82. {{item.bookDateTime.split(',')[0]}}
  83. <text>{{item.bookDateTime.split(',')[1]}}</text>
  84. {{item.bookDateTime.split(',')[2]}}
  85. </view>
  86. <view class="line-right" v-else>
  87. {{item.bookDateTime.split(',')[0]}}
  88. {{item.bookDateTime.split(',')[1]}}
  89. </view>
  90. </view>
  91. <view class="tips-item-line">
  92. <view class="line-left">
  93. 服务项目
  94. </view>
  95. <view class="line-right">
  96. {{item.skuName}}
  97. </view>
  98. </view>
  99. <view class="tips-item-line">
  100. <view class="line-left">
  101. 上门信息
  102. </view>
  103. <view class="line-right">
  104. {{item.bookInfo.split('|')[0]}}
  105. </view>
  106. </view>
  107. <view class="tips-item-line" style="margin-top:-18rpx;">
  108. <view class="line-left">
  109. </view>
  110. <view class="line-right">
  111. {{item.bookInfo.split('|')[1]}}
  112. </view>
  113. </view>
  114. <view class="tips-item-content" v-if="item.tip">
  115. 提醒:{{item.tip}}
  116. </view>
  117. </view>
  118. </block>
  119. <view v-if="orderList.length>0&&tipsList.length>0&&showType == 0" class="order-devide">
  120. <view class="line"></view>
  121. <view class="devide-text">订单列表</view>
  122. <view class="line"></view>
  123. </view>
  124. <view class="order" v-for="(item, index) in orderList" :key="index" :data-status="item.orderStatusVal" @tap="goOrderDetailNew" :data-id="item.id">
  125. <view class="h">
  126. <view class="l" v-if="item.orderStatusVal == '待预约' || item.orderStatusVal == '服务中' || item.orderStatusVal == '服务已完成'|| item.orderStatusVal == '退款中'">已支付</view>
  127. <view class="l" v-else>{{ item.orderStatusVal }}</view>
  128. <view class="r" v-if="item.orderStatusVal == '待预约' || item.orderStatusVal == '服务中' || item.orderStatusVal == '服务已完成'|| item.orderStatusVal == '退款中'">
  129. {{ item.orderStatusVal }}
  130. </view>
  131. <view class="r" v-else></view>
  132. </view>
  133. <!-- open-type="redirect" -->
  134. <!-- <navigator :url="'../orderDetail/orderDetail?id=' + item.id"> -->
  135. <view class="goods" >
  136. <view class="img">
  137. <image :src="item.picUrl + '?w=200'"></image>
  138. </view>
  139. <view class="info">
  140. <!-- <view class="info-orderSn" >订单编号: {{item.orderSn}}</view> -->
  141. <view class="info-main">
  142. <text class="product-name">{{ item.goodsName }}</text>
  143. <text class="price">¥{{ item.orderPrice }}</text>
  144. </view>
  145. <view class="sku-name" v-if="item.increaseSumPrice">
  146. <view>加购: {{ item.unitDescribe }}*{{ item.unitIncreaseNumber }}</view>
  147. <view>¥{{ item.increaseSumPrice }}</view>
  148. </view>
  149. <view class="sku-name">规格:{{ item.skuName }}</view>
  150. <!-- <text class="number">共{{item.number}}件商品</text> -->
  151. <text class="other-info">服务{{ item.serviceTimes }}次</text>
  152. <!-- <text class="other-info" wx:if="{{utils.getNotServiceTimes(item.serviceTimes,item.servedTimes)>0}}"> {{utils.getNotServiceTimes(item.serviceTimes,item.servedTimes)}}次未服务</text> -->
  153. <!-- 支付倒计时 payOverTime -->
  154. <view v-if="item.payOverTime > 0" class="over-time">{{ formatOverTime(item.payOverTime) }} 后订单关闭</view>
  155. </view>
  156. <!-- <view class="status">
  157. </view> -->
  158. </view>
  159. <!-- </navigator> -->
  160. <view class="b">
  161. <view class="l">
  162. <text>实付款:¥{{ item.actualPrice }}</text>
  163. </view>
  164. </view>
  165. <!-- 提醒 -->
  166. <view class="status-tips" v-if="item.orderStatusVal == '已退款'">
  167. <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-refund-tips.png"></image>
  168. <view class="tips-title">已退款</view>
  169. <view>已按照原支付路径退回</view>
  170. </view>
  171. <view class="status-tips" v-if="item.orderStatusVal == '服务已完成'" :data-id="item.id" @tap="goCheck">
  172. <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-customer-msg.png"></image>
  173. <view class="tips-title">服务验收:</view>
  174. <view>服务已完成,请评价</view>
  175. </view>
  176. <view class="customer-msg" v-if="item.customerServiceReminder">
  177. <view class="msg-title">提醒:</view>
  178. <view class="msg-text">{{ item.customerServiceReminder }}</view>
  179. </view>
  180. <view class="customer-msg" v-if="item.ticketStatus == 1">
  181. <view class="msg-title">提醒:</view>
  182. <view class="msg-text">您的售后工单正在处理中,请耐心等待</view>
  183. </view>
  184. <view class="customer-msg" v-if="item.ticketStatus == 2" :data-id="item.id" @tap="orderDetail">
  185. <view class="msg-title">提醒:</view>
  186. <view class="msg-text">您的售后工单已完成,可以去评价了哦</view>
  187. </view>
  188. <!-- 操作事件 -->
  189. <view class="order-operate-wrapper">
  190. <!-- <view catchtap="deleteOrder" wx:if="{{item.handleOption.delete}}" data-id="{{item.id}}" class="del">删除订单
  191. </view> -->
  192. <view @tap.stop.prevent="cancelOrder" v-if="item.handleOption.cancel" :data-id="item.id" class="del">取消订单</view>
  193. <view @tap.stop.prevent="showRefundDia" v-if="item.handleOption.refund" :data-id="item.id" class="del">申请退款</view>
  194. <!-- v-if="item.handleOption.refund" -->
  195. <!-- <view data-id="{{item.id}}" data-sn="{{item.orderSn}}" data-aid="{{item.addressId}}"
  196. data-type="{{item.type}}" wx:if="{{item.handleOption.book}}" class="eval-btn">评价</view> -->
  197. <!-- 抖音评价 20231007屏蔽 by leo 启用工单上的服务验收
  198. <rate-button class="eval-btn" order-id="{{item.orderSn}}" bind:init="handleInit" bind:success="handleSuccess" bind:error="handleError" />-->
  199. <!-- <view catchtap="confirmOrder" wx:if="{{item.handleOption.confirm}}" data-id="{{item.id}}">待上门</view> -->
  200. <!-- <view catchtap="refundOrder" wx:if="{{item.handleOption.refund&&item.goodsList[0].goodsSn!='1036016'}}" data-id="{{item.id}}">申请退款</view> -->
  201. <!-- <view data-id="{{item.goodsList[0].goodsId}}" catchtap="shareFriendOrCircle" >分享商品</view> -->
  202. <view
  203. @tap.stop.prevent="appointService"
  204. :data-id="item.id"
  205. :data-sn="item.orderSn"
  206. :data-aid="item.addressId"
  207. :data-type="item.type"
  208. v-if="item.handleOption.book"
  209. :data-detail="item.detailId"
  210. :data-voucherId="item.voucherId"
  211. class="appoint"
  212. >
  213. 预约服务
  214. </view>
  215. <view @tap.stop.prevent="cancelAppoint" :data-serid="item.bookedDetailId" :data-id="item.id" :data-times="item.serviceTimes" v-if="item.handleOption.canCancelBook" class="del">取消预约</view>
  216. <view
  217. @tap.stop.prevent="modifyAppoint"
  218. :data-id="item.id"
  219. :data-serid="item.bookedDetailId"
  220. :data-times="item.serviceTimes"
  221. :data-sn="item.orderSn"
  222. :data-aid="item.addressId"
  223. :data-type="item.type"
  224. v-if="item.handleOption.canModify"
  225. class="warning-color">
  226. 修改预约
  227. </view>
  228. <view @tap.stop.prevent="payOrder" :data-id="item.id" :data-sn="item.orderSn" v-if="item.handleOption.pay" class="appoint">继续支付</view>
  229. <view class="btn-rebuy" @tap.stop.prevent="buyAgain" :data-id="item.goodsId" v-if="item.handleOption.rebuy">再来一单</view>
  230. </view>
  231. </view>
  232. </view>
  233. </view>
  234. <contact-mov :pageX="30" :pageY="420"></contact-mov>
  235. <view class="refund-order-overlay" v-if="refundTipShow">
  236. <view class="refund-order-dialog">
  237. <view class="refund-dia-tips">您遇到任何问题都可联系在线客服,我们将竭诚为您解决问题!</view>
  238. <view class="dia-btn-wrapper">
  239. <view class="dia-cancel-btn" @tap="refundOrder">继续退款</view>
  240. <view class="dia-conf-btn" @tap="goIM">联系在线客服</view>
  241. </view>
  242. </view>
  243. </view>
  244. <!-- 修改预约/预约 -->
  245. <view class="refund-order-overlay" v-if="appointDiaShow">
  246. <view class="refund-order-dialog refund-order-dia-success">
  247. <view class="refund-dia-title">请选择您要修改的服务</view>
  248. <view class="modify-list">
  249. <view class="modify-item" v-for="(item,index) in serModifyList" :key="index" @tap="switchSer" :data-serid="item.id">
  250. <image src="https://mall.zhaijieshi.cc/file/wx-dy/radio-select.png" mode="aspectFit"
  251. v-if="item.id==serviceId"></image>
  252. <image src="https://mall.zhaijieshi.cc/file/wx-dy/radio-unselect.png" mode="aspectFit"
  253. v-else></image>
  254. <view :class="(item.id==serviceId?'current-modify':'')">{{item.bookTime}}</view>
  255. </view>
  256. </view>
  257. <view class="dia-btn-wrapper">
  258. <view class="dia-cancel-btn" @tap="appointModifyConf">确定</view>
  259. </view>
  260. </view>
  261. <image @tap="closeModify" src="https://jzmall.lifejingzhi.com/file/mall-uni/icon-close.png" class="modify-close"></image>
  262. </view>
  263. <!-- 选择取消原因 -->
  264. <!-- 第一步 -->
  265. <view class="appoint-overlay-wrapper remark-overlay" v-if="cancelFirstShow" @tap="onCancelPopupCloseFir">
  266. <view class="remark-select" @tap.stop.prevent="onCancelClick">
  267. <view class="title" style="text-align: left;">请选择要取消的服务</view>
  268. <view class="remark-list ser-list">
  269. <view :class="'remark-item ser-item '+(item.id==serviceId?'current-ser':'')" @tap="switchSer" :data-serid="item.id"
  270. v-for="(item, index) in serModifyList" :key="index" style="justify-content:flex-start;">
  271. <image mode="aspectFit"
  272. src="https://jzmall.lifejingzhi.com/file/mall-uni/icon-ser-selected.png"
  273. class="radio-img" v-if="item.id==serviceId"></image>
  274. <image mode="aspectFit"
  275. src="https://jzmall.lifejingzhi.com/file/mall-uni/icon-ser-unselect.png"
  276. class="radio-img" v-else></image>
  277. <view :class="'remark-value '+(item.id==serviceId?'current-cancel':'')">{{ item.bookTime }}</view>
  278. <view class="ser-right">已预约</view>
  279. </view>
  280. </view>
  281. <view class="remark-conf-btn" @tap.stop.prevent="cancelFirstConfirm">下一步</view>
  282. </view>
  283. </view>
  284. <view class="appoint-overlay-wrapper remark-overlay" v-if="cancelShow" @tap="onCancelPopupClose">
  285. <view class="remark-select" @tap.stop.prevent="onCancelClick">
  286. <view class="title">选择取消原因</view>
  287. <view class="remark-list">
  288. <view class="remark-item" :data-id="item.id" @tap.stop.prevent="cancelItemSelect"
  289. v-for="(item, index) in cancelList" :key="index">
  290. <view class="remark-value">{{ item.value }}</view>
  291. <image mode="aspectFit"
  292. src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-select-popup.png"
  293. class="radio-img" v-if="cancelReason == item.id"></image>
  294. <image mode="aspectFit"
  295. src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-unselect-popup.png"
  296. class="radio-img" v-else></image>
  297. </view>
  298. </view>
  299. <view class="remark-conf-btn" @tap.stop.prevent="cancelItemConfirm">取消预约</view>
  300. </view>
  301. </view>
  302. </view>
  303. </template>
  304. <script>
  305. var util = require('../../../utils/util.js');
  306. var api = require('../../../config/api.js');
  307. var app = getApp();
  308. import contactMov from '@/components/contact-mov';
  309. export default {
  310. components:{contactMov},
  311. data() {
  312. return {
  313. timer: '',
  314. orderList: [],
  315. showType: 0,
  316. page: 1,
  317. limit: 10,
  318. totalPages: 1,
  319. myqr_show: false,
  320. //我的分享二维码
  321. myqr_url: null,
  322. myqr_blur: 0,
  323. //背景模糊值
  324. myqr_width: 0,
  325. hasLogin: false,
  326. goodsId: '',
  327. tipsList:[],
  328. refundTipShow:false,
  329. refundId:'',
  330. serModifyList:[],
  331. serviceId:'',
  332. appointOrderId:'',
  333. appointDiaType:'',//1修改预约 2取消预约
  334. appointDiaShow:false,
  335. cancelShow:false,
  336. cancelList: [{
  337. id: 19,
  338. value: '【个人原因】临时有事暂时不预约'
  339. },
  340. {
  341. id: 20,
  342. value: '【个人原因】先囤着以后再约'
  343. },
  344. {
  345. id: 22,
  346. value: '【个人原因】计划有变不需要了'
  347. },
  348. {
  349. id: 21,
  350. value: '【商家原因】保洁师无法上门服务'
  351. },
  352. {
  353. id: 23,
  354. value: ' 其他'
  355. }
  356. ],
  357. cancelReason: '',
  358. cancelFirstShow:false,
  359. };
  360. },
  361. onLoad: function (options) {
  362. // 页面初始化 options为页面跳转所带来的参数
  363. if (options.tab) {
  364. this.setData({
  365. showType: options.tab
  366. });
  367. } else {
  368. try {
  369. let query = uni.getEnterOptionsSync().query;
  370. let keys = Object.keys(query);
  371. if (keys.length > 0) {
  372. let str = keys[0]; //{\"showType\": 1}
  373. let json = str.replace(/\"/g, '').replace(/\\/g, '"');
  374. let tab = JSON.parse(json).showType;
  375. if (tab != null && tab != '' && tab != undefined) {
  376. this.setData({
  377. showType: '0' //全部订单,写死因为历史后台传的是1
  378. });
  379. }
  380. }
  381. } catch (error) {
  382. console.log('CatchClause', error);
  383. console.log('CatchClause', error);
  384. console.info(error);
  385. }
  386. }
  387. },
  388. onHide: function () {
  389. console.log('onHide');
  390. clearInterval(this.timer);
  391. },
  392. onUnload: function () {
  393. console.log('onunload');
  394. clearInterval(this.timer);
  395. },
  396. onReachBottom() {
  397. if (this.totalPages > this.page) {
  398. this.setData({
  399. page: this.page + 1
  400. });
  401. this.getOrderList();
  402. } else if (this.orderList.length > 0) {
  403. uni.showToast({
  404. title: '没有更多订单了',
  405. icon: 'none',
  406. duration: 2000
  407. });
  408. return false;
  409. }
  410. },
  411. onReady: function () {
  412. // 页面渲染完成
  413. },
  414. onShow: function () {
  415. // 页面显示
  416. this.setData({
  417. orderList: [],
  418. page: 1
  419. });
  420. // wx.pageScrollTo({
  421. // scrollTop: 0,
  422. // duration: 1000,
  423. // });
  424. this.getOrderList();
  425. },
  426. methods: {
  427. formatOverTime(time){
  428. var minute='00';
  429. var second='00';
  430. if(time>0){
  431. minute=(Math.floor(time/60)<10?('0'+Math.floor(time/60)):Math.floor(time/60));
  432. second=(Number(time%60).toFixed(0)<10?('0'+Number(time%60).toFixed(0)):Number(time%60).toFixed(0));
  433. }
  434. var result="00:"+minute+":"+second;
  435. return result;
  436. },
  437. getOrderList() {
  438. uni.showLoading({
  439. title: '加载中'
  440. });
  441. let that = this;
  442. util.request(api.OrderList, {
  443. showType: that.showType,
  444. page: that.page,
  445. limit: that.limit
  446. }).then((res) => {
  447. uni.hideLoading();
  448. if (res.errno === 0) {
  449. console.log(res.data);
  450. that.setData({
  451. orderList: that.orderList.concat(res.data.data.orders),
  452. totalPages: res.data.pages,
  453. tipsList:res.data.data.tips
  454. });
  455. clearInterval(this.timer);
  456. // 如果有未支付订单,倒计时定时器
  457. let isHasOver = this.orderList.some((item) => {
  458. return item.payOverTime > 0;
  459. });
  460. console.log(isHasOver);
  461. if (isHasOver) {
  462. let timer = setInterval(() => {
  463. let list = this.orderList;
  464. let newList = [];
  465. list.forEach((item) => {
  466. let obj = item;
  467. if (item.payOverTime > 0) {
  468. obj.payOverTime = item.payOverTime - 1;
  469. }
  470. newList.push(obj);
  471. });
  472. this.setData({
  473. orderList: newList
  474. });
  475. }, 1000);
  476. this.setData({
  477. timer: timer
  478. });
  479. }
  480. }
  481. });
  482. },
  483. orderDetail(e) {
  484. let id = e.currentTarget.dataset.id;
  485. uni.navigateTo({
  486. url: '/pages/ucenter/orderDetail/orderDetail?id=' + id
  487. });
  488. },
  489. switchTab: function (event) {
  490. let showType = event.currentTarget.dataset.index;
  491. this.setData({
  492. orderList: [],
  493. showType: showType,
  494. page: 1,
  495. // limit: 10,
  496. totalPages: 1
  497. });
  498. this.getOrderList();
  499. },
  500. onTabChange(e) {
  501. // let showType = e.detail.name;
  502. let showType = e.currentTarget.dataset.tab;
  503. this.setData({
  504. orderList: [],
  505. showType: showType,
  506. page: 1,
  507. // limit: 10,
  508. totalPages: 1
  509. });
  510. this.getOrderList();
  511. },
  512. appointServiceOld(e) {
  513. let id = e.currentTarget.dataset.id;
  514. let addressId = e.currentTarget.dataset.aid;
  515. let type = e.currentTarget.dataset.type;
  516. if (type && type == 5) {
  517. uni.navigateTo({
  518. url: '/pages/ucenter/coupon/couponGoods?id=1'
  519. });
  520. return;
  521. }
  522. if (addressId == null || addressId == 0) {
  523. uni.navigateTo({
  524. url: '/pages/ucenter/appointOrder/appointOrder?orderId=' + id
  525. });
  526. } else {
  527. //买约分离 没有地址的预约
  528. uni.navigateTo({
  529. url: '/pages/ucenter/serviceDetail/serviceDetail?orderId=' + id
  530. });
  531. }
  532. },
  533. appointService(e) {
  534. let id = e.currentTarget.dataset.id;
  535. let addressId = e.currentTarget.dataset.aid;
  536. let type = e.currentTarget.dataset.type;
  537. let detailId = e.currentTarget.dataset.detail;
  538. let voucherId = e.currentTarget.dataset.voucherId;
  539. uni.navigateTo({
  540. url: '/pages/ucenter/appointOrder/appointOrder?orderId=' + id + '&serviceId=' + detailId+'&voucherId='+voucherId
  541. });
  542. },
  543. qrtouchstart: function () {
  544. this.setData({
  545. myqr_blur: 0,
  546. myqr_show: false
  547. });
  548. },
  549. shareFriendOrCircle: function (e) {
  550. // let that = this;
  551. // if (!app.globalData.hasLogin) {
  552. // wx.navigateTo({
  553. // url: "/pages/auth/login/login"
  554. // });
  555. // return;
  556. // }
  557. // //获取分享id 用来追踪链接
  558. // //引荐人和非引荐人的 链接不同
  559. // let imgUrl = that.data.goods.shareWxUrl ? that.data.goods.shareWxUrl : that.data.goods.gallery[0];
  560. // var path = '/pages/goods/goods?id=' + that.data.id + '&rId=' + that.data.userInfo.id;
  561. // if (that.data.userInfo.isDis) { //是引荐人
  562. // path = '/pages/goods/goods?id=' + that.data.id + '&shareId=' + that.data.wxShareId;
  563. // }
  564. // this.hidePoster();
  565. // return {
  566. // title: that.data.goods.name,
  567. // desc: that.data.myqr_ads,
  568. // path: path,
  569. // imageUrl: imgUrl
  570. // }
  571. },
  572. // 保存分享图
  573. saveShare: function () {
  574. let that = this;
  575. uni.showLoading({
  576. title: '图片保存中'
  577. });
  578. console.log(that);
  579. uni.downloadFile({
  580. url: that.myqr_url,
  581. success: function (res) {
  582. console.log(res);
  583. uni.saveImageToPhotosAlbum({
  584. filePath: res.tempFilePath,
  585. success: function (res) {
  586. uni.hideLoading();
  587. uni.showModal({
  588. title: '存图成功',
  589. content: '图片成功保存到相册了,可以分享到朋友圈了',
  590. showCancel: false,
  591. confirmText: '好的',
  592. confirmColor: '#a78845',
  593. success: function (res) {
  594. if (res.confirm) {
  595. console.log('用户点击确定');
  596. that.setData({
  597. myqr_show: false,
  598. myqr_blur: 0
  599. });
  600. }
  601. }
  602. });
  603. },
  604. fail: function (res) {
  605. uni.hideLoading();
  606. uni.showModal({
  607. title: '警告',
  608. content: '不授权无法保存',
  609. showCancel: false
  610. });
  611. that.setData({
  612. myqr_show: false,
  613. myqr_blur: 0
  614. });
  615. }
  616. });
  617. },
  618. fail: function (res) {
  619. uni.hideLoading();
  620. console.log(res);
  621. }
  622. });
  623. },
  624. // “去付款”按钮点击效果
  625. payOrder: function (e) {
  626. // #ifdef MP-TOUTIAO
  627. this.orderPrepay(e);
  628. // #endif
  629. // #ifdef MP-ALIPAY
  630. this.aliPrepay(e);
  631. // #endif
  632. },
  633. orderPrepay(e){
  634. let that = this;
  635. let id = e.currentTarget.dataset.id;
  636. let ordern = e.currentTarget.dataset.sn;
  637. util.request(
  638. api.OrderPayCheck,
  639. {
  640. orderId: id
  641. },
  642. 'POST'
  643. ).then(function (res) {
  644. if (res.errno === 0) {
  645. const outOrderNo = res.data;
  646. console.log(res);
  647. uni.continueToPay({
  648. // orderId: this.data.orderId, // 内部订单号
  649. outOrderNo: outOrderNo,
  650. // 外部订单号 2个订单号必填一个
  651. success: (res) => {
  652. console.log(res);
  653. const { orderId, outOrderNo } = res;
  654. console.log('success res', res);
  655. console.log('orderId', orderId, 'outOrderNo', outOrderNo);
  656. uni.redirectTo({
  657. url: '/pages/ucenter/order/order'
  658. });
  659. },
  660. fail: (res) => {
  661. console.log(res);
  662. const { orderId, outOrderNo, errNo, errMsg, errLogId } = res;
  663. if (errLogId) {
  664. console.log('查询订单信息失败', errNo, errMsg, errLogId);
  665. }
  666. if (orderId || outOrderNo) {
  667. console.log('支付失败', errNo, errMsg, orderId, outOrderNo);
  668. console.log('订单号' + outOrderNo);
  669. // wx.navigateTo({
  670. // url: '/pages/ucenter/orderDetail/orderDetail?id='+outOrderNo
  671. // });
  672. }
  673. util.showErrorToast('支付失败');
  674. }
  675. });
  676. }
  677. });
  678. },
  679. aliPrepay(e){
  680. let that = this;
  681. let id = e.currentTarget.dataset.id;
  682. let ordern = e.currentTarget.dataset.sn;
  683. uni.showLoading({
  684. title: '加载中'
  685. });
  686. util.request(api.aliPrepay, {
  687. orderId:id
  688. }).then(function (res) {
  689. if (res.errno === 0) {
  690. //是否跳转新支付结果页面
  691. let goNewPage=res.data.goNewPage;
  692. let tradeNo=res.data.payment.tradeNo;
  693. let outOrderNo=res.data.payment.outTradeNo;
  694. my.tradePay({
  695. tradeNO:tradeNo,
  696. success: (payres) => {
  697. uni.hideLoading();
  698. console.log('ali调起支付成功');
  699. console.log(payres);
  700. let resultCode=payres.resultCode;
  701. if(resultCode=='9000'){
  702. uni.redirectTo({
  703. url: '/pages/ucenter/order/order'
  704. });
  705. }else{
  706. uni.showModal({
  707. title: '提示',
  708. content: payres.memo,
  709. showCancel: false,
  710. });
  711. }
  712. },
  713. fail: (failres) => {
  714. console.log(failres);
  715. uni.hideLoading();
  716. }
  717. });
  718. } else {
  719. uni.hideLoading();
  720. uni.showModal({
  721. title: '提醒',
  722. showCancel: false,
  723. content: res.errmsg
  724. });
  725. }
  726. })
  727. .catch((res) => {
  728. uni.hideLoading();
  729. util.showErrorToast(res.errmsg);
  730. });
  731. },
  732. // “删除”点击效果
  733. deleteOrder: function (e) {
  734. let that = this;
  735. let id = e.currentTarget.dataset.id;
  736. uni.showModal({
  737. title: '',
  738. content: '确定要删除此订单?',
  739. success: function (res) {
  740. if (res.confirm) {
  741. util.request(
  742. api.OrderDelete,
  743. {
  744. orderId: id
  745. },
  746. 'POST'
  747. ).then(function (res) {
  748. if (res.errno === 0) {
  749. uni.showToast({
  750. title: '删除订单成功'
  751. });
  752. util.redirect('/pages/ucenter/order/order');
  753. } else {
  754. util.showErrorToast(res.errmsg);
  755. }
  756. });
  757. }
  758. }
  759. });
  760. },
  761. // “取消订单”点击效果
  762. cancelOrder: function (e) {
  763. let that = this;
  764. let id = e.currentTarget.dataset.id;
  765. uni.showModal({
  766. title: '',
  767. content: '确定要取消此订单?',
  768. success: function (res) {
  769. if (res.confirm) {
  770. util.request(
  771. api.OrderCancel,
  772. {
  773. orderId: id
  774. },
  775. 'POST'
  776. ).then(function (res) {
  777. if (res.errno === 0) {
  778. uni.showToast({
  779. title: '取消订单成功'
  780. });
  781. util.redirect('/pages/ucenter/order/order');
  782. } else {
  783. util.showErrorToast(res.errmsg);
  784. }
  785. });
  786. }
  787. }
  788. });
  789. },
  790. // “待上门”点击效果
  791. confirmOrder: function (e) {
  792. let that = this;
  793. let id = e.currentTarget.dataset.id;
  794. uni.showModal({
  795. title: '',
  796. content: '确认上门服务?',
  797. success: function (res) {
  798. if (res.confirm) {
  799. util.request(
  800. api.OrderConfirm,
  801. {
  802. orderId: id
  803. },
  804. 'POST'
  805. ).then(function (res) {
  806. if (res.errno === 0) {
  807. uni.showToast({
  808. title: '确认上门成功!'
  809. });
  810. util.redirect('/pages/ucenter/order/order');
  811. } else {
  812. util.showErrorToast(res.errmsg);
  813. }
  814. });
  815. }
  816. }
  817. });
  818. },
  819. // “取消订单并退款”点击效果
  820. refundOrderOld: function (e) {
  821. let that = this;
  822. let id = e.currentTarget.dataset.id;
  823. uni.showModal({
  824. title: '',
  825. content: '确定要取消此订单?',
  826. success: function (res) {
  827. if (res.confirm) {
  828. util.request(
  829. api.OrderRefund,
  830. {
  831. orderId: id
  832. },
  833. 'POST'
  834. ).then(function (res) {
  835. if (res.errno === 0) {
  836. uni.showToast({
  837. title: '取消订单成功'
  838. });
  839. util.redirect('/pages/ucenter/order/order');
  840. } else {
  841. util.showErrorToast(res.errmsg);
  842. }
  843. });
  844. }
  845. }
  846. });
  847. },
  848. showRefundDia:function(e){
  849. let id = e.currentTarget.dataset.id;
  850. this.setData({
  851. refundTipShow:true,
  852. refundId:id
  853. });
  854. },
  855. refundOrder: function (e) {
  856. this.setData({
  857. refundTipShow:false
  858. });
  859. uni.navigateTo({
  860. url: '/pages/ucenter/applyRefund/applyRefund?id=' + this.refundId
  861. });
  862. },
  863. buyAgain(e) {
  864. let id = e.currentTarget.dataset.id;
  865. uni.navigateTo({
  866. url: '/pages/goods/goods?id=' + id
  867. });
  868. },
  869. goCheck(e) {
  870. let id = e.currentTarget.dataset.id;
  871. uni.navigateTo({
  872. url: '/pages/ucenter/orderDetail/orderDetail?id=' + id
  873. });
  874. },
  875. goOrderDetailNew(e) {
  876. let status= e.currentTarget.dataset.status;
  877. let id = e.currentTarget.dataset.id;
  878. console.log(status);
  879. if(status=='未支付'){
  880. uni.navigateTo({
  881. url: '/pages/ucenter/orderDetail/orderDetailPay?id=' + id
  882. });
  883. }else{
  884. uni.navigateTo({
  885. url: '/pages/ucenter/orderDetail/orderDetail?id=' + id
  886. });
  887. }
  888. },
  889. handleInit(event) {
  890. const { status } = event.detail;
  891. console.log(status);
  892. },
  893. handleSuccess(event) {
  894. const { result } = event.detail;
  895. // 团购订单不支持查看评价,此时可决定按钮是否展示
  896. console.log(result);
  897. },
  898. handleError(event) {
  899. const { errMsg, errNo } = event.detail;
  900. // errNo(错误码,对应某种具体报错原因)
  901. // errMsg(报错信息)
  902. console.log(errMsg, errNo);
  903. },
  904. goSaveQrcode() {
  905. console.log('占位:函数 goSaveQrcode 未声明');
  906. },
  907. hidePoster() {
  908. console.log('占位:函数 hidePoster 未声明');
  909. },
  910. goIM() {
  911. this.setData({
  912. refundTipShow:false
  913. });
  914. console.info('goIm');
  915. uni.navigateTo({
  916. url: '/pages/chat/im/im'
  917. });
  918. },
  919. switchSer(e){
  920. let serid = e.currentTarget.dataset.serid;
  921. this.setData({
  922. serviceId:serid
  923. });
  924. },
  925. appointModifyConf(){
  926. if(this.serviceId==''||this.serviceId==null){
  927. uni.showToast({
  928. title: '请选择要修改的服务',
  929. icon:'none'
  930. });
  931. return false;
  932. }else{
  933. this.setData({
  934. appointDiaShow:false
  935. });
  936. uni.navigateTo({
  937. url: '/pages/ucenter/appointOrder/appointOrder?orderId=' + this.appointOrderId + '&serviceId=' +
  938. this.serviceId
  939. });
  940. }
  941. },
  942. closeModify(){
  943. this.setData({
  944. appointDiaShow:false
  945. });
  946. },
  947. modifyAppoint(e){
  948. let id = e.currentTarget.dataset.id;
  949. let serid = e.currentTarget.dataset.serid;
  950. let times = e.currentTarget.dataset.times;
  951. this.setData({
  952. appointOrderId:id
  953. });
  954. if(times>1){
  955. this.setData({
  956. appointDiaShow:true,
  957. serviceId:''
  958. });
  959. util.request(
  960. api.getBooked,
  961. {orderId: id},
  962. 'GET'
  963. ).then(res=> {
  964. if (res.errno === 0) {
  965. this.setData({
  966. serModifyList:res.data
  967. })
  968. }
  969. });
  970. }else{
  971. uni.navigateTo({
  972. url: '/pages/ucenter/appointOrder/appointOrder?orderId=' + id + '&serviceId=' +
  973. serid
  974. });
  975. }
  976. },
  977. onCancelClick() {
  978. },
  979. cancelAppoint(e){
  980. let id = e.currentTarget.dataset.id;
  981. let serid = e.currentTarget.dataset.serid;
  982. let times = e.currentTarget.dataset.times;
  983. this.setData({
  984. appointOrderId:id
  985. });
  986. if(times>1){
  987. this.setData({
  988. cancelFirstShow:true,
  989. serviceId:''
  990. });
  991. util.request(
  992. api.getBooked,
  993. {orderId: id},
  994. 'GET'
  995. ).then(res=> {
  996. if (res.errno === 0) {
  997. this.setData({
  998. serModifyList:res.data
  999. })
  1000. }
  1001. });
  1002. }else{
  1003. this.setData({
  1004. cancelShow:true,
  1005. serviceId:serid
  1006. });
  1007. }
  1008. },
  1009. cancelItemSelect(e) {
  1010. this.setData({
  1011. cancelReason: e.currentTarget.dataset.id
  1012. });
  1013. },
  1014. onCancelPopupClose() {
  1015. this.setData({
  1016. cancelShow: false
  1017. });
  1018. },
  1019. onCancelPopupCloseFir(){
  1020. this.setData({
  1021. cancelFirstShow: false
  1022. });
  1023. },
  1024. cancelFirstConfirm(){
  1025. if(this.serviceId==''||this.serviceId==null){
  1026. uni.showToast({
  1027. title: '请选择要取消的服务',
  1028. icon:'none'
  1029. });
  1030. return false;
  1031. }
  1032. this.setData({
  1033. cancelFirstShow: false,
  1034. cancelShow: true
  1035. });
  1036. },
  1037. cancelItemConfirm() {
  1038. let that = this;
  1039. if (that.cancelReason == '') {
  1040. util.showErrorToast('请选择取消原因');
  1041. return;
  1042. }
  1043. uni.showLoading({
  1044. title: '提交中'
  1045. });
  1046. util.request(
  1047. api.OrderBookCancel, {
  1048. detailId: this.serviceId,
  1049. cancelReason: this.cancelReason
  1050. },
  1051. 'POST'
  1052. ).then((res) => {
  1053. uni.hideLoading();
  1054. if (res.errno === 0) {
  1055. uni.showToast({
  1056. title: '提交成功'
  1057. });
  1058. this.setData({
  1059. cancelShow: false,
  1060. orderList: [],
  1061. page: 1
  1062. });
  1063. this.getOrderList();
  1064. }else{
  1065. uni.showToast({
  1066. title: res.errmsg,
  1067. icon: 'none',
  1068. duration: 2000
  1069. });
  1070. }
  1071. });
  1072. },
  1073. }
  1074. };
  1075. </script>
  1076. <style>
  1077. page {
  1078. /* height: 100%; */
  1079. width: 100%;
  1080. background: #f4f4f4;
  1081. }
  1082. .orders-switch {
  1083. width: 100%;
  1084. background: #fff;
  1085. height: 84rpx;
  1086. /* border-bottom: 1px solid rgba(0,0,0,.15); */
  1087. }
  1088. .orders-switch .item {
  1089. display: inline-block;
  1090. height: 82rpx;
  1091. width: 18%;
  1092. padding: 0 15rpx;
  1093. text-align: center;
  1094. }
  1095. .orders-switch .item .txt {
  1096. display: inline-block;
  1097. height: 82rpx;
  1098. padding: 0 20rpx;
  1099. line-height: 82rpx;
  1100. color: #9a9ba1;
  1101. font-size: 30rpx;
  1102. width: 170rpx;
  1103. }
  1104. .orders-switch .item.active .txt {
  1105. color: #ab956d;
  1106. border-bottom: 4rpx solid #ab956d;
  1107. }
  1108. .no-order {
  1109. width: 100%;
  1110. height: auto;
  1111. margin: 0 auto;
  1112. }
  1113. .no-order .c {
  1114. width: 100%;
  1115. height: auto;
  1116. padding-top: 400rpx;
  1117. }
  1118. .no-order .c text {
  1119. margin: 0 auto;
  1120. display: block;
  1121. width: 258rpx;
  1122. height: 29rpx;
  1123. line-height: 29rpx;
  1124. text-align: center;
  1125. font-size: 29rpx;
  1126. color: #999;
  1127. }
  1128. .orders {
  1129. height: auto;
  1130. width: 750rpx;
  1131. /* overflow: hidden; */
  1132. padding: 0 24rpx;
  1133. margin-top: 110rpx;
  1134. }
  1135. .order {
  1136. /* margin-top: 20rpx; */
  1137. background: #fff;
  1138. padding: 0 24rpx 24rpx 24rpx;
  1139. border-radius: 24rpx;
  1140. margin-bottom: 24rpx;
  1141. }
  1142. .order .h {
  1143. height: 72rpx;
  1144. border-bottom: 2rpx solid #e0e0e0;
  1145. color: #191919;
  1146. font-size: 28rpx;
  1147. font-weight: bold;
  1148. display: flex;
  1149. align-items: center;
  1150. justify-content: space-between;
  1151. }
  1152. .order .h .l {
  1153. }
  1154. .order .h .r {
  1155. }
  1156. .order .goods {
  1157. display: flex;
  1158. /* align-items: center; */
  1159. padding: 24rpx 0 0;
  1160. position: relative;
  1161. }
  1162. .order .goods .img {
  1163. height: 190rpx;
  1164. width: 190rpx;
  1165. background: #f4f4f4;
  1166. }
  1167. .order .goods .img image {
  1168. height: 190rpx;
  1169. width: 190rpx;
  1170. overflow: hidden;
  1171. border-radius: 10rpx;
  1172. }
  1173. .order .goods .info {
  1174. height: 145.83rpx;
  1175. flex: 1;
  1176. padding-left: 20rpx;
  1177. }
  1178. .info-orderSn {
  1179. font-size: 28rpx;
  1180. font-weight: bold;
  1181. }
  1182. .info-main {
  1183. display: flex;
  1184. height: 40rpx;
  1185. align-items: center;
  1186. justify-content: space-between;
  1187. /* margin-bottom: 58rpx; */
  1188. }
  1189. .info .sku-name {
  1190. color: #666666;
  1191. font-size: 24rpx;
  1192. margin: 10rpx 0;
  1193. height: 34rpx;
  1194. line-height: 34rpx;
  1195. display: flex;
  1196. justify-content: space-between;
  1197. }
  1198. .product-name {
  1199. line-height: 40rpx;
  1200. font-size: 28rpx;
  1201. /* padding-left: 20rpx;
  1202. text-indent: -16rpx; */
  1203. overflow: hidden;
  1204. text-overflow: ellipsis;
  1205. white-space: nowrap;
  1206. width: 328rpx;
  1207. font-weight: bold;
  1208. color: rgba(0, 0, 0, 0.9);
  1209. }
  1210. .info-main .price {
  1211. color: rgba(0, 0, 0, 0.9);
  1212. font-size: 24rpx;
  1213. font-weight: bold;
  1214. }
  1215. .info .other-info {
  1216. font-size: 24rpx;
  1217. color: rgba(0, 0, 0, 0.9);
  1218. line-height: 34rpx;
  1219. }
  1220. .order .goods .status {
  1221. width: 105rpx;
  1222. color: #b4282d;
  1223. font-size: 25rpx;
  1224. }
  1225. .order .b {
  1226. height: 44rpx;
  1227. line-height: 44rpx;
  1228. /* border-top: 1px solid #f4f4f4; */
  1229. font-size: 26rpx;
  1230. color: #666;
  1231. text-align: right;
  1232. }
  1233. .order .b text {
  1234. font-size: 24rpx;
  1235. color: rgba(0, 0, 0, 0.9);
  1236. font-weight: bold;
  1237. }
  1238. .order .b .l {
  1239. /* float: left; */
  1240. }
  1241. .order .b .r {
  1242. float: right;
  1243. }
  1244. .order .b .btn {
  1245. margin-top: 19rpx;
  1246. height: 64.5rpx;
  1247. line-height: 64.5rpx;
  1248. text-align: center;
  1249. padding: 0 20rpx;
  1250. border-radius: 5rpx;
  1251. font-size: 28rpx;
  1252. color: #fff;
  1253. background: #b4282d;
  1254. }
  1255. .order-operate-wrapper {
  1256. /* height: 80rpx; */
  1257. display: flex;
  1258. align-items: center;
  1259. justify-content: flex-end;
  1260. flex: 1;
  1261. flex-wrap: wrap;
  1262. border-top: 2rpx solid #e0e0e0;
  1263. padding: 10rpx 0 12rpx;
  1264. margin: 20rpx 0 0;
  1265. }
  1266. /* .order-operate-wrapper::after {
  1267. content: '';
  1268. flex: auto;
  1269. } */
  1270. .order-operate-wrapper > view {
  1271. text-align: center;
  1272. font-size: 28rpx;
  1273. color: #fff;
  1274. margin-left: 20rpx;
  1275. width: 190rpx;
  1276. height: 72rpx;
  1277. line-height: 72rpx;
  1278. background: linear-gradient(90deg, #ff9c49 0%, #ff8219 100%);
  1279. border-radius: 72rpx;
  1280. margin-top: 10rpx;
  1281. font-weight: bold;
  1282. }
  1283. .order-operate-wrapper > view.del {
  1284. border: 2rpx solid #d8d8d8;
  1285. /* color: #666666; */
  1286. color: rgba(0,0,0,0.85);
  1287. background: #fff;
  1288. }
  1289. .order-operate-wrapper > view.appoint {
  1290. background: linear-gradient(90deg, #00baff 0%, #008dff 100%);
  1291. }
  1292. .myqr {
  1293. position: fixed;
  1294. z-index: 999;
  1295. width: 100%;
  1296. text-align: center;
  1297. height: auto;
  1298. padding-top: 50rpx;
  1299. top: 0;
  1300. left: 0;
  1301. right: 0;
  1302. bottom: 0;
  1303. }
  1304. .myqr .cancel {
  1305. width: 60rpx;
  1306. height: 60rpx;
  1307. margin-top: 30rpx;
  1308. margin-left: 480rpx;
  1309. }
  1310. .myqr .img {
  1311. width: 480rpx;
  1312. }
  1313. .myqr .btn {
  1314. width: 120rpx;
  1315. height: 120rpx;
  1316. line-height: 120rpx;
  1317. margin-top: 20rpx;
  1318. padding: 30rpx;
  1319. background: #ffffff;
  1320. border-radius: 60rpx;
  1321. }
  1322. /* 会员卡蒙层的样式 */
  1323. .poster {
  1324. position: fixed;
  1325. top: 0;
  1326. bottom: 0;
  1327. right: 0;
  1328. left: 0;
  1329. background-color: #333333d1;
  1330. /* padding: 0rpx 80rpx;
  1331. padding-top: 20%;*/
  1332. z-index: 99;
  1333. height: 100%;
  1334. text-align: center;
  1335. justify-content: center;
  1336. align-items: center;
  1337. display: flex;
  1338. }
  1339. .title {
  1340. color: #fff;
  1341. margin: 20rpx 0;
  1342. font-size: 30rpx;
  1343. }
  1344. .ads {
  1345. margin: 10rpx 0rpx;
  1346. color: #fff;
  1347. }
  1348. .tool {
  1349. display: flex;
  1350. text-align: center;
  1351. justify-content: baseline;
  1352. width: 100%;
  1353. margin-top: 20rpx;
  1354. }
  1355. .tool view {
  1356. flex: 1;
  1357. }
  1358. .img {
  1359. width: 99rpx;
  1360. }
  1361. .closeImg {
  1362. width: 57rpx;
  1363. height: 57rpx;
  1364. }
  1365. .share-btn {
  1366. background-color: transparent;
  1367. }
  1368. .share-btn::after {
  1369. border: none;
  1370. }
  1371. .m-card {
  1372. width: 100%;
  1373. height: 230rpx;
  1374. margin: 20rpx 0;
  1375. }
  1376. .m-card image {
  1377. width: 100%;
  1378. height: 230rpx;
  1379. }
  1380. .appoint-tabs-wrapper {
  1381. height: 88rpx;
  1382. display: flex;
  1383. align-items: center;
  1384. line-height: 88rpx;
  1385. justify-content: space-around;
  1386. position: fixed;
  1387. left: 0;
  1388. right: 0;
  1389. top: 0;
  1390. background: #fff;
  1391. z-index: 99;
  1392. }
  1393. .appoint-tab-item {
  1394. font-weight: bold;
  1395. font-size: 30rpx;
  1396. color: #191919;
  1397. /* width:80rpx; */
  1398. }
  1399. .appoint-tab-item.active {
  1400. color: #fe2b54;
  1401. /* border-bottom:4rpx solid #09afff; */
  1402. }
  1403. .detail-btn {
  1404. width: 148rpx;
  1405. text-align: center;
  1406. line-height: 60rpx;
  1407. text-align: center;
  1408. font-size: 26rpx;
  1409. color: #00b9ff;
  1410. margin-top: -20rpx;
  1411. /* margin-left:340rpx; */
  1412. width: 170rpx;
  1413. height: 60rpx;
  1414. background: #ffffff;
  1415. border: 2rpx solid #00b9ff;
  1416. border-radius: 60px;
  1417. float: right;
  1418. }
  1419. .status-tips {
  1420. height: 56rpx;
  1421. background: #ebebeb;
  1422. border-radius: 10rpx;
  1423. display: flex;
  1424. align-items: center;
  1425. padding: 0 0 0 16rpx;
  1426. margin-top: 24rpx;
  1427. }
  1428. .status-tips image {
  1429. width: 36rpx;
  1430. height: 32rpx;
  1431. }
  1432. .status-tips view {
  1433. font-size: 24rpx;
  1434. color: #2e3333;
  1435. }
  1436. .status-tips .tips-title {
  1437. color: #191919;
  1438. font-weight: bold;
  1439. margin: 0 16rpx;
  1440. }
  1441. .customer-msg {
  1442. background: #ebebeb;
  1443. border-radius: 10rpx;
  1444. display: flex;
  1445. padding: 12rpx 16rpx;
  1446. margin-top: 24rpx;
  1447. }
  1448. .customer-msg .msg-title {
  1449. color: #fe2b54;
  1450. font-weight: bold;
  1451. font-size: 24rpx;
  1452. white-space: nowrap;
  1453. }
  1454. .customer-msg .msg-text {
  1455. line-height: 34rpx;
  1456. display: -webkit-box;
  1457. -webkit-box-orient: vertical;
  1458. -webkit-line-clamp: 2;
  1459. text-overflow: ellipsis;
  1460. overflow: hidden;
  1461. font-size: 24rpx;
  1462. color: #000000;
  1463. }
  1464. .over-time {
  1465. position: absolute;
  1466. top: 170rpx;
  1467. right: 0;
  1468. line-height: 40rpx;
  1469. color: #ad0000;
  1470. font-size: 28rpx;
  1471. }
  1472. .eval-btn {
  1473. text-align: center;
  1474. font-size: 24rpx;
  1475. color: #fff;
  1476. margin-left: 20rpx;
  1477. width: 160rpx;
  1478. height: 56rpx;
  1479. line-height: 56rpx;
  1480. background: linear-gradient(90deg, #ff9c49 0%, #ff8219 100%);
  1481. border-radius: 56rpx;
  1482. margin-top: 10rpx;
  1483. border: 2rpx solid #ff8219;
  1484. color: #ff8219;
  1485. background: #fff;
  1486. }
  1487. .order-operate-wrapper view.eval-btn {
  1488. border: 2rpx solid #ff8219;
  1489. color: #ff8219;
  1490. background: #fff;
  1491. }
  1492. .tips-item{
  1493. background: #fff;
  1494. border-radius:12rpx;
  1495. padding:30rpx 0rpx 0;
  1496. margin-bottom: 20rpx;
  1497. }
  1498. .tips-item-title{
  1499. display: flex;
  1500. height:40rpx;
  1501. align-items: center;
  1502. justify-content: space-between;
  1503. margin-bottom:20rpx;
  1504. padding:0 32rpx;
  1505. }
  1506. .item-title-left{
  1507. display: flex;
  1508. align-items: center;
  1509. }
  1510. .item-title-left image{
  1511. width:28rpx;
  1512. height:28rpx;
  1513. margin-right:8rpx;
  1514. }
  1515. .item-title-left text{
  1516. font-size: 28rpx;
  1517. font-weight: bold;
  1518. color:#333;
  1519. }
  1520. .item-title-right{
  1521. height: 34rpx;
  1522. background: #FFFFFF;
  1523. border-radius: 4rpx;
  1524. border: 1rpx solid #5FB306;
  1525. padding:0 8rpx;
  1526. line-height: 34rpx;
  1527. font-size: 22rpx;
  1528. color: #5FB306;
  1529. }
  1530. .tips-item-line{
  1531. display: flex;
  1532. height:44rpx;
  1533. margin-bottom:20rpx;
  1534. align-items: center;
  1535. justify-content: space-between;
  1536. padding:0 32rpx;
  1537. }
  1538. .tips-item-line .line-left{
  1539. font-size: 28rpx;
  1540. color: #999999;
  1541. }
  1542. .tips-item-line .line-right{
  1543. font-size: 28rpx;
  1544. color: #333333;
  1545. font-weight: bold;
  1546. width:500rpx;
  1547. overflow: hidden;
  1548. white-space: nowrap;
  1549. text-overflow: ellipsis;
  1550. text-align: right;
  1551. }
  1552. .line-right text{
  1553. color: #5FB306;
  1554. }
  1555. .tips-item-content{
  1556. background: #FF4447;
  1557. border-radius: 0rpx 0rpx 14rpx 14rpx;
  1558. padding:24rpx 24rpx 24rpx 32rpx;
  1559. line-height: 40rpx;
  1560. font-size: 28rpx;
  1561. color: rgba(255,255,255,0.9);
  1562. }
  1563. .order-devide{
  1564. height:40rpx;
  1565. margin-bottom:20rpx;
  1566. display: flex;
  1567. align-items: center;
  1568. justify-content: space-between;
  1569. padding:0 4rpx;
  1570. }
  1571. .order-devide .line{
  1572. width: 290rpx;
  1573. height: 1rpx;
  1574. background: #979797;
  1575. }
  1576. .order-devide .devide-text{
  1577. font-size: 28rpx;
  1578. color: #999999;
  1579. }
  1580. /* 退款弹框 */
  1581. .refund-order-overlay {
  1582. width: 750rpx;
  1583. height: 100vh;
  1584. background: rgba(0, 0, 0, 0.5);
  1585. display: flex;
  1586. align-items: center;
  1587. justify-content: center;
  1588. position: fixed;
  1589. top: 0;
  1590. bottom: 0;
  1591. z-index:999;
  1592. flex-direction: column;
  1593. }
  1594. .refund-order-dialog {
  1595. width: 606rpx;
  1596. height: 644rpx;
  1597. border-radius: 14rpx;
  1598. background: #ffffff;
  1599. border-radius: 20rpx;
  1600. position: relative;
  1601. padding: 300rpx 30rpx 40rpx;
  1602. background: url('https://jzmall.lifejingzhi.com/file/jzmall-dy/dia-bg-refund.png') no-repeat;
  1603. background-color: #FFFFFF;
  1604. background-size: 606rpx 210rpx;
  1605. }
  1606. .refund-order-dialog.refund-order-dia-success{
  1607. padding: 200rpx 30rpx 40rpx;
  1608. background-image: url('https://jzmall.lifejingzhi.com/file/jzmall-dy/dia-bg-refund-success.png');
  1609. height:auto;
  1610. }
  1611. .refund-order-dia-success .dia-btn-wrapper{
  1612. justify-content: center;
  1613. }
  1614. .refund-order-dia-success .dia-cancel-btn{
  1615. width:484rpx;
  1616. font-weight: bold;
  1617. border: 2rpx solid #0093FF;
  1618. color: #0093FF;
  1619. }
  1620. .refund-dia-title {
  1621. height: 56rpx;
  1622. font-weight: bold;
  1623. font-size: 40rpx;
  1624. color: rgba(0,0,0,0.85);
  1625. line-height: 56rpx;
  1626. text-align: center;
  1627. margin:60rpx 0 34rpx;
  1628. }
  1629. .refund-dia-tips {
  1630. width: 540rpx;
  1631. color: #333333;
  1632. line-height: 46rpx;
  1633. font-size: 32rpx;
  1634. color: rgba(0,0,0,0.85);
  1635. text-align: center;
  1636. white-space: wrap;
  1637. margin-bottom: 120rpx;
  1638. font-weight: bold;
  1639. }
  1640. .dia-btn-wrapper {
  1641. height:94rpx;
  1642. display: flex;
  1643. justify-content: space-between;
  1644. }
  1645. .dia-cancel-btn{
  1646. width: 248rpx;
  1647. height: 94rpx;
  1648. line-height: 94rpx;
  1649. border-radius: 94rpx;
  1650. border: 2rpx solid #0093FF;
  1651. font-size: 32rpx;
  1652. color: #0093FF;
  1653. /* font-weight: bold; */
  1654. text-align: center;
  1655. }
  1656. .dia-conf-btn{
  1657. width: 258rpx;
  1658. height: 94rpx;
  1659. line-height: 94rpx;
  1660. border-radius: 94rpx;
  1661. font-size: 32rpx;
  1662. color: #fff;
  1663. font-weight: bold;
  1664. background: #0093FF;
  1665. text-align: center;
  1666. }
  1667. .modify-list{
  1668. margin:0 0 44rpx;
  1669. max-height: 400rpx;
  1670. overflow-y: scroll;
  1671. }
  1672. .modify-item{
  1673. height: 46rpx;
  1674. margin-bottom:18rpx;
  1675. display: flex;
  1676. align-items: center;
  1677. justify-content: center;
  1678. line-height:46rpx;
  1679. }
  1680. .modify-item image{
  1681. width:30rpx;
  1682. height:30rpx;
  1683. margin-right:16rpx;
  1684. }
  1685. .modify-item view{
  1686. font-size: 32rpx;
  1687. color: rgba(102,102,102,0.85);
  1688. }
  1689. .modify-item view.current-modify{
  1690. color: rgba(0,0,0,0.85);
  1691. font-weight: bold;
  1692. }
  1693. .modify-close{
  1694. width:80rpx;
  1695. height:80rpx;
  1696. margin-top:58rpx;
  1697. }
  1698. .warning-color {
  1699. background: linear-gradient(90deg, #af4318 0%, #c96405 100%) !important;
  1700. }
  1701. /* 选择备注 */
  1702. .appoint-overlay-wrapper.remark-overlay {
  1703. display: flex;
  1704. align-items: flex-end;
  1705. justify-content: center;
  1706. position: fixed;
  1707. top: 0;
  1708. left: 0;
  1709. width: 100%;
  1710. height: 100%;
  1711. background-color: rgba(0, 0, 0, 0.7);
  1712. z-index: 999;
  1713. }
  1714. .remark-select {
  1715. width: 750rpx;
  1716. padding: 0 24rpx 56rpx;
  1717. background: #ffffff;
  1718. border-radius: 24rpx 24rpx 0 0;
  1719. }
  1720. .remark-select .title {
  1721. font-weight: 600;
  1722. color: #191919;
  1723. font-size: 30rpx;
  1724. height: 90rpx;
  1725. line-height: 90rpx;
  1726. text-align: center;
  1727. border-bottom: 2rpx solid #e0e0e0;
  1728. }
  1729. .remark-item .remark-value {
  1730. color: #191919;
  1731. font-size: 26rpx;
  1732. font-weight: bold;
  1733. flex: 1;
  1734. text-align: left;
  1735. }
  1736. .remark-list .remark-item {
  1737. height: 84rpx;
  1738. display: flex;
  1739. border-bottom: 2rpx solid #e0e0e0;
  1740. align-items: center;
  1741. }
  1742. .remark-item .radio-img {
  1743. width: 26rpx;
  1744. height: 26rpx;
  1745. }
  1746. .remark-conf-btn {
  1747. width: 652rpx;
  1748. height: 90rpx;
  1749. line-height: 90rpx;
  1750. border-radius: 90rpx;
  1751. border: 4rpx solid #ff8219;
  1752. text-align: center;
  1753. font-size: 36rpx;
  1754. color: #ff8219;
  1755. margin: 0 auto;
  1756. margin-top: 54rpx;
  1757. }
  1758. .remark-list .remark-item.ser-item{
  1759. border:none;
  1760. background: #B5EDFF;
  1761. border-radius: 12px;
  1762. height:130rpx;
  1763. padding:0 30rpx;
  1764. margin-bottom:24rpx;
  1765. }
  1766. .remark-list .remark-item.ser-item.current-ser{
  1767. background: #FA6400;
  1768. }
  1769. .remark-item.ser-item .remark-value{
  1770. color:#666;
  1771. font-size: 32rpx;
  1772. font-weight:normal;
  1773. flex:1;
  1774. }
  1775. .remark-item.ser-item view{
  1776. color:#666;
  1777. font-size: 32rpx;
  1778. font-weight:normal;
  1779. }
  1780. .remark-item.ser-item.current-ser .remark-value{
  1781. color:#fff;
  1782. font-weight:bold;
  1783. }
  1784. .remark-item.ser-item.current-ser view{
  1785. color:#fff;
  1786. font-weight:bold;
  1787. }
  1788. .remark-item.ser-item .radio-img{
  1789. width:30rpx;
  1790. height:30rpx;
  1791. margin-right:26rpx;
  1792. }
  1793. .ser-right{
  1794. text-align:right;
  1795. }
  1796. .remark-list.ser-list{
  1797. min-height:500rpx;
  1798. max-height: 800rpx;
  1799. overflow-y: scroll;
  1800. }
  1801. </style>