scanCodePrint.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. <template>
  2. <view class="scanCodePrint-wrap flex flex_column">
  3. <view class="barCode" id="barcode"></view>
  4. <view class="info-body">
  5. <view class="flex align-center orderTj" v-if="info">
  6. <view>
  7. <view class="redText">{{info.totalQty}}</view>
  8. <view>总数量</view>
  9. </view>
  10. <view>
  11. <view>{{info.outQty}}</view>
  12. <view>已扫码</view>
  13. </view>
  14. </view>
  15. <view class="info partList" v-if="partList.length">
  16. <view class="infoList">
  17. <view class="title">配件列表</view>
  18. <view>
  19. {{partList.length}}款,共<text class="redText">{{totalNums}}</text>件
  20. </view>
  21. </view>
  22. <view v-for="item in partList" :key="item.id" class="flex align-center item-list">
  23. <view>
  24. <u-image border-radius="16" width="130" height="130" bg-color="#EBEBEB" ></u-image>
  25. </view>
  26. <view>
  27. <view class="item-name">
  28. <text>{{item.productName}}</text>
  29. </view>
  30. <view class="item-nums">
  31. <text>{{item.productCode}}</text>
  32. </view>
  33. <view class="item-head">
  34. <view>
  35. 数量:<text class="redText">{{item.totalQty}}</text>
  36. 已扫:<text>{{item.outQty}}</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 :throttle-time="100" @click="outShelfOrder" :style="{background:$config('buttonColors'),color:'#fff'}" shape="circle" type="info">确认取货</u-button>
  46. </view>
  47. </view>
  48. </template>
  49. <script>
  50. // import { findBySnShelfOrder, outShelfOrder, scanConfirmShelfOrder } from '@/api/shelf.js'
  51. // import { clzConfirm } from '@/libs/tools.js'
  52. export default {
  53. data() {
  54. return {
  55. barcode:null,
  56. shelfOrderSn: null,
  57. info: null,
  58. partList: []
  59. }
  60. },
  61. computed: {
  62. totalNums(){
  63. let ret = 0
  64. this.partList.map(item => {
  65. ret += item.totalQty
  66. })
  67. return ret
  68. }
  69. },
  70. onReady() {
  71. // 初始化摄像头
  72. this.init()
  73. },
  74. onLoad(options) {
  75. this.shelfOrderSn = options.shelfOrderSn
  76. this.getDetail()
  77. },
  78. methods: {
  79. // 获取详情
  80. getDetail(){
  81. // findBySnShelfOrder({sn: this.shelfOrderSn}).then(res => {
  82. // if(res.status == 200){
  83. // this.info = res.data
  84. // this.partList = res.data.shelfOrderDetailList
  85. // // 此单已全部扫码,是否确认取货
  86. // if(this.info.totalQty == this.info.outQty){
  87. // clzConfirm({
  88. // title: '扫码成功',
  89. // content: '此单已全部扫码,是否确认取货?',
  90. // success: (ret) => {
  91. // if(ret.confirm||ret.index==0){
  92. // _this.outShelfOrder()
  93. // }
  94. // }
  95. // })
  96. // }
  97. // }
  98. // })
  99. },
  100. // 确认取货
  101. outShelfOrder(){
  102. // if(this.info.totalQty == this.info.outQty){
  103. // outShelfOrder({id:this.info.id}).then(res => {
  104. // if(res.status == 200){
  105. // }
  106. // })
  107. // }else{
  108. // this.toashMsg("请先扫码取货")
  109. // }
  110. },
  111. // 扫码结果
  112. scanResult(qrCode){
  113. console.log(qrCode)
  114. // const _this = this
  115. // scanConfirmShelfOrder({
  116. // qrCode: qrCode,
  117. // id: _this.info.id
  118. // }).then(res => {
  119. // if(res.status == 200){
  120. // _this.toashMsg("扫码成功!")
  121. // // 刷新列表
  122. // _this.getDetail()
  123. // setTimeout(()=>{
  124. // _this.barcode.start()
  125. // },1000)
  126. // }else{
  127. // // clzConfirm({
  128. // // title: '扫码失败',
  129. // // content: res.message,
  130. // // showCancel: false,
  131. // // success: (ret) => {
  132. // // _this.barcode.start()
  133. // // }
  134. // // })
  135. // }
  136. // })
  137. },
  138. init(){
  139. const _this = this
  140. // 初始化
  141. this.barcode = plus.barcode.create('barcode', ['EAN13'], {
  142. top:'0px',
  143. left:'0px',
  144. width: '100%',
  145. height: '35%',
  146. position: 'static',
  147. frameColor: '#00aaff',
  148. scanbarColor: '#00aaff'
  149. })
  150. // 设置高度
  151. const query = uni.createSelectorQuery().in(this);
  152. query.select('#barcode').boundingClientRect(data => {
  153. this.barcode.setStyle({
  154. height: data.height + 'px' // 调整扫码控件的位置
  155. })
  156. }).exec()
  157. // 扫码成功后
  158. this.barcode.onmarked = function(type, result) {
  159. _this.scanResult(result)
  160. }
  161. // 扫码识别出错
  162. this.barcode.onerror = function(error){
  163. console.log(error)
  164. _this.toashMsg("二维码错误!")
  165. _this.barcode.start()
  166. }
  167. const currentWebview = this.$mp.page.$getAppWebview()
  168. currentWebview.append(this.barcode)
  169. this.barcode.start()
  170. }
  171. }
  172. }
  173. </script>
  174. <style lang="less">
  175. page{
  176. height: 100vh;
  177. }
  178. .scanCodePrint-wrap{
  179. height: 100%;
  180. .barCode{
  181. background-color: #000;
  182. height: 500upx;
  183. }
  184. > view{
  185. padding: 20rpx;
  186. }
  187. .info-body{
  188. flex-flow: 1;
  189. overflow: auto;
  190. height: 60%;
  191. }
  192. .redText{
  193. color: #FB1E1E;
  194. }
  195. .orderTj{
  196. padding: 20rpx;
  197. background-color: #fff;
  198. > view{
  199. text-align: center;
  200. border-right: 2rpx solid #eee;
  201. width: 50%;
  202. color: #666E75;
  203. .redText{
  204. color: #FB1E1E;
  205. }
  206. &:last-child{
  207. border: 0;
  208. }
  209. > view{
  210. color: #666E75;
  211. &:first-child{
  212. font-size: 56rpx;
  213. }
  214. }
  215. }
  216. border-radius: 20rpx;
  217. }
  218. .info{
  219. background-color: #FFFFFF;
  220. padding: 10rpx 30upx;
  221. font-size: 32rpx;
  222. margin-top: 20rpx;
  223. .infoList{
  224. display: flex;
  225. justify-content: space-between;
  226. align-items: center;
  227. padding: 20rpx 0;
  228. border-bottom: 2rpx solid #f2f2f2;
  229. .title{
  230. font-weight: bold;
  231. }
  232. > text{
  233. &:first-child{
  234. color: #666E75;
  235. }
  236. }
  237. }
  238. .item-list{
  239. border-bottom: 2rpx solid #f2f2f2;
  240. &:last-child{
  241. border: none;
  242. }
  243. > view{
  244. padding: 20rpx 0;
  245. &:first-child{
  246. margin-right: 20rpx;
  247. margin-top: 18rpx;
  248. }
  249. &:last-child{
  250. flex-grow: 1;
  251. }
  252. }
  253. .item-name{
  254. word-wrap: break-word;
  255. font-size: 32rpx;
  256. color: #333;
  257. font-weight: bold;
  258. margin-top: 10rpx;
  259. }
  260. .item-nums{
  261. padding: 10rpx 0;
  262. text{
  263. font-size: 32rpx;
  264. color: #222222;
  265. }
  266. }
  267. .item-head{
  268. display: flex;
  269. align-items: center;
  270. justify-content: space-between;
  271. color: #666;
  272. > view{
  273. &:first-child{
  274. font-size: 28rpx;
  275. text{
  276. margin-right: 30rpx;
  277. }
  278. }
  279. }
  280. .item-no{
  281. font-size: 28rpx;
  282. background: rgba(3, 54, 146, 0.15);
  283. color: #033692;
  284. border-radius: 100rpx;
  285. padding: 2rpx 30rpx;
  286. margin-right: 20rpx;
  287. display: block;
  288. }
  289. }
  290. }
  291. }
  292. .footer{
  293. padding: 20upx 40upx;
  294. background: #FFFFFF;
  295. uni-button{
  296. &:after{
  297. border: 0;
  298. }
  299. width: 90%;
  300. color: #585858;
  301. font-size: 32rpx;
  302. }
  303. }
  304. }
  305. </style>