startCheck.vue 21 KB

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