379 lines
8.6 KiB
Vue
379 lines
8.6 KiB
Vue
<template>
|
|
<div
|
|
class="flex order-item u-m-b-14 relative"
|
|
:class="[isActive]"
|
|
@click="itemClick"
|
|
>
|
|
<span class="absolute pack" v-if="item.isPack === 'true'"> 包 </span>
|
|
<span class="absolute tui" v-if="item.status === 'return'"> 退 </span>
|
|
<div class="flex u-col-top">
|
|
<div class="img">
|
|
<div
|
|
class="isSeatFee img u-line-1 u-flex u-col-center u-row-center"
|
|
v-if="isSeatFee"
|
|
>
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
<img v-else :src="item.coverImg" class="" alt="" />
|
|
</div>
|
|
<div class="good-info u-p-t-6">
|
|
<div class="flex lh-16">
|
|
<div class="name" :class="{ 'free-price': item.status === 'return' }">
|
|
{{ item.name }}
|
|
</div>
|
|
<span class="good_info_discount" v-if="item.isGift === 'true'"
|
|
>赠</span
|
|
>
|
|
</div>
|
|
<div v-if="item.specSnap" class="specSnap">
|
|
{{ item.specSnap }}
|
|
</div>
|
|
|
|
<div class="" v-if="placeNum == 0">
|
|
<div class="note" v-if="item.note">备注:{{ item.note || "" }}</div>
|
|
<div class="note flex" v-else>
|
|
<span>备注:</span>
|
|
<span class="el-icon-edit u-font-12" @click="editNote"></span>
|
|
</div>
|
|
</div>
|
|
<div class="note" v-if="placeNum != 0 && item.note">
|
|
备注:{{ item.note || "" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex u-p-t-6">
|
|
<div class="order-number-box u-font-12">
|
|
<div class="" v-if="isSeatFee">X{{ item.totalNumber }}</div>
|
|
<div class="" v-else>X{{ item.number }}</div>
|
|
<div class="absolute" v-if="canChangeNumber">
|
|
<div class="order-input-number">
|
|
<i class="icon-remove" @click="changeOrderNumber(true)"></i>
|
|
<div style="width: 40px" class="number-box">
|
|
<el-input
|
|
:min="0"
|
|
type="number"
|
|
@input="cartGoodsNumberInput"
|
|
@change="cartGoodsNumberChange"
|
|
v-model="number"
|
|
placeholder="0"
|
|
></el-input>
|
|
</div>
|
|
<i
|
|
class="el-icon-circle-plus icon-add"
|
|
@click="changeOrderNumber(false)"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-333 total-price">
|
|
<template v-if="item.isGift === 'true' || item.status == 'return'">
|
|
<div>￥0</div>
|
|
<div class="free-price">
|
|
<span v-if="isSeatFee"> ￥{{ item.totalAmount }}</span>
|
|
<span v-else> ￥{{ isShowVipPrice ? vipAllPrice : allPrice }}</span>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div v-if="isSeatFee">￥{{ item.totalAmount }}</div>
|
|
<div v-else>
|
|
<div v-if="isShowVipPrice&&vipAllPrice!=allPrice">￥{{ vipAllPrice }}</div>
|
|
<div :class="{ 'free-price': isShowVipPrice&&vipAllPrice!=allPrice }">
|
|
<span> ￥{{ allPrice }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
isShowVipPrice: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
//是否是餐位费
|
|
isSeatFee: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
//是否是历史订单商品
|
|
isOld: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
//第几次下单 1以及以上为历史订单 0为当前购物车
|
|
placeNum: {
|
|
type: [String, Number],
|
|
default: 0,
|
|
},
|
|
selPlaceNum: {
|
|
type: [String, Number],
|
|
default: -1,
|
|
},
|
|
//是否允许改变数量
|
|
canChangeNumber: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
item: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
number: 0,
|
|
};
|
|
},
|
|
},
|
|
selIndex: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
number: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
vipAllPrice() {
|
|
const item = this.item;
|
|
const price =
|
|
this.isShowVipPrice &&
|
|
item.memberPrice != null &&
|
|
item.memberPrice != undefined
|
|
? (item.memberPrice<=0?item.salePrice:item.memberPrice)
|
|
: item.salePrice;
|
|
return (price * item.number + (item.packAmount || 0)).toFixed(2);
|
|
},
|
|
|
|
allPrice() {
|
|
const item = this.item;
|
|
|
|
const price = item.salePrice;
|
|
return (price * item.number + (item.packAmount || 0)).toFixed(2);
|
|
},
|
|
isActive() {
|
|
const isSel =
|
|
this.selIndex === this.index && this.placeNum === this.selPlaceNum;
|
|
console.log(isSel);
|
|
return isSel ? "active" : "";
|
|
},
|
|
},
|
|
watch: {
|
|
"item.number": function (val) {
|
|
this.number = val;
|
|
// this.$emit('changeOrderNumber',this.index)
|
|
},
|
|
},
|
|
mounted() {
|
|
this.number = this.item.number;
|
|
},
|
|
methods: {
|
|
editNote() {
|
|
if (this.placeNum === 0) {
|
|
this.$emit("editNote", this.index);
|
|
}
|
|
},
|
|
//购物车商品输入框数量改变
|
|
cartGoodsNumberChange(newval) {
|
|
if (newval <= 0) {
|
|
item.number = 1;
|
|
}
|
|
newval = `${newval}`.split(".")[0] * 1;
|
|
this.number = newval;
|
|
this.$emit("cartGoodsNumberChange", newval, this.index);
|
|
},
|
|
//购物车商品输入框数量输入
|
|
cartGoodsNumberInput(newval) {
|
|
if (newval <= 0) {
|
|
return (this.number = 1);
|
|
}
|
|
newval = `${newval}`.split(".")[0] * 1;
|
|
this.number = newval;
|
|
this.$emit("cartGoodsNumberInput", newval, this.index);
|
|
},
|
|
changeOrderNumber(isReduce) {
|
|
this.$emit("changeOrderNumber", this.index, isReduce);
|
|
},
|
|
itemClick() {
|
|
// if(this.isSeatFee){
|
|
// return
|
|
// }
|
|
this.$emit("itemClick", this.index, this.canChangeNumber, this.placeNum);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
::v-deep .number-box .el-input__inner {
|
|
border: none;
|
|
}
|
|
::v-deep .el-button--text {
|
|
color: #000;
|
|
}
|
|
::v-deep .number-box .el-input__inner {
|
|
border: none;
|
|
padding: 0 4px;
|
|
text-align: center;
|
|
}
|
|
.isSeatFee {
|
|
background: #3f9eff;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
.icon-remove {
|
|
border: 1px solid #d8d8d8;
|
|
width: 22px;
|
|
height: 22px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
width: 10px;
|
|
height: 1px;
|
|
background: #999;
|
|
}
|
|
}
|
|
.icon-add {
|
|
color: rgb(34, 191, 100);
|
|
font-size: 22px;
|
|
cursor: pointer;
|
|
}
|
|
.flex.order-item {
|
|
padding: 4px;
|
|
border-radius: 2px;
|
|
display: flex;
|
|
overflow: visible;
|
|
cursor: pointer;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
transition: all 0.3s;
|
|
.pack {
|
|
right: 100%;
|
|
width: 18px;
|
|
height: 18px;
|
|
background: #35ac6a;
|
|
border-radius: 4px 0 4px 0;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 17px;
|
|
}
|
|
.tui {
|
|
right: 100%;
|
|
width: 18px;
|
|
height: 18px;
|
|
background: #ac4735;
|
|
border-radius: 4px 0 4px 0;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 17px;
|
|
}
|
|
&.active {
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.total-price {
|
|
width: 94px;
|
|
font-size: 16px;
|
|
text-align: right;
|
|
}
|
|
|
|
.good-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
min-width: 70px;
|
|
|
|
.specSnap {
|
|
color: #999;
|
|
font-size: 12px;
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
font-size: 13px;
|
|
text-align: left;
|
|
color: #212121;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.img {
|
|
width: 59px;
|
|
height: 59px;
|
|
position: relative;
|
|
margin-right: 10px;
|
|
|
|
img {
|
|
width: 59px;
|
|
height: 59px;
|
|
}
|
|
}
|
|
}
|
|
.note {
|
|
max-width: 70%;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
text-align: left;
|
|
color: #999;
|
|
margin-top: 5px;
|
|
word-break: break-all;
|
|
}
|
|
.order-number-box {
|
|
position: relative;
|
|
|
|
.absolute {
|
|
width: 60px;
|
|
height: 40px;
|
|
right: -38px;
|
|
top: -14px;
|
|
position: absolute;
|
|
|
|
.order-input-number {
|
|
position: absolute;
|
|
right: -6px;
|
|
top: 0;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: none;
|
|
background-color: #fff;
|
|
border: 1px solid #e4e7ed;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
|
|
padding: 9px 6px;
|
|
background-color: #fff;
|
|
height: 40px;
|
|
}
|
|
|
|
&:hover .order-input-number {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
.good_info_discount {
|
|
height: 16px;
|
|
padding: 0 3px;
|
|
color: #ff3f3f;
|
|
background-color: rgba(255, 63, 63, 0.1);
|
|
border-radius: 2px;
|
|
margin-left: 6px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
</style> |