index.vue 18 KB

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