406 lines
8.8 KiB
Vue
406 lines
8.8 KiB
Vue
<template>
|
||
<view class="cont">
|
||
<view class="topcon">
|
||
<view class="title" >
|
||
<view></view>
|
||
采购单
|
||
</view>
|
||
<view class="zuofei" @click="emit(`link`,0)">
|
||
<image src="/static/index/procurement/bk.png" mode="aspectFill"></image>
|
||
返回
|
||
</view>
|
||
</view>
|
||
<view class="cgdh" >
|
||
<view class="conts">
|
||
<text>采购单号： </text>101C20251121006
|
||
</view>
|
||
<view class="conts">
|
||
<text>采购日期： </text>2025-10-12
|
||
</view>
|
||
<view class="jiage">
|
||
<view>
|
||
<text>￥</text>0.35
|
||
</view>
|
||
<text>采购价格 </text>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" class="caigoulist" scroll-with-animation @scrolltolower="scrolltolower()" lower-threshold="300"
|
||
:enhanced="true" :bounce="true" enable-back-to-top>
|
||
<view class="fler" v-for="(v,index) in InvoicingList" :key="index">
|
||
<view class="fler-view" >
|
||
<view class="carditem guodu" >
|
||
<view class="speitem guodu">
|
||
<view class="imghs">
|
||
<image style="border-radius: 1vw;"
|
||
:src="v.materialImg?serverUrl+v.materialImg:'/static/index/procurement/k.png'"
|
||
mode="aspectFill">
|
||
</image>
|
||
</view>
|
||
<view class="cardp">
|
||
<view>复健用品</view>
|
||
<view>复健用品</view>
|
||
</view>
|
||
<!-- <view class="cardp">
|
||
<view v-if="v.categoryId_dictText">{{v.categoryId_dictText}}</view>
|
||
<view v-if="v.typeId_dictText">{{v.typeId_dictText}}</view>
|
||
<view v-if="v.medicationId_dictText">{{v.medicationId_dictText}}</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="msitem guodu">
|
||
<view style="margin-top: 1.4vw;">
|
||
<view>纸尿裤-拉拉裤纸尿裤拉拉裤纸尿裤</view>
|
||
</view>
|
||
<view>
|
||
<text style="white-space: nowrap;"> 规格型号: 800mm*680mm</text>
|
||
</view>
|
||
<view>
|
||
<text style="white-space: nowrap;"> 品牌型号：品牌型号名称</text>
|
||
</view>
|
||
<view>
|
||
<text style="white-space: nowrap;"> 生产厂家：吉林省捌零信创科技有限...</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="dibu">
|
||
<view>
|
||
<view><text>￥</text>0.32</view>
|
||
<text>采购价格</text>
|
||
</view>
|
||
<view>
|
||
<view>片</view>
|
||
<text>采购单位</text>
|
||
</view>
|
||
<view>
|
||
<view><text>￥</text>0.58</view>
|
||
<text>销售金额</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="height:3vw;width: 100%;display: flex;align-items: center;justify-content: center;">
|
||
<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="InvoicingList.length>6" />
|
||
</view>
|
||
</scroll-view>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, inject, watch } from 'vue';
|
||
const InvoicingList = ref([{},{},{},{},{},])
|
||
const emit = defineEmits(['link' ])
|
||
const ification = ref(false)
|
||
const carnum = ref(2)
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.caigoulist{
|
||
width: 100%;
|
||
height: 47vw;
|
||
padding: 0 1.4vw;
|
||
|
||
.fler {
|
||
width: 59.5vw;
|
||
position: relative;
|
||
.fler-view {
|
||
width: 59vw;
|
||
height: 22.5vw;
|
||
border: 1px solid #E5E5E5;
|
||
border-radius: 1.6vw;
|
||
position: relative;
|
||
margin-bottom: 1.1vw;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
.dibu{
|
||
width: 100%;
|
||
height: 10vw;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
>view{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text{
|
||
font-size: 1.4vw;
|
||
color: #555555;
|
||
}
|
||
view{
|
||
font-size: 2.1vw;
|
||
color: #555555;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text{
|
||
font-size: 1.6vw;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.carditem {
|
||
height: 13vw;
|
||
display: flex;
|
||
transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
|
||
will-change: transform;
|
||
width: 59vw;
|
||
|
||
.add {
|
||
width: 6.5vw;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
>view {
|
||
width: 5.5vw;
|
||
height: 2.2vw;
|
||
background: #fff;
|
||
border-radius: 0.9vw;
|
||
border: 1px solid #1083F8;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #1083F8;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: absolute;
|
||
top: 2.3vw;
|
||
right: 0.8vw;
|
||
}
|
||
|
||
image {
|
||
width: 2.5vw;
|
||
height: 2.5vw;
|
||
}
|
||
}
|
||
|
||
.msitem {
|
||
width: 38vw;
|
||
margin-left: 2vw;
|
||
>view {
|
||
&:nth-child(2),
|
||
&:nth-child(3),
|
||
&:nth-child(4),
|
||
&:nth-child(6),
|
||
&:nth-child(5) {
|
||
margin-top: 1.25vw;
|
||
max-width: 25vw;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
|
||
text {
|
||
font-weight: 400;
|
||
font-size: 1.3vw;
|
||
color: #777777;
|
||
margin-top: 0.25vw;
|
||
}
|
||
}
|
||
|
||
&:nth-child(1) {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 2vw;
|
||
margin-top:2.4vw;
|
||
|
||
>view {
|
||
width: 100%;
|
||
height: 2vw;
|
||
font-weight: bold;
|
||
font-size: 1.8vw;
|
||
color: #222222;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
text {
|
||
width: 6vw;
|
||
font-weight: 300;
|
||
font-size: 1.4vw;
|
||
color: #222222;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
.speitem {
|
||
width: 16.8vw;
|
||
height: 14vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.cardp {
|
||
width: 12.5vw;
|
||
height: 4vw;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 0 auto;
|
||
align-items: center;
|
||
|
||
view {
|
||
min-width: 5.5vw;
|
||
height: 1.8vw;
|
||
border-radius: 0.9vw;
|
||
border: 1px solid #D2D2D2;
|
||
margin: 0.5vw 0 0 0.5vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 1vw;
|
||
color: #555555;
|
||
padding: 0 0.25vw;
|
||
|
||
&:nth-child(1),
|
||
&:nth-child(2) {
|
||
max-width: 6vw;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: block;
|
||
line-height: 1.8vw;
|
||
text-align: center;
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
max-width: 11.5vw;
|
||
padding: 0 0.8vw;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: block;
|
||
line-height: 1.8vw;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.imghs {
|
||
width: 10vw;
|
||
height: 9.1vw;
|
||
margin: 3vw auto 1.25vw;
|
||
padding: 0.2vw;
|
||
background: #fff;
|
||
border-radius: 1.1vw;
|
||
|
||
>image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 1.1vw;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.cont{
|
||
width: 100%;
|
||
height: 60.4vw;
|
||
position: relative;
|
||
.gys{
|
||
width: 100%;
|
||
text-align: right;
|
||
position: absolute;
|
||
right: 3.2vw;
|
||
bottom: 3.2vw;
|
||
font-size: 1.4vw;
|
||
color: #555555;
|
||
}
|
||
.jiage{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
position: absolute;
|
||
align-items: center;
|
||
top:0vw;
|
||
right:5.9vw;
|
||
text{
|
||
font-size: 1.3vw;
|
||
color: #888888;
|
||
}
|
||
view{
|
||
font-size: 2.3vw;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
>text{
|
||
font-size: 1.4vw
|
||
}
|
||
}
|
||
}
|
||
.cgdh{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
height: 3.8vw;
|
||
position: relative;
|
||
font-size: 1.4vw;
|
||
padding:0 2.3vw;
|
||
margin: 2.2vw auto 2vw;
|
||
.conts{
|
||
color: #333333;
|
||
text{
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
}
|
||
.topcon{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 3.6vw;
|
||
padding: 0 2.3vw;
|
||
align-items: center;
|
||
margin-top: 1.7vw;
|
||
.zuofei{
|
||
width: 9vw;
|
||
height: 3.6vw;
|
||
background: #FFFFFF;
|
||
border-radius: 1.6vw;
|
||
border: 1px solid #DCDCDC;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 1.3vw;
|
||
color: #555555;
|
||
image{
|
||
width: 1.4vw;
|
||
height: 1.4vw;
|
||
margin: 0 0.5vw;
|
||
}
|
||
}
|
||
.title{
|
||
font-size: 1.7vw;
|
||
color: #222222;
|
||
display: flex;
|
||
align-items: center;
|
||
view{
|
||
width: 0.5vw;
|
||
height: 1.4vw;
|
||
background: radial-gradient( 0% 0% at 0% 0%, #006DC9 7.25%, #0385FA 100%), #F7F7F7;
|
||
border-radius: 0.2vw;
|
||
margin-right: 1vw;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
.guodu {
|
||
transition: .4s;
|
||
-webkit-transform-style: preserve-3d;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
</style>
|