startCheck.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899
  1. <template>
  2. <view class="content flex flex_column">
  3. <view class="searchBar">
  4. <view class="p-title flex align_center">
  5. <text></text>
  6. <view class="shelfName">
  7. <view>{{nowData.shelfName}}</view>
  8. </view>
  9. <view v-if="placeTab.length" class="btns" @click="showTab = true">筛选<u-icon size="20" name="arrow-down"></u-icon></view>
  10. </view>
  11. <view class="search flex align_center">
  12. <view class="input">
  13. <u-search
  14. v-model="queryWord"
  15. @custom="getpartList"
  16. @search="getpartList"
  17. @clear="clearSearch"
  18. @input="$u.debounce(changeSearch, 800)"
  19. bg-color="#fff"
  20. :show-action="false"
  21. placeholder="请输入产品编码或名称搜索"></u-search>
  22. </view>
  23. <view class="icon" @click="toScan">
  24. <u-icon name="scan"></u-icon>
  25. </view>
  26. </view>
  27. </view>
  28. <view class="check-list">
  29. <scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom">
  30. <view class="partList-list-box" v-for="item in partList" :key="item.id">
  31. <view class="product" @click="toEdit(item)">
  32. <view class="flex align_center flex_1">
  33. <view class="pimgs">
  34. <text v-if="hasChecked(item)">已选</text>
  35. <u-image :src="item.productEntity&&item.productEntity.images?item.productEntity.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
  36. </view>
  37. <view class="pinfo">
  38. <view class="pname">
  39. <text>{{item.shelfPlaceCode}}</text>{{item.productEntity&&item.productEntity.code}}
  40. </view>
  41. <view class="ptxt flex align_center justify_between">
  42. <view>
  43. <text class="pcode">{{item.productEntity&&item.productEntity.productName}}</text>
  44. </view>
  45. </view>
  46. <view class="item-detail">
  47. <view>
  48. 可用库存:
  49. <text class="item-detail-text">{{item.currQty}}</text>
  50. {{item.productEntity&&item.productEntity.unit}}
  51. </view>
  52. <view>
  53. 冻结库存:
  54. <text class="item-detail-text">{{item.freezeQty}}</text>
  55. {{item.productEntity&&item.productEntity.unit}}
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. <view v-if="partList&&partList.length==0">
  63. <u-empty v-if="status!='loading'" :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="180" :text="noDataText" mode="list" :margin-top="50"></u-empty>
  64. </view>
  65. <view style="padding: 20upx;" v-if="total>pageSize || status=='loading'">
  66. <u-loadmore :status="status" />
  67. </view>
  68. </scroll-view>
  69. </view>
  70. <!-- 底部栏 -->
  71. <view class="footer-bar flex align_center">
  72. <view class="f-left" :style="{background:orderTotal?$config('primaryColor'):''}" @click="openCart">
  73. <u-icon name="order" size="45"></u-icon>
  74. <u-badge type="error" size="mini" :offset="[-10,-10]" :count="orderTotal"></u-badge>
  75. </view>
  76. <view class="f-mid">
  77. <view v-if="detail">
  78. 盘盈总数:<text>{{detail.totalProfitQty}}</text>
  79. 盘亏总数:<text>{{detail.totalLossQty}}</text>
  80. </view>
  81. </view>
  82. <view class="f-btns">
  83. <u-button size="medium" @click="submitOrder" :custom-style="customBtnStyle" shape="circle" type="primary" hover-class="none" >提交盘点单</u-button>
  84. </view>
  85. </view>
  86. <!-- 已选配件 购物车 -->
  87. <div class="cpb_cart-mask" v-if="showCart">
  88. <div class="cpb_cart-box">
  89. <div class="cpb_close flex align-center justify_center" @click="showCart=false">
  90. <u-icon name="close"></u-icon>
  91. </div>
  92. <div class="cpb_cart-tit">
  93. <view>已选配件</view>
  94. <view class="cpb_heji flex align_center justify_between">
  95. <text @click="clearDetail">清空列表</text>
  96. <view v-if="detail">
  97. 盈亏总数量:
  98. <text>
  99. {{detail.totalProfitLossQty}}
  100. </text>
  101. 盈亏总金额:
  102. <text>
  103. ¥{{detail.totalProfitLossCost}}
  104. </text>
  105. </view>
  106. </view>
  107. </div>
  108. <div class="cpb_cart-list">
  109. <u-swipe-action
  110. :show="item.show"
  111. :btn-width="120"
  112. :index="index"
  113. @click="delDetail"
  114. v-for="(item, index) in chooseList"
  115. :key="item.id"
  116. :options="options"
  117. >
  118. <view class="nav-right-item flex">
  119. <view class="uni-col-2">
  120. <u-image :src="item.product&&item.product.images?item.product.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="100" height="100" border-radius="30"></u-image>
  121. </view>
  122. <view class="item-info uni-col-10">
  123. <view class="item-name">
  124. <text>{{item.shelfPlaceCode}}</text>
  125. {{item.product.productName}}
  126. </view>
  127. <view class="item-detail">
  128. <view class="item-detail-info align_center flex justify_between">
  129. <view>
  130. {{item.productCode}}
  131. </view>
  132. <view class="flex justify_end">
  133. <text class="item-detail-text">
  134. 可用:{{item.stockQty?item.stockQty:0}} {{item.product&&item.product.unit}}
  135. </text>
  136. <text class="item-detail-text">
  137. 冻结:{{item.freezeQty?item.freezeQty:0}} {{item.product&&item.product.unit}}
  138. </text>
  139. </view>
  140. </view>
  141. </view>
  142. <view class="item-detail">
  143. <view class="item-detail-info">
  144. <view class="flex justify_between">
  145. <view></view>
  146. <view class="item-detail-text">
  147. 实际可用:
  148. <u-number-box
  149. v-model="item.checkQty"
  150. @minus="cartChangeNums"
  151. @plus="cartChangeNums"
  152. @blur="cartChangeNums"
  153. :index="'cart_'+item.id"
  154. :max="999999"></u-number-box>
  155. </view>
  156. </view>
  157. </view>
  158. </view>
  159. </view>
  160. </view>
  161. </u-swipe-action>
  162. </div>
  163. </div>
  164. </div>
  165. <!-- 编辑弹框 -->
  166. <editModal v-if="editModal" :openModal="editModal" :infoData="tempData" @close="editModal=false" @addProduct="addProduct"></editModal>
  167. <!-- 筛选项 -->
  168. <u-popup v-model="showTab" mode="right" width="70%">
  169. <view class="tabBox flex flex_column">
  170. <view class="tabs">
  171. <view>
  172. <view :class="'available'==curType?'active':''" @click="curType=curType=='available'?'':'available'">有可用库存的产品</view>
  173. <view :class="'blocked'==curType?'active':''" @click="curType=curType=='blocked'?'':'blocked'">有冻结库存的产品</view>
  174. </view>
  175. <view class="flex">
  176. <view :class="item==curTab?'active':''" v-for="item in placeTab" :key="item" @click="curTab=curTab==item?'':item">{{item}}层</view>
  177. </view>
  178. </view>
  179. <view class="btns">
  180. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClear">重置</u-button>
  181. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="clearSearch">查询</u-button>
  182. </view>
  183. </view>
  184. </u-popup>
  185. </view>
  186. </template>
  187. <script>
  188. import { getShelfProductList,getProductPlace } from '@/api/shelf'
  189. import {
  190. stockCheckDetailQueryList,
  191. stockCheckDetailDelete,
  192. stockCheckSave,
  193. stockCheckBySn,
  194. stockCheckDetailSave,
  195. deleteByStockCheckSn
  196. } from '@/api/stockCheck'
  197. import editModal from './editModal'
  198. import { clzConfirm } from '@/libs/tools'
  199. export default {
  200. components: {
  201. editModal,
  202. },
  203. data() {
  204. return {
  205. queryWord: '',
  206. nowData:null,
  207. stockCheckSn: null,
  208. detail:null,
  209. pageNo:1,
  210. pageSize: 20,
  211. total: 0, // 列表总数
  212. noDataText: '暂无产品',
  213. status: 'loading',
  214. partList: [],
  215. showTab: false,
  216. placeTab: [],
  217. curTab: '',
  218. curType: '',
  219. customBtnStyle: { // 自定义按钮样式
  220. borderColor: this.$config('primaryColor'),
  221. backgroundColor: this.$config('primaryColor'),
  222. color: '#fff'
  223. },
  224. orderTotal: 0,
  225. showCart: false,
  226. chooseList: [],
  227. editModal: false,
  228. tempData: null,
  229. options: [
  230. {
  231. text: '删除',
  232. style: {
  233. backgroundColor: '#dd524d'
  234. }
  235. }
  236. ]
  237. }
  238. },
  239. onNavigationBarButtonTap(e) {
  240. if(e.index == 0){
  241. uni.navigateTo({
  242. url: '/pages/stockCheck/checkRecord?shelfSn='+this.nowData.shelfSn
  243. })
  244. }
  245. },
  246. onBackPress(e) {
  247. if(this.showTab||this.editModal||this.showCart) {
  248. this.showTab = false;
  249. this.editModal = false;
  250. this.showCart = false;
  251. return true;
  252. }
  253. },
  254. onLoad(opts) {
  255. this.nowData = JSON.parse(decodeURIComponent(opts.data));
  256. this.stockCheckSn = this.nowData.stockCheckSn
  257. this.getpartList()
  258. this.getShelfPlace()
  259. if(this.stockCheckSn){
  260. // 获取盘点单明细
  261. this.getDetail()
  262. // 获取盘点明细列表
  263. this.getChooseList()
  264. }
  265. // 重置盘点单
  266. uni.$on("resetStockCheck",()=>{
  267. this.resetStockCheck()
  268. })
  269. },
  270. onUnload() {
  271. uni.$off("resetStockCheck")
  272. },
  273. methods: {
  274. // 重置盘点单
  275. resetStockCheck(){
  276. this.chooseList = []
  277. this.orderTotal = 0
  278. this.stockCheckSn = null
  279. this.detail = null
  280. this.tempData = null
  281. this.queryWord = ''
  282. this.showCart = false
  283. this.handleClear()
  284. },
  285. // 获取盘点明细列表
  286. getChooseList(){
  287. stockCheckDetailQueryList({
  288. stockCheckSn: this.stockCheckSn
  289. }).then(res => {
  290. this.chooseList = res.data || []
  291. this.orderTotal = this.chooseList.length
  292. })
  293. },
  294. // 详细
  295. getDetail(){
  296. stockCheckBySn({stockCheckSn: this.stockCheckSn}).then(res => {
  297. this.detail = res.data || null
  298. })
  299. },
  300. //添加产品
  301. toEdit(item){
  302. const data = this.hasChecked(item)
  303. console.log(data)
  304. // 修改
  305. if(data){
  306. data.productEntity = data.product
  307. data.currQty = data.stockQty
  308. this.tempData = data
  309. }else{
  310. // 添加
  311. item.checkQty = item.currQty
  312. this.tempData = item
  313. }
  314. this.editModal = true
  315. },
  316. // 添加产品明细
  317. addProduct(data){
  318. const _this = this
  319. this.editModal = false
  320. // 是否第一次添加产品
  321. if(this.orderTotal==0){
  322. clzConfirm({
  323. title: '提示',
  324. content: '开始盘点后,不能再使用与出入库有关的功能,确认开始盘点吗?',
  325. success (ret) {
  326. if (ret.confirm || ret.index == 0) {
  327. // 先创建盘点单
  328. _this.creatOrder(data)
  329. }
  330. }
  331. })
  332. }else{
  333. uni.showLoading({
  334. title:"正在保存.."
  335. })
  336. this.saveProduct(data)
  337. }
  338. },
  339. // 创建盘点单
  340. creatOrder(data){
  341. uni.showLoading({
  342. title:"正在保存.."
  343. })
  344. stockCheckSave({
  345. shelfSn: this.nowData.shelfSn,
  346. totalCategory: this.nowData.totalCategory,
  347. totalStockQty: this.nowData.totalStockQty,
  348. totalFreezeQty: this.nowData.totalFreezeQty
  349. }).then(res => {
  350. if(res.status == 200){
  351. this.detail = res.data || null
  352. this.stockCheckSn = res.data.stockCheckSn
  353. this.saveProduct(data)
  354. }else{
  355. uni.hideLoading()
  356. }
  357. })
  358. },
  359. // 添加产品
  360. saveProduct(data){
  361. stockCheckDetailSave({
  362. stockCheckSn: this.detail.stockCheckSn,
  363. stockCheckNo: this.detail.stockCheckNo,
  364. ...data
  365. }).then(res => {
  366. if(res.status == 200){
  367. this.getDetail()
  368. this.getChooseList()
  369. uni.showToast({
  370. icon:'none',
  371. title: res.message
  372. })
  373. }
  374. setTimeout(()=>{
  375. uni.hideLoading()
  376. },1000)
  377. })
  378. },
  379. // 打开购物车
  380. openCart(){
  381. if(this.orderTotal){
  382. this.showCart = !this.showCart
  383. }else{
  384. uni.showToast({
  385. icon: 'none',
  386. title: '请先添加产品'
  387. })
  388. }
  389. },
  390. // 清空购物车
  391. clearDetail(){
  392. const _this = this
  393. clzConfirm({
  394. title: '提示',
  395. content: '确认将所有产品移出盘点单吗?',
  396. success (ret) {
  397. if (ret.confirm || ret.index == 0) {
  398. uni.showLoading({
  399. title:"正在删除.."
  400. })
  401. deleteByStockCheckSn({ stockCheckSn: _this.stockCheckSn }).then(res => {
  402. if (res.status == 200) {
  403. _this.showCart = false
  404. _this.getDetail()
  405. _this.getChooseList()
  406. }
  407. uni.hideLoading()
  408. })
  409. }
  410. }
  411. })
  412. },
  413. // 修改数量
  414. cartChangeNums(v){
  415. console.log(v,this.showCart)
  416. const data = this.chooseList.find(item => item.id == v.index.split('_')[1])
  417. uni.showLoading({
  418. title:"正在保存.."
  419. })
  420. this.saveProduct(data)
  421. },
  422. // 删除盘点详细
  423. delDetail(a,b){
  424. if(b==0){
  425. const data = this.chooseList[a]
  426. stockCheckDetailDelete({stockCheckDetailSn: data.stockCheckDetailSn}).then(res=>{
  427. if(res.status == 200){
  428. this.chooseList.splice(a,1)
  429. this.orderTotal = this.chooseList.length
  430. // 删除最后一个后刷新列表
  431. if(this.orderTotal == 0){
  432. this.showCart = false
  433. this.getChooseList()
  434. }
  435. this.getDetail()
  436. }
  437. })
  438. }
  439. },
  440. // 是否已选
  441. hasChecked(data){
  442. return this.chooseList.find(item => item.shelfPlaceCode == data.shelfPlaceCode && item.productSn == data.productSn)
  443. },
  444. // 获取货位号
  445. getShelfPlace(flag){
  446. getProductPlace({ shelfSn: this.nowData.shelfSn }).then(res => {
  447. if (res.status == 200) {
  448. for(let a in res.data){
  449. this.placeTab.push(a)
  450. }
  451. // 排序
  452. this.placeTab.sort(function(a,b){ return (a+'').localeCompare(b+'');});
  453. if(!flag){
  454. this.curTab = ''
  455. }
  456. } else {
  457. this.placeTab = []
  458. }
  459. })
  460. },
  461. handleClear(){
  462. this.curTab = ''
  463. this.curType = ''
  464. this.clearSearch()
  465. },
  466. clearSearch(){
  467. this.queryWord = ''
  468. this.changeSearch()
  469. },
  470. changeSearch(){
  471. this.pageNo = 1
  472. this.partList = []
  473. this.getpartList()
  474. },
  475. // 获取数字货架列表
  476. getpartList(){
  477. const _this = this
  478. let params = {
  479. pageNo: this.pageNo,
  480. pageSize: this.pageSize,
  481. shelfSn: this.nowData.shelfSn,
  482. queryWord: this.queryWord,
  483. shelfPlaceCodeHead: this.curTab,
  484. currQtyFlag: this.curType=='available' ? 1 : '',
  485. freezeQtyFlag: this.curType=='blocked' ? 1 : '',
  486. enableFlag: 1
  487. }
  488. _this.status = 'loading'
  489. getShelfProductList(params).then(res => {
  490. uni.hideLoading()
  491. if(res.status == 200){
  492. let list = res.data.list
  493. console.log(list)
  494. if (list && list.length){
  495. // 分页 拼接数据
  496. if (_this.pageNo != 1) {
  497. _this.partList = _this.partList ? _this.partList.concat(list) : list
  498. } else {
  499. _this.partList = list
  500. }
  501. this.total = res.data.count
  502. if (_this.partList.length == res.data.count) {
  503. _this.status = 'nomore'
  504. } else {
  505. _this.status = 'loadmore'
  506. }
  507. } else {
  508. _this.partList = list || []
  509. this.total = 0
  510. _this.status = 'nomore'
  511. }
  512. _this.noDataText = '暂无匹配产品'
  513. }else{
  514. _this.status = 'loadmore'
  515. _this.partList = []
  516. _this.total = 0
  517. _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试'
  518. }
  519. this.showTab = false
  520. })
  521. },
  522. // 加载更多
  523. onreachBottom () {
  524. if(this.partList.length < this.total ){
  525. this.pageNo++
  526. this.getpartList()
  527. }else{
  528. this.status = "nomore"
  529. }
  530. },
  531. // 提交盘点单
  532. submitOrder(){
  533. if(this.chooseList.length){
  534. uni.navigateTo({
  535. url: '/pages/stockCheck/submitStockCheck?stockCheckSn='+this.stockCheckSn+'&type=submit'
  536. })
  537. }else{
  538. uni.showToast({
  539. icon: 'none',
  540. title: '请先添加产品'
  541. })
  542. }
  543. },
  544. // 扫描
  545. toScan(){
  546. this.mpaasScanModule = uni.requireNativePlugin("wss-scan")
  547. this.mpaasScanModule.scan(
  548. {
  549. "scanMode":"Customized",
  550. "scanStyle":{
  551. "scanFrameSizePlus":{"width":250,"height":250},
  552. "scanFrameSize":200,
  553. "scanLight":"visible",
  554. "scanText":"对准条形码/二维码进行识别",
  555. "scanTitle":"扫码搜索货位产品",
  556. }
  557. },
  558. (result) => {
  559. if(result.scanStatus == 1){
  560. this.scanResult(result)
  561. }
  562. })
  563. },
  564. // 扫描结果
  565. scanResult(data){
  566. const params = {
  567. pageNo: 1,
  568. pageSize:1,
  569. shelfSn: this.nowData.shelfSn
  570. }
  571. // 二维码
  572. if(data.scanType == 'QRCODE'){
  573. const ret = data.scanValue.split("&")
  574. params.queryWord = ret[1] // 产品编码
  575. }else{
  576. params.qrCode = data.scanValue
  577. }
  578. getShelfProductList(params).then(res => {
  579. console.log(res)
  580. if(res.status == 200){
  581. if(res.data&&res.data.list.length){
  582. this.toEdit(res.data.list[0])
  583. }else{
  584. uni.showToast({
  585. icon: "none",
  586. title: "产品不属于此货架,请重新扫描",
  587. duration: 5000
  588. })
  589. }
  590. }
  591. })
  592. }
  593. }
  594. }
  595. </script>
  596. <style lang="less">
  597. .content{
  598. height: 100vh;
  599. width: 100%;
  600. background: #fff;
  601. .searchBar{
  602. padding: 0 0.8rem 0.3rem;
  603. .p-title{
  604. padding: 0 15rpx;
  605. display: flex;
  606. align-items: center;
  607. color: #222;
  608. font-size: 30rpx;
  609. > text{
  610. display: block;
  611. height: 30rpx;
  612. width: 6rpx;
  613. background: #0485F6;
  614. margin-right: 10rpx;
  615. border-radius: 10rpx;
  616. }
  617. .shelfName{
  618. flex-grow: 1;
  619. font-weight: bold;
  620. width: 80%;
  621. > view{
  622. overflow: hidden;
  623. white-space: nowrap;
  624. text-overflow: ellipsis;
  625. }
  626. }
  627. .btns{
  628. width:100rpx;
  629. text-align: right;
  630. font-size: 28rpx;
  631. color: #0485F6;
  632. }
  633. }
  634. .search{
  635. margin-top: 15upx;
  636. padding: 0.1rem;
  637. border-radius: 50rpx;
  638. border:1rpx solid #eee;
  639. .input{
  640. flex-grow: 1;
  641. padding: 4rpx;
  642. }
  643. .icon{
  644. width: 13%;
  645. text-align: center;
  646. font-size: 46rpx;
  647. color: #999;
  648. }
  649. }
  650. }
  651. .check-list{
  652. padding: 0 0.5rem;
  653. flex-grow: 1;
  654. .scroll-view{
  655. height: calc(100vh - 260rpx);
  656. box-sizing: border-box;
  657. }
  658. .partList-list-box{
  659. padding: 20rpx 30rpx;
  660. border-bottom: 2rpx solid #f5f5f5;
  661. &:last-child{
  662. border:0;
  663. }
  664. .product{
  665. flex-grow: 1;
  666. &:active{
  667. opacity: 0.6;
  668. background-color: #f8f8f8;
  669. }
  670. .pimgs{
  671. position: relative;
  672. border:2rpx solid #eee;
  673. border-radius: 15rpx;
  674. padding: 5rpx;
  675. > text{
  676. position: absolute;
  677. left: 0;
  678. bottom:0;
  679. z-index: 500;
  680. width: 100%;
  681. text-align: center;
  682. background: rgba(255, 0, 0, 0.6);
  683. color: #fff;
  684. font-size: 20upx;
  685. }
  686. }
  687. .item-detail{
  688. margin-top: 10rpx;
  689. display: flex;
  690. align-items: center;
  691. justify-content: space-between;
  692. color: #9DA8B5;
  693. font-size: 26upx;
  694. .item-detail-text{
  695. font-size: 26upx;
  696. color: #333;
  697. }
  698. }
  699. .pinfo{
  700. flex-grow: 1;
  701. padding-left: 20rpx;
  702. .pname{
  703. font-size: 28rpx;
  704. color: #191919;
  705. text{
  706. font-weight: normal;
  707. margin-right: 6rpx;
  708. padding: 0 10rpx;
  709. background: rgba(3, 54, 146, 0.15);
  710. border-radius: 100rpx;
  711. color: #033692;
  712. font-size: 24rpx;
  713. }
  714. }
  715. .ptxt{
  716. font-size: 28rpx;
  717. color: #333;
  718. font-weight: bold;
  719. margin-top: 10upx;
  720. .pnums{
  721. color: #222;
  722. }
  723. }
  724. }
  725. }
  726. }
  727. }
  728. .footer-bar{
  729. background-color: #f8f8f8;
  730. padding: 20upx;
  731. .f-left{
  732. background-color: #d8d8d8;
  733. padding: 15upx;
  734. border-radius: 100upx;
  735. color: #fff;
  736. position: relative;
  737. }
  738. .active{
  739. background-color: #0485F6;
  740. }
  741. .f-mid{
  742. flex-grow: 1;
  743. text{
  744. margin-right: 15upx;
  745. &:first-child{
  746. color: #00cb00;
  747. }
  748. &:last-child{
  749. color: red;
  750. }
  751. }
  752. padding: 0 15upx;
  753. font-size: 0.8rem;
  754. color: #666;
  755. }
  756. .f-btns{
  757. button{
  758. width: 200upx;
  759. }
  760. }
  761. }
  762. // 筛选
  763. .tabBox{
  764. height: 100vh;
  765. .tabs{
  766. flex-grow: 1;
  767. overflow: auto;
  768. padding: 20rpx;
  769. > view{
  770. flex-wrap: wrap;
  771. justify-content: space-between;
  772. > view{
  773. width: 45%;
  774. border: 1rpx solid #eee;
  775. padding: 15rpx;
  776. border-radius: 50rpx;
  777. text-align: center;
  778. margin-bottom: 15rpx;
  779. }
  780. .active{
  781. border:0;
  782. background-color: #0485F6;
  783. color: #fff;
  784. }
  785. &:first-child{
  786. > view{
  787. width: 100%;
  788. }
  789. }
  790. }
  791. }
  792. .btns{
  793. display: flex;
  794. padding: 20upx;
  795. justify-content: space-between;
  796. .handle-btn {
  797. font-size: 28upx;
  798. }
  799. }
  800. }
  801. // 购物车
  802. .cpb_cart-mask{
  803. position: fixed;
  804. width: 100%;
  805. background: rgba(0,0,0,0.5);
  806. z-index: 900;
  807. bottom: 100rpx;
  808. top: 0;
  809. }
  810. .cpb_cart-box{
  811. background-color: #fff;
  812. position: absolute;
  813. width: 100%;
  814. z-index: 1000;
  815. bottom: 0;
  816. border-radius: 30rpx 30rpx 0 0;
  817. max-height: 70vh;
  818. display: flex;
  819. flex-direction: column;
  820. .cpb_close{
  821. position: absolute;
  822. top: 10rpx;
  823. right: 20rpx;
  824. width: 70rpx;
  825. height: 70rpx;
  826. font-size: 32rpx;
  827. color: #999;
  828. }
  829. .cpb_cart-tit{
  830. text-align: center;
  831. padding: 20rpx;
  832. font-size: 32rpx;
  833. border-bottom: 2rpx solid #eee;
  834. .cpb_heji{
  835. padding-top: 20rpx;
  836. font-size: 26upx;
  837. > text{
  838. color: #00aaff;
  839. }
  840. > view{
  841. color: #999;
  842. > text{
  843. color: #333;
  844. &:first-child{
  845. margin-right: 20upx;
  846. }
  847. }
  848. }
  849. }
  850. }
  851. .cpb_cart-list{
  852. padding: 20rpx 0;
  853. overflow: auto;
  854. flex-grow: 1;
  855. > view{
  856. margin-bottom: 20rpx;
  857. }
  858. .nav-right-item{
  859. padding: 0 30upx;
  860. }
  861. .item-name{
  862. font-size: 30rpx;
  863. text{
  864. background: rgba(3, 54, 146, 0.15);
  865. color: #1c588a;
  866. border-radius: 1em;
  867. font-size: 0.8em;
  868. padding: 0 0.5em;
  869. margin-right: 10upx;
  870. }
  871. }
  872. .item-info{
  873. border-bottom:2rpx solid #eee;
  874. flex-grow: 1;
  875. padding-left: 0.2em;
  876. }
  877. .item-detail{
  878. .item-detail-info{
  879. padding: 10upx 0 4upx;
  880. font-size: 24upx;
  881. > view{
  882. padding-bottom: 20rpx;
  883. align-items: center;
  884. .item-detail-text{
  885. color: #999;
  886. margin-left: 20upx;
  887. }
  888. }
  889. }
  890. }
  891. }
  892. }
  893. }
  894. </style>