347 lines
6.7 KiB
Vue
347 lines
6.7 KiB
Vue
<template>
|
|
<view class="all-view">
|
|
<view class="title-back" :style="{height:`${uni.getStorageSync('moveHeight')+40}px`}">
|
|
<view class="left-father" @click="goBack">
|
|
<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
|
|
<view style="font-size: 30rpx;">采购单</view>
|
|
</view>
|
|
</view>
|
|
<view class="tab-view" :style="{top:`${uni.getStorageSync('moveHeight')+40}px`}">
|
|
<view class="tab" :style="tabtargetindex===index?{fontWeight:`600`,color:`black`}:{}"
|
|
v-for="(item,index) in tabarray" :key="index" @click="changeTab(index)">
|
|
{{ item }}
|
|
</view>
|
|
<view class="tab-view-target" :style="{left:`${13.5 + tabtargetindex * 23}%` }">
|
|
|
|
</view>
|
|
</view>
|
|
<view :style="{height:`${uni.getStorageSync('moveHeight') + 98}px`}"></view>
|
|
<view class="card-view" v-for="(item,index) in cardlist" :key="index" @click="gotoDeatil(item.id)">
|
|
<view class="card-top">
|
|
<view class="card-top-left">
|
|
<image class="card-mark" src="https://www.focusnu.com/media/directive/index/buylist.png" />
|
|
<view>
|
|
<view class="card-id">
|
|
{{ item.id }}
|
|
</view>
|
|
<view class="card-time">
|
|
采购日期：{{ item.time }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card-top-right">
|
|
<view class="">
|
|
<text class="card-money">
|
|
￥
|
|
</text>
|
|
|
|
<text class="card-price">
|
|
{{ item.price }}
|
|
</text>
|
|
|
|
</view>
|
|
<view class="card-price-ex">
|
|
订单金额
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card-middle">
|
|
|
|
</view>
|
|
<view class="card-end">
|
|
<view class="card-name">
|
|
机构名称：{{ item.address }}
|
|
</view>
|
|
<view class="card-tags"
|
|
:style="{borderColor:`${tagstype[item.type].color}`,color:`${tagstype[item.type].color}`}">
|
|
{{ tagstype[item.type].name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card-view-finally">
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref, nextTick } from 'vue';
|
|
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
|
import { getEmployeesOrgRela, getCgdListByGysId } from './api.js'
|
|
|
|
const tagstype = ref([
|
|
{
|
|
name: `采购中`,
|
|
color: `#0074E1`
|
|
},
|
|
{
|
|
name: `挂账中`,
|
|
color: `#F03232`
|
|
},
|
|
{
|
|
name: `已完成`,
|
|
color: `#222222`
|
|
}])
|
|
const cardlist = ref([
|
|
{
|
|
id: `101C20251121006`,
|
|
price: `126`,
|
|
time: `2026.01.19`,
|
|
address: `吉林省久泰健康产业有限公司`,
|
|
type: 0
|
|
},
|
|
{
|
|
id: `101C20251121007`,
|
|
price: `189`,
|
|
time: `2026.01.19`,
|
|
address: `吉林省久泰健康产业有限公司`,
|
|
type: 1
|
|
},
|
|
{
|
|
id: ` 101C20251121011`,
|
|
price: `38`,
|
|
time: `2026.01.19`,
|
|
address: `吉林省久泰健康产业有限公司`,
|
|
type: 2
|
|
},
|
|
{
|
|
id: `101C20251121006`,
|
|
price: `126`,
|
|
time: `2026.01.19`,
|
|
address: `吉林省久泰健康产业有限公司`,
|
|
type: 0
|
|
},
|
|
{
|
|
id: `101C20251121007`,
|
|
price: `189`,
|
|
time: `2026.01.19`,
|
|
address: `吉林省久泰健康产业有限公司`,
|
|
type: 1
|
|
},
|
|
{
|
|
id: ` 101C20251121011`,
|
|
price: `38`,
|
|
time: `2026.01.19`,
|
|
address: `吉林省久泰健康产业有限公司`,
|
|
type: 2
|
|
},
|
|
{
|
|
id: `101C20251121006`,
|
|
price: `126`,
|
|
time: `2026.01.19`,
|
|
address: `吉林省久泰健康产业有限公司`,
|
|
type: 0
|
|
},
|
|
{
|
|
id: `101C20251121007`,
|
|
price: `189`,
|
|
time: `2026.01.19`,
|
|
address: `吉林省久泰健康产业有限公司`,
|
|
type: 1
|
|
},
|
|
{
|
|
id: ` 101C20251121011`,
|
|
price: `38`,
|
|
time: `2026.01.19`,
|
|
address: `吉林省久泰健康产业有限公司`,
|
|
type: 2
|
|
},
|
|
])
|
|
const tabarray = [`全部`, `采购中`, `挂账中`, `已完成`]
|
|
// 选中的序列号
|
|
const tabtargetindex = ref(0)
|
|
// 切换标签
|
|
const changeTab = (index : number) => {
|
|
tabtargetindex.value = index
|
|
}
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack()
|
|
}
|
|
|
|
const gotoDeatil = (id:string) => {
|
|
uni.navigateTo({
|
|
url: `/pages/yuangongindex/purchaseorderdetail?id=${id}`
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.all-view {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background-color: #F5F5F7;
|
|
}
|
|
|
|
.title-back {
|
|
background-color: #fff;
|
|
width: 100%;
|
|
height: 70rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
padding-bottom: 20rpx;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9999;
|
|
|
|
.left-father {
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 1;
|
|
|
|
.back-img {
|
|
width: 45rpx;
|
|
height: 40rpx;
|
|
margin-left: 40rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-view {
|
|
width: 100%;
|
|
height: 110rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
padding: 0 4%;
|
|
position: fixed;
|
|
left: 0;
|
|
z-index: 100;
|
|
|
|
.tab {
|
|
width: 25%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 90rpx;
|
|
margin-top: 10rpx;
|
|
font-size: 32rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.tab-view-target {
|
|
position: absolute;
|
|
bottom: 14rpx;
|
|
left: 13.5%;
|
|
width: 4.5%;
|
|
height: 9.3rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #0074E1;
|
|
transition: left 0.2s linear;
|
|
}
|
|
}
|
|
|
|
.card-view {
|
|
margin-left: 4%;
|
|
width: 92%;
|
|
height: 230rpx;
|
|
background-color: #fff;
|
|
margin-top: 25rpx;
|
|
border-radius: 40rpx;
|
|
overflow: hidden;
|
|
|
|
.card-top {
|
|
width: 100%;
|
|
height: 56%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
align-items: center;
|
|
|
|
.card-top-left {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
|
|
.card-mark {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
margin-right: 13rpx;
|
|
}
|
|
|
|
.card-id {
|
|
color: #222222;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.card-time {
|
|
color: #888888;
|
|
font-size: 23rpx;
|
|
margin-left: 2rpx;
|
|
}
|
|
}
|
|
|
|
.card-top-right {
|
|
text-align: right;
|
|
margin-right: 10rpx;
|
|
|
|
.card-money {
|
|
font-weight: 600;
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.card-price {
|
|
font-weight: 600;
|
|
font-size: 43rpx;
|
|
margin-left: -6rpx;
|
|
}
|
|
|
|
.card-price-ex {
|
|
font-size: 23rpx;
|
|
color: #888888;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-middle {
|
|
margin-top: 8rpx;
|
|
background-color: #f9f9f9;
|
|
height: 2rpx;
|
|
width: 90%;
|
|
margin-left: 5%;
|
|
}
|
|
|
|
.card-end {
|
|
height: 32%;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.card-name {
|
|
margin-top: 7rpx;
|
|
color: #555555;
|
|
margin-left: 40rpx;
|
|
font-size: 26rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
width: 70%;
|
|
}
|
|
|
|
.card-tags {
|
|
position: absolute;
|
|
right: 25rpx;
|
|
bottom: 10rpx;
|
|
width: 120rpx;
|
|
height: 50rpx;
|
|
border: 2rpx red solid;
|
|
border-radius: 15rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 27rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-view-finally {
|
|
height: 25rpx;
|
|
}
|
|
</style> |