yangjun
/
hldy_app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
hldy_app/component/storeroom/drawer/otherDetail/index.vue

596 lines
14 KiB
Vue
Raw Normal View History

1111
2025-05-08 17:34:54 +08:00
<!-- 详情按钮 -->
<template>
<view class="draw-all">
<view class="draw-contain">
<!-- 解决margin重叠问题 -->
<view class="draw-title">
<view class="draw-flex">
<view class="draw-title-gun"></view>
<view class="draw-title-font">采购单</view>
</view>
<view :class="openType ? `title-button`:`title-button-red`">
{{stateArray[openType]}}
</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="">采购单号：</view>
<view class="" style="font-weight: 700;">A0120250301001</view>
</view>
<view class="weight-left">
<view class="">总金额：</view>
99999
2025-05-09 17:08:16 +08:00
<view class="">100.00</view>
1111
2025-05-08 17:34:54 +08:00
</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: 25rpx;">
<view class="draw-flex">
<view class="draw-title-gun"></view>
<view class="draw-title-font">物料信息</view>
</view>
<view class="draw-flex" style="margin-top: -10rpx;" v-if="openType===3">
<view class="button-first" @click="openDrawer(0)">
入库单
</view>
<view class="button-second" @click="openDrawer(1)">
挂账单
</view>
<view class="button-third" @click="openDrawer(2)">
99999
2025-05-09 17:08:16 +08:00
销账单
1111
2025-05-08 17:34:54 +08:00
</view>
</view>
</view>
<view class="scroll-view" >
<scroll-view scroll-y style="height: 93%;margin-top: 2%;" :show-scrollbar="false">
<view class="swiper-flex">
<view v-for="(item,index) in [1,1,1,1,1,1,1,1,1,1,1,1,1]" :key="index">
<view class="swiper-card">
<view class="swiper-card-top">
<view class="swiper-card-top-card">
<view class="card-img-father">
<image class="card-img" src="/static/index/guan.png" />
</view>
<view class="card-right">
<view class="card-right-title">
<view class="draw-flex">
<view class="title-gray">
货品名称：
</view>
<view class="title-black">
引流袋(医用透明)
</view>
</view>
<view class="draw-flex">
<view class="title-gray">
采购数量：
</view>
<view class="title-black">
10
</view>
</view>
</view>
<view class="card-right-other">
<view class="draw-flex" style="width: 30%;">
<view class="title-gray">
货品编码：
</view>
<view class="title-black">
FLYPO01
</view>
</view>
<view class="draw-flex" style="width: 30%;">
<view class="title-gray">
规格型号：
</view>
<view class="title-black">
6cm*7cm
</view>
</view>
<view class="draw-flex" style="width: 30%;">
<view class="title-gray">
采购单位：
</view>
<view class="title-black">
个
</view>
</view>
</view>
<view class="card-right-other">
<view class="draw-flex" style="width: 30%;">
<view class="title-gray">
参考单价：
</view>
<view class="title-green">
0.1
</view>
</view>
<view class="draw-flex" style="width: 30%;">
<view class="title-gray">
采购单价：
</view>
99999
2025-05-09 17:08:16 +08:00
<view class="title-black">
1111
2025-05-08 17:34:54 +08:00
0.1
</view>
</view>
<view class="draw-flex" style="width: 30%;">
<view class="title-gray">
采购金额：
</view>
99999
2025-05-09 17:08:16 +08:00
<view class="title-black">
1111
2025-05-08 17:34:54 +08:00
10.12
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
99999
2025-05-09 17:08:16 +08:00
<view class="draw-title" style="margin-top: 35rpx;margin-bottom: 10rpx;">
1111
2025-05-08 17:34:54 +08:00
<view class="draw-flex">
<view class="draw-title-gun"></view>
<view class="draw-title-font">{{openType?`备注`:`作废原因`}}</view>
<view v-if="!openType" class="draw-red">*</view>
</view>
</view>
<view class="down-note">
<textarea class="down-note-title-input" v-model="note" maxlength="300" placeholder-style="color:#999"
99999
2025-05-09 17:08:16 +08:00
:placeholder="openType?`请输入备注`:`不予采购`" />
1111
2025-05-08 17:34:54 +08:00
<text class="char-count">{{ note.length }}/300</text>
</view>
99999
2025-05-09 17:08:16 +08:00
<!-- <view class="button-card">
</view> -->
1111
2025-05-08 17:34:54 +08:00
</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 props = defineProps({
openType: {
type: Number,
required: true,
},
});
const stateArray = ['已作废', '未确认', '已确认', '未完结', '待结账', '已结账'];
// 初始化左侧菜单列表
const buttonList = ref([
{ url: '/static/index/Warehousing/sousuo.png', name: '查询' },
{ url: '/static/index/Warehousing/chongzhi.png', name: '重置' },
]);
const emit = defineEmits(['closedetail','openDrawer'])
const calendarchange = (e : any) => {
stateTarget.value = e.result
}
const closedetail = () => {
emit('closedetail')
}
const openDrawer = (index:number) =>{
emit('openDrawer',index)
}
</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;
.button-first{
width: 120rpx;
height: 60rpx;
border-radius: 20rpx;
margin-right: 15rpx;
background: linear-gradient(to bottom right,#00C3AC,#28CFB3);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.button-second{
width: 120rpx;
height: 60rpx;
border-radius: 20rpx;
margin-right: 15rpx;
background: linear-gradient(to bottom right,#869AF3 ,#8296E9);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.button-third{
width: 120rpx;
height: 60rpx;
border-radius: 20rpx;
margin-right: 60rpx;
background: linear-gradient(to bottom right,#FF7A95 ,#FF9D94);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
}
.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: 650rpx;
width: calc(100% - 80rpx);
margin-left: 40rpx;
border-radius: 40rpx;
border: 2rpx solid #fff;
box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
overflow: hidden;
}
.swiper-card-once {
margin: 0 0 30rpx 30rpx;
width: 1340rpx;
height: 270rpx;
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: 270rpx;
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;
}
}
.weight-boom {
width: 1270rpx;
margin-left: -10rpx;
height: 140rpx;
background-color: rgba(131, 159, 204, 0.2);
border: 2rpx solid #fff;
box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
border-radius: 25rpx;
}
.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: 1250rpx;
height: 230rpx;
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: 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: 230rpx;
display: flex;
align-items: center;
.card-img {
margin-top: -15rpx;
// 图片切的有问题
width: 70%;
height: 70%;
}
}
.card-right {
width: calc(100% - 230rpx);
height: 100%;
.card-right-title {
width: 100%;
display: flex;
justify-content: space-between;
font-weight: 700;
margin: 30rpx 0;
.title-gray {
color: #596278;
font-size: 30rpx;
}
.title-black {
font-size: 30rpx;
}
}
.card-right-other {
margin-top: 20rpx;
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: 40rpx;
}
.swiper-button-blue {
background: linear-gradient(to bottom, #00C9FF, #0076FF);
border: 2rpx solid #fff;
border-radius: 20rpx;
width: 200rpx;
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
margin: 0 10rpx;
color: #fff;
}
.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;
}
.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;
}
.title-button {
height: 50rpx;
width: 120rpx;
margin-right: 50rpx;
border: 2rpx solid #fff;
border-radius: 15rpx;
background: #00AEFF;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.title-button-red {
height: 50rpx;
width: 120rpx;
margin-right: 50rpx;
border: 2rpx solid #fff;
border-radius: 15rpx;
background: linear-gradient(to bottom, #FF8251, #F52E2C);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.draw-red{
color: red;
font-size: 40rpx;
margin-top: -10rpx;
}
</style>