144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
Vue
<template>
|
||
<div class="flex-row space-x-12">
|
||
<img class="shrink-0 self-start image_9" :src="obj.IMAGE_PATH || obj.DEFAULT_IMG || '/static/images/home/defultImg.png'
|
||
" />
|
||
<div class="flex-col info">
|
||
<div class="flex-row justify-between">
|
||
<div class="font_3 titleName" v-if="obj.bracketContent">
|
||
<span style="font-weight: 600; color: red">
|
||
{{ obj.COMMODITY_RULE ? `（${obj.COMMODITY_RULE}）` : "" }}{{
|
||
obj.bracketContent
|
||
}}</span><span>{{ obj.restContent || "" }}</span>
|
||
</div>
|
||
<div class="font_3 titleName" v-else>{{ obj.COMMODITY_RULE ? `（${obj.COMMODITY_RULE}）` : "" }}{{
|
||
obj.COMMODITY_NAME || "" }}</div>
|
||
|
||
<!-- <div class="font_3 titleName">
|
||
{{ obj.bracketContent
|
||
obj.restContent obj.COMMODITY_NAME }}
|
||
</div> -->
|
||
<div class="font_3" style="width: 100px; text-align: right">
|
||
x{{ obj.count }}{{ obj.COMMODITY_UNIT }}
|
||
</div>
|
||
</div>
|
||
<div class="flex-row justify-between">
|
||
<span class="font_2">单价: {{ obj.COMMODITY_MEMBERPRICE }}元/{{
|
||
obj.COMMODITY_UNIT
|
||
}}</span>
|
||
<span class="font_2">¥{{ obj.cartItemAoumt }}</span>
|
||
</div>
|
||
<div class="remark" v-if="isSubmit && obj.SALEDETAIL_DESC">
|
||
<input :disabled="isSubmit" class="input" v-model="obj.SALEDETAIL_DESC" />
|
||
</div>
|
||
<div class="remark" v-if="!isSubmit">
|
||
<input class="input" @blur="handleChangeValue($event, obj)" :value="obj.SALEDETAIL_DESC"
|
||
placeholder="这里是备注的内容" />
|
||
</div>
|
||
<!-- <div class="flex-col justify-start items-start text-wrapper_2" v-if="obj.SALEDETAIL_DESC">-->
|
||
<!-- <span class="font_5 text_6">{{obj.SALEDETAIL_DESC}}</span>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
obj: {},
|
||
isSubmit: false,
|
||
},
|
||
data() {
|
||
return {};
|
||
},
|
||
methods: {
|
||
handleChangeValue(e, obj) {
|
||
obj.SALEDETAIL_DESC = e.detail.value;
|
||
this.$emit('update-desc', { COMMODITY_ID: obj.COMMODITY_ID, RTCOMMODITY_MULTI_ID: obj.RTCOMMODITY_MULTI_ID, value: e.detail.value });
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.flex-row {
|
||
display: flex;
|
||
}
|
||
|
||
.justify-between {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.space-x-12 {
|
||
justify-content: space-between;
|
||
margin-bottom: 24rpx;
|
||
|
||
&>*:not(:first-child) {
|
||
margin-left: 24rpx;
|
||
}
|
||
|
||
.info {
|
||
width: 494rpx;
|
||
|
||
.remark {
|
||
.input {
|
||
width: 100%;
|
||
background: #f2f4f5;
|
||
font-size: 12px;
|
||
border-radius: 4rpx;
|
||
box-sizing: border-box;
|
||
padding-left: 8px;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.image_9 {
|
||
border-radius: 8rpx;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
|
||
.font_3 {
|
||
font-size: 28rpx;
|
||
font-family: "PingFang SC";
|
||
line-height: 40rpx;
|
||
color: #020e1a;
|
||
}
|
||
|
||
.titleName {
|
||
width: calc(100% - 100px);
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
/* 设置显示的行数 */
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.font_2 {
|
||
font-size: 24rpx;
|
||
font-family: "PingFang SC";
|
||
line-height: 34rpx;
|
||
color: #9fa3a8;
|
||
}
|
||
|
||
.text-wrapper_2 {
|
||
margin-top: 16rpx;
|
||
padding: 12rpx 0;
|
||
background-color: #f2f4f599;
|
||
border-radius: 4rpx;
|
||
|
||
.font_5 {
|
||
font-size: 24rpx;
|
||
font-family: "PingFang SC";
|
||
line-height: 34rpx;
|
||
color: #6c737a;
|
||
}
|
||
|
||
.text_6 {
|
||
margin-left: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|