order.vue 55 KB

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