goods.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. <template>
  2. <view>
  3. <view class="search-user flex-y-center ">
  4. <view class="search-content flex-y-center">
  5. <icon type="search" size="18" />
  6. <input confirm-type="search" v-model="seTval" @confirm="confirm" @input="getSearch" class="flex-grow-1"
  7. type="text" placeholder-style="font-size:26rpx" placeholder="请输入条形码、商品名称" />
  8. <view class="flex-center" style="margin-left: 10rpx;" @click.stop="onDel" v-if="seTval">
  9. <icon type="clear" size="18" />
  10. </view>
  11. </view>
  12. <view class="search-btn" @click="search">
  13. <image src="../static/images/saoma.png" mode=""></image>
  14. </view>
  15. </view>
  16. <view style="height: 110rpx;"></view>
  17. <block v-if='list.length<=0'>
  18. <no-none></no-none>
  19. <view class="tips">
  20. 请先搜索需要的商品,再进行选择
  21. </view>
  22. </block>
  23. <block v-else>
  24. <view class="goodsMain" v-for="(item,index) of list" :key='index' @click="choice(index)">
  25. <view class="goodsTitle">
  26. 条码:{{item.barcode}}
  27. </view>
  28. <view class="flex goodsItem">
  29. <view class="">
  30. <image class="goodsCover" @click.stop="previewImage(item.image)" :src="item.image"></image>
  31. </view>
  32. <view class="">
  33. <view class="goodsName">
  34. {{item.name}}
  35. </view>
  36. <view class="goodsCate">
  37. <span class='cateColor'>分类:</span> {{item.category_name}}
  38. </view>
  39. <view class="goodsUnit">
  40. <span class='cateColor'> 单位:</span> {{item.unit}}
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. </block>
  46. <view style="height: 100rpx;"></view>
  47. <view class="wyb-pagination-page" v-if="count>0 && list.length>0">
  48. <wyb-pagination :totalItems="count" :current='pages' :page-items="limit" @change="Change" />
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. import wybPagination from "@/components/wyb-pagination/wyb-pagination";
  54. export default {
  55. components: {
  56. wybPagination
  57. },
  58. data() {
  59. return {
  60. seTval: '',
  61. list: [],
  62. count: 1,
  63. limit: 10,
  64. pages: 1,
  65. keywords: '',
  66. }
  67. },
  68. methods: {
  69. choice(index){
  70. let pages = getCurrentPages(); //获取所有页面栈实例列表
  71. let nowPage = pages[pages.length - 1]; //当前页页面实例
  72. let prevPage = pages[pages.length - 2]; //上一页页面实例
  73. // this.list[index].bar_number = this.list[index].barcode;
  74. let info = {
  75. unit:this.list[index].unit,
  76. bar_number:this.list[index].barcode,
  77. name:this.list[index].name,
  78. }
  79. prevPage.$vm.cove_image = this.list[index].image;
  80. prevPage.$vm.info = info; //修改上一页data里面的sh参数值为100
  81. uni.navigateBack({
  82. delta: 1
  83. })
  84. },
  85. getSearch(e) {
  86. if (!e.detail.value) {
  87. this.keywords = "";
  88. this.http();
  89. }
  90. this.keywords = e.detail.value;
  91. },
  92. onDel() {
  93. this.seTval = '';
  94. this.keywords = "";
  95. this.http();
  96. },
  97. confirm(e) {
  98. this.keywords = e.detail.value;
  99. this.http();
  100. },
  101. search(e) {
  102. // #ifdef MP-WEIXIN
  103. uni.scanCode({
  104. success: (res)=> {
  105. console.log(res,"eeeee")
  106. this.keywords = res.result
  107. this.http();
  108. }
  109. });
  110. // #endif
  111. },
  112. Change(e) {
  113. this.pages = e.current;
  114. this.http();
  115. },
  116. // 预览图片
  117. previewImage(img) {
  118. uni.previewImage({
  119. urls: [img],
  120. });
  121. },
  122. http() {
  123. this.request({
  124. url: "Smdcshop/barcode_lists",
  125. data: {
  126. store_id: uni.getStorageSync("store_id"),
  127. page: this.pages,
  128. limit: this.limit,
  129. keywords: this.keywords,
  130. }
  131. }).then(res => {
  132. if (res.code == '200') {
  133. this.count = res.data.count;
  134. this.list = res.data.list;
  135. }
  136. })
  137. },
  138. }
  139. }
  140. </script>
  141. <style>
  142. page {
  143. background: #F1F1F1;
  144. }
  145. .search-user {
  146. position: fixed;
  147. top: 0;
  148. left: 0;
  149. width: 100%;
  150. z-index: 999;
  151. height: 100rpx;
  152. background: #FFFFFF;
  153. }
  154. .search-user .search-content {
  155. width: 83%;
  156. height: 70rpx;
  157. background: #F1F1F1;
  158. border-radius: 100rpx;
  159. padding: 0 20rpx;
  160. }
  161. .search-user .search-content icon {
  162. margin-right: 10rpx;
  163. }
  164. .search-user .search-btn {
  165. margin-left: 20rpx;
  166. font-size: 28rpx;
  167. }
  168. .search-btn image{
  169. width: 60rpx;
  170. height: 60rpx;
  171. }
  172. .goodsMain {
  173. background: #fff;
  174. padding: 0 20rpx;
  175. margin: 10rpx 20rpx;
  176. border-radius: 8rpx;
  177. }
  178. .goodsTitle {
  179. padding: 20rpx 0;
  180. border-bottom: 1rpx solid #F1F1F1;
  181. }
  182. .goodsItem {
  183. padding: 20rpx 0;
  184. font-size: 26rpx;
  185. }
  186. .goodsCover {
  187. width: 100rpx;
  188. height: 100rpx;
  189. margin-right: 20rpx;
  190. }
  191. .goodsCate {
  192. margin: 10rpx 0;
  193. }
  194. .tips {
  195. text-align: center;
  196. font-size: 26rpx;
  197. color: #999
  198. }
  199. .wyb-pagination-page {
  200. position: fixed;
  201. width: 100%;
  202. bottom: 0;
  203. background: #FFFFFF;
  204. padding: 10rpx 0;
  205. z-index: 999;
  206. }
  207. .cateColor{
  208. color: #999
  209. }
  210. </style>