order-history.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. <template>
  2. <view class="container history clearfix">
  3. <view class="history-main">
  4. <view v-if="isEmpty" class="empty-container">
  5. <image class="club-empty-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AJZvwAAGWWe4DnXk371.png" mode="aspectFit"></image>
  6. <view class="txt">暂无订单数据</view>
  7. </view>
  8. <view v-else class="history-list">
  9. <scroll-view scroll-y="true" >
  10. <view class="list" v-for="(item, index) in historyList" :key="index">
  11. <view class="list-left">
  12. <view class="list-p">订单号:<text class="txt">{{item.orderNo}}</text><text v-if="item.orderSubmitType == 3" class="tag">协销</text></view>
  13. <view class="list-p">总金额:<text class="txt">¥{{orderPriceToFixed(item.payTotalFee)}}</text></view>
  14. <view class="list-p">数量(赠):<text class="txt">{{item.productCount}}({{item.presentCount}})</text></view>
  15. </view>
  16. <view class="list-opea">
  17. <view class="opea-p">{{orderStateExp(item.status)}}</view>
  18. <view class="opea-type-dell" @click.stop="orderDetiles(item.orderID)">
  19. <text>查看详情</text>
  20. </view>
  21. </view>
  22. </view>
  23. <!--加载loadding-->
  24. <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
  25. <tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
  26. <!--加载loadding-->
  27. </scroll-view>
  28. </view>
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. import authorize from '@/common/config/authorize.js'
  34. import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
  35. import tuiNomore from "@/components/tui-components/nomore/nomore"
  36. import { getSellerClubOrderList } from "@/api/seller.js"
  37. export default {
  38. components:{
  39. tuiLoadmore,
  40. tuiNomore,
  41. },
  42. data() {
  43. return {
  44. serviceProviderId:'',
  45. isEmpty:false,
  46. nomoreText: '上拉显示更多',
  47. pageNum:1,
  48. pageSize:10,
  49. hasNextPage:false,
  50. loadding: false,
  51. pullUpOn: true,
  52. pullFlag: true,
  53. allowDataStatus:true,
  54. wrapperHeight:'100%',
  55. scrollHeight:'',
  56. deleteAddressId:'',
  57. currPage:'',//当前页面
  58. prevPage:'',//上一个页面
  59. tabCurrentIndex:0,
  60. historyList:[],
  61. }
  62. },
  63. onLoad(){
  64. },
  65. methods: {
  66. inithistoryList(){
  67. this.$api.getComStorage('orderUserInfo').then((resolve) =>{
  68. let params = {clubID:resolve.clubID,serviceProviderId:this.serviceProviderId,pageNum:1,pageSize:this.pageSize};
  69. getSellerClubOrderList(params).then(response =>{
  70. let responseData = response.data
  71. if(responseData.results&&responseData.results.length > 0){
  72. this.isEmpty = false
  73. this.hasNextPage = response.data.hasNextPage
  74. this.historyList =responseData.results
  75. this.pullFlag = false;
  76. setTimeout(()=>{this.pullFlag = true;},500)
  77. if(this.hasNextPage){
  78. this.pullUpOn = false
  79. this.nomoreText = '上拉显示更多'
  80. }else{
  81. this.pullUpOn = true
  82. this.loadding = false
  83. this.nomoreText = '已至底部'
  84. }
  85. }else{
  86. this.isEmpty = true
  87. }
  88. }).catch(response =>{
  89. this.$util.msg(response.msg,2000)
  90. })
  91. })
  92. },
  93. getOnReachBottomData(){
  94. this.pageNum+=1
  95. this.$api.getComStorage('orderUserInfo').then((resolve) =>{
  96. let params = {clubID:resolve.clubID,serviceProviderId:this.serviceProviderId,pageNum:this.pageNum,pageSize:this.pageSize};
  97. getSellerClubOrderList(params).then(response =>{
  98. let responseData = response.data
  99. if(responseData.results&&responseData.results.length > 0){
  100. this.hasNextPage = response.data.hasNextPage
  101. this.historyList = this.historyList.concat(responseData.results)
  102. this.pullFlag = false;// 防上拉暴滑
  103. setTimeout(()=>{this.pullFlag = true;},500)
  104. if(this.hasNextPage){
  105. this.pullUpOn = false
  106. this.nomoreText = '上拉显示更多'
  107. }else{
  108. this.pullUpOn = false
  109. this.loadding = false
  110. this.nomoreText = '已至底部'
  111. }
  112. }
  113. }).catch(response =>{
  114. this.$util.msg(response.msg,2000)
  115. })
  116. })
  117. },
  118. orderPriceToFixed (n){
  119. let price ='';
  120. price = n.toFixed(2);
  121. return price
  122. },
  123. //订单状态文字和颜色
  124. orderStateExp (state){
  125. let stateText = '',
  126. stateTextObject={
  127. 0:'待确认',
  128. 4:'交易完成',
  129. 5:'订单完成',
  130. 6:'已关闭',
  131. 7:'交易全退',
  132. 77:'交易全退',
  133. 11:'待付款待发货',
  134. 12:'待付款部分发货',
  135. 13:'待付款已发货',
  136. 21:'部分付款待发货',
  137. 22:'部分付款部分发货',
  138. 23:'部分付款已发货',
  139. 31:'已付款待发货',
  140. 32:'已付款部分发货',
  141. 33:'已付款已发货',
  142. 111:'待付款待发货',
  143. }
  144. Object.keys(stateTextObject).forEach(key => {
  145. if(key == state){
  146. stateText = stateTextObject[key]
  147. }
  148. })
  149. return stateText;
  150. },
  151. orderDetiles(id){
  152. this.$api.navigateTo(`/market/pages/order/order-details?orderID=${id}`)
  153. }
  154. },
  155. onReachBottom() {
  156. if(this.hasNextPage){
  157. this.loadding = true
  158. this.pullUpOn = true
  159. this.getOnReachBottomData()
  160. }
  161. },
  162. onShow() {
  163. this.$api.getStorage().then((resolve) =>{
  164. console.log(resolve)
  165. this.serviceProviderId = resolve.serviceProviderID
  166. this.pageNum = 1;
  167. this.inithistoryList();
  168. })
  169. }
  170. }
  171. </script>
  172. <style lang='scss'>
  173. page {
  174. height: auto;
  175. }
  176. page,.container{
  177. /* padding-bottom: 120upx; */
  178. background: #F7F7F7;
  179. border-top: 1px solid #EBEBEB;
  180. }
  181. .container{
  182. position: relative;
  183. }
  184. .history-main{
  185. .list{
  186. display: flex;
  187. align-items: center;
  188. width: 702rpx;
  189. height: auto;
  190. padding: 24rpx;
  191. background: #FFFFFF;
  192. position: relative;
  193. border-bottom: 1px solid #EBEBEB;
  194. .list-left{
  195. flex: 7.5;
  196. .list-p{
  197. line-height: 58rpx;
  198. font-size: $font-size-26;
  199. color: $text-color;
  200. text-align: left;
  201. .txt{
  202. margin-left: 20rpx;
  203. }
  204. .tag{
  205. display: inline-block;
  206. width: 60rpx;
  207. height: 28rpx;
  208. line-height: 28rpx;
  209. font-size: $font-size-20;
  210. color: #FFFFFF;
  211. background: $btn-confirm;
  212. text-align: center;
  213. border-radius: 14rpx;
  214. margin-left: 20rpx;
  215. }
  216. }
  217. }
  218. .list-opea{
  219. flex: 2.5;
  220. color: #166CE1;
  221. .opea-p{
  222. line-height: 70rpx;
  223. font-size: $font-size-24;
  224. color: #E11616;
  225. text-align: right;
  226. }
  227. .opea-type-dell{
  228. width: 160rpx;
  229. height: 68rpx;
  230. line-height: 68rpx;
  231. font-size: $font-size-24;
  232. text-align: center;
  233. color: #FFFFFF;
  234. border-radius: 14rpx;
  235. background: #166CE1;
  236. margin-top: 24rpx;
  237. }
  238. }
  239. }
  240. }
  241. </style>