orderDetail.vue 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269
  1. <template>
  2. <view class="container">
  3. <block v-if="orderInfo">
  4. <view class="head-block">
  5. <!-- <view class="">
  6. {{orderInfo.state==3?'取单号:'+orderInfo.id:''}}
  7. </view> -->
  8. <view v-if="orderInfo.is_pay == 1 && orderInfo.state!=2" class="">
  9. <view class="pick_up flex-center" :style="{'background':setColor}">
  10. <view style="display: inline-block;">
  11. <view class="title ft24">取单号</view>
  12. <view class="desc ft40">{{ orderInfo.number||orderInfo.id }}</view>
  13. </view>
  14. </view>
  15. </view>
  16. <view class="order-status-block flex flex-nowarp flex-x-center flex-y-center">
  17. <!-- <i class="iconfont icon-lujing order-status-icon" :style="{color:setColor}"></i> -->
  18. <view>
  19. <view class="status-name" :style="{color:setColor}">
  20. <view v-if="orderInfo.is_send!=1">
  21. {{
  22. orderInfo.order_status== 0?'待支付':orderInfo.order_status== 1?'待配送':
  23. orderInfo.order_status== 2?'配送中':orderInfo.order_status== 3?'已完成':
  24. orderInfo.order_status== 4?'已取消':
  25. orderInfo.order_status== 5?'已退款':
  26. orderInfo.order_status== 6?'部分退款':
  27. orderInfo.order_status== 7?'待自提':''
  28. }}
  29. </view>
  30. <block
  31. v-if="orderInfo.is_pay == 1&&orderInfo.state==2&&orderInfo.cancel_status!=2&&orderInfo.is_dd==1&&orderInfo.is_send==1">
  32. {{
  33. dadaInfo.statusCode==1?'待接单':
  34. dadaInfo.statusCode==2?'骑士前往商家取货':
  35. dadaInfo.statusCode==3?'配送中':
  36. dadaInfo.statusCode==4?'已完成':
  37. dadaInfo.statusCode==5?'已取消':
  38. dadaInfo.statusCode==8?'指派单':
  39. dadaInfo.statusCode==9?'妥投异常之物品返回中':
  40. dadaInfo.statusCode==10?'妥投异常之物品返回完成':
  41. dadaInfo.statusCode==100?'骑士到店':
  42. dadaInfo.statusCode==1000?'创建达达运单失败':''
  43. }}
  44. </block>
  45. <view @click="bindOpen"
  46. v-if="orderInfo.is_pay == 1&&orderInfo.state==2&&orderInfo.cancel_status!=2&&orderInfo.is_dd==2&&orderInfo.is_send==1">
  47. {{
  48. juheInfo.status_desc
  49. }}
  50. <text class="iconfont icon-jiantou" style="margin-left: 15rpx;"></text>
  51. </view>
  52. </view>
  53. <view class="status-tips">感谢您的购买</view>
  54. </view>
  55. </view>
  56. <!-- 餐后付款使用优惠劵 -->
  57. <navigator v-if="coupon_list.length>0 && orderInfo.is_pay == 0 && orderInfo.type==2&&
  58. orderInfo.order_status!=4 && orderInfo.cancel_status!=2" hover-class="none"
  59. :url="`../use-coupon-list/use-coupon-list?total_price=${orderInfo.pay_price}&check_index=2`" class="Coupon">
  60. <view class="flex-center">
  61. <view class="Coupon-icon iconfont icon-youhuijuan-01"></view>
  62. <view class="flex-y-center" v-if="coupon_id">
  63. <text style="color: red;">优惠劵-¥{{coupon_price}}</text>
  64. <text class="iconfont icon-jiantou"></text>
  65. </view>
  66. <view class="flex-y-center" v-else>
  67. <text style="color: red;">您有未使用优惠劵{{coupon_list.length}}张</text>
  68. <text class="iconfont icon-jiantou"></text>
  69. </view>
  70. </view>
  71. <view class="flex-center" v-if="coupon_id" style="margin-top: 10rpx;">
  72. 支付金额:<text
  73. style="font-size: 35rpx;color: red;">¥{{ (orderInfo.pay_price - Number(coupon_price)).toFixed(2)}}</text>
  74. </view>
  75. </navigator>
  76. <view class="btn-block flex flex-nowarp flex-y-center">
  77. <navigator url="/pages/index/index" open-type="reLaunch" class="btn btn1"
  78. v-if="orderInfo.is_pay == 1 || orderInfo.order_status== 4 || orderInfo.cancel_status==2"
  79. :style="{'background-color':setColor}">继续下单</navigator>
  80. <view class="btn btn3" @click="onPrinterStatusChange" :style="{'background-color':setColor}" v-else>
  81. 立即支付</view>
  82. <view @click="tel" class="btn btn2" :style="{'background-color':setColor}">
  83. 联系商家
  84. </view>
  85. </view>
  86. </view>
  87. <view class="main">
  88. <view class="page-block">
  89. <view class="page-title box-pack-between flex-y-center" @click="getNavigation"
  90. style="height: auto;line-height: 1;padding: 30rpx 0;">
  91. <view class="">
  92. <view> {{orderInfo.storename}}
  93. <!-- ({{orderInfo.type == 3 ?'自助结账':orderInfo.tablename}}) -->
  94. <block v-if="orderInfo.type == 3">
  95. ({{orderInfo.type == 3?'自助结账':orderInfo.tablename||''}})
  96. </block>
  97. <block v-if="orderInfo.type != 3 && orderInfo.state!=2 && orderInfo.tablename">
  98. ({{orderInfo.tablename}})
  99. </block>
  100. </view>
  101. <view style="padding-top: 15rpx;font-size: 26rpx;color: #999;">
  102. {{orderInfo.store.address}}
  103. </view>
  104. </view>
  105. <text class="iconfont icon-dizhi" :style="{'color':setColor}"></text>
  106. </view>
  107. <view class="goods-list" v-if="orderInfo.type!= 3">
  108. <block v-for="(goods,idx) in orderInfo.new_goods" :key="idx">
  109. <view class="flex-y-center carInfoHeader" @click="chooseBag(goods.pocket)">
  110. <view class="radio__inner"
  111. :style="'border: 6rpx solid' + setColor">
  112. <view :style="'background:#fff'"
  113. class="radio__inner-icon radio__inner-icon is-default-checked">
  114. </view>
  115. </view>
  116. 购物口袋{{goods.pocket}}
  117. <block v-if="Number(orderInfo.box_fee)>0">
  118. (包装费 <text style="color: red;">¥{{goods.packing_fee}}</text>)
  119. </block>
  120. </view>
  121. <view class="item flex flex-nowarp" v-for="(item,index) in goods.list" :key="index">
  122. <image :src="getImgSrc(item.spec_image)" mode="aspectFill" class="img"></image>
  123. <view class="info flex flex-column">
  124. <view class="title">{{item.name}}</view>
  125. <view class="unit" v-if="item.spec">{{item.spec}}</view>
  126. <view class="unit">{{item.unit_price}}</view>
  127. <view>
  128. <view class="rebate-info" v-if="item.user_rebate == 1">会员折扣
  129. </view>
  130. </view>
  131. <view class="num">× {{item.num}}</view>
  132. </view>
  133. <view class="price">
  134. <view class="">¥{{item.total_price}}</view>
  135. <view class="Count">
  136. {{item.is_refund==1?'已退款':''}}
  137. </view>
  138. </view>
  139. </view>
  140. </block>
  141. </view>
  142. <view class="box-pack-between ft26 orderInfo-item">
  143. <text>小计:</text>
  144. <text>¥{{orderInfo.total_price}}</text>
  145. </view>
  146. <!-- 就餐人数和费用 -->
  147. <view class="box-pack-between ft26 orderInfo-item"
  148. v-if="Number(orderInfo.eat_people)>0 && orderInfo.state == 1">
  149. <text>就餐人数</text>
  150. <text>{{orderInfo.eat_people}}人</text>
  151. </view>
  152. <view class="box-pack-between ft26 orderInfo-item"
  153. v-if="Number(choosePrise)>0 && orderInfo.state == 1">
  154. <text>就餐人数费用</text>
  155. <text>+¥{{choosePrise}}</text>
  156. </view>
  157. <view class="box-pack-between ft26 orderInfo-item" v-if="discount>0&Number(orderInfo.discount>0)">
  158. <text>会员折扣</text>
  159. <text>-¥{{discount}}</text>
  160. </view>
  161. <view class="box-pack-between ft26 orderInfo-item" v-if="Number(coupon_price)>0">
  162. <text>优惠劵</text>
  163. <text>-¥{{coupon_price}}</text>
  164. </view>
  165. <view class="box-pack-between ft26 orderInfo-item" v-if="Number(orderInfo.coupon_price)>0">
  166. <text>优惠劵</text>
  167. <text>-¥{{ orderInfo.coupon_price}}</text>
  168. </view>
  169. <view class="box-pack-between ft26 orderInfo-item" v-if="Number(orderInfo.box_fee)>0">
  170. <text>包装费</text>
  171. <text>+¥{{ orderInfo.box_fee}}</text>
  172. </view>
  173. <view class="box-pack-between ft26 orderInfo-item" v-if="Number(orderInfo.refund_price)>0">
  174. <text>退款金额</text>
  175. <text>-¥{{orderInfo.refund_price}}</text>
  176. </view>
  177. <view class="box-pack-between ft26 orderInfo-item" v-if="Number(orderInfo.delivery_price)>0">
  178. <text>配送费</text>
  179. <text>+¥{{orderInfo.delivery_price}}</text>
  180. </view>
  181. <view class="total-block">
  182. <block v-if="orderInfo.type != 3">共 {{orderInfo.count}} 件商品,</block>
  183. 实付:¥{{orderInfo.pay_price- Number(coupon_price)-Number(orderInfo.refund_price)}}
  184. </view>
  185. </view>
  186. <view class="page-block" style="margin-bottom: 0;">
  187. <!-- 如果 is_send=1并且is_dd=1 就是达达配送 请求达达接口
  188. 如果 is_send=1并且is_dd=2 就是商家配送 不需要请求达达接口
  189. 如果 is_send=0 就是还没配送 -->
  190. <view class="page-title box-pack-between">
  191. <text>订单信息</text>
  192. <block v-if="orderInfo.cancel_status!=2">
  193. <block v-if="orderInfo.is_pay ==1&&orderInfo.state==2&&orderInfo.is_send==0">
  194. <view class="flex-y-center red">
  195. <!-- 待配送 -->
  196. {{
  197. orderInfo.cancel_status==2 ?'订单已退款':orderInfo.order_status== 0?'待支付':orderInfo.order_status== 1?'待配送':
  198. orderInfo.order_status== 2?'配送中':orderInfo.order_status== 3?'已完成':
  199. orderInfo.order_status== 4?'已取消':
  200. orderInfo.order_status== 5?'已退款':
  201. orderInfo.order_status== 6?'部分退款':
  202. orderInfo.order_status== 7?'待自提':
  203. ''
  204. }}
  205. </view>
  206. </block>
  207. <!-- statusCode Integer 订单状态(待接单=1,待取货=2,配送中=3,已完成=4,已取消=5,
  208. 指派单=8,妥投异常之物品返回中=9, 妥投异常之物品返回完成=10, 骑士到店=100,创建达达运单失败=1000
  209. 可参考文末的状态说明) -->
  210. <block v-else>
  211. <block v-if="orderInfo.is_send==1&&orderInfo.is_dd==1">
  212. <navigator hover-class="none"
  213. :url="`../../menber/map?order_id=${orderInfo.id}&latitude=${latitude}&longitude=${longitude}&type=1`"
  214. class="flex-grow-1 flex-y-center red box-pack-between">
  215. <view></view>
  216. <view class="flex-y-center">
  217. <text>
  218. {{
  219. dadaInfo.statusCode==0?'正在派送订单':
  220. dadaInfo.statusCode==1?'待接单':
  221. dadaInfo.statusCode==2?'骑士前往商家取货':
  222. dadaInfo.statusCode==3?'正在配送':
  223. dadaInfo.statusCode==4?'已完成':
  224. dadaInfo.statusCode==5?'已取消':
  225. dadaInfo.statusCode==8?'指派单':
  226. dadaInfo.statusCode==9?'妥投异常之物品返回中':
  227. dadaInfo.statusCode==10?'妥投异常之物品返回完成':
  228. dadaInfo.statusCode==100?'骑士到店':
  229. dadaInfo.statusCode==1000?'创建达达运单失败':''
  230. }}
  231. </text>
  232. <view class="arr-r"></view>
  233. </view>
  234. </navigator>
  235. </block>
  236. <block v-if="orderInfo.is_send==1&&orderInfo.is_dd==2">
  237. <navigator hover-class="none"
  238. :url="`../../menber/map?order_id=${orderInfo.id}&latitude=${latitude}&longitude=${longitude}&type=2`"
  239. class="flex-grow-1 flex-y-center red box-pack-between">
  240. <view></view>
  241. <view class="flex-y-center">
  242. <text>
  243. 点击查看({{
  244. juheInfo.status_desc
  245. }})
  246. </text>
  247. <view class="iconfont icon-jiantou" style="color: #000000;"></view>
  248. </view>
  249. </navigator>
  250. </block>
  251. </block>
  252. </block>
  253. </view>
  254. <view class="order-info-list">
  255. <view v-if="orderInfo.logistic" class="item flex flex-nowarp flex-x-between flex-y-center">
  256. <view class="title">平台</view>
  257. <view class="desc">{{orderInfo.logistic}}</view>
  258. </view>
  259. <block v-if="dadaInfo.transporterPhone">
  260. <view @click="getTel(dadaInfo.transporterPhone)"
  261. v-if="orderInfo.is_send==1&&orderInfo.is_dd==1&&dadaInfo.statusCode==2||dadaInfo.statusCode==3||dadaInfo.statusCode==4||dadaInfo.statusCode==5"
  262. class="item flex flex-nowarp flex-x-between flex-y-center">
  263. <view class="title">骑手</view>
  264. <view class="desc">{{dadaInfo.transporterName}}({{dadaInfo.transporterPhone}}) <text
  265. class="desc iconfont icon-dianhua"></text></view>
  266. </view>
  267. </block>
  268. <block v-if="juheInfo.rider_phone">
  269. <view @click="getTel(juheInfo.rider_phone)"
  270. v-if="orderInfo.is_send==1&&orderInfo.is_dd==2&&juheInfo.status!=10||juheInfo.status!=60"
  271. class="item flex flex-nowarp flex-x-between flex-y-center">
  272. <view class="title">骑手</view>
  273. <view class="desc">{{juheInfo.rider_name}}({{juheInfo.rider_phone}}) <text
  274. class="desc iconfont icon-dianhua"></text></view>
  275. </view>
  276. </block>
  277. <view v-if="orderInfo.is_pay == 1 && orderInfo.state!=2"
  278. class="item flex flex-nowarp flex-x-between flex-y-center">
  279. <view class="title">取单号</view>
  280. <view class="desc">{{orderInfo.number || orderInfo.id}}</view>
  281. </view>
  282. <block v-if="orderInfo.state==3">
  283. <view v-if="orderInfo.name" class="item flex flex-nowarp flex-x-between flex-y-center">
  284. <view class="title">自提人</view>
  285. <view class="desc">{{orderInfo.name}}</view>
  286. </view>
  287. <view v-if="orderInfo.mobile" class="item flex flex-nowarp flex-x-between flex-y-center">
  288. <view class="title">自提电话</view>
  289. <view class="desc">{{orderInfo.mobile}}</view>
  290. </view>
  291. </block>
  292. <block v-if="orderInfo.state==2">
  293. <view class="item flex flex-nowarp flex-x-between flex-y-center">
  294. <view class="title">联系人</view>
  295. <view class="desc">{{orderInfo.name}}</view>
  296. </view>
  297. <view class="item flex flex-nowarp flex-x-between flex-y-center">
  298. <view class="title">联系方式</view>
  299. <view class="desc">{{orderInfo.mobile}}</view>
  300. </view>
  301. <view class="item flex flex-nowarp flex-x-between flex-y-center">
  302. <view class="title">地址</view>
  303. <view class="desc">{{orderInfo.address}}</view>
  304. </view>
  305. </block>
  306. <view class="item flex flex-nowarp flex-x-between flex-y-center">
  307. <view class="title">订单号</view>
  308. <view class="desc">{{orderInfo.order_no}}</view>
  309. </view>
  310. <view class="item flex flex-nowarp flex-x-between flex-y-center">
  311. <view class="title">下单时间</view>
  312. <view class="desc">{{orderInfo.create_time}}</view>
  313. </view>
  314. <view class="item flex flex-nowarp flex-x-between flex-y-center">
  315. <view class="title">支付时间</view>
  316. <view class="desc">{{orderInfo.pay_time}}</view>
  317. </view>
  318. <view class="item flex flex-nowarp flex-x-between flex-y-center"
  319. v-if="Number(orderInfo.coupon_price)>0">
  320. <view class="title">优惠劵</view>
  321. <view class="desc">-{{orderInfo.coupon_price}}</view>
  322. </view>
  323. <view v-if="Number(orderInfo.discount)>0"
  324. class="item flex flex-nowarp flex-x-between flex-y-center">
  325. <view class="title">会员折扣</view>
  326. <view class="desc">{{orderInfo.discount}}折</view>
  327. </view>
  328. <view class="item flex flex-nowarp flex-x-between flex-y-center">
  329. <view class="title">支付方式</view>
  330. <!-- #ifdef MP-WEIXIN -->
  331. <view class="desc">{{orderInfo.pay_type==3?'余额支付':orderInfo.pay_type==4?'现金支付':orderInfo.pay_type==5?'充值免单':'微信支付'}}
  332. </view>
  333. <!-- #endif -->
  334. <!-- #ifdef MP-ALIPAY -->
  335. <view class="desc">{{orderInfo.pay_type==3?'余额支付':orderInfo.pay_type==4?'现金支付':orderInfo.pay_type==5?'充值免单':'支付宝支付'}}
  336. </view>
  337. <!-- #endif -->
  338. </view>
  339. <view class="item flex flex-nowarp flex-x-between flex-y-center">
  340. <view class="title">订单方式</view>
  341. <view class="desc">{{orderInfo.state==2?'配送订单':orderInfo.state==1?descOrder.food1:descOrder.food1}}</view>
  342. </view>
  343. <view class="item flex flex-nowarp flex-x-between flex-y-center" v-if="orderInfo.remark">
  344. <view class="title">备注</view>
  345. <view class="desc">{{orderInfo.remark || '无'}}</view>
  346. </view>
  347. </view>
  348. </view>
  349. </view>
  350. <view class="main" style="padding-top: 0;" @click="tel">
  351. <view class="page-block">
  352. <view class="order-info-list">
  353. <view class="item box-pack-between">
  354. <view class="title">联系商家</view>
  355. <view class="flex-y-center">
  356. <text class="iconfont icon-dianhua ft34"></text>
  357. <text class="desc iconfont icon-jiantou"></text>
  358. </view>
  359. </view>
  360. </view>
  361. </view>
  362. </view>
  363. </block>
  364. <!-- 纵向排列 -->
  365. <uni-popup ref="popup" type="bottom">
  366. <view class="model-content">
  367. <view class="flex-y-center model-content-title box-pack-between">
  368. <text style="width: 50rpx;"></text>
  369. 订单跟踪
  370. <text @click="onClose" class="iconfont icon-guanbi"></text>
  371. </view>
  372. <scroll-view scroll-y="true" style="height: 700rpx;">
  373. <uni-steps :options="options" :active-color="setColor" direction="column"
  374. :active="Number(options.length)"></uni-steps>
  375. </scroll-view>
  376. </view>
  377. </uni-popup>
  378. <view class="is_popup flex-center" v-if="is_popup">
  379. <view class="get-phone-pop">
  380. <view class="content-block">
  381. <view class="content flex flex-y-center flex-x-center">提示</view>
  382. </view>
  383. <view class="flex-center content-tel">
  384. <text style="min-width: 130rpx;">订单处理成功</text>
  385. </view>
  386. <navigator open-type="redirect" url="../paySuccess/paySuccess"
  387. class="btm-block flex flex-nowarp flex-x-between">
  388. <view form-type="submit" class="btn sub-btn">确定</view>
  389. </navigator>
  390. </view>
  391. </view>
  392. <!-- #ifdef MP-ALIPAY -->
  393. <!-- <subscribe-msg /> -->
  394. <!-- #endif -->
  395. </view>
  396. </template>
  397. <script>
  398. import {
  399. mapState
  400. } from 'vuex'
  401. // #ifdef MP-ALIPAY
  402. // const {
  403. // requestSubscribeMessage
  404. // } = requirePlugin('subscribeMsg');
  405. // #endif
  406. export default {
  407. data() {
  408. return {
  409. userInfo: {},
  410. order_id: "",
  411. orderInfo: "",
  412. dadaInfo: {},
  413. menber_discount: {},
  414. systemInfo: {},
  415. latitude: "",
  416. longitude: "",
  417. setColor: "",
  418. juheInfo: {},
  419. options: [],
  420. discount: 0,
  421. coupon_list: [],
  422. store_id: '',
  423. coupon_price: 0,
  424. coupon_id: '',
  425. activity:0,
  426. is_popup: false,
  427. choosePrise: 0, //选择的人数对应的价格
  428. }
  429. },
  430. computed: {
  431. ...mapState(['descOrder'])
  432. },
  433. onLoad(options) {
  434. this.userInfo = uni.getStorageSync('userInfo');
  435. this.systemInfo = uni.getStorageSync('systemInfo');
  436. this.store_id = uni.getStorageSync('store_id')
  437. this.order_id = options.order_id;
  438. this.getOrderInfo();
  439. uni.setNavigationBarColor({
  440. frontColor: '#ffffff',
  441. backgroundColor: this.$store.state.color,
  442. })
  443. this.setColor = this.$store.state.color;
  444. this.paycoupons();
  445. },
  446. methods: {
  447. //获取单个人数的价格
  448. peoplePrise(num) {
  449. // console.log(num, '我是计算的价格')
  450. this.$http.request('xcx/siteConfigFind', {
  451. store_id: this.store_id,
  452. }).then(res => {
  453. if (res.code == "200") {
  454. let eat_cover = res.data.eat_cover || 0;
  455. let priseA = num * (res.data.eat_cover);
  456. this.choosePrise = (Math.round(priseA * 100) / 100).toFixed(2);
  457. }
  458. }).catch((res) => {
  459. uni.showToast({
  460. title: res.message,
  461. icon: 'none'
  462. })
  463. });
  464. },
  465. // 打开地图
  466. getNavigation() {
  467. let {
  468. lat,
  469. lng
  470. } = this.orderInfo.store;
  471. uni.openLocation({
  472. latitude: Number(lat),
  473. longitude: Number(lng),
  474. name: this.orderInfo.store.title,
  475. address: this.orderInfo.store.address,
  476. success: function() {
  477. console.log('success');
  478. }
  479. });
  480. },
  481. paycoupons() {
  482. this.$http.request('xcx/paycoupons', {
  483. user_id: this.userInfo.id,
  484. store_id: this.store_id,
  485. is_use:this.orderInfo.state,
  486. }, "", "", true).then(res => {
  487. console.log(res)
  488. this.coupon_list = res.data;
  489. }).catch(err => {
  490. console.log(err)
  491. })
  492. },
  493. bindOpen() {
  494. this.$refs.popup.open();
  495. },
  496. tel(e) {
  497. uni.makePhoneCall({
  498. phoneNumber: this.systemInfo.tel //仅为示例
  499. });
  500. },
  501. getTel(tel) {
  502. uni.makePhoneCall({
  503. phoneNumber: tel //仅为示例
  504. });
  505. },
  506. onClose() {
  507. this.$refs.popup.close();
  508. },
  509. onPrinterStatusChange() {
  510. if (this.systemInfo.is_vip == 1) {
  511. // #ifdef MP-WEIXIN
  512. let statusArr = ['微信支付', '余额支付']
  513. // #endif
  514. // #ifdef MP-ALIPAY
  515. let statusArr = this.activity==1? ['支付宝支付']:['支付宝支付', '余额支付']
  516. // #endif
  517. uni.showActionSheet({
  518. itemList: statusArr,
  519. success: (r) => {
  520. this.onPay(r.tapIndex)
  521. }
  522. })
  523. return
  524. }
  525. this.onPay(0);
  526. },
  527. //拼接图片全路径
  528. getImgSrc(src) {
  529. return this.$utils.getImgSrc(src)
  530. },
  531. getOrderInfo() {
  532. this.$http.request('xcx/orderdetail', {
  533. // store_id: uni.getStorageSync('store_id'),
  534. user_id: this.userInfo.id,
  535. order_id: this.order_id
  536. }).then(res => {
  537. this.orderInfo = res.data.detail
  538. // is_pay 已支付
  539. // 如果 is_send=1并且is_dd=1 就是达达配送 请求达达接口
  540. // 如果 is_send=1并且is_dd=2 就是商家配送 不需要请求达达接口
  541. // 如果 is_send=0 就是还没配送
  542. let orderInfo = res.data.detail;
  543. this.latitude = res.data.detail.lat;
  544. this.longitude = res.data.detail.lng;
  545. // type == 2餐后付款 is_pay==0未付款
  546. if (res.data.detail.type == 2 && res.data.detail.is_pay == 0) {
  547. this.discount = Number(orderInfo.member_discount)
  548. } else {
  549. this.discount = (Number(orderInfo.total_price) - (orderInfo.total_price * (orderInfo
  550. .discount * 0.1))).toFixed(2)
  551. }
  552. if (orderInfo.is_send == 1 && orderInfo.is_dd == 1) {
  553. this.GetDadaInfo();
  554. }
  555. if (orderInfo.is_send == 1 && orderInfo.is_dd == 2) {
  556. this.deliveryRoute();
  557. }
  558. //计算人数对应价格
  559. this.peoplePrise(res.data.detail.eat_people)
  560. })
  561. },
  562. // 达达配送
  563. GetDadaInfo(e) {
  564. this.$http.request('xcx/GetDadaInfo', {
  565. order_id: this.order_id,
  566. }).then(res => {
  567. this.dadaInfo = res.data;
  568. })
  569. },
  570. // 聚合配送
  571. deliveryRoute(e) {
  572. this.$http.request('xcx/delivery_route', {
  573. order_id: this.order_id,
  574. store_id: uni.getStorageSync('store_id'),
  575. }).then(res => {
  576. let options = [];
  577. this.juheInfo = res.data.info[0];
  578. function timestampToTime(timestamp) {
  579. var date = new Date(timestamp * 1000); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
  580. var Y = date.getFullYear() + '-';
  581. var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) +
  582. '-';
  583. var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
  584. var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  585. var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
  586. var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
  587. return Y + M + D + h + m + s;
  588. }
  589. for (let i of res.data.info) {
  590. options.push({
  591. title: i.status_desc,
  592. logistic: i.logistic,
  593. desc: timestampToTime(i.ctime),
  594. content: i.content,
  595. })
  596. }
  597. this.options = options
  598. })
  599. },
  600. onPay(pay_type) {
  601. let that = this;
  602. let subscribe = uni.getStorageSync('balance_subscribe');
  603. let state = this.orderInfo.state;
  604. // #ifdef MP-ALIPAY
  605. if (pay_type == 1) {
  606. let entityIds = [subscribe.alipay_balance];
  607. // 外卖没有取餐消息
  608. if (state != 2) {
  609. entityIds.push(subscribe.qucang_tid);
  610. }
  611. // 调用方法,唤起订阅组件
  612. my.requestSubscribeMessage({
  613. thirdTypeAppId: that.systemInfo.alipay_appid, // 可选,isv接入场景下必填
  614. entityIds: entityIds, // 模板id列表,最多3个
  615. // 接收结果的回调方法
  616. complete:(r) =>{
  617. console.log('订阅回调', r);
  618. that.yuePay()
  619. },
  620. });
  621. } else {
  622. let entityIds = [subscribe.alipay_pay_tid];
  623. // 外卖没有取餐消息
  624. if (state != 2) {
  625. entityIds.push(subscribe.qucang_tid);
  626. }
  627. // 调用方法,唤起订阅组件
  628. my.requestSubscribeMessage({
  629. thirdTypeAppId: that.systemInfo.alipay_appid, // 可选,isv接入场景下必填
  630. entityIds: entityIds, // 模板id列表,最多3个
  631. // 接收结果的回调方法
  632. complete:(r) =>{
  633. console.log('订阅回调', r);
  634. that.aliPay()
  635. },
  636. });
  637. }
  638. // #endif
  639. // #ifdef MP-WEIXIN
  640. if (pay_type == 1) {
  641. let tmplIds = [subscribe.balance_tid, subscribe.jf_tid];
  642. // 外卖没有取餐消息
  643. if (state != 2) {
  644. tmplIds.push(subscribe.wechat_qucang_tid);
  645. }
  646. uni.requestSubscribeMessage({
  647. tmplIds: tmplIds,
  648. success: (r) => {
  649. console.log(r, "success")
  650. },
  651. complete: (r) => {
  652. console.log(r, "complete")
  653. this.yuePay()
  654. }
  655. })
  656. } else {
  657. let tmplIds = [subscribe.pay_tid, subscribe.jf_tid];
  658. // 外卖没有取餐消息
  659. if (state != 2) {
  660. tmplIds.push(subscribe.wechat_qucang_tid);
  661. }
  662. uni.requestSubscribeMessage({
  663. tmplIds: tmplIds,
  664. success: (res) => {
  665. console.log(res, "success")
  666. },
  667. complete: (res) => {
  668. console.log(res, "complete")
  669. //先付后吃
  670. this.wxPay()
  671. }
  672. })
  673. }
  674. // #endif
  675. },
  676. //余额支付
  677. yuePay() {
  678. let orderInfo = this.orderInfo,
  679. canhou = "";
  680. if (orderInfo.is_pay == 0 && orderInfo.type == 2) {
  681. canhou = 1
  682. }
  683. // #ifdef MP-WEIXIN
  684. var is_type=1;
  685. // #endif
  686. // #ifdef MP-ALIPAY
  687. var is_type=2;
  688. // #endif
  689. this.$http.request('xcx/yuer_pay', {
  690. user_id: this.userInfo.id,
  691. money: Number(this.orderInfo.pay_price) - Number(this.coupon_price),
  692. order_id: this.order_id,
  693. store_id: uni.getStorageSync('store_id'),
  694. canhou: canhou,
  695. coupon_price: this.coupon_price,
  696. coupon_id: this.coupon_id,
  697. is_type:is_type,
  698. }).then(res => {
  699. console.log(res)
  700. uni.showModal({
  701. content: '支付成功',
  702. showCancel: false,
  703. success: r => {
  704. this.getOrderInfo()
  705. let pages = getCurrentPages()
  706. if (pages.length > 1) {
  707. let prePage = pages[pages.length - 2]
  708. prePage.$vm.getMyOrderList(1)
  709. }
  710. }
  711. })
  712. }).catch(err => {
  713. console.log(err)
  714. })
  715. },
  716. //支付宝支付
  717. aliPay() {
  718. let orderInfo = this.orderInfo,
  719. canhou = "";
  720. if (orderInfo.is_pay == 0 && orderInfo.type == 2) {
  721. canhou = 1
  722. }
  723. this.$http.request('Xcxpay/getAliorderNo', {
  724. user_id: this.userInfo.user_id,
  725. money: Number(this.orderInfo.pay_price) - Number(this.coupon_price),
  726. order_id: this.order_id,
  727. store_id: uni.getStorageSync('store_id'),
  728. canhou: canhou,
  729. coupon_price: this.coupon_price,
  730. coupon_id: this.coupon_id,
  731. }).then(res => {
  732. console.log(res)
  733. let out_trade_no = res.data.out_trade_no
  734. my.tradePay({
  735. // 调用统一收单交易创建接口(alipay.trade.create),获得返回字段支付宝交易号trade_no
  736. tradeNO: res.data.trade_no,
  737. success: (res) => {
  738. console.log(res)
  739. if (res.resultCode == 9000) {
  740. // this.is_popup = true;
  741. this.getOrderInfo();
  742. let pages = getCurrentPages()
  743. if (pages.length > 1) {
  744. let prePage = pages[pages.length - 2]
  745. prePage.$vm.getMyOrderList(1)
  746. }
  747. // this.$refs.popup.open();
  748. // my.alert({
  749. // content: "订单处理成功",
  750. // showCancle: false,
  751. // success: () => {
  752. // this.getOrderInfo()
  753. // let pages = getCurrentPages()
  754. // if (pages.length > 1) {
  755. // let prePage = pages[pages.length - 2]
  756. // prePage.$vm.getMyOrderList(1)
  757. // }
  758. // }
  759. // });
  760. // this.$http.request('Xcxpay/getAliOrderInfo', {
  761. // out_trade_no,
  762. // store_id: uni.getStorageSync('store_id'),
  763. // }).then(res => {
  764. // console.log(res)
  765. // }).catch(err => {
  766. // console.log(err)
  767. // })
  768. } else if (res.resultCode == 8000 || res.resultCode == 6004) {
  769. my.alert({
  770. content: "支付结果未知,请核对",
  771. showCancle: false,
  772. success: () => {
  773. this.getOrderInfo()
  774. }
  775. });
  776. }
  777. },
  778. fail: (res) => {
  779. my.alert({
  780. content: JSON.stringify(res),
  781. });
  782. }
  783. });
  784. }).catch(err => {
  785. console.log(err)
  786. })
  787. },
  788. wxPay() {
  789. let orderInfo = this.orderInfo,
  790. canhou = "";
  791. if (orderInfo.is_pay == 0 && orderInfo.type == 2) {
  792. canhou = 1
  793. }
  794. this.$http.request('Xcxweixinpay/pay', {
  795. order_id: this.order_id,
  796. money: Number(this.orderInfo.pay_price) - Number(this.coupon_price),
  797. openid: this.userInfo.openid,
  798. canhou: canhou,
  799. coupon_price: this.coupon_price,
  800. coupon_id: this.coupon_id,
  801. }).then(res => {
  802. console.log(res)
  803. wx.requestPayment({
  804. timeStamp: res.data.timeStamp,
  805. nonceStr: res.data.nonceStr,
  806. package: res.data.package,
  807. signType: res.data.signType,
  808. paySign: res.data.paySign,
  809. success: (res) => {
  810. uni.showModal({
  811. content: '支付成功',
  812. showCancel: false,
  813. success: r => {
  814. this.getOrderInfo()
  815. let pages = getCurrentPages()
  816. if (pages.length > 1) {
  817. let prePage = pages[pages.length - 2]
  818. prePage.$vm.getMyOrderList(1)
  819. }
  820. }
  821. })
  822. },
  823. fail: (res) => {
  824. uni.showToast({
  825. title: '支付失败',
  826. icon: 'none'
  827. })
  828. }
  829. })
  830. })
  831. }
  832. }
  833. }
  834. </script>
  835. <style lang="scss">
  836. page {
  837. background-color: #eee;
  838. }
  839. .pick_up {
  840. width: 190rpx;
  841. height: 190rpx;
  842. background: #3387FF;
  843. color: #FFFFFF;
  844. font-size: 28rpx;
  845. text-align: center;
  846. border-radius: 100px;
  847. padding-bottom: 20rpx;
  848. margin: 0 auto;
  849. box-shadow: 0rpx 0rpx 20rpx #ccc;
  850. }
  851. .round {
  852. font-size: 26rpx;
  853. width: 150rpx;
  854. height: 150rpx;
  855. background: #fb652e;
  856. color: #FFFFFF;
  857. border-radius: 100px;
  858. }
  859. .Coupon {
  860. text-align: center;
  861. font-size: 28rpx;
  862. padding-bottom: 30rpx;
  863. }
  864. .Coupon-icon {
  865. // padding: 4rpx 4rpx;
  866. // background-color: #C9271B;
  867. // color: #FFFFFF;
  868. font-size: 24rpx;
  869. display: inline-block;
  870. margin-right: 10rpx;
  871. }
  872. .icon-youhuijuan-01 {
  873. color: #FE8902;
  874. font-size: 42rpx;
  875. }
  876. .Coupon .icon-jiantou {
  877. font-size: 20rpx;
  878. }
  879. .orderInfo-item {
  880. margin-bottom: 20rpx;
  881. }
  882. .order-status-block {
  883. margin-bottom: 40rpx;
  884. text-align: center;
  885. }
  886. .model {
  887. width: 100%;
  888. height: 100%;
  889. position: fixed;
  890. top: 0;
  891. left: 0;
  892. background: rgba(0, 0, 0, .5);
  893. }
  894. .model-content {
  895. background: #FFFFFF;
  896. height: 800rpx;
  897. }
  898. .model-content-title {
  899. padding: 20rpx;
  900. }
  901. .head-block {
  902. padding: 40rpx 40rpx;
  903. background-color: #fff;
  904. }
  905. .head-block .order-status-icon {
  906. display: block;
  907. // width: 70rpx;
  908. // height: 70rpx;
  909. margin-right: 20rpx;
  910. font-size: 60rpx;
  911. color: $theme-color;
  912. }
  913. .head-block .status-name {
  914. font-size: 38rpx;
  915. font-weight: 600;
  916. color: $theme-color;
  917. padding: 20rpx 0;
  918. }
  919. .head-block .status-tips {
  920. font-size: 26rpx;
  921. color: #888;
  922. }
  923. .head-block .order-no {
  924. font-size: 32rpx;
  925. font-weight: bold;
  926. text-align: center;
  927. padding: 40rpx 0;
  928. color: #555;
  929. }
  930. .head-block .btn-block {
  931. justify-content: space-around;
  932. }
  933. .head-block .btn-block .btn {
  934. width: 45%;
  935. height: 70rpx;
  936. line-height: 70rpx;
  937. border-radius: 35rpx;
  938. background-color: $theme-color;
  939. text-align: center;
  940. font-weight: 500;
  941. font-size: 32rpx;
  942. color: #fff;
  943. box-shadow: 0 0 20rpx #ccc;
  944. }
  945. .head-block .btn-block .btn.btn1 {
  946. background-color: #99ccff;
  947. }
  948. .head-block .btn-block .btn.btn3 {
  949. background-color: #04BE02;
  950. }
  951. .main {
  952. padding: 30rpx;
  953. }
  954. .main .page-block {
  955. padding: 0 20rpx;
  956. background-color: #fff;
  957. border-radius: 20rpx;
  958. margin-bottom: 30rpx;
  959. }
  960. .main .page-block .page-title {
  961. height: 100rpx;
  962. line-height: 100rpx;
  963. font-size: 32rpx;
  964. font-weight: bold;
  965. color: #555;
  966. }
  967. .main .page-block .goods-list {
  968. padding: 0 20rpx;
  969. border-top: 1rpx solid #eee;
  970. }
  971. .main .page-block .goods-list .item {
  972. padding: 20rpx 0;
  973. color: #555;
  974. }
  975. .main .page-block .goods-list .item .info {
  976. padding: 0 20rpx;
  977. min-height: 126rpx;
  978. }
  979. .main .page-block .goods-list .item .img {
  980. display: block;
  981. width: 126rpx;
  982. height: 126rpx;
  983. border-radius: 10rpx;
  984. flex: none;
  985. }
  986. .main .page-block .goods-list .item .title {
  987. font-size: 30rpx;
  988. font-weight: 500;
  989. }
  990. .main .page-block .goods-list .item .unit {
  991. font-size: 24rpx;
  992. color: #a1a1a1;
  993. }
  994. .main .page-block .goods-list .item .rebate-info {
  995. display: inline-block;
  996. font-size: 24rpx;
  997. padding: 2rpx 10rpx;
  998. background: red;
  999. color: #fff;
  1000. border-radius: 8rpx;
  1001. }
  1002. .main .page-block .goods-list .item .num {
  1003. font-size: 24rpx;
  1004. margin-top: auto;
  1005. }
  1006. .main .page-block .goods-list .item .price {
  1007. margin-left: auto;
  1008. flex: none;
  1009. font-size: 26rpx;
  1010. }
  1011. .main .page-block .total-block {
  1012. height: 80rpx;
  1013. line-height: 80rpx;
  1014. text-align: right;
  1015. border-top: 1rpx solid #eee;
  1016. font-size: 30rpx;
  1017. font-weight: bold;
  1018. color: #555;
  1019. margin-top: 20rpx;
  1020. }
  1021. .main .order-info-list {
  1022. padding: 20rpx 0;
  1023. }
  1024. .main .order-info-list .item {
  1025. padding: 20rpx 0;
  1026. font-size: 26rpx;
  1027. color: #555;
  1028. }
  1029. .main .order-info-list .item .title {
  1030. flex: none;
  1031. min-width: 110rpx;
  1032. }
  1033. .main .order-info-list .item .desc {
  1034. padding-left: 20rpx;
  1035. }
  1036. .icon-dizhi {
  1037. font-size: 50rpx;
  1038. }
  1039. .is_popup {
  1040. position: fixed;
  1041. left: 0;
  1042. top: 0;
  1043. width: 100%;
  1044. height: 100%;
  1045. background-color: rgba(0, 0, 0, 0.5);
  1046. }
  1047. .get-phone-pop {
  1048. /* 成为会员 */
  1049. width: 550rpx;
  1050. background-color: #fff;
  1051. border-radius: 14rpx;
  1052. overflow: hidden;
  1053. }
  1054. .code-btn {
  1055. flex: none;
  1056. width: 170rpx;
  1057. height: 60rpx;
  1058. border-radius: 30rpx;
  1059. background-color: #3387FF;
  1060. text-align: center;
  1061. line-height: 60rpx;
  1062. color: #fff;
  1063. font-size: 24rpx;
  1064. }
  1065. .get-phone-pop .content {
  1066. // height: 180rpx;
  1067. text-align: center;
  1068. font-size: 35rpx;
  1069. color: #000;
  1070. // line-height: 60rpx;
  1071. padding: 30rpx 0;
  1072. padding-bottom: 0;
  1073. }
  1074. .content-tel {
  1075. text-align: center;
  1076. padding: 30rpx 0;
  1077. }
  1078. .get-phone-pop .btm-block {
  1079. width: 100%;
  1080. height: 100rpx;
  1081. border-top: 1rpx solid #eef0ef;
  1082. font-size: 28rpx;
  1083. }
  1084. .get-phone-pop .btm-block .btn {
  1085. height: 100rpx;
  1086. box-sizing: border-box;
  1087. text-align: center;
  1088. line-height: 100rpx;
  1089. color: #010101;
  1090. font-weight: bold;
  1091. padding: 0;
  1092. margin: 0;
  1093. border: none;
  1094. border-radius: 0;
  1095. background-color: #fff;
  1096. // font-size: 35rpx;
  1097. margin: 0 auto;
  1098. }
  1099. .carInfoHeader{
  1100. padding: 10rpx 0;
  1101. font-size: 28rpx;
  1102. }
  1103. .radio {
  1104. font-size: 28rpx;
  1105. padding: 15rpx 0 10rpx 0;
  1106. }
  1107. .radio__inner {
  1108. -webkit-flex-shrink: 0;
  1109. flex-shrink: 0;
  1110. display: -webkit-box;
  1111. display: -webkit-flex;
  1112. display: flex;
  1113. -webkit-box-pack: center;
  1114. -webkit-justify-content: center;
  1115. justify-content: center;
  1116. -webkit-box-align: center;
  1117. -webkit-align-items: center;
  1118. align-items: center;
  1119. position: relative;
  1120. border: 1px solid #DCDFE6;
  1121. border-radius: 2px;
  1122. box-sizing: border-box;
  1123. width: 12px;
  1124. height: 12px;
  1125. border-radius: 16px;
  1126. background-color: #fff;
  1127. z-index: 1;
  1128. -webkit-transition: border-color .3s;
  1129. transition: border-color .3s;
  1130. margin-right: 6rpx;
  1131. }
  1132. .radio__inner-icon {
  1133. width: 4px;
  1134. height: 4px;
  1135. border-radius: 10px;
  1136. opacity: 0;
  1137. -webkit-transition: -webkit-transform .3s;
  1138. transition: -webkit-transform .3s;
  1139. transition: transform .3s;
  1140. transition: transform .3s, -webkit-transform .3s;
  1141. }
  1142. .is-default-checked {
  1143. opacity: 1;
  1144. -webkit-transform: rotate(45deg) scaleY(1);
  1145. transform: rotate(45deg) scaleY(1);
  1146. }
  1147. </style>