first
This commit is contained in:
168
pageInvoicing/outbound-record/components/list-item.vue
Normal file
168
pageInvoicing/outbound-record/components/list-item.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="font-bold color-333">2024-07-24 14:23:09</view>
|
||||
<view class="item bg-fff border-r-12 u-m-t-20">
|
||||
|
||||
<view class="u-flex u-text-left border-bottom u-p-b-30">
|
||||
<view class="">手动出库</view>
|
||||
<view class="u-m-l-10 u-m-r-10">|</view>
|
||||
<view class="">东风</view>
|
||||
</view>
|
||||
<view class="u-flex u-text-left u-row-left u-m-t-30">
|
||||
<view class="name">名称</view>
|
||||
<view class="category u-flex u-m-l-10">
|
||||
<view class="tag">分类</view>
|
||||
</view>
|
||||
<view class="id color-999 u-font-24 bg-gray u-m-l-10">
|
||||
ID:1234
|
||||
</view>
|
||||
</view>
|
||||
<view class="info u-flex bg-gray u-p-24 u-m-t-20 u-row-between">
|
||||
<view class="u-text-right">
|
||||
<view class="u-flex">
|
||||
<view class="title-min-width">使用量</view>
|
||||
<text class="u-m-l-10 color-red">12</text>
|
||||
</view>
|
||||
<view class="u-m-t-10 u-flex">
|
||||
<view class="title-min-width">成本</view>
|
||||
<text class="u-m-l-10">1.00元</text>
|
||||
</view>
|
||||
<!-- <view class="u-m-t-10 u-relative">
|
||||
<text>库存</text>
|
||||
<text class="u-m-l-10">2</text>
|
||||
<view class="u-absolute u-flex addNumber" >
|
||||
<uni-icons type="arrow-right" :color="color.ColorMain" size="16"></uni-icons>
|
||||
<text class="color-main u-m-l-10">3</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="u-m-t-10 u-flex">
|
||||
<view class="title-min-width">剩余库存</view>
|
||||
<text class="u-m-l-10 color-main">2</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-flex u-row-right">
|
||||
<view>
|
||||
<!-- <view class="color-main font-bold">+22</view> -->
|
||||
<!-- <view class="u-m-t-10">剩余库存</view> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info u-flex bg-gray u-p-24 u-m-t-20 u-row-between" v-if="state.showRemark">
|
||||
<view class="u-flex u-text-right">
|
||||
<view class="title-min-width">出库备注</view>
|
||||
<text class="u-m-l-10 color-999">2</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-m-t-24 u-row-center" >
|
||||
<view class="u-flex" @tap="toggleRemark">
|
||||
<view class="u-m-r-10 color-666">手动出库明细</view>
|
||||
<view class="icon-down tranistion-1" :class="{'icon-up':state.showRemark}">
|
||||
<uni-icons type="right" size="16" color="#666"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-flex u-row-right u-m-t-20">
|
||||
<view class="u-flex u-m-r-30">
|
||||
<my-button shape="circle" height="70" type="default" @tap="retract">
|
||||
撤回操作
|
||||
</my-button>
|
||||
</view>
|
||||
<!-- <view class="u-flex">
|
||||
<my-button shape="circle" height="70" plain type="primary" @tap="more">更多操作</my-button>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import myButton from '@/components/my-components/my-button';
|
||||
import go from '@/commons/utils/go.js'
|
||||
import color from '@/commons/color.js'
|
||||
import {
|
||||
reactive
|
||||
} from 'vue';
|
||||
|
||||
function retract() {
|
||||
console.log('retract');
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定撤回此该出库?撤回后，将恢复改动前的数量',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
const emits = defineEmits(['more'])
|
||||
|
||||
function more() {
|
||||
emits('more', props.index)
|
||||
}
|
||||
|
||||
let state = reactive({
|
||||
showRemark:false
|
||||
})
|
||||
function toggleRemark(){
|
||||
state.showRemark=!state.showRemark
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.item {
|
||||
padding: 32rpx 32rpx 28rpx 28rpx;
|
||||
|
||||
.title-min-width {
|
||||
min-width: 132rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: $my-main-color;
|
||||
background-color: rgb(234, 244, 255);
|
||||
border-radius: 8rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.id {
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.info {}
|
||||
}
|
||||
|
||||
.addNumber {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
padding-left: 20rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.icon-down {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.icon-up{
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user