bindProduct.vue 5.3 KB

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