procureOrder.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
  1. <template>
  2. <view class="orderDetail-digitalShel flex flex_column">
  3. <view class="contHead" :style="{background:state!= 'error'&&state!= 'AUDIT_REJECT'&&state!='CANCEL' ? '#066cff':'#f34503',color:'#fff'}">
  4. <view class="statusH">
  5. <view class="flex flex_column align_center">
  6. <view class="status-row">
  7. <u-icon :name="statusIcon" size="42" color="#fff">
  8. </u-icon>
  9. <text>{{statusText}}</text>
  10. </view>
  11. <view class="messageText"><text>{{statusMessage}}</text></view>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="order-body">
  16. <view class="info partList" v-if="partList.length" style="max-height: 50vh;overflow: auto;">
  17. <view class="infoList">
  18. <view class="title">
  19. 产品列表
  20. </view>
  21. <view>
  22. 共<text class="cText">{{total}}</text>款
  23. </view>
  24. </view>
  25. <view v-for="(item,dix) in partList" :key="item.id" class="flex align-center item-list">
  26. <view style="height: 160rpx;width: 160rpx;">
  27. <u-image :src="item.product.images+'?x-oss-process=image/resize,p_50'" border-radius="16" width="160" height="160" bg-color="#EBEBEB" ></u-image>
  28. <!-- <view class="back-price" v-if="item.giveAmount">返<text>{{item.giveAmount}}</text>元</view> -->
  29. </view>
  30. <view>
  31. <view class="item-name">
  32. <text>{{item.product.productName}}</text>
  33. </view>
  34. <view class="item-nums" v-if="item.product&&item.product.code">
  35. <text>{{item.product.code}}</text>
  36. </view>
  37. <view class="item-nums" v-if="item.product&&item.product.origCode">
  38. <text style="color: #00aaff;">{{item.product.origCode}}</text>
  39. </view>
  40. <view class="item-head">
  41. <view class="flex align_center">
  42. <view class="price-txt">¥<text>{{item.price}}</text></view>
  43. <view class="flex align_center rebate-tag" v-if="dix==0">
  44. 返<text>5</text>元
  45. </view>
  46. <view class="flex align_center rebate-tag" v-if="dix==1">
  47. 买3赠2
  48. </view>
  49. <view class="flex align_center tejia-tag" v-if="dix==2">
  50. 特价<text>¥20</text>
  51. </view>
  52. </view>
  53. <view>
  54. X <text class="cText">{{item.qty}}</text>{{item.product&&item.product.unit||''}}
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. <!-- 分页 -->
  60. <view class="product-pages" v-if="totalPages>1">
  61. <uni-pages-nav :totalPages="totalPages" :showShadow="false" :currentPage="pageNo" @pagechanged="getRow"></uni-pages-nav>
  62. </view>
  63. </view>
  64. <view class="info" v-if="info">
  65. <view class="infoList">
  66. <text>总金额</text>
  67. <text class="redText">¥{{info.totalAmount}}</text>
  68. </view>
  69. <view class="infoList">
  70. <text>总优惠</text>
  71. <text class="cText">¥{{info.totalAmount}}</text>
  72. </view>
  73. <view class="infoList" v-if="state=='FINISH'">
  74. <text>代金券</text>
  75. <text class="cText">¥{{info.totalGiveAmount}}</text>
  76. </view>
  77. </view>
  78. <view class="info" v-if="info">
  79. <view class="infoList">
  80. <view class="title">单据信息</view>
  81. <view class="statu"></view>
  82. </view>
  83. <view class="infoList dju">
  84. <text>订单号</text>
  85. <text>{{info.purchaseNo||'--'}}</text>
  86. </view>
  87. <view class="infoList">
  88. <text>下单时间</text>
  89. <text>{{info.purchaseDate||'--'}}</text>
  90. </view>
  91. <view class="infoList">
  92. <text>下单人员</text>
  93. <text>{{info.purchaserName || '--'}}</text>
  94. </view>
  95. </view>
  96. </view>
  97. <view class="footer flex align_center justify_center" v-if="info">
  98. <u-button v-if="info.billStatus == 'WAIT_AUDIT'" shape="circle" type="error" plain @click="cancelOrder(info)">取消订单</u-button>
  99. <u-button v-if="info.billStatus == 'WAIT_RECEIVE'" shape="circle" type="primary" @click="receiveOrder(info)">确认收货</u-button>
  100. </view>
  101. </view>
  102. </template>
  103. <script>
  104. import { purchaseQueryDetailPage,purchaseCancel,purchaseReceive } from '@/api/purchase.js'
  105. export default {
  106. name: 'procureDetailOrder',
  107. data() {
  108. return {
  109. loading: false,
  110. info: null,
  111. statusText: '',
  112. statusIcon: '', // 结算状态icon
  113. statusMessage: '请耐心等待汽配经销商进行配送',
  114. partList: [], // 配件列表
  115. state: 'success',
  116. pageNo:1,
  117. pageSize: 30,
  118. total: 0,
  119. purchaseSn: null
  120. }
  121. },
  122. onLoad(option) {
  123. uni.setNavigationBarTitle({
  124. title: '采购订单详情'
  125. })
  126. // 从采购单列表来
  127. if(option.purchaseSn){
  128. this.state = option.state
  129. this.purchaseSn = option.purchaseSn
  130. const stateText = {'WAIT_AUDIT':'待审核','AUDIT_REJECT':'审核不通过','WAIT_OUT_WAREHOUSE':'待收货','FINISH':'已完结','CANCEL':'已取消'}
  131. this.statusText = stateText[option.state]
  132. this.statusIcon = option.state == 'FINISH' ? 'checkmark-circle' : 'hourglass'
  133. this.info = this.$store.state.vuex_tempData
  134. this.statusMessage = option.state == 'FINISH' || option.state == 'AUDIT_REJECT' || option.state == 'CANCEL' ? '' : '请耐心等待汽配经销商进行配送'
  135. // 获取明细
  136. this.getDetailList()
  137. }else{
  138. const data = this.$store.state.vuex_tempData
  139. if(data){
  140. this.info = data
  141. this.state = data.billStatus
  142. this.purchaseSn = data.purchaseSn
  143. // 获取明细
  144. this.getDetailList()
  145. }
  146. this.statusText = '提交成功'
  147. this.statusIcon = 'checkmark-circle'
  148. }
  149. // 更改标题栏背景色
  150. uni.setNavigationBarColor({
  151. frontColor: '#ffffff',
  152. backgroundColor: this.state!= 'error'&&this.state!= 'AUDIT_REJECT'&&this.state!= 'CANCEL' ? '#066cff':'#f34503',
  153. })
  154. },
  155. onUnload() {
  156. this.$store.state.vuex_tempData = null
  157. },
  158. computed: {
  159. totalNums(){
  160. let ret = 0
  161. this.partList.map(item => {
  162. ret += item.qty
  163. })
  164. return ret
  165. },
  166. totalPages(){
  167. return Math.ceil(this.total / this.pageSize)
  168. }
  169. },
  170. methods: {
  171. getRow(pageNo){
  172. this.pageNo = pageNo
  173. this.getDetailList()
  174. },
  175. getDetailList(){
  176. uni.showLoading({
  177. title: '加载中'
  178. })
  179. purchaseQueryDetailPage({purchaseSn: this.purchaseSn,pageNo:this.pageNo,pageSize:this.pageSize}).then(res => {
  180. if(res.status == 200){
  181. this.partList = res.data ? res.data.list : [],
  182. this.total = res.data ? res.data.count : 0
  183. }
  184. // 滚动到顶部
  185. this.$nextTick(()=>{
  186. uni.pageScrollTo({
  187. scrollTop: 0,
  188. duration: 300
  189. });
  190. uni.hideLoading()
  191. })
  192. })
  193. },
  194. message(title){
  195. uni.showToast({
  196. icon:'none',
  197. title: title
  198. })
  199. },
  200. // 取消订单
  201. cancelOrder(item){
  202. let _this = this
  203. uni.showModal({
  204. title: '提示',
  205. content: '确定取消订单吗?',
  206. success: function (res) {
  207. if (res.confirm) {
  208. purchaseCancel({purchaseSn:_this.purchaseSn}).then(res => {
  209. if (res.status == 200) {
  210. _this.message('取消成功')
  211. uni.$emit('refreshOrder')
  212. uni.navigateBack()
  213. } else {
  214. _this.message(res.message)
  215. }
  216. })
  217. }
  218. }
  219. });
  220. },
  221. // 确认收货
  222. receiveOrder(item){
  223. let _this = this
  224. uni.showModal({
  225. title: '提示',
  226. content: '确定收货吗?',
  227. success: function (res) {
  228. if (res.confirm) {
  229. purchaseReceive({purchaseSn:_this.purchaseSn}).then(res => {
  230. if (res.status == 200) {
  231. _this.message('收货成功')
  232. uni.$emit('refreshOrder')
  233. uni.navigateBack()
  234. } else {
  235. _this.message(res.message)
  236. }
  237. })
  238. }
  239. }
  240. });
  241. },
  242. }
  243. }
  244. </script>
  245. <style lang="less">
  246. page{
  247. height: 100%;
  248. }
  249. .orderDetail-digitalShel{
  250. height: 100%;
  251. .redText{
  252. color: #FB1E1E;
  253. margin: 0 10rpx;
  254. }
  255. .cText{
  256. color: #666;
  257. margin: 0 10rpx;
  258. font-size: 14px;
  259. }
  260. .order-body{
  261. flex-grow: 1;
  262. overflow: auto;
  263. .partList{
  264. margin-top: 20rpx;
  265. }
  266. }
  267. .contHead {
  268. .statusH{
  269. > view{
  270. padding: 10upx 12%;
  271. font-size: 34upx;
  272. }
  273. .status-row{
  274. font-size: 42upx;
  275. text{
  276. margin-left: 10rpx;
  277. }
  278. }
  279. .messageText{
  280. font-size: 28upx;
  281. text-align: center;
  282. text{
  283. color: #f3e781;
  284. }
  285. padding: 20rpx 0;
  286. }
  287. }
  288. }
  289. .info{
  290. background-color: #FFFFFF;
  291. padding: 10rpx 30upx;
  292. font-size: 32rpx;
  293. margin-bottom: 20rpx;
  294. .infoList{
  295. display: flex;
  296. justify-content: space-between;
  297. align-items: center;
  298. padding: 20rpx 0;
  299. border-bottom: 2rpx solid #f2f2f2;
  300. &:last-child{
  301. border: none;
  302. }
  303. .title{
  304. font-weight: bold;
  305. > text{
  306. color: #ff9808;
  307. font-size: 24upx;
  308. }
  309. }
  310. > text{
  311. &:first-child{
  312. color: #666E75;
  313. }
  314. }
  315. }
  316. .item-list{
  317. border-bottom: 2rpx solid #f2f2f2;
  318. padding: 20rpx 0;
  319. &:last-child{
  320. border: none;
  321. }
  322. > view{
  323. &:first-child{
  324. margin-right: 20rpx;
  325. margin-top: 18rpx;
  326. position: relative;
  327. overflow: hidden;
  328. width: 160rpx;
  329. height: 160rpx;
  330. border-radius: 6px;
  331. border: 1px solid #eee;
  332. }
  333. .back-price{
  334. zoom: calc(0.8);
  335. padding: 6rpx 65rpx;
  336. background: rgba(255 ,87 ,34 , 1);
  337. position: absolute;
  338. top: 20rpx;
  339. right: -55rpx;
  340. color: #fff;
  341. z-index: 2;
  342. font-size: 20rpx;
  343. text-align: center;
  344. transform: rotate(40deg);
  345. display: flex;
  346. align-items: center;
  347. text{
  348. font-size: 28rpx;
  349. margin: 0 5rpx;
  350. }
  351. }
  352. &:last-child{
  353. flex-grow: 1;
  354. width: 60%;
  355. }
  356. }
  357. .item-name{
  358. word-wrap: break-word;
  359. font-size: 28rpx;
  360. color: #333;
  361. font-weight: bold;
  362. }
  363. .item-nums{
  364. text{
  365. font-size: 28rpx;
  366. color: #666;
  367. }
  368. }
  369. .item-head{
  370. display: flex;
  371. align-items: center;
  372. justify-content: space-between;
  373. color: #666;
  374. margin-top: 5px;
  375. > view:last-child{
  376. font-size: 24rpx;
  377. text{
  378. margin: 0 10rpx;
  379. font-size: 28rpx;
  380. }
  381. }
  382. }
  383. .price-txt{
  384. color: red;
  385. display: flex;
  386. align-items: baseline;
  387. font-size: 12px;
  388. text{
  389. font-size: 32rpx;
  390. }
  391. }
  392. .rebate-tag{
  393. background: #ffe7df;
  394. color: #E91E63;
  395. padding: 2px 5px;
  396. font-size: 10px;
  397. border-radius: 3px;
  398. margin-left: 6px;
  399. }
  400. .tejia-tag{
  401. color: #E91E63;
  402. margin-left: 6px;
  403. font-size: 12px;
  404. text{
  405. font-size: 12px;
  406. color: #999;
  407. margin-left: 5px;
  408. }
  409. }
  410. }
  411. }
  412. .footer{
  413. padding: 20upx 60upx;
  414. background: #FFFFFF;
  415. button{
  416. &:after{
  417. border: 0;
  418. }
  419. color: #585858;
  420. font-size: 32rpx;
  421. margin: 0 20rpx;
  422. }
  423. }
  424. }
  425. </style>