choosePart.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734
  1. <template>
  2. <view class="flex flex_column choosePartByVin">
  3. <!-- 头部车辆信息 -->
  4. <div class="flex align-center cpb_header" v-if="carInfo">
  5. <div>
  6. <u-image border-radius="30" :src="carInfo.icon" width="100" height="100" bg-color="#EBEBEB" ></u-image>
  7. </div>
  8. <div>
  9. <div class="flex align-center">
  10. <div class="carTits ellipsis-two">{{modelLabel}}</div>
  11. <!-- <div class="qhbtns flex align-center" v-if="carList.length>1" @click="openSelCarModel">
  12. <u-image width="32" height="32" :src="`/static/${theme}/qiehuan.png`"></u-image> 切换车型
  13. </div> -->
  14. </div>
  15. <div class="flex align-center">
  16. <div>VIN码:{{vinNumber}}</div>
  17. <div class="copyText" @click="copyVin"><span>复制</span></div>
  18. </div>
  19. </div>
  20. </div>
  21. <!-- 配件列表 -->
  22. <div class="cpb_middle flex">
  23. <div class="slider-bar">
  24. <div class="tabs">
  25. <view :class="[curLeve2 == 'all' ? 'active' : '']" @click="selLeve2('all')">
  26. 全部
  27. </view>
  28. <view :class="[curLeve2 == item.id ? 'active' : '']" v-for="(item, index) in leve2Data" :key="index" @click="selLeve2(item.id)">
  29. {{item.label}}
  30. </view>
  31. </div>
  32. </div>
  33. <div class="right-list">
  34. <scroll-view
  35. class="right-list-content"
  36. scroll-y
  37. @scrolltolower="onreachBottom">
  38. <!-- vin适配配件 -->
  39. <view>
  40. <view class="nav-right-title">适配推荐</view>
  41. <view class="nav-right-item flex" v-for="(item, index) in vinPartList" :key="item.productSn">
  42. <view class="uni-col-2">
  43. <u-image :src="item.images+'?x-oss-process=image/resize,m_fixed,h_120,w_120,color_ffffff'" @click="viewImg(item)" border-radius="30" width="100" height="100" bg-color="#EBEBEB" ></u-image>
  44. </view>
  45. <view class="item-info uni-col-10">
  46. <view class="item-name">
  47. <text>{{item.name}}</text>
  48. </view>
  49. <view class="item-detail">
  50. <view class="item-detail-info">
  51. <view class="flex justify_between">
  52. <text class="item-detail-text flex_1">{{item.code}}</text>
  53. <text class="item-detail-text" v-if="item.affiliation=='SHELF'">库存:{{item.currentInven?item.currentInven:0}} {{item.unit}}</text>
  54. </view>
  55. <view class="flex justify_between">
  56. <view class="item-detail-text flex_1">
  57. <text class="item-price">¥{{item.price||0}}</text>
  58. </view>
  59. <view class="item-detail-text" v-if="item.currentInven">
  60. <u-button shape="circle" @click="addPart(item)" v-if="!item.checked" :custom-style="{width:'48upx',height:'48upx'}" type="primary" size="mini">
  61. <u-icon name="plus" color="#fff" size="28"></u-icon>
  62. </u-button>
  63. <u-number-box v-else @change="updateNums" v-model="item.qty" :index="item.productSn" :min="0" :max="item.currentInven"></u-number-box>
  64. </view>
  65. <view class="item-detail-text" v-if="item.affiliation=='SUPER_CATALOGUE'||!item.currentInven">
  66. <text @click="toRuku(item)" class="phtxt">我要临配</text>
  67. </view>
  68. </view>
  69. </view>
  70. <view class="nav-right-item-btns flex align_center justify_between">
  71. <view>
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. </view>
  77. <view v-if="vinPartList&&vinPartList.length==0">
  78. <u-empty v-if="status!='loading'" :src="`/static/nodata.png`" icon-size="180" text="暂无适配推荐" mode="list" :margin-top="30"></u-empty>
  79. </view>
  80. </view>
  81. <!-- 其它配件 -->
  82. <view class="nav-right-title" style="margin-top: 20rpx;">其它配件</view>
  83. <view class="nav-right-item flex" v-for="(item, index) in partList" :key="item.productSn">
  84. <view class="uni-col-2">
  85. <u-image :src="item.images+'?x-oss-process=image/resize,m_fixed,h_120,w_120,color_ffffff'" @click="viewImg(item)" border-radius="30" width="100" height="100" bg-color="#EBEBEB" ></u-image>
  86. </view>
  87. <view class="item-info uni-col-10">
  88. <view class="item-name">
  89. <text>{{item.name}}</text>
  90. </view>
  91. <view class="item-detail">
  92. <view class="item-detail-info">
  93. <view class="flex justify_between">
  94. <text class="item-detail-text flex_1">{{item.code}}</text>
  95. <text class="item-detail-text">库存:{{item.currentInven?item.currentInven:0}} {{item.unit}}</text>
  96. </view>
  97. <view class="flex justify_between">
  98. <view class="item-detail-text flex_1">
  99. <text class="item-price">¥{{item.price||0}}</text>
  100. </view>
  101. <view class="item-detail-text" v-if="item.currentInven">
  102. <u-button shape="circle" @click="addPart(item)" v-if="!item.checked" :custom-style="{width:'48upx',height:'48upx',background:'#1283d4'}" type="primary" size="mini">
  103. <u-icon name="plus" color="#fff" size="28"></u-icon>
  104. </u-button>
  105. <u-number-box v-else @change="updateNums" v-model="item.qty" :index="item.productSn" :min="0" :max="item.currentInven"></u-number-box>
  106. </view>
  107. <view class="item-detail-text" v-else>
  108. <text @click="toRuku(item)" class="phtxt">我要临配</text>
  109. </view>
  110. </view>
  111. </view>
  112. <view class="nav-right-item-btns flex align_center justify_between">
  113. <view>
  114. </view>
  115. </view>
  116. </view>
  117. </view>
  118. </view>
  119. <view v-if="partList&&partList.length==0">
  120. <u-empty v-if="status!='loading'" :src="`/static/nodata.png`" icon-size="240" :text="noDataText" mode="list" :margin-top="150"></u-empty>
  121. </view>
  122. <view style="padding: 20upx;">
  123. <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
  124. </view>
  125. </scroll-view>
  126. </div>
  127. </div>
  128. <!-- 底部提交按钮 -->
  129. <div class="cpb_footer flex align-center" :class="isIphoneXup?'isIPXup':''">
  130. <div>
  131. <div class="cpb_cart" :style="{background: partListData.length==0?'#eee':''}" @click="openCart">
  132. <u-badge type="error" :count="cartNums" :offset="[-4,-4]" bgColor="#FF5200"></u-badge>
  133. <u-image width="44" height="44" :src="`/static/${theme}/icon_shopping@3x.png`"></u-image>
  134. </div>
  135. </div>
  136. <div>
  137. <u-button type="primary" @click="submitForm" :custom-style="{background:'#1283d4',fontSize:'32rpx'}" shape="circle">立即提交</u-button>
  138. </div>
  139. </div>
  140. <!-- 已选配件 购物车 -->
  141. <div class="cpb_cart-mask" v-if="showCart">
  142. <div class="cpb_cart-box">
  143. <div class="cpb_close flex align-center justify_center" @click="showCart=false"><u-icon name="close"></u-icon></div>
  144. <div class="cpb_cart-tit">
  145. 已选配件
  146. </div>
  147. <div class="cpb_cart-list">
  148. <view class="nav-right-item flex" v-for="(item, index) in partListData" :key="item.productSn">
  149. <view class="uni-col-2">
  150. <u-image border-radius="30" :src="item.images" width="100" height="100" bg-color="#EBEBEB" ></u-image>
  151. </view>
  152. <view class="item-info uni-col-10">
  153. <view class="item-name">
  154. <text>{{item.name}}</text>
  155. </view>
  156. <view class="item-detail">
  157. <view class="item-detail-info">
  158. <view class="flex justify_between">
  159. <text class="item-detail-text flex_1">{{item.code}}</text>
  160. <text class="item-detail-text">库存:{{item.currentInven?item.currentInven:0}} {{item.unit}}</text>
  161. </view>
  162. <view class="flex justify_between">
  163. <view class="item-detail-text flex_1">
  164. <text class="item-price">¥{{item.price||0}}</text>
  165. </view>
  166. <view class="item-detail-text">
  167. <u-number-box @change="updateCartNums" v-model="item.qty" :index="'cart_'+item.productSn" :min="0" :max="item.currentInven"></u-number-box>
  168. </view>
  169. </view>
  170. </view>
  171. </view>
  172. </view>
  173. </view>
  174. </div>
  175. </div>
  176. </div>
  177. </view>
  178. </template>
  179. <script>
  180. import { getShelfProductList, getShelfProductType, queryPartCodeByVin, getShelfQueryList, saveShelfOrder } from '@/api/shelf'
  181. import clipboard from "@/js_sdk/dc-clipboard/clipboard.js"
  182. export default {
  183. data() {
  184. return {
  185. theme: '',
  186. vinNumber: '',
  187. leve2Data: [], // 二级菜单数据
  188. curLeve2: '', // 当前所选二级菜单
  189. carInfo: null,
  190. status: 'loading',
  191. noDataText: '暂无配件',
  192. pageNo: 1,
  193. pageSize: 10,
  194. total: 0, // 列表总数
  195. noMore: false ,// 没有更多
  196. showCart: false, // 购物车
  197. showSelCarModel: false, // 切换车型
  198. carList:[], // 车型列表
  199. partList: [], // 配件列表
  200. partListData: [], // 已选配件
  201. vinPartList: [],
  202. isIphoneXup: false,
  203. dealerPhone: ''
  204. }
  205. },
  206. computed:{
  207. modelLabel(){
  208. // const data = this.carInfo
  209. // const carModelLabel = [data.carBrand, data.vehicleSeriesNameCn, data.capacity, data.vehicleOfYear, data.vehicleNameCn +
  210. // '(' + data.salesVersion + ')'
  211. // ]
  212. // return carModelLabel.join(' ')
  213. return this.carInfo.text
  214. },
  215. cartNums(){
  216. let ret = 0
  217. this.partListData.map(item => {
  218. ret = ret + item.qty
  219. })
  220. return ret
  221. }
  222. },
  223. onLoad(opts) {
  224. this.theme = getApp().globalData.theme
  225. this.vinNumber = opts.vinNumber
  226. this.carInfo = opts.carList?JSON.parse(decodeURIComponent(opts.carList)):null
  227. // 获取vin 对应code
  228. this.getCarCodeByVin()
  229. },
  230. onReady() {
  231. const shelfInfo = this.$store.state.vuex_storeShelf
  232. this.dealerPhone = shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
  233. // #ifdef APP-PLUS
  234. var webView = this.$mp.page.$getAppWebview();
  235. if(this.dealerPhone==''){
  236. console.log(11)
  237. webView.setTitleNViewButtonStyle(0,{text:"",color:"#FFFFFF"});
  238. }
  239. // #endif
  240. },
  241. // 点击导航栏按钮
  242. onNavigationBarButtonTap() {
  243. if(this.dealerPhone!=''){
  244. uni.makePhoneCall({
  245. phoneNumber: this.dealerPhone
  246. })
  247. }
  248. },
  249. onShow() {
  250. this.$store.state.vuex_shelfChoosePart = []
  251. },
  252. methods: {
  253. viewImg(item){
  254. uni.previewImage({
  255. urls: [item.images]
  256. })
  257. },
  258. // 复制
  259. copyVin(){
  260. clipboard.setText(this.vinNumber);
  261. uni.showToast({
  262. icon: 'none',
  263. title: 'vin码已复制成功'
  264. })
  265. },
  266. // 格式化标签数据和配件分类数据一样
  267. labelToPart(data){
  268. let arr = []
  269. data.map(item => {
  270. arr.push({
  271. id: item.id || item.productTypeSn,
  272. label: item.name
  273. })
  274. })
  275. return arr
  276. },
  277. getCarCodeByVin(){
  278. queryPartCodeByVin({vinNumber:this.vinNumber}).then(res => {
  279. console.log(res,'this.vinCode')
  280. this.vinCode = res.data
  281. this.getShelfProductType()
  282. })
  283. },
  284. // 获取数字货架分类作为二级分类
  285. getShelfProductType(){
  286. getShelfProductType({
  287. codeList: this.vinCode,
  288. shelfSn: this.$store.state.vuex_storeShelf.shelfSn
  289. }).then(res => {
  290. console.log(res,'getShelfProductType')
  291. this.leve2Data = this.labelToPart(res.data || [])
  292. // 默认该车适用或全部
  293. this.selLeve2('all')
  294. })
  295. },
  296. // 单击二级菜单
  297. selLeve2 (v) {
  298. this.pageNo = 1
  299. this.partList = []
  300. this.vinPartList = []
  301. this.curLeve2 = v
  302. if(this.vinNumber){
  303. this.getVinShelfPartList()
  304. }
  305. this.getShelfProductList()
  306. },
  307. // 获取数字货架配件列表
  308. getShelfProductList(){
  309. const _this = this
  310. let params = {
  311. pageNo: this.pageNo,
  312. pageSize: this.pageSize,
  313. excludeCodeList: this.vinCode,
  314. productTypeSn: this.curLeve2 == 'all' ? '' : this.curLeve2
  315. }
  316. _this.status = 'loading'
  317. getShelfProductList(params).then(res => {
  318. console.log(res,'获取数字货架配件列表')
  319. uni.hideLoading()
  320. if(res.status == 200){
  321. let list = res.data.list
  322. if (list && list.length){
  323. // 分页 拼接数据
  324. if (_this.pageNo != 1) {
  325. _this.partList = _this.partList ? _this.partList.concat(this.fiterChecked(list)) : this.fiterChecked(list)
  326. } else {
  327. _this.partList = this.fiterChecked(list)
  328. }
  329. this.total = res.data.count
  330. if (_this.partList.length == res.data.count) {
  331. _this.status = 'nomore'
  332. } else {
  333. _this.status = 'loadmore'
  334. }
  335. } else {
  336. _this.partList = list || []
  337. this.total = 0
  338. _this.status = 'nomore'
  339. }
  340. _this.noDataText = '暂无配件'
  341. }else{
  342. _this.status = 'loadmore'
  343. _this.partList = []
  344. this.total = 0
  345. _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试'
  346. }
  347. })
  348. },
  349. // 根据客户vin查询该车可用数字货架中的配件
  350. getVinShelfPartList(){
  351. let params = {
  352. queryWord: this.queryWord,
  353. productTypeSn: this.curLeve2 == 'all' ? '' : this.curLeve2,
  354. codeList: this.vinCode
  355. }
  356. getShelfQueryList(params).then(res => {
  357. this.vinPartList = this.fiterChecked(res.data || [])
  358. console.log(this.vinPartList)
  359. })
  360. },
  361. // 过滤已选择的
  362. fiterChecked (list){
  363. this.partListData.map(item => {
  364. let p = list.find(k => {
  365. return k.productSn == item.productSn
  366. })
  367. if (p){
  368. p.checked = true
  369. p.qty = item.qty
  370. }
  371. })
  372. return list
  373. },
  374. // 加载更多
  375. onreachBottom () {
  376. if(this.partList.length < this.total ){
  377. this.pageNo++
  378. this.getShelfProductList()
  379. }else{
  380. this.status = "nomore"
  381. }
  382. },
  383. // 打开切换车型弹窗
  384. openSelCarModel(){
  385. this.showSelCarModel = true
  386. },
  387. selCarModel(item){
  388. this.showSelCarModel = false
  389. this.carInfo = item
  390. },
  391. // 补货
  392. toRuku(data){
  393. this.$store.state.vuex_shelfChoosePart.push(data)
  394. uni.navigateTo({
  395. url: '/pages/digitalShelf/temproaryStockIn/temproaryStockIn?vinNumber='+this.vinNumber
  396. })
  397. },
  398. // 添加到购物车
  399. addPart(item){
  400. item.checked = true
  401. item.qty = 1
  402. this.partListData.push({
  403. id: item.id,
  404. productSn: item.productSn,
  405. name: item.name,
  406. unit: item.unit,
  407. price: item.price,
  408. currentInven: item.currentInven,
  409. code: item.code,
  410. qty: item.qty,
  411. images: item.images,
  412. checked: true
  413. })
  414. },
  415. // 修改列表上数量
  416. updateNums(data){
  417. const prow = this.partList.find(item => item.productSn == data.index)
  418. const index = this.partListData.findIndex(item => item.productSn == data.index)
  419. // 删除
  420. if(data.value == 0){
  421. prow.checked = false
  422. console.log(index,'+++')
  423. if(index>=0){
  424. this.partListData.splice(index,1)
  425. }
  426. if(this.partListData.length==0){
  427. this.showCart = false
  428. }
  429. }else{
  430. this.partListData[index].qty = data.value
  431. this.partListData.splice()
  432. }
  433. },
  434. // 点击购物车修改数量
  435. updateCartNums(data){
  436. if(data.value == 0){
  437. const index = this.partListData.findIndex(item => 'cart_'+item.productSn == data.index)
  438. if(index>=0){
  439. this.partListData.splice(index,1)
  440. }
  441. if(this.partListData.length==0){
  442. this.showCart = false
  443. }
  444. }
  445. // 同步更新配件列表上的
  446. const prow = this.partList.find(item => 'cart_'+item.productSn == data.index)
  447. prow.qty = data.value
  448. prow.checked = !!data.value
  449. },
  450. // 打开购物车
  451. openCart(){
  452. if(this.partListData.length){
  453. this.showCart=!this.showCart
  454. }else{
  455. uni.showToast({
  456. icon: 'none',
  457. title: '请选择配件'
  458. })
  459. }
  460. },
  461. // 格式化数据
  462. formatData(){
  463. const partList = []
  464. this.partListData.map(item => {
  465. partList.push({
  466. "productSn": item.productSn,
  467. "totalQty": item.qty
  468. })
  469. })
  470. return partList
  471. },
  472. // 立即提交
  473. submitForm(){
  474. if(this.partListData.length==0){
  475. uni.showToast({
  476. icon: 'none',
  477. title: '请选择配件'
  478. })
  479. return
  480. }
  481. // 开始提交
  482. const params = {
  483. shelfOrderDetailList: this.formatData(),
  484. vin: this.vinNumber,
  485. vehicleModel: this.modelLabel,
  486. vehicleLogo: this.carInfo.icon||'',
  487. }
  488. console.log(params,'立即提交')
  489. saveShelfOrder(params).then(res => {
  490. console.log(res,'saveShelfOrder')
  491. if(res.status == 200){
  492. // 提交成功
  493. uni.redirectTo({
  494. url:"/pages/digitalShelf/choosePartResult?data="+encodeURIComponent(JSON.stringify(res.data))+"&state=1"
  495. })
  496. }else{
  497. // 或失败
  498. uni.redirectTo({
  499. url:"/pages/digitalShelf/choosePartResult?data="+encodeURIComponent(JSON.stringify({remindMessage:res.message}))+"&state=0"
  500. })
  501. }
  502. })
  503. }
  504. }
  505. }
  506. </script>
  507. <style lang="less">
  508. .choosePartByVin{
  509. height: 100vh;
  510. .cpb_header{
  511. background-color: #FFFFFF;
  512. padding: 10rpx;
  513. align-items: center;
  514. > div{
  515. padding: 10rpx;
  516. align-items: center;
  517. &:first-child{
  518. padding-right: 20rpx;
  519. }
  520. > div{
  521. &:first-child{
  522. padding-right: 20rpx;
  523. flex-grow: 1;
  524. color: #818b94;
  525. font-size: 24rpx;
  526. }
  527. }
  528. }
  529. .copyText{
  530. background-color: #EBEBEB;
  531. border-radius: 100rpx;
  532. padding: 0 20rpx;
  533. color: #033692;
  534. font-size: 20rpx;
  535. display: flex;
  536. align-items: center;
  537. justify-content: center;
  538. margin-left: 20rpx;
  539. }
  540. .carTits{
  541. font-size: 32rpx;
  542. font-weight: bold;
  543. color: #222222;
  544. line-height: normal;
  545. margin-bottom: 10rpx;
  546. flex-grow: 1;
  547. }
  548. .qhbtns{
  549. display: flex;
  550. align-items: center;
  551. justify-content: center;
  552. font-size: 20rpx;
  553. color: #0485F6;
  554. border:2rpx solid #0485F6;
  555. border-radius: 50rpx;
  556. background: rgba(88, 177, 255, 0.2);
  557. width: 200rpx;
  558. height: 36rpx;
  559. margin-left: 10rpx;
  560. }
  561. }
  562. .cpb_middle{
  563. flex-grow: 1;
  564. padding-top: 10rpx;
  565. height: calc(100vh - 310rpx);
  566. .slider-bar{
  567. width: 25%;
  568. background: #F5F6F7;
  569. height: 100%;
  570. overflow: auto;
  571. .tabs{
  572. > view{
  573. border-left: 6rpx solid #F5F6F7;
  574. padding: 30rpx 10rpx;
  575. font-size: 30rpx;
  576. color: #666E75;
  577. }
  578. .active{
  579. border-color: #0485F6;
  580. color: #0485F6;
  581. background: #fff;
  582. }
  583. }
  584. }
  585. .right-list{
  586. flex-grow: 1;
  587. background: #fff;
  588. height: 100%;
  589. width: 75%;
  590. .right-list-content{
  591. height: 100%;
  592. .nav-right-title{
  593. font-weight: bold;
  594. padding: 5upx 25upx;
  595. }
  596. .nav-right-item{
  597. padding: 15upx 25upx;
  598. border-bottom: 2rpx solid #f5f5f5;
  599. .item-info{
  600. padding-left: 20upx;
  601. .item-name{
  602. font-size: 32upx;
  603. color: #191919;
  604. display: flex;
  605. align-items: center;
  606. >image{
  607. width: 38rpx;
  608. height: 38rpx;
  609. margin-right: 10rpx;
  610. }
  611. >text{
  612. flex: 1;
  613. word-break: break-all;
  614. }
  615. }
  616. .item-detail{
  617. .item-detail-info{
  618. padding: 10upx 0 4upx;
  619. > view{
  620. padding-bottom: 10rpx;
  621. align-items: center;
  622. .item-detail-text{
  623. color: #999;
  624. .phtxt{
  625. color: #0485F6;
  626. font-size: 28upx;
  627. }
  628. .item-price{
  629. color: #FB1E1E;
  630. font-size: 28upx;
  631. }
  632. }
  633. }
  634. }
  635. }
  636. }
  637. }
  638. }
  639. }
  640. }
  641. .cpb_footer{
  642. padding: 20rpx;
  643. background-color: #fff;
  644. align-items: center;
  645. justify-content: space-between;
  646. .cpb_cart{
  647. width: 84rpx;
  648. height: 84rpx;
  649. background-color: #0485F6;
  650. border-radius: 200rpx;
  651. display: flex;
  652. align-items: center;
  653. justify-content: center;
  654. position: relative;
  655. }
  656. > div{
  657. &:last-child{
  658. width: 40%;
  659. }
  660. }
  661. }
  662. .cpb_cart-mask{
  663. position: fixed;
  664. width: 100%;
  665. background: rgba(0,0,0,0.5);
  666. z-index: 900;
  667. bottom: 120rpx;
  668. top: 0;
  669. }
  670. .cpb_cart-box{
  671. background-color: #fff;
  672. position: absolute;
  673. width: 100%;
  674. z-index: 1000;
  675. bottom: 0;
  676. padding: 20rpx 0;
  677. border-radius: 30rpx 30rpx 0 0;
  678. max-height: 70vh;
  679. display: flex;
  680. flex-direction: column;
  681. .cpb_close{
  682. position: absolute;
  683. top: 20rpx;
  684. right: 20rpx;
  685. width: 70rpx;
  686. height: 70rpx;
  687. font-size: 32rpx;
  688. color: #999;
  689. }
  690. .cpb_cart-tit{
  691. text-align: center;
  692. padding: 20rpx;
  693. font-size: 36rpx;
  694. }
  695. .cpb_cart-list{
  696. padding: 20rpx 30rpx;
  697. overflow: auto;
  698. flex-grow: 1;
  699. > view{
  700. margin-bottom: 30rpx;
  701. }
  702. .item-name{
  703. font-size: 36rpx;
  704. }
  705. .item-info{
  706. border-bottom:2rpx solid #f8f8f8;
  707. }
  708. .item-detail{
  709. .item-detail-info{
  710. padding: 10upx 0 4upx;
  711. > view{
  712. padding-bottom: 30rpx;
  713. align-items: center;
  714. .item-detail-text{
  715. color: #999;
  716. .phtxt{
  717. color: #0485F6;
  718. font-size: 28upx;
  719. }
  720. .item-price{
  721. color: #FB1E1E;
  722. font-size: 28upx;
  723. }
  724. }
  725. }
  726. }
  727. }
  728. }
  729. }
  730. }
  731. </style>