detailModal.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. <template>
  2. <u-popup v-model="isShow" mode="bottom" height="800" border-radius="25">
  3. <view class="head u-flex u-row-between">
  4. <text>已选产品</text>
  5. <text>清空列表</text>
  6. </view>
  7. <scroll-view scroll-y class="scroll-view">
  8. <view class="partList-list-box">
  9. <view class="product flex align_center">
  10. <view class="checkbox">
  11. <u-icon name="close-circle" color="#999" size="40"></u-icon>
  12. </view>
  13. <view class="checkboxRight flex align_center flex_1">
  14. <view class="pimgs">
  15. <u-image src="`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
  16. </view>
  17. <view class="pinfo">
  18. <view class="pname">
  19. <text>A01</text>
  20. JQ-21026E
  21. </view>
  22. <view class="productName u-line-1">
  23. 名i嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
  24. </view>
  25. <view class="ptxt flex align_center">
  26. <view>
  27. 最大库容
  28. <text class="pnums">100</text>
  29. </view>
  30. <view>
  31. /货架库存
  32. <text class="pnums">20</text>
  33. </view>
  34. <view>
  35. /滞销
  36. <text class="pnums">12个月23天</text>
  37. </view>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. <view class="ptools flex align_center justify_between">
  43. <view class="ptools_l u-flex">
  44. <view>
  45. 补货在途
  46. <text class="pnums">1</text>
  47. </view>
  48. <view>
  49. /调回在途
  50. <text class="pnums">2</text>
  51. </view>
  52. </view>
  53. <view class="pcurnums flex align_center">
  54. <text>调回数量</text>
  55. <view class="u-ninput"><u-number-box color="#000" :input-height="60" bg-color="#fff" v-model="shifa" :min="0" :max="10"></u-number-box></view>
  56. </view>
  57. </view>
  58. </view>
  59. <view class="partList-list-box">
  60. <view class="product flex align_center">
  61. <view class="checkbox">
  62. <u-icon name="close-circle" color="#999" size="40"></u-icon>
  63. </view>
  64. <view class="checkboxRight flex align_center flex_1">
  65. <view class="pimgs">
  66. <u-image src="`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
  67. </view>
  68. <view class="pinfo">
  69. <view class="pname">
  70. <text>A01</text>
  71. JQ-21026E
  72. </view>
  73. <view class="productName u-line-1">
  74. 名i嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
  75. </view>
  76. <view class="ptxt flex align_center">
  77. <view>
  78. 最大库容
  79. <text class="pnums">100</text>
  80. </view>
  81. <view>
  82. /货架库存
  83. <text class="pnums">20</text>
  84. </view>
  85. <view>
  86. /滞销
  87. <text class="pnums">12个月23天</text>
  88. </view>
  89. </view>
  90. </view>
  91. </view>
  92. </view>
  93. <view class="ptools flex align_center justify_between">
  94. <view class="ptools_l u-flex">
  95. <view>
  96. 补货在途
  97. <text class="pnums">1</text>
  98. </view>
  99. <view>
  100. /调回在途
  101. <text class="pnums">2</text>
  102. </view>
  103. </view>
  104. <view class="pcurnums flex align_center">
  105. <text>调回数量</text>
  106. <view class="u-ninput"><u-number-box color="#000" :input-height="60" bg-color="#fff" v-model="shifa" :min="0" :max="10"></u-number-box></view>
  107. </view>
  108. </view>
  109. </view>
  110. <view class="partList-list-box">
  111. <view class="product flex align_center">
  112. <view class="checkbox">
  113. <u-icon name="close-circle" color="#999" size="40"></u-icon>
  114. </view>
  115. <view class="checkboxRight flex align_center flex_1">
  116. <view class="pimgs">
  117. <u-image src="`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
  118. </view>
  119. <view class="pinfo">
  120. <view class="pname">
  121. <text>A01</text>
  122. JQ-21026E
  123. </view>
  124. <view class="productName u-line-1">
  125. 名i嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
  126. </view>
  127. <view class="ptxt flex align_center">
  128. <view>
  129. 最大库容
  130. <text class="pnums">100</text>
  131. </view>
  132. <view>
  133. /货架库存
  134. <text class="pnums">20</text>
  135. </view>
  136. <view>
  137. /滞销
  138. <text class="pnums">12个月23天</text>
  139. </view>
  140. </view>
  141. </view>
  142. </view>
  143. </view>
  144. <view class="ptools flex align_center justify_between">
  145. <view class="ptools_l u-flex">
  146. <view>
  147. 补货在途
  148. <text class="pnums">1</text>
  149. </view>
  150. <view>
  151. /调回在途
  152. <text class="pnums">2</text>
  153. </view>
  154. </view>
  155. <view class="pcurnums flex align_center">
  156. <text>调回数量</text>
  157. <view class="u-ninput"><u-number-box color="#000" :input-height="60" bg-color="#fff" v-model="shifa" :min="0" :max="10"></u-number-box></view>
  158. </view>
  159. </view>
  160. </view>
  161. <view class="partList-list-box">
  162. <view class="product flex align_center">
  163. <view class="checkbox">
  164. <u-icon name="close-circle" color="#999" size="40"></u-icon>
  165. </view>
  166. <view class="checkboxRight flex align_center flex_1">
  167. <view class="pimgs">
  168. <u-image src="`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
  169. </view>
  170. <view class="pinfo">
  171. <view class="pname">
  172. <text>A01</text>
  173. JQ-21026E
  174. </view>
  175. <view class="productName u-line-1">
  176. 名i嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
  177. </view>
  178. <view class="ptxt flex align_center">
  179. <view>
  180. 最大库容
  181. <text class="pnums">100</text>
  182. </view>
  183. <view>
  184. /货架库存
  185. <text class="pnums">20</text>
  186. </view>
  187. <view>
  188. /滞销
  189. <text class="pnums">12个月23天</text>
  190. </view>
  191. </view>
  192. </view>
  193. </view>
  194. </view>
  195. <view class="ptools flex align_center justify_between">
  196. <view class="ptools_l u-flex">
  197. <view>
  198. 补货在途
  199. <text class="pnums">1</text>
  200. </view>
  201. <view>
  202. /调回在途
  203. <text class="pnums">2</text>
  204. </view>
  205. </view>
  206. <view class="pcurnums flex align_center">
  207. <text>调回数量</text>
  208. <view class="u-ninput"><u-number-box color="#000" :input-height="60" bg-color="#fff" v-model="shifa" :min="0" :max="10"></u-number-box></view>
  209. </view>
  210. </view>
  211. </view>
  212. </scroll-view>
  213. </u-popup>
  214. </template>
  215. <script>
  216. export default {
  217. props: {
  218. detailShow: { // 弹框显示状态
  219. type: Boolean,
  220. default: false
  221. }
  222. },
  223. data() {
  224. return {
  225. isShow:this.detailShow,
  226. list:[]
  227. }
  228. },
  229. methods: {
  230. // 确认
  231. handleConfirm(){
  232. this.$emit("ok")
  233. this.isShow = false
  234. },
  235. // 获取列表数据
  236. getList(){
  237. queryWaitListByShelfSn({shelfSn: this.infoData.shelfSn}).then(res => {
  238. if(res.status == 200){
  239. this.list = res.data||[]
  240. }
  241. })
  242. }
  243. },
  244. watch: {
  245. // 父页面传过来的弹框状态
  246. detailShow (newValue, oldValue) {
  247. this.isShow = newValue
  248. },
  249. // 重定义的弹框状态
  250. isShow (newValue, oldValue) {
  251. if (!newValue) {
  252. this.$emit('close')
  253. }else{
  254. this.getList()
  255. }
  256. }
  257. }
  258. }
  259. </script>
  260. <style lang="less" scoped>
  261. .head{
  262. width: 100%;
  263. box-sizing: border-box;
  264. padding:30rpx 20rpx;
  265. background: #e0e0e0;
  266. text{
  267. &:first-child{
  268. font-weight: bold;
  269. }
  270. }
  271. }
  272. .scroll-view{
  273. height: 702rpx;
  274. }
  275. .partList-list-box {
  276. padding: 20rpx;
  277. border-bottom: 2rpx solid #f5f5f5;
  278. &:last-child {
  279. border: 0;
  280. }
  281. .product {
  282. flex-grow: 1;
  283. .checkbox {
  284. width: 60rpx;
  285. }
  286. .checkboxRight{
  287. width: calc(100% - 60rpx);
  288. }
  289. .pinfo {
  290. width: calc(100% - 148rpx);
  291. flex-grow: 1;
  292. padding-left: 20rpx;
  293. .pname {
  294. font-size: 32rpx;
  295. color: #191919;
  296. margin-bottom: 10rpx;
  297. text {
  298. font-weight: normal;
  299. margin-right: 6rpx;
  300. padding: 0 10rpx;
  301. background: rgba(3, 54, 146, 0.15);
  302. border-radius: 100rpx;
  303. color: #033692;
  304. font-size: 28rpx;
  305. }
  306. }
  307. .productName{
  308. width: 100%;
  309. font-size: 32rpx;
  310. color: #191919;
  311. font-weight: bold;
  312. margin:10rpx 0;
  313. }
  314. .pno {
  315. background-color: rgba(3, 54, 146, 0.15);
  316. border-radius: 50rpx;
  317. padding: 0 20rpx;
  318. color: #033692;
  319. font-size: 24rpx;
  320. margin-right: 10rpx;
  321. }
  322. .ptxt {
  323. font-size: 24rpx;
  324. color: #999;
  325. .pnums {
  326. color: #222;
  327. padding: 0 4upx;
  328. }
  329. }
  330. }
  331. }
  332. .ptools {
  333. margin-top: 30rpx;
  334. margin-left: 60rpx;
  335. .ptools_l{
  336. font-size: 24rpx;
  337. color: #999;
  338. .pnums {
  339. color: #ff5500;
  340. padding: 0 4rpx;
  341. }
  342. }
  343. .pcurnums {
  344. > text {
  345. font-size: 24rpx;
  346. color: #999;
  347. margin-right: 20rpx;
  348. }
  349. }
  350. .u-ninput {
  351. border: 2rpx solid #eee;
  352. border-radius: 50rpx;
  353. padding: 0 6rpx;
  354. }
  355. /deep/ .u-icon-disabled {
  356. background: #fff !important;
  357. }
  358. /deep/ .u-number-input {
  359. margin: 0 0;
  360. border: 2rpx solid #eee;
  361. border-top: 0;
  362. border-bottom: 0;
  363. }
  364. /deep/ .u-icon-plus,
  365. /deep/ .u-icon-minus {
  366. border-radius: 50rpx;
  367. }
  368. }
  369. }
  370. </style>