index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515
  1. <!-- 我的订单 -->
  2. <template>
  3. <view class="order">
  4. <view class="tabs">
  5. <u-tabs :list="tabLists" lineWidth="40" :current="current" lineHeight="8" :lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
  6. color: '#0D121A',
  7. fontSize: '32rpx',
  8. fontWeight: 'bold',
  9. transform: 'scale(1.05)'
  10. }" :inactiveStyle="{
  11. color: '#9EA3B1',
  12. fontSize: '28rpx',
  13. transform: 'scale(1)'
  14. }" itemStyle="padding-left: 18px; padding-right: 18px; height: 56px;" @click="tabsChange">
  15. </u-tabs>
  16. </view>
  17. <view class="content">
  18. <mescroll-body :height="`calc(100% - 24rpx)`" class="custom-height" ref="mescrollRef" @down="downCallback"
  19. :up="upOption" @up="upCallback">
  20. <view class="order-list" v-if="arrList && arrList.length">
  21. <view class="tab-content" v-for="(item, index) in arrList" :key="index" @click="goOrderDetail(item)">
  22. <view class="order-top flex-start">
  23. <text class="name">{{ item.packageName }}({{ item.quantity }}条视频)</text>
  24. <text v-if="item.paymentStatus==='CANCELLED'" class="status cancel">{{
  25. item.paymentStatus | orderStatus
  26. }}
  27. </text>
  28. <text v-else-if="item.paymentStatus==='REFUNDED'" class="status cancel">
  29. {{ item.paymentStatus | orderStatus }}
  30. </text>
  31. <text v-else class="status color">{{ item.paymentStatus | orderStatus }}</text>
  32. </view>
  33. <view class="order-middle flex-between-no-center">
  34. <view class="order-middle-left">
  35. <view class="fs28 mt-4 fw400" v-for="(content, contentIndex) in item.packageContents"
  36. :key="contentIndex">{{ content }}
  37. </view>
  38. </view>
  39. <view class="order-middle-right flex-start" v-if="item.paymentStatus==='WAIT_PAYMENT'">
  40. <view class="right-label fs24">应付款:</view>
  41. <view class="fs28 fw ml-6"> ¥{{ item.totalAmount }}</view>
  42. </view>
  43. <view class="order-middle-right" v-if="item.paymentStatus==='SHOOTING'">
  44. <view class="progress-bar">
  45. <view class="progress" :style="{ width: (item.completedQuantity/item.quantity)*100+ '%' }">
  46. {{ item.completedQuantity }}/{{item.quantity}}
  47. </view>
  48. </view>
  49. <!-- <view class="progress-container">{{item.completedQuantity}}/{{item.quantity}}</view>-->
  50. </view>
  51. <view class="order-middle-right cancel flex-start" v-if="item.paymentStatus==='REFUNDED'">
  52. <view class="right-label fs24 ">已退款</view>
  53. <view class="fs28 fw ml-6"> ¥{{ item.totalAmount }}</view>
  54. </view>
  55. </view>
  56. <view v-if="item.paymentStatus==='WAIT_PAYMENT'" class="order-bottom flex-between">
  57. <view class="order-bottom-left">
  58. </view>
  59. <view class="order-bottom-right flex">
  60. <view class="btn btn1 p2" @click.stop="cancelOrder(item.orderId)">取消</view>
  61. <view class="btn btn2 p1" @click.stop="submitOrder(item)">支付</view>
  62. <!-- <view class="btn3">寄样</view> -->
  63. </view>
  64. </view>
  65. <view v-else class="order-bottom flex-between">
  66. <view class="flex-start">
  67. <view class="fs24">实付款</view>
  68. <view class="fs28 fw ml-6"> ¥{{ item.totalAmount }}</view>
  69. </view>
  70. <view class="order-bottom-right flex">
  71. <view class="btn btn1 p2" v-if="item.paymentStatus==='WAIT_PAYMENT'" @click.stop="cancelOrder(item.orderId)">
  72. 取消
  73. </view>
  74. <view class="btn btn1 p2" v-if="item.paymentStatus==='WAIT_SEND'" @click.stop="cancelOrder(item.orderId)">
  75. 取消
  76. </view>
  77. <view class="btn btn1 p2" v-if="item.paymentStatus==='WAIT_ORDER'" @click.stop="cancelOrder(item.orderId)">
  78. 取消
  79. </view>
  80. <!-- <view v-if="item.paymentStatus==='WAIT_SEND'" class="btn btn1 p2 ml-6 btn-theme">寄样</view> -->
  81. <view class="btn btn1 p2" v-if="item.paymentStatus==='SHOOTING'" @click.stop="aftermarketOrder(item.orderId)">申请售后
  82. </view>
  83. <view class="btn btn1 p2" v-if="item.paymentStatus==='DELIVERED'"
  84. @click.stop="aftermarketOrder(item.orderId)">申请售后
  85. </view>
  86. <view class="btn btn1 p2" v-if="item.paymentStatus==='WAIT_CHECK'"
  87. @click.stop="aftermarketOrder(item.orderId)">申请售后
  88. </view>
  89. <view class="btn btn1 p2" v-if="item.paymentStatus==='AFTER_SALE'"
  90. @click.stopk="cancelAftermarketOrder(item.orderId)">撤回申请
  91. </view>
  92. <view class="btn btn1 p2 ml-6 btn-theme" v-if="item.paymentStatus==='WAIT_CHECK'"
  93. @click.stop="checkOrder(item.orderId)">确认验收
  94. </view>
  95. </view>
  96. </view>
  97. </view>
  98. </view>
  99. <no-data :top="230" :statusType="1" @buttonHandle="buttonHandle" tipsText="暂无记录" v-if="!isInit && !arrList.length"></no-data>
  100. </mescroll-body>
  101. </view>
  102. </view>
  103. </template>
  104. <script>
  105. import MescrollMixin from "@/plugins/mescroll/components/mescroll-uni/mescroll-mixins.js";
  106. import MescrollBody from '@/plugins/mescroll/components/mescroll-uni/mescroll-uni.vue';
  107. import {
  108. aftermarketOrder,
  109. cancelAftermarketOrder,
  110. checkOrder,
  111. cancelOrder,
  112. getOrderListPage,
  113. updateOrder
  114. } from "../../apis/order";
  115. import {submitOrder} from "../../apis";
  116. export default {
  117. mixins: [MescrollMixin],
  118. components: {
  119. MescrollBody
  120. },
  121. data() {
  122. return {
  123. current: 0,
  124. page: 1,
  125. limit: 10,
  126. lineBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_line.png',
  127. timeImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_time.png',
  128. arrList: [],
  129. isInit: true,
  130. downOption: {
  131. auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
  132. },
  133. upOption: {
  134. page: {
  135. num: 0,
  136. size: 10 // 每页数据的数量,默认10
  137. },
  138. noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
  139. textNoMore: '- 没有更多了 -'
  140. },
  141. paymentStatus: '',
  142. tabLists: [
  143. {name: '全部', value: ''},
  144. {name: '待付款', value: 'WAIT_PAYMENT'},
  145. {name: '待接单', value: 'WAIT_ORDER'},
  146. // {name: '待寄样', value: 'WAIT_SEND'},
  147. {name: '拍摄中', value: 'SHOOTING'},
  148. {name: '待验收', value: 'WAIT_CHECK'},
  149. {name: '已交付', value: 'DELIVERED'},
  150. {name: '售后中', value: 'AFTER_SALE'},
  151. {name: '已取消', value: 'CANCELLED'},
  152. {name: '已退款', value: 'REFUNDED'}]
  153. };
  154. },
  155. computed: {},
  156. watch: {},
  157. onShow() {
  158. // this.mescroll.upOption.page.num = 1;
  159. this.arrList = [];
  160. if (this.mescroll) {
  161. this.mescroll.resetUpScroll(); // 触发上拉加载
  162. }
  163. },
  164. onLoad(options) {
  165. if(options.status) this.paymentStatus = options.status
  166. if(options.current) this.current = options.current
  167. // this.getOrderListPage()
  168. },
  169. methods: {
  170. goOrderDetail(item){
  171. uni.navigateTo({
  172. url: '/pages/order/orderDetail?orderId='+item.orderId
  173. })
  174. },
  175. submitOrder(params) {
  176. submitOrder({
  177. ...params
  178. }).then((res) => {
  179. // 检查是否在微信浏览器中
  180. if (typeof WeixinJSBridge === 'undefined') {
  181. if (document.addEventListener) {
  182. document.addEventListener('WeixinJSBridgeReady', () => {
  183. this.invokePayment(res);
  184. }, false);
  185. } else if (document.attachEvent) {
  186. document.attachEvent('WeixinJSBridgeReady', () => {
  187. this.invokePayment(res);
  188. });
  189. document.attachEvent('onWeixinJSBridgeReady', () => {
  190. this.invokePayment(res);
  191. });
  192. }
  193. } else {
  194. this.invokePayment(res);
  195. }
  196. })
  197. },
  198. invokePayment(rePayInfo) {
  199. WeixinJSBridge.invoke(
  200. 'getBrandWCPayRequest',
  201. {
  202. appId: rePayInfo.appid,
  203. timeStamp: rePayInfo.timeStamp,
  204. nonceStr: rePayInfo.nonceStr,
  205. package: rePayInfo.packages,
  206. signType: rePayInfo.signType,
  207. paySign: rePayInfo.sign
  208. },
  209. (res) => {
  210. if (res.err_msg === 'get_brand_wcpay_request:ok') {
  211. uni.navigateTo({
  212. url: '/pages/order/success?orderId=' + rePayInfo.orderId
  213. })
  214. } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
  215. uni.showToast({
  216. title: '用户取消了支付',
  217. icon: 'none'
  218. })
  219. } else {
  220. console.error('支付失败', res.errMsg);
  221. // 处理支付失败的逻辑
  222. }
  223. }
  224. );
  225. },
  226. tabsChange(item) {
  227. if(this.paymentStatus == item.value) return
  228. this.paymentStatus = item.value
  229. this.mescroll.resetUpScroll()
  230. this.mescroll.scrollTo(0, 300)
  231. },
  232. // upCallback(){
  233. // console.log('123456');
  234. // },
  235. buttonHandle() {
  236. this.mescroll.resetUpScroll()
  237. this.mescroll.scrollTo(0, 300)
  238. },
  239. upCallback(page) {
  240. getOrderListPage({
  241. paymentStatus: this.paymentStatus,
  242. page: page.num,
  243. limit: page.size,
  244. }).then(res => {
  245. // this.arrList = res.list
  246. if(res){
  247. if (page.num == 1) { //如果是第一页需手动制空列表
  248. this.arrList = res.list
  249. } else {
  250. this.arrList = this.arrList.concat(res.list) //追加新数据
  251. }
  252. this.mescroll.endSuccess(res.list.length, res.total > this.arrList.length) // 参考https://www.mescroll.com/uni.html#mescrolluni
  253. }else{
  254. this.mescroll.endErr()
  255. }
  256. this.isInit = false
  257. })
  258. },
  259. // downCallback() {
  260. // this.page = 1
  261. // // this.upCallback()
  262. // this.mescroll.endSuccess(); // 结束下拉刷新状态
  263. // },
  264. cancelOrder(orderId) {
  265. const that = this
  266. uni.showModal({
  267. title: '提示',
  268. content: '你确定要取消订单吗?',
  269. success: function (res) {
  270. if (res.confirm) {
  271. cancelOrder({
  272. orderId: Number(orderId)
  273. }).then(() => {
  274. that.mescroll.resetUpScroll()
  275. that.mescroll.scrollTo(0, 300)
  276. })
  277. } else if (res.cancel) {
  278. console.log('用户点击取消');
  279. }
  280. }
  281. });
  282. },
  283. updateOrder(orderId) {
  284. const that = this
  285. uni.showModal({
  286. title: '提示',
  287. content: '你确定要取消订单吗?',
  288. success: function (res) {
  289. if (res.confirm) {
  290. updateOrder({
  291. orderId: Number(orderId),
  292. }).then(() => {
  293. that.mescroll.resetUpScroll()
  294. that.mescroll.scrollTo(0, 300)
  295. })
  296. } else if (res.cancel) {
  297. console.log('用户点击取消');
  298. }
  299. }
  300. });
  301. },
  302. checkOrder(orderId) {
  303. const that = this
  304. uni.showModal({
  305. title: '提示',
  306. content: '你确定要验收该订单吗?',
  307. success: function (res) {
  308. if (res.confirm) {
  309. checkOrder({
  310. orderId: Number(orderId),
  311. }).then(() => {
  312. that.mescroll.resetUpScroll()
  313. that.mescroll.scrollTo(0, 300)
  314. })
  315. } else if (res.cancel) {
  316. console.log('用户点击取消');
  317. }
  318. }
  319. });
  320. },
  321. aftermarketOrder(orderId) {
  322. const that = this
  323. uni.showModal({
  324. title: '提示',
  325. content: '你确定要申请售后吗?',
  326. success: function (res) {
  327. if (res.confirm) {
  328. aftermarketOrder({
  329. orderId: Number(orderId)
  330. }).then(() => {
  331. that.mescroll.resetUpScroll()
  332. that.mescroll.scrollTo(0, 300)
  333. })
  334. } else if (res.cancel) {
  335. console.log('用户点击取消');
  336. }
  337. }
  338. });
  339. },
  340. cancelAftermarketOrder(orderId) {
  341. const that = this
  342. uni.showModal({
  343. title: '提示',
  344. content: '你确定要撤销售后吗?',
  345. success: function (res) {
  346. if (res.confirm) {
  347. cancelAftermarketOrder({
  348. orderId: Number(orderId)
  349. }).then(() => {
  350. that.mescroll.resetUpScroll()
  351. that.mescroll.scrollTo(0, 300)
  352. })
  353. } else if (res.cancel) {
  354. console.log('用户点击取消');
  355. }
  356. }
  357. });
  358. },
  359. },
  360. created() {
  361. },
  362. }
  363. </script>
  364. <style lang='scss' scoped>
  365. .order {
  366. height: 100vh;
  367. background-color: #EDEFF5;
  368. display: flex;
  369. flex-direction: column;
  370. .tabs {
  371. background-color: #FFF;
  372. padding: 0 28rpx 12rpx;
  373. }
  374. .content {
  375. flex: 1;
  376. overflow: hidden;
  377. padding: 24rpx;
  378. }
  379. .order-list {
  380. // padding: 24rpx;
  381. .tab-content {
  382. padding: 40rpx 36rpx;
  383. width: 100%;
  384. // height: 296rpx;
  385. background: #FFFFFF;
  386. border-radius: 24rpx;
  387. margin-bottom: 18rpx;
  388. .order-top {
  389. display: flex;
  390. justify-content: space-between;
  391. align-items: center;
  392. .name {
  393. font-weight: bold;
  394. font-size: 32rpx;
  395. color: #0D121A;
  396. }
  397. .status {
  398. font-size: 28rpx;
  399. color: #FF7441;
  400. }
  401. .status2 {
  402. font-size: 28rpx;
  403. color: #0D121A;
  404. }
  405. .status3 {
  406. font-size: 28rpx;
  407. color: #9EA3B1;
  408. }
  409. }
  410. .order-middle {
  411. margin-top: 32rpx;
  412. color: #0D121A;
  413. .order-middle-left {
  414. font-weight: 400;
  415. font-size: 28rpx;
  416. color: #9EA3B1;
  417. }
  418. .order-middle-right {
  419. }
  420. }
  421. .order-bottom {
  422. margin-top: 16rpx;
  423. .order-bottom-left {
  424. .time-img {
  425. margin-right: 8rpx;
  426. width: 48rpx;
  427. height: 48rpx;
  428. }
  429. .time {
  430. color: #FF7441;
  431. font-size: 24rpx;
  432. }
  433. }
  434. .order-bottom-right {
  435. .p1 {
  436. padding: 18rpx 44rpx;
  437. }
  438. .p2 {
  439. padding: 16rpx 42rpx;
  440. }
  441. }
  442. }
  443. }
  444. }
  445. }
  446. .progress-bar {
  447. width: 260rpx;
  448. background-color: #e0e0e0;
  449. border-radius: 9999px;
  450. overflow: hidden;
  451. }
  452. .progress {
  453. height: 30rpx;
  454. background-color: #FF7441;
  455. width: 0%;
  456. text-align: center;
  457. line-height: 30 rrpx;
  458. color: white;
  459. font-size: 20rpx;
  460. border-radius: 9999px;
  461. transition: width 0.5s ease;
  462. }
  463. .progress-container {
  464. width: 40rpx; /* 可按需调整宽度 */
  465. height: 20rpx; /* 可按需调整高度 */
  466. background-color: #f26522; /* 橙色,类似图中颜色,可按需调整 */
  467. border-radius: 20px; /* 圆角,让边角变圆润 */
  468. display: flex;
  469. justify-content: center;
  470. align-items: center;
  471. font-size: 20rpx; /* 文字大小,可按需调整 */
  472. color: white; /* 文字颜色 */
  473. font-weight: bold; /* 文字加粗 */
  474. }
  475. .btn{
  476. border-radius: 36rpx;
  477. }
  478. </style>