168 lines
4.0 KiB
Vue
168 lines
4.0 KiB
Vue
<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> |