279 lines
5.9 KiB
Vue
279 lines
5.9 KiB
Vue
<template>
|
||
<view>
|
||
<view class="cont">
|
||
<view class="gys">
|
||
供应商：吉林省捌零信创科技有限公司
|
||
</view>
|
||
<view class="topcon">
|
||
<view class="title" @click="clk">
|
||
<view></view>
|
||
采购单
|
||
</view>
|
||
<view class="zuofei" v-if="active==2">
|
||
<image src="/static/three/zf.png" mode="aspectFill"></image>
|
||
作废采购单
|
||
</view>
|
||
</view>
|
||
<view class="cgdh" v-if="active==2">
|
||
<view class="cont">
|
||
<text>采购单号： </text>101C20251121006
|
||
</view>
|
||
<view class="cont">
|
||
<text>采购日期： </text>2025-10-12
|
||
</view>
|
||
<view class="jiage">
|
||
<view>
|
||
<text>￥</text>0.35
|
||
</view>
|
||
<text>采购价格 </text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="boxcen">
|
||
<view class="boxa">
|
||
<view class="bianj" v-if="active==1">
|
||
<image src="/static/three/jiao.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="jszl guodu" :class="active==1?'':'jsh0'" @click.stop>
|
||
温馨提示：点击生成采购单
|
||
</view>
|
||
|
||
<view :class="active>=1?'act':''" @click="active=1;emit('link',1)">
|
||
<image src="/static/three/cgd.png" v-if="active>=1" mode="aspectFill"></image>
|
||
<image src="/static/three/cgd1.png" v-else mode="aspectFill"></image>
|
||
</view>
|
||
<text>采购单</text>
|
||
</view>
|
||
<text class="jiao">▶</text>
|
||
<view class="boxa">
|
||
<view class="bianj" v-if="active==2">
|
||
<image src="/static/three/jiao.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="jszl guodu lecen" :class="active==2?'':'jsh0'" @click.stop>
|
||
温馨提示：供应商尚未生成随行单，请耐心等待
|
||
</view>
|
||
<!-- -->
|
||
<view :class="active>=2?'act':''" @click="active=2">
|
||
<image src="/static/three/sxd.png" v-if="active>=2" mode="aspectFill"></image>
|
||
<image src="/static/three/sxd1.png" v-else mode="aspectFill"></image>
|
||
</view>
|
||
<text>随行单</text>
|
||
</view>
|
||
<text class="jiao">▶</text>
|
||
<view class="boxa">
|
||
<!-- <view class="bianj" v-if="active==3">
|
||
<image src="/static/three/jiao.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="jszl guodu lerin" :class="active==3?'':'jsh0'" @click.stop>
|
||
温馨提示：点击生成采购单
|
||
</view> -->
|
||
<!-- -->
|
||
<view :class="active==3?'act':''" @click="active=3">
|
||
<image src="/static/three/jh.png" v-if="active==3" mode="aspectFill"></image>
|
||
<image src="/static/three/jh1.png" v-else mode="aspectFill"></image>
|
||
</view>
|
||
<text>拣货</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, inject, watch } from 'vue';
|
||
const active = ref(0)
|
||
const emit = defineEmits(['link' ])
|
||
const clk = () =>{
|
||
active.value++
|
||
if(active.value>3){
|
||
active.value = 0;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.cont{
|
||
width: 100%;
|
||
height: 60.4vw;
|
||
padding: 1.7vw 2.3vw;
|
||
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:1.5vw;
|
||
right: 0;
|
||
text{
|
||
font-size: 1.3vw;
|
||
color: #888888;
|
||
}
|
||
view{
|
||
font-size: 2.3vw;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
>text{
|
||
font-size: 1.4vw
|
||
}
|
||
}
|
||
}
|
||
.cgdh{
|
||
width: 55vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
height: 3.8vw;
|
||
position: relative;
|
||
font-size: 1.4vw;
|
||
.cont{
|
||
color: #333333;
|
||
text{
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
}
|
||
.boxcen{
|
||
width: 50vw;
|
||
height: 20vw;
|
||
// margin: 18vw auto 0;
|
||
position: absolute;
|
||
top: 18vw;
|
||
left:6.25vw;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
.jiao{
|
||
font-size: 1.4vw;
|
||
color: #C2C3CA;
|
||
margin-top: -3vw;
|
||
}
|
||
.act{
|
||
background: #E1F0FF !important;
|
||
border: 1px solid #1083F8 !important;
|
||
}
|
||
.boxa{
|
||
width: 7.2vw;
|
||
height: 10.2vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
|
||
.jszl {
|
||
width: 43vw;
|
||
height: 7vw;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(136, 148, 167, 0.19);
|
||
border-radius: 2.2vw;
|
||
position: absolute;
|
||
top: 12vw;
|
||
left: 0;
|
||
z-index: 10;
|
||
padding: 2vw;
|
||
overflow: hidden;
|
||
font-size: 1.3vw;
|
||
color: #3F86CF;
|
||
border: 1px solid #D2D2D2;
|
||
}
|
||
.lecen{
|
||
left: -16vw;
|
||
}
|
||
.lerin{
|
||
left: -30vw !important;
|
||
}
|
||
.jsh0 {
|
||
height: 0vw !important;
|
||
padding: 0 2vw !important;
|
||
border: 0px solid #D2D2D2;
|
||
}
|
||
.bianj {
|
||
position: absolute;
|
||
width: 2.2vw;
|
||
height: 1.1vw;
|
||
top: 11.2vw;
|
||
left: 3.1vw;
|
||
z-index: 11;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
text{
|
||
font-size: 1.6vw;
|
||
color: #555555;
|
||
margin-top: 1.4vw;
|
||
}
|
||
view{
|
||
width: 7.2vw;
|
||
height: 7.2vw;
|
||
background: #F1F1F1;
|
||
border-radius: 1.4vw;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
image{
|
||
width: 3.8vw;
|
||
height: 3.8vw;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.topcon{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 3.5vw;
|
||
.zuofei{
|
||
width: 11vw;
|
||
height: 3.6vw;
|
||
background: #FFFFFF;
|
||
border-radius: 1.6vw;
|
||
border: 1px solid rgba(16, 131, 248,0.5);
|
||
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>
|