bindProduct.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <template>
  2. <view class="productList flex flex_column">
  3. <view class="productList-search">
  4. <view class="search flex align_center">
  5. <view class="input">
  6. <u-search
  7. v-model="queryWord"
  8. @input="$u.debounce(getProductList, 800)"
  9. @custom="$u.debounce(getProductList, 500)"
  10. @search="$u.debounce(getProductList, 500)"
  11. @clear="clearSearch"
  12. bg-color="#fff"
  13. :show-action="false"
  14. placeholder="请输入产品编码查询并选择产品"></u-search>
  15. </view>
  16. <view class="icon" @click="toScan">
  17. <u-icon name="scan"></u-icon>
  18. </view>
  19. </view>
  20. </view>
  21. <view class="productList-body">
  22. <view class="nav-right-item" v-for="(item, index) in productList" :key="item.id" @click="choose(item)">
  23. <view class="item-info">
  24. {{item.code}}
  25. </view>
  26. <view class="arrow">
  27. <u-icon name="arrow-right" color="#969da3" size="28"></u-icon>
  28. </view>
  29. </view>
  30. <view v-if="productList&&productList.length==0">
  31. <u-empty v-if="status!='loading'" :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="180" :text="noDataText" mode="list" :margin-top="50"></u-empty>
  32. </view>
  33. <view style="padding: 20upx;" v-if="total>pageSize || status=='loading'">
  34. <u-loadmore :status="status" :load-text="loadText" />
  35. </view>
  36. </view>
  37. </view>
  38. </template>
  39. <script>
  40. import { bindProductList } from '@/api/shelf'
  41. export default {
  42. data() {
  43. return {
  44. queryWord: '',
  45. isGobleSearch: false,
  46. productList: [],
  47. pageNo:1,
  48. pageSize: 20,
  49. total: 0, // 列表总数
  50. noDataText: '暂无产品',
  51. status: 'nomore',
  52. customerSn: null,
  53. shelfSn: null,
  54. loadText: {
  55. loading: '搜索中..',
  56. nomore: '最多显示前20条匹配的产品,请尝试输入更多内容'
  57. }
  58. }
  59. },
  60. onLoad(opts) {
  61. this.customerSn = opts.customerSn||''
  62. this.shelfSn = opts.shelfSn
  63. console.log(this.customerSn)
  64. },
  65. methods: {
  66. clearSearch(){
  67. this.queryWord = ''
  68. this.pageNo = 1
  69. this.total = 0
  70. this.productList = []
  71. this.getProductList()
  72. },
  73. // 获取产品列表
  74. getProductList(){
  75. if(this.queryWord == ''){
  76. this.pageNo = 1
  77. this.total = 0
  78. this.productList = []
  79. return
  80. }
  81. const _this = this
  82. let params = {
  83. pageNo: this.pageNo,
  84. pageSize: this.pageSize,
  85. code: this.queryWord,
  86. customerSn: this.customerSn
  87. }
  88. _this.status = 'loading'
  89. bindProductList(params).then(res => {
  90. uni.hideLoading()
  91. if(res.status == 200){
  92. let list = res.data.list
  93. if (list && list.length){
  94. // 分页 拼接数据
  95. if (_this.pageNo != 1) {
  96. _this.productList = _this.productList ? _this.productList.concat(list) : list
  97. } else {
  98. _this.productList = list
  99. }
  100. this.total = res.data.count
  101. _this.status = 'nomore'
  102. } else {
  103. _this.productList = list || []
  104. this.total = 0
  105. _this.status = 'nomore'
  106. _this.noDataText = '没有查询到相关产品'
  107. }
  108. }else{
  109. _this.status = 'nomore'
  110. _this.productList = []
  111. _this.total = 0
  112. _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试'
  113. }
  114. })
  115. },
  116. // 选择产品
  117. choose(item){
  118. uni.$emit("addProductToHw",item)
  119. uni.navigateBack()
  120. },
  121. // 扫描
  122. toScan(){
  123. this.mpaasScanModule = uni.requireNativePlugin("wss-scan")
  124. this.mpaasScanModule.scan(
  125. {
  126. "scanMode":"Customized",
  127. "scanStyle":{
  128. "scanFrameSizePlus":{"width":250,"height":250},
  129. "scanFrameSize":200,
  130. "scanLight":"visible",
  131. "scanText":"对准条形码/二维码进行识别",
  132. "scanTitle":"扫码搜索货位产品",
  133. }
  134. },
  135. (result) => {
  136. console.log(result)
  137. if(result.scanStatus == 1){
  138. this.scanResult(result)
  139. }
  140. })
  141. },
  142. // 扫描结果
  143. scanResult(data){
  144. const params = {
  145. pageNo: 1,
  146. pageSize:1,
  147. customerSn: this.customerSn
  148. }
  149. // 二维码
  150. if(data.scanType == 'QRCODE'){
  151. const ret = data.scanValue.split("&")
  152. params.code = ret[1] // 产品编码
  153. }else{
  154. params.qrCode = data.scanValue
  155. }
  156. bindProductList(params).then(res => {
  157. console.log(res)
  158. if(res.status == 200){
  159. if(res.data&&res.data.list.length){
  160. this.choose(res.data.list[0])
  161. }else{
  162. uni.showToast({
  163. icon: "none",
  164. title: "没有查找到此产品,请重新扫描",
  165. duration: 5000
  166. })
  167. }
  168. }
  169. })
  170. }
  171. }
  172. }
  173. </script>
  174. <style lang="less">
  175. .productList{
  176. width: 100%;
  177. height: 100vh;
  178. .productList-search{
  179. padding: 20rpx 30rpx;
  180. background-color: #FFFFFF;
  181. .search{
  182. padding: 0.1rem;
  183. border-radius: 50rpx;
  184. border:1rpx solid #eee;
  185. .input{
  186. flex-grow: 1;
  187. padding: 4rpx;
  188. }
  189. .icon{
  190. width: 13%;
  191. text-align: center;
  192. font-size: 46rpx;
  193. color: #999;
  194. }
  195. }
  196. }
  197. .productList-body{
  198. flex-grow: 1;
  199. background-color: #fff;
  200. padding: 0 40upx;
  201. overflow: auto;
  202. .nav-right-item{
  203. padding:20upx 0;
  204. border-bottom: 2rpx solid #f5f5f5;
  205. display: flex;
  206. align-items: center;
  207. &:active{
  208. background: #f8f8f8;
  209. }
  210. .arrow{
  211. text-align: right;
  212. padding-left: 20rpx;
  213. }
  214. .item-info{
  215. font-size: 30upx;
  216. flex-grow:1;
  217. }
  218. }
  219. }
  220. }
  221. </style>