queryByCode.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. <template>
  2. <view class="content flex flex_column">
  3. <uni-nav-bar left-icon="arrowleft" title="按编码查询" @clickLeft="back" statusBar fixed></uni-nav-bar>
  4. <view class="check-list">
  5. <scroll-view scroll-y type="custom" class="scroll-view" @scrolltolower="onreachBottom">
  6. <sticky-header>
  7. <view class="searchBar">
  8. <uni-search-bar
  9. radius="100"
  10. focus
  11. cancelButton="none"
  12. placeholder="请输入产品编码搜索"
  13. bg-color="#f3f3f3"
  14. @input="change"
  15. @confirm="search"
  16. @blur="search"
  17. @clear="clearSearch"
  18. v-model="queryWord"
  19. clearButton="auto"/>
  20. </view>
  21. </sticky-header>
  22. <view class="partList-list-box" v-for="item in partList" :key="item.id">
  23. <view class="product flex align_center" @click="toEdit(item)">
  24. <view class="flex align_center flex_1">
  25. <view class="pimgs">
  26. <u-image :src="item.images?item.images:`/static/def_imgs.png`" width="128" height="128" border-radius="10"></u-image>
  27. </view>
  28. <view class="pinfo">
  29. <view class="pname flex align_center justify_between">
  30. <view class="code"><text>{{item.shelfPlaceCode}}</text>{{item.code}}</view>
  31. </view>
  32. <view class="flex align_center" v-if="item.productTypeSn=='543766811373752320'&&item.origCode" style="padding-top: 5px;">
  33. <text class="item-detail-text">原厂编码:</text>
  34. <view style="width: 50%;flex-grow: 1;">
  35. <uni-tag :text="item.origCode" inverted :circle="true" type="warning"></uni-tag>
  36. </view>
  37. </view>
  38. <view class="ptxt">
  39. <view>
  40. <text class="pcode">{{item.name}}</text>
  41. </view>
  42. </view>
  43. <view class="pname flex align_center justify_between">
  44. <view class="pcode">
  45. <text class="item-price" v-if="showCarPrice">价格:{{item.price?'¥'+item.price:'暂无'}}</text>
  46. <text class="item-price" v-if="showCostPrice">价格:{{item.cost?'¥'+item.cost:'暂无'}}</text>
  47. </view>
  48. <view class="kc">库存:<text>{{item.currentInven}}</text>{{item.unit}}</view>
  49. </view>
  50. </view>
  51. </view>
  52. <view class="flex align_center justify_center">
  53. <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
  54. </view>
  55. </view>
  56. </view>
  57. <view style="padding: 20upx;">
  58. <sklineTemp v-if="partList.length==0 && status!='loading'" :text="noDataText"/>
  59. <uni-load-more v-if="(total>=partList.length&&partList.length)||status=='loading'" :status="status"/>
  60. </view>
  61. </scroll-view>
  62. </view>
  63. </view>
  64. </template>
  65. <script>
  66. import sklineTemp from '@/components/skline/sklineTemp.vue'
  67. import { getShelfProductList,findShelfUserParam } from '@/api/shelf'
  68. export default {
  69. components:{
  70. sklineTemp
  71. },
  72. data() {
  73. return {
  74. queryWord: '',
  75. shelfName:'',
  76. shelfSn: '',
  77. pageNo:1,
  78. pageSize: 20,
  79. total: 0, // 列表总数
  80. noDataText: '暂无产品',
  81. status: 'nomore',
  82. partList: [],
  83. priceShowVal: null, // 是否可以查看所有价格
  84. showCarPrice: false, // 显示车主价
  85. showCostPrice: false, // 显示成本价
  86. }
  87. },
  88. onLoad(opts) {
  89. this.shelfSn = this.$store.state.vuex_storeShelf.shelfSn
  90. uni.$on("updateQueryByCodeList",()=>{
  91. this.getpartList()
  92. })
  93. // 价格显示权限
  94. this.getShowPriceType()
  95. },
  96. computed: {
  97. userInfo(){
  98. return this.$store.state.vuex_userInfo
  99. },
  100. isAdmin(){
  101. return this.userInfo.superAdmin == 1
  102. }
  103. },
  104. onUnload() {
  105. uni.$off("updateQueryByCodeList")
  106. },
  107. methods: {
  108. back(){
  109. uni.navigateBack()
  110. },
  111. getShowPriceType(){
  112. findShelfUserParam({shelfSn: this.shelfSn}).then(res => {
  113. this.priceShowVal = res.data ? res.data.carOwnerPrice == '1' && res.data.purchasesPrice == '1' : false
  114. // 选中了2中价格,则从列表显示价格中取值
  115. if(this.priceShowVal){
  116. // 进货价
  117. this.showCostPrice = res.data.priceShowType == 'PURCHASES_PRICE'
  118. // 车主价
  119. this.showCarPrice = res.data.priceShowType == 'CAR_OWNER_PRICE'
  120. }else{
  121. // 进货价
  122. this.showCostPrice = res.data ? res.data.purchasesPrice == '1' : false
  123. // 车主价
  124. this.showCarPrice = res.data ? res.data.carOwnerPrice == '1' : false
  125. }
  126. })
  127. },
  128. //拿货
  129. toEdit(item){
  130. if(item.currentInven){
  131. const params = {
  132. shelfSn: this.shelfSn,
  133. billSource: 'product_code',
  134. showPrice: this.showCarPrice ? item.price : (this.showCostPrice?item.cost:'')
  135. }
  136. this.$store.state.vuex_tempData = Object.assign(params, item)
  137. uni.navigateTo({
  138. url: '/pagesA/queryByCode/confirmQh'
  139. })
  140. }else{
  141. uni.showToast({
  142. icon:'none',
  143. title: '库存不足,不能拿货!',
  144. duration: 4000
  145. })
  146. }
  147. },
  148. change(v){
  149. if(v==''){
  150. this.clearSearch()
  151. }
  152. },
  153. clearSearch(){
  154. this.queryWord = ''
  155. this.pageNo = 1
  156. this.partList = []
  157. },
  158. search(){
  159. if(this.queryWord == ''){
  160. return
  161. }
  162. this.pageNo = 1
  163. this.partList = []
  164. this.getpartList()
  165. },
  166. // 获取数字货架列表
  167. getpartList(){
  168. const _this = this
  169. let params = {
  170. pageNo: this.pageNo,
  171. pageSize: this.pageSize,
  172. code: this.queryWord.trim(),
  173. }
  174. _this.status = 'loading'
  175. getShelfProductList(params).then(res => {
  176. uni.hideLoading()
  177. if(res.status == 200){
  178. let list = res.data.list
  179. if (list && list.length){
  180. // 分页 拼接数据
  181. if (_this.pageNo != 1) {
  182. _this.partList = _this.partList ? _this.partList.concat(list) : list
  183. } else {
  184. _this.partList = list
  185. }
  186. this.total = res.data.count
  187. if (_this.partList.length == res.data.count) {
  188. _this.status = 'nomore'
  189. } else {
  190. _this.status = 'loadmore'
  191. }
  192. } else {
  193. _this.partList = list || []
  194. this.total = 0
  195. _this.status = 'nomore'
  196. }
  197. _this.noDataText = '暂无匹配产品'
  198. }else{
  199. _this.status = 'loadmore'
  200. _this.partList = []
  201. _this.total = 0
  202. _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试'
  203. }
  204. this.showTab = false
  205. })
  206. },
  207. // 加载更多
  208. onreachBottom () {
  209. if(this.partList.length < this.total ){
  210. this.pageNo++
  211. this.getpartList()
  212. }else{
  213. this.status = "nomore"
  214. }
  215. },
  216. }
  217. }
  218. </script>
  219. <style lang="less">
  220. .content{
  221. height: 100vh;
  222. width: 100%;
  223. padding: 0;
  224. background: #fff;
  225. .check-list{
  226. flex-grow: 1;
  227. background: #f8f8f8;
  228. .scroll-view{
  229. height: 100%;
  230. box-sizing: border-box;
  231. .searchBar{
  232. background-color: #fff;
  233. }
  234. }
  235. .partList-list-box{
  236. padding: 10rpx 20rpx;
  237. &:last-child{
  238. border:0;
  239. }
  240. .product{
  241. flex-grow: 1;
  242. padding: 20rpx;
  243. background-color: #fff;
  244. border-radius: 10rpx;
  245. box-shadow: 1px 1px 3px #eee;
  246. &:active{
  247. opacity: 0.6;
  248. background-color: #f8f8f8;
  249. }
  250. .pinfo{
  251. flex-grow: 1;
  252. padding-left: 20rpx;
  253. width: 80%;
  254. /deep/ .uni-tag{
  255. word-break: break-all;
  256. font-size: 28rpx;
  257. color: #0fab04eee;
  258. border: 0;
  259. padding: 0.2rem 0.3rem;
  260. }
  261. .item-detail-text{
  262. color: #999;
  263. }
  264. .pname{
  265. font-size: 28rpx;
  266. color: #191919;
  267. .code{
  268. display: flex;
  269. align-items: center;
  270. text{
  271. font-weight: normal;
  272. margin-right: 6rpx;
  273. padding: 0 10rpx;
  274. background: rgba(3, 54, 146, 0.15);
  275. border-radius: 20rpx;
  276. color: #033692;
  277. font-size: 24rpx;
  278. }
  279. }
  280. .kc{
  281. display: flex;
  282. align-items: center;
  283. color: #999;
  284. text{
  285. color: #333;
  286. }
  287. }
  288. }
  289. .ptxt{
  290. font-size: 28rpx;
  291. color: #333;
  292. font-weight: bold;
  293. margin: 10rpx 0;
  294. .pnums{
  295. color: #222;
  296. }
  297. }
  298. }
  299. }
  300. }
  301. }
  302. }
  303. </style>