startCheck.vue 21 KB

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