purchase-let/components/goodPopup.vue

174 lines
4.0 KiB
Vue
Raw Normal View History

2024-04-29 18:14:58 +08:00
<template>
2024-06-22 11:27:11 +08:00
<up-popup :show="show" closeable round="10" @close="close" :safeAreaInsetBottom="false">
<view class="good-popup">
<view class="head-title">
2024-06-22 11:31:01 +08:00
{{ datas.is_bulk ? '称重商品' : '计件商品' }}
2024-06-22 11:27:11 +08:00
</view>
<view class="row">
<view>商品名称</view>
2024-06-22 11:31:01 +08:00
<view>{{ datas.name || datas.goods_name || datas.store_name }}</view>
2024-06-22 11:27:11 +08:00
</view>
<view class="row">
<view>商品单位</view>
2024-06-22 11:31:01 +08:00
<view>{{ datas.unit_name }}</view>
2024-06-22 11:27:11 +08:00
</view>
<view class="row">
<view>商品价格</view>
<view>¥ {{ datas.price || datas.sell }} / {{ datas.unit_name }}</view>
2024-06-22 11:27:11 +08:00
</view>
2024-06-22 11:31:01 +08:00
<view class="row" v-if="datas.batch > 0">
2024-06-22 11:27:11 +08:00
<view>起批量</view>
2024-06-22 11:31:01 +08:00
<view>{{ datas.batch }}{{ datas.unit_name }}起批 </view>
2024-06-22 11:27:11 +08:00
</view>
<view class="row">
<view>小计</view>
2024-06-22 11:31:01 +08:00
<view style="color: #F55726;" v-if="+datas.cart_num < +datas.batch">
{{ `${datas.batch}${datas.unit_name}起批` }}
2024-06-22 11:27:11 +08:00
</view>
2024-06-22 11:31:01 +08:00
<view style="color: #F55726;" v-else>¥ {{ subtotal }}</view>
2024-06-22 11:27:11 +08:00
</view>
2024-06-25 15:34:24 +08:00
<view v-if="datas.is_bulk" class="row" style="height: 100rpx;">
2024-06-22 11:27:11 +08:00
<view>购买重量<text style="color: #F55726;">*</text></view>
<view style="flex: 1;">
2024-06-22 21:11:18 +08:00
<up-input v-model="datas.cart_num" :cursorSpacing='120' type="digit" border="none"
placeholder="请输入购买重量" inputAlign="right"></up-input>
2024-06-22 11:27:11 +08:00
</view>
</view>
2024-06-25 15:34:24 +08:00
<view v-else class="row" style="height: 100rpx;">
2024-06-22 11:27:11 +08:00
<view>购买数量<text style="color: #F55726;">*</text></view>
<view style="flex: 1;">
2024-06-22 21:11:18 +08:00
<up-input ref='foucs1' v-model="datas.cart_num" :cursorSpacing='120' type="digit" border="none"
placeholder="请输入购买数量" inputAlign="right">
2024-06-22 11:27:11 +08:00
<template #suffix>
2024-06-22 11:31:01 +08:00
<span style="color: #20b128;">{{ datas.unit_name }}</span>
2024-06-22 11:27:11 +08:00
</template>
</up-input>
</view>
</view>
<view class="row" style="padding-top: 30px;padding-bottom: 30rpx;">
<view style="width: 30%;margin-right: 30rpx;">
<up-button @click="close" color="#f7f7f7"><text style="color: #333;">取消</text></up-button>
</view>
<view style="flex: 1;">
<up-button @click="change" color="#20b128">确定</up-button>
</view>
</view>
</view>
</up-popup>
2024-04-29 18:14:58 +08:00
</template>
<script setup>
2024-06-22 21:11:18 +08:00
import {
computed,
nextTick,
ref,
} from "vue"
import {
toast
} from "../uni_modules/uview-plus";
import {
onShow
} from '@dcloudio/uni-app';
const foucs1 = ref(null)
const props = defineProps({
show: {
type: Boolean,
default: false
},
})
const datas = ref({
cart_num: ''
});
const setData = (e) => {
datas.value = e;
if (Number(e.batch) > 0) datas.value.cart_num = e.batch;
else datas.value.cart_num = '';
2024-06-22 11:27:11 +08:00
}
2024-04-29 18:14:58 +08:00
2024-06-22 21:11:18 +08:00
const emit = defineEmits(['close', 'change']);
const close = () => {
emit('close');
}
2024-06-22 11:27:11 +08:00
2024-06-22 21:11:18 +08:00
const change = () => {
if (+datas.value.cart_num < +datas.value.batch) return uni.$u.toast(
`购买数量不能小于${datas.value.batch}${datas.value.unit_name}`);
if (subtotal.value <= 0) {
uni.$u.toast('金额不可小于等于0');
datas.value.cart_num = '';
return;
}
emit('change', datas.value);
2024-06-22 11:31:01 +08:00
}
2024-06-22 11:27:11 +08:00
2024-06-22 21:11:18 +08:00
const subtotal = computed(() => {
let num = +datas.value.cart_num || 0;
let sell = +datas.value.sell || +datas.value.price;
return Number(num * sell * 100 / 100).toFixed(2)
})
defineExpose({
setData,
// founcsFn
})
</script>
<style scoped lang="scss">
.good-popup {
padding: 30rpx;
.head-title {
font-weight: bold;
text-align: center;
margin-bottom: 20rpx;
2024-06-22 11:31:01 +08:00
}
2024-06-22 11:27:11 +08:00
2024-06-22 21:11:18 +08:00
.row {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #f6f6f6;
margin-bottom: 20rpx;
&:last-child {
border-bottom: none;
margin-bottom: 0;
}
.content {
.top {
display: flex;
2024-06-22 11:27:11 +08:00
2024-06-22 21:11:18 +08:00
view {
margin-right: 20rpx;
}
2024-06-22 11:27:11 +08:00
}
2024-06-22 21:11:18 +08:00
.bottom {}
2024-06-22 11:27:11 +08:00
}
2024-06-22 21:11:18 +08:00
image {
width: 40rpx;
height: 40rpx;
flex-shrink: 0;
}
2024-06-22 11:27:11 +08:00
}
2024-06-22 21:11:18 +08:00
}
2024-06-22 11:27:11 +08:00
2024-06-22 21:11:18 +08:00
@keyframes disappear {
to {
opacity: 0;
/* 渐隐 */
transform: scale(0);
/* 缩小 */
2024-06-22 11:27:11 +08:00
}
}
2024-04-29 18:14:58 +08:00
</style>