index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
  1. <!-- 我的订单 -->
  2. <template>
  3. <view class="order">
  4. <view class="tabs">
  5. <u-tabs :list="tabLists" lineWidth="40" 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="100%" 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 :statusType="2" 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. page: 1,
  124. limit: 10,
  125. lineBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_line.png',
  126. timeImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_time.png',
  127. arrList: [],
  128. isInit: false,
  129. downOption: {
  130. auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
  131. },
  132. upOption: {
  133. page: {
  134. num: 0,
  135. size: 10 // 每页数据的数量,默认10
  136. },
  137. noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
  138. empty: {
  139. tip: '暂无相关数据'
  140. }
  141. },
  142. paymentStatus: 'WAIT_PAYMENT',
  143. tabLists: [{name: '待付款', value: 'WAIT_PAYMENT'},
  144. {name: '待接单', value: 'WAIT_ORDER'},
  145. // {name: '待寄样', value: 'WAIT_SEND'},
  146. {name: '拍摄中', value: 'SHOOTING'},
  147. {name: '待验收', value: 'WAIT_CHECK'},
  148. {name: '已交付', value: 'DELIVERED'},
  149. {name: '售后中', value: 'AFTER_SALE'},
  150. {name: '已取消', value: 'CANCELLED'},
  151. {name: '已退款', value: 'REFUNDED'}]
  152. };
  153. },
  154. computed: {},
  155. watch: {},
  156. onLoad() {
  157. this.getOrderListPage()
  158. },
  159. methods: {
  160. goOrderDetail(item){
  161. uni.navigateTo({
  162. url: '/pages/order/orderDetail?orderId='+item.orderId
  163. })
  164. },
  165. submitOrder(params) {
  166. submitOrder({
  167. ...params
  168. }).then((res) => {
  169. // 检查是否在微信浏览器中
  170. if (typeof WeixinJSBridge === 'undefined') {
  171. if (document.addEventListener) {
  172. document.addEventListener('WeixinJSBridgeReady', () => {
  173. this.invokePayment(res);
  174. }, false);
  175. } else if (document.attachEvent) {
  176. document.attachEvent('WeixinJSBridgeReady', () => {
  177. this.invokePayment(res);
  178. });
  179. document.attachEvent('onWeixinJSBridgeReady', () => {
  180. this.invokePayment(res);
  181. });
  182. }
  183. } else {
  184. this.invokePayment(res);
  185. }
  186. })
  187. },
  188. invokePayment(rePayInfo) {
  189. WeixinJSBridge.invoke(
  190. 'getBrandWCPayRequest',
  191. {
  192. appId: rePayInfo.appid,
  193. timeStamp: rePayInfo.timeStamp,
  194. nonceStr: rePayInfo.nonceStr,
  195. package: rePayInfo.packages,
  196. signType: rePayInfo.signType,
  197. paySign: rePayInfo.sign
  198. },
  199. (res) => {
  200. if (res.err_msg === 'get_brand_wcpay_request:ok') {
  201. uni.navigateTo({
  202. url: '/pages/order/success?orderId=' + rePayInfo.orderId
  203. })
  204. } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
  205. uni.showToast({
  206. title: '用户取消了支付'
  207. })
  208. } else {
  209. console.error('支付失败', res.err_msg);
  210. // 处理支付失败的逻辑
  211. }
  212. }
  213. );
  214. },
  215. tabsChange(item) {
  216. this.paymentStatus = item.value
  217. this.page = 1
  218. setTimeout(() => {
  219. this.getOrderListPage()
  220. }, 200)
  221. },
  222. getOrderListPage() {
  223. getOrderListPage({
  224. paymentStatus: this.paymentStatus,
  225. page: 1,
  226. limit: 50,
  227. }).then(res => {
  228. this.arrList = res.list
  229. })
  230. },
  231. downCallback() {
  232. this.page=1
  233. this.getOrderListPage()
  234. this.mescroll.endSuccess(); // 结束下拉刷新状态
  235. },
  236. cancelOrder(orderId) {
  237. const that = this
  238. uni.showModal({
  239. title: '提示',
  240. content: '你确定要取消订单吗?',
  241. success: function (res) {
  242. if (res.confirm) {
  243. cancelOrder({
  244. orderId: Number(orderId)
  245. }).then(() => {
  246. that.arrList.splice(that.arrList.findIndex(item => item.orderId === orderId), 1)
  247. })
  248. } else if (res.cancel) {
  249. console.log('用户点击取消');
  250. }
  251. }
  252. });
  253. },
  254. updateOrder(orderId) {
  255. const that = this
  256. uni.showModal({
  257. title: '提示',
  258. content: '你确定要取消订单吗?',
  259. success: function (res) {
  260. if (res.confirm) {
  261. updateOrder({
  262. orderId: Number(orderId),
  263. }).then(() => {
  264. that.arrList.splice(that.arrList.findIndex(item => item.orderId === orderId), 1)
  265. })
  266. } else if (res.cancel) {
  267. console.log('用户点击取消');
  268. }
  269. }
  270. });
  271. },
  272. checkOrder(orderId) {
  273. const that = this
  274. uni.showModal({
  275. title: '提示',
  276. content: '你确定要验收该订单吗?',
  277. success: function (res) {
  278. if (res.confirm) {
  279. checkOrder({
  280. orderId: Number(orderId),
  281. }).then(() => {
  282. that.arrList.splice(that.arrList.findIndex(item => item.orderId === orderId), 1)
  283. })
  284. } else if (res.cancel) {
  285. console.log('用户点击取消');
  286. }
  287. }
  288. });
  289. },
  290. aftermarketOrder(orderId) {
  291. const that = this
  292. uni.showModal({
  293. title: '提示',
  294. content: '你确定要申请售后吗?',
  295. success: function (res) {
  296. if (res.confirm) {
  297. aftermarketOrder({
  298. orderId: Number(orderId)
  299. }).then(() => {
  300. that.arrList.splice(that.arrList.findIndex(item => item.orderId === orderId), 1)
  301. })
  302. } else if (res.cancel) {
  303. console.log('用户点击取消');
  304. }
  305. }
  306. });
  307. },
  308. cancelAftermarketOrder(orderId) {
  309. const that = this
  310. uni.showModal({
  311. title: '提示',
  312. content: '你确定要撤销售后吗?',
  313. success: function (res) {
  314. if (res.confirm) {
  315. cancelAftermarketOrder({
  316. orderId: Number(orderId)
  317. }).then(() => {
  318. that.arrList.splice(that.arrList.findIndex(item => item.orderId === orderId), 1)
  319. })
  320. } else if (res.cancel) {
  321. console.log('用户点击取消');
  322. }
  323. }
  324. });
  325. },
  326. },
  327. created() {
  328. },
  329. }
  330. </script>
  331. <style lang='scss' scoped>
  332. .order {
  333. height: 100vh;
  334. background-color: #EDEFF5;
  335. display: flex;
  336. flex-direction: column;
  337. .tabs {
  338. background-color: #FFF;
  339. padding: 0 28rpx 12rpx;
  340. }
  341. .content {
  342. flex: 1;
  343. overflow: hidden;
  344. }
  345. .order-list {
  346. padding: 24rpx;
  347. .tab-content {
  348. padding: 40rpx 36rpx;
  349. width: 100%;
  350. // height: 296rpx;
  351. background: #FFFFFF;
  352. border-radius: 24rpx;
  353. margin-bottom: 18rpx;
  354. .order-top {
  355. display: flex;
  356. justify-content: space-between;
  357. align-items: center;
  358. .name {
  359. font-weight: bold;
  360. font-size: 32rpx;
  361. color: #0D121A;
  362. }
  363. .status {
  364. font-size: 28rpx;
  365. color: #FF7441;
  366. }
  367. .status2 {
  368. font-size: 28rpx;
  369. color: #0D121A;
  370. }
  371. .status3 {
  372. font-size: 28rpx;
  373. color: #9EA3B1;
  374. }
  375. }
  376. .order-middle {
  377. margin-top: 32rpx;
  378. color: #0D121A;
  379. .order-middle-left {
  380. font-weight: 400;
  381. font-size: 28rpx;
  382. color: #9EA3B1;
  383. }
  384. .order-middle-right {
  385. }
  386. }
  387. .order-bottom {
  388. margin-top: 16rpx;
  389. .order-bottom-left {
  390. .time-img {
  391. margin-right: 8rpx;
  392. width: 48rpx;
  393. height: 48rpx;
  394. }
  395. .time {
  396. color: #FF7441;
  397. font-size: 24rpx;
  398. }
  399. }
  400. .order-bottom-right {
  401. .p1 {
  402. padding: 18rpx 44rpx;
  403. }
  404. .p2 {
  405. padding: 16rpx 42rpx;
  406. }
  407. }
  408. }
  409. }
  410. }
  411. }
  412. .progress-bar {
  413. width: 260rpx;
  414. background-color: #e0e0e0;
  415. border-radius: 9999px;
  416. overflow: hidden;
  417. }
  418. .progress {
  419. height: 30rpx;
  420. background-color: #FF7441;
  421. width: 0%;
  422. text-align: center;
  423. line-height: 30 rrpx;
  424. color: white;
  425. font-size: 20rpx;
  426. border-radius: 9999px;
  427. transition: width 0.5s ease;
  428. }
  429. .progress-container {
  430. width: 40rpx; /* 可按需调整宽度 */
  431. height: 20rpx; /* 可按需调整高度 */
  432. background-color: #f26522; /* 橙色,类似图中颜色,可按需调整 */
  433. border-radius: 20px; /* 圆角,让边角变圆润 */
  434. display: flex;
  435. justify-content: center;
  436. align-items: center;
  437. font-size: 20rpx; /* 文字大小,可按需调整 */
  438. color: white; /* 文字颜色 */
  439. font-weight: bold; /* 文字加粗 */
  440. }
  441. </style>