index.vue 35 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504
  1. <template>
  2. <view class="pages" style="position: relative;">
  3. <view style="position: fixed;top: 0;left: 0;right: 0;z-index: 99;width: 100%;" class="bg" >
  4. <view class="flex bg justify-between padding-lr-xl">
  5. <view @click="switchTab(2)" :class="orderType==2? 'select':''" class="tabBtn" v-if="XCXIsSelect=='是'">
  6. <view class="title">外卖配送</view>
  7. <view :class="orderType==2? 'active':''"></view>
  8. </view>
  9. <view @click="switchTab(1)" :class="orderType==1? 'select':''" class="tabBtn" v-if="XCXIsSelect=='是'">
  10. <view class="title">到店取餐</view>
  11. <view :class="orderType==1? 'active':''"></view>
  12. </view>
  13. <view @click="switchTab(3)" :class="orderType==3? 'select':''" class="tabBtn" v-if="XCXIsSelect=='是'">
  14. <view class="title">跑腿订单</view>
  15. <view :class="orderType==3? 'active':''"></view>
  16. </view>
  17. </view>
  18. <view>
  19. <u-tabs v-if="orderType == 1" active-color="#FCD202" :list="qucanList" :is-scroll="true"
  20. :current="current" @change="change"></u-tabs>
  21. <u-tabs v-if="orderType == 2" active-color="#FCD202" :list="waimaiList" :is-scroll="true"
  22. :current="current1" @change="change1">
  23. </u-tabs>
  24. <u-tabs v-if="orderType == 3" :list="paotuiList" :is-scroll="true" active-color="#FCD202"
  25. :current="current2" @change="change2"></u-tabs>
  26. </view>
  27. </view>
  28. <!-- 全部订单 -->
  29. <view class="cont_one" v-if="orderType != 3&&XCXIsSelect=='是'">
  30. <view v-for="(item,index) in orderList" :key='index'
  31. @click="goNav('/pages/order/takefood?orderId='+item.orderId+'&shopId='+item.shopId)">
  32. <view class="cont" v-if="item.orderType == 1">
  33. <view class="order_success">
  34. <view class="order_name" v-if="item.status == 6">制作中</view>
  35. <view class="order_name" v-if="item.status == 3">待取餐</view>
  36. <view class="order_name" v-if="item.status == 4">已完成</view>
  37. <view class="order_name" v-if="item.status == 5">已取消</view>
  38. <view class="order_name" v-if="item.status == 7">待接单</view>
  39. <view class="order_name" v-if="item.status == 8">已取消</view>
  40. <view class="order_data">{{item.payTime}}</view>
  41. </view>
  42. <u-line color="#E6E6E6" />
  43. <view class="cont_two_top">
  44. <view class="text-lg text-bold text-black flex align-center">
  45. <image :src="item.shopCover" style="width: 80rpx;height: 80rpx;border-radius: 80rpx;"
  46. mode=""></image>
  47. <view class="margin-left-xs">{{item.shopName}}</view>
  48. </view>
  49. </view>
  50. <view class="cont_two_text">{{item.orderCode}}</view>
  51. <view class="cont_two_text2" v-if="item.status == 6">前面还有<text>{{item.countOrder}}</text>个人排队</view>
  52. <!-- <view class="cont_two_bottom">
  53. <view class="cont_two_bottom_le">点餐详情</view>
  54. <view class="cont_two_bottom_ri">
  55. <image src="../../static/images/order/right1.png" mode=""></image>
  56. </view>
  57. </view> -->
  58. <u-line color="#E6E6E6" />
  59. <view class="flex justify-between align-center padding-lr-sm padding-tb-sm">
  60. <view class="text-sm text-gray">实收 <text
  61. class="text-lg text-bold text-black margin-left-xs">¥{{item.payMoney}}</text></view>
  62. <view class="flex padding-tb-sm">
  63. <view v-if="item.status == 7" class="btn" @click.stop="cancel(item)">取消订单</view>
  64. </view>
  65. <view v-if="item.status == 4 &&item.commentFlag!=1" class="btn" @click.stop="pingjia(item)">
  66. 评价订单</view>
  67. </view>
  68. </view>
  69. <view class="cont" v-if="item.orderType == 2">
  70. <view class="order_success">
  71. <view class="order_name" v-if="item.status == 3">配送中<text style="color: #666666;margin-left: 10upx;">{{item.autoSendOrder==1?'商家配送':'平台配送'}}</text></view>
  72. <view class="order_name" v-if="item.status == 4">已完成</view>
  73. <view class="order_name" v-if="item.status == 5">已取消</view>
  74. <view class="order_name" v-if="item.status == 6">制作中</view>
  75. <view class="order_name" v-if="item.status == 7">待接单</view>
  76. <view class="order_name" v-if="item.status == 8">已取消</view>
  77. <view class="order_data">{{item.payTime}}</view>
  78. </view>
  79. <u-line color="#E6E6E6" />
  80. <view class="flex justify-between padding align-center">
  81. <view class="text-lg text-bold text-black flex align-center">
  82. <image :src="item.shopCover" style="width: 80rpx;height: 80rpx;border-radius: 80rpx;"
  83. mode=""></image>
  84. <view class="margin-left-xs">{{item.shopName}}</view>
  85. </view>
  86. </view>
  87. <view class="">
  88. <view class=" padding-lr margin-tb-sm" v-for="(ite,ind) in item.orderGoodsList" :key='ind'>
  89. <view class="flex">
  90. <image :src="ite.goodsPicture[0]" mode=""
  91. style="width: 120rpx;height: 120rpx;border-radius: 10rpx;"></image>
  92. <view class="margin-left-sm flex flex-direction justify-between">
  93. <view class="text-black text-bold text-lg">{{ite.goodsName}}</view>
  94. <view class="text-gray text-sm" v-if="ite.skuMessage">{{ite.skuMessage}}</view>
  95. </view>
  96. </view>
  97. </view>
  98. </view>
  99. <u-line color="#E6E6E6" />
  100. <view class="flex justify-between align-center padding-lr-sm">
  101. <view class="text-sm text-gray">实收 <text
  102. class="text-lg text-bold text-black margin-left-xs">¥{{item.payMoney}}</text></view>
  103. <view class="flex padding-tb-sm">
  104. <view v-if="item.status == 3" class="btn" @click.stop="finish(item)">确认收货</view>
  105. <view v-if="item.status == 6||item.status == 7" class="btn" @click.stop="cancel(item)">取消订单
  106. </view>
  107. <view v-if="item.status == 4 &&item.commentFlag!=1" class="btn" @click.stop="pingjia(item)">
  108. 评价订单</view>
  109. <view class="btn_" @click.stop="goShop(item.shopId)">再来一单</view>
  110. </view>
  111. </view>
  112. </view>
  113. </view>
  114. <empty v-if="!orderList.length" style="z-index:0"></empty>
  115. </view>
  116. <view v-if="orderType == 3" style="margin-top: 160rpx;">
  117. <view>
  118. <view class="order_box" v-for="(item,index) in order" :key="index"
  119. @click="bindorderDetail(item.indentNumber)">
  120. <view class="order_success">
  121. <view class="order_name" v-if="item.indentState == 0">待付款</view>
  122. <view class="order_name"
  123. v-if="item.indentState == 1||item.indentState == 8||item.indentState == 9||item.indentState == 10">
  124. 已取消</view>
  125. <view class="order_name" v-if="item.indentState == 2">待接单</view>
  126. <view class="order_name" v-if="item.indentState == 5">待确认</view>
  127. <view class="order_name" v-if="item.indentState == 3">已接单</view>
  128. <view class="order_name" v-if="item.indentState == 4">派送中</view>
  129. <view class="order_name" v-if="item.indentState ==6||item.indentState ==7">
  130. 已完成</view>
  131. <view class="order_name" v-if="item.indentState == 10">
  132. 已取消</view>
  133. <view class="order_data">{{item.createTime}}</view>
  134. </view>
  135. <u-line color="#E6E6E6" />
  136. <view class="order_city">
  137. <view class="city_type">
  138. <view class="type_name" v-if="item.indentType == 1">帮我送</view>
  139. <view class="type_name" v-if="item.indentType == 2">帮我取</view>
  140. <view class="type_name" v-if="item.indentType == 3">同城帮买</view>
  141. <view class="type_name" v-if="item.indentType == 4">同城服务</view>
  142. <view class="type_name" v-if="item.indentType == 5">同城外卖</view>
  143. <view class="city_text" v-if="item.indentType == 1||item.indentType == 2">
  144. {{item.itemType}}
  145. </view>
  146. <view class="city_text" v-if="item.indentType == 3&&item.buyType == 0">骑手购买</view>
  147. <view class="city_text" v-if="item.indentType == 3&&item.buyType == 1">指定购买</view>
  148. <view class="city_text" v-if="item.indentType == 4&&item.serviceType">{{item.serviceType}}
  149. </view>
  150. </view>
  151. <view class="city_address">
  152. <view class="fh_box"
  153. v-if="(item.indentType == 1||item.indentType == 2||item.indentType == 3)">
  154. <view class="fh_image">
  155. <image src="../../static/images/order/mai.png" v-if="item.indentType == 3"></image>
  156. <image src="../../static/images/order/icon_f.png" v-else></image>
  157. </view>
  158. <view class="box">
  159. <view class="fh_name">{{item.shopAddressDetail}}</view>
  160. <view class="fh_type" v-if="item.indentType != 3">{{item.shopName}}
  161. <text>{{item.shopPhone}}</text>
  162. </view>
  163. </view>
  164. </view>
  165. <view class="sh_box">
  166. <view class="sh_image">
  167. <image src="../../static/images/order/icon_s.png"></image>
  168. </view>
  169. <view class="box">
  170. <view class="sh_name">{{item.userAddressDetail}}</view>
  171. <view class="sh_type">{{item.userName}}
  172. <text>{{item.userPhone}}</text>
  173. </view>
  174. </view>
  175. </view>
  176. </view>
  177. </view>
  178. <u-line color="#E6E6E6" />
  179. <view class="order_btn">
  180. <!-- item.indentState == 7||item.indentState == 6 &&!item.evaluateMessage -->
  181. <view class="btn" v-if="item.indentState == 7||item.indentState == 6 && (!item.evaluateMessage || item.evaluateMessage == 0)"
  182. @tap.stop="pingjias(item)">
  183. 点赞骑手
  184. </view>
  185. <view class="btn" v-if="item.indentState == 0||item.indentState == 2"
  186. @tap.stop="bindorderOff(item)">取消订单</view>
  187. <view class="btn" @tap.stop="bindconfirm(item)" v-if="item.indentState == 5">确认订单</view>
  188. <view class="btn_" @tap.stop="bindorder(item)" v-if="item.indentState == 1||item.indentState == 3||item.indentState ==8||
  189. item.indentState ==9||item.indentState ==10||item.indentState == 4||item.indentState == 6">再来一单</view>
  190. <view class="btn_" v-if="item.indentState == 0" @tap.stop="bindorderpay(item)">立即付款</view>
  191. </view>
  192. </view>
  193. </view>
  194. <empty v-if="!order.length" style="z-index:0"></empty>
  195. </view>
  196. </view>
  197. </template>
  198. <script>
  199. import empty from '@/components/empty.vue'
  200. export default {
  201. components: {
  202. empty
  203. },
  204. data() {
  205. return {
  206. show: false,
  207. page: 1,
  208. limit: 10,
  209. orderType: 2,
  210. orderList: [],
  211. status: '',
  212. current: 0,
  213. current1: 0,
  214. current2: 0,
  215. qucanList: [{
  216. name: '全部'
  217. },
  218. {
  219. name: '待接单'
  220. },
  221. {
  222. name: '制作中'
  223. },
  224. {
  225. name: '待取餐'
  226. },
  227. {
  228. name: '已完成'
  229. },
  230. {
  231. name: '已取消'
  232. }
  233. ],
  234. waimaiList: [{
  235. name: '全部'
  236. },
  237. {
  238. name: '待接单'
  239. },
  240. {
  241. name: '制作中'
  242. },
  243. {
  244. name: '配送中'
  245. },
  246. {
  247. name: '已完成'
  248. },
  249. {
  250. name: '已取消'
  251. }
  252. ],
  253. paotuiList: [{
  254. name: '全部',
  255. id: 1
  256. },
  257. {
  258. name: '待付款',
  259. id: 2
  260. },
  261. {
  262. name: '待接单',
  263. id: 3
  264. },
  265. {
  266. name: '已接单',
  267. id: 4
  268. },
  269. {
  270. name: '派送中',
  271. id: 5
  272. },
  273. {
  274. name: '已完成',
  275. id: 6
  276. },
  277. {
  278. name: '已取消',
  279. id: 7
  280. }
  281. ],
  282. userId: '',
  283. currentIndex: 1,
  284. order: [],
  285. waimaiCount: 0,
  286. paotuiCount: 0,
  287. XCXIsSelect: '是',
  288. arr:[]
  289. };
  290. },
  291. onLoad(option) {
  292. this.XCXIsSelect = this.$queue.getData('XCXIsSelect') ? this.$queue.getData('XCXIsSelect') : '是'
  293. this.userId = uni.getStorageSync('userId')
  294. if (option.orderType) {
  295. this.orderType = option.orderType
  296. }
  297. uni.showLoading({
  298. title: '加载中...'
  299. })
  300. this.$Request.getT('/app/common/type/266').then(res => { //订单取消通知
  301. if (res.code == 0) {
  302. if (res.data && res.data.value) {
  303. this.arr.push(res.data.value)
  304. }
  305. }
  306. })
  307. this.$Request.getT('/app/common/type/269').then(res => { //订单状态通知
  308. if (res.code == 0) {
  309. if (res.data && res.data.value) {
  310. this.arr.push(res.data.value)
  311. }
  312. }
  313. })
  314. },
  315. onShow() {
  316. this.userId = uni.getStorageSync('userId')
  317. if (uni.getStorageSync('current') && this.userId) {
  318. this.current1 = uni.getStorageSync('current')
  319. this.status = uni.getStorageSync('current')
  320. this.page = 1
  321. this.orderType = 2
  322. uni.removeStorageSync('current')
  323. this.getOrderList()
  324. }
  325. if (this.userId) {
  326. if (this.orderType == 3) {
  327. this.orderList_()
  328. } else {
  329. this.getOrderList()
  330. }
  331. } else {
  332. this.order = []
  333. this.orderList = []
  334. }
  335. uni.hideLoading()
  336. },
  337. methods: {
  338. bindopen() {
  339. this.show = true
  340. },
  341. bindx() {
  342. this.show = false
  343. },
  344. // 取消跑腿订单
  345. bindorderOff(e) {
  346. // #ifdef MP-WEIXIN
  347. if (uni.getStorageSync('sendMsg')) {
  348. console.log('授权+1')
  349. wx.requestSubscribeMessage({
  350. tmplIds: this.arr,
  351. success(re) {
  352. console.log(JSON.stringify(re), 111111111111)
  353. var datas = JSON.stringify(re);
  354. if (datas.indexOf("accept") != -1) {
  355. // console.log(re)
  356. }
  357. },
  358. fail: (res) => {
  359. // console.log(res)
  360. }
  361. })
  362. }
  363. // #endif
  364. console.log(e)
  365. let indentNumber = e.indentNumber
  366. console.log(indentNumber)
  367. uni.showModal({
  368. title: '温馨提示',
  369. // content: '取消订单平台将扣除您'+e.userFine+'元?',
  370. content: '确定取消订单?',
  371. showCancel: true,
  372. cancelText: '取消',
  373. confirmText: '确认',
  374. success: res => {
  375. if (res.confirm) {
  376. this.$Request.postT('/app/tbindent/userCancleIndent?indentNumber=' + indentNumber)
  377. .then(res => {
  378. // console.log(res)
  379. if (res.code == 0) {
  380. uni.showToast({
  381. title: '订单取消成功'
  382. });
  383. this.page = 1;
  384. this.orderList_()
  385. } else {
  386. uni.hideLoading();
  387. uni.showModal({
  388. showCancel: false,
  389. title: '订单失败',
  390. content: res.msg
  391. });
  392. }
  393. });
  394. }
  395. }
  396. });
  397. },
  398. // 取消外卖订单
  399. cancel(e) {
  400. // #ifdef MP-WEIXIN
  401. if (uni.getStorageSync('sendMsg')) {
  402. console.log('授权+1')
  403. wx.requestSubscribeMessage({
  404. tmplIds: this.arr,
  405. success(re) {
  406. console.log(JSON.stringify(re), 111111111111)
  407. var datas = JSON.stringify(re);
  408. if (datas.indexOf("accept") != -1) {
  409. // console.log(re)
  410. }
  411. },
  412. fail: (res) => {
  413. // console.log(res)
  414. }
  415. })
  416. }
  417. // #endif
  418. let that = this
  419. console.log(e)
  420. uni.showModal({
  421. title: '提示',
  422. content: '确认取消订单吗?',
  423. success: function(res) {
  424. if (res.confirm) {
  425. console.log('用户点击确定');
  426. let data = {
  427. orderId: e.orderId
  428. }
  429. that.$Request.get("/app/order/userCancelOrder", data).then(res => {
  430. if (res.code == 0) {
  431. uni.showToast({
  432. title: '订单取消成功',
  433. icon: 'none'
  434. })
  435. that.page = 1
  436. that.getOrderList()
  437. } else {
  438. uni.showToast({
  439. title: res.msg,
  440. icon: 'none'
  441. })
  442. }
  443. });
  444. } else if (res.cancel) {
  445. console.log('用户点击取消');
  446. }
  447. }
  448. });
  449. },
  450. // 评价订单
  451. pingjia(e) {
  452. // #ifdef MP-WEIXIN
  453. if (uni.getStorageSync('sendMsg')) {
  454. console.log('授权+1')
  455. wx.requestSubscribeMessage({
  456. tmplIds: this.arr,
  457. success(re) {
  458. console.log(JSON.stringify(re), 111111111111)
  459. var datas = JSON.stringify(re);
  460. if (datas.indexOf("accept") != -1) {
  461. // console.log(re)
  462. }
  463. },
  464. fail: (res) => {
  465. // console.log(res)
  466. }
  467. })
  468. }
  469. // #endif
  470. console.log(e)
  471. let ordersId = e.orderId
  472. let orderNumber = e.orderNumber
  473. let goodsId = []
  474. if (e.orderGoodsList) {
  475. e.orderGoodsList.forEach(res => {
  476. goodsId.push(res.goodsId)
  477. })
  478. }
  479. uni.navigateTo({
  480. url: '/pages/order/feedback?ordersId=' + ordersId + '&orderNumber=' + orderNumber +
  481. '&goodsId=' + goodsId.toString() + '&shopId=' + e.shopId
  482. })
  483. },
  484. pingjias(e) {
  485. // #ifdef MP-WEIXIN
  486. if (uni.getStorageSync('sendMsg')) {
  487. console.log('授权+1')
  488. wx.requestSubscribeMessage({
  489. tmplIds: this.arr,
  490. success(re) {
  491. console.log(JSON.stringify(re), 111111111111)
  492. var datas = JSON.stringify(re);
  493. if (datas.indexOf("accept") != -1) {
  494. // console.log(re)
  495. }
  496. },
  497. fail: (res) => {
  498. // console.log(res)
  499. }
  500. })
  501. }
  502. // #endif
  503. uni.navigateTo({
  504. url: '/pages/order/feedbacks?indentNumber=' + e.indentNumber
  505. })
  506. },
  507. goShop(e) {
  508. // #ifdef MP-WEIXIN
  509. if (uni.getStorageSync('sendMsg')) {
  510. console.log('授权+1')
  511. wx.requestSubscribeMessage({
  512. tmplIds: this.arr,
  513. success(re) {
  514. console.log(JSON.stringify(re), 111111111111)
  515. var datas = JSON.stringify(re);
  516. if (datas.indexOf("accept") != -1) {
  517. // console.log(re)
  518. }
  519. },
  520. fail: (res) => {
  521. // console.log(res)
  522. }
  523. })
  524. }
  525. // #endif
  526. uni.navigateTo({
  527. url: '/pages/index/shop/index?shopId=' + e
  528. })
  529. },
  530. // 完成订单
  531. finish(e) {
  532. // #ifdef MP-WEIXIN
  533. if (uni.getStorageSync('sendMsg')) {
  534. console.log('授权+1')
  535. wx.requestSubscribeMessage({
  536. tmplIds: this.arr,
  537. success(re) {
  538. console.log(JSON.stringify(re), 111111111111)
  539. var datas = JSON.stringify(re);
  540. if (datas.indexOf("accept") != -1) {
  541. // console.log(re)
  542. }
  543. },
  544. fail: (res) => {
  545. // console.log(res)
  546. }
  547. })
  548. }
  549. // #endif
  550. let that = this
  551. console.log(e)
  552. uni.showModal({
  553. title: '提示',
  554. content: '确认订单完成吗?',
  555. success: function(res) {
  556. if (res.confirm) {
  557. console.log('用户点击确定');
  558. let data = {
  559. orderId: e.orderId
  560. }
  561. that.$Request.post("/app/order/accomplishOrder", data).then(res => {
  562. if (res.code == 0) {
  563. uni.showToast({
  564. title: '订单完成',
  565. icon: 'none'
  566. })
  567. that.getOrderList()
  568. } else {
  569. uni.showToast({
  570. title: res.msg,
  571. icon: 'none'
  572. })
  573. }
  574. });
  575. } else if (res.cancel) {
  576. console.log('用户点击取消');
  577. }
  578. }
  579. });
  580. },
  581. switchTab(e) {
  582. // #ifdef MP-WEIXIN
  583. if (uni.getStorageSync('sendMsg')) {
  584. console.log('授权+1')
  585. wx.requestSubscribeMessage({
  586. tmplIds: this.arr,
  587. success(re) {
  588. console.log(JSON.stringify(re), 111111111111)
  589. var datas = JSON.stringify(re);
  590. if (datas.indexOf("accept") != -1) {
  591. // console.log(re)
  592. }
  593. },
  594. fail: (res) => {
  595. // console.log(res)
  596. }
  597. })
  598. }
  599. // #endif
  600. this.page = 1
  601. this.status = ''
  602. this.orderType = e
  603. this.current = 0;
  604. this.current1 = 0;
  605. this.order = []
  606. this.orderList = []
  607. console.log(e)
  608. if (this.orderType == 3) {
  609. this.orderList_()
  610. } else {
  611. this.getOrderList()
  612. }
  613. },
  614. change(index) {
  615. // #ifdef MP-WEIXIN
  616. if (uni.getStorageSync('sendMsg')) {
  617. console.log('授权+1')
  618. wx.requestSubscribeMessage({
  619. tmplIds: this.arr,
  620. success(re) {
  621. console.log(JSON.stringify(re), 111111111111)
  622. var datas = JSON.stringify(re);
  623. if (datas.indexOf("accept") != -1) {
  624. // console.log(re)
  625. }
  626. },
  627. fail: (res) => {
  628. // console.log(res)
  629. }
  630. })
  631. }
  632. // #endif
  633. this.page = 1
  634. this.current = index;
  635. switch (index) {
  636. case 0:
  637. this.status = '' //全部
  638. break;
  639. case 1:
  640. this.status = 7 //待接单
  641. break;
  642. case 2:
  643. this.status = 6 //制作中
  644. break;
  645. case 3:
  646. this.status = 3 //待取餐
  647. break;
  648. case 4:
  649. this.status = 4 //已完成
  650. break;
  651. case 5:
  652. this.status = 5 //已取消
  653. break;
  654. }
  655. this.getOrderList()
  656. },
  657. change1(index) {
  658. // #ifdef MP-WEIXIN
  659. if (uni.getStorageSync('sendMsg')) {
  660. console.log('授权+1')
  661. wx.requestSubscribeMessage({
  662. tmplIds: this.arr,
  663. success(re) {
  664. console.log(JSON.stringify(re), 111111111111)
  665. var datas = JSON.stringify(re);
  666. if (datas.indexOf("accept") != -1) {
  667. // console.log(re)
  668. }
  669. },
  670. fail: (res) => {
  671. // console.log(res)
  672. }
  673. })
  674. }
  675. // #endif
  676. this.page = 1
  677. this.current1 = index;
  678. switch (index) {
  679. case 0:
  680. this.status = '' //全部
  681. break;
  682. case 1:
  683. this.status = 7 //待接单
  684. break;
  685. case 2:
  686. this.status = 6 //制作中
  687. break;
  688. case 3:
  689. this.status = 3 //配送中
  690. break;
  691. case 4:
  692. this.status = 4 //已完成
  693. break;
  694. case 5:
  695. this.status = 5 //已取消
  696. break;
  697. }
  698. this.getOrderList()
  699. },
  700. change2(index) {
  701. // #ifdef MP-WEIXIN
  702. if (uni.getStorageSync('sendMsg')) {
  703. console.log('授权+1')
  704. wx.requestSubscribeMessage({
  705. tmplIds: this.arr,
  706. success(re) {
  707. console.log(JSON.stringify(re), 111111111111)
  708. var datas = JSON.stringify(re);
  709. if (datas.indexOf("accept") != -1) {
  710. // console.log(re)
  711. }
  712. },
  713. fail: (res) => {
  714. // console.log(res)
  715. }
  716. })
  717. }
  718. // #endif
  719. this.current2 = index;
  720. this.currentIndex = this.paotuiList[index].id
  721. this.page = 1;
  722. this.orderList_()
  723. },
  724. goNav(url) {
  725. // #ifdef MP-WEIXIN
  726. if (uni.getStorageSync('sendMsg')) {
  727. console.log('授权+1')
  728. wx.requestSubscribeMessage({
  729. tmplIds: this.arr,
  730. success(re) {
  731. console.log(JSON.stringify(re), 111111111111)
  732. var datas = JSON.stringify(re);
  733. if (datas.indexOf("accept") != -1) {
  734. // console.log(re)
  735. }
  736. },
  737. fail: (res) => {
  738. // console.log(res)
  739. }
  740. })
  741. }
  742. // #endif
  743. uni.navigateTo({
  744. url
  745. })
  746. },
  747. // 跑腿订单获取
  748. orderList_() {
  749. let data = {
  750. page: this.page,
  751. limit: this.limit,
  752. indentState: this.currentIndex
  753. }
  754. this.$Request.getT('/app/tbindent/findUserIndent', data).then(res => {
  755. // console.log(res)
  756. var that = this
  757. if (res.code === 0) {
  758. this.paotuiCount = res.data.totalCount
  759. if (that.page == 1) {
  760. that.order = res.data.list
  761. that.totalPage = res.data.totalPage
  762. }
  763. if (that.page > 1) {
  764. if (res.data.list.length > 0) {
  765. that.order = that.order.concat(res.data.list)
  766. }
  767. }
  768. }
  769. uni.stopPullDownRefresh();
  770. uni.hideLoading()
  771. });
  772. },
  773. // 外卖数据列表
  774. getOrderList() {
  775. let data = {
  776. page: this.page,
  777. limit: this.limit,
  778. status: this.status,
  779. orderType: this.orderType
  780. }
  781. this.$Request.get("/app/order/waitTakeFood", data).then(res => {
  782. if (res.code == 0) {
  783. this.waimaiCount = res.data.totalCount
  784. res.data.list.forEach(res => {
  785. res.orderGoodsList.forEach(ret => {
  786. if(ret.goodsPicture ){
  787. ret.goodsPicture = ret.goodsPicture.split(',')
  788. }
  789. })
  790. res.orderCode = res.orderCode.substring(res.orderCode.length - 3, res.orderCode
  791. .length)
  792. })
  793. if (this.page == 1) {
  794. this.orderList = res.data.list
  795. } else {
  796. this.orderList = [...this.orderList, ...res.data.list]
  797. }
  798. }
  799. uni.stopPullDownRefresh();
  800. uni.hideLoading()
  801. });
  802. },
  803. // 再来一单
  804. bindorder(e) {
  805. // #ifdef MP-WEIXIN
  806. if (uni.getStorageSync('sendMsg')) {
  807. console.log('授权+1')
  808. wx.requestSubscribeMessage({
  809. tmplIds: this.arr,
  810. success(re) {
  811. console.log(JSON.stringify(re), 111111111111)
  812. var datas = JSON.stringify(re);
  813. if (datas.indexOf("accept") != -1) {
  814. // console.log(re)
  815. }
  816. },
  817. fail: (res) => {
  818. // console.log(res)
  819. }
  820. })
  821. }
  822. // #endif
  823. console.log(e)
  824. let index = e.indentType
  825. let current = e.buyType
  826. if (e.indentType == 1 || e.indentType == 2) {
  827. uni.navigateTo({
  828. url: '/running/Helpsend/Helpsend?indentNumber=' + e.indentNumber + '&index=' + index
  829. })
  830. } else if (e.indentType == 3) {
  831. uni.navigateTo({
  832. url: '/running/Helppay/Helppay?indentNumber=' + e.indentNumber + '&index=' + index +
  833. '&current=' + current
  834. })
  835. } else {
  836. uni.navigateTo({
  837. url: '/running/Cityservice/Cityservice?indentNumber=' + e.indentNumber + '&index=' + index
  838. })
  839. }
  840. },
  841. // 订单详情
  842. bindorderDetail(indentNumber) {
  843. // #ifdef MP-WEIXIN
  844. if (uni.getStorageSync('sendMsg')) {
  845. console.log('授权+1')
  846. wx.requestSubscribeMessage({
  847. tmplIds: this.arr,
  848. success(re) {
  849. console.log(JSON.stringify(re), 111111111111)
  850. var datas = JSON.stringify(re);
  851. if (datas.indexOf("accept") != -1) {
  852. // console.log(re)
  853. }
  854. },
  855. fail: (res) => {
  856. // console.log(res)
  857. }
  858. })
  859. }
  860. // #endif
  861. console.log(indentNumber)
  862. uni.navigateTo({
  863. url: '/pages/order/detail?indentNumber=' + indentNumber
  864. })
  865. },
  866. // 立即付款
  867. bindorderpay(e) {
  868. uni.navigateTo({
  869. url: '/running/order/pay/pay?indentNumber=' + e.indentNumber
  870. })
  871. }
  872. },
  873. onReachBottom: function() {
  874. if (this.orderType == 3) {
  875. if (this.order.length < this.paotuiCount) {
  876. this.page = this.page + 1;
  877. this.orderList_()
  878. } else {
  879. uni.showToast({
  880. title: '已经到底了',
  881. icon: 'none'
  882. })
  883. }
  884. } else {
  885. if (this.orderList.length < this.waimaiCount) {
  886. this.page = this.page + 1;
  887. this.getOrderList()
  888. } else {
  889. uni.showToast({
  890. title: '已经到底了',
  891. icon: 'none'
  892. })
  893. }
  894. }
  895. },
  896. onPullDownRefresh: function() {
  897. this.page = 1
  898. this.status = ''
  899. this.current = 0;
  900. this.current1 = 0;
  901. // console.log(e)
  902. if (this.orderType == 3) {
  903. this.orderList_()
  904. } else {
  905. this.getOrderList()
  906. }
  907. },
  908. }
  909. </script>
  910. <style scoped>
  911. .active {
  912. /* width: 82rpx; */
  913. height: 16rpx;
  914. background: #FCD202;
  915. position: relative;
  916. top: -20rpx;
  917. z-index: 9;
  918. }
  919. .bg {
  920. background-color: #FFFFFF;
  921. }
  922. /* 切换选项 */
  923. .nav {
  924. display: flex;
  925. align-items: center;
  926. justify-content: center;
  927. background-color: #FFFFFF;
  928. color: #999999;
  929. }
  930. .btn {
  931. width: 150rpx;
  932. height: 60rpx;
  933. line-height: 60rpx;
  934. text-align: center;
  935. background: #F5F5F5;
  936. font-size: 28rpx;
  937. border: 2rpx solid ##F5F5F5;
  938. color: #666666;
  939. border-radius: 50rpx;
  940. font-weight: 700;
  941. margin-left: 10rpx;
  942. }
  943. .btn_ {
  944. width: 150rpx;
  945. height: 60rpx;
  946. line-height: 60rpx;
  947. text-align: center;
  948. background: #FCD202;
  949. font-size: 28rpx;
  950. border: 2rpx solid #FCD202;
  951. color: #333333;
  952. border-radius: 50rpx;
  953. font-weight: 700;
  954. margin-left: 10rpx;
  955. }
  956. .tabBtn {
  957. /* background-color: #f6f6fa; */
  958. height: 60rpx;
  959. line-height: 60rpx;
  960. color: #999999;
  961. font-size: 38rpx;
  962. }
  963. .title {
  964. position: relative;
  965. z-index: 100;
  966. }
  967. .shaix {
  968. width: 30%;
  969. text-align: center;
  970. display: flex;
  971. align-items: center;
  972. justify-content: center;
  973. letter-spacing: 4rpx;
  974. font-size: 27rpx;
  975. }
  976. .select {
  977. color: #000000;
  978. font-weight: bold;
  979. background-color: #fff;
  980. z-index: 10;
  981. }
  982. .nav view {
  983. flex-grow: 1;
  984. margin: 3% 6.5% 2%;
  985. text-align: center;
  986. }
  987. .nav_btna {
  988. font-size: 42rpx;
  989. line-height: 34rpx;
  990. color: #000000;
  991. font-weight: bold;
  992. border-bottom: 14rpx solid #FCD202;
  993. }
  994. /* 内容 */
  995. /* 全部订单 */
  996. .cont_one {
  997. margin-top: 160rpx;
  998. }
  999. /* .cont_one image {
  1000. width: 80%;
  1001. height: 353rpx;
  1002. } */
  1003. /* 到店取餐 */
  1004. .cont_two {
  1005. display: none;
  1006. width: 94%;
  1007. margin: 3% auto;
  1008. background-color: #FFFFFF;
  1009. border-radius: 18rpx;
  1010. }
  1011. .cont {
  1012. /* display: none; */
  1013. width: 94%;
  1014. margin: 3% auto;
  1015. background-color: #FFFFFF;
  1016. border-radius: 18rpx;
  1017. /* padding: 20rpx 0; */
  1018. }
  1019. .cont_two_top {
  1020. width: 94%;
  1021. padding: 4% 3% 0;
  1022. margin: 0 auto;
  1023. display: flex;
  1024. justify-content: space-between;
  1025. }
  1026. .cont_two_top_le {
  1027. /* width: 85%; */
  1028. font-size: 30rpx;
  1029. font-weight: 500;
  1030. color: #333333;
  1031. /* line-height: 2; */
  1032. margin: 5rpx 0;
  1033. }
  1034. .cont_two_top_ri {
  1035. /* width: 15%; */
  1036. padding: 6rpx 10rpx;
  1037. text-align: center;
  1038. background: rgba(255, 19, 10, 0.2);
  1039. font-size: 24rpx;
  1040. border: 2rpx solid #FF130A;
  1041. color: #FF130A;
  1042. opacity: 0.6;
  1043. border-radius: 8rpx;
  1044. }
  1045. .cont_two_top_ri1 {
  1046. /* width: 15%; */
  1047. text-align: center;
  1048. /* line-height: 2; */
  1049. padding: 6rpx 10rpx;
  1050. background: #62ba8b;
  1051. font-size: 24rpx;
  1052. border: 2rpx solid #62ba8b;
  1053. color: #fff;
  1054. /* opacity: 0.6; */
  1055. border-radius: 8rpx;
  1056. }
  1057. .cont_two_top_ri2 {
  1058. /* width: 15%; */
  1059. text-align: center;
  1060. /* line-height: 2; */
  1061. padding: 6rpx 10rpx;
  1062. background: #FCD202;
  1063. font-size: 24rpx;
  1064. border: 2rpx solid #FCD202;
  1065. color: #fff;
  1066. /* opacity: 0.6; */
  1067. border-radius: 8rpx;
  1068. }
  1069. .cont_two_text {
  1070. font-size: 58rpx;
  1071. text-align: center;
  1072. font-weight: bold;
  1073. color: red;
  1074. margin: 3% 0;
  1075. line-height: 32rpx;
  1076. }
  1077. .cont_two_text2 {
  1078. font-size: 30rpx;
  1079. width: 100%;
  1080. font-weight: 500;
  1081. color: #333333;
  1082. text-align: center;
  1083. padding-bottom: 3%;
  1084. /* line-height: 32rpx; */
  1085. }
  1086. .cont_two_text2 text {
  1087. color: #FF130A;
  1088. }
  1089. .cont_two_bottom {
  1090. width: 94%;
  1091. padding: 3%;
  1092. margin: 0 auto;
  1093. display: flex;
  1094. border-top: 1rpx solid #E6E6E6;
  1095. }
  1096. .cont_two_bottom_le {
  1097. flex: 1;
  1098. font-size: 24rpx;
  1099. font-weight: 500;
  1100. color: #999999;
  1101. line-height: 32rpx;
  1102. }
  1103. .cont_two_bottom_ri {
  1104. flex: 1;
  1105. text-align: right;
  1106. }
  1107. .cont_two_bottom_ri image {
  1108. width: 14rpx;
  1109. height: 24rpx;
  1110. }
  1111. /* 外卖订单 */
  1112. .cont_three {
  1113. display: none;
  1114. width: 94%;
  1115. margin: 3% auto;
  1116. background-color: #FFFFFF;
  1117. border-radius: 18rpx;
  1118. }
  1119. .cont_three_top {
  1120. width: 94%;
  1121. padding: 4% 3% 0;
  1122. margin: 0 auto;
  1123. display: flex;
  1124. }
  1125. .cont_three_top_le {
  1126. flex: 2;
  1127. font-size: 30rpx;
  1128. font-weight: 500;
  1129. color: #D80204;
  1130. line-height: 32rpx;
  1131. }
  1132. .cont_three_top_ri {
  1133. flex: 1;
  1134. text-align: right;
  1135. font-size: 24rpx;
  1136. font-weight: 500;
  1137. color: #999999;
  1138. line-height: 32rpx;
  1139. }
  1140. .cont_three_text {
  1141. padding: 2% 0 2% 3%;
  1142. font-size: 24rpx;
  1143. font-weight: 500;
  1144. color: #999999;
  1145. line-height: 32rpx;
  1146. }
  1147. .cont_three_cen {
  1148. width: 94%;
  1149. padding: 0.5% 3%;
  1150. margin: 0 auto;
  1151. display: flex;
  1152. }
  1153. .cont_three_cen_le {
  1154. flex: 2;
  1155. font-size: 30rpx;
  1156. font-weight: 500;
  1157. color: #333333;
  1158. line-height: 32rpx;
  1159. }
  1160. .cont_three_cen_ri {
  1161. flex: 1;
  1162. text-align: right;
  1163. font-size: 24rpx;
  1164. font-weight: 500;
  1165. color: #999999;
  1166. line-height: 32rpx;
  1167. }
  1168. .cont_three_text2 {
  1169. font-size: 24rpx;
  1170. font-weight: 500;
  1171. color: #D80204;
  1172. padding: 0 3%;
  1173. line-height: 32rpx;
  1174. }
  1175. .cont_three_bottom {
  1176. width: 94%;
  1177. padding: 3%;
  1178. margin: 3% auto 0;
  1179. display: flex;
  1180. border-top: 1rpx solid #E6E6E6;
  1181. }
  1182. .cont_three_bottom_le {
  1183. flex: 1;
  1184. font-size: 24rpx;
  1185. font-weight: 500;
  1186. color: #999999;
  1187. line-height: 32rpx;
  1188. }
  1189. .cont_three_bottom_ri {
  1190. flex: 1;
  1191. text-align: right;
  1192. }
  1193. .cont_dis {
  1194. display: block;
  1195. }
  1196. .box {
  1197. /* width: 100%;
  1198. height: 100vh;
  1199. background-color: rgba(0, 0, 0, 0.2);
  1200. position: absolute;
  1201. top: 40px;
  1202. z-index: 999 */
  1203. }
  1204. .popbox {
  1205. width: 749upx;
  1206. /* height: 764upx; */
  1207. background: #FFFFFF;
  1208. padding-bottom: 72rpx;
  1209. z-inde: 999;
  1210. position: fixed;
  1211. top: 39px;
  1212. left: 0;
  1213. right: 0;
  1214. }
  1215. .impute {
  1216. background: #F2F2F2;
  1217. height: 80rpx;
  1218. margin: 20rpx 0;
  1219. }
  1220. .btns {
  1221. width: 690upx;
  1222. height: 88upx;
  1223. background: #FFCC00;
  1224. box-shadow: 0upx 10upx 20upx 0upx #FFD9B3;
  1225. border-radius: 16upx;
  1226. text-align: center;
  1227. line-height: 88rpx;
  1228. font-size: 32rpx;
  1229. font-weight: bold;
  1230. margin: 0 auto;
  1231. }
  1232. .empty {
  1233. width: 100%;
  1234. background: #ffffff;
  1235. /* #ifdef MP-WEIXIN */
  1236. height: 93vh;
  1237. /* #endif */
  1238. /* #ifndef MP-WEIXIN */
  1239. height: 80vh;
  1240. /* #endif */
  1241. }
  1242. .tabs_box {
  1243. display: none;
  1244. }
  1245. .dis {
  1246. display: block;
  1247. width: 100%;
  1248. }
  1249. .u-tab-item {
  1250. font-size: 30rpx !important;
  1251. /* color: #666666 !important; */
  1252. }
  1253. .success_box {
  1254. width: 100%;
  1255. }
  1256. .order_box {
  1257. width: 95%;
  1258. margin: 0 auto;
  1259. /* height: 420rpx; */
  1260. background: #FFFFFF;
  1261. margin-top: 20rpx;
  1262. border-radius: 10px;
  1263. /* padding: 20rpx 0rpx; */
  1264. }
  1265. .order_success {
  1266. width: 90%;
  1267. margin: 0 auto;
  1268. display: flex;
  1269. height: 80upx;
  1270. }
  1271. .order_name {
  1272. flex: 1;
  1273. display: flex;
  1274. justify-content: left;
  1275. align-items: center;
  1276. font-weight: bold;
  1277. font-size: 31rpx;
  1278. letter-spacing: 1upx;
  1279. }
  1280. .order_data {
  1281. flex: 1;
  1282. color: #999999;
  1283. display: flex;
  1284. justify-content: flex-end;
  1285. align-items: center;
  1286. font-size: 27rpx;
  1287. }
  1288. .city_type {
  1289. width: 90%;
  1290. margin: 0 auto;
  1291. height: 60upx;
  1292. line-height: 60upx;
  1293. display: flex;
  1294. justify-content: left;
  1295. align-items: center;
  1296. }
  1297. .type_name {
  1298. font-size: 27rpx;
  1299. }
  1300. .city_text {
  1301. line-height: 36rpx;
  1302. color: #49A5FF;
  1303. background: #c4e2ff;
  1304. text-align: center;
  1305. font-size: 25rpx;
  1306. margin-left: 20rpx;
  1307. padding: 2rpx 10rpx;
  1308. }
  1309. .city_address {
  1310. width: 90%;
  1311. margin: 0 auto;
  1312. /* margin-top: -10rpx; */
  1313. }
  1314. /* 发货地址 */
  1315. .fh_box {
  1316. display: flex;
  1317. /* height: 80upx; */
  1318. margin-top: 25rpx;
  1319. }
  1320. .fh_image {
  1321. /* flex: 1; */
  1322. width: 10%;
  1323. }
  1324. .box {
  1325. /* flex: 11; */
  1326. width: 85%;
  1327. overflow: hidden;
  1328. }
  1329. .fh_name {
  1330. font-size: 31rpx;
  1331. font-weight: 600;
  1332. letter-spacing: 2upx;
  1333. }
  1334. .fh_type {
  1335. color: #999999;
  1336. font-size: 28rpx;
  1337. margin-top: 10rpx;
  1338. }
  1339. .fh_type text {
  1340. margin-left: 20upx;
  1341. }
  1342. /* 送货地址 */
  1343. .sh_box {
  1344. display: flex;
  1345. margin-bottom: 14upx;
  1346. margin-top: 25rpx;
  1347. }
  1348. .sh_image {
  1349. /* flex: 1; */
  1350. width: 10%;
  1351. }
  1352. .sh_name {
  1353. font-size: 31rpx;
  1354. font-weight: 600;
  1355. letter-spacing: 2upx;
  1356. }
  1357. .sh_type {
  1358. color: #999999;
  1359. font-size: 28rpx;
  1360. margin-top: 10rpx;
  1361. }
  1362. .sh_type text {
  1363. margin-left: 20upx;
  1364. }
  1365. .fh_image image {
  1366. width: 45upx;
  1367. height: 45upx;
  1368. }
  1369. .sh_image image {
  1370. width: 45upx;
  1371. height: 45upx;
  1372. }
  1373. .order_btn {
  1374. display: flex;
  1375. justify-content: flex-end;
  1376. align-items: center;
  1377. height: 80upx;
  1378. margin-top: 8upx;
  1379. padding: 0 20rpx;
  1380. }
  1381. .btn1 {
  1382. width: 170upx;
  1383. font-size: 26rpx;
  1384. line-height: 60upx;
  1385. text-align: center;
  1386. border: 3upx solid #9C9C9C;
  1387. border-radius: 20upx;
  1388. color: #9C9C9C;
  1389. margin-right: 30upx;
  1390. }
  1391. .btn2 {
  1392. width: 170upx;
  1393. line-height: 60upx;
  1394. color: white;
  1395. background: #FF6A04;
  1396. font-size: 27rpx;
  1397. text-align: center;
  1398. margin-right: 30upx;
  1399. border-radius: 20upx;
  1400. }
  1401. .btn3 {
  1402. width: 120upx;
  1403. font-size: 26rpx;
  1404. line-height: 60upx;
  1405. text-align: center;
  1406. border: 2upx solid #FF130A;
  1407. border-radius: 10upx;
  1408. color: #FF130A;
  1409. margin-right: 30upx;
  1410. background: rgba(255, 19, 10, 0.2);
  1411. opacity: 0.6;
  1412. }
  1413. </style>