index.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <view class="content flex flex_column">
  3. <view class="tits">请选择产品的货架层号</view>
  4. <view class="tagbox flex">
  5. <view>
  6. <view class="tag" :class="curTag==item?'active':''" v-for="item in list" :key="item" @click="curTag=curTag==item?'':item">
  7. {{item}}层
  8. </view>
  9. </view>
  10. </view>
  11. <view class="newbtn flex justify_between" v-if="curTag">
  12. <u-button shape="circle" @click="searchProduct()" size="medium">按产品编码搜索</u-button>
  13. <u-button @click="scanProduct()" type='primary' shape="circle" size="medium">扫描条形码匹配</u-button>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. data() {
  20. return {
  21. list:[],
  22. curTag: '',
  23. shelfSn: '',
  24. shelfName: ''
  25. }
  26. },
  27. onLoad(opts) {
  28. this.list = 'A、B、C、D、E、F、G、H、I、J、K、L、M、N、O、P、Q、R、S、T、U、V、W、X、Y、Z'.split('、');
  29. this.shelfName = opts.shelfName
  30. this.shelfSn = opts.shelfSn
  31. },
  32. methods: {
  33. scanProduct(){
  34. uni.redirectTo({
  35. url: "/pages/batchShelves/scanProduct?shelfSn="+this.shelfSn+'&layer='+this.curTag+'&shelfName='+this.shelfName
  36. })
  37. },
  38. searchProduct(){
  39. uni.redirectTo({
  40. url: "/pages/batchShelves/searchProduct?shelfSn="+this.shelfSn+'&layer='+this.curTag+'&shelfName='+this.shelfName
  41. })
  42. }
  43. }
  44. }
  45. </script>
  46. <style lang="less">
  47. .content{
  48. width: 100%;
  49. height: 100vh;
  50. padding: 20upx;
  51. background-color: #fff;
  52. .tits{
  53. padding: 30upx 0;
  54. text-align: center;
  55. }
  56. .tagbox{
  57. flex-grow: 1;
  58. > view{
  59. margin: 0 auto;
  60. overflow: hidden;
  61. width: 100%;
  62. .tag{
  63. width: 16%;
  64. background-color: #fff;
  65. border:1rpx solid #aeaeae;
  66. box-shadow: 2rpx 4rpx 6rpx #eee;
  67. border-radius: 15rpx;
  68. text-align: center;
  69. padding: 10rpx 0;
  70. float: left;
  71. margin: 20rpx 2%;
  72. }
  73. .active{
  74. background-color: #55aaff;
  75. border-color: #55aaff;
  76. color: #fff;
  77. }
  78. }
  79. }
  80. .newbtn{
  81. padding: 30upx;
  82. button{
  83. width: 45%;
  84. }
  85. }
  86. }
  87. </style>