index.vue 15 KB

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