choosePartResult.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
  1. <template>
  2. <view class="choosePartResult flex flex_column">
  3. <view class="contHead" v-if="state" :style="{background:state==1?'#066cff':'#ff5500',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"> </u-icon>
  8. <text>{{statusText}}</text>
  9. </view>
  10. <view class="messageText" v-html="info&&info.shelfOrder&&info.shelfOrder.remindMessage||''"></view>
  11. <view class="messageText" v-if="redPacketData&&redPacketData.totalRewardAmount&&!showMask">
  12. 您已获得<text>{{redPacketData.totalRewardAmount}}</text>元红包奖励,可在“更多-红包奖励”中查看
  13. </view>
  14. <!-- <view class="button-group"> -->
  15. <!-- <button :hover-stop-propagation="true" @click="toScan" v-if="state == 1&&partList.length" class="back" size="mini">扫码拿货</button> -->
  16. <!-- <button :hover-stop-propagation="true" :loading="loading" @click="onceQh" v-if="state == 1&&partList.length" class="action" size="mini">一键拿货</button> -->
  17. <!-- <button :hover-stop-propagation="true" @click="toSettle" v-if="state == 0" class="actionFail" size="mini">去结算</button> -->
  18. <!-- </view> -->
  19. </view>
  20. </view>
  21. </view>
  22. <view class="order-body">
  23. <view class="info partList" v-if="state == 1">
  24. <u-tabs :list="[{name:'货架订单',value:0},{name:'急送订单',value:1}]" :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
  25. <view v-if="current==0">
  26. <view class="infoList" v-if="partList.length">
  27. <view class="title"><u-icon name="info-circle"></u-icon> 配件已出库,请按照指定位置取用</view>
  28. <view>
  29. {{partList.length}}款,共<text class="redText">{{totalNums}}</text>件
  30. </view>
  31. </view>
  32. <view v-else>
  33. <u-empty :src="`/static/nodata.png`" icon-size="180" text="暂无货架订单" mode="list" :margin-top="30"></u-empty>
  34. </view>
  35. <view v-for="item in partList" :key="item.id" class="flex align-center item-list">
  36. <view>
  37. <u-image :src="item.images+'?x-oss-process=image/resize,m_fixed,h_120,w_120,color_ffffff'" border-radius="16" width="130" height="130" bg-color="#EBEBEB" ></u-image>
  38. </view>
  39. <view>
  40. <view class="item-name">
  41. <text>{{item.productName}}</text>
  42. </view>
  43. <view class="item-nums">
  44. X <text>{{item.totalQty}}{{item.unit||''}}</text>
  45. </view>
  46. <view class="item-head">
  47. <text>{{item.productCode}}</text>
  48. <text class="item-no">{{item.shelfPlaceCode}}</text>
  49. </view>
  50. <view class="flex" v-if="item.productTypeSn3=='543766811373752320'">
  51. <text style="width: 5rem;color:#999;">原厂编码:</text>
  52. <view style="width: 70%;flex-grow: 1;">
  53. <u-tag :text="item.origCode" mode="light" borderColor="#ffffff" type="warning" size="large"></u-tag>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. <view v-if="current==1">
  60. <view class="infoList" v-if="tempPartList.length">
  61. <view class="title"><u-icon name="info-circle"></u-icon> 请耐心等待汽配经销商进行配送</view>
  62. <view>
  63. {{tempPartList.length}}款,共<text class="redText">{{totalTempNums}}</text>件
  64. </view>
  65. </view>
  66. <view v-else>
  67. <u-empty :src="`/static/nodata.png`" icon-size="180" text="暂无急送订单" mode="list" :margin-top="30"></u-empty>
  68. </view>
  69. <view v-for="item in tempPartList" :key="item.id" class="flex align-center item-list">
  70. <view>
  71. <u-image :src="item.images+'?x-oss-process=image/resize,m_fixed,h_120,w_120,color_ffffff'" border-radius="16" width="130" height="130" bg-color="#EBEBEB" ></u-image>
  72. </view>
  73. <view>
  74. <view class="item-name">
  75. <text>{{item.productName}}</text>
  76. </view>
  77. <view class="item-nums">
  78. X <text>{{item.qty}}{{item.unit||''}}</text>
  79. </view>
  80. <view class="item-head">
  81. <text>{{item.productCode}}</text>
  82. <span class="item-no" v-if="item.billState == 'WAIT_AUDIT'">待审核</span>
  83. <span class="item-no" v-if="item.billState == 'AUDIT_REJECT'">审核不通过</span>
  84. <span class="item-no" v-if="item.billState == 'WAIT_OUT_WAREHOUSE'">待收货</span>
  85. <span class="item-no" v-if="item.billState == 'FINISH'">已完结</span>
  86. </view>
  87. <view class="flex" v-if="item.productTypeSn3=='543766811373752320'">
  88. <text style="width: 5rem;color:#999;">原厂编码:</text>
  89. <view style="width: 70%;flex-grow: 1;">
  90. <u-tag :text="item.origCode" mode="light" borderColor="#ffffff" type="warning" size="large"></u-tag>
  91. </view>
  92. </view>
  93. </view>
  94. </view>
  95. </view>
  96. </view>
  97. <view class="info" v-if="info && info.shelfOrder && state == 1 && current == 0">
  98. <view class="infoList">
  99. <view class="title">单据信息</view>
  100. <view class="statu"></view>
  101. </view>
  102. <view class="infoList">
  103. <text>订单编号</text>
  104. <text>{{info.shelfOrder.shelfOrderNo||'--'}}</text>
  105. </view>
  106. <view class="infoList">
  107. <text>下单时间</text>
  108. <text>{{info.shelfOrder.createDate||'--'}}</text>
  109. </view>
  110. <view class="infoList">
  111. <text>下单人员</text>
  112. <text>{{info.shelfOrder.orderPersonName || '--'}}</text>
  113. </view>
  114. </view>
  115. <view class="info" v-if="info && info.shelfTempBill && state == 1 && current == 1">
  116. <view class="infoList">
  117. <view class="title">单据信息</view>
  118. <view class="statu"></view>
  119. </view>
  120. <view class="infoList">
  121. <text>订单编号</text>
  122. <text>{{info.shelfTempBill.tempNo||'--'}}</text>
  123. </view>
  124. <view class="infoList">
  125. <text>下单时间</text>
  126. <text>{{info.shelfTempBill.tempDate||'--'}}</text>
  127. </view>
  128. <view class="infoList">
  129. <text>下单人员</text>
  130. <text>{{info.shelfTempBill.personName || '--'}}</text>
  131. </view>
  132. </view>
  133. </view>
  134. <!-- 红包 -->
  135. <u-mask :show="showMask">
  136. <view class="imageWarp flex flex_column justify_center align_center" style="width:100%;height:100vh;">
  137. <view style="position: relative;">
  138. <u-image src="/pagesA/static/hb.png" width="700" height="657" @click="showMask=false"></u-image>
  139. <view style="font-size: 60rpx;color:#fff;position: absolute;top:50%;text-align: center;width: 100%;">
  140. {{redPacketData&&redPacketData.totalRewardAmount||'0.00'}} <text style="font-size: 26rpx;margin-left: 10rpx;">元</text>
  141. </view>
  142. </view>
  143. </view>
  144. </u-mask>
  145. </view>
  146. </template>
  147. <script>
  148. import moment from 'moment'
  149. import { findBySnShelfOrder, takeGoods, rewardOrderFindBySn } from '@/api/shelf'
  150. export default {
  151. name: 'choosePartResult',
  152. components: {
  153. },
  154. data() {
  155. return {
  156. loading: false,
  157. info: null,
  158. statusText: '',
  159. statusIcon: '', // 结算状态icon
  160. partList: [], // 配件列表
  161. tempPartList: [],
  162. state: null,
  163. current: 0,
  164. shelfOrderSn: '',
  165. showMask: false,
  166. redPacketData: null
  167. }
  168. },
  169. onUnload() {
  170. this.$store.state.vuex_tempData = null
  171. },
  172. onLoad(option) {
  173. this.state = option.state
  174. // 更改标题栏背景色
  175. uni.setNavigationBarColor({
  176. frontColor: '#ffffff',
  177. backgroundColor: option.state==1 ? '#066cff':'#ff5500',
  178. })
  179. this.info = this.$store.state.vuex_tempData
  180. },
  181. onShow(){
  182. uni.showLoading({
  183. title: '加载中...'
  184. })
  185. if(this.state==1){
  186. this.statusText = '拿货成功';
  187. this.statusIcon = 'checkmark-circle';
  188. // 获取配件列表
  189. this.partList = this.info.shelfOrder ? this.info.shelfOrder.shelfOrderDetailList : [];
  190. this.current = this.partList.length ? 0 : 1;
  191. this.tempPartList = this.info.shelfTempBill ? this.info.shelfTempBill.detailList : [];
  192. this.shelfOrderSn = this.info.shelfOrder ? this.info.shelfOrder.shelfOrderSn : '';
  193. // 是否有红包活动奖励
  194. this.getOrderRedReward()
  195. }else{
  196. this.statusText = '拿货失败'
  197. this.statusIcon = 'close-circle'
  198. }
  199. this.$nextTick(()=>{
  200. uni.hideLoading()
  201. })
  202. },
  203. computed: {
  204. totalNums(){
  205. let ret = 0
  206. if(this.partList){
  207. this.partList.map(item => {
  208. ret += item.totalQty
  209. })
  210. }
  211. return ret
  212. },
  213. totalTempNums(){
  214. let ret = 0
  215. if(this.tempPartList){
  216. this.tempPartList.map(item => {
  217. ret += item.qty
  218. })
  219. }
  220. return ret
  221. }
  222. },
  223. methods: {
  224. back(){
  225. uni.navigateBack()
  226. },
  227. changeTab(index){
  228. this.current = index
  229. },
  230. // 扫码拿货
  231. toScan(){
  232. uni.redirectTo({
  233. url:"/pagesA/digitalShelf/scanBarcode/scanBarcode?shelfOrderSn="+this.shelfOrderSn
  234. })
  235. },
  236. // 盘点是否有红包奖励
  237. getOrderRedReward(){
  238. uni.showLoading({
  239. title: "正在加载...",
  240. mask: true
  241. })
  242. rewardOrderFindBySn({orderSn:this.shelfOrderSn}).then(res => {
  243. if(res.status == 200 && res.data){
  244. this.showMask = true
  245. this.redPacketData = res.data
  246. }
  247. uni.hideLoading()
  248. })
  249. },
  250. // 一键拿货
  251. onceQh(item,index){
  252. const _this = this
  253. uni.showModal({
  254. title: '提示',
  255. content: '确认一键拿货吗?',
  256. success: (ret) => {
  257. if(ret.confirm){
  258. _this.loading = true
  259. takeGoods({sn:_this.shelfOrderSn}).then(res => {
  260. if(res.status == 200){
  261. uni.navigateBack()
  262. uni.$emit("refreshOrder")
  263. }
  264. uni.showToast({
  265. title: res.message,
  266. icon:"none"
  267. })
  268. _this.loading = false
  269. })
  270. }
  271. }
  272. })
  273. },
  274. // 去结算
  275. toSettle(){
  276. uni.redirectTo({
  277. url:"/pagesA/digitalShelf/settlementManage/settlementManage"
  278. })
  279. },
  280. message(title){
  281. uni.showToast({
  282. icon:'none',
  283. title: title
  284. })
  285. },
  286. }
  287. }
  288. </script>
  289. <style lang="less">
  290. page{
  291. height: 100%;
  292. }
  293. .choosePartResult{
  294. height: 100%;
  295. .order-body{
  296. flex-grow: 1;
  297. overflow: auto;
  298. }
  299. .contHead {
  300. background-color: white;
  301. margin-top: -20rpx;
  302. .statusH{
  303. > view{
  304. padding: 10upx 12%;
  305. font-size: 34upx;
  306. }
  307. .status-row{
  308. font-size: 42upx;
  309. margin-top: 20rpx;
  310. text{
  311. margin-left: 10rpx;
  312. }
  313. }
  314. .messageText{
  315. font-size: 30upx;
  316. text-align: center;
  317. color: #ebef09;
  318. text{
  319. color: #ff9900;
  320. font-size: 38upx;
  321. }
  322. padding: 10rpx 0 10rpx;
  323. }
  324. .button-group{
  325. padding: 20rpx 0;
  326. button{
  327. background: none;
  328. margin: 0 30rpx;
  329. border-radius: 100rpx;
  330. font-size: 32rpx;
  331. }
  332. .back{
  333. background: #fff;
  334. color: #0485F6;
  335. }
  336. .action{
  337. background: #fff;
  338. color: #0485F6;
  339. }
  340. .actionFail{
  341. background: #fff;
  342. color: #FF5728;
  343. }
  344. }
  345. }
  346. }
  347. .info{
  348. background-color: #FFFFFF;
  349. padding: 10rpx 30upx;
  350. font-size: 32rpx;
  351. margin-bottom: 20rpx;
  352. .infoList{
  353. display: flex;
  354. align-items: center;
  355. justify-content: space-between;
  356. padding:20rpx 0;
  357. border-bottom: 2rpx solid #f2f2f2;
  358. .title{
  359. color: #bf660b;
  360. font-size: 28rpx;
  361. }
  362. > text{
  363. &:first-child{
  364. color: #666E75;
  365. }
  366. &:last-child{
  367. width: 80%;
  368. text-align: right;
  369. }
  370. }
  371. .redText{
  372. color: red;
  373. }
  374. }
  375. .item-list{
  376. border-bottom: 2rpx solid #f2f2f2;
  377. &:last-child{
  378. border: none;
  379. }
  380. > view{
  381. padding: 20rpx 0;
  382. &:first-child{
  383. margin-right: 20rpx;
  384. margin-top: 18rpx;
  385. }
  386. &:last-child{
  387. flex-grow: 1;
  388. }
  389. }
  390. .item-name{
  391. word-wrap: break-word;
  392. font-size: 32rpx;
  393. color: #333;
  394. font-weight: bold;
  395. margin-top: 10rpx;
  396. }
  397. .item-nums{
  398. padding: 10rpx 0;
  399. color: #999;
  400. font-size: 24rpx;
  401. text{
  402. font-size: 32rpx;
  403. color: #666E75;
  404. margin-left: 10rpx;
  405. }
  406. }
  407. .item-head{
  408. display: flex;
  409. align-items: center;
  410. justify-content: space-between;
  411. font-size: 32rpx;
  412. color: #666;
  413. margin-bottom: 10rpx;
  414. .item-no{
  415. background: rgba(3, 54, 146, 0.15);
  416. color: #033692;
  417. border-radius: 100rpx;
  418. padding: 2rpx 30rpx;
  419. margin-right: 20rpx;
  420. display: block;
  421. }
  422. }
  423. }
  424. }
  425. }
  426. </style>