detail.vue 32 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417
  1. <template>
  2. <view>
  3. <!-- #ifdef MP || APP-PLUS -->
  4. <NavBar titleText="订单详情" :iconColor="iconColor" :textColor="iconColor" :isScrolling="isScrolling" showBack>
  5. </NavBar>
  6. <!-- #endif -->
  7. <view class="headerBg">
  8. <view :style="{ height: `${getHeight.barTop}px` }"></view>
  9. <view :style="{ height: `${getHeight.barHeight}px` }"></view>
  10. <view class="inner"></view>
  11. </view>
  12. <view class="order-detail pos-order-details">
  13. <view class="header">
  14. <view class="state">{{ info.refundStatus != 3?orderStatus[orderInfo.status]:'已退款' }}</view>
  15. <view v-if="[0].includes(orderInfo.status)&&info.refundStatus != 3" class="data">等待骑手接单~</view>
  16. <view v-if="[1].includes(orderInfo.status)&&info.refundStatus != 3" class="data">您已接单,请及时到店取货哦~</view>
  17. <view v-if="[2].includes(orderInfo.status)&&info.refundStatus != 3" class="data">订单配送中,正在努力赶往用户所在地!</view>
  18. <view v-if="[3].includes(orderInfo.status)&&info.refundStatus != 3" class="data">订单已送达,等待用户收货确认!</view>
  19. <view v-if="[4,5,6].includes(orderInfo.status)&&info.refundStatus != 3" class="data">订单已经完成,您可以提现啦~</view>
  20. <!-- <view v-if="[1,2].includes(info.status)&&info.refundStatus != 3" class="data">您已接单,请及时到店取货哦~</view> -->
  21. <!-- <view v-if="info.refundStatus != 3&&info.status == 3" class="data">用户已下单,您可以联系用户到店自提!</view>
  22. --> <!-- <view v-if="info.refundStatus != 3&&info.status == 4" class="data">订单配送中,正在努力赶往用户所在地!</view>
  23. <view v-if="info.refundStatus != 3&&info.status == 5" class="data">订单已送达,等待用户收货确认!</view>
  24. <view v-if="info.refundStatus != 3&&info.status == 6" class="data">订单已经完成,您可以提现啦~</view>
  25. <view v-if="info.refundStatus == 3" class="data">此订单退款已原路返回!</view> -->
  26. </view>
  27. <!--view class="remarks acea-row row-middle">
  28. <text class="iconfont icon-ic_notes"></text>
  29. <view class="line1 mark-box" style="text-align: left;">
  30. {{info.merchantRemark ? info.merchantRemark : '订单未备注'}}
  31. </view>
  32. </view-->
  33. <view class="address">
  34. <view class="name" @click="goMap(orderInfo.userLatitude,orderInfo.userLongitude,orderInfo.userName,orderInfo.userAddress)">
  35. <text class="iconfont icon-chakanditu"></text>
  36. {{ info.realName}}
  37. <text class="phone">{{ info.userPhone }}</text>
  38. </view>
  39. <view>地址:{{ info.userAddress }}</view>
  40. <!-- <view class="map" @click="goMap(item)">
  41. <text class="iconfont icon-chakanditu"></text>
  42. <view class="map_text">查看地图</view>
  43. </view> -->
  44. </view>
  45. <view class="acea-row row-middle user-box">
  46. <!--image :src="info.avatar" class="image"></image-->
  47. <view class="text" >
  48. <view class="iconfont icon-chakanditu acea-row row-middle name" @click="goMap(orderInfo.merLatitude,orderInfo.merLongitude,orderInfo.merName,orderInfo.merAddress)">
  49. {{orderInfo.merName}}
  50. </view>
  51. <view v-if="orderInfo.merPhone" class="phone">{{orderInfo.merPhone}}</view>
  52. <view>地址:{{ orderInfo.merAddress }}</view>
  53. </view>
  54. </view>
  55. <!-- 未拆单时,正常单 -->
  56. <view class="pos-order-goods split">
  57. <navigator :url="`/pages/goods_details/index?id=${item.product_id}`" hover-class="none"
  58. class="goods acea-row" v-for="(item, index) in info.orderDetailList" :key="index">
  59. <view class="picTxt acea-row">
  60. <view class="pictrue">
  61. <image :src="item.image" />
  62. </view>
  63. <view class="text info-text">
  64. <view class="info line1">{{ item.productName }}</view>
  65. <view class="attr line1">{{ item.sku }}</view>
  66. </view>
  67. </view>
  68. <view class="money">
  69. <!--BaseMoney :money="item.price" symbolSize="20" integerSize="32" decimalSize="20"></BaseMoney-->
  70. <view class="num">共{{ item.payNum }}件</view>
  71. <view class="acea-row row-right">
  72. <view class="writeOff" v-if="item.refundNum">
  73. {{item.refundNum}}件已退款
  74. </view>
  75. </view>
  76. </view>
  77. </navigator>
  78. <view class="mark acea-row" v-if="info.userRemark">
  79. <view class="name">买家留言:</view>
  80. <view class="value line1">{{info.userRemark}}</view>
  81. </view>
  82. </view>
  83. <!-- 结束 -->
  84. <view class="wrapper">
  85. <view class="item acea-row row-between">
  86. <view>订单编号:</view>
  87. <view class="conter acea-row row-middle row-right">
  88. {{ info.orderNo}}
  89. <!-- #ifdef H5 -->
  90. <text class="copy copy-data" :data-clipboard-text="info.orderNo">复制</text>
  91. <!-- #endif -->
  92. <!-- #ifdef MP -->
  93. <text class="copy copy-data" @click="copyNum(info.orderNo)">复制</text>
  94. <!-- #endif -->
  95. </view>
  96. </view>
  97. <view class="item acea-row row-between">
  98. <view>下单时间:</view>
  99. <view class="conter">{{ info.payTime }}</view>
  100. </view>
  101. <view class="item acea-row row-between" v-show="info.acceptDate">
  102. <view>接单时间:</view>
  103. <view class="conter">{{ info.acceptDate }}</view>
  104. </view>
  105. <!--view class="item acea-row row-between">
  106. <view>支付方式:</view>
  107. <view class="conter">
  108. {{payType[info.payChannel]}}
  109. </view>
  110. </view>
  111. <view class="item acea-row row-between">
  112. <view>支付时间:</view>
  113. <view class="conter">
  114. {{info.payTime}}
  115. </view>
  116. </view>
  117. <view class="item acea-row row-between">
  118. <view>下单时间:</view>
  119. <view class="conter">
  120. {{info.createTime}}
  121. </view>
  122. </view-->
  123. </view>
  124. <view class="wrapper" v-if="info.deliveryType != 'fictitious'">
  125. <view class="item acea-row row-between">
  126. <view>配送方式:</view>
  127. <view v-if="Number(info.secondType) > 4" class='conter'>自动发货</view>
  128. <view v-else-if="Number(info.secondType) == 2" class='conter'>虚拟发货</view>
  129. <view class="conter" v-else>
  130. {{info.shippingType==4?'骑手配送':(info.shippingType==1?'商家配送':(info.shippingType==2?'到店自提':'虚拟发货'))}}
  131. </view>
  132. </view>
  133. </view>
  134. <view class="wrapper" v-if="info.orderExtend&&JSON.parse(info.orderExtend).length">
  135. <systemFromInfo :orderExtend="JSON.parse(info.orderExtend)"></systemFromInfo>
  136. </view>
  137. <view class="wrapper">
  138. <view class='item acea-row row-between'>
  139. <view>商品总计</view>
  140. <view class='conter'>{{info.totalNum}}件</view>
  141. </view>
  142. <view class="item acea-row row-between">
  143. <view>配送费</view>
  144. <view class="conter">¥{{ orderInfo.deliveCharge}}</view>
  145. </view>
  146. <!--view class='item acea-row row-between'>
  147. <view>会员优惠</view>
  148. <view class='conter'>-¥{{info.svipDiscountPrice}}</view>
  149. </view>
  150. <view class="item acea-row row-between">
  151. <view>商家优惠</view>
  152. <view class="conter">-¥{{ info.merCouponPrice }}</view>
  153. </view>
  154. <view class='item acea-row row-between'>
  155. <view>平台优惠</view>
  156. <view class='conter'>-¥{{info.platCouponPrice}}</view>
  157. </view>
  158. <view class='item acea-row row-between'>
  159. <view>积分抵扣(使用{{info.useIntegral}}积分)</view>
  160. <view class='conter'>-¥{{info.integralPrice}}</view>
  161. </view>
  162. <view class="actualPay acea-row row-right">
  163. 实付款:
  164. <BaseMoney :money="info.payPrice" symbolSize="24" integerSize="40" decimalSize="24" color="#E93323">
  165. </BaseMoney>
  166. </view-->
  167. </view>
  168. <view class="height-add"></view>
  169. <view class="footer acea-row row-right row-middle">
  170. <!-- <view class="tomore" v-if="info.status==2&&!info.userRefundSign">
  171. <span @click="toMore">更多</span>
  172. <view class="more-operate" v-if="moreShow">
  173. <view class="sjx"></view>
  174. <view class="more-operate-item" @click="print">
  175. 小票打印
  176. </view>
  177. <view class="more-operate-item" @click="modify('1')">
  178. 订单备注
  179. </view>
  180. </view>
  181. </view> -->
  182. <view class="bnt delivery" @click="complete()" v-if="orderInfo.status==2">
  183. 配送完成</view>
  184. <view class="bnt delivery" v-if="orderInfo.status==0"
  185. @click="receiving()">立即接单</view>
  186. <view class="bnt delivery" v-if="orderInfo.status==1"
  187. @click="pickUp()">取货配送
  188. </view>
  189. <!-- <view class="bnt delivery" v-if="info.status==3&&info.refundStatus!=3" @click="verify">立即核销</view> -->
  190. </view>
  191. <!-- <PriceChange :change="change" :orderInfo="info" :isRefund="isRefund"
  192. v-on:statusChange="statusChange($event)" v-on:closechange="changeclose($event)"
  193. v-on:savePrice="savePrice" :status="status"></PriceChange -->
  194. </view>
  195. <uni-popup ref="hs_popup" background-color="#fff" borderRadius="10px">
  196. <view class="sh_popup-content"
  197. :class="{ 'popup-height': popup_center === 'left' || popup_center === 'right' }">
  198. <view class="sh_popup_title">
  199. 打印小票
  200. </view>
  201. <view class="sh_popup_text">
  202. 你确定要打印此订单小票吗?
  203. </view>
  204. <view class="sh_popup_btn">
  205. <view class="no_btn btn" @click="hsPopupClose">取消</view>
  206. <view class="yes_btn btn" @click="toRecycle">确认</view>
  207. </view>
  208. </view>
  209. </uni-popup>
  210. </view>
  211. </template>
  212. <script>
  213. import PriceChange from "../components/PriceChange/index.vue";
  214. import countDown from '@/components/countDown/index.vue'
  215. import BaseMoney from "../components/BaseMoney.vue";
  216. import systemFromInfo from '@/components/systemFromInfo';
  217. // #ifdef MP || APP-PLUS
  218. import NavBar from "../components/NavBar.vue";
  219. // #endif
  220. // #ifdef H5
  221. import ClipboardJS from "@/plugin/clipboard/clipboard.js";
  222. // #endif
  223. import {
  224. employeeOrderInfo,
  225. employeeOrderMark,
  226. orderInvoiceListInfo,
  227. orderGetVerfication,
  228. printReceipt
  229. } from '@/api/work.js';
  230. import {
  231. riderOrderInfo,riderOrderReceiving,orderPickUp,orderComplete
  232. } from '@/api/rider.js';
  233. import {
  234. isMoney
  235. } from '@/utils/validate.js'
  236. export default {
  237. name: "AdminOrder",
  238. components: {
  239. PriceChange,
  240. countDown,
  241. BaseMoney,
  242. systemFromInfo,
  243. // #ifdef MP || APP-PLUS
  244. NavBar,
  245. // #endif
  246. },
  247. props: {},
  248. data: function() {
  249. return {
  250. popup_center: 'center',
  251. moreShow: false,
  252. payType: {
  253. 'public': '公众号支付',
  254. 'mini': '小程序支付',
  255. 'h5': '网页支付支付',
  256. 'yue': '余额支付',
  257. 'wechatIos': '微信Ios支付',
  258. 'wechatAndroid': '微信Android支付',
  259. 'alipay': '支付宝支付',
  260. 'alipayApp': '支付宝App支付'
  261. },
  262. orderStatus: ['待接单', '待取货', '配送中', '已完成'],
  263. openErp: false,
  264. giveData: {
  265. give_integral: 0,
  266. give_coupon: []
  267. },
  268. giveCartInfo: [],
  269. totalNmu: 0,
  270. order: false,
  271. change: false,
  272. order_id: "",
  273. status: "",
  274. title: "标题",
  275. types: "",
  276. statusType: '',
  277. clickNum: 1,
  278. isRefund: 0, //1是仅退款;0是同意退货退款
  279. iconColor: '#FFFFFF',
  280. isScrolling: false,
  281. getHeight: this.$util.getWXStatusHeight(),
  282. confirmShow: false,
  283. info: {},
  284. refundSum: '',
  285. orderNo: '',
  286. orderInfo: {}
  287. };
  288. },
  289. onShow() {
  290. let self = this
  291. // #ifdef H5
  292. this.$nextTick(function() {
  293. var clipboard = new ClipboardJS('.copy-data');
  294. // var copybtn = document.getElementsByClassName("copy-data");
  295. // var clipboard = new Clipboard(copybtn);
  296. clipboard.on('success', function(e) {
  297. self.$util.Tips({
  298. title: '复制成功'
  299. })
  300. });
  301. clipboard.on('error', function(e) {
  302. self.$util.Tips({
  303. title: '复制失败'
  304. })
  305. });
  306. });
  307. // #endif
  308. this.initOrderInfo(this.orderInfo.orderNo)
  309. },
  310. onLoad(options) {
  311. this.orderInfo=JSON.parse(options.orderInfo);
  312. //this.orderNo = options.orderNo
  313. //this.deliveCharge=options.deliveCharge
  314. //this.initOrderInfo(options.orderInfo.orderNo)
  315. },
  316. onPageScroll(e) {
  317. // #ifdef MP || APP-PLUS
  318. if (e.scrollTop > 50) {
  319. this.iconColor = '#333333';
  320. this.isScrolling = true;
  321. } else {
  322. this.iconColor = '#FFFFFF';
  323. this.isScrolling = false;
  324. }
  325. // #endif
  326. },
  327. methods: {
  328. //查看内置地图
  329. goMap(latitude,longitude,merName,address) {
  330. let that = this;
  331. // let latitude=item.status==1 || item.status==0?item.merLatitude:item.userLatitude;
  332. // let longitude=item.status==1 || item.status==0?item.merLongitude:item.userLongitude;
  333. // let merName=item.status==1 || item.status==0?item.merName:item.userName;
  334. // let address=item.status==1 || item.status==0?item.merAddress:item.userAddress;
  335. //#ifdef H5
  336. if (that.$wechat.isWeixin() === true) {
  337. that.$wechat.seeLocation({
  338. latitude: parseFloat(latitude),
  339. longitude: parseFloat(longitude),
  340. name: merName,
  341. address: address,
  342. }).then(res => {
  343. console.log('success');
  344. })
  345. } else {
  346. //#endif
  347. uni.openLocation({
  348. latitude: parseFloat(latitude),
  349. longitude: parseFloat(longitude),
  350. scale: 8,
  351. name: merName,
  352. address: address,
  353. success: function(res) {
  354. that.go_map = true
  355. },
  356. });
  357. // #ifdef H5
  358. }
  359. //#endif
  360. },
  361. //接单
  362. receiving() {
  363. riderOrderReceiving(this.orderInfo).then(res => {
  364. if (res.code == 200) {
  365. setTimeout(() => {
  366. uni.navigateTo({
  367. url: '/pages/rider_index/order/index?type=pickUp&orderType=0'
  368. });
  369. }, 50)
  370. return this.$util.Tips({
  371. title: '接单成功'
  372. })
  373. } else {
  374. self.$util.Tips({
  375. title: res.message
  376. });
  377. }
  378. })
  379. },
  380. //取货
  381. pickUp() {
  382. orderPickUp(this.orderInfo.orderNo).then(res => {
  383. if (res.code == 200) {
  384. setTimeout(() => {
  385. uni.navigateTo({
  386. url: '/pages/rider_index/order/index?type=delivery&orderType=0'
  387. });
  388. }, 50)
  389. return this.$util.Tips({
  390. title: '取件完成,请尽快安排配送'
  391. })
  392. } else {
  393. self.$util.Tips({
  394. title: res.message
  395. });
  396. }
  397. })
  398. },
  399. //收货完成
  400. complete() {
  401. orderComplete(this.orderInfo.orderNo).then(res => {
  402. if (res.code == 200) {
  403. setTimeout(() => {
  404. uni.navigateTo({
  405. url: '/pages/rider_index/order/index?type=complete&orderType=0'
  406. });
  407. }, 50)
  408. return this.$util.Tips({
  409. title: '配送完成'
  410. })
  411. } else {
  412. self.$util.Tips({
  413. title: res.message
  414. });
  415. }
  416. })
  417. },
  418. hsPopupClose() {
  419. this.$refs.hs_popup.close()
  420. },
  421. toRecycle() {
  422. printReceipt(this.info.orderNo).then(res => {
  423. if (res.code == 200) {
  424. this.$util.Tips({
  425. title: '操作成功'
  426. })
  427. this.$refs.hs_popup.close()
  428. }
  429. })
  430. },
  431. hsPopupClose() {
  432. this.$refs.hs_popup.close()
  433. },
  434. print() {
  435. this.$refs.hs_popup.open('center')
  436. },
  437. //更多
  438. toMore() {
  439. this.moreShow = !this.moreShow
  440. },
  441. initOrderInfo(orderNo) {
  442. riderOrderInfo(orderNo).then(res => {
  443. this.info = res.data
  444. let refundSum = 0
  445. let detailList = this.info.orderDetailList
  446. detailList.forEach(item => {
  447. refundSum += item.refundNum
  448. })
  449. this.refundSum = refundSum
  450. })
  451. },
  452. //核销
  453. verify() {
  454. orderGetVerfication({
  455. verifyCode: this.info.verifyCode
  456. }).then(res => {
  457. if (res.code == 200) {
  458. uni.navigateTo({
  459. url: `/pages/admin/cancel/list?info=${JSON.stringify(res.data)}&verifyCode=${this.info.verifyCode}`
  460. })
  461. } else {
  462. this.$util.Tips({
  463. title: res.message
  464. });
  465. }
  466. })
  467. },
  468. //发货
  469. goDelivery(info) {
  470. if (info.refundStatus == 1) return this.$util.Tips({
  471. title: '请处理售后,再操作',
  472. });
  473. uni.navigateTo({
  474. url: `/pages/admin/order/send?orderNo=${this.info.orderNo}`
  475. })
  476. },
  477. //发货记录
  478. goLogistics(info) {
  479. if (info.secondType == 2) {
  480. uni.navigateTo({
  481. url: `/pages/admin/logistics/record?orderNo=${this.orderNo}&index=0&secodeType=2`
  482. })
  483. } else {
  484. orderInvoiceListInfo(info.orderNo).then(res => {
  485. uni.navigateTo({
  486. url: `/pages/admin/logistics/index?orderNo=${info.orderNo}`
  487. })
  488. })
  489. }
  490. },
  491. modify: function(status, type) {
  492. if (status == 2) {
  493. this.isRefund = type
  494. uni.navigateTo({
  495. url: `/pages/admin/refund/index?orderNo=${this.info.orderNo}&type=${this.info.type}`
  496. })
  497. } else {
  498. this.change = true;
  499. this.status = status;
  500. }
  501. },
  502. async savePrice(opt) {
  503. if (!opt.remark) {
  504. return this.$util.Tips({
  505. title: '请输入备注'
  506. })
  507. } else {
  508. this.toMark(this.info.orderNo, opt.remark)
  509. }
  510. },
  511. //备注
  512. toMark(orderNo, remark) {
  513. employeeOrderMark({
  514. orderNo,
  515. remark
  516. }).then(res => {
  517. res.code == 200 && (this.change = false);
  518. this.initOrderInfo(this.info.orderNo)
  519. return this.$util.Tips({
  520. title: '备注成功'
  521. })
  522. })
  523. },
  524. changeclose: function(msg) {
  525. this.change = msg;
  526. },
  527. //复制
  528. // #ifdef MP
  529. copyNum(id) {
  530. uni.setClipboardData({
  531. data: id,
  532. success: function() {}
  533. });
  534. },
  535. // #endif
  536. // #ifdef H5
  537. webCopy(item, index) {
  538. let items = item
  539. let indexs = index
  540. let self = this
  541. if (self.clickNum == 1) {
  542. self.clickNum += 1
  543. self.webCopy(items, indexs)
  544. }
  545. },
  546. //发送货
  547. goDelivery(item) {
  548. if (item.refundStatus == 1) return this.$util.Tips({
  549. title: '请处理售后,再操作',
  550. });
  551. uni.navigateTo({
  552. url: `/pages/admin/order/send?orderNo=${item.orderNo}`
  553. })
  554. },
  555. // 商品操作
  556. modify: function(item, status, type) {
  557. this.change = true;
  558. this.status = status.toString();
  559. this.orderInfo = item;
  560. if (status == 2) {
  561. this.isRefund = type
  562. }
  563. },
  564. // #endif
  565. }
  566. };
  567. </script>
  568. <style lang="scss" scoped>
  569. .headerBg {
  570. position: absolute;
  571. top: 0;
  572. left: 0;
  573. width: 100%;
  574. background-image: linear-gradient(360deg, #F5F5F5 0%, rgba(245, 245, 245, 0) 100%),
  575. linear-gradient(270deg, #01ABF8 0%, #2A7EFB 100%);
  576. background-position: left bottom, left top;
  577. background-repeat: no-repeat;
  578. background-size: 100% 120rpx, 100% 100%;
  579. .inner {
  580. height: 356rpx;
  581. }
  582. }
  583. .order-detail {
  584. position: absolute;
  585. width: 100%;
  586. padding: 0 20rpx;
  587. }
  588. .height-add {
  589. height: calc(120rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  590. height: calc(120rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  591. }
  592. .giveGoods {
  593. .item {
  594. padding: 14rpx 30rpx 14rpx 0;
  595. margin-left: 30rpx;
  596. border-top: 1px solid #eee;
  597. .picTxt {
  598. .pictrue {
  599. width: 76rpx;
  600. height: 76rpx;
  601. border-radius: 6rpx;
  602. background-color: #F5F5F5;
  603. color: #2a7efb;
  604. .iconfont {
  605. font-size: 34rpx;
  606. }
  607. image {
  608. width: 100%;
  609. height: 100%;
  610. border-radius: 6rpx;
  611. }
  612. margin-right: 16rpx;
  613. }
  614. .texts {
  615. width: 360rpx;
  616. color: #999999;
  617. font-size: 20rpx;
  618. .name {
  619. color: #333;
  620. }
  621. .limit {
  622. font-size: 20rpx;
  623. margin-top: 4rpx;
  624. }
  625. }
  626. }
  627. .num {
  628. color: #999999;
  629. font-size: 20rpx;
  630. }
  631. }
  632. }
  633. .splitTitle {
  634. width: 100%;
  635. height: 80rpx;
  636. background-color: #fff;
  637. margin-top: 17rpx;
  638. border-bottom: 1px solid #e5e5e5;
  639. padding: 0 30rpx;
  640. }
  641. .splitTitle .title {
  642. color: #2291f8;
  643. }
  644. /*商户管理订单详情*/
  645. .pos-order-details .header {
  646. // background: linear-gradient(270deg, #1cd1dc 0%, #2291f8 100%);
  647. }
  648. .pos-order-details .header .state {}
  649. .pos-order-details .header .data {}
  650. .pos-order-details .header .data .order-num {
  651. font-size: 26upx;
  652. margin-bottom: 8upx;
  653. }
  654. .pos-order-details .remarks {
  655. width: 710rpx;
  656. height: 100rpx;
  657. background: #FFFFFF;
  658. border-radius: 14rpx;
  659. display: flex;
  660. padding-left: 32rpx;
  661. border-radius: 24rpx;
  662. background: #FFFFFF;
  663. }
  664. .pos-order-details .remarks .iconfont {
  665. font-size: 32rpx;
  666. color: #000000;
  667. }
  668. .pos-order-details .remarks input {
  669. flex: 1;
  670. height: 100rpx;
  671. padding-left: 20rpx;
  672. font-size: 28rpx;
  673. }
  674. .pos-order-details .remarks input::placeholder {
  675. color: #CCCCCC;
  676. }
  677. .pos-order-details .orderingUser {
  678. font-size: 26upx;
  679. color: #282828;
  680. padding: 0 30upx;
  681. height: 67upx;
  682. background-color: #fff;
  683. margin-top: 16upx;
  684. border-bottom: 1px solid #f5f5f5;
  685. }
  686. .pos-order-details .orderingUser .iconfont {
  687. font-size: 40upx;
  688. color: #2a7efb;
  689. margin-right: 15upx;
  690. }
  691. .pos-order-details .address {
  692. margin-top: 0;
  693. }
  694. .pos-order-details .footer .more {
  695. font-size: 27upx;
  696. color: #aaa;
  697. width: 100upx;
  698. height: 64upx;
  699. text-align: center;
  700. line-height: 64upx;
  701. margin-right: 25upx;
  702. position: relative;
  703. }
  704. .pos-order-details .footer .delivery {
  705. border-color: #2A7EFB !important;
  706. background: #2A7EFB;
  707. color: #FFFFFF !important;
  708. }
  709. .pos-order-details .footer .more .order .arrow {
  710. width: 0;
  711. height: 0;
  712. border-left: 11upx solid transparent;
  713. border-right: 11upx solid transparent;
  714. border-top: 20upx solid #e5e5e5;
  715. position: absolute;
  716. left: 15upx;
  717. bottom: -18upx;
  718. }
  719. .pos-order-details .footer .more .order .arrow:before {
  720. content: '';
  721. width: 0;
  722. height: 0;
  723. border-left: 9upx solid transparent;
  724. border-right: 9upx solid transparent;
  725. border-top: 19upx solid #fff;
  726. position: absolute;
  727. left: -10upx;
  728. bottom: 0;
  729. }
  730. .pos-order-details .footer .more .order {
  731. width: 200upx;
  732. background-color: #fff;
  733. border: 1px solid #eee;
  734. border-radius: 10upx;
  735. position: absolute;
  736. top: -200upx;
  737. z-index: 9;
  738. }
  739. .pos-order-details .footer .more .order .item {
  740. height: 77upx;
  741. line-height: 77upx;
  742. }
  743. .pos-order-details .footer .more .order .item~.item {
  744. border-top: 1px solid #f5f5f5;
  745. }
  746. .pos-order-details .footer .more .moreName {
  747. width: 100%;
  748. height: 100%;
  749. }
  750. /*订单详情*/
  751. .order-detail .header {
  752. padding: 48rpx 0 30rpx 12rpx;
  753. }
  754. .order-detail .header.on {
  755. background-color: #666 !important;
  756. }
  757. .order-detail .header .pictrue {
  758. width: 110upx;
  759. height: 110upx;
  760. }
  761. .order-detail .header .pictrue image {
  762. width: 100%;
  763. height: 100%;
  764. }
  765. .order-detail .header .state {
  766. font-weight: 500;
  767. font-size: 36rpx;
  768. line-height: 50rpx;
  769. color: #FFFFFF;
  770. }
  771. .order-detail .header .data {
  772. margin-top: 8rpx;
  773. font-size: 26rpx;
  774. line-height: 36rpx;
  775. color: #FFFFFF;
  776. }
  777. .order-detail .header.on .data {
  778. margin-left: 0;
  779. }
  780. .order-detail .header .data .time {
  781. margin-left: 20rpx;
  782. }
  783. .order-detail .header .data .state {
  784. font-size: 30upx;
  785. font-weight: bold;
  786. color: #fff;
  787. margin-bottom: 7upx;
  788. }
  789. /* .order-details .header .data .time{margin-left:20upx;} */
  790. .order-detail .nav {
  791. background-color: #fff;
  792. font-size: 26upx;
  793. color: #282828;
  794. padding: 25upx 0;
  795. }
  796. .order-detail .nav .navCon {
  797. padding: 0 40upx;
  798. }
  799. .order-detail .nav .navCon .on {
  800. font-weight: bold;
  801. color: #e93323;
  802. }
  803. .order-detail .nav .progress {
  804. padding: 0 65upx;
  805. margin-top: 10upx;
  806. }
  807. .order-detail .nav .progress .line {
  808. width: 100upx;
  809. height: 2upx;
  810. background-color: #939390;
  811. }
  812. .order-detail .nav .progress .iconfont {
  813. font-size: 25upx;
  814. color: #939390;
  815. margin-top: -2upx;
  816. width: 30upx;
  817. height: 30upx;
  818. line-height: 33upx;
  819. text-align: center;
  820. margin-right: 0 !important;
  821. }
  822. .order-detail .address {
  823. position: relative;
  824. padding: 32rpx 32rpx 40rpx;
  825. border-radius: 24rpx;
  826. margin-top: 20rpx;
  827. background: #FFFFFF;
  828. overflow: hidden;
  829. font-size: 24rpx;
  830. line-height: 34rpx;
  831. color: #999999;
  832. }
  833. .order-detail .address .name {
  834. margin-bottom: 12rpx;
  835. font-weight: 500;
  836. font-size: 30rpx;
  837. line-height: 42rpx;
  838. color: #333333;
  839. }
  840. .order-detail .address .name .iconfont {
  841. margin-right: 8rpx;
  842. font-size: 32rpx;
  843. }
  844. .order-detail .address .name .phone {
  845. margin-left: 40upx;
  846. }
  847. .order-detail .line {
  848. position: absolute;
  849. bottom: 0;
  850. left: 0;
  851. width: 100%;
  852. height: 4rpx;
  853. }
  854. .order-detail .line image {
  855. width: 100%;
  856. height: 100%;
  857. display: block;
  858. }
  859. .order-detail .wrapper {
  860. padding: 32rpx 24rpx;
  861. border-radius: 24rpx;
  862. margin-top: 20rpx;
  863. background: #FFFFFF;
  864. }
  865. .order-detail .wrapper .item {
  866. font-size: 28rpx;
  867. line-height: 40rpx;
  868. color: #333333;
  869. }
  870. .order-detail .wrapper .item~.item {
  871. margin-top: 24rpx;
  872. }
  873. .order-detail .wrapper .item .conter {
  874. // color: #868686;
  875. // width: 468rpx;
  876. // display: flex;
  877. // flex-wrap: nowrap;
  878. // justify-content: flex-end;
  879. // text-align: right;
  880. .pictrue {
  881. width: 80rpx;
  882. height: 80rpx;
  883. margin-left: 6rpx;
  884. image {
  885. width: 100%;
  886. height: 100%;
  887. border-radius: 6rpx;
  888. }
  889. }
  890. }
  891. .order-detail .wrapper .item .conter .copy {
  892. height: 36rpx;
  893. padding: 0 12rpx;
  894. border: 0;
  895. border-radius: 18rpx;
  896. margin-left: 8rpx;
  897. background: #F5F5F5;
  898. font-size: 22rpx;
  899. line-height: 36rpx;
  900. color: #333333;
  901. }
  902. .order-detail .wrapper .actualPay {
  903. margin-top: 26rpx;
  904. align-items: center;
  905. }
  906. .order-detail .wrapper .actualPay .money {
  907. font-weight: bold;
  908. font-size: 30upx;
  909. color: #e93323;
  910. }
  911. .order-detail .footer {
  912. width: 100%;
  913. height: 100upx;
  914. position: fixed;
  915. bottom: 0;
  916. left: 0;
  917. background-color: #fff;
  918. padding: 0 30upx;
  919. border-top: 1px solid #eee;
  920. height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  921. height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  922. padding-bottom: calc(0rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  923. padding-bottom: calc(0rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  924. }
  925. .order-detail .footer .wait {
  926. color: #2a7efb;
  927. margin-right: 30rpx;
  928. }
  929. .order-detail .footer .bnt {
  930. width: 144rpx;
  931. height: 56rpx;
  932. border: 1rpx solid #CCCCCC;
  933. line-height: 54rpx;
  934. text-align: center;
  935. border-radius: 28rpx;
  936. font-size: 24rpx;
  937. color: #333333;
  938. transform: rotateZ(360deg);
  939. &.on {
  940. color: #c5c8ce !important;
  941. background: #f7f7f7 !important;
  942. border: 1px solid #dcdee2 !important;
  943. }
  944. }
  945. .order-detail .footer .bnt.cancel {
  946. // color: #333333;
  947. // border: 1px solid #CCCCCC;
  948. }
  949. .order-detail .footer .bnt.default {
  950. color: #444;
  951. border: 1px solid #444;
  952. }
  953. .order-detail .footer .bnt~.bnt {
  954. margin-left: 16rpx;
  955. }
  956. .pos-order-goods {
  957. padding: 32rpx 24rpx;
  958. border-radius: 24rpx;
  959. background: #FFFFFF;
  960. }
  961. .pos-order-goods.split {
  962. margin-top: 20rpx;
  963. }
  964. .pos-order-goods .title {
  965. height: 40rpx;
  966. margin-bottom: 32rpx;
  967. font-size: 28rpx;
  968. color: #333333;
  969. }
  970. .pos-order-goods .title .btn {
  971. font-size: 26rpx;
  972. color: #999999;
  973. }
  974. .pos-order-goods .title .btn .iconfont {
  975. font-size: 24rpx;
  976. }
  977. .pos-order-goods.split .goods {}
  978. .pos-order-goods .goods~.goods {
  979. margin-top: 32rpx;
  980. }
  981. .pos-order-goods .goods .picTxt {
  982. flex: 1;
  983. min-width: 0;
  984. }
  985. .pos-order-goods .goods .picTxt .pictrue {
  986. width: 136rpx;
  987. height: 136rpx;
  988. }
  989. .pos-order-goods .goods .picTxt .pictrue image {
  990. width: 100%;
  991. height: 100%;
  992. border-radius: 16rpx;
  993. }
  994. .pos-order-goods .goods .picTxt .text {
  995. flex: 1;
  996. min-width: 0;
  997. padding-left: 20rpx;
  998. }
  999. .pos-order-goods .goods .picTxt .text .info {
  1000. font-size: 28rpx;
  1001. line-height: 40rpx;
  1002. color: #333333;
  1003. }
  1004. .pos-order-goods .goods .picTxt .text .info .label {
  1005. color: #ff4c3c;
  1006. }
  1007. .pos-order-goods .goods .picTxt .text .attr {
  1008. margin-top: 8rpx;
  1009. font-size: 24rpx;
  1010. line-height: 34rpx;
  1011. color: #999999;
  1012. }
  1013. .pos-order-goods .goods .money {
  1014. width: 144rpx;
  1015. text-align: right;
  1016. }
  1017. .pos-order-goods .goods .money .writeOff {
  1018. font-size: 24upx;
  1019. margin-top: 17upx;
  1020. color: #1890FF;
  1021. }
  1022. .pos-order-goods .goods .money .writeOff .on {
  1023. color: #FF7E00;
  1024. }
  1025. .pos-order-goods .goods .money .x-money {
  1026. color: #282828;
  1027. }
  1028. .pos-order-goods .goods .money .num {
  1029. margin-top: 10rpx;
  1030. font-size: 24rpx;
  1031. line-height: 34rpx;
  1032. color: #999999;
  1033. }
  1034. .pos-order-goods .goods .money .y-money {
  1035. color: #999;
  1036. text-decoration: line-through;
  1037. }
  1038. .public-total {
  1039. font-size: 28upx;
  1040. color: #282828;
  1041. border-top: 1px solid #eee;
  1042. height: 92upx;
  1043. line-height: 92upx;
  1044. text-align: right;
  1045. padding: 0 30upx;
  1046. background-color: #fff;
  1047. }
  1048. .public-total .money {
  1049. color: #ff4c3c;
  1050. }
  1051. .copy-data {
  1052. font-size: 10px;
  1053. color: #333;
  1054. -webkit-border-radius: 1px;
  1055. border-radius: 1px;
  1056. border: 1px solid #666;
  1057. padding: 0px 7px;
  1058. margin-left: 12px;
  1059. height: 20px;
  1060. }
  1061. .pos-order-goods .mark {
  1062. margin-top: 32rpx;
  1063. font-size: 28rpx;
  1064. line-height: 40rpx;
  1065. color: #333333;
  1066. .value {
  1067. flex: 1;
  1068. }
  1069. }
  1070. .mask {
  1071. z-index: 21;
  1072. }
  1073. .confirm-popup {
  1074. position: fixed;
  1075. top: 50%;
  1076. right: 75rpx;
  1077. left: 75rpx;
  1078. z-index: 21;
  1079. transform: translateY(-50%);
  1080. border-radius: 32rpx;
  1081. background: #FFFFFF;
  1082. text-align: center;
  1083. .title {
  1084. padding: 40rpx 32rpx 0;
  1085. font-weight: 500;
  1086. font-size: 32rpx;
  1087. line-height: 52rpx;
  1088. color: #333333;
  1089. }
  1090. .info {
  1091. padding: 24rpx 40rpx 0;
  1092. font-size: 30rpx;
  1093. line-height: 42rpx;
  1094. color: #666666;
  1095. }
  1096. .btn-box {
  1097. padding: 40rpx;
  1098. }
  1099. .btn {
  1100. flex: 1;
  1101. height: 72rpx;
  1102. border: 1rpx solid #2A7EFB;
  1103. border-radius: 36rpx;
  1104. margin-left: 32rpx;
  1105. font-weight: 500;
  1106. font-size: 26rpx;
  1107. line-height: 70rpx;
  1108. color: #2A7EFB;
  1109. transform: rotateZ(360deg);
  1110. &.primary {
  1111. background: #2A7EFB;
  1112. color: #FFFFFF;
  1113. }
  1114. }
  1115. }
  1116. .user-box {
  1117. padding: 24rpx;
  1118. border-radius: 24rpx;
  1119. margin-top: 20rpx;
  1120. background: #FFFFFF;
  1121. .image {
  1122. width: 80rpx;
  1123. height: 80rpx;
  1124. border-radius: 50%;
  1125. }
  1126. .text {
  1127. flex: 1;
  1128. padding-left: 20rpx;
  1129. font-size: 24rpx;
  1130. line-height: 34rpx;
  1131. color: #999999;
  1132. }
  1133. .name {
  1134. margin-bottom: 4rpx;
  1135. font-weight: 500;
  1136. font-size: 28rpx;
  1137. line-height: 40rpx;
  1138. color: #333333;
  1139. }
  1140. .svip {
  1141. width: 56rpx;
  1142. height: 26rpx;
  1143. border-radius: 14rpx;
  1144. margin-left: 12rpx;
  1145. background: linear-gradient(90deg, #484643 0%, #1F1B17 100%);
  1146. text-align: center;
  1147. font-weight: 600;
  1148. font-size: 18rpx;
  1149. line-height: 26rpx;
  1150. color: #FDDAA4;
  1151. }
  1152. .grade {
  1153. height: 26rpx;
  1154. padding: 0 10rpx;
  1155. border: 1rpx solid #FACC7D;
  1156. border-radius: 14rpx;
  1157. margin-left: 10rpx;
  1158. background: #FEF0D9;
  1159. font-weight: 500;
  1160. font-size: 18rpx;
  1161. line-height: 24rpx;
  1162. color: #DFA541;
  1163. transform: rotateZ(360deg);
  1164. .iconfont {
  1165. margin-right: 6rpx;
  1166. font-size: 18rpx;
  1167. }
  1168. }
  1169. }
  1170. .tomore {
  1171. font-weight: 400;
  1172. font-size: 24rpx;
  1173. color: #333333;
  1174. margin-right: 20rpx;
  1175. position: relative;
  1176. }
  1177. .more-operate {
  1178. position: absolute;
  1179. top: -120rpx;
  1180. left: -50rpx;
  1181. width: 150rpx;
  1182. height: 100rpx;
  1183. background: #fff;
  1184. border: 1px solid #eee;
  1185. border-radius: 10rpx;
  1186. .sjx {
  1187. width: 16rpx;
  1188. height: 16rpx;
  1189. background: #fff;
  1190. border: 1px solid #eee;
  1191. position: absolute;
  1192. top: 92rpx;
  1193. left: 68rpx;
  1194. transform: rotateZ(45deg);
  1195. }
  1196. .more-operate-item {
  1197. font-size: 24rpx;
  1198. color: #333333;
  1199. text-align: center;
  1200. height: 50rpx;
  1201. line-height: 50rpx;
  1202. }
  1203. }
  1204. /deep/ .uni-popup__wrapper {
  1205. width: 600rpx;
  1206. height: 310rpx;
  1207. background: #FFFFFF;
  1208. border-radius: 14rpx;
  1209. }
  1210. .sh_popup-content {
  1211. // border-radius: 14rpx;
  1212. // padding-bottom: 20rpx;
  1213. .sh_popup_title {
  1214. font-weight: 500;
  1215. font-size: 32rpx;
  1216. color: #333333;
  1217. text-align: center;
  1218. margin-top: 40rpx;
  1219. }
  1220. .sh_popup_text {
  1221. font-weight: 400;
  1222. font-size: 30rpx;
  1223. color: #666666;
  1224. text-align: center;
  1225. margin-top: 30rpx;
  1226. }
  1227. .sh_popup_btn {
  1228. display: flex;
  1229. justify-content: space-between;
  1230. margin-top: 40rpx;
  1231. padding: 0 47rpx;
  1232. .btn {
  1233. width: 244rpx;
  1234. height: 72rpx;
  1235. border-radius: 50rpx;
  1236. text-align: center;
  1237. line-height: 72rpx;
  1238. }
  1239. .no_btn {
  1240. border: 1px solid #2A7EFB;
  1241. color: #2A7EFB;
  1242. }
  1243. .yes_btn {
  1244. background: #2A7EFB;
  1245. color: #FFFFFF;
  1246. }
  1247. }
  1248. }
  1249. .info-text {
  1250. display: flex;
  1251. flex-direction: column;
  1252. justify-content: space-between;
  1253. }
  1254. .line1 {
  1255. width: 90%;
  1256. }
  1257. .order-details .wrapper {
  1258. padding: 0;
  1259. }
  1260. .map {
  1261. text-align: center;
  1262. padding-right: 1rpx;
  1263. position: relative;
  1264. @include main_color(theme);
  1265. // &::before {
  1266. // content: '';
  1267. // display: inline-block;
  1268. // width: 2rpx;
  1269. // height: 42rpx;
  1270. // background-color: #DDDDDD;
  1271. // position: absolute;
  1272. // left: 0;
  1273. // top: 18rpx;
  1274. // }
  1275. .iconfont {
  1276. color: var(--view-theme);
  1277. }
  1278. .map_text {
  1279. color: var(--view-theme);
  1280. }
  1281. }
  1282. </style>