index.vue 17 KB

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