index.vue 16 KB

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