index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <input type="text" v-model="searchInfo.name" @input="toInput" placeholder="搜索商品">
  6. </view>
  7. <view class="two">
  8. <tabs :tabs="tabs" @tabsChange="tabsChange">
  9. <view class="tabsList">
  10. <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
  11. <view class="list-scroll-view">
  12. <view class="list_1" v-if="tabs.active=='-0'">
  13. 全部订单
  14. </view>
  15. <view class="list_2" v-for="(item,index) in list" :key="index" v-else-if="tabs.active=='0'">
  16. <view class="status">
  17. {{item.status=='0'?'待付款':item.status=='1'?'已支付':item.status=='-1'?'取消订单':item.status=='2'?'发货中':item.status=='-2'?'已退款':item.status=='3'?'已收货':item.status=='-3'?'申请售后':item.status=='-4'?'正在售后中':item.status=='-5'?'售后已结束':'未识别'}}
  18. </view>
  19. <view class="goods" v-for="(tag,indexs) in item.goods" :key="indexs">
  20. <view class="goods_1">
  21. <view class="shopname">
  22. <text class="iconfont icon-shangdian"></text>
  23. <text>{{tag.shop_name}}</text>
  24. </view>
  25. </view>
  26. <view class="goods_2">
  27. <view class="market" v-for="(tags,indexss) in tag.goods" :key="indexss">
  28. <view class="url">
  29. <image class="image" :src="tags.goods.file&&tags.goods.file.length>0?tags.goods.file[0].url:''" mode=""></image>
  30. </view>
  31. <view class="goodsname">
  32. {{tags.name}}
  33. </view>
  34. <view class="goodsother">
  35. <view class="price">
  36. ¥{{tags.sell_money}}
  37. </view>
  38. <view class="num">
  39. ×{{tags.buy_num}}
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. <view class="other">
  46. <text>共{{item.total_detail.freight_total}}件商品</text>
  47. <text>总价¥{{item.total_detail.goods_total}}</text>
  48. </view>
  49. <view class="btn">
  50. <button class="toCancel" v-if="item.status=='0'" type="default" size="mini" @click="toCancel(item)">取消订单</button>
  51. <button class="toPay" v-if="item.status=='0'" type="default" size="mini" @click="toPay(item)">付款</button>
  52. <button class="toAfter" v-if="item.status=='3'" type="default" size="mini" @click="toAfter(item)">申请售后</button>
  53. <button class="toRefund" v-if="item.status=='3'" type="default" size="mini" @click="toRefund(item)">申请退款</button>
  54. </view>
  55. </view>
  56. <view class="list_2" v-for="(item,index) in list" :key="index" v-else>
  57. <view class="status">
  58. {{item.status=='0'?'待付款':item.status=='1'?'已支付':item.status=='-1'?'取消订单':item.status=='2'?'发货中':item.status=='-2'?'已退款':item.status=='3'?'已收货':item.status=='-3'?'申请售后':item.status=='-4'?'正在售后中':item.status=='-5'?'售后已结束':'未识别'}}
  59. </view>
  60. <view class="goods" v-for="(tag,indexs) in item.order.goods" :key="indexs">
  61. <view class="goods_1">
  62. <view class="shopname">
  63. <text class="iconfont icon-shangdian"></text>
  64. <text>{{tag.shop_name}}</text>
  65. </view>
  66. </view>
  67. <view class="goods_2">
  68. <view class="market" v-for="(tags,indexss) in tag.goods" :key="indexss">
  69. <view class="url">
  70. <image class="image" :src="tags.goods.file&&tags.goods.file.length>0?tags.goods.file[0].url:''" mode=""></image>
  71. </view>
  72. <view class="goodsname">
  73. {{tags.name}}
  74. </view>
  75. <view class="goodsother">
  76. <view class="price">
  77. ¥{{tags.sell_money}}
  78. </view>
  79. <view class="num">
  80. ×{{tags.buy_num}}
  81. </view>
  82. </view>
  83. </view>
  84. </view>
  85. </view>
  86. <view class="other">
  87. <text>共{{item.buy_num_total||0}}件商品</text>
  88. <text>总价¥{{item.total_detail.goods_total}}</text>
  89. </view>
  90. <view class="btn">
  91. <button class="toCancel" v-if="item.status=='0'" type="default" size="mini" @click="toCancel(item)">取消订单</button>
  92. <button class="toPay" v-if="item.status=='0'" type="default" size="mini" @click="toPay(item)">付款</button>
  93. <button class="toAfter" v-if="item.status=='3'" type="default" size="mini" @click="toAfter(item)">申请售后</button>
  94. <button class="toRefund" v-if="item.status=='3'" type="default" size="mini" @click="toRefund(item)">申请退款</button>
  95. </view>
  96. </view>
  97. </view>
  98. </scroll-view>
  99. </view>
  100. </tabs>
  101. </view>
  102. </view>
  103. </mobile-frame>
  104. </template>
  105. <script>
  106. import tabs from '@/components/tabs/index.vue';
  107. export default {
  108. components: {
  109. tabs
  110. },
  111. data() {
  112. return {
  113. user: {},
  114. status: '',
  115. searchInfo: {},
  116. tabs: {
  117. active: '0',
  118. menu: [ //菜单列表
  119. // {
  120. // title: '全部订单',
  121. // active: '-0'
  122. // },
  123. {
  124. title: '待付款',
  125. active: '0'
  126. },
  127. {
  128. title: '待发货',
  129. active: '1'
  130. },
  131. {
  132. title: '待收货',
  133. active: '2'
  134. },
  135. {
  136. title: '已收货',
  137. active: '3'
  138. }
  139. ]
  140. },
  141. list: [],
  142. total: 0,
  143. skip: 0,
  144. limit: 5,
  145. page: 0
  146. };
  147. },
  148. onLoad: function(e) {
  149. const that = this;
  150. that.$set(that, `status`, e.status);
  151. // 监听用户是否登录
  152. that.watchLogin();
  153. },
  154. onShow: function() {},
  155. methods: {
  156. // 监听用户是否登录
  157. watchLogin() {
  158. const that = this;
  159. uni.getStorage({
  160. key: 'token',
  161. success: function(res) {
  162. let user = that.$jwt(res.data);
  163. if (user) that.$set(that, `user`, user);
  164. that.$set(that.tabs, `active`, that.status);
  165. that.search();
  166. },
  167. fail: function(err) {
  168. uni.navigateTo({
  169. url: `/pages/login/index`
  170. })
  171. }
  172. });
  173. },
  174. // 查询列表
  175. async search() {
  176. const that = this;
  177. let user = that.user;
  178. let status = that.status;
  179. if (status == '-0') {
  180. } else if (status == '0') {
  181. const res = await that.$api(`/order`, 'GET', {
  182. status: '0',
  183. customer: user._id
  184. });
  185. if (res.errcode == '0') {
  186. let list = [...that.list, ...res.data];
  187. that.$set(that, `list`, list)
  188. that.$set(that, `total`, res.total)
  189. } else {
  190. uni.showToast({
  191. title: res.errmsg,
  192. });
  193. }
  194. } else {
  195. const res = await that.$api(`/orderDetail`, 'GET', {
  196. status: that.status,
  197. customer: user._id
  198. });
  199. if (res.errcode == '0') {
  200. let list = [...that.list, ...res.data];
  201. that.$set(that, `list`, list)
  202. that.$set(that, `total`, res.total)
  203. } else {
  204. uni.showToast({
  205. title: res.errmsg,
  206. });
  207. }
  208. }
  209. },
  210. // 分页
  211. toPage(e) {
  212. const that = this;
  213. let list = that.list;
  214. let limit = that.limit;
  215. if (that.total > list.length) {
  216. uni.showLoading({
  217. title: '加载中',
  218. mask: true
  219. })
  220. let page = that.page + 1;
  221. that.$set(that, `page`, page)
  222. let skip = page * limit;
  223. that.$set(that, `skip`, skip)
  224. that.search();
  225. uni.hideLoading();
  226. } else uni.showToast({
  227. title: '没有更多数据了'
  228. });
  229. },
  230. // 输入框
  231. toInput(e) {
  232. const that = this;
  233. that.$set(that.searchInfo, `name`, e.detail.value)
  234. },
  235. // 取消订单
  236. toCancel(e) {
  237. const that = this;
  238. uni.showModal({
  239. title: '提示',
  240. content: '确定取消订单吗?',
  241. success: async function(res) {
  242. if (res.confirm) {
  243. const arr = await that.$api(`/order/cancel`, 'POST', {
  244. order_id: e._id
  245. });
  246. if (arr.errcode == '0') {
  247. uni.showToast({
  248. title: '取消订单成功',
  249. icon: 'none'
  250. })
  251. that.clearPage();
  252. that.search();
  253. } else {
  254. uni.showToast({
  255. title: arr.errmsg,
  256. icon: 'none'
  257. })
  258. }
  259. }
  260. }
  261. });
  262. },
  263. // 付款
  264. toPay(e) {
  265. const that = this;
  266. uni.getStorage({
  267. key: 'system',
  268. success: async function(res) {
  269. // 微信小程序支付
  270. if (res.data.uniPlatform == "mp-weixin") {
  271. const res = await that.$api('/pay/toPayOrder', 'POST', {
  272. order_id: e,
  273. type: '0'
  274. })
  275. console.log(res);
  276. uni.requestPayment({
  277. "provider": "wxpay",
  278. ...res.data,
  279. success(res) {
  280. uni.showToast({
  281. title: '支付成功',
  282. icon: 'none'
  283. })
  284. that.clearPage();
  285. that.search();
  286. },
  287. fail(e) {
  288. console.log('in fail');
  289. console.log(e)
  290. }
  291. })
  292. } else if (res.data.uniPlatform == "app") {
  293. // app支付
  294. uni.requestPayment({
  295. provider: 'alipay',
  296. orderInfo: 'orderInfo', //微信、支付宝订单数据 【注意微信的订单信息,键值应该全部是小写,不能采用驼峰命名】
  297. success: function(res) {
  298. console.log('success:' + JSON.stringify(res));
  299. },
  300. fail: function(err) {
  301. console.log('fail:' + JSON.stringify(err));
  302. }
  303. });
  304. } else {
  305. uni.showToast({
  306. title: `平台不支持支付`,
  307. icon: 'none'
  308. })
  309. }
  310. },
  311. fail: function(err) {}
  312. })
  313. },
  314. // 申请售后
  315. toAfter(e) {
  316. uni.navigateTo({
  317. url: `/pagesMy/order/service?id=${e._id}`
  318. })
  319. },
  320. // 申请退款
  321. toRefund(e) {
  322. console.log(e);
  323. },
  324. // 选择选项卡
  325. tabsChange(e) {
  326. const that = this;
  327. that.$set(that.tabs, `active`, e.active)
  328. that.$set(that, `status`, e.active);
  329. that.clearPage();
  330. that.search()
  331. },
  332. // 清空列表
  333. clearPage() {
  334. const that = this;
  335. that.$set(that, `list`, [])
  336. that.$set(that, `skip`, 0)
  337. that.$set(that, `limit`, 5)
  338. that.$set(that, `page`, 0)
  339. }
  340. }
  341. }
  342. </script>
  343. <style lang="scss">
  344. .main {
  345. display: flex;
  346. flex-direction: column;
  347. width: 100vw;
  348. height: 100vh;
  349. .one {
  350. padding: 2vw;
  351. input {
  352. padding: 2vw;
  353. background-color: var(--f1Color);
  354. font-size: var(--font14Size);
  355. border-radius: 5px;
  356. }
  357. }
  358. .two {
  359. position: relative;
  360. flex-grow: 1;
  361. background-color: var(--f9Color);
  362. .tabsList {
  363. position: relative;
  364. width: 100vw;
  365. height: 82vh;
  366. .list_2 {
  367. background-color: #fff;
  368. margin: 0 2vw 2vw 2vw;
  369. padding: 2vw;
  370. .status {
  371. text-align: right;
  372. margin: 0 0 1vw 0;
  373. }
  374. .goods {
  375. margin: 0 0 1vw 0;
  376. padding: 2vw;
  377. border-bottom: 1px solid #f5f5f5;
  378. .goods_1 {
  379. margin: 0 0 2vw 0;
  380. .shopname {
  381. text:last-child {
  382. padding: 0 0 0 2vw;
  383. }
  384. }
  385. }
  386. .goods_2 {
  387. margin: 0 0 1vw 0;
  388. .market {
  389. display: flex;
  390. .url {
  391. width: 20vw;
  392. .image {
  393. width: 100%;
  394. height: 20vw;
  395. border-radius: 5px;
  396. }
  397. }
  398. .goodsname {
  399. width: 60vw;
  400. padding: 0 2vw;
  401. }
  402. .goodsother {
  403. width: 15vw;
  404. text-align: right;
  405. }
  406. }
  407. }
  408. }
  409. .other {
  410. margin: 0 0 2vw 0;
  411. text-align: right;
  412. text {
  413. font-size: 14px;
  414. padding: 0 0 0 2vw;
  415. }
  416. }
  417. .btn {
  418. text-align: right;
  419. margin: 2vw 0 0 0;
  420. border-top: 1px solid #f1fff1;
  421. button {
  422. margin: 2vw 0 0 2vw;
  423. }
  424. .toPay {
  425. border: 1px solid #ff0000;
  426. color: #ff0000;
  427. }
  428. }
  429. }
  430. // .list {
  431. // background-color: #fff;
  432. // margin: 0 2vw 2vw 2vw;
  433. // padding: 2vw;
  434. // .list_1 {
  435. // margin: 0 0 1vw 0;
  436. // display: flex;
  437. // flex-direction: row;
  438. // justify-content: space-between;
  439. // }
  440. // .list_2 {
  441. // margin: 0 0 1vw 0;
  442. // display: flex;
  443. // .l {
  444. // width: 20vw;
  445. // .image {
  446. // width: 100%;
  447. // height: 20vw;
  448. // border-radius: 5px;
  449. // }
  450. // }
  451. // .c {
  452. // width: 60vw;
  453. // padding: 0 2vw;
  454. // }
  455. // .r {
  456. // width: 15vw;
  457. // text-align: right;
  458. // }
  459. // }
  460. // .other {
  461. // margin: 0 0 2vw 0;
  462. // text-align: right;
  463. // text {
  464. // font-size: 14px;
  465. // padding: 0 0 0 2vw;
  466. // }
  467. // }
  468. // .btn {
  469. // text-align: right;
  470. // margin: 2vw 0 0 0;
  471. // border-top: 1px solid #f1fff1;
  472. // button {
  473. // margin: 2vw 0 0 2vw;
  474. // }
  475. // }
  476. // }
  477. }
  478. }
  479. }
  480. // .two {
  481. // position: relative;
  482. // flex-grow: 1;
  483. // background-color: var(--f9Color);
  484. // .two_1 {
  485. // background-color: var(--fffColor);
  486. // padding: 2vw;
  487. // display: flex;
  488. // flex-direction: row;
  489. // }
  490. // .two_2 {
  491. // display: flex;
  492. // flex-direction: column;
  493. // .list {
  494. // width: 100vw;
  495. // margin: 2vw 0 0 0;
  496. // background-color: var(--mainColor);
  497. // .list_1 {
  498. // display: flex;
  499. // flex-direction: row;
  500. // justify-content: space-between;
  501. // padding: 2vw;
  502. // .name {
  503. // font-size: var(--font14Size);
  504. // text {
  505. // margin: 0 1vw 0 0;
  506. // }
  507. // }
  508. // .status {
  509. // font-size: var(--font14Size);
  510. // color: var(--ff0Color);
  511. // }
  512. // }
  513. // .list_2 {
  514. // display: flex;
  515. // flex-direction: row;
  516. // justify-content: space-between;
  517. // padding: 2vw;
  518. // background-color: var(--f8Color);
  519. // .image {
  520. // width: 20vw;
  521. // height: 20vw;
  522. // margin: 0 2vw 0 0;
  523. // }
  524. // .other {
  525. // display: flex;
  526. // flex-direction: column;
  527. // flex-grow: 1;
  528. // .name {
  529. // font-size: var(--font14Size);
  530. // font-weight: bold;
  531. // margin: 0 0 2vw 0;
  532. // }
  533. // .other_1 {
  534. // font-size: var(--font12Size);
  535. // color: var(--f85Color);
  536. // }
  537. // }
  538. // .money {
  539. // font-size: var(--font12Size);
  540. // .num {
  541. // text-align: right;
  542. // }
  543. // }
  544. // }
  545. // .list_3 {
  546. // display: flex;
  547. // justify-content: flex-end;
  548. // padding: 2vw;
  549. // border-bottom: 0.5vw solid var(--f9Color);
  550. // font-size: var(--font12Size);
  551. // text {
  552. // margin: 0 1vw;
  553. // }
  554. // }
  555. // .list_4 {
  556. // padding: 2vw;
  557. // text-align: right;
  558. // button {
  559. // margin: 0 1vw 0 2vw;
  560. // }
  561. // }
  562. // }
  563. // }
  564. // }
  565. // }
  566. .scroll-view {
  567. position: absolute;
  568. top: 0;
  569. left: 0;
  570. right: 0;
  571. bottom: 0;
  572. .list-scroll-view {
  573. display: flex;
  574. flex-direction: column;
  575. }
  576. }
  577. </style>