|
@@ -9,44 +9,79 @@
|
|
|
<uni-icons v-else :type="item.checked?'checkbox-filled':'circle'" size="24" :color="item.checked?'#dd0000':'#666'"></uni-icons>
|
|
|
</view>
|
|
|
<view>
|
|
|
- <view class="choose-product-item-img">
|
|
|
- <image mode="aspectFit" :src="item.productImage?item.productImage+'?x-oss-process=image/resize,p_30':'/static/def_imgs.png'" style="width: 100%;height: 180rpx;"></image>
|
|
|
- <view class="back-price xiajia" v-if="!item.status">下架</view>
|
|
|
- <view class="back-price xiajia" v-else-if="item.dealerScopeFlag==0">售罄</view>
|
|
|
- <view class="choose-product-item-left-info-code">
|
|
|
- <!-- <text :max-lines="1" overflow="ellipsis">{{item.productCode}}</text> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="choose-product-item-info">
|
|
|
- <view class="choose-product-item-left-info-name">
|
|
|
- <text :max-lines="2" overflow="ellipsis">{{item.productName}}</text>
|
|
|
- </view>
|
|
|
- <view class="choose-product-item-left-info-guige">
|
|
|
- <text>{{item.productCode}}</text>
|
|
|
- </view>
|
|
|
- <view class="choose-product-item-left-info-guige">
|
|
|
- <text :max-lines="2" overflow="ellipsis">{{item.productOrigCode}}</text>
|
|
|
- </view>
|
|
|
- <view class="choose-product-item-left-info-price">
|
|
|
- <view class="price-txt" v-if="item.status==1">¥<text>{{item.price}}</text></view>
|
|
|
- <view class="price-txt" v-else></view>
|
|
|
- <view>
|
|
|
- <view v-if="item.status==1&&item.dealerScopeFlag==1" :style="{opacity:!item.edit?1:0,width:!item.edit?'auto':0}">
|
|
|
- <view class="flex align_center qty-box">
|
|
|
- <view class="qty-btn" @click="changeQty(item.qty-1,item,1)" :class="(item.qty <= 1)?'qty-disabled':''">-</view>
|
|
|
- <view class="qty-num" :style="{width:Number(item.qty).toString().length*8+10+'px'}"><input type="number" @input="inputQty(item)" @blur="changeQty(item.qty,item,0)" v-model="item.qty"/></view>
|
|
|
- <view class="qty-btn" @click="changeQty(item.qty+1,item,1)" :class="(item.qty >= 999)?'qty-disabled':''">+</view>
|
|
|
+ <view>
|
|
|
+ <view class="choose-product-item-img">
|
|
|
+ <image mode="aspectFit" :src="item.productImage?item.productImage+'?x-oss-process=image/resize,p_30':'/static/def_imgs.png'" style="width: 100%;height: 100%;"></image>
|
|
|
+ <view class="back-price xiajia" v-if="!item.status">下架</view>
|
|
|
+ <view class="back-price xiajia" v-else-if="item.dealerScopeFlag==0">售罄</view>
|
|
|
+ </view>
|
|
|
+ <view class="choose-product-item-info">
|
|
|
+ <view class="choose-product-item-left-info-name">
|
|
|
+ <text :max-lines="1" overflow="ellipsis">{{item.productName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="choose-product-item-left-info-guige">
|
|
|
+ <text :max-lines="1" overflow="ellipsis">{{item.productCode}}</text>
|
|
|
+ <text :max-lines="2" overflow="ellipsis">{{item.productOrigCode}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="choose-product-item-left-info-price">
|
|
|
+ <view>
|
|
|
+ <view class="price-txt" v-if="item.status==1">¥<text>{{item.price}}</text></view>
|
|
|
+ <view class="flex align_center rebate-tag" v-if="dix==1">
|
|
|
+ 返<text>5</text>元
|
|
|
+ </view>
|
|
|
+ <view class="flex align_center rebate-tag" v-if="dix==2">
|
|
|
+ 买3赠2
|
|
|
+ </view>
|
|
|
+ <view class="flex align_center tejia-tag" v-if="dix==3">
|
|
|
+ 特价<text>¥20</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view v-if="item.status==1&&item.dealerScopeFlag==1" :style="{opacity:!item.edit?1:0,width:!item.edit?'auto':0}">
|
|
|
+ <view class="flex align_center qty-box">
|
|
|
+ <view class="qty-btn" @click="changeQty(item.qty-1,item,1)" :class="(item.qty <= 1)?'qty-disabled':''">-</view>
|
|
|
+ <view class="qty-num" :style="{width:Number(item.qty).toString().length*8+10+'px'}"><input type="number" @input="inputQty(item)" @blur="changeQty(item.qty,item,0)" v-model="item.qty"/></view>
|
|
|
+ <view class="qty-btn" @click="changeQty(item.qty+1,item,1)" :class="(item.qty >= 999)?'qty-disabled':''">+</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="!item.edit && (!item.status||item.dealerScopeFlag==0)" class="edit-qty">
|
|
|
+ X <text>{{item.qty}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="item.edit" class="edit-qty">
|
|
|
+ X <text>{{item.qty}}</text>
|
|
|
+ <uni-icons type="minus-filled" size="24" color="#dd0000" @click="remove(item.cartSn)"></uni-icons>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-if="!item.edit && (!item.status||item.dealerScopeFlag==0)" class="edit-qty">
|
|
|
- X <text>{{item.qty}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 赠品 -->
|
|
|
+ <view class="gift-box" v-if="dix==2">
|
|
|
+ <view class="choose-product-item-img">
|
|
|
+ <image mode="aspectFit" :src="item.productImage?item.productImage+'?x-oss-process=image/resize,p_30':'/static/def_imgs.png'" style="width: 100%;height: 100%;"></image>
|
|
|
+ <view class="back-price xiajia" v-if="!item.status">下架</view>
|
|
|
+ <view class="back-price xiajia" v-else-if="item.dealerScopeFlag==0">售罄</view>
|
|
|
+ </view>
|
|
|
+ <view class="choose-product-item-info">
|
|
|
+ <view class="choose-product-item-left-info-name flex align_center">
|
|
|
+ <view class="flex align_center rebate-tag">赠品</view>
|
|
|
+ <text :max-lines="1" overflow="ellipsis">{{item.productName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="choose-product-item-left-info-guige">
|
|
|
+ <text :max-lines="1" overflow="ellipsis">{{item.productCode}}</text>
|
|
|
+ <text :max-lines="1" overflow="ellipsis">{{item.productOrigCode}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="choose-product-item-left-info-price">
|
|
|
+ <view>
|
|
|
+ <!-- <view class="price-txt" v-if="item.status==1">¥<text>0.00</text></view> -->
|
|
|
</view>
|
|
|
- <view v-if="item.edit" class="edit-qty">
|
|
|
- X <text>{{item.qty}}</text>
|
|
|
- <uni-icons type="minus-filled" size="24" color="#dd0000" @click="remove(item.cartSn)"></uni-icons>
|
|
|
+ <view>
|
|
|
+ <view class="edit-qty">
|
|
|
+ X <text>{{item.qty}}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -138,7 +173,6 @@
|
|
|
}
|
|
|
.choose-product-item{
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 10px;
|
|
|
background: #fff;
|
|
@@ -147,31 +181,38 @@
|
|
|
.price-txt{
|
|
|
color: red;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ align-items: baseline;
|
|
|
+ font-size: 12px;
|
|
|
text{
|
|
|
- font-size: 36rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
}
|
|
|
}
|
|
|
> view{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
&:last-child{
|
|
|
flex-grow: 1;
|
|
|
width: 80%;
|
|
|
+ >view{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.choose-product-item-check{
|
|
|
- padding: 0 20rpx 0 0;
|
|
|
+ padding: 0 10rpx 0 0;
|
|
|
width: 24px;
|
|
|
+ margin-top: 33px;
|
|
|
}
|
|
|
.choose-product-item-img{
|
|
|
margin-right: 20rpx;
|
|
|
- width: 30%;
|
|
|
+ width: 90px;
|
|
|
+ height: 90px;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
border: 1px solid #eee;
|
|
|
- padding: 10rpx;
|
|
|
+ padding: 3rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
.back-price{
|
|
|
zoom: calc(0.8);
|
|
|
padding: 6rpx 65rpx;
|
|
@@ -212,34 +253,72 @@
|
|
|
align-items:center;
|
|
|
justify-content: space-between;
|
|
|
>view{
|
|
|
- &:last-child{
|
|
|
- display: flex;
|
|
|
- align-items:center;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ align-items:center;
|
|
|
}
|
|
|
.edit-qty{
|
|
|
display: flex;
|
|
|
align-items:center;
|
|
|
justify-content: space-between;
|
|
|
color: #999;
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 10px;
|
|
|
> text{
|
|
|
color: #666;
|
|
|
font-size: 14px;
|
|
|
- margin-right: 20px;
|
|
|
+ margin-left: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .rebate-tag{
|
|
|
+ background: #ffe7df;
|
|
|
+ color: #E91E63;
|
|
|
+ padding: 2px 5px;
|
|
|
+ font-size: 10px;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+ .tejia-tag{
|
|
|
+ color: #E91E63;
|
|
|
+ margin-left: 6px;
|
|
|
+ font-size: 10px;
|
|
|
+ text{
|
|
|
+ font-size: 10px;
|
|
|
+ color: #999;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.choose-product-item-left-info-name{
|
|
|
font-size: 28rpx;
|
|
|
- color: #666;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
.choose-product-item-left-info-guige{
|
|
|
- color: #2196F3;
|
|
|
margin: 10rpx 0;
|
|
|
font-size: 12px;
|
|
|
text{
|
|
|
- margin-right: 10rpx;
|
|
|
+ color: #666;
|
|
|
+ &:last-child{
|
|
|
+ color: #2196F3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .gift-box{
|
|
|
+ margin-top: 10px;
|
|
|
+ border-top: 1px solid #ececec;
|
|
|
+ padding-top: 10px;
|
|
|
+ .choose-product-item-img{
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .choose-product-item-info .choose-product-item-left-info-name{
|
|
|
+ font-size: 24rpx;
|
|
|
+ .rebate-tag{
|
|
|
+ margin: 0 5px 0 0;
|
|
|
+ background: #ff0000;
|
|
|
+ color: #fff;
|
|
|
+ width: 30px;
|
|
|
}
|
|
|
}
|
|
|
}
|