index.vue 35 KB

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