index.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. <template>
  2. <view class="container">
  3. <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback"
  4. :up="upOption" @up="upCallback">
  5. <!-- tab栏 -->
  6. <u-tabs :list="tabs" :is-scroll="false" :current="curTab" active-color="#FA2209" :duration="0.2"
  7. @change="onChangeTab" />
  8. <!-- 退款/售后单 -->
  9. <view class="widget-list">
  10. <view class="widget-detail" v-for="(item, index) in list.content" :key="index">
  11. <view class="row-block dis-flex flex-y-center">
  12. <view class="flex-box">{{ item.createTime }}</view>
  13. <view class="flex-box t-r">
  14. <text class="col-m">{{ item.statusText }}</text>
  15. </view>
  16. </view>
  17. <view class="detail-goods row-block dis-flex" v-for="(goodsInfo, key) in item.orderInfo.goods" :key="key" @click.stop="handleTargetDetail(item.id)">
  18. <view class="goods-image">
  19. <image class="image" :src="goodsInfo.image" mode="aspectFit"></image>
  20. </view>
  21. <view class="goods-right flex-box">
  22. <view class="goods-name">
  23. <text class="twolist-hidden">{{ goodsInfo.name }}</text>
  24. </view>
  25. <view class="goods-props clearfix">
  26. <view class="goods-props-item" v-for="(props, idx) in goodsInfo.specList" :key="idx">
  27. <text>{{ props.specName }}</text>
  28. </view>
  29. </view>
  30. <view class="goods-num t-r">
  31. <text class="f-26 col-8">×{{ goodsInfo.num }}</text>
  32. </view>
  33. </view>
  34. </view>
  35. <view class="detail-order row-block">
  36. <view class="item dis-flex flex-x-end flex-y-center">
  37. <text class="">售后金额:</text>
  38. <text class="col-m">¥{{ item.amount }}</text>
  39. </view>
  40. </view>
  41. <view class="detail-operate row-block dis-flex flex-x-end flex-y-center">
  42. <view class="detail-btn btn-detail" @click.stop="handleTargetDetail(item.id)">查看详情</view>
  43. </view>
  44. </view>
  45. </view>
  46. </mescroll-body>
  47. </view>
  48. </template>
  49. <script>
  50. import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
  51. import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
  52. import Empty from '@/components/empty'
  53. import { getEmptyPaginateObj, getMoreListData } from '@/utils/app'
  54. import * as RefundApi from '@/api/refund'
  55. // 每页记录数量
  56. const pageSize = 15
  57. // tab栏数据
  58. const tabs = [{
  59. name: '全部',
  60. value: 0
  61. }, {
  62. name: '处理中',
  63. value: 1
  64. }]
  65. export default {
  66. components: {
  67. MescrollBody,
  68. Empty
  69. },
  70. mixins: [MescrollMixin],
  71. data() {
  72. return {
  73. // 订单列表数据
  74. list: getEmptyPaginateObj(),
  75. // 正在加载
  76. isLoading: false,
  77. // tabs栏数据
  78. tabs,
  79. // 当前标签索引
  80. curTab: 0,
  81. // 上拉加载配置
  82. upOption: {
  83. // 首次自动执行
  84. auto: true,
  85. // 每页数据的数量; 默认10
  86. page: { size: pageSize },
  87. // 数量要大于2条才显示无更多数据
  88. noMoreSize: 2,
  89. // 空布局
  90. empty: {
  91. tip: '亲,暂无售后记录'
  92. }
  93. }
  94. }
  95. },
  96. /**
  97. * 生命周期函数--监听页面加载
  98. */
  99. onLoad(options) {
  100. // empty
  101. },
  102. /**
  103. * 生命周期函数--监听页面显示
  104. */
  105. onShow() {
  106. this.onRefreshList();
  107. },
  108. methods: {
  109. /**
  110. * 上拉加载的回调 (页面初始化时也会执行一次)
  111. * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
  112. * @param {Object} page
  113. */
  114. upCallback(page) {
  115. const app = this
  116. // 设置列表数据
  117. app.getRefundList(page.num)
  118. .then(list => {
  119. const curPageLen = list.content.length;
  120. const totalSize = list.totalElements;
  121. app.mescroll.endBySize(curPageLen, totalSize);
  122. })
  123. .catch(() => app.mescroll.endErr())
  124. },
  125. // 获取退款/售后单列表
  126. getRefundList(pageNo = 1) {
  127. const app = this
  128. return new Promise((resolve, reject) => {
  129. RefundApi.list({ status: app.getTabValue(), page: pageNo }, { load: false })
  130. .then(result => {
  131. // 合并新数据
  132. const newList = result.data;
  133. app.list.content = getMoreListData(newList, app.list, pageNo);
  134. resolve(newList)
  135. })
  136. })
  137. },
  138. // 切换标签项
  139. onChangeTab(index) {
  140. const app = this;
  141. // 设置当前选中的标签
  142. app.curTab = index;
  143. // 刷新售后单列表
  144. app.onRefreshList();
  145. },
  146. // 刷新订单列表
  147. onRefreshList() {
  148. this.list = getEmptyPaginateObj();
  149. setTimeout(() => {
  150. this.mescroll.resetUpScroll();
  151. }, 120)
  152. },
  153. // 获取当前标签项的值
  154. getTabValue() {
  155. return this.tabs[this.curTab].value;
  156. },
  157. // 跳转到售后单详情页
  158. handleTargetDetail(refundId) {
  159. this.$navTo('pages/refund/detail', { refundId })
  160. },
  161. // 点击跳转到首页
  162. onTargetIndex() {
  163. this.$navTo('pages/user/index');
  164. }
  165. }
  166. }
  167. </script>
  168. <style lang="scss" scoped>
  169. .widget-detail {
  170. box-sizing: border-box;
  171. background: #fff;
  172. margin-bottom: 20rpx;
  173. .row-block {
  174. padding: 0 20rpx;
  175. min-height: 70rpx;
  176. }
  177. .detail-goods {
  178. padding: 20rpx;
  179. background: #f9f9f9;
  180. .goods-image {
  181. margin-right: 20rpx;
  182. .image {
  183. display: block;
  184. width: 150rpx;
  185. height: 150rpx;
  186. border-radius: 6rpx;
  187. }
  188. }
  189. .goods-right {
  190. padding: 15rpx 0;
  191. }
  192. .goods-name {
  193. margin-bottom: 10rpx;
  194. }
  195. .goods-props {
  196. margin-top: 14rpx;
  197. height: 40rpx;
  198. color: #ababab;
  199. font-size: 24rpx;
  200. overflow: hidden;
  201. .goods-props-item {
  202. display: inline-block;
  203. margin-right: 14rpx;
  204. padding: 4rpx 16rpx;
  205. border-radius: 12rpx;
  206. background-color: #F5F5F5;
  207. width: auto;
  208. }
  209. }
  210. }
  211. .detail-operate {
  212. padding-bottom: 20rpx;
  213. .detail-btn {
  214. border-radius: 4px;
  215. border: 1rpx solid #ccc;
  216. padding: 8rpx 20rpx;
  217. font-size: 28rpx;
  218. color: #555;
  219. margin-left: 10rpx;
  220. }
  221. }
  222. .detail-order {
  223. padding: 10rpx 20rpx;
  224. font-size: 26rpx;
  225. line-height: 50rpx;
  226. height: 50rpx;
  227. .item {
  228. margin-bottom: 10rpx;
  229. &:last-child {
  230. margin-bottom: 0;
  231. }
  232. }
  233. }
  234. }
  235. // 空数据按钮
  236. .empty-ipt {
  237. width: 220rpx;
  238. margin: 10px auto;
  239. font-size: 28rpx;
  240. height: 64rpx;
  241. line-height: 64rpx;
  242. text-align: center;
  243. color: #fff;
  244. border-radius: 5rpx;
  245. background: linear-gradient(to right, $fuint-theme, $fuint-theme);
  246. }
  247. </style>