index.vue 16 KB

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