index.vue 18 KB

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