This commit is contained in:
wangweidong 2026-04-22 17:32:14 +08:00
parent 58b7968d47
commit 8d81be9f99
6 changed files with 1392 additions and 53 deletions

View File

@ -0,0 +1,764 @@
<template>
<view>
<view class="caigou">
<view class="top">
<view class="ipt">
<input type="text" placeholder="物料名称/物料编码/物料简拼" v-model="form.wlParamInfo" @confirm="search" />
<image src="/static/index/procurement/x.png" mode="aspectFill" v-if="form.wlParamInfo"
@click="search(0)"></image>
</view>
<view @click="search" class="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 class="shx guodu" @click="ification=true">
<image src="/static/index/purchaseorder/select.png" mode="aspectFill" class="sh"></image>
<image src="/static/index/purchaseorder/selecttarget.png" mode="aspectFill" class="shr"></image>
筛选
</view>
<view class="shx guodu" >
<!-- <image src="/static/index/purchaseorder/cg.png" mode="aspectFill" class="sh"></image> -->
<image src="/static/index/procurement/del1.png" mode="aspectFill" class="sh"></image>
<image src="/static/index/procurement/del1.png" mode="aspectFill" class="shr"></image>
清空
</view>
<view class="back guodu" @click="emit('link',1)">
<image src="/static/index/procurement/bk.png" mode="aspectFill"></image>
返回
</view>
</view>
<view class="caigoulist">
<scroll-view scroll-y="true" class="crdcroll" scroll-with-animation @scrolltolower="scrolltolower()" lower-threshold="300"
enable-back-to-top>
<view class="box">
<view class="fler" v-for="(v,index) in InvoicingList" :key="index" @click="v.flag=!v.flag">
<view class="fler-view" @touchstart="ts($event)" @touchmove="canmove($event,index)" :class="v.flag?'actve':''">
<view class="jiao guodu">
<image :src="v.flag?'/static/index/procurement/lxz.png':'/static/index/procurement/jxz.png'"
mode="aspectFill" class="jao guodu"></image>
<image src="/static/index/procurement/dh.png" mode="aspectFill" class="dui"></image>
</view>
<view class="carditem guodu "
:style="openwhitchindex === index? { transform: 'translateX(-14vw)' }: { transform: 'translateX(0)' }"
>
<!-- @touchend="handleTouchEnd($event,v,index)"
@touchstart="touchstart($event,v,index)" scroll-with-animation scroll-x="true"
:scroll-left="v.scrollleft" @scroll="scroll" -->
<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>纸尿裤-拉拉裤纸尿裤拉拉裤纸尿裤 <text>ZHYP044</text></view>
</view>
<!-- <text>{{v.wlMaterialNo}}</text> -->
<view>
<text style="white-space: nowrap;"> 规格型号: 800mm*680mm</text>
</view>
<view>
<text style="white-space: nowrap;"> 规格型号: 品牌型号名称</text>
</view>
<view>
<text>生产厂家: 吉林省捌零信创科技有限</text>
</view>
<view>
<text style="white-space: nowrap;"> : 长春市天林商贸有限公司</text>
</view>
<!-- <view>
<text v-if="v.wlUnits == v.materialUnits">采购单价:
{{Number(v.unitPrice).toFixed(2) }}</text>
<text v-if="v.wlUnits == v.twoUnit">采购单价:
{{Number(v.twoUnitPrice).toFixed(2) }}</text>
<text v-if="v.wlUnits == v.oneUnit">采购单价:
{{Number(v.oneUnitPrice).toFixed(2) }}</text>
</view> -->
<view>
<view class="three-one">
<text >0.35</text>
<text>采购价格</text>
<view class="three-shu">
</view>
</view>
<view class="three-one">
<text ></text>
<text>采购单位</text>
<view class="three-shu">
</view>
</view>
<view class="three-one">
<text >3.5</text>
<text>采购金额</text>
</view>
</view>
</view>
<!-- <view class="add" @click.stop="clkzk(v,index)">
<image class="guodu" :style="openwhitchindex === index?'transform: rotate(180deg);':''"
:src="'/static/index/procurement/l.png'" mode="aspectFill"></image>
</view> -->
<view class="right-top">
<!-- <view style="font-size: 1.7vw;font-weight: 600;">
{{v.purchaseQuantity}}
</view> -->
<view style="font-size: 1.3vw;">
采购数量&nbsp;&nbsp;<text>--</text>
</view>
</view>
<view class="zkadd guodu" >
<view @click.stop="addcar(v,index)" @touchend.stop>编辑</view>
<view @click.stop="del(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;"
v-if="InvoicingList.length>6">
<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" />
</view>
</scroll-view>
</view>
</view>
<view class="fiedrightview">
<image src="/static/index/purchaseorder/cg.png" mode="aspectFill"></image>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, inject, watch } from 'vue';
const emit = defineEmits(['link' ])
const search = (x ) => {
if (x === 0) { form.wlParamInfo = '' }
form.pageNo = 1;
// InvoicingList.value = [];
// queryInvo();
}
const InvoicingList = ref([{},{},{},{},{},])
const ification = ref(false)
const carnum = ref(2)
const form = reactive({
nuId: uni.getStorageSync('nuId'),
pageNo: 1,
pageSize: 30,
categoryId: '',
typeId: '',
medicationId: '',
wlParamInfo: '',
isWaring: 0,
suppliers: ''
})
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 lang="less" scoped>
.caigou{
width: 100%;
height: 100%;
.caigoulist{
width: 100%;
height: calc(60.4vw - 5vw);
padding: 0 1.4vw;
}
.top{
width: 100%;
height: 4.7vw;
position: relative;
display: flex;
align-items: center;
padding: 0 1.4vw;
.ipt {
display: flex;
align-items: center;
width: 23vw;
border-radius: 1.65vw;
height: 3.3vw;
background: #FFFFFF;
border: 1px solid #D2D2D2;
image {
width: 2.2vw;
height: 2.2vw;
// margin: 0 0.5vw;
margin-right: 1.5vw;
}
input {
width: 20vw;
height: 3.3vw;
font-size: 1.4vw;
padding-left: 1.6vw;
}
}
.back {
width: 7.3vw;
height: 3.3vw;
border-radius: 1.6vw;
background: rgba(255, 255, 255, 1);
border-radius: 1.65vw;
font-weight: 400;
font-size: 1.4vw;
color: rgba(85, 85, 85, 1);
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #D9DADC;
margin-left: auto;
image {
width: 1.5vw;
height: 1.3vw;
margin: 0 0.5vw 0 0;
}
}
.back:active,
.shx:active,
.scr:active {
color: #1083F8;
background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
border: 1px solid #1083F8;
}
.scr {
border-radius: 1.65vw;
font-weight: 400;
font-size: 1.4vw;
display: flex;
justify-content: center;
align-items: center;
width: 8.5vw;
height: 3.3vw;
margin: 0 0 0 0.7vw;
background: rgba(255, 255, 255, 1);
border: 1px solid #D9DADC;
color: #555555;
image {
width: 1.6vw;
height: 1.6vw;
margin: 0 0.5vw 0 0;
}
}
.shr {
display: none;
}
.scr:active .sh {
display: none;
}
.shx:active .shr {
display: inline-block;
}
.shx:active .sh {
display: none;
}
.scr:active .shr {
display: inline-block;
}
.shx {
width: 8.5vw;
height: 3.3vw;
background: #FFFFFF;
border-radius: 1.65vw;
border: 1px solid #D9DADC;
font-weight: 400;
font-size: 1.4vw;
color: #222;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 0 0.7vw;
color: #555555;
image {
width: 1.6vw;
height: 1.6vw;
margin: 0 0.5vw 0 0;
}
}
}
.crdcroll {
width: 100%;
height: calc(60.4vw - 5vw);
padding: 0 1.4vw;
.fler {
width: 59.5vw;
position: relative;
.fler-view {
width: 59vw;
height: 17.8vw;
border: 1px solid #E5E5E5;
border-radius: 1.6vw;
position: relative;
margin-bottom: 0.7vw;
overflow: hidden;
white-space: nowrap;
}
}
.jiao {
width: 3.4vw;
height: 3.4vw;
position: absolute;
top: -2px;
left: 0;
z-index: 99;
.dui {
position: absolute;
width: 1.4vw;
height: 1.4vw;
top: 0.8vw;
left: 0.8vw;
z-index: 101;
}
.jao {
width: 3.4vw;
height: 3.4vw;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
}
}
}
.actve {
border: 1px solid #3BA1FF !important;
}
.carditem {
width: 100%;
height: 100%;
background: #fff;
position: relative;
display: flex;
white-space: nowrap;
.zkadd {
width: 8.8vw;
height: 103%;
display: flex;
justify-content: flex-end;
position: absolute;
top: 0;
right: -14vw;
// background-color: red;
>view {
width: 4.4vw;
height: 100%;
font-weight: 400;
font-size: 1.6vw;
display: flex;
justify-content: center;
align-items: center;
writing-mode: vertical-rl;
// line-height: 2.2vw;
text-orientation: upright;
text-align: center;
&:nth-child(2) {
background: #1083F8;
color: #fff;
view {
width: 3.8vw;
height: 3.8vw;
display: flex;
justify-content: center;
align-items: center;
}
}
&:nth-child(1) {
background: #F1F1F1;
color: #555555;
}
}
}
.zkf {
width: 7vw;
right: -7vw;
}
.add {
position: absolute;
right: 2vw;
top: 50%;
transform: translateY(-50%);
// width: 6vw;
// height: 17vw;
// display: inline-flex;
// justify-content: center;
// align-items: center;
// position: relative;
// top: -2.5vw;
// background-color: red;
>view {
width: 4.5vw;
height: 1.9vw;
background: #E3EEF7;
border-radius: 0.9vw;
border: 1px solid rgba(3, 133, 250, 0.34);
font-weight: 400;
font-size: 1.1vw;
color: #1083F8;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0.8vw;
right: 0.8vw;
}
image {
width: 3vw;
height: 3vw;
}
}
.msitem {
width: 32vw;
>view {
&:nth-child(6) {
width: 30vw;
display: flex;
margin-top: 1.1vw;
.three-one {
width: 33%;
display: flex;
flex-direction: column;
position: relative;
left: -2.3vw;
.three-shu {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 60%;
width: 2rpx;
background-color: #dddddd;
}
}
text {
text-align: center;
&:nth-child(1) {
font-weight: bold;
font-size: 1.8vw;
color: #555555;
}
&:nth-child(2) {
font-weight: 400;
font-size: 1.3vw;
color: #999999;
text-align: center;
}
}
}
&:nth-child(2),
&:nth-child(3),
&:nth-child(4),
&:nth-child(5),
{
display: flex;
justify-content: space-between;
margin-bottom: 0.15vw;
text {
font-weight: 400;
font-size: 1.4vw;
color: #777777;
white-space: nowrap;
/* 不换行 */
overflow: hidden;
/* 隐藏溢出部分 */
text-overflow: ellipsis;
/* 显示省略号 */
}
}
&:nth-child(1) {
display: flex;
justify-content: space-between;
align-items: center;
height: 1.8vw;
margin-bottom: 1.2vw;
margin-top: 1.5vw;
// margin-top: -0.4vw;
>view {
max-width: 25vw;
height: 2vw;
font-weight: 800;
font-size: 1.8vw;
color: #222222;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
text {
width: 6vw;
font-weight: 400;
font-size: 1.4vw;
color: #222222;
}
}
}
}
.gongyingshang {
margin-top: -10rpx;
width: 500rpx;
/* 你原来的宽度 */
font-size: 1.4vw;
/* 建议不要用 vw 混用 */
line-height: 1.2;
/* 行高(数字形式也可以),用于计算 */
color: #a9a9a9;
font-weight: 400;
/* 多行省略核心 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
/* 单行兼容项 */
/* 兼容与保底 */
word-break: break-word;
white-space: normal;
/* 确保允许换行 */
min-width: 0;
/* 如果父容器是 flex 必需 */
max-height: calc(1.4 * 2 * 1em);
/* 额外保底(可选) */
}
.speitem {
width: 17vw;
height: 100%;
display: inline-flex;
flex-direction: column;
position: relative;
.cardp {
width: 100%;
padding-left: 1vw;
height: 4vw;
display: flex;
// margin-top: 3vw;
// flex-direction: column;
// align-items: center;
flex-wrap: wrap;
// margin: 0 auto 0;
// align-items: center;
view {
min-width: 7vw;
height: 2vw;
border-radius: 0.9vw;
border: 1px solid #D2D2D2;
margin: 0.7vw 0 0 0.5vw;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: 400;
font-size: 1.2vw;
color: #555555;
// background-color: red;
// padding: 0 0.5vw;
&: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;
display: flex;
justify-content: center;
align-items: center;
}
&:nth-child(3) {
max-width: 12vw;
// color: red;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
// line-height: 1.8vw;
// text-align: center;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20rpx;
}
}
}
.imghs {
width: 13vw;
height: 13vw;
margin: 0vw auto 0.25vw;
padding: 0.2vw;
background: #fff;
border-radius: 1.1vw;
>image {
width: 100%;
height: 100%;
border-radius: 1.1vw;
}
}
}
}
.guodu {
transition: .4s;
-webkit-transform-style: preserve-3d;
-webkit-overflow-scrolling: touch;
}
.right-top {
top: 2vw;
right: 2vw;
position: absolute;
color: #1083F8;
text-align: center;
text{
color: #1083F8;
}
}
.fiedrightview {
width: 5vw;
height: 5vw;
background: rgba(255, 255, 255, 0.86);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
position: fixed;
z-index: 200;
right: 1.2vw;
bottom:2vw;
box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(136, 148, 167, 0.19);
.mhao {
position: absolute;
top: -0.2vw;
right: -0.2vw;
box-sizing: border-box;
width: 1.8vw;
height: 1.8vw;
border-radius: 50%;
background: #1083F8;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
writing-mode: horizontal-tb;
overflow: hidden;
.mhao-font {
font-size: 25rpx;
letter-spacing: -0.05em;
/* 负值 = 字符之间更近 */
}
}
text {
min-width: 1.8vw;
height: 1.8vw;
border-radius: 0.8vw;
border: 2px solid #1083F8;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.5vw;
font-weight: 400;
font-size: 1.3vw;
color: #fff;
position: absolute;
top: -0.8vw;
right: -0.8vw;
}
image {
width: 3.3vw;
height: 3.3vw;
}
}
</style>

View File

@ -8,13 +8,13 @@
<view class="boxcen">
<view class="boxa">
<view class="bianj" v-if="active==1">
<image src="/static/index/card/bj.png" mode="aspectFill"></image>
<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':''">
<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>
@ -22,7 +22,14 @@
</view>
<text class="jiao"></text>
<view class="boxa">
<view :class="active>=2?'act':''">
<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>
@ -30,7 +37,14 @@
</view>
<text class="jiao"></text>
<view class="boxa">
<view :class="active==3?'act':''">
<!-- <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>
@ -45,6 +59,7 @@
<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){
@ -99,6 +114,12 @@
color: #3F86CF;
border: 1px solid #D2D2D2;
}
.lecen{
left: -16vw;
}
.lerin{
left: -30vw !important;
}
.jsh0 {
height: 0vw !important;
padding: 0 2vw !important;

View File

@ -0,0 +1,530 @@
<template>
<view>
<view class="caigou">
<view class="top">
<view class="ipt">
<input type="text" placeholder="物料名称/物料编码/物料简拼" v-model="form.wlParamInfo" @confirm="search" />
<image src="/static/index/procurement/x.png" mode="aspectFill" v-if="form.wlParamInfo"
@click="search(0)"></image>
</view>
<view @click="search" class="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 class="shx guodu" @click="ification=true">
<image src="/static/index/purchaseorder/select.png" mode="aspectFill" class="sh"></image>
<image src="/static/index/purchaseorder/selecttarget.png" mode="aspectFill" class="shr"></image>
筛选
</view>
<view class="back guodu" @click="emit('link',0)">
<image src="/static/index/procurement/bk.png" mode="aspectFill"></image>
返回
</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" >
<!-- @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(-15vw)' }: { transform: 'translateX(0)' }">
<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:1.8vw;">
<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)">
<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="addcar(v,index)" v-if="v.isAdd!=1" @touchend.stop>
<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>
<view @click="emit(`link`,2)" class="fiedrightview">
<image src="/static/index/procurement/gc1.png" mode="aspectFill"></image>
<!-- <text v-if="carnum>0">{{carnum>99?'99+':carnum}}</text> -->
<view class="mhao" v-if="carnum>0">
<view class="mhao-font">
{{carnum}}
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, inject, watch } from 'vue';
const emit = defineEmits(['link' ])
const search = (x : number) => {
if (x === 0) { form.wlParamInfo = '' }
form.pageNo = 1;
// InvoicingList.value = [];
// queryInvo();
}
const InvoicingList = ref([{},{},{},{},{},])
const ification = ref(false)
const carnum = ref(2)
const form = reactive({
nuId: uni.getStorageSync('nuId'),
pageNo: 1,
pageSize: 30,
categoryId: '',
typeId: '',
medicationId: '',
wlParamInfo: '',
isWaring: 0,
suppliers: ''
})
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 scrolltolower = ()=>{
}
// 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 lang="less" scoped>
.caigou{
width: 100%;
height: 100%;
.caigoulist{
width: 100%;
height: calc(60.4vw - 5vw);
padding: 0 1.4vw;
.fler {
width: 59.5vw;
height: 19vw;
position: relative;
.fler-view {
width: 59vw;
height: 18vw;
border: 1px solid #E5E5E5;
border-radius: 1.6vw;
position: relative;
margin-bottom: 1.1vw;
overflow: hidden;
white-space: nowrap;
}
}
}
.top{
width: 100%;
height: 4.7vw;
position: relative;
display: flex;
align-items: center;
padding: 0 1.4vw;
.ipt {
display: flex;
align-items: center;
width: 28vw;
border-radius: 1.65vw;
height: 3.3vw;
background: #FFFFFF;
border: 1px solid #D2D2D2;
image {
width: 2.2vw;
height: 2.2vw;
// margin: 0 0.5vw;
margin-right: 1.5vw;
}
input {
width: 25vw;
height: 3.3vw;
font-size: 1.4vw;
padding-left: 1.6vw;
}
}
.back {
width: 7.3vw;
height: 3.3vw;
border-radius: 1.6vw;
background: rgba(255, 255, 255, 1);
border-radius: 1.65vw;
font-weight: 400;
font-size: 1.4vw;
color: rgba(85, 85, 85, 1);
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #D9DADC;
margin-left: auto;
image {
width: 1.5vw;
height: 1.3vw;
margin: 0 0.5vw 0 0;
}
}
.back:active,
.shx:active,
.scr:active {
color: #1083F8;
background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
border: 1px solid #1083F8;
}
.scr {
border-radius: 1.65vw;
font-weight: 400;
font-size: 1.4vw;
display: flex;
justify-content: center;
align-items: center;
width: 8.5vw;
height: 3.3vw;
margin: 0 0 0 0.7vw;
background: rgba(255, 255, 255, 1);
border: 1px solid #D9DADC;
color: #555555;
image {
width: 1.6vw;
height: 1.6vw;
margin: 0 0.5vw 0 0;
}
}
.shr {
display: none;
}
.scr:active .sh {
display: none;
}
.shx:active .shr {
display: inline-block;
}
.shx:active .sh {
display: none;
}
.scr:active .shr {
display: inline-block;
}
.shx {
width: 8.5vw;
height: 3.3vw;
background: #FFFFFF;
border-radius: 1.65vw;
border: 1px solid #D9DADC;
font-weight: 400;
font-size: 1.4vw;
color: #222;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 0 0.7vw;
color: #555555;
image {
width: 1.6vw;
height: 1.6vw;
margin: 0 0.5vw 0 0;
}
}
}
}
.carditem {
height: 100%;
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: 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: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;
}
}
}
}
.fiedrightview {
width: 5vw;
height: 5vw;
background: rgba(255, 255, 255, 0.86);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
position: fixed;
z-index: 200;
right: 1.2vw;
bottom:2vw;
box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(136, 148, 167, 0.19);
.mhao {
position: absolute;
top: -0.2vw;
right: -0.2vw;
box-sizing: border-box;
width: 1.8vw;
height: 1.8vw;
border-radius: 50%;
background: #1083F8;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
writing-mode: horizontal-tb;
overflow: hidden;
.mhao-font {
font-size: 25rpx;
letter-spacing: -0.05em;
/* 负值 = 字符之间更近 */
}
}
text {
min-width: 1.8vw;
height: 1.8vw;
border-radius: 0.8vw;
border: 2px solid #1083F8;
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.5vw;
font-weight: 400;
font-size: 1.3vw;
color: #fff;
position: absolute;
top: -0.8vw;
right: -0.8vw;
}
image {
width: 3.3vw;
height: 3.3vw;
}
}
</style>

View File

@ -57,15 +57,13 @@
12313212313
</view>
<view class="title-right">
<text style="position: absolute;bottom: 4rpx;left: -30rpx;">
</text>
<view class="title-right-big">
{{ Number(v.totalPrice ) < 10000? Number(v.totalPrice).toFixed(2) : Number(v.totalPrice) }}
<view :class="v?.cgdType=='9' ?`tag-fail`:`tag-success`">
{{ v?.cgdType=='9' ?`已作废`:'待完结' }}
</view>
<image class="title-right-img" src="/static/more.png" @click="openmore(i)" />
<!-- <image class="title-right-img" src="/static/more.png" @click="openmore(i)" /> -->
</view>
</view>
@ -84,7 +82,7 @@
采购
</view>
<view>
[ 2222.2222.22 ]
[ 梁嘉豪 ]
</view>
</view>
</view>
@ -136,15 +134,22 @@
</view>
<view class="pls-card-end">
<view class="end-left">
<image class="end-left-img" src="/static/shili.png" />
<!-- <image class="end-left-img" src="/static/shili.png" /> -->
<view class="end-left-font">
{{ v.gysName }}
吉林省捌零信创科技有限公司
</view>
</view>
<view :class="v?.cgdType=='9' ?`tag-fail`:`tag-success`">
{{ v?.cgdType=='9' ?`已作废`:2222 }}
<view class="title-right-big">
<text>
</text>
<!-- {{ Number(v.totalPrice ) < 10000? Number(v.totalPrice).toFixed(2) : Number(v.totalPrice) }} -->
255
</view>
<!-- <view :class="v?.cgdType=='9' ?`tag-fail`:`tag-success`">
{{ v?.cgdType=='9' ?`已作废`:2222 }}
</view> -->
</view>
</view>
<view class="pls-card center" style="border-color: #fff;" v-if="plsbuy.length===1&&!shownomessage">
@ -169,7 +174,9 @@
</view>
</view>
<view class="rightscon">
<contright></contright>
<contright @link="link" v-if="rightcat==0"></contright>
<procurement @link="link" v-if="rightcat==1"></procurement>
<carlist @link="link" v-if="rightcat==2"></carlist>
</view>
</view>
</view>
@ -178,10 +185,25 @@
<script setup lang="ts">
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, inject, watch } from 'vue';
import contright from './component/contright.vue';
import procurement from './component/procurement.vue';
import carlist from './component/carlist.vue';
const transition = ref(false)
const leftscrolltop = ref(0)
const tagsarray = ref(["全部", "待确认", "待完结", "待付款", "已完成"])
const selectType = ref(0)
const rightcat = ref(0)
const link = (e)=>{
console.log(e)
rightcat.value = e
}
const changetype = (index : number) => {
if ((selectType.value == index) && index) {
return
@ -435,13 +457,30 @@
align-items: flex-end;
font-size: 30rpx;
position: relative;
.title-right-big {
font-weight: 600;
font-size: 40rpx;
margin-right: 35rpx;
color: #555555;
.tag-fail {
width: 120rpx;
height: 50rpx;
border-radius: 30rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #FDEBEC;
color: #FF5757;
border: 1rpx solid #FF5757;
}
.tag-success {
width: 120rpx;
height: 50rpx;
border-radius: 30rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #ECF6FF;
border: 1rpx solid #0385FA;
color: #1083F8;
}
.title-right-img {
position: absolute;
@ -453,6 +492,7 @@
}
}
}
.pls-card-middle {
width: 100%;
@ -537,6 +577,17 @@
display: flex;
justify-content: space-between;
position: relative;
.title-right-big {
font-weight: 600;
font-size: 40rpx;
margin-right: 35rpx;
color: #555555;
display: flex;
align-items: center;
text{
font-size: 30rpx
}
}
.end-left {
height: 100%;
@ -561,41 +612,14 @@
}
}
.tag-fail {
width: 120rpx;
height: 50rpx;
border-radius: 30rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #FDEBEC;
color: #FF5757;
border: 1rpx solid #FF5757;
position: absolute;
right: -5rpx;
bottom: 20rpx;
}
.tag-success {
width: 120rpx;
height: 50rpx;
border-radius: 30rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #ECF6FF;
border: 1rpx solid #0385FA;
color: #1083F8;
position: absolute;
right: -5rpx;
bottom: 20rpx;
}
}
}
}
}
}
}
.haventmessage {
width: 100%;
height: 51.9vw;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/three/jiao.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB