order-history.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  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. clubID:'',
  45. serviceProviderId:'',
  46. isEmpty:false,
  47. nomoreText: '上拉显示更多',
  48. pageNum:1,
  49. pageSize:10,
  50. hasNextPage:false,
  51. loadding: false,
  52. pullUpOn: true,
  53. pullFlag: true,
  54. allowDataStatus:true,
  55. wrapperHeight:'100%',
  56. scrollHeight:'',
  57. deleteAddressId:'',
  58. currPage:'',//当前页面
  59. prevPage:'',//上一个页面
  60. tabCurrentIndex:0,
  61. historyList:[],
  62. }
  63. },
  64. onLoad(option){
  65. this.clubID = option.clubID
  66. },
  67. methods: {
  68. inithistoryList(){
  69. this.$api.getComStorage('orderUserInfo').then((resolve) =>{
  70. let params = {clubID:resolve.clubID,serviceProviderId:this.serviceProviderId,pageNum:1,pageSize:this.pageSize};
  71. getSellerClubOrderList(params).then(response =>{
  72. let responseData = response.data
  73. if(responseData.results&&responseData.results.length > 0){
  74. this.isEmpty = false
  75. this.hasNextPage = response.data.hasNextPage
  76. this.historyList =responseData.results
  77. this.pullFlag = false;
  78. setTimeout(()=>{this.pullFlag = true;},500)
  79. if(this.hasNextPage){
  80. this.pullUpOn = false
  81. this.nomoreText = '上拉显示更多'
  82. }else{
  83. this.pullUpOn = true
  84. this.loadding = false
  85. this.nomoreText = '已至底部'
  86. }
  87. }else{
  88. this.isEmpty = true
  89. }
  90. }).catch(response =>{
  91. this.$util.msg(response.msg,2000)
  92. })
  93. })
  94. },
  95. getOnReachBottomData(){
  96. this.pageNum+=1
  97. this.$api.getComStorage('orderUserInfo').then((resolve) =>{
  98. let params = {clubID:resolve.clubID,serviceProviderId:this.serviceProviderId,pageNum:this.pageNum,pageSize:this.pageSize};
  99. getSellerClubOrderList(params).then(response =>{
  100. let responseData = response.data
  101. if(responseData.results&&responseData.results.length > 0){
  102. this.hasNextPage = response.data.hasNextPage
  103. this.historyList = this.historyList.concat(responseData.results)
  104. this.pullFlag = false;// 防上拉暴滑
  105. setTimeout(()=>{this.pullFlag = true;},500)
  106. if(this.hasNextPage){
  107. this.pullUpOn = false
  108. this.nomoreText = '上拉显示更多'
  109. }else{
  110. this.pullUpOn = false
  111. this.loadding = false
  112. this.nomoreText = '已至底部'
  113. }
  114. }
  115. }).catch(response =>{
  116. this.$util.msg(response.msg,2000)
  117. })
  118. })
  119. },
  120. orderPriceToFixed (n){
  121. let price ='';
  122. price = n.toFixed(2);
  123. return price
  124. },
  125. //订单状态文字和颜色
  126. orderStateExp (state){
  127. let stateText = '',
  128. stateTextObject={
  129. 0:'待确认',
  130. 4:'交易完成',
  131. 5:'订单完成',
  132. 6:'已关闭',
  133. 7:'交易全退',
  134. 77:'交易全退',
  135. 11:'待付款待发货',
  136. 12:'待付款部分发货',
  137. 13:'待付款已发货',
  138. 21:'部分付款待发货',
  139. 22:'部分付款部分发货',
  140. 23:'部分付款已发货',
  141. 31:'已付款待发货',
  142. 32:'已付款部分发货',
  143. 33:'已付款已发货',
  144. 111:'待付款待发货',
  145. }
  146. Object.keys(stateTextObject).forEach(key => {
  147. if(key == state){
  148. stateText = stateTextObject[key]
  149. }
  150. })
  151. return stateText;
  152. },
  153. orderDetiles(id){
  154. this.$api.navigateTo(`/market/pages/order/order-details?type=confim&orderID=${id}`)
  155. }
  156. },
  157. onReachBottom() {
  158. if(this.hasNextPage){
  159. this.loadding = true
  160. this.pullUpOn = true
  161. this.getOnReachBottomData()
  162. }
  163. },
  164. onShow() {
  165. this.$api.getStorage().then((resolve) =>{
  166. this.serviceProviderId = resolve.serviceProviderID
  167. this.pageNum = 1;
  168. this.inithistoryList();
  169. })
  170. }
  171. }
  172. </script>
  173. <style lang='scss'>
  174. page {
  175. height: auto;
  176. }
  177. page,.container{
  178. /* padding-bottom: 120upx; */
  179. background: #F7F7F7;
  180. border-top: 1px solid #EBEBEB;
  181. }
  182. .container{
  183. position: relative;
  184. }
  185. .history-main{
  186. .list{
  187. display: flex;
  188. align-items: center;
  189. width: 702rpx;
  190. height: auto;
  191. padding: 24rpx;
  192. background: #FFFFFF;
  193. position: relative;
  194. border-bottom: 1px solid #EBEBEB;
  195. .list-left{
  196. flex: 7;
  197. .list-p{
  198. line-height: 58rpx;
  199. font-size: $font-size-26;
  200. color: $text-color;
  201. text-align: left;
  202. .txt{
  203. margin-left: 20rpx;
  204. }
  205. .tag{
  206. display: inline-block;
  207. width: 60rpx;
  208. height: 28rpx;
  209. line-height: 28rpx;
  210. font-size: $font-size-20;
  211. color: #FFFFFF;
  212. background: $btn-confirm;
  213. text-align: center;
  214. border-radius: 14rpx;
  215. margin-left: 20rpx;
  216. }
  217. }
  218. }
  219. .list-opea{
  220. flex: 3;
  221. color: #166CE1;
  222. align-items: center;
  223. display: flex;
  224. flex-direction: column;
  225. .opea-p{
  226. line-height: 70rpx;
  227. font-size: $font-size-24;
  228. color: #E11616;
  229. text-align: right;
  230. }
  231. .opea-type-dell{
  232. width: 160rpx;
  233. height: 68rpx;
  234. line-height: 68rpx;
  235. font-size: $font-size-24;
  236. text-align: center;
  237. color: #FFFFFF;
  238. border-radius: 14rpx;
  239. background: #166CE1;
  240. margin-top: 24rpx;
  241. }
  242. }
  243. }
  244. }
  245. </style>