scanBarcode.vue 6.6 KB

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