<template> <view class="flex flex_column choosePartByVin"> <sklineHeader title="选择配件"></sklineHeader> <!-- 头部车辆信息 --> <div class="flex align-center cpb_header" v-if="carInfo"> <div> <image :src="carInfo.icon" style="width: 100rpx;height: 100rpx;border-radius: 10px;background-color: #fff;"></image> </div> <div> <div class="flex align-center"> <div class="carTits ellipsis-two">{{modelLabel||''}}</div> </div> <div class="flex align-center"> <div>VIN码:{{vinNumber}}</div> <div class="copyText" @click="copyVin"><span>复制</span></div> </div> </div> </div> <!-- 配件列表 --> <div class="cpb_middle flex"> <div class="slider-bar"> <scroll-view type="list" style="width:100%;height:100%;" scroll-y> <view class="tabs-item" :class="[curLeve2 == 'all' ? 'active' : '']" @click="selLeve2('all')"> 全部 </view> <view class="tabs-item" :class="[curLeve2 == item.id ? 'active' : '']" v-for="(item, index) in leve2Data" :key="index" @click="selLeve2(item.id)"> {{item.label}} </view> </scroll-view> </div> <div class="right-list"> <scroll-view class="right-list-content" scroll-y type="custom" @scrolltolower="onreachBottom"> <!-- vin适配配件 --> <sticky-section> <sticky-header> <view class="nav-right-title">适配推荐</view> </sticky-header> <list-view> <vinPartItem v-for="(item,index) in vinPartList" :key="index" :list="item" :commonPartCode="commonPartCodeList" :configPrice="configPrice" :showCarPrice="showCarPrice" :showCostPrice="showCostPrice" :showShelfDetial="showShelfDetial" :showNonShelfDetial="showNonShelfDetial" :priceShowVal="priceShowVal" @viewImg="viewImg" @openPrice="openPriceModal" @addPart="addPart" @updateVinNums="updateVinNums" ></vinPartItem> <view v-if="vinPartList&&vinPartList.length==0"> <sklineTemp v-if="vinStatus!='loading'" text="暂无适配推荐"/> </view> <view style="padding: 20upx;" v-if="vinStatus=='loading'" > <uni-load-more :status="vinStatus" /> </view> </list-view> </sticky-section> <!-- 其它配件 --> <sticky-section> <sticky-header> <view class="nav-right-title flex align_center justify_between" @click="showOther=!showOther"> 其它配件 <text>{{showOther?'隐藏':'展开'}}</text> </view> </sticky-header> <list-view v-if="showOther"> <otherPartItem v-for="(item,index) in partList" :key="index" :list="item" :configPrice="configPrice" :showCarPrice="showCarPrice" :showCostPrice="showCostPrice" :showShelfDetial="showShelfDetial" :priceShowVal="priceShowVal" @viewImg="viewImg" @openPrice="openPriceModal" @addPart="addPart" @updateNums="updateNums" ></otherPartItem> <view v-if="total==0"> <sklineTemp v-if="status!='loading'" :text="noDataText"/> </view> <view style="padding: 20upx;" v-if="showOther&&total>0"> <uni-load-more :status="status"/> </view> </list-view> </sticky-section> </scroll-view> </div> </div> <!-- 底部提交按钮 --> <sklineFooter></sklineFooter> <div class="cpb_footer flex align-center flex_column"> <view class="flex align-center"> <div> <div class="cpb_cart" @click="openCart"> <uni-badge type="error" :text="cartNums" :style="{position:'absolute',right:'3px',top:'3px'}" absolute="rightTop" size="small"></uni-badge> <image style="width: 44rpx;height: 44rpx;" :src="`/pagesA/static/icon_shopping@3x.png`"></image> </div> </div> <view> <view class="flex align_center" v-if="dealerPhone" @click="callPhone()"> <uni-icons size="18" type="phone" color="dodgerblue"></uni-icons> <view class="btnlink">联系汽配商</view> </view> </view> <div> <button class="submitBtn" type="primary" :loading="saveLoading" @click="submitForm">确认拿货</button> </div> </view> <view :style="{height:safeAreaBottom+'px'}"></view> </div> <!-- 已选配件 购物车 --> <page-container :show="showCart" :round="true" :z-index="10" position="bottom" custom-style="height:70%" @afterleave="closeCart"> <div class="cpb_cart-box"> <div class="cpb_close flex align_center justify_center" @click="showCart=false"> <uni-icons size="26" type="close"></uni-icons> </div> <div class="cpb_cart-tit"> 已选配件 </div> <scroll-view type="list" scroll-y="true" class="cpb_cart-list"> <view class="nav-right-item flex" v-for="(item, index) in partListData" :key="item.productSn"> <view class="uni-col-2"> <u-image :src="item.images+'?x-oss-process=image/resize,m_fixed,h_75,w_75,color_ffffff'" border-radius="30" width="150" height="150" bg-color="#EBEBEB" ></u-image> </view> <view class="item-info uni-col-10"> <view class="item-name"> <text class="item-tempPart" v-if="!item.currentInven">急送</text> <text>{{item.name}}</text> </view> <view class="item-detail"> <view class="item-detail-info"> <view class="flex justify_between"> <text class="item-detail-text flex_1">{{item.code}}</text> <text class="item-detail-text" v-if="item.affiliation!='NON_SHELF'">库存:{{item.currentInven?item.currentInven:0}} {{item.unit}}</text> </view> <view class="flex" v-if="item.productTypeSn=='543766811373752320'" style="padding-bottom: 5px;"> <uni-tag :text="item.origCode" inverted :circle="true" type="success"></uni-tag> </view> <view class="flex justify_between"> <view class="item-detail-text flex_1"> <text class="item-price" :style="{color:!item.price?'#666':''}" v-if="showCarPrice">{{item.price?'¥'+item.price:'暂无价格'}}</text> <text class="item-price" :style="{color:!item.cost?'#666':''}" v-if="showCostPrice">{{item.cost?'¥'+item.cost:'暂无价格'}}</text> </view> <view class="item-detail-text"> <uni-number-box @change="e=>updateCartNums({value:e,index:'cart_'+item.productSn})" v-model="item.qty" :index="'cart_'+item.productSn" :min="0" :max="item.currentInven||999999"></uni-number-box> </view> </view> </view> </view> </view> </view> </scroll-view> <sklineFooter></sklineFooter> </div> </page-container> <!-- 去认证 --> <uni-popup ref="showPopup" type="center" :is-mask-click="false"> <view class="popu-modal"> <view class="popu-close" @click="$refs.showPopup.close()"><uni-icons type="close" size="26"></uni-icons></view> <image width="533" height="415" style="width: 533rpx;height: 415rpx;" src="/static/authimg.jpg"></image> <view style="padding-top:1rem;" class="flex justify_center"> <button @click="toAuthStore()" shape="circle" :style="{background:'#066cff',color:'#fff',width:'350rpx'}">开始认证</button> </view> </view> </uni-popup> <!-- 价格查看 --> <uni-popup ref="showPriceModal" type="center"> <view class="show-price-modal popu-modal" v-if="tempData"> <view class="popu-close" @click="$refs.showPriceModal.close()"><uni-icons type="close" size="26"></uni-icons></view> <view class="itemlist"> <text>产品编码</text> <text>{{tempData.code||'--'}}</text> </view> <view class="itemlist" v-if="tempData.productTypeSn=='543766811373752320'"> <text>原厂编码</text> <text>{{tempData.origCode||'--'}}</text> </view> <view class="itemlist"> <text>产品名称</text> <text>{{tempData.name||'--'}}</text> </view> <view v-if="tempData.affiliation=='SHELF'"> <view class="itemlist" v-if="configPrice&&configPrice.shelf_cost_show == '1'"> <text>进货价</text> <text>{{tempData.cost?'¥'+tempData.cost:'暂无价格'}}</text> </view> <view class="itemlist" v-if="configPrice&&configPrice.shelf_price_show == '1'"> <text>车主价</text> <text>{{tempData.price?'¥'+tempData.price:'暂无价格'}}</text> </view> </view> <view v-else> <view class="itemlist" v-if="configPrice&&configPrice.non_shelf_cost_show == '1'"> <text>进货价</text> <text>{{tempData.cost?'¥'+tempData.cost:'暂无价格'}}</text> </view> <view class="itemlist" v-if="configPrice&&configPrice.non_shelf_price_show == '1'"> <text>车主价</text> <text>{{tempData.price?'¥'+tempData.price:'暂无价格'}}</text> </view> </view> </view> </uni-popup> </view> </template> <script> import { getShelfProductList, getShelfProductType, queryPartCodeByVin, getShelfQueryList, shelfOrderFlowCreate, findShelfUserParam } from '@/api/shelf' import { scanVinLogCopy } from '@/api/car' import vinPartItem from './components/vinPartItem.vue' import otherPartItem from './components/otherPartItem.vue' import sklineHeader from '@/components/skline/sklineHeader.vue' import sklineTemp from '@/components/skline/sklineTemp.vue' import sklineFooter from '@/components/skline/sklineFooter.vue' export default { components:{ vinPartItem, otherPartItem, sklineHeader, sklineTemp, sklineFooter }, data() { return { showOther: false, showPriceModal: false, theme: '', vinNumber: '', leve2Data: [], // 二级菜单数据 curLeve2: '', // 当前所选二级菜单 carInfo: null, status: 'loading', vinStatus: 'loading', noDataText: '暂无配件', pageNo: 1, pageSize: 20, total: 0, // 列表总数 noMore: false ,// 没有更多 showCart: false, // 购物车 carList:[], // 车型列表 partList: [], // 配件列表 partListData: [], // 已选配件 vinPartList: [], vinCode:[], commonPartCodeList:[], isIphoneXup: false, saveLoading: false, showPopup: false, priceShowVal: null, // 是否可以查看所有价格 showCarPrice: false, // 显示车主价 showCostPrice: false, // 显示成本价 tempData: null ,// 临时数据 safeAreaBottom:0 } }, computed:{ modelLabel(){ return this.carInfo&&this.carInfo.text||'' }, cartNums(){ let ret = 0 this.partListData.map(item => { ret = ret + item.qty }) return ret }, totalAmount(){ let ret = 0 for(let i=0;i<this.partListData.length;i++){ const item = this.partListData[i] ret = ret + ((item.price||0) * item.qty) } return ret.toFixed(2) }, dealerPhone(){ const shelfInfo = this.$store.state.vuex_storeShelf return shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : '' }, userInfo(){ return this.$store.state.vuex_userInfo }, storeApply(){ return this.$store.state.vuex_storeAuthInfo || null }, isAdmin(){ return this.userInfo.superAdmin == 1 }, hasRedPacket(){ const rule = this.$store.state.vuex_rewardRule return rule&&rule.ruleStatus == 'release' }, configPrice(){ return this.$store.state.vuex_configPrice }, showShelfDetial(){ return this.configPrice && this.configPrice.shelf_price_show == '1'&&this.configPrice.shelf_cost_show == '1' }, showNonShelfDetial(){ return this.configPrice && this.configPrice.non_shelf_price_show == '1'&&this.configPrice.non_shelf_cost_show == '1' } }, onLoad(opts) { this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom this.theme = getApp().globalData.theme this.vinNumber = opts.vinNumber this.carInfo = opts.carList?JSON.parse(decodeURIComponent(opts.carList)):null // 获取vin 对应code this.getCarCodeByVin() // 记录 if(opts.type == 'log'){ this.scanVinLogCopy() } // 游客 if(this.userInfo.sysUserFlag == '0'){ // 未认证 if(!this.storeApply || this.storeApply&&!this.storeApply.auditStatus){ this.$refs.showPopup.open() } } }, onUnload() { this.carList = null this.partList = null// 配件列表 this.partListData = null // 已选配件 this.vinPartList = null this.vinCode = null this.commonPartCodeList = null }, onShow() { this.$store.state.vuex_shelfChoosePart = [] this.getShowPriceType() }, methods: { getShowPriceType(){ const storeShelf = this.$store.state.vuex_storeShelf if(storeShelf){ findShelfUserParam({shelfSn: storeShelf?storeShelf.shelfSn:''}).then(res => { this.priceShowVal = res.data ? res.data.carOwnerPrice == '1' && res.data.purchasesPrice == '1' : false // 选中了2中价格,则从列表显示价格中取值 if(this.priceShowVal){ // 进货价 this.showCostPrice = res.data.priceShowType == 'PURCHASES_PRICE' // 车主价 this.showCarPrice = res.data.priceShowType == 'CAR_OWNER_PRICE' }else{ // 进货价 this.showCostPrice = res.data ? res.data.purchasesPrice == '1' : false // 车主价 this.showCarPrice = res.data ? res.data.carOwnerPrice == '1' : false } }) }else{ this.priceShowVal = false this.showCostPrice = false this.showCarPrice = false } }, // 打开价格信息弹框 openPriceModal(row,type,show){ console.log(row) if(this.priceShowVal&&show){ if(type == 0){ row.affiliation = "SHELF" } this.tempData = row this.$refs.showPriceModal.open() } }, scanVinLogCopy(){ scanVinLogCopy({id:this.carInfo.id}).then(res => { console.log(res) }) }, toAuthStore(){ this.$refs.showPopup.close() uni.redirectTo({ url: '/pages/storeManage/storeAuth' }) }, callPhone() { if(this.dealerPhone!=''){ uni.makePhoneCall({ phoneNumber: this.dealerPhone }) } }, viewImg(item){ uni.previewImage({ urls: [item.images] }) }, // 复制 copyVin(){ uni.setClipboardData({ data: this.vinNumber||'', }) }, // 格式化标签数据和配件分类数据一样 labelToPart(data){ let arr = [] data.map(item => { arr.push({ id: item.id || item.productTypeSn, label: item.name }) }) return arr }, getCarCodeByVin(){ queryPartCodeByVin({vinNumber:this.vinNumber}).then(res => { console.log(res,'this.vinCode') const ret = res.data this.commonPartCodeList = ret.commonPartCodeList || [] this.vinCode = this.commonPartCodeList.concat(ret.partCodeList||[]) this.getShelfProductType() }) }, // 获取数字货架分类作为二级分类 getShelfProductType(){ const storeShelf = this.$store.state.vuex_storeShelf getShelfProductType({ codeList: this.vinCode, shelfSn: storeShelf?storeShelf.shelfSn:'' }).then(res => { // console.log(res,'getShelfProductType') this.leve2Data = this.labelToPart(res.data || []) // 默认该车适用或全部 this.selLeve2('all') }) }, // 单击二级菜单 selLeve2 (v) { this.pageNo = 1 this.partList = [] this.vinPartList = [] this.curLeve2 = v if(this.vinNumber){ this.getVinShelfPartList() } this.getShelfProductList() }, // 获取数字货架配件列表 getShelfProductList(){ const _this = this let params = { pageNo: this.pageNo, pageSize: this.pageSize, excludeCodeList: this.vinCode, productTypeSn: this.curLeve2 == 'all' ? '' : this.curLeve2 } _this.status = 'loading' getShelfProductList(params).then(res => { console.log(res,'获取数字货架配件列表') uni.hideLoading() if(res.status == 200){ _this.total = Number(res.data.count) if(_this.total>0){ const list = res.data.list || [] // 追加数据 _this.partList.push(_this.fiterChecked(list)) // 判断是否最后一页 const maxPages = Math.ceil(_this.total / _this.pageSize) if(this.pageNo >= maxPages){ _this.status = 'noMore' _this.noDataText = '没有更多了' } }else{ _this.partList = [] _this.status = 'noMore' _this.noDataText = '暂无配件' } }else{ _this.status = 'more' _this.partList = [] _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试' } }) }, // 根据客户vin查询该车可用数字货架中的配件 getVinShelfPartList(){ let params = { queryWord: this.queryWord, productTypeSn: this.curLeve2 == 'all' ? '' : this.curLeve2, codeList: this.vinCode } uni.showLoading({ title: '加载中', mask: true }) this.vinStatus = 'loading' getShelfQueryList(params).then(res => { const ret = this.fiterChecked(res.data || []) for(let i=0;i<ret.length;i=i+this.pageSize){ this.vinPartList.push(ret.slice(i,(i+this.pageSize)>ret.length?ret.length:(i+this.pageSize))) } this.vinStatus = 'noMore' uni.hideLoading() }) }, // 过滤已选择的 fiterChecked (list){ this.partListData.forEach(item => { let p = list.find(k => { return k.productSn == item.productSn }) if (p){ p.checked = true p.qty = item.qty } }) return list }, // 加载更多 onreachBottom () { if(this.partList.length < this.total && this.showOther){ this.pageNo++ this.getShelfProductList() }else{ this.status = "noMore" } }, // 根据productSn查找 getItemById(sn,type){ const a = this[type].findIndex(k => k.find(s=> s.productSn == sn)) const b = a>=0 ? this[type][a].findIndex(s=> s.productSn == sn) : -1 return {p:a,s:b} }, // 更新页面列表数量状态 updateListData(sn,type,qty,checked){ const row = this.getItemById(sn,type) if(row.p>=0 && row.s>=0){ this[type][row.p][row.s].checked = checked this[type][row.p][row.s].qty = qty this[type][row.p].splice() } }, // 添加到购物车 addPart(item,type){ if(type == 'vin'){ this.updateListData(item.productSn,'vinPartList',1,true) }else{ this.updateListData(item.productSn,'partList',1,true) } // 已选列表 this.partListData.unshift({ id: item.id, productSn: item.productSn, name: item.name, unit: item.unit, price: item.price, cost: item.cost, currentInven: item.currentInven, code: item.code, origCode: item.origCode, qty: 1, productTypeSn: item.productTypeSn, images: item.images, checked: true, affiliation: item.affiliation }) }, // 更新配件列表数量 updatePartList(data,type){ const index = this.partListData.findIndex(item => item.productSn == data.index) // 删除 if(!data.value){ // 删除页面上的数量 this.updateListData(data.index,type,0,false) // 删除已选列表 if(index>=0){ this.partListData.splice(index,1) } // 没有已选,关闭弹框 if(this.partListData.length==0){ this.showCart = false } }else{ // 更新数量 this.partListData[index].qty = data.value this.partListData.splice() } }, // 修改适配配件上数量 updateVinNums(data){ this.updatePartList(data,'vinPartList') }, // 修改其它配件上的数量 updateNums(data){ this.updatePartList(data,'partList') }, // 点击购物车修改数量 updateCartNums(data){ console.log(data) if(!data.value){ const index = this.partListData.findIndex(item => 'cart_'+item.productSn == data.index) if(index>=0){ this.partListData.splice(index,1) } if(this.partListData.length==0){ this.showCart = false } } // 同步更新Vin适配配件列表上的 this.updateListData(data.index.split('_')[1],'vinPartList',data.value,!!data.value) // 同步更新其它配件列表上的 this.updateListData(data.index.split('_')[1],'partList',data.value,!!data.value) }, // 打开购物车 openCart(){ if(this.partListData.length){ this.showCart=!this.showCart }else{ uni.showToast({ icon: 'none', title: '请选择配件' }) } }, // 关闭购物车 closeCart(){ this.showCart = false }, // 格式化数据 formatData(){ const partList = [] const tempList = [] this.partListData.map(item => { if(item.currentInven){ partList.push({ "productSn": item.productSn, "totalQty": item.qty }) }else{ tempList.push({ "productSn": item.productSn, "qty": item.qty, // "price": item.cost }) } }) return [partList,tempList] }, // 立即提交 submitForm(){ // 游客去认证 if(this.userInfo.sysUserFlag == '0'){ // 未认证 if(!this.storeApply || this.storeApply&&(!this.storeApply.auditStatus || this.storeApply.auditStatus == 'REFUSE')){ this.$refs.showPopup.open() } // 认证通过 if(this.storeApply&&this.storeApply.auditStatus=='WAIT'){ uni.showModal({ title: '提示', content: '门店认证资料审核中,请耐心等待!', confirmText: '好的', showCancel: false }) } }else{ const storeShelf = this.$store.state.vuex_storeShelf if(!storeShelf){ uni.showToast({ icon: 'none', title: '您还未开通数字货架,暂时无法使用' }) return } // 已认证用户 if(this.partListData.length==0){ uni.showToast({ icon: 'none', title: '请选择配件' }) return } // 开始提交 const params = { shelfOrderDetailList: this.formatData()[0], tempBillDetailList: this.formatData()[1], vin: this.vinNumber, vehicleModel: this.modelLabel || '', vehicleLogo: this.carInfo.icon||'', billSource: 'vin' } console.log(params,'立即提交') this.saveLoading = true shelfOrderFlowCreate(params).then(res => { console.log(res,'shelfOrderFlowCreate') if(res.status == 200){ this.$store.state.vuex_tempData = res.data // 提交成功 uni.redirectTo({ url:"/pagesA/digitalShelf/choosePartResult?state=1" }) }else{ this.$store.state.vuex_tempData = {shelfOrder:{remindMessage:res.message}} // 或失败 uni.redirectTo({ url:"/pagesA/digitalShelf/choosePartResult?state=0" }) } this.saveLoading = false }) } }, } } </script> <style lang="less"> @import '/flex.css'; .choosePartByVin{ height: 100vh; .cpb_header{ background-color: #FFFFFF; padding: 10rpx; align-items: center; > div{ padding: 10rpx; align-items: center; &:first-child{ padding-right: 20rpx; } > div{ &:first-child{ padding-right: 20rpx; flex-grow: 1; color: #818b94; font-size: 24rpx; } } } .copyText{ background-color: #EBEBEB; border-radius: 100rpx; padding: 0 20rpx; color: #033692; font-size: 20rpx; display: flex; align-items: center; justify-content: center; margin-left: 20rpx; } .carTits{ font-size: 32rpx; font-weight: bold; color: #222222; line-height: normal; margin-bottom: 10rpx; flex-grow: 1; } .qhbtns{ display: flex; align-items: center; justify-content: center; font-size: 20rpx; color: #0485F6; border:2rpx solid #0485F6; border-radius: 50rpx; background: rgba(88, 177, 255, 0.2); width: 200rpx; height: 36rpx; margin-left: 10rpx; } } .popu-modal{ width: 300px; padding: 30px 20px; background-color: #fff; border-radius: 15px; position: relative; .popu-close{ position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .popu-title{ font-size: 18px; font-weight: bold; color: #333; text-align: center; margin-bottom: 20px; } } .show-price-modal{ .itemlist{ display: flex; align-items: center; justify-content: space-between; > text{ &:last-child{ color: #999; width: 70%; display: block; } } border-bottom: 1px solid #eee; padding: 10px; } } .cpb_middle{ flex-grow: 1; padding-top: 4rpx; overflow: auto; .slider-bar{ width: 25%; background: #F5F6F7; height: 100%; .tabs-item{ border-left: 6rpx solid #F5F6F7; padding: 20rpx 10rpx; font-size: 28rpx; color: #666E75; text-align: center; } .active{ border-color: #0485F6; color: #0485F6; background: #fff; } } .right-list{ position: relative; flex-grow: 1; background: #fff; height: 100%; width: 75%; .right-list-content{ height: 100%; .nav-right-title{ font-weight: bold; padding: 20upx 25upx; border-bottom: 2rpx solid #eee; background: #fff; > text{ color: #9E9E9E; font-weight: normal; } } } } } .cpb_footer{ background-color: #fff; align-items: center; justify-content: space-between; z-index: 1000; position: fixed; width: 100%; left: 0; bottom: 0; .btnlink{ font-size: 14px; color: #3390e2; } > view{ width: 100%; &:first-child{ padding: 0 20rpx; justify-content: space-between; height: 50px; align-items: center; .submitBtn{ background-color: #FB1E1E; font-size: 28rpx; border-radius: 100px; } } } .cpb_cart{ width: 84rpx; height: 84rpx; background-color: #0485F6; border-radius: 200rpx; display: flex; align-items: center; justify-content: center; position: relative; } > div{ &:last-child{ width: 40%; } } } .cpb_cart-box{ background-color: #fff; width: 100%; height: 100%; padding: 0; border-radius: 30rpx 30rpx 0 0; display: flex; flex-direction: column; .cpb_close{ position: absolute; top: 3rpx; right: 15rpx; width: 70rpx; height: 70rpx; font-size: 32rpx; color: #999; z-index: 100; } .cpb_cart-tit{ text-align: center; padding: 20rpx; font-size: 36rpx; border-bottom: 1px solid #eee; } .cpb_cart-list{ flex-grow: 1; .nav-right-item{ padding: 10px; border-bottom:2rpx solid #eee; } .item-name{ font-size: 30rpx; .item-tempPart{ background: #0055ff; color: #fff; border-radius: 1em; font-size: 0.8em; padding: 0 0.5em; } } .item-info{ flex-grow: 1; padding-left: 10px; width: 80%; } .item-detail{ .item-detail-info{ padding: 10upx 0 4upx; /deep/ .uni-tag{ word-break: break-all; font-size: 28rpx; color: #0fab04eee; border: 0; padding: 0.2rem 0.3rem; } > view{ padding-bottom: 10rpx; align-items: center; .item-detail-text{ color: #999; .phtxt{ color: #0485F6; font-size: 28upx; } .item-price{ color: #FB1E1E; font-size: 28upx; } } } } } } } } </style>