index.vue 16 KB

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