index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529
  1. <template>
  2. <view class="order" ref="container">
  3. <view class="searchCon acea-row row-center-wrapper">
  4. <view class="search acea-row row-middle">
  5. <text class="iconfont icon-sousuo4"></text>
  6. <input v-model="keyword" type="text" placeholder="搜索订单号、收货人名称、手机号" placeholder-class="placeholder" confirm-type="search" class="inputs" @confirm="searchSubmit" />
  7. </view>
  8. </view>
  9. <view class="navs">
  10. <view class="item" :class="type == '0' ? 'on' : ''" @click="settype('0')">待付款</view>
  11. <view class="item" :class="type == '1' ? 'on' : ''" @click="settype('1')">待配送</view>
  12. <view class="item" :class="type == '5' ? 'on' : ''" @click="settype('5')">待核销</view>
  13. <view class="item" :class="type == '3' ? 'on' : ''" @click="settype('3')">待评价</view>
  14. <view class="item" :class="type == '-3' ? 'on' : ''" @click="settype('-3')">退款</view>
  15. <view class="item" :class="type == '' ? 'on' : ''" @click="settype('')">全部</view>
  16. </view>
  17. <view class="cards">
  18. <view v-if="orderList.length">
  19. <view class="content" v-for="(item,index) in orderList">
  20. <view class="content_top pad" @click="toDetail(item)">
  21. <view class="content_top_left">
  22. <p>订单号:{{ item.order_id }}</p>
  23. <p class="time">下单时间:{{ item.add_time }}</p>
  24. </view>
  25. <view class="state" :class="(item.refund_status==0 && type !== 0 && item.refund.length)?'on':''">
  26. {{item.refund_status==1?'退款中':item.refund_status==2?'已退款':item.refund_status==3?'拒绝退款':item.status_name.status_name}}
  27. <text v-if="item.refund_status == 0 && type !== 0 && item.refund.length">{{item.is_all_refund?',退款中':',部分退款中'}}</text>
  28. </view>
  29. </view>
  30. <view class="content_font"></view>
  31. <view v-for="(val, key) in item._info" :key="key" @click="toDetail(item)">
  32. <view class="content_box acea-row row-between">
  33. <image :src="val.cart_info.productInfo.attrInfo?val.cart_info.productInfo.attrInfo.image:val.cart_info.productInfo.image" mode=""></image>
  34. <view class="content_box_title acea-row row-between">
  35. <view class="text_left acea-row row-between row-column">
  36. <view class="textbox line2"><text class="label" v-if="val.cart_info.is_gift">[赠品]</text>{{ val.cart_info.productInfo.store_name }}</view>
  37. <view class="attribute line1" v-if="val.cart_info.productInfo.attrInfo">属性:{{ val.cart_info.productInfo.attrInfo.suk }}</view>
  38. </view>
  39. <view class="text_right">
  40. <view>¥ {{ val.cart_info.productInfo.attrInfo?val.cart_info.productInfo.attrInfo.price:val.cart_info.productInfo.price }} </view>
  41. <view>x {{ val.cart_info.cart_num }}</view>
  42. <view class="info" v-if="val.cart_info.refund_num && item.refund_type !=6">{{val.cart_info.refund_num}}件退款中</view>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. <view class="content_bottom">{{ item.total_num }}件商品,实付款:<span class="money">{{ item.pay_price }}</span>( 邮费 ¥{{
  48. item.pay_postage
  49. }}
  50. )</view>
  51. <view class="content_btn">
  52. <view v-if="item._status == 1" class='box' :class="openErp?'on':''" @click="modify(item, 0)">一键改价</view>
  53. <view class='box' @click="modify(item, 1)">订单备注</view>
  54. <view v-if="item._status == 1 && item.pay_type == 'offline'" class='box' :class="openErp?'on':''" @click="offlinePay(item)">确认付款</view>
  55. <!-- && (item.split == null || item.split.length==0) 有子订单时加的这个条件 -->
  56. <view class="box boxblue" :class="openErp?'on':''" @click="modify(item, 2, 1)" v-if="(item.refund_type == 0 || item.refund_type == 1 || item.refund_type == 5) && type == -3 && parseFloat(item.pay_price) >= 0">
  57. 立即退款
  58. </view>
  59. <view class="box boxblue" :class="openErp?'on':''" @click="modify(item, 2, 0)" v-if="type == -3 && item.refund_type == 2">同意退货</view>
  60. <view class="wait" :class="openErp?'on':''" v-if="type == -3 && item.refund_type == 4">待用户发货</view>
  61. <view v-if="type == 1 && (item.shipping_type === 1 || item.shipping_type === 3) && (item.pinkStatus === null || item.pinkStatus === 2)" class='box boxblue' :class="openErp?'on':''" @click="goDelivery(item)">去发货</view>
  62. <!-- v-if="item._status == 2" -->
  63. </view>
  64. </view>
  65. </view>
  66. <view v-else class="nothing">
  67. <image v-if="!loading" :src="imgHost + '/statics/images/no-thing.png'" alt="">
  68. <view v-if="!loading">暂无记录</view>
  69. </view>
  70. <Loading :loaded="loaded" :loading="loading"></Loading>
  71. <PriceChange :change="change" :orderInfo="orderInfo" :isRefund="isRefund" v-on:statusChange="statusChange($event)" v-on:closechange="changeclose($event)" v-on:savePrice="savePrice"
  72. :status="status"></PriceChange>
  73. </view>
  74. </view>
  75. </template>
  76. <script>
  77. import { getOrderlistApi, getRefundMarkApi, getRefundlistApi, getOrderreMarkApi, getOrderPriceApi, getOrderOfflineApi, OrderRefund, storeRefundAgree } from '@/api/admin'
  78. import { erpConfig } from "@/api/esp.js";
  79. import PriceChange from '../../components/PriceChange/index.vue'
  80. import Loading from '@/components/Loading/index.vue'
  81. import { isMoney } from '@/utils/validate.js'
  82. import {HTTP_REQUEST_URL} from '@/config/app';
  83. export default {
  84. name: "order",
  85. components: {
  86. Loading,
  87. PriceChange
  88. },
  89. props: {},
  90. data: function() {
  91. return {
  92. openErp:false,
  93. orderList: [],
  94. type: '',
  95. page: 1,
  96. limit: 15,
  97. loading: false,
  98. loaded: false,
  99. change: false,
  100. orderInfo: {},
  101. status: "",
  102. isRefund:0, //1是仅退款;0是退货退款
  103. imgHost:HTTP_REQUEST_URL,
  104. keyword: ''
  105. };
  106. },
  107. onLoad: function(options) {
  108. this.type = options.type;
  109. this.getErpConfig();
  110. },
  111. onShow(){
  112. this.settype(this.type);
  113. },
  114. computed: {
  115. },
  116. methods: {
  117. searchSubmit(){
  118. this.settype(this.type);
  119. },
  120. statusChange(e){
  121. this.status = e;
  122. },
  123. goDelivery(item){
  124. if(this.openErp) return
  125. uni.navigateTo({
  126. url: '/pages/admin/store/deliverGoods/index?id='+item.order_id+'&listId='+item.id+'&totalNum='+item.total_num+'&orderStatus='+item._status+'&comeType=1&productType='+item.product_type
  127. })
  128. },
  129. getErpConfig(){
  130. erpConfig().then(res=>{
  131. this.openErp = res.data.open_erp;
  132. }).catch(err=>{
  133. // this.$util.Tips({
  134. // title: err
  135. // })
  136. })
  137. },
  138. settype:function(type) {
  139. this.type = type
  140. this.init()
  141. this.getList();
  142. },
  143. // 初始化
  144. init: function() {
  145. this.orderList = [];
  146. this.page = 1;
  147. this.loaded = false;
  148. this.loading = false;
  149. // this.getList();
  150. },
  151. getList: function(){
  152. if (this.loading || this.loaded) return;
  153. this.loading = true
  154. let data = {
  155. status: this.type,
  156. page: this.page,
  157. limit: this.limit,
  158. keyword: this.keyword
  159. }
  160. let obj = ''
  161. if(this.type == -3){
  162. obj = getRefundlistApi(data);
  163. }else{
  164. obj = getOrderlistApi(data);
  165. }
  166. obj.then(res=>{
  167. this.loading = false
  168. this.loaded = res.data.length < this.limit
  169. this.orderList.push.apply(this.orderList, res.data);
  170. this.page += 1
  171. })
  172. },
  173. onReachBottom(){
  174. this.getList()
  175. },
  176. toDetail(item){
  177. uni.navigateTo({
  178. url:`/pages/admin/store/orderDetail/index?id=${item.id}&types=${this.type}`
  179. })
  180. // console.log(item.order_id)
  181. },
  182. // 商品操作
  183. modify: function(item, status,type) {
  184. if(this.openErp && status !=1) return
  185. this.change = true;
  186. this.status = status.toString();
  187. this.orderInfo = item;
  188. if(status==2){
  189. this.isRefund = type
  190. }
  191. },
  192. changeclose: function(msg) {
  193. this.change = msg;
  194. },
  195. //确定付款
  196. offlinePay: function(item) {
  197. if(this.openErp) return
  198. getOrderOfflineApi({ order_id: item.order_id }).then(
  199. res => {
  200. this.$util.Tips({title:res.msg,icon:"success"});
  201. this.init();
  202. this.getList();
  203. },
  204. error => {
  205. this.$util.Tips(error);
  206. }
  207. );
  208. },
  209. objOrderRefund(data){
  210. let that = this;
  211. OrderRefund(data).then(
  212. res => {
  213. that.change = false;
  214. that.$util.Tips({title: res.msg});
  215. that.init();
  216. that.getList();
  217. },
  218. err => {
  219. that.change = false;
  220. that.$util.Tips({title: err});
  221. }
  222. );
  223. },
  224. async savePrice(opt) {
  225. let that = this,
  226. data = {},
  227. price = opt.price,
  228. refund_price = opt.refund_price,
  229. refund_status = that.orderInfo.refund_status,
  230. remark = opt.remark;
  231. data.order_id = that.orderInfo.order_id;
  232. if (that.status == 0) {
  233. if(!isMoney(price)){
  234. return that.$util.Tips({title: '请输入正确的金额'});
  235. }
  236. data.price = price;
  237. getOrderPriceApi(data).then(
  238. res => {
  239. that.change = false;
  240. that.$util.Tips({
  241. title:'改价成功',
  242. icon:'success'
  243. })
  244. this.init();
  245. this.getList()
  246. },
  247. err => {
  248. that.change = false;
  249. that.$util.Tips({
  250. title:'改价失败',
  251. icon:'none'
  252. })
  253. }
  254. );
  255. } else if (that.status == 2) {
  256. if(this.isRefund){
  257. if(!isMoney(refund_price)){
  258. return that.$util.Tips({title: '请输入正确的金额'});
  259. }
  260. data.price = refund_price;
  261. data.type = opt.type;
  262. this.objOrderRefund(data);
  263. // OrderRefund(data).then(
  264. // res => {
  265. // that.change = false;
  266. // that.$util.Tips({title: res.msg});
  267. // that.init();
  268. // that.getList();
  269. // },
  270. // err => {
  271. // that.change = false;
  272. // that.$util.Tips({title: err});
  273. // }
  274. // );
  275. }else{
  276. if(opt.type==1){
  277. storeRefundAgree(this.orderInfo.id).then(res=>{
  278. that.change = false;
  279. that.$util.Tips({
  280. title: res.msg
  281. });
  282. that.init();
  283. that.getList();
  284. }).catch(err=>{
  285. that.change = false;
  286. that.$util.Tips({
  287. title: err
  288. });
  289. })
  290. }
  291. }
  292. } else if (that.status == 8){
  293. data.type = opt.type;
  294. data.refuse_reason = opt.refuse_reason;
  295. this.objOrderRefund(data);
  296. } else {
  297. if(!remark){
  298. return this.$util.Tips({
  299. title:'请输入备注'
  300. })
  301. }
  302. data.remark = remark;
  303. let obj = '';
  304. if(that.type == -3){
  305. obj = getRefundMarkApi(data);
  306. }else{
  307. obj = getOrderreMarkApi(data);
  308. }
  309. obj.then(res=>{
  310. that.change = false;
  311. this.$util.Tips({
  312. title:res.msg,
  313. icon:'success'
  314. })
  315. }).catch(err=>{
  316. that.change = false;
  317. that.$util.Tips({title: err});
  318. })
  319. }
  320. }
  321. }
  322. }
  323. </script>
  324. <style lang="scss" scoped>
  325. .nothing{
  326. text-align: center;
  327. color: #cfcfcf;
  328. }
  329. .color1{color: #FF7E00;}
  330. .color2{color: #1890FF;}
  331. /*交易额统计*/
  332. .order .navs {
  333. width: 100%;
  334. height: 96upx;
  335. background-color: #fff;
  336. line-height: 96upx;
  337. position: sticky;
  338. top: 0;
  339. left: 0;
  340. z-index: 9;
  341. display: flex;
  342. justify-content: space-between;
  343. padding: 0upx 26upx;
  344. }
  345. .order .navs .item {
  346. font-size: 32upx;
  347. color: #282828;
  348. display: inline-block;
  349. }
  350. .order .navs .item.on {
  351. color: #2291f8;
  352. }
  353. .order .navs .item .iconfont {
  354. font-size: 25upx;
  355. margin-left: 13upx;
  356. }
  357. .order .cards{
  358. // padding-top: 96upx;
  359. .content{
  360. margin: 28upx auto 16upx auto;
  361. width: 694upx;
  362. // height: 428upx;
  363. padding-bottom: 20upx;
  364. background: #FFFFFF;
  365. border-radius: 12upx;
  366. .pad{padding: 20upx 20upx 22upx;}
  367. .content_top{
  368. // height: 78upx;
  369. align-items: center;
  370. font-weight: 400;
  371. display: flex;
  372. justify-content: space-between;
  373. border-bottom: 2upx solid #F5F5F5;
  374. .state{
  375. color: #2291f8;
  376. &.on{
  377. font-size: 24rpx;
  378. width: 150rpx;
  379. text-align: right;
  380. }
  381. }
  382. .content_top_left{
  383. font-weight: bold;
  384. font-size: 30upx;
  385. .time{
  386. color: #666666;
  387. font-size: 24upx;
  388. }
  389. }
  390. .content_top_right{
  391. font-size: 30upx;
  392. // color: #1890FF;
  393. padding: 6upx 10upx;
  394. }
  395. }
  396. .content_font{
  397. font-size: 24upx;
  398. color: #666666;
  399. font-weight: 400;
  400. .txt{margin-bottom: 14upx;}
  401. }
  402. .content_box{
  403. // height: 70px;
  404. // background: #F5F5F5;
  405. border-radius: 8upx;
  406. // margin: 0upx 20upx 22upx;
  407. padding: 27upx;
  408. padding-right: 22upx;
  409. display: flex;
  410. justify-content: start;
  411. image{
  412. width: 140upx;
  413. height: 140upx;
  414. border-radius: 8upx;
  415. }
  416. .content_box_title{
  417. margin-left: 18upx;
  418. font-size: 20upx;
  419. font-weight: 400;
  420. width: 480rpx;
  421. display: flex;
  422. justify-content: space-between;
  423. font-size: 24upx;
  424. .textbox{
  425. text-overflow: ellipsis;
  426. overflow: hidden;
  427. .label{
  428. color: #F5222D;
  429. }
  430. }
  431. .text_left{
  432. width: 320rpx;
  433. }
  434. .text_right{
  435. text-align: right;
  436. .info{
  437. margin-top: 44rpx;
  438. font-size: 24rpx;
  439. }
  440. }
  441. .attribute{
  442. color: #999999;
  443. width: 340upx;
  444. text-overflow: ellipsis;
  445. overflow: hidden;
  446. }
  447. }
  448. }
  449. .content_bottom{
  450. text-align: right;
  451. font-size: 22upx;
  452. padding: 0upx 20upx;
  453. color: #666666;
  454. .money{
  455. font-size: 26upx;
  456. color: #F5222D;
  457. }
  458. }
  459. .content_btn{
  460. display: flex;
  461. padding: 28upx 28upx;
  462. padding-bottom: 0upx;
  463. justify-content: flex-end;
  464. .wait{
  465. margin-left: 20rpx;
  466. height: 60rpx;
  467. line-height: 60rpx;
  468. }
  469. .box{
  470. width: 172upx;
  471. height: 60upx;
  472. border-radius: 50upx;
  473. border: 2upx solid #EEEEEE;
  474. text-align: center;
  475. line-height: 60upx;
  476. color: #666666;
  477. margin: 0 10upx;
  478. &.on{
  479. color: #c5c8ce!important;
  480. background-color: #f7f7f7!important;
  481. border-color: #dcdee2!important;
  482. }
  483. }
  484. .boxblue{
  485. background-color: #1890FF;
  486. color: #FFFFFF;
  487. }
  488. }
  489. }
  490. }
  491. .searchCon{
  492. position: relative;
  493. z-index: 9;
  494. background-color: #fff;
  495. height: 88rpx;
  496. width: 100%;
  497. border-bottom: 1px solid #EBEEF5;
  498. .search{
  499. width: 690rpx;
  500. height: 64rpx;
  501. background: #F5F5F5;
  502. border-radius: 12rpx;
  503. padding: 0 24rpx;
  504. .iconfont{
  505. color: #999999;
  506. margin-right: 12rpx;
  507. }
  508. .inputs{
  509. width: 590rpx;
  510. font-size: 26rpx;
  511. }
  512. .placeholder{
  513. font-size: 26rpx;
  514. color: #ccc;
  515. }
  516. }
  517. }
  518. </style>