admin/addon/cashier/source/os/components/ns-justmoney/ns-justmoney.vue

287 lines
6.9 KiB
Vue

<template>
<view class="justmoney">
<view class="title">
订单调价
<text class="iconfont iconguanbi1" @click="close('orderAdjustMoney')"></text>
</view>
<view class="table-box" v-if="goods_list.length > 0">
<view class="table" style="width:76%">
<view class="table-th">
<view class="table-td" style="width: 30%;">商品信息</view>
<view class="table-td" style="width: 10%;">单价</view>
<view class="table-td" style="width: 12%;">数量</view>
<view class="table-td" style="width: 12%;">小计</view>
<view class="table-td" style="width: 12%;">商品总额</view>
<view class="table-td" style="width: 12%;">店内优惠</view>
<view class="table-td" style="width: 12%;">抵扣金额</view>
</view>
<view class="table-tb">
<view class="table-tb-item" v-for="(item, index) in new_list" :key="index">
<view class="table-td" style="width: 30%;">
<image class="goods-image" :src="$util.img(item.goods_image, { size: 'small' })" mode="widthFix"></image>
<view class="goods-name">{{ item.goods_name }}</view>
</view>
<view class="table-td" style="width: 10%;">{{ item.price }}</view>
<view class="table-td" style="width: 12%;">{{ item.num }}</view>
<view class="table-td" style="width: 12%;">{{ item.goods_money }}</view>
<view class="table-td" style="width: 12%;">{{ item.goods_money }}</view>
<view class="table-td" style="width: 12%;">{{ discount_money }}</view>
<view class="table-td" style="width: 12%;">{{ offset_money }}</view>
</view>
</view>
</view>
<view class="table-unit" style="width:14%">
<view class="table-th">调整金额</view>
<view class="table-td table-td-unit"><input placeholder="请输入调整金额" type="number" v-model="adjust_money" @input="adjust" /></view>
</view>
<view class="table-unit" style="width:10%">
<view class="table-th">实付金额</view>
<view class="table-tb">{{ pay_money_unit }}</view>
</view>
</view>
<view class="die-but">
<button type="primary" class="default-btn btn save" @click="close('orderAdjustMoney')">取消</button>
<button type="primary" class="primary-btn btn" @click="save({ adjust_money: adjust_money })">保存</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pay_money_unit: '',
//防止浅拷贝影响全局
new_list: [],
// 金额调整
adjust_money: 0,
//防重复操作
judge: false
};
},
props: {
goods_list: {
type: Array,
default: () => {
return [];
}
},
pay_money: {
type: [String, Number],
default: () => {
return '0';
}
},
discount_money: {
type: [String, Number],
default: () => {
return 0;
}
},
offset_money: {
type: [String, Number],
default: () => {
return 0;
}
}
},
created() {
this.pay_money_unit = JSON.parse(JSON.stringify(this.pay_money));
//防止浅拷贝影响全局
this.new_list = JSON.parse(JSON.stringify(this.goods_list));
this.adjust_money = JSON.parse(JSON.stringify(this.goods_list[0].adjust_money));
},
methods: {
/**
* 调价修改
*/
adjust() {
if (!this.adjust_money) {
this.adjust_money = 0;
}
let obj = JSON.parse(JSON.stringify(this.new_list[0]));
let goods_money = parseFloat(obj.goods_money);
let discount_money = parseFloat(this.discount_money);
let offset_money = parseFloat(this.offset_money);
let shipping_money = 0.0;
var real_goods_money = parseFloat(goods_money) + parseFloat(this.adjust_money) - parseFloat(discount_money);
var total_money = parseFloat(real_goods_money) + parseFloat(shipping_money);
total_money = Math.round(total_money * 100) / 100;
this.pay_money_unit = parseFloat(total_money - offset_money).toFixed(2);
this.$forceUpdate();
},
/**
* 调价修改提交
*/
save(data) {
if (this.judge) return false;
this.judge = true;
this.$emit('orderAdjustMoney', data, () => {
this.judge = false;
});
},
/**
* 弹窗关闭
*/
close() {
this.$emit('close', 'orderAdjustMoney');
}
}
};
</script>
<style lang="scss" scoped>
.justmoney {
width: 80vw;
background: #ffffff;
border-radius: 0.06rem;
padding-bottom: 0.2rem;
min-width: 10rem;
.title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.15rem;
height: 0.5rem;
box-sizing: border-box;
border-bottom: 0.01rem solid #e6e6e6;
font-size: 0.16rem;
.iconfont {
font-size: 0.18rem;
}
}
.table-box {
display: flex;
padding: 0 0.3rem;
box-sizing: border-box;
margin-top: 0.2rem;
width: 100%;
.table {
.table-th {
width: 100%;
height: 0.4rem;
display: flex;
align-items: center;
justify-content: space-between;
background: #f8f6f9;
border-bottom: 0.01rem solid #e6e6e6;
box-sizing: border-box;
}
.table-td {
padding: 0 0.15rem;
box-sizing: border-box;
}
.table-tb {
.table-tb-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 0.5rem;
border-bottom: 0.01rem solid #e6e6e6;
.table-td {
border-left: 0.01rem solid #e6e6e6;
height: 100%;
display: flex;
align-items: center;
.goods-image {
width: 0.4rem;
height: 0.4rem;
margin-right: 0.1rem;
}
.goods-name {
font-size: 0.14rem;
color: #333333;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.table-td:last-child {
border-right: 0.01rem solid #e6e6e6;
}
}
}
}
.table-unit {
.table-th {
width: 100%;
height: 0.4rem;
background: #f8f6f9;
border-bottom: 0.01rem solid #e6e6e6;
padding-left: 0.15rem;
box-sizing: border-box;
display: flex;
align-items: center;
}
.table-tb {
height: calc(100% - 0.4rem);
display: flex;
align-items: center;
padding-left: 0.15rem;
box-sizing: border-box;
border-right: 0.01rem solid #e6e6e6;
border-bottom: 0.01rem solid #e6e6e6;
white-space: nowrap;
overflow: hidden;
}
.table-td-unit {
padding: 0 0.15rem;
box-sizing: border-box;
height: calc(100% - 0.4rem);
display: flex;
align-items: center;
padding-left: 0.15rem;
box-sizing: border-box;
border-right: 0.01rem solid #e6e6e6;
border-bottom: 0.01rem solid #e6e6e6;
input {
width: 100%;
height: 60%;
font-size: 0.14rem;
border: 0.01rem solid #e6e6e6;
padding-left: 0.1rem;
}
}
}
}
.die-but {
margin-top: 0.2rem;
.btn {
width: auto;
height: auto;
padding: 0 0.2rem;
float: right;
}
.save {
margin: 0 0.15rem;
}
}
.die-but:after {
overflow: hidden;
content: '';
height: 0;
clear: both;
display: block;
}
}
</style>