hldy_app/component/storeroom/drawer/suixing/index.vue

687 lines
14 KiB
Vue
Raw Normal View History

2025-05-09 17:08:16 +08:00
<!-- 入库单 -->
<template>
<view class="draw-all">
<view class="draw-contain">
<view class="draw-title">
<view class="draw-flex">
<view class="draw-title-gun"></view>
<view class="draw-title-font">入库单</view>
</view>
</view>
<view class="swiper-card-once">
<view class="swiper-card-top">
<view class="swiper-card-top-card">
<view class="swiper-card-top-card-weight">
<view class="weight-left">
<view class="green-font">采购单号</view>
<view class="green-font" style="font-weight: 700;">A0120250301001</view>
</view>
<!-- <view class="weight-left">
<view class="">总金额</view>
<view class="" style="color: red;">100.00</view>
</view> -->
</view>
<!-- <view class="weight-boom"> -->
<view class="swiper-card-top-card-noral">
<view class="swiper-all-flex">
<view class="swiper-gray">
采购人
</view>
<view class="swiper-black">
王法
</view>
</view>
<view class="swiper-all-flex" style="width: 55%;">
<view class="swiper-gray">
采购日期
</view>
<view class="swiper-black">
2025.03.02
</view>
</view>
</view>
<view class="swiper-card-top-card-noral" style="margin-top: 15rpx;">
<view class="swiper-all-flex">
<view class="swiper-gray">
付款方式
</view>
<view class="swiper-black">
月结
</view>
</view>
<view class="swiper-all-flex" style="width: 55%;">
<view class="swiper-gray">
供应商
</view>
<view class="swiper-black">
宽城区珂爱个人卫生用品店
</view>
</view>
</view>
<!-- </view> -->
</view>
</view>
</view>
<view class="draw-title" style="margin-top: 50rpx;">
<view class="draw-flex">
<view class="draw-title-gun"></view>
<view class="draw-title-font">随行单</view>
</view>
</view>
<view class="scroll-view">
<scroll-view scroll-y style="height: 100%;" :show-scrollbar="false">
2025-05-13 17:18:07 +08:00
<view v-for="(item,index) in photoArray" :key="index">
<view class="card-father" @click="openPhoto(index)">
2025-05-09 17:08:16 +08:00
<view class="card-white">
2025-05-13 17:18:07 +08:00
<image class="card-white-photo" :src="item" />
2025-05-09 17:08:16 +08:00
</view>
2025-05-13 17:18:07 +08:00
<view class="down-title" v-if="index!==photoArray.length-1">
2025-05-09 17:08:16 +08:00
<view class="down-title-flex">
<image class="down-title-photo" src="/static/index/Warehousing/shangchuanpeople.png" />
<view style="margin-left: 10rpx;">上传人:</view>
<view style="font-weight: 700;">王法</view>
</view>
<view class="down-title-flex">
<image class="down-title-photo" src="/static/index/Warehousing/shangchuantime.png" />
<view style="margin-left: 10rpx;">上传时间:</view>
<view style="font-weight: 500;">2025.03.01 10:00:00</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="button-card">
<!-- <view class="swiper-button-white" @click="closevoid">
关闭
</view> -->
<!-- <view class="swiper-button-blue" @click="voidIt()">
作废
</view> -->
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits, watch } from 'vue';
const note = ref("");
const calendarShow = ref(false);
const stateTarget = ref("");
const emit = defineEmits(['opensuixing', "closevoid"])
const props = defineProps({
});
const postItems = ref(0);
2025-05-13 17:18:07 +08:00
const photoArray = ref([`https://img-s.msn.cn/tenant/amp/entityid/AA1ECZ6y.img?w=768&h=960&m=6&x=355&y=171&s=47&d=47`, `https://img-s.msn.cn/tenant/amp/entityid/AA1ECtEb.img?w=768&h=436&m=6&x=280&y=134&s=200&d=200`,"/static/index/addphoto.png"])
2025-05-09 17:08:16 +08:00
// const stateArray = ['已作废', '未确认', '已确认', '未完结', '待结账', '已结账'];
// 初始化左侧菜单列表
const buttonList = ref([
{ url: '/static/index/Warehousing/sousuo.png', name: '查询' },
{ url: '/static/index/Warehousing/chongzhi.png', name: '重置' },
]);
2025-05-13 17:18:07 +08:00
const chooseImages = () => {
uni.chooseImage({
count: 9, // 最多可选9张
sizeType: ['original', 'compressed'], // 原图或压缩图
sourceType: ['album', 'camera'], // 从相册或相机
success: (res) => {
photoArray.value.pop()
photoArray.value = [...photoArray.value, ...res.tempFilePaths];
photoArray.value.push("/static/index/addphoto.png")
}
});
};
const openPhoto = (index : number) => {
if (index == photoArray.value.length - 1) {
chooseImages()
} else {
uni.previewImage({
urls: photoArray.value.slice(0, -1),
current: photoArray.value[index],
})
}
}
2025-05-09 17:08:16 +08:00
// const emit = defineEmits(['opendetail'])
const calendarchange = (e : any) => {
stateTarget.value = e.result
}
const opensuixing = () => {
emit('opensuixing')
}
const closevoid = () => {
emit('closevoid')
}
// const opendetail = () => {
// emit('opendetail')
// }
</script>
<style lang="less" scoped>
.draw-all {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: #fff;
border-top-left-radius: 80rpx;
border-bottom-left-radius: 80rpx;
overflow: hidden;
.draw-flex {
display: flex;
}
.draw-contain {
width: 100%;
height: calc(100vh);
background-image: url("/static/index/fanpink.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
}
.swiper-gray {
color: #596278;
}
.draw-title {
width: 100%;
height: 60rpx;
display: flex;
justify-content: space-between;
margin-top: 80rpx;
margin-left: 20rpx;
.draw-flex {
display: flex;
}
.draw-title-gun {
margin-left: 20rpx;
margin-right: 20rpx;
width: 13rpx;
height: 40rpx;
background: linear-gradient(to bottom, #04BCED, #0160CE);
border-radius: 10rpx;
}
.draw-title-font {
font-size: 35rpx;
font-weight: 700;
margin-top: -3rpx;
}
.draw-title-blue {
height: 50rpx;
width: 120rpx;
margin-right: 50rpx;
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10rpx;
border: 1rpx solid #fff;
}
}
.scroll-view {
height: 980rpx;
width: calc(100% - 80rpx);
margin-left: 40rpx;
border-radius: 40rpx;
border: 2rpx solid #fff;
box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
overflow: hidden;
.card-father{
margin: 10rpx 0 20rpx 23rpx;
width: 800rpx;
height: 350rpx;
border-radius: 30rpx;
box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.7);
background-blend-mode: screen;
isolation: isolate;
// justify-content: center;
display: flex;
flex-direction: column;
.down-title{
width: 100%;
height: 80rpx;
// background-color: red;
padding: 0 50rpx;
display: flex;
justify-content: space-between;
.down-title-flex{
display: flex;
align-items: center;
}
.down-title-photo{
width: 30rpx;
height: 30rpx;
}
}
.card-white{
width: 740rpx;
height: 250rpx;
margin-top: 20rpx;
margin-left: 30rpx;
background-color: #fff;
border-radius: 30rpx;
display: flex;
justify-content: center;
align-items: center;
.card-white-photo{
width: 260rpx;
height: 180rpx;
}
}
}
}
.swiper-card-once {
margin: 20rpx 0 0rpx 30rpx;
width: 870rpx;
height: 220rpx;
border: 2rpx solid #fff;
border-radius: 30rpx;
background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.5);
background-blend-mode: screen;
isolation: isolate;
box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
overflow: hidden;
padding: 0 40rpx;
.swiper-card-top {
width: 100%;
height: 220rpx;
display: flex;
.swiper-card-top-card {
width: 100%;
height: 100%;
.swiper-card-top-card-weight {
display: flex;
justify-content: space-between;
margin: 25rpx 0;
font-size: 30rpx;
font-weight: 500;
.weight-left {
display: flex;
.blue-number {
font-size: 32rpx;
font-weight: 700;
color: #017DE9;
margin-top: 10rpx;
}
}
.weight-right {
color: #FF6000;
font-weight: 500;
font-size: 30rpx;
}
}
.swiper-card-top-card-noral {
// margin-left: 50rpx;
display: flex;
justify-content: space-between;
margin-top: 30rpx;
font-size: 25rpx;
}
}
}
}
.swiper-flex {
display: flex;
flex-wrap: wrap;
margin-left: 0rpx;
.swiper-card {
margin: 0 0 30rpx 30rpx;
width: 1010rpx;
height: 260rpx;
border: 2rpx solid #fff;
border-radius: 30rpx;
background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.6);
background-blend-mode: screen;
isolation: isolate;
box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
overflow: hidden;
padding: 0 40rpx;
.swiper-card-top {
width: 100%;
height: 270rpx;
.swiper-card-top-card {
width: 100%;
height: 100%;
display: flex;
}
}
}
}
.index-right-button-blue {
height: 50rpx;
width: 100rpx;
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10rpx;
border: 1rpx solid #fff;
}
.swiper-all-flex {
display: flex;
}
.card-img-father {
height: 100%;
width: 210rpx;
// background-color: #fff;
.card-img-bgc {
// margin-top: -15rpx;
// margin-top: 30rpx;
margin-top: 20rpx;
margin-left: -15rpx;
display: flex;
width: 200rpx;
height: 220rpx;
align-items: center;
justify-content: center;
background-color: rgb(238, 243, 253);
border-radius: 25rpx;
box-shadow: 2rpx 2rpx 4rpx 0rpx #839fcc;
}
.card-img {
// 图片切的有问题
width: 130rpx;
height: 130rpx;
}
}
.card-right {
width: calc(100% - 230rpx);
height: 100%;
.card-right-title {
width: 100%;
display: flex;
justify-content: space-between;
font-weight: 700;
// margin: 20rpx 0;
margin-top: 20rpx;
margin-bottom: 5rpx;
.title-gray {
color: #596278;
font-size: 30rpx;
}
.title-black {
font-size: 30rpx;
}
}
.card-right-other {
margin-top: 15rpx;
width: 100%;
display: flex;
justify-content: space-between;
font-size: 25rpx;
.title-gray {
color: #596278;
}
.title-green {
color: #647900;
}
.title-red {
color: #FF4A27;
}
}
}
.swiper-button-white {
background: linear-gradient(to bottom, #D5E0F8, #ECF6FF);
border: 2rpx solid #fff;
border-radius: 20rpx;
width: 200rpx;
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
// margin: 0 10rpx;
margin-right: 20rpx;
}
.swiper-button-blue {
background: linear-gradient(to bottom, #FF8251, #F52E2C);
border: 2rpx solid #fff;
border-radius: 20rpx;
width: 200rpx;
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
margin: 0 10rpx;
color: #fff;
margin-right: 40rpx;
}
.button-card {
margin-top: 30rpx;
display: flex;
justify-content: flex-end;
}
.down-note {
width: 100%;
overflow: hidden;
height: 170rpx;
display: flex;
align-items: center;
position: relative;
margin-top: -10rpx;
display: flex;
.down-note-img{
width: 60rpx;
height: 60rpx;
}
.down-note-photo{
height: 150rpx;
width: 200rpx;
margin: 0 10rpx;
}
}
// .down-note-title-input {
// width: calc(100% - 100rpx);
// margin-left: 40rpx;
// height: 120rpx;
// font-size: 27rpx;
// border: 2rpx #a0adc8 solid;
// padding: 15rpx 0 15rpx 20rpx;
// background-color: rgba(234, 243, 254, 0.6);
// border-radius: 30rpx;
// }
// .char-count {
// position: absolute;
// bottom: 30rpx;
// right: 70rpx;
// color: #999;
// font-size: 25rpx;
// }
// .draw-red {
// color: red;
// font-size: 40rpx;
// margin-top: -10rpx;
// }
.green-font {
// background-color: #28CFB3;
color: #28CFB3;
}
.radio-circle-top-father {
// overflow: auto;
display: flex;
margin: 0 0 0 80rpx;
height: 50rpx;
.radio-circle-top {
// margin-top: 30rpx;
// width: 2000rpx;
display: flex;
}
.radio-circle {
position: relative;
margin-top: 2rpx;
width: 30rpx;
height: 30rpx;
border-radius: 50%;
border: 2rpx solid rgb(2, 171, 254);
background-color: transparent;
}
.radio-circle-target {
position: relative;
margin-top: 2rpx;
width: 30rpx;
height: 30rpx;
border-radius: 50%;
border: 2rpx solid rgb(2, 171, 254);
background-color: transparent;
}
.radio-circle-target::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20rpx;
height: 20rpx;
background-color: rgb(2, 171, 254);
border-radius: 50%;
}
.radio-font {
margin-left: 15rpx;
margin-right: 60rpx;
width: 400rpx;
font-size: 25rpx;
}
}
.ruku-time {
display: flex;
justify-content: space-between;
width: 100%;
height: 60rpx;
.ruku-time-font {
font-size: 30rpx;
font-weight: 500;
}
.ruku-time-weight {
font-size: 30rpx;
font-weight: 700;
}
.button-first {
width: 120rpx;
height: 50rpx;
border-radius: 20rpx;
margin-right: 15rpx;
background: linear-gradient(to bottom right, #00C3AC, #28CFB3);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
margin-right: 40rpx;
margin-top: -5rpx;
}
}
.title-weight-red {
color: #FF4A27;
}
.card-right-bgc {
width: 730rpx;
height: 175rpx;
background-color: rgb(238, 243, 253);
border-radius: 25rpx;
// border: 2rpx solid #fff;
border: 2rpx solid #fff;
}
.boom-other{
width: 727rpx;
height: 55rpx;
// background-color: red;
display: flex;
.boom-other-card{
width: 250rpx;
display: flex;
align-items: center;
// background-color: #fff;
.boom-other-img{
width: 30rpx;
height: 30rpx;
margin-left: 15rpx;
// margin-top: -5rpx;
}
.boom-other-font{
margin-left: 5rpx;
font-size: 25rpx;
}
.boom-other-weight{
font-weight: 700;
margin-left: 30rpx;
}
}
}
.card-boom {
margin-top: -15rpx;
width: 727rpx;
height: 120rpx;
border-radius: 25rpx;
background-color: rgb(218, 226, 245);
}
.white-shu{
width: 2rpx;
// margin-top: 5rpx;
height: 40rpx;
background-color: #fff;
margin: 8rpx 5rpx 0 5rpx ;
}
</style>