167 lines
4.3 KiB
Vue
167 lines
4.3 KiB
Vue
<template>
|
|
<view class="b-rx-commodity-item">
|
|
<view class="b-rx-commodity-item-commodity">
|
|
<view class="b-rx-commodity-item-commodity-img">
|
|
<image class="img" :src="item['goods_img'] || item['product_img']" mode=""></image>
|
|
</view>
|
|
<view class="b-rx-commodity-item-commodity-infor">
|
|
<!-- 商品 -->
|
|
<view class="b-rx-commodity-item-commodity-infor-name">
|
|
{{item['product_name']}}
|
|
</view>
|
|
<view v-if="item['sku']" class="b-rx-commodity-item-commodity-infor-sku">
|
|
{{item['sku']}}
|
|
</view>
|
|
<!-- 价格 -->
|
|
<view class="b-rx-commodity-item-commodity-infor-money">
|
|
<view class="b-rx-commodity-item-commodity-infor-money-price">
|
|
<text class="b-rx-commodity-item-commodity-infor-money-yang">x</text>
|
|
<view>
|
|
<text class="b-rx-commodity-item-commodity-infor-money-amount">
|
|
{{item['num']?item['num']:item['amount']}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 数量 -->
|
|
<view class="quantity">
|
|
<!-- 订单列表中的商品数据价格是后台计算过的所以直接使用就行了original_price属性之后订单数据才会返回 -->
|
|
<!-- <view class="num" v-if="item['original_price']">
|
|
￥{{RetainDecimalPoint(item['pay_price'])}}
|
|
</view>
|
|
<view class="num" v-else-if="!item['original_price'] && (BrandInfor['brand_id'] == 13 || BrandInfor['brand_id'] == 1)">
|
|
￥{{RetainDecimalPoint(item['pay_price'] * (item['num']?item['num']:item['amount']))}}
|
|
</view>
|
|
<view class="num" v-else-if="!item['original_price'] && BrandInfor['brand_id'] == 10">
|
|
￥{{RetainDecimalPoint(item['adj_pay'] * (item['num']?item['num']:item['amount']))}}
|
|
</view> -->
|
|
<view class="num" v-if="item['original_price']">
|
|
￥{{item['pay_price']}}
|
|
</view>
|
|
<view class="num" v-else-if="!item['original_price'] && (BrandInfor['brand_id'] == 13 || BrandInfor['brand_id'] == 1)">
|
|
<view class="now">￥{{item['bt_price'] * (item['num']?item['num']:item['amount'])}}</view>
|
|
<view class="last">￥{{item['pay_price'] * (item['num']?item['num']:item['amount'])}}</view>
|
|
</view>
|
|
<view class="num" v-else-if="!item['original_price'] && BrandInfor['brand_id'] == 10">
|
|
￥{{item['adj_pay'] * (item['num']?item['num']:item['amount'])}}
|
|
<text v-if="item['add_price']">(+{{item['add_price']}})</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 注意:该组件是星巴克与瑞幸共用若需单独修改请另行复制出一份
|
|
import mixin from '@/static/js/mixin/mixin.js';
|
|
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
|
export default {
|
|
name: "b-rx-commodity-item",
|
|
mixins:[mixin,restaurantmixins],
|
|
props:{
|
|
item:{
|
|
type:Object,
|
|
default:()=>{}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.b-rx-commodity-item {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding-bottom: 20rpx;
|
|
&-commodity {
|
|
display: flex;
|
|
flex: 1;
|
|
&-img {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
min-width: 120rpx;
|
|
min-height: 120rpx;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
&-infor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding-left: 22rpx;
|
|
|
|
&-name {
|
|
font-size: $FONTSIZE30;
|
|
max-width: 336rpx;
|
|
min-width: 336rpx;
|
|
word-break: break-all;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&-sku {
|
|
color: #999999;
|
|
font-size: $FONTSIZE22;
|
|
}
|
|
|
|
&-money {
|
|
// max-width: 115rpx;
|
|
// min-width: 115rpx;
|
|
text-align: center;
|
|
|
|
&-yang {
|
|
font-size: $FONTSIZE22;
|
|
}
|
|
|
|
&-price {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: $FONTSIZE30;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.quantity {
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
font-size: 30rpx;
|
|
color: #3A6FE7;
|
|
.num {
|
|
text-align: center;
|
|
}
|
|
|
|
.img {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
}
|
|
}
|
|
|
|
.now {
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.last {
|
|
color: gray;
|
|
text-decoration: line-through;
|
|
padding-left: 10rpx;
|
|
}
|
|
}
|
|
</style>
|