index.vue 18 KB

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