index.vue 15 KB

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