eventDetails.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969
  1. <template>
  2. <view class="event-details">
  3. <navbar ref="navbar" backColor="#666" :config="config"></navbar>
  4. <view class="middle">
  5. <!-- 活动消息 -->
  6. <view v-if="type==0">
  7. <view v-if="msgList.length>=0">
  8. <view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
  9. <view class="box">
  10. <view class="time">
  11. {{item.create_time}}
  12. </view>
  13. </view>
  14. <view class="content">
  15. <view class="title">
  16. {{item.remark}}
  17. </view>
  18. <view class="image">
  19. <image :src="item.message_body.img" mode="widthFix"></image>
  20. </view>
  21. </view>
  22. </view>
  23. <loadMore v-if="msgList.length>0" :status="status"></loadMore>
  24. </view>
  25. <nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
  26. </view>
  27. <view v-if="type==1">
  28. <!-- 支付消息 -->
  29. <!-- <view v-if="msgList.length>0">
  30. <view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
  31. <view class="box">
  32. <view class="time">
  33. {{item.create_time}}
  34. </view>
  35. </view>
  36. <view class="content">
  37. <view class="title">
  38. {{item.remark}}
  39. </view>
  40. <view class="image">
  41. <image :src="item.message_body.goods[0].goods_img" mode=""></image>
  42. </view>
  43. </view>
  44. </view>
  45. <loadMore v-if="msgList.length>0" :status="status"></loadMore>
  46. </view>
  47. <nodata v-if="noData" :config="{top:20,content:'暂无消息~'}"></nodata> -->
  48. <view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
  49. <view v-if="item.message_body.goods.length>1">
  50. <view class="box">
  51. <view class="time">
  52. {{item.create_time}}
  53. </view>
  54. </view>
  55. <view class="content" style="padding: 44rpx 0;">
  56. <view class="title" style="padding: 0 30rpx;">
  57. 订单已支付
  58. </view>
  59. <view class="single-data">
  60. <view class="img-box u-border-one" style="display: flex;">
  61. <view v-for="(i,v) in item.message_body.goods" class="single-img">
  62. <image class="goods-img" :src="i.goods_img" v-if="v<3"></image>
  63. </view>
  64. </view>
  65. <view class="single-bottom">
  66. <text>共{{item.message_body.goods_num}}件商品,实付金额 </text>
  67. <!-- item.message_body.goods_num -->
  68. <view class="money">
  69. <rich-text :nodes="$mUtil.priceBigSmall(item.message_body.money)">
  70. </rich-text>
  71. </view>
  72. <!-- {{item.message_body.money}} -->
  73. </view>
  74. </view>
  75. </view>
  76. </view>
  77. <view v-else>
  78. <view class="box">
  79. <view class="time u-text2">
  80. {{item.create_time}}
  81. </view>
  82. </view>
  83. <view class="content">
  84. <view class="title">
  85. 订单已支付
  86. </view>
  87. <view class="small-box">
  88. <view v-if="item.message_body.goods_type==4">
  89. <view class="small-left">
  90. <image :src="imgUrl+'/delImg/recharge.png'" mode=""></image>
  91. </view>
  92. </view>
  93. <view v-else>
  94. <view class="small-left">
  95. <image :src="item.message_body.goods[0].goods_img" mode=""></image>
  96. </view>
  97. </view>
  98. <view v-if="item.message_body.goods_type==3">
  99. <view class="small-right">
  100. <view class="small-top u-text2 ">
  101. {{item.message_body.goods[0].goods_name}}
  102. </view>
  103. <view class="specifications u-mt50">
  104. 规格:<text>{{item.message_body.goods[0].goods_spec}}</text>
  105. </view>
  106. <view class="price">
  107. 积分
  108. {{item.message_body.total_point}}
  109. </view>
  110. </view>
  111. </view>
  112. <view v-else>
  113. <view class="small-right">
  114. <view class="small-top u-text2 ">
  115. {{item.message_body.goods[0].goods_name}}
  116. </view>
  117. <view class="specifications u-mt50" v-if="item.message_body.goods[0].goods_spec">
  118. 规格:<text>{{item.message_body.goods[0].goods_spec}}</text>
  119. </view>
  120. <view class="price">
  121. <text
  122. style="font-size: 26rpx; color: #1A1A1A; ">¥{{item.message_body.money%1==0?item.message_body.money+'.00':item.message_body.money}}</text>
  123. <text style="margin-left: 13rpx; color: #999999;">x {{item.message_body.goods_num}}</text>
  124. </view>
  125. </view>
  126. </view>
  127. </view>
  128. <view v-if="item.message_body.goods_type==3">
  129. <view class="bottom-box">
  130. 共{{item.message_body.goods_num}}件商品,实付积分<text>{{item.message_body.total_point}}</text>
  131. <view v-if="item.message_body.total_amount" style="margin-left: 4rpx;">含运费<text
  132. style="margin-left: 4rpx;">{{item.message_body.total_amount}}元</text></view>
  133. </view>
  134. </view>
  135. <view v-else>
  136. <view class="bottom-box">
  137. <text>共{{item.message_body.goods_num}}件商品,实付金额 </text>
  138. <view class="money">
  139. <rich-text :nodes="$mUtil.priceBigSmall(item.message_body.total_amount)">
  140. </rich-text>
  141. </view>
  142. </view>
  143. </view>
  144. </view>
  145. </view>
  146. </view>
  147. <loadMore v-if="msgList.length>0" :status="status"></loadMore>
  148. </view>
  149. <view v-if="type==2">
  150. <view v-if="msgList.length>0">
  151. <view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
  152. <view class="box">
  153. <view class="time">
  154. {{item.create_time}}
  155. </view>
  156. </view>
  157. <view class="content">
  158. <view v-if="item.message_body.logistics_status==0">
  159. <view class="logistics-top">
  160. 订单已发货
  161. </view>
  162. </view>
  163. <view v-if="item.message_body.logistics_status==1">
  164. <view class="logistics-top">
  165. 订单已收货
  166. </view>
  167. </view>
  168. <view class="logistics-box">
  169. <view class="logistics-left">
  170. <image :src="item.message_body.goods[0].goods_img" mode=""></image>
  171. </view>
  172. <view class="logistics-right">
  173. <view class="logistics-right-top u-text2">
  174. {{item.message_body.goods[0].goods_name}}
  175. </view>
  176. <!-- 修改积分字段 -->
  177. <view v-if="item.message_body.exchange==true">
  178. <view class="logistics-right-content">
  179. ¥{{item.message_body.money}}元 + {{item.message_body.total_point}}积分
  180. <text>x{{item.message_body.goods_num}}</text>
  181. </view>
  182. </view>
  183. <view v-if="item.message_body.exchange==false">
  184. <view class="logistics-right-content">
  185. ¥{{item.message_body.money}} <text>x{{item.message_body.goods_num}}</text>
  186. </view>
  187. </view>
  188. <view class="logistics-right-bottom">
  189. 物流单号:{{item.message_body.logistic_code}}
  190. </view>
  191. </view>
  192. </view>
  193. </view>
  194. </view>
  195. <loadMore v-if="msgList.length>0" :status="status"></loadMore>
  196. </view>
  197. <nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
  198. </view>
  199. <view v-if="type==3">
  200. <!-- <view v-if="msgList.length>=0">
  201. <view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
  202. <view class="box">
  203. <view class="time">
  204. {{item.create_time}}
  205. </view>
  206. </view>
  207. <view class="content">
  208. <view class="title">
  209. {{item.remark}}
  210. </view>
  211. <view class="image">
  212. <image :src="item.message_body.goods[0].goods_img" mode="widthFix"></image>
  213. </view>
  214. </view>
  215. </view>
  216. <loadMore v-if="msgList.length>0" :status="status"></loadMore>
  217. </view>
  218. <nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata> -->
  219. <view v-if="msgList.length>=0">
  220. <view class="after-sales" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
  221. <view v-if="item.message_body.goods.length>1">
  222. <view class="box">
  223. <view class="time">
  224. {{item.create_time}}
  225. </view>
  226. </view>
  227. <view class="after-sales-msg">
  228. <view class="title" v-if="item.message_body.rights_status==0">
  229. 商家已同意
  230. </view>
  231. <view class="title" v-if="item.message_body.rights_status==1">
  232. 商家拒绝维权
  233. </view>
  234. <view class="title" v-if="item.message_body.rights_status==2">
  235. 商家已收货
  236. </view>
  237. <view class="title" v-if="item.message_body.rights_status==3">
  238. 商家已退款
  239. </view>
  240. <view class="title" v-if="item.message_body.rights_status==4">
  241. 商家发起自动退款
  242. </view>
  243. <view class="multigraph">
  244. <view v-for="(x,y) in item.message_body.goods" :key="y">
  245. <image :src="x.goods_img" v-if="y<3" mode=""></image>
  246. </view>
  247. </view>
  248. <view class="refund-amount">
  249. 退款金额¥{{item.message_body.money}}<text v-if="item.message_body.refund_point>0">,
  250. 退款积分{{item.message_body.refund_point}}</text>
  251. </view>
  252. </view>
  253. </view>
  254. <view class="" v-else>
  255. <view class="box">
  256. <view class="time">
  257. {{item.create_time}}
  258. </view>
  259. </view>
  260. <view class="after-sales-msg">
  261. <view class="title" v-if="item.message_body.rights_status==0">
  262. 商家已同意
  263. </view>
  264. <view class="title" v-if="item.message_body.rights_status==1">
  265. 商家拒绝维权
  266. </view>
  267. <view class="title" v-if="item.message_body.rights_status==2">
  268. 商家已收货
  269. </view>
  270. <view class="title" v-if="item.message_body.rights_status==3">
  271. 商家已退款
  272. </view>
  273. <view class="title" v-if="item.message_body.rights_status==4">
  274. 商家发起自动退款
  275. </view>
  276. <view class="article">
  277. <view class="article-left">
  278. <image :src="item.message_body.goods[0].goods_img" mode=""></image>
  279. </view>
  280. <view class="article-right">
  281. <view class="msg-title u-text2">
  282. {{item.message_body.goods[0].goods_name}}
  283. </view>
  284. <view class="specifications">
  285. {{item.message_body.goods[0].goods_spec}}
  286. </view>
  287. <view class="refund u-flex" style="justify-content: space-between;">
  288. <!-- 退款金额:¥ {{item.message_body.money}} -->
  289. <view class="refund">
  290. 退款金额:¥ {{item.message_body.money}}
  291. </view>
  292. <view class="refund" v-if="item.message_body.refund_point>0">退款积分:
  293. {{item.message_body.refund_point}}
  294. </view>
  295. </view>
  296. </view>
  297. </view>
  298. </view>
  299. </view>
  300. </view>
  301. <loadMore v-if="msgList.length>0" :status="status"></loadMore>
  302. </view>
  303. <nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
  304. </view>
  305. <view v-if="type==4">
  306. <view v-if="msgList.length>=0">
  307. <view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
  308. <view class="box">
  309. <view class="time">
  310. {{item.create_time}}
  311. </view>
  312. </view>
  313. <view class="content">
  314. <view class="title">
  315. {{item.remark}}
  316. </view>
  317. <view class="bottom-time">
  318. {{item.create_time}}
  319. </view>
  320. </view>
  321. </view>
  322. <loadMore v-if="msgList.length>0" :status="status"></loadMore>
  323. </view>
  324. <nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
  325. </view>
  326. <view v-if="type==5">
  327. <view v-if="msgList.length>=0">
  328. <view class="item" v-for="(item,index) in msgList" :key="index" @click="goToGbOrderDetails(item)">
  329. <view class="box">
  330. <view class="time">
  331. {{item.create_time}}
  332. </view>
  333. </view>
  334. <view class="content">
  335. <view class="title label" v-if="JSON.parse(item.msg).type == 0">
  336. 区县运营中心审核消息提醒
  337. </view>
  338. <view class="title">
  339. {{item.remark}}
  340. </view>
  341. <view class="bottom-time">
  342. {{item.create_time}}
  343. </view>
  344. </view>
  345. </view>
  346. <loadMore v-if="msgList.length>0" :status="status"></loadMore>
  347. </view>
  348. <nodata v-else :config="{top:20,content:'暂无消息~'}"></nodata>
  349. </view>
  350. </view>
  351. <ldLoading isFullScreen :active="loading"></ldLoading>
  352. </view>
  353. </template>
  354. <script>
  355. export default {
  356. data() {
  357. return {
  358. config: {
  359. back: true, //false是tolbar页面 是则不写
  360. title: '',
  361. color: '#1A1A1A',
  362. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  363. backgroundColor: [1, "#fff"],
  364. statusBarFontColor: '#1A1A1A',
  365. },
  366. status: "more",
  367. params: { //分页
  368. page: 1,
  369. limit: 10,
  370. },
  371. type: null,
  372. msgList: [],
  373. loading: true,
  374. noData: false,
  375. totalPage: null,
  376. currPage: 1,
  377. listArr: [],
  378. imgUrl: this.$mConfig.staticUrl
  379. }
  380. },
  381. onLoad(options) {
  382. this.getType(options.type)
  383. this.type = options.type
  384. this.delMsg(options.type)
  385. this.config.title = options.name
  386. },
  387. //上拉加载
  388. onReachBottom(e) {
  389. // this.status='loading'
  390. if (this.totalPage <= this.currPage) {
  391. this.status = "noMore";
  392. } else {
  393. this.status = "more"
  394. this.params.page++
  395. this.getType(this.type)
  396. }
  397. },
  398. //下拉刷新
  399. onPullDownRefresh() {
  400. this.rest()
  401. this.getType(this.type)
  402. },
  403. methods: {
  404. goToGbOrderDetails(item) {
  405. //活动消息
  406. if (this.type == 0) {
  407. let activityType = item.message_body.activity_type
  408. if (activityType == 1) {
  409. uni.navigateTo({
  410. url: "../../research/nearby/timeLimit"
  411. })
  412. }
  413. if (activityType == 2) {
  414. uni.navigateTo({
  415. url: "../../research/homepage/groupList"
  416. })
  417. }
  418. }
  419. //支付消息
  420. if (this.type == 1) {
  421. console.log(item)
  422. let goodsType = item.message_body.goods_type
  423. if (goodsType == 0) {
  424. let id = item.message_body.order_id
  425. uni.navigateTo({
  426. url: `../../order/orderList/orderDetails?id=${id}&status=pay`
  427. })
  428. //普通商品完成
  429. }
  430. if (goodsType == 1) {
  431. let id = item.message_body.order_id
  432. console.log(id)
  433. uni.navigateTo({
  434. url: `../../order/orderList/serviceOrderDetail?id=${id}&status=pay`
  435. })
  436. //服务详情完成
  437. }
  438. if (goodsType == 2) {
  439. let id = item.message_body.order_id
  440. console.log(item.message_body.activity_type, "message_body")
  441. if (item.message_body.activity_type == 2) {
  442. uni.navigateTo({
  443. url: "../../order/gbOrder/gbOrderDetails?id=" + id + '&status=pay' + "&groupId=" + item.message_body
  444. .goods[0].team_member_id
  445. })
  446. }
  447. //跳转秒杀详情地址还没写上去
  448. else if (item.message_body.activity_type == 1) {
  449. uni.navigateTo({
  450. url: "../../product/goods/seckillGoods?id=" + item.message_body.goods[0].goods_id
  451. })
  452. }
  453. // uni.navigateTo({
  454. // url: `../../order/orderList/orderDetails?id=${id}&status=pay`
  455. // })
  456. //秒杀详情
  457. // let activityType= item.message_body.activity_type
  458. // if(activityType == 0){
  459. // this.$mUtil.toast("暂无活动")
  460. // }
  461. // if(activityType==1){
  462. // uni.navigateTo({
  463. // url:"../../research/nearby/timeLimit"
  464. // })
  465. // }
  466. // if(activityType==2){
  467. // uni.navigateTo({
  468. // url:"../../research/homepage/groupList"
  469. // })
  470. // }
  471. //活动商品完成
  472. }
  473. //积分商品
  474. if (goodsType == 3) {
  475. let id = item.message_body.order_id
  476. console.log(item)
  477. console.log(id)
  478. uni.navigateTo({
  479. url: `../../order/orderList/orderDetails?id=${id}&status=pay`
  480. })
  481. //完成
  482. }
  483. if (goodsType == 4) {
  484. uni.navigateTo({
  485. url: "../../user/wallet/transactionDetail"
  486. })
  487. }
  488. }
  489. //物流消息
  490. if (this.type == 2) {
  491. let logisticsStatus = item.message_body.logistics_status
  492. if (logisticsStatus == 0) {
  493. let id = item.message_body.order_id
  494. console.log(id)
  495. console.log(item)
  496. uni.navigateTo({
  497. url: `../../order/orderList/orderDetails?id=${id}&status=pay`
  498. })
  499. }
  500. if (logisticsStatus == 1) {
  501. let id = item.message_body.order_id
  502. uni.navigateTo({
  503. url: `../../order/orderList/orderDetails?id=${id}&status=pay`
  504. })
  505. }
  506. }
  507. //售后消息
  508. if (this.type == 3) {
  509. let id = item.message_body.rights_order_id
  510. console.log(id)
  511. this.$http.get(`/rights/info/${id}`).then(res => {
  512. if (res && res.code == 200) {
  513. let shopid = res.data.shop_id
  514. let rightsType = res.data.rights_type
  515. let rightsRefundStatus = res.data.rights_operate_status
  516. // console.log("shopid",shopid,"rightsType" ,rightsType,"rightsRefundStatus" ,rights_operate_status,"id",id)
  517. // console.log(res)
  518. uni.navigateTo({
  519. url: "../../order/orderList/orderblackDetails?id=" + id + "&shopid=" +
  520. shopid + "&type=" + rightsType + "&status=" + rightsRefundStatus
  521. })
  522. console.log(666)
  523. }
  524. })
  525. //先全部跳售后详情
  526. }
  527. //互动消息
  528. if (this.type == 4) {
  529. let id = item.user_id
  530. let personalType = item.message_body.type
  531. // if (personalType == 0 || personalType == 2) {
  532. // let id = item.message_body.model_id
  533. // uni.navigateTo({
  534. // url: "../recommend/details?id=" + id
  535. // })
  536. // } else if (personalType == 1) {
  537. // let id = item.user_id
  538. // uni.navigateTo({
  539. // url: "../community/homepage?user_id=" + id
  540. // })
  541. // } else if (personalType == 3) {
  542. // let id = item.message_body.model_id
  543. // uni.navigateTo({
  544. // url: "./toExamine?id=" + id
  545. // })
  546. // } else if (personalType == 4) {
  547. // let id = item.message_body.model_id
  548. // uni.navigateTo({
  549. // url: "./toBusiness?id=" + id
  550. // })
  551. // }
  552. if (personalType == 4) {
  553. // let id = item.message_body.model_id
  554. uni.navigateTo({
  555. url: "/pages/user/merchant/audit"
  556. })
  557. } else if (personalType == 5) {
  558. uni.navigateTo({
  559. url: "/pages/workbench/shop/audit"
  560. })
  561. }
  562. console.log(personalType)
  563. // uni.navigateTo({
  564. // url:"../community/homepage?user_id="+id
  565. // })
  566. }
  567. // 系统消息
  568. if (this.type == 5) {
  569. console.log(item, 1111111111)
  570. if (item.message_body.type == 0) {
  571. uni.navigateTo({
  572. url: `/pages/user/regional-agency/index`
  573. })
  574. }
  575. }
  576. },
  577. //获取数据
  578. getType(type) {
  579. this.$http.get("/private/message/list/" + type, this.params).then(res => {
  580. if (res && res.code == 200) {
  581. this.loading = false
  582. uni.stopPullDownRefresh()
  583. this.msgList = this.msgList.concat(res.page.list)
  584. let newList = this.msgList.map(item => item.message_body)
  585. this.listArr = newList.map(item => item.goods)
  586. if (this.msgList.length == 0) {
  587. this.noData = true
  588. } else {
  589. this.noData = false
  590. }
  591. this.totalPage = res.page.totalPage
  592. this.currPage = res.page.currPage
  593. // console.log(11,this.totalPage)
  594. if (res.page.totalPage <= res.page.currPage) {
  595. this.status = "noMore";
  596. } else {
  597. this.status = "more"
  598. }
  599. }
  600. })
  601. },
  602. rest() {
  603. this.params.page = 1
  604. this.msgList = []
  605. },
  606. //删除页面的未读消息
  607. delMsg(type) {
  608. this.$http.post(`/private/message/read-type/${type}`).then(res => {})
  609. },
  610. }
  611. }
  612. </script>
  613. <style>
  614. page {
  615. background-color: #F5F5F5;
  616. }
  617. </style>
  618. <style scoped lang="scss">
  619. // .height76{
  620. // height: 76rpx;
  621. // }
  622. .after-sales {
  623. .after-sales-msg {
  624. background-color: #FFFFFF;
  625. border-radius: 18rpx;
  626. .article {
  627. display: flex;
  628. .article-left {
  629. padding-left: 30rpx;
  630. padding-bottom: 62rpx;
  631. image {
  632. width: 165rpx;
  633. height: 156rpx;
  634. border-radius: 18rpx;
  635. overflow: hidden;
  636. }
  637. }
  638. .article-right {
  639. margin-left: 30rpx;
  640. padding-right: 30rpx;
  641. display: flex;
  642. display: flex;
  643. flex-direction: column;
  644. justify-content: space-between;
  645. padding-bottom: 70rpx;
  646. .msg-title {
  647. color: #1A1A1A;
  648. font-weight: 400;
  649. font-size: 24rpx;
  650. }
  651. .specifications {
  652. font-size: 22rpx;
  653. color: #999999;
  654. font-weight: 400;
  655. line-height: 24rpx;
  656. margin-top: 4rpx;
  657. }
  658. .refund {
  659. color: #1A1A1A;
  660. font-size: 26rpx;
  661. font-weight: 400;
  662. margin-top: 16rpx;
  663. }
  664. }
  665. }
  666. .multigraph {
  667. display: flex;
  668. image {
  669. margin-left: 20rpx;
  670. width: 200rpx;
  671. height: 200rpx;
  672. border-radius: 18rpx;
  673. }
  674. }
  675. .refund-amount {
  676. text-align: right;
  677. margin-top: 60rpx;
  678. padding-bottom: 34rpx;
  679. font-size: 26rpx;
  680. font-weight: 400;
  681. color: #1A1A1A;
  682. margin-right: 30rpx;
  683. }
  684. .title {
  685. padding: 44rpx 30rpx 22rpx 30rpx;
  686. font-size: 28rpx;
  687. font-weight: 400;
  688. color: #1A1A1A;
  689. }
  690. }
  691. .box {
  692. display: flex;
  693. justify-content: center;
  694. .time {
  695. font-size: 22rpx;
  696. font-weight: 400;
  697. color: #666666;
  698. line-height: 30rpx;
  699. padding: 10rpx 20rpx;
  700. margin: 40rpx 0;
  701. border-radius: 24rpx;
  702. background-color: #e3e3e3;
  703. }
  704. }
  705. }
  706. .middle {
  707. padding: 0 30rpx;
  708. .item {
  709. .box {
  710. display: flex;
  711. justify-content: center;
  712. .time {
  713. font-size: 22rpx;
  714. color: #666666;
  715. font-weight: 400;
  716. background-color: #e3e3e3;
  717. padding: 10rpx 20rpx;
  718. border-radius: 24rpx;
  719. margin: 40rpx 0;
  720. }
  721. }
  722. .content {
  723. overflow: hidden;
  724. padding: 44rpx 30rpx;
  725. // padding: 44rpx 0;
  726. background-color: #FFFFFF;
  727. border-radius: 18rpx;
  728. .bottom-time {
  729. font-size: 24rpx;
  730. color: #999999;
  731. font-weight: 400;
  732. }
  733. .logistics-top {
  734. font-size: 28rpx;
  735. color: #1A1A1A;
  736. font-weight: 400;
  737. }
  738. .logistics-box {
  739. margin-top: 22rpx;
  740. display: flex;
  741. .logistics-left {
  742. image {
  743. border-radius: 8rpx;
  744. width: 156rpx;
  745. height: 156rpx;
  746. }
  747. }
  748. .logistics-right {
  749. margin-left: 32rpx;
  750. display: flex;
  751. flex-direction: column;
  752. justify-content: space-between;
  753. .logistics-right-content {
  754. color: #1A1A1A;
  755. font-size: 26rpx;
  756. font-weight: 400;
  757. margin-bottom: 8rpx;
  758. text {
  759. color: #999999;
  760. margin-left: 16rpx;
  761. }
  762. }
  763. .logistics-right-bottom {
  764. font-size: 22rpx;
  765. color: #999999;
  766. font-weight: 400;
  767. }
  768. }
  769. }
  770. .bottom-box {
  771. text-align: right;
  772. display: flex;
  773. align-items: flex-end;
  774. float: right;
  775. .money {
  776. color: #FF0000;
  777. font-size: 32rpx;
  778. font-weight: Bold;
  779. }
  780. }
  781. .title {
  782. font-size: 28rpx;
  783. color: #1A1A1A;
  784. font-weight: 400;
  785. margin-bottom: 26rpx;
  786. }
  787. .label {
  788. font-weight: 700;
  789. }
  790. .small-box {
  791. margin-bottom: 60rpx;
  792. display: flex;
  793. .small-left {
  794. overflow: hidden;
  795. image {
  796. border-radius: 10rpx;
  797. width: 200rpx;
  798. height: 200rpx;
  799. }
  800. }
  801. .small-right {
  802. display: flex;
  803. flex-direction: column;
  804. height: 100%;
  805. justify-content: space-between;
  806. margin-left: 30rpx;
  807. .small-top {
  808. // flex: 1;
  809. font-size: 28rpx;
  810. line-height: 40rpx;
  811. color: #1A1A1A;
  812. font-weight: 400;
  813. }
  814. .specifications {
  815. font-size: 22rpx;
  816. color: #999999;
  817. font-weight: 400;
  818. margin-bottom: 14rpx;
  819. }
  820. .price {
  821. display: flex;
  822. color: #1A1A1A;
  823. font-size: 26rpx;
  824. font-weight: 400;
  825. }
  826. }
  827. }
  828. .single-data {
  829. overflow: hidden;
  830. .img-box {
  831. height: 230rpx;
  832. padding: 0 30rpx;
  833. }
  834. .single-img {
  835. display: flex;
  836. flex-wrap: nowrap;
  837. overflow: hidden;
  838. margin-left: 15rpx;
  839. .goods-img {
  840. width: 200rpx;
  841. height: 200rpx;
  842. // padding: 0 5rpx;
  843. border-radius: 10rpx;
  844. // margin-left: 10rpx;
  845. }
  846. }
  847. .single-img:first-child {
  848. margin-left: 0;
  849. }
  850. .single-bottom {
  851. float: right;
  852. text-align: right;
  853. margin-right: 40rpx;
  854. margin-top: 60rpx;
  855. display: flex;
  856. align-items: baseline;
  857. .money {
  858. color: #FF0000;
  859. font-size: 32rpx;
  860. font-weight: bold;
  861. }
  862. }
  863. }
  864. .image {
  865. image {
  866. width: 630rpx;
  867. height: 250rpx;
  868. border-radius: 15rpx;
  869. }
  870. }
  871. }
  872. }
  873. }
  874. .event-details {
  875. background-color: #F5F5F5;
  876. }
  877. </style>