<template> <block> <view class="nav-right-item flex" v-for="item in list" :key="item.productSn"> <view class="uni-col-2"> <image :src="item.images ? item.images+'?x-oss-process=image/resize,m_fixed,h_60,w_60,color_ffffff' : '/static/def_imgs.png'" @click="viewImg(item)" style="width:100rpx;height:100rpx;border-radius: 30rpx;background-color: #EBEBEB;" > </image> </view> <view class="item-info uni-col-10"> <view class="item-name"> <text>{{item.name}}</text> </view> <view class="item-detail"> <view class="item-detail-info"> <view class="flex justify_between"> <view class="flex align_center"> <text class="item-detail-text flex_1">{{item.code}}</text> <uni-tag v-if="commonPartCode.includes(item.code)" size="small" style="margin-left: 5px;" text="通用" :circle="true" type="success"></uni-tag> </view> <text class="item-detail-text" style="width: 50%;text-align: right;" v-if="item.affiliation=='SHELF'">库存:{{item.currentInven?item.currentInven:0}} {{item.unit}}</text> </view> <view class="flex" v-if="item.productTypeSn=='543766811373752320'"> <uni-tag :text="item.origCode" inverted :circle="true" type="success"></uni-tag> </view> <view class="flex justify_between"> <view class="item-detail-text"> <!-- 货架产品 --> <view class="flex align_center" @click="openPriceModal(item,1,showShelfDetial)" v-if="item.affiliation=='SHELF'"> <view class="item-price" :style="{color:!item.price?'#666':''}" v-if="showCarPrice&&configPrice&&configPrice.shelf_price_show == '1'">{{item.price?'¥'+item.price:'暂无价格'}}</view> <view class="item-price" :style="{color:!item.cost?'#666':''}" v-if="showCostPrice&&configPrice&&configPrice.shelf_cost_show == '1'">{{item.cost?'¥'+item.cost:'暂无价格'}}</view> <uni-icons type="arrowright" color="#00aaff" size="12" v-if="priceShowVal&&showShelfDetial"></uni-icons> </view> <!-- 非货架 --> <view class="flex align_center" @click="openPriceModal(item,1,showNonShelfDetial)" v-else> <view class="item-price" :style="{color:!item.price?'#666':''}" v-if="showCarPrice&&configPrice&&configPrice.non_shelf_price_show == '1'">{{item.price?'¥'+item.price:'暂无价格'}}</view> <view class="item-price" :style="{color:!item.cost?'#666':''}" v-if="showCostPrice&&configPrice&&configPrice.non_shelf_cost_show == '1'">{{item.cost?'¥'+item.cost:'暂无价格'}}</view> <uni-icons type="arrowright" color="#00aaff" size="12" v-if="priceShowVal&&showNonShelfDetial"></uni-icons> </view> </view> <view class="item-detail-text" v-if="item.currentInven"> <view class="qty-btn flex align_center justify_center" @click="addPart(item)" v-if="!item.checked" >+</view> <view class="flex align_center qty-box" v-else> <view class="qty-btn" @click="changeQty(item.qty-1,item,1)" :class="(item.qty <= 0)?'qty-disabled':''">-</view> <view class="qty-num" :style="{width:Number(item.qty).toString().length*8+8+'px'}"><input type="number" @blur="e=>changeQty(Number(e.detail.value),item,0)" :value="item.qty"/></view> <view class="qty-btn" @click="changeQty(item.qty+1,item,1)" :class="(item.qty >= item.currentInven)?'qty-disabled':''">+</view> </view> <!-- <uni-number-box v-else :hideInput="true" @change="e=>updateVinNums(e,item.productSn)" v-model="item.qty" :min="0" :max="item.currentInven"></uni-number-box> --> </view> <view class="item-detail-text" v-if="item.affiliation=='NON_SHELF'||!item.currentInven"> <text v-if="!item.checked" @click="addPart(item)" class="phtxt">我要急送</text> <view class="flex align_center qty-box" v-else> <view class="qty-btn" @click="changeQty(item.qty-1,item,1)" :class="(item.qty <= 0)?'qty-disabled':''">-</view> <view class="qty-num" :style="{width:Number(item.qty).toString().length*8+8+'px'}"><input type="number" @blur="e=>changeQty(Number(e.detail.value),item,0)" :value="item.qty"/></view> <view class="qty-btn" @click="changeQty(item.qty+1,item,1)" :class="(item.qty >= 999)?'qty-disabled':''">+</view> </view> <!-- <uni-number-box v-else :hideInput="true" @change="e=>updateVinNums(e,item.productSn)" v-model="item.qty" :min="0"></uni-number-box> --> </view> </view> </view> </view> </view> </view> </block> </template> <script> export default { props: { list: { type: Array, default: () => { return [] } }, commonPartCode: { type: Array, default: () => { return [] } }, configPrice: { type: Object, default: () => { return {} } }, showCarPrice: { type: Boolean, default: false }, showCostPrice: { type: Boolean, default: false }, showShelfDetial: { type: Boolean, default: false }, showNonShelfDetial: { type: Boolean, default: false }, priceShowVal: { type: Boolean, default: false }, }, data() { return { } }, methods: { openPriceModal(item, type, show) { this.$emit('openPrice', item, type, show) }, addPart(item) { this.$emit('addPart', item, 'vin') }, changeQty(value,item,type) { const max = item.currentInven || 999 const v = value > max ? max : value if(value > max && type == 0){ this.updateNums(value,item.productSn) this.$nextTick(()=>{ this.updateNums(v,item.productSn) }) }else{ this.updateNums(v,item.productSn) } }, updateNums(value, id) { this.$emit('updateVinNums', { value: Number(value), index: id }) }, viewImg(item){ if(item.images){ this.$emit('viewImg',item) } } } } </script> <style lang="less" scoped> @import '/flex.css'; .qty-box{ display: flex; .qty-num{ width: 25px; height: 22px; line-height: 22px; padding:0 3px; input{ width: 100%; height: 100%; text-align: center; color: #333; } } } .qty-btn{ display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50px; font-size: 18px; background-color: #066cff; color: #fff; &.qty-disabled{ background-color: #c0c0c0; } } .nav-right-item{ padding: 15upx 25upx; border-bottom: 2rpx solid #f5f5f5; .uni-col-2{ width: 50px; } .item-info{ padding-left: 10upx; width: 80%; flex-grow: 1; .item-name{ font-size: 30upx; color: #191919; display: flex; align-items: center; >image{ width: 38rpx; height: 38rpx; margin-right: 10rpx; } >text{ flex: 1; word-break: break-all; } } .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>