287 lines
5.6 KiB
Vue
287 lines
5.6 KiB
Vue
<template>
|
||
<view class="index-content-other" :style="transition?{opacity: `1`}:{opacity: `0`}">
|
||
<view class="right-container-title-nav">
|
||
<text style="margin-left: 30rpx;">
|
||
NUID：{{ uni.getStorageSync('nuId')}}
|
||
</text>
|
||
<text class="new-weight">
|
||
{{ uni.getStorageSync('nuName')}}
|
||
</text>
|
||
<view class="right-icons">
|
||
<image class="right-icons-img" src="/static/index/requestform/touxiang.png" />
|
||
<view>{{name}}</view>
|
||
<image class="right-icons-img-back" src="/static/index/requestform/back.png" />
|
||
<view>返回</view>
|
||
</view>
|
||
</view>
|
||
<view class="buttons-father">
|
||
<view class="ipt">
|
||
<input type="text" placeholder="物料名称/物料简拼" />
|
||
</view>
|
||
<view class="scr">
|
||
检索
|
||
</view>
|
||
<view class="shx">
|
||
<image src="/static/index/requestform/shaixuan.png" mode="aspectFill"></image>
|
||
<view class="shx-font">
|
||
筛选
|
||
</view>
|
||
|
||
</view>
|
||
<view class="shx">
|
||
<image src="/static/index/requestform/chongzhi.png" mode="aspectFill"></image>
|
||
<view class="shx-font">
|
||
重置
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="other-contain">
|
||
<view class="other-contain-left">
|
||
<view class="left-selecttype">
|
||
<view :class="selectType===index?`selecttype-target`: `selecttype`" v-for="(item,index) in tagsarray" @click="changetype(index)" >
|
||
{{ item }}
|
||
<view class="heng-blue" v-if="selectType===index"></view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="other-contain-right">
|
||
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, watch } from 'vue';
|
||
|
||
const transition = ref(false);
|
||
const tagsarray = ref(["全部","待出库","已出库","已收货 ","已作废"])
|
||
|
||
const props = defineProps({
|
||
isShow: {
|
||
type: Boolean,
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
watch(
|
||
() => props.isShow,
|
||
(newVal, oldVal) => {
|
||
// 当旧值为false，新值为true时延迟0.2秒调用方法
|
||
if (!oldVal && newVal) {
|
||
transition.value = false;
|
||
setTimeout(() => {
|
||
transition.value = true;
|
||
}, 50)
|
||
} else {
|
||
transition.value = false;
|
||
}
|
||
|
||
}
|
||
)
|
||
const name = ref("");
|
||
onMounted(() => {
|
||
name.value = uni.getStorageSync('realname')
|
||
})
|
||
const lanjie = ref(false);
|
||
|
||
const selectType = ref(0)
|
||
const changetype = (index:number) => {
|
||
selectType.value = index
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.index-content-other {
|
||
width: calc(100% - 260rpx);
|
||
// background-color: red;
|
||
height: 100%;
|
||
transition: opacity 1s ease;
|
||
position: relative;
|
||
|
||
|
||
}
|
||
|
||
.right-container-title-nav {
|
||
margin-top: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 60rpx;
|
||
position: relative;
|
||
font-size: 28rpx;
|
||
|
||
.new-weight {
|
||
margin-left: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.right-icons {
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 60rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.right-icons-img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.right-icons-img-back {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
margin-left: 60rpx;
|
||
margin-right: 3rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-tem {
|
||
display: flex;
|
||
|
||
.right-container-tem-text {
|
||
font-size: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
|
||
.right-container-tem-img {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
}
|
||
.buttons-father{
|
||
width: 100%;
|
||
height: 100rpx;
|
||
// background-color: red;
|
||
display: flex;
|
||
.ipt {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 18vw;
|
||
background: #E2E4E9;
|
||
border-radius: 1.65vw;
|
||
height: 3.3vw;
|
||
|
||
image {
|
||
width: 2.2vw;
|
||
height: 2.2vw;
|
||
margin:0 0.5vw;
|
||
}
|
||
|
||
input {
|
||
width: 18vw;
|
||
height: 3.5vw;
|
||
font-size: 1.4vw;
|
||
padding-left: 1.6vw;
|
||
|
||
}
|
||
}
|
||
.scr {
|
||
border-radius: 1.65vw;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 6.5vw;
|
||
height: 3.3vw;
|
||
margin: 0 0 0 0.7vw;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
border: 1px solid #D9DADC;
|
||
color: #555555;
|
||
box-shadow: 0.5rpx 3rpx 3rpx #dadee1;
|
||
}
|
||
|
||
.shx {
|
||
width: 6.5vw;
|
||
height: 3.3vw;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
border-radius: 1.65vw;
|
||
border: 1rpx solid #D9DADC;
|
||
font-weight: 400;
|
||
font-size: 1.2vw;
|
||
color: #222;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-shadow: 0.5rpx 3rpx 3rpx #dadee1;
|
||
margin: 0 0 0 0.5vw;
|
||
color: #555555;
|
||
|
||
image {
|
||
width: 1.8vw;
|
||
height: 1.8vw;
|
||
margin: 0 0.2vw 0 0;
|
||
}
|
||
.shx-font{
|
||
margin-top: 3rpx;
|
||
// margin-left: -5rpx;
|
||
}
|
||
}
|
||
}
|
||
.other-contain{
|
||
width: 100%;
|
||
height: 1050rpx;
|
||
display: flex;
|
||
.other-contain-left{
|
||
width: 35%;
|
||
height: 100%;
|
||
.left-selecttype{
|
||
width: 100%;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
background-color: #FFFFFF;
|
||
display: flex;
|
||
padding: 0 30rpx;
|
||
|
||
.heng-blue{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 25rpx;
|
||
height: 8rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #1083F8;
|
||
|
||
}
|
||
.selecttype{
|
||
width: 20%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #999999;
|
||
font-size: 31rpx;
|
||
position: relative;
|
||
|
||
}
|
||
.selecttype-target{
|
||
width: 20%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #222222;
|
||
font-size: 31rpx;
|
||
font-weight: 600;
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
.other-contain-right{
|
||
width: 65%;
|
||
height: 100%;
|
||
// background-color: red;
|
||
}
|
||
}
|
||
</style> |