scan.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. <template>
  2. <view>
  3. <headerTo act_index="2" />
  4. <!-- 圆圈扩散 -->
  5. <view v-if="list.length<=0" class="point point-flicker" @click="scan">
  6. <image src="../static/images/my_icon_6.png" class="scanTextsImgs"></image>
  7. <view class="scanTexts">扫码入库</view>
  8. </view>
  9. <!-- 圆圈扩散end -->
  10. <view class="list" v-if="list.length>0">
  11. <view class="item flex-y-center" v-for="(item,index) of list" :key='index'>
  12. <view class="flex-grow-1">
  13. <view class="ft30 box-pack-between">
  14. <view class="flex-y-center">
  15. <view class="text-1" style="width: 430rpx;">{{item.name}}</view>
  16. </view>
  17. <!-- <button @click="confirmSpecs(index)" size="mini"
  18. style="margin: 0;background: #3b93fc;color: #fff;" type="default">确定入库</button> -->
  19. </view>
  20. <block v-if="item.spec.length>0 && item.is_gg == 2">
  21. <view v-for="(goods,idx) of item.spec" :key='idx' class="item_spec">
  22. <view class="ft26 box-pack-between item-center">
  23. <view class="flex-y-center">
  24. <text class="stock">当前库存:{{goods.inventory}}</text>
  25. </view>
  26. <uni-number-box @change="changeValue" :value="goods.number" :min="-goods.inventory" :max="9999"
  27. :index='index' :idx='idx' />
  28. </view>
  29. <view class="box-pack-between ft26 pdt">
  30. <text class="specs"> 规格:¥{{goods.growth}}/{{goods.spec}}</text>
  31. <!-- <button @click="confirmSpecs(index,idx)" size="mini" style="margin: 0;background: #3b93fc;color: #fff;" type="default">确定入库</button> -->
  32. </view>
  33. </view>
  34. </block>
  35. <block v-else>
  36. <view class="ft26 box-pack-between item-center">
  37. <view class="flex-y-center">
  38. <text class="stock">当前库存:{{item.stock}}</text>
  39. </view>
  40. <uni-number-box @change="changeValue" :value="item.number" :min="-item.stock" :max="999"
  41. :index='index' />
  42. </view>
  43. <view class="box-pack-between ft26">
  44. <text class="specs"></text>
  45. </view>
  46. </block>
  47. </view>
  48. </view>
  49. <button @click="confirmSpecs(0)" style="background: #3b93fc;color: #fff;width: 650rpx;margin: 50px auto;margin-bottom: 30rpx;"
  50. type="default">确定入库</button>
  51. <button @click="cancel" style="background: #999;color: #fff;width: 650rpx;margin: 50px auto; margin-top: 0;"
  52. type="default">取消入库</button>
  53. </view>
  54. </view>
  55. </template>
  56. <script>
  57. import headerTo from "../components/header";
  58. export default {
  59. components: {
  60. headerTo,
  61. },
  62. data() {
  63. return {
  64. list: [],
  65. result:'',
  66. }
  67. },
  68. mounted() {
  69. // this.http(1101209)
  70. },
  71. methods: {
  72. //扫描核销
  73. scan() {
  74. uni.scanCode({
  75. success: (res) => {
  76. console.log(res, "eeeee")
  77. this.result=res.result;
  78. this.http()
  79. }
  80. });
  81. },
  82. cancel(){
  83. this.list=[]
  84. },
  85. // 新增减少库存
  86. changeValue({
  87. index,
  88. idx,
  89. inputValue
  90. }) {
  91. if (idx || idx === 0) {
  92. let inventory = Number(this.list[index].spec[idx].inventory)
  93. this.list[index].spec[idx].number = inputValue;
  94. } else {
  95. let stock = this.list[index].stock
  96. this.list[index].number = inputValue;
  97. }
  98. },
  99. confirmSpecs(index,idx) {
  100. let stock, specs, data;
  101. uni.showModal({
  102. title: '提示',
  103. content: `是否入库${this.list[index].name}?`,
  104. showCancel: true,
  105. cancelText: '取消',
  106. confirmText: '确定',
  107. success: res => {
  108. if(res.confirm){
  109. if (this.list[index].spec) {
  110. this.list[index].spec.forEach((v)=>{
  111. v.inventory = Number(v.inventory) + Number(v.number)
  112. })
  113. data = {
  114. spec_arr: JSON.stringify([{
  115. spec: this.list[index].spec,
  116. id: this.list[index].id,
  117. }])
  118. }
  119. } else {
  120. let stock = Number(this.list[index].stock) + Number(this.list[index].number);
  121. data = {
  122. spec_arr: JSON.stringify([{
  123. stock,
  124. id: this.list[index].id,
  125. }])
  126. }
  127. }
  128. this.enit(data)
  129. }
  130. },
  131. fail: () => {},
  132. complete: () => {}
  133. });
  134. },
  135. enit(data) {
  136. this.request({
  137. url: "Smdcshop/kucun_edit",
  138. data,
  139. }).then(res => {
  140. if (res.code == '200') {
  141. uni.showToast({
  142. title: res.message,
  143. icon: 'none'
  144. })
  145. setTimeout(()=>{
  146. this.http();
  147. },2e3)
  148. }
  149. }).catch((res) => {
  150. uni.showToast({
  151. title: res.message,
  152. icon: 'none'
  153. })
  154. });
  155. },
  156. http() {
  157. let list = [];
  158. this.request({
  159. url: "Smdcshop/kucun_code",
  160. data: {
  161. code: this.result
  162. }
  163. }).then(res => {
  164. if (res.code == '200' || res.code == 200) {
  165. list.push(
  166. res.data
  167. )
  168. list.forEach((v, i) => {
  169. v.is_fold = false
  170. if (v.spec && v.is_gg == 2 && Array.isArray(v.spec)) {
  171. v.spec.forEach((g, l) => {
  172. g.number = 0;
  173. })
  174. } else {
  175. v.number = 0
  176. }
  177. })
  178. this.list = list;
  179. }
  180. }).catch((res) => {
  181. uni.showToast({
  182. title: res.message,
  183. icon: 'none'
  184. })
  185. });
  186. },
  187. }
  188. }
  189. </script>
  190. <style>
  191. .list .item {
  192. padding: 20rpx;
  193. border-bottom: 1rpx solid #F1F1F1;
  194. }
  195. .item-center {
  196. padding: 30rpx 0;
  197. }
  198. .item_spec {
  199. padding: 0rpx 20rpx 20rpx 20rpx;
  200. border-bottom: 1rpx solid #F1F1F1;
  201. }
  202. .list .item_spec:last-child
  203. {
  204. border-bottom: none;
  205. }
  206. .specs {
  207. color: #FF5722;
  208. }
  209. .stock {
  210. color: #C9271B;
  211. }
  212. .pof {
  213. position: fixed;
  214. bottom: 0;
  215. width: 100%;
  216. }
  217. .confirm {
  218. background: #007AFF;
  219. color: #fff;
  220. margin: 0 10rpx;
  221. }
  222. .cancel {
  223. margin: 0 10rpx;
  224. }
  225. /* 圆圈扩散 */
  226. .point {
  227. width: 400rpx;
  228. height: 400rpx;
  229. position:
  230. /* absolute */
  231. ;
  232. left: 170rpx;
  233. top: 220rpx;
  234. background: linear-gradient(180deg, #6fa5ff, #438aff);
  235. position: relative;
  236. border-radius: 50%;
  237. }
  238. /* 设置动画前颜色 */
  239. .point-flicker:after {
  240. background: linear-gradient(180deg, #6fa5ff, #438aff);
  241. }
  242. /* 设置动画后颜色 */
  243. .point-flicker:before {
  244. background: linear-gradient(180deg, #6fa5ff, #438aff);
  245. }
  246. /* 设置动画 */
  247. .point-flicker:before,
  248. .point-flicker:after {
  249. content: '';
  250. width: 400rpx;
  251. height: 400rpx;
  252. position: absolute;
  253. left: 10%;
  254. top: 10%;
  255. margin-left: -40rpx;
  256. margin-top: -40rpx;
  257. border-radius: 50%;
  258. animation: warn 1.5s ease-out 0s infinite;
  259. }
  260. /* @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 */
  261. @keyframes warn {
  262. 0% {
  263. transform: scale(0.5);
  264. opacity: 1;
  265. }
  266. 30% {
  267. opacity: 1;
  268. }
  269. 100% {
  270. transform: scale(1.4);
  271. opacity: 0;
  272. }
  273. }
  274. /* 圆圈扩散 end*/
  275. .scanTextsImgs {
  276. width: 100rpx;
  277. height: 100rpx;
  278. position: absolute;
  279. left: 50%;
  280. top: 45%;
  281. transform: translate(-50%, -50%);
  282. z-index: 998;
  283. }
  284. .scanTexts {
  285. position: absolute;
  286. left: 50%;
  287. top: 70%;
  288. transform: translate(-50%, -50%);
  289. color: #fff;
  290. font-size: 36rpx;
  291. z-index: 999;
  292. }
  293. </style>