index.vue 17 KB

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