scanBarcode.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
  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" v-if="info">
  45. <u-button v-if="!hasScanFinish" :throttle-time="100" @click="scanCode" :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" :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.totalQty == this.info.confirmQty
  78. }
  79. },
  80. onReady() {
  81. // 初始化摄像头
  82. this.init()
  83. },
  84. onLoad(options) {
  85. this.shelfOrderSn = options.shelfOrderSn
  86. this.getDetail(0)
  87. },
  88. methods: {
  89. // 扫码
  90. scanCode(){
  91. // this.mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
  92. // this.mpaasScanModule.mpaasScan({
  93. // // 扫码识别类型,参数可多选,qrCode、barCode,不设置,默认识别所有
  94. // 'scanType': ['qrCode','barCode'],
  95. // // 是否隐藏相册,默认false不隐藏
  96. // 'hideAlbum': false
  97. // },
  98. // (ret) => {
  99. // // 返回值中,resp_code 表示返回结果值,10:用户取消,11:其他错误,1000:成功
  100. // // 返回值中,resp_message 表示返回结果信息
  101. // // 返回值中,resp_result 表示扫码结果,只有成功才会有返回
  102. // if(ret.resp_code == '1000'){
  103. // this.scanResult(ret.resp_result)
  104. // }
  105. // })
  106. this.mpaasScanModule = uni.requireNativePlugin("wss-scan")
  107. this.mpaasScanModule.scan(
  108. {
  109. "scanType":["QRCODE","CODE93","CODE128","DATAMATRIX"],
  110. "scanMode":"Customized",
  111. "scanStyle":{"scanFrameSizePlus":{"width":200,"height":200},"scanFrameSize":200,"scanLight":"visible","scanText":"对准物品二维码","scanTitle":"扫码取货"}
  112. },
  113. (result) => {
  114. console.log(result)
  115. if(result.scanStatus == 1){
  116. this.scanResult(result.scanValue)
  117. }
  118. })
  119. },
  120. // 获取详情
  121. getDetail(type){
  122. findBySnShelfOrder({sn: this.shelfOrderSn}).then(res => {
  123. console.log(res,'++++++++')
  124. if(res.status == 200){
  125. this.info = res.data
  126. this.partList = res.data.shelfOrderDetailList
  127. // 此单已全部扫码,是否确认取货
  128. if(this.hasScanFinish){
  129. clzConfirm({
  130. title: '扫码成功',
  131. content: '此单已全部扫码,是否确认取货?',
  132. success: (ret) => {
  133. if(ret.confirm||ret.index==0){
  134. this.outShelfOrder()
  135. }
  136. }
  137. })
  138. }else{
  139. if(type){
  140. this.confimInfo('是否继续扫码',1)
  141. }
  142. }
  143. }
  144. })
  145. },
  146. // 确认取货
  147. outShelfOrder(){
  148. if(this.hasScanFinish){
  149. outShelfOrder({sn:this.shelfOrderSn}).then(res => {
  150. console.log(res,'确认取货')
  151. if(res.status == 200){
  152. uni.$emit("refreshOrder")
  153. uni.navigateBack()
  154. }
  155. })
  156. }else{
  157. this.message("请先扫码取货")
  158. }
  159. },
  160. confimInfo(msg,type){
  161. const _this = this
  162. clzConfirm({
  163. title: type?'扫码成功':'扫码失败',
  164. content: msg,
  165. confirmText:'继续扫码',
  166. success: (ret) => {
  167. if(ret.index == 0){
  168. _this.scanCode()
  169. }
  170. }
  171. })
  172. },
  173. // 扫码结果
  174. scanResult(qrCode){
  175. const _this = this
  176. console.log(qrCode)
  177. const params = {
  178. shelfSn: qrCode.split("&")[0],
  179. productCode: qrCode.split("&")[1]
  180. }
  181. console.log(params)
  182. if(params.shelfSn != this.info.shelfSn){
  183. _this.confimInfo('该配件不属于此数字货架',0)
  184. return
  185. }
  186. scanConfirmShelfOrder({
  187. shelfOrderSn: _this.shelfOrderSn,
  188. shelfOrderDetailList:[
  189. {
  190. "productCode": params.productCode,
  191. "confirmQty": 1
  192. }
  193. ]
  194. }).then(res => {
  195. if(res.status == 200){
  196. // 刷新列表
  197. _this.getDetail(1)
  198. }else{
  199. _this.confimInfo(res.message,0)
  200. }
  201. })
  202. },
  203. message(title){
  204. uni.showToast({
  205. icon:'none',
  206. title: title
  207. })
  208. },
  209. init(){
  210. // const _this = this
  211. // // 初始化
  212. // this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
  213. // top:'0px',
  214. // left:'0px',
  215. // width: '100%',
  216. // height: '35%',
  217. // position: 'static',
  218. // frameColor: '#00aaff',
  219. // scanbarColor: '#00aaff'
  220. // });
  221. // // 设置高度
  222. // const query = uni.createSelectorQuery().in(this);
  223. // query.select('#barcode').boundingClientRect(data => {
  224. // this.barcode.setStyle({
  225. // height: data.height + 'px' // 调整扫码控件的位置
  226. // });
  227. // }).exec();
  228. // // 扫码成功后
  229. // this.barcode.onmarked = function(type, result) {
  230. // _this.scanResult(result)
  231. // }
  232. // // 扫码识别出错
  233. // this.barcode.onerror = function(error){
  234. // console.log(error)
  235. // _this.message("二维码错误!")
  236. // _this.barcode.start()
  237. // }
  238. // const currentWebview = this.$mp.page.$getAppWebview();
  239. // currentWebview.append(this.barcode);
  240. // this.barcode.start();
  241. }
  242. }
  243. }
  244. </script>
  245. <style lang="less">
  246. page {
  247. height: 100vh;
  248. }
  249. .orderScanCode-digitalShel {
  250. height: 100%;
  251. .barCode {
  252. background-color: #333;
  253. height: 20%;
  254. display: flex;
  255. align-items: center;
  256. justify-content: center;
  257. color: #fff;
  258. }
  259. > view {
  260. padding: 20rpx;
  261. }
  262. .info-body {
  263. flex-flow: 1;
  264. overflow: auto;
  265. height: 100%;
  266. }
  267. .redText {
  268. color: #fb1e1e;
  269. }
  270. .orderTj {
  271. padding: 20rpx;
  272. background-color: #fff;
  273. > view {
  274. text-align: center;
  275. border-right: 2rpx solid #eee;
  276. width: 50%;
  277. color: #666e75;
  278. .redText {
  279. color: #fb1e1e;
  280. }
  281. &:last-child {
  282. border: 0;
  283. }
  284. > view {
  285. color: #666e75;
  286. &:first-child {
  287. font-size: 56rpx;
  288. }
  289. }
  290. }
  291. border-radius: 20rpx;
  292. }
  293. .info {
  294. background-color: #ffffff;
  295. padding: 10rpx 30upx;
  296. font-size: 32rpx;
  297. margin-top: 20rpx;
  298. .infoList {
  299. display: flex;
  300. justify-content: space-between;
  301. align-items: center;
  302. padding: 20rpx 0;
  303. border-bottom: 2rpx solid #f2f2f2;
  304. .title {
  305. font-weight: bold;
  306. }
  307. > text {
  308. &:first-child {
  309. color: #666e75;
  310. }
  311. }
  312. }
  313. .item-list {
  314. border-bottom: 2rpx solid #f2f2f2;
  315. &:last-child {
  316. border: none;
  317. }
  318. > view {
  319. padding: 20rpx 0;
  320. &:first-child {
  321. margin-right: 20rpx;
  322. margin-top: 18rpx;
  323. }
  324. &:last-child {
  325. flex-grow: 1;
  326. }
  327. }
  328. .item-name {
  329. word-wrap: break-word;
  330. font-size: 32rpx;
  331. color: #333;
  332. font-weight: bold;
  333. margin-top: 10rpx;
  334. }
  335. .item-nums {
  336. padding: 10rpx 0;
  337. text {
  338. font-size: 32rpx;
  339. color: #222222;
  340. }
  341. }
  342. .item-head {
  343. display: flex;
  344. align-items: center;
  345. justify-content: space-between;
  346. color: #666;
  347. > view {
  348. &:first-child {
  349. font-size: 28rpx;
  350. text {
  351. margin-right: 30rpx;
  352. }
  353. }
  354. }
  355. .item-no {
  356. font-size: 28rpx;
  357. background: rgba(3, 54, 146, 0.15);
  358. color: #033692;
  359. border-radius: 100rpx;
  360. padding: 2rpx 30rpx;
  361. margin-right: 20rpx;
  362. display: block;
  363. }
  364. }
  365. }
  366. }
  367. .footer {
  368. padding: 20upx 40upx;
  369. background: #ffffff;
  370. uni-button {
  371. &:after {
  372. border: 0;
  373. }
  374. width: 90%;
  375. color: #585858;
  376. font-size: 32rpx;
  377. }
  378. }
  379. }
  380. </style>