scanBarcode.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. <template>
  2. <view class="orderScanCode-digitalShel flex flex_column">
  3. <view class="info-body">
  4. <view class="flex align-center orderTj" v-if="info">
  5. <view>
  6. <view class="redText">{{ info.totalQty }}</view>
  7. <view>总数量</view>
  8. </view>
  9. <view>
  10. <view>{{ info.confirmQty }}</view>
  11. <view>已扫码</view>
  12. </view>
  13. </view>
  14. <view class="info partList" v-if="partList.length">
  15. <view class="infoList">
  16. <view class="title">配件列表</view>
  17. <view>
  18. {{ partList.length }}款,共
  19. <text class="redText">{{ totalNums }}</text>
  20. </view>
  21. </view>
  22. <view v-for="item in partList" :key="item.productSn" class="flex align-center item-list">
  23. <view><u-image :src="item.images" border-radius="16" width="130" height="130" bg-color="#EBEBEB"></u-image></view>
  24. <view>
  25. <view class="item-name">
  26. <text>{{ item.productName }}</text>
  27. </view>
  28. <view class="item-nums">
  29. <text>{{ item.productCode }}</text>
  30. </view>
  31. <view class="item-head">
  32. <view>
  33. 数量:
  34. <text class="redText">{{ item.totalQty }}</text>
  35. 已扫:
  36. <text>{{ item.confirmQty }}</text>
  37. </view>
  38. <text class="item-no">{{ item.shelfPlaceCode }}</text>
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. <view class="footer flex align_center justify_center" v-if="info">
  45. <u-button v-if="!hasScanFinish" :throttle-time="100" @click="scanCode" :custom-style="{ background: '#1283d4', color: '#fff' }" shape="circle" type="info">
  46. <u-icon name="scan" color="#fff" size="32"></u-icon>
  47. 点击扫码
  48. </u-button>
  49. <u-button v-else :throttle-time="100" @click="outShelfOrder" :custom-style="{ background: '#1283d4', color: '#fff' }" shape="circle" type="info">
  50. 确认取货
  51. </u-button>
  52. </view>
  53. </view>
  54. </template>
  55. <script>
  56. import { findBySnShelfOrder, outShelfOrder, scanConfirmShelfOrder } from '@/api/shelf.js'
  57. import { clzConfirm, urlToObj } from '@/libs/tools.js'
  58. export default {
  59. data() {
  60. return {
  61. barcode:null,
  62. shelfOrderSn: null,
  63. info: null,
  64. partList: [],
  65. mpaasScanModule: null
  66. }
  67. },
  68. computed: {
  69. totalNums(){
  70. let ret = 0
  71. this.partList.map(item => {
  72. ret += item.totalQty
  73. })
  74. return ret
  75. },
  76. hasScanFinish(){
  77. return this.info&&this.info.totalQty == this.info.confirmQty
  78. }
  79. },
  80. onReady() {
  81. },
  82. onLoad(options) {
  83. this.shelfOrderSn = options.shelfOrderSn
  84. this.getDetail(0)
  85. },
  86. methods: {
  87. // 扫码
  88. scanCode(){
  89. // 允许从相机和相册扫码
  90. uni.scanCode({
  91. success: function (res) {
  92. console.log('条码类型:' + res.scanType);
  93. console.log('条码内容:' + res.result);
  94. this.scanResult(res.result)
  95. }
  96. });
  97. },
  98. // 获取详情
  99. getDetail(type){
  100. findBySnShelfOrder({sn: this.shelfOrderSn}).then(res => {
  101. if(res.status == 200){
  102. this.info = res.data
  103. this.partList = res.data.shelfOrderDetailList
  104. // 此单已全部扫码,是否确认取货
  105. if(this.hasScanFinish){
  106. clzConfirm({
  107. title: '扫码成功',
  108. content: '此单已全部扫码,是否确认取货?',
  109. success: (ret) => {
  110. if(ret.confirm||ret.index==0){
  111. this.outShelfOrder()
  112. }
  113. }
  114. })
  115. }else{
  116. if(type){
  117. this.confimInfo('是否继续扫码',1)
  118. }
  119. }
  120. }
  121. })
  122. },
  123. // 确认取货
  124. outShelfOrder(){
  125. if(this.hasScanFinish){
  126. outShelfOrder({sn:this.shelfOrderSn}).then(res => {
  127. console.log(res,'确认取货')
  128. if(res.status == 200){
  129. uni.$emit("refreshOrder")
  130. uni.navigateBack()
  131. }
  132. })
  133. }else{
  134. this.message("请先扫码取货")
  135. }
  136. },
  137. confimInfo(msg,type){
  138. const _this = this
  139. clzConfirm({
  140. title: type?'扫码成功':'扫码失败',
  141. content: msg,
  142. confirmText:'继续扫码',
  143. success: (ret) => {
  144. if(ret.index == 0){
  145. _this.scanCode()
  146. }
  147. }
  148. })
  149. },
  150. // 扫码结果
  151. scanResult(qrCode){
  152. const _this = this
  153. console.log(qrCode)
  154. const params = {
  155. shelfSn: qrCode.split("&")[0],
  156. productCode: qrCode.split("&")[1]
  157. }
  158. console.log(params)
  159. if(params.shelfSn != this.info.shelfSn){
  160. _this.confimInfo('该配件不属于此数字货架',0)
  161. return
  162. }
  163. scanConfirmShelfOrder({
  164. shelfOrderSn: _this.shelfOrderSn,
  165. shelfOrderDetailList:[
  166. {
  167. "productCode": params.productCode,
  168. "confirmQty": 1
  169. }
  170. ]
  171. }).then(res => {
  172. if(res.status == 200){
  173. // 刷新列表
  174. _this.getDetail(1)
  175. }else{
  176. _this.confimInfo(res.message,0)
  177. }
  178. })
  179. },
  180. message(title){
  181. uni.showToast({
  182. icon:'none',
  183. title: title
  184. })
  185. },
  186. }
  187. }
  188. </script>
  189. <style lang="less">
  190. page {
  191. height: 100vh;
  192. }
  193. .orderScanCode-digitalShel {
  194. height: 100%;
  195. .barCode {
  196. background-color: #333;
  197. height: 20%;
  198. display: flex;
  199. align-items: center;
  200. justify-content: center;
  201. color: #fff;
  202. }
  203. > view {
  204. padding: 20rpx;
  205. }
  206. .info-body {
  207. flex-flow: 1;
  208. overflow: auto;
  209. height: 100%;
  210. }
  211. .redText {
  212. color: #fb1e1e;
  213. }
  214. .orderTj {
  215. padding: 20rpx;
  216. background-color: #fff;
  217. > view {
  218. text-align: center;
  219. border-right: 2rpx solid #eee;
  220. width: 50%;
  221. color: #666e75;
  222. .redText {
  223. color: #fb1e1e;
  224. }
  225. &:last-child {
  226. border: 0;
  227. }
  228. > view {
  229. color: #666e75;
  230. &:first-child {
  231. font-size: 56rpx;
  232. }
  233. }
  234. }
  235. border-radius: 20rpx;
  236. }
  237. .info {
  238. background-color: #ffffff;
  239. padding: 10rpx 30upx;
  240. font-size: 32rpx;
  241. margin-top: 20rpx;
  242. .infoList {
  243. display: flex;
  244. justify-content: space-between;
  245. align-items: center;
  246. padding: 20rpx 0;
  247. border-bottom: 2rpx solid #f2f2f2;
  248. .title {
  249. font-weight: bold;
  250. }
  251. > text {
  252. &:first-child {
  253. color: #666e75;
  254. }
  255. }
  256. }
  257. .item-list {
  258. border-bottom: 2rpx solid #f2f2f2;
  259. &:last-child {
  260. border: none;
  261. }
  262. > view {
  263. padding: 20rpx 0;
  264. &:first-child {
  265. margin-right: 20rpx;
  266. margin-top: 18rpx;
  267. }
  268. &:last-child {
  269. flex-grow: 1;
  270. }
  271. }
  272. .item-name {
  273. word-wrap: break-word;
  274. font-size: 32rpx;
  275. color: #333;
  276. font-weight: bold;
  277. margin-top: 10rpx;
  278. }
  279. .item-nums {
  280. padding: 10rpx 0;
  281. text {
  282. font-size: 32rpx;
  283. color: #222222;
  284. }
  285. }
  286. .item-head {
  287. display: flex;
  288. align-items: center;
  289. justify-content: space-between;
  290. color: #666;
  291. > view {
  292. &:first-child {
  293. font-size: 28rpx;
  294. text {
  295. margin-right: 30rpx;
  296. }
  297. }
  298. }
  299. .item-no {
  300. font-size: 28rpx;
  301. background: rgba(3, 54, 146, 0.15);
  302. color: #033692;
  303. border-radius: 100rpx;
  304. padding: 2rpx 30rpx;
  305. margin-right: 20rpx;
  306. display: block;
  307. }
  308. }
  309. }
  310. }
  311. .footer {
  312. padding: 20upx 40upx;
  313. background: #ffffff;
  314. uni-button {
  315. &:after {
  316. border: 0;
  317. }
  318. width: 90%;
  319. color: #585858;
  320. font-size: 32rpx;
  321. }
  322. }
  323. }
  324. </style>