This commit is contained in:
parent
c6b28b02bf
commit
a0aa06cabc
|
|
@ -0,0 +1,586 @@
|
|||
<template>
|
||||
<view>
|
||||
<scroll-view scroll-y="true" class="crdcroll" scroll-with-animation @scrolltolower="scrolltolower()" lower-threshold="300"
|
||||
:enhanced="true" :bounce="true" enable-back-to-top>
|
||||
<view class="box">
|
||||
<view class="fler" v-for="(v,index) in InvoicingList" :key="index">
|
||||
<view class="fler-view" @touchstart="ts($event)" @touchmove="canmove($event,index)">
|
||||
<!-- @touchend="handleTouchEnd($event,v,index)"
|
||||
@touchstart="touchstart($event,v,index)" scroll-with-animation scroll-x="true"
|
||||
:scroll-left="v.scrollleft" @scroll="scroll" -->
|
||||
|
||||
<view class="carditem guodu"
|
||||
:style="openwhitchindex === index? { transform: 'translateX(-14vw)' }: { transform: 'translateX(0)' }">
|
||||
<view class="cgdh">
|
||||
采购单号：C10120251012001
|
||||
<!-- <text class="s">↑</text><text class="j">↓</text> -->
|
||||
</view>
|
||||
<view class="cgsl">
|
||||
<text>325</text>
|
||||
<view>库存数量</view>
|
||||
</view>
|
||||
<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>
|
||||
<view>纸尿裤-拉拉裤纸尿裤拉拉裤纸尿裤</view>
|
||||
</view>
|
||||
<view style="margin-top: 1vw;">
|
||||
<text style="white-space: nowrap;"> 物料编码: ZHYP044</text>
|
||||
</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>
|
||||
<text style="white-space: nowrap;"> 供 应 商 ：长春市天林商贸有限公司...</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="add" @click.stop="addcar(v,index)">
|
||||
<view v-if="v.isAdd==1">已添加</view>
|
||||
<image :src="'/static/index/procurement/+.png'" mode="aspectFill"></image>
|
||||
</view> -->
|
||||
<view class="zkadd guodu" >
|
||||
<!-- <view class="zkadd-white" style="background: #F1F1F1;" @click.stop="pandian(v,index)" @touchend.stop>盘点</view>
|
||||
<view class="zkadd-white" @click.stop="crk(v,index)" @touchend.stop>出入库</view> -->
|
||||
<view class="zkadd-blue" @click.stop="crk(v,index)" v-if="v.isAdd!=1" @touchend.stop>
|
||||
<view>
|
||||
出入库
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</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 } from 'vue';
|
||||
const props = defineProps({
|
||||
InvoicingList: {
|
||||
type: Array
|
||||
},
|
||||
status: {
|
||||
type: String
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const priceshow = ref(false)
|
||||
const pd = ref(false)
|
||||
const pds = ref(false)
|
||||
const emit = defineEmits(['crk' ])
|
||||
const serverUrl = ref('')
|
||||
onMounted(() => {
|
||||
serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
|
||||
})
|
||||
const pandian = ()=>{
|
||||
pds.value = true
|
||||
setTimeout(()=>{
|
||||
pd.value = true
|
||||
},10)
|
||||
}
|
||||
const guanbipd = ()=>{
|
||||
pd.value = false;
|
||||
setTimeout(()=>{
|
||||
pds.value = false
|
||||
},450)
|
||||
|
||||
}
|
||||
const caigouobj = ref({})
|
||||
const crkit = ref(false)
|
||||
const addcar = (v : any, i : number) => {
|
||||
crkit.value = true
|
||||
// console.log("为啥点击不上啊",i)
|
||||
// if (Number(v.kcsl) >= Number(v.upperLimit)) {
|
||||
// uni.showToast({
|
||||
// title: '库存数量已满，不可添加购物车！',
|
||||
// icon: 'none'
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
// caigouobj.value = v;
|
||||
// caigouobj.value.index = i;
|
||||
// caigouobj.value.yj = false;
|
||||
// emit('addcartory', caigouobj.value)
|
||||
}
|
||||
// const pageX = ref(0);
|
||||
// const pageY = ref(0);
|
||||
// const touchstart = (event : any, v : any, i : number) => {
|
||||
// pageX.value = event.changedTouches[0].pageX;
|
||||
// pageY.value = event.changedTouches[0].pageY;
|
||||
// solleft(v, i)
|
||||
// }
|
||||
// const handleTouchEnd = (event : any, v : any, i : number) => {
|
||||
// let y = event.changedTouches[0].pageY;
|
||||
// let x = event.changedTouches[0].pageX;
|
||||
// let absx = Math.abs(x - pageX.value)
|
||||
// let absy = Math.abs(y - pageY.value)
|
||||
// if (absy > 30 && absx + 10 < absy) {
|
||||
// v.scrollleft = 1
|
||||
// setTimeout(() => {
|
||||
// v.scrollleft = 0
|
||||
// }, 20)
|
||||
// return
|
||||
// }
|
||||
// if (absx < 10 && absy < 10) {
|
||||
// if (v.zk == false) {
|
||||
// setTimeout(() => {
|
||||
// v.scrollleft = 0
|
||||
// }, 20)
|
||||
// }
|
||||
// console.log("2")
|
||||
// return
|
||||
// }
|
||||
// caigouobj.value = v;
|
||||
// caigouobj.value.Limitnum = Number(caigouobj.value?.upperLimit) - Number(caigouobj.value.kcsl);
|
||||
// caigouobj.value.index = i;
|
||||
// caigouobj.value.yj = false;
|
||||
// v.zk = x > pageX.value ? false : true;
|
||||
// v.scrollleft = v.zk ? 150 : 0;
|
||||
|
||||
// }
|
||||
// const solleft = (v : any, i : number) => {
|
||||
// props.InvoicingList.forEach((item, k) => {
|
||||
// if (k != i && item.zk == true) {
|
||||
// item.zk = false;
|
||||
// item.scrollleft = 0;
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// const scrolltolower = () => {
|
||||
// emit('scrolltolower')
|
||||
// }
|
||||
// const scrollLeft = ref(0)
|
||||
// const scroll = (e) => {
|
||||
// // scrollLeft.value = e.detail.scrollLeft
|
||||
// // console.log(e.detail.scrollLeft)
|
||||
// }
|
||||
const crk = (v, i) => {
|
||||
emit('crk', v, i)
|
||||
}
|
||||
const startX = ref(0)
|
||||
const openwhitchindex = ref(-1)
|
||||
const ts = (e) => {
|
||||
startX.value = e.touches[0].clientX;
|
||||
}
|
||||
const canmove = (e : any, index : number) => {
|
||||
const moveX = e.touches[0].clientX
|
||||
const diff = moveX - startX.value
|
||||
// diff 为负值就是向左滑
|
||||
if (diff < -40) { // 👉 60px 阈值，随便改
|
||||
openwhitchindex.value = index
|
||||
}
|
||||
if (diff > 40) { // 👉 60px 阈值，随便改
|
||||
openwhitchindex.value = -1
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.mengc{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
background: RGBA(240, 240, 240, 0.64);
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 102;
|
||||
}
|
||||
.crdcroll {
|
||||
width: 86vw;
|
||||
height: calc(100vh - 6vw);
|
||||
margin-top: 0.3vw;
|
||||
|
||||
.box {
|
||||
width: 86vw;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.fler {
|
||||
width: 41vw;
|
||||
height: 18.6vw;
|
||||
position: relative;
|
||||
// background-color: red;
|
||||
|
||||
.fler-view {
|
||||
width: 41vw;
|
||||
height: 17.5vw;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 1.6vw;
|
||||
position: relative;
|
||||
margin-bottom: 1.1vw;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #DCDCDC;
|
||||
}
|
||||
}
|
||||
}
|
||||
.zkadd {
|
||||
width: 13.4vw;
|
||||
height: 18.8vw;
|
||||
display:flex;
|
||||
justify-content: flex-end;
|
||||
// background-color: blue;
|
||||
position: absolute;
|
||||
top: -3vw;
|
||||
right: -14vw;
|
||||
z-index: 55;
|
||||
|
||||
>view {
|
||||
width: 4.66vw;
|
||||
height: 100%;
|
||||
font-weight: 400;
|
||||
font-size: 1.5vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.zkadd-blue {
|
||||
background: #1083F8;
|
||||
color: #fff;
|
||||
|
||||
view {
|
||||
width: 3.8vw;
|
||||
height: 3.8vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: -0.7vw;
|
||||
}
|
||||
}
|
||||
|
||||
.zkadd-white {
|
||||
background: #e3e5e7;
|
||||
color: #555555;
|
||||
}
|
||||
}
|
||||
.carditem {
|
||||
position: absolute;
|
||||
top: 2.5vw;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
|
||||
will-change: transform;
|
||||
.cgsl{
|
||||
position: absolute;
|
||||
width: 5vw;
|
||||
height:4.5vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
right: 2.6vw;
|
||||
top: -1.5vw;
|
||||
text{
|
||||
font-weight: bold;
|
||||
font-size: 2.3vw;
|
||||
color: #222222;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin: 0.6vw 0;
|
||||
}
|
||||
view{
|
||||
font-size: 1.3vw;
|
||||
color: #777777;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
.cgdh{
|
||||
position: absolute;
|
||||
width: 25vw;
|
||||
height: 3vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: -2vw;
|
||||
left: 2.3vw;
|
||||
|
||||
text{
|
||||
width: 1.5vw;
|
||||
height: 1.5vw;
|
||||
border-radius: 0.3vw;
|
||||
font-weight: bold;
|
||||
font-size: 1vw;
|
||||
line-height: 1.5vw;
|
||||
text-align: center;
|
||||
display: block;
|
||||
color: #fff;
|
||||
margin-left: 1.2vw;
|
||||
}
|
||||
.s{
|
||||
background: #FF5B5B;
|
||||
}
|
||||
.j{
|
||||
background: #1083F8;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.zkf {
|
||||
width: 7vw;
|
||||
right: -7vw;
|
||||
}
|
||||
|
||||
.add {
|
||||
width: 4.5vw;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
// top: 0.8vw;
|
||||
right: 16vw;
|
||||
// background-color: red;
|
||||
|
||||
>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 {
|
||||
min-width: 20vw;
|
||||
height: 14vw;
|
||||
margin-right: 4.2vw;
|
||||
position: relative;
|
||||
|
||||
>view {
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(3),
|
||||
&:nth-child(4),
|
||||
&:nth-child(6),
|
||||
&:nth-child(5) {
|
||||
margin-top: 0.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: 1vw;
|
||||
|
||||
>view {
|
||||
width: 16vw;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.wlsy {
|
||||
width: 100%;
|
||||
height: 3.4vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 0vw;
|
||||
|
||||
>view {
|
||||
width: 33.3%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin-top: 1vw;
|
||||
|
||||
&:nth-child(1) {
|
||||
width: 30%;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
width: 40%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
width: 30%;
|
||||
text-align: right;
|
||||
align-items: right;
|
||||
}
|
||||
|
||||
&:nth-child(2)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 2.2vw;
|
||||
border-left: 1px solid #C9C9C9;
|
||||
border-right: 1px solid #C9C9C9;
|
||||
top: 0.6vw;
|
||||
}
|
||||
|
||||
text {
|
||||
&:nth-child(1) {
|
||||
font-weight: bold;
|
||||
font-size: 1.8vw;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
font-weight: 400;
|
||||
font-size: 1.2vw;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .spleft{
|
||||
// margin-left: -15vw !important;
|
||||
// }
|
||||
.speitem {
|
||||
min-width: 14.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: 10vw;
|
||||
margin: 1vw auto 0.25vw;
|
||||
padding: 0.2vw;
|
||||
background: #fff;
|
||||
border-radius: 1.1vw;
|
||||
|
||||
>image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 1.1vw;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,22 +1,59 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="crkd guodu" :style="!show?'width: 0;right:-4vw':'width: 86.8vw'" >
|
||||
<view class="topboxs">
|
||||
<view class="title">
|
||||
<view></view>
|
||||
出入库
|
||||
</view>
|
||||
<view class="sscgd">
|
||||
<input type="text" placeholder="采购单号"/>
|
||||
</view>
|
||||
<view class="sscgd">
|
||||
<input type="text" placeholder="退货单号"/>
|
||||
</view>
|
||||
<view class="sscgd">
|
||||
<input type="text" placeholder="物料名称"/>
|
||||
</view>
|
||||
<view class="sscgd">
|
||||
<input type="text" placeholder="生产厂家"/>
|
||||
</view>
|
||||
<view class="search scr guodu">
|
||||
<image src="/static/index/procurement/sh.png" mode="aspectFill" class="sh"></image>
|
||||
<image src="/static/index/procurement/shr.png" mode="aspectFill" class="shr"></image>
|
||||
检索
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="crklist">
|
||||
<crkitem :InvoicingList="InvoicingList" @addcartory="addcartory" @scrolltolower="scrolltolower" lower-threshold="300"
|
||||
:status="status" @crk="crk"></crkitem>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent } from 'vue';
|
||||
import crkitem from './crkitem.vue'
|
||||
const InvoicingList = ref([{},{},{},{},{},{},]);
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['crk' ])
|
||||
const crk = (v,i)=>{
|
||||
emit('crk', v, i)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.crklist{
|
||||
width: 100%;
|
||||
height: calc(100vh - 6vw);
|
||||
}
|
||||
.crkd{
|
||||
width: 86.8vw;
|
||||
height: 100vh;
|
||||
|
|
@ -24,9 +61,84 @@
|
|||
right: 0;
|
||||
top: 0;
|
||||
z-index:101;
|
||||
padding:0 2vw;
|
||||
padding:0 0 0 1vw;
|
||||
background: #FFFFFF;
|
||||
border-radius: 3vw 0 0 3vw;
|
||||
.topboxs{
|
||||
width: 100%;
|
||||
height: 5.1vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 1vw;
|
||||
.scr {
|
||||
image {
|
||||
width: 1.6vw;
|
||||
height: 1.6vw;
|
||||
margin: 0 0.5vw 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scr:active .sh {
|
||||
display: none;
|
||||
}
|
||||
.scr:active {
|
||||
color: #57A8FA;
|
||||
border: 1px solid #57A8FA;
|
||||
}
|
||||
|
||||
.shx:active .shr {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.shx:active .sh {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scr:active .shr {
|
||||
display: inline-block;
|
||||
}
|
||||
.search{
|
||||
width: 8.5vw;
|
||||
height: 3.4vw;
|
||||
background: #FFFFFF;
|
||||
border-radius: 1.5vw;
|
||||
border: 1px solid #CECECE;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.sscgd{
|
||||
width: 13.8vw;
|
||||
height: 3.4vw;
|
||||
background: #FFFFFF;
|
||||
border-radius: 1.5vw;
|
||||
border: 1px solid #D2D2D2;
|
||||
margin-right: 1.2vw;
|
||||
input{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 1.2vw;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-size: 1.7vw;
|
||||
color: #222222;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 6.9vw;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,77 +1,55 @@
|
|||
<template>
|
||||
<div
|
||||
<view
|
||||
class="circle-progress"
|
||||
:style="{
|
||||
width: '5vw',
|
||||
height: '5vw',
|
||||
}"
|
||||
>
|
||||
<!-- 背景圆环 -->
|
||||
<div class="circle-bg" :style="{ borderColor: bgColor }"></div>
|
||||
|
||||
<!-- 进度圆环容器（用于实现圆角） -->
|
||||
<div class="circle-bar-wrapper">
|
||||
<!-- 进度圆环（核心） -->
|
||||
<div
|
||||
<view class="circle-bg" :style="{ borderColor: bgColor }"></view>
|
||||
<view class="circle-bar-wrapper">
|
||||
<view
|
||||
class="circle-bar"
|
||||
:style="{
|
||||
background: `conic-gradient(${color} ${animateProgress}%, transparent ${animateProgress}%)`,
|
||||
'--thickness': `${thickness}px`,
|
||||
'--half-thickness': `${thickness / 2}px`,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
></view>
|
||||
</view>
|
||||
|
||||
<!-- 中间文字 -->
|
||||
<div class="circle-content" v-if="showText">
|
||||
<div class="progress-number">{{ Math.round(animateProgress) }}%</div>
|
||||
<div class="progress-label">进度</div>
|
||||
</div>
|
||||
</div>
|
||||
<view class="circle-content" v-if="showText">
|
||||
<view class="progress-number">{{ Math.round(animateProgress) }}%</view>
|
||||
<view class="progress-label">进度</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted, watch } from 'vue';
|
||||
|
||||
/**
|
||||
* 纯CSS环形进度条组件（APP/移动端专用）
|
||||
* 适配设计图样式，带数字加载动效
|
||||
*/
|
||||
interface ProgressProps {
|
||||
/** 进度 0~100 */
|
||||
progress?: number;
|
||||
/** 进度条颜色 */
|
||||
color?: string;
|
||||
/** 背景圆环颜色 */
|
||||
bgColor?: string;
|
||||
/** 圆环粗细（优化后默认更细） */
|
||||
thickness?: number;
|
||||
/** 是否显示中间文字 */
|
||||
showText?: boolean;
|
||||
/** 动画时长(秒) */
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
// 定义Props（thickness默认改为1px，更细）
|
||||
const props = withDefaults(defineProps<ProgressProps>(), {
|
||||
progress: 0,
|
||||
color: '#409EFF', // 匹配设计图蓝色
|
||||
bgColor: '#E5E5E5', // 灰色背景（提高不透明度，保证显示清晰）
|
||||
thickness: 1, // 进度条更细，默认1px
|
||||
color: '#409EFF',
|
||||
bgColor: '#E5E5E5',
|
||||
thickness: 1,
|
||||
showText: true,
|
||||
duration: 1.5, // 动画时长
|
||||
duration: 1.5,
|
||||
});
|
||||
|
||||
// 限制进度在0-100之间
|
||||
const realProgress = computed(() => {
|
||||
const p = Number(props.progress);
|
||||
return isNaN(p) ? 0 : Math.max(0, Math.min(100, p));
|
||||
});
|
||||
|
||||
// 动画进度值
|
||||
const animateProgress = ref(0);
|
||||
|
||||
// 数字加载动画
|
||||
const startProgressAnimation = () => {
|
||||
const target = realProgress.value;
|
||||
const duration = props.duration * 1000;
|
||||
|
|
@ -91,13 +69,11 @@ const startProgressAnimation = () => {
|
|||
}, 1000 / frameRate);
|
||||
};
|
||||
|
||||
// 监听进度变化重新执行动画
|
||||
watch(realProgress, () => {
|
||||
animateProgress.value = 0;
|
||||
startProgressAnimation();
|
||||
}, { immediate: false });
|
||||
|
||||
// 组件挂载时执行动画
|
||||
onMounted(() => {
|
||||
startProgressAnimation();
|
||||
});
|
||||
|
|
@ -108,14 +84,11 @@ onMounted(() => {
|
|||
position: relative;
|
||||
flex-shrink: 0;
|
||||
aspect-ratio: 1/1;
|
||||
/* 增加立体阴影，提升层次感 */
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 50%;
|
||||
/* 背景色保证阴影显示完整 */
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 背景圆环（完整显示灰色环） */
|
||||
.circle-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -127,7 +100,6 @@ onMounted(() => {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
/* 进度圆环容器（核心：实现进度条圆角） */
|
||||
.circle-bar-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -136,11 +108,9 @@ onMounted(() => {
|
|||
height: 100%;
|
||||
border-radius: 50%;
|
||||
z-index: 3;
|
||||
/* 裁剪超出部分，保证圆角效果 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 进度圆环（核心） */
|
||||
.circle-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -148,7 +118,6 @@ onMounted(() => {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
/* 环形核心：锥形渐变 + 遮罩 */
|
||||
-webkit-mask: radial-gradient(
|
||||
transparent calc(50% - 3px),
|
||||
black calc(50% - 3px)
|
||||
|
|
@ -157,7 +126,6 @@ onMounted(() => {
|
|||
transparent calc(50% - 3px),
|
||||
black calc(50% - 3px)
|
||||
);
|
||||
/* 进度条圆角关键：通过伪元素实现 */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -168,11 +136,9 @@ onMounted(() => {
|
|||
border-radius: 50%;
|
||||
box-shadow: inset 0 0 0 13px rgba(255, 255, 255, 1);
|
||||
}
|
||||
/* 进度条末端圆角优化 */
|
||||
clip-path: circle(50% at center);
|
||||
}
|
||||
|
||||
/* 中间文字容器 */
|
||||
.circle-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -184,21 +150,19 @@ onMounted(() => {
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 3; /* 文字层级最高 */
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 百分比数字样式 - 匹配设计图 */
|
||||
.progress-number {
|
||||
font-size: 1.2vw; /* 适配5vw容器的字体大小 */
|
||||
font-size: 1.2vw;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1;
|
||||
margin-bottom: 0.2vw;
|
||||
}
|
||||
|
||||
/* 进度标签样式 - 匹配设计图 */
|
||||
.progress-label {
|
||||
font-size: 1.1vw; /* 适配5vw容器的字体大小 */
|
||||
font-size: 1.1vw;
|
||||
color: #666;
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,465 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="wuliao guodu" :style="!show?'width: 0;right:-7vw':'width: 52.6vw'">
|
||||
<view class="crktop">
|
||||
<view class="title">
|
||||
<view></view>
|
||||
物料信息
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="xinxi">
|
||||
<view class="carditem guodu" >
|
||||
<view class="cgsl">
|
||||
<text>325</text>
|
||||
<view>库存数量</view>
|
||||
</view>
|
||||
<view class="speitem guodu">
|
||||
<view class="imghs">
|
||||
<image style="border-radius: 1vw;"
|
||||
:src=" '/static/index/procurement/k.png'"
|
||||
mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<view class="cardp">
|
||||
<view>复健用品</view>
|
||||
<view>复健用品</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="msitem guodu">
|
||||
<view>
|
||||
<view>纸尿裤-拉拉裤纸尿裤拉拉裤纸尿裤</view>
|
||||
</view>
|
||||
<view style="margin-top: 1vw;">
|
||||
<text style="white-space: nowrap;"> 物料编码: ZHYP044</text>
|
||||
</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>
|
||||
<text style="white-space: nowrap;"> 供 应 商 ：长春市天林商贸有限公司...</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cgqlpd">
|
||||
<view>
|
||||
<text>采购单号：<text class="hei">C10120251012001</text></text>
|
||||
<text> <text class="rhei">15+5 </text><text class="rxiao">销</text> </text>
|
||||
</view>
|
||||
<view>
|
||||
<text>采 购 人 ： 李彩霞</text>
|
||||
<text></text>
|
||||
</view>
|
||||
<view>
|
||||
<text>采购时间： 2026.03.27 10:35:26</text>
|
||||
<view class="kui">盘亏</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cgqlpd">
|
||||
<view>
|
||||
<text>采购单号：<text class="hei">C10120251012001</text></text>
|
||||
<text> <text class="rjia"> + 5 </text><text class="rjian">- 5</text> </text>
|
||||
</view>
|
||||
<view>
|
||||
<text>采 购 人 ： 李彩霞</text>
|
||||
<text></text>
|
||||
</view>
|
||||
<view>
|
||||
<text>采购时间： 2026.03.27 10:35:26</text>
|
||||
<view class="ying">盘盈</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent } from 'vue';
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.wuliao{
|
||||
height: 100vh;
|
||||
background: #FFFFFF;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 105;
|
||||
border-radius: 3vw 0 0 3vw;
|
||||
padding: 0 3.5vw;
|
||||
overflow: hidden;
|
||||
.cgqlpd{
|
||||
width: 100%;
|
||||
height: 13.2vw;
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
padding:3.2vw 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
view{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 2vw;
|
||||
align-items: center;
|
||||
}
|
||||
.hui{
|
||||
font-size: 1.4vw;
|
||||
color: #777777;
|
||||
|
||||
}
|
||||
.hei{
|
||||
font-weight: bold;
|
||||
font-size: 1.4vw;
|
||||
}
|
||||
.rhei{
|
||||
font-size: 1.9vw;
|
||||
font-weight: bold;
|
||||
}
|
||||
.rxiao{
|
||||
font-size: 1.2vw;
|
||||
font-weight: bold;
|
||||
}
|
||||
.rjian{
|
||||
font-weight: bold;
|
||||
font-size: 19px;
|
||||
color: #FD3F3F;
|
||||
}
|
||||
.rjia{
|
||||
font-weight: bold;
|
||||
font-size: 1.9vw;
|
||||
color: #0384F8;
|
||||
}
|
||||
.kui{
|
||||
width: 3.3vw;
|
||||
height: 1.6vw;
|
||||
background: #FD3F3F;
|
||||
border-radius: 0.3vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.1vw;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.ying{
|
||||
width: 3.3vw;
|
||||
height: 1.6vw;
|
||||
background: #0384F8;
|
||||
border-radius: 0.3vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.1vw;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
.xinxi{
|
||||
width: 45vw;
|
||||
height: 15.6vw;
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
position: relative;
|
||||
.carditem {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
|
||||
will-change: transform;
|
||||
position: relative;
|
||||
.cgsl{
|
||||
position: absolute;
|
||||
width: 5vw;
|
||||
height:4.5vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
right: 2vw;
|
||||
top: -4vw;
|
||||
text{
|
||||
font-weight: bold;
|
||||
font-size: 2.3vw;
|
||||
color: #222222;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin: 0.6vw 0;
|
||||
}
|
||||
view{
|
||||
font-size: 1.3vw;
|
||||
color: #777777;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.zkf {
|
||||
width: 7vw;
|
||||
right: -7vw;
|
||||
}
|
||||
|
||||
.add {
|
||||
width: 4.5vw;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
// top: 0.8vw;
|
||||
right: 16vw;
|
||||
// background-color: red;
|
||||
|
||||
>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 {
|
||||
min-width: 22vw;
|
||||
height: 14vw;
|
||||
margin-right: 4.2vw;
|
||||
position: relative;
|
||||
|
||||
>view {
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(3),
|
||||
&:nth-child(4),
|
||||
&:nth-child(6),
|
||||
&:nth-child(5) {
|
||||
margin-top: 0.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: 1vw;
|
||||
|
||||
>view {
|
||||
width: 16vw;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.wlsy {
|
||||
width: 100%;
|
||||
height: 3.4vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 0vw;
|
||||
|
||||
>view {
|
||||
width: 33.3%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin-top: 1vw;
|
||||
|
||||
&:nth-child(1) {
|
||||
width: 30%;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
width: 40%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
width: 30%;
|
||||
text-align: right;
|
||||
align-items: right;
|
||||
}
|
||||
|
||||
&:nth-child(2)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 2.2vw;
|
||||
border-left: 1px solid #C9C9C9;
|
||||
border-right: 1px solid #C9C9C9;
|
||||
top: 0.6vw;
|
||||
}
|
||||
|
||||
text {
|
||||
&:nth-child(1) {
|
||||
font-weight: bold;
|
||||
font-size: 1.8vw;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
font-weight: 400;
|
||||
font-size: 1.2vw;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .spleft{
|
||||
// margin-left: -15vw !important;
|
||||
// }
|
||||
.speitem {
|
||||
min-width: 14.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: 10vw;
|
||||
margin: 1vw auto 0.25vw;
|
||||
padding: 0.2vw;
|
||||
background: #fff;
|
||||
border-radius: 1.1vw;
|
||||
|
||||
>image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 1.1vw;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.crktop{
|
||||
width: 100%;
|
||||
height: 6vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.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: .3s;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -32,7 +32,9 @@
|
|||
</view>
|
||||
<gress :progress="percent" :thickness="0.8" style="position: fixed;bottom: 4.7vw;right: 1.3vw;z-index: 3;"></gress>
|
||||
<view class="mengban" v-if="crkshow" @click="crkshow = false"> </view>
|
||||
<crkval :show="crkshow"></crkval>
|
||||
<crkval :show="crkshow" @crk="crk"></crkval>
|
||||
<view class="mengban" v-if="crkit" @click.stop="crkit = false" style="z-index: 102;"> </view>
|
||||
<information :show="crkit" @close="crkit = false"></information>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -42,7 +44,9 @@
|
|||
import carditem from './component/carditem.vue'
|
||||
import gress from './component/gress.vue'
|
||||
import crkval from './component/crkval.vue'
|
||||
import information from './component/information.vue'
|
||||
const percent = ref(0);
|
||||
const crkit = ref(false)
|
||||
const transition = ref(false)
|
||||
const crkshow = ref(false)
|
||||
|
||||
|
|
@ -87,6 +91,9 @@
|
|||
InvoicingList.value = [];
|
||||
// queryInvo();
|
||||
}
|
||||
const crk = ()=>{
|
||||
crkit.value = true
|
||||
}
|
||||
const chongzhi = () => {
|
||||
form.categoryId = '';
|
||||
form.typeId = '';
|
||||
|
|
|
|||
Loading…
Reference in New Issue