hldy_app/pages/Warehouse/purchaseorder.vue

2345 lines
46 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<!-- 采购 -->
<view class="box">
<view class="rel-left">
<scroll-view scroll-y="true" scroll-with-animation :scroll-top="leftscrolltop" class="scroll-Y"
@scrolltolower="plsbuytolower" :lower-threshold="400">
<view class="margin-height"></view>
<view class="boxitem" v-for="(v,i) in plsbuy" :key='i'
:class="{'yujing':v?.cgdType=='9','active':leftitem==i}"
@click="getmiddle(v,i);saveleftgo = i;">
<view>{{ v?.cgdNo }}</view>
<view>供应商:{{ v.gysId_dictText }}</view>
<view>采购人: {{ v.createBy_dictText }}</view>
<view>{{ v.qgDate }}</view>
<view>
<view>
采购金额
</view>
<view>
¥ <text class="dollar">{{v?.totalPrice}}</text>
</view>
</view>
<view v-if="v?.cgdType=='9'" class="zuofei">
已作废
</view>
</view>
</scroll-view>
<view class="fxj">
<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="45" />
<text>长春市朝阳区久泰开运养老服务有限公司</text>
</view>
</view>
<view class="lefts">
<view class="caigoudan guodu">
<view class="title">
<view></view>采购单
</view>
<view class="cgdh brtop">
<view>采购单号:<text>{{plsbuy[leftitem]?.cgdNo}}</text></view>
<view>采购金额:<text>{{plsbuy[leftitem]?.totalPrice}}</text></view>
</view>
<view class="cgdh">
<view>采购人:{{plsbuy[leftitem]?.createBy_dictText}} </view>
<view>采购日期:{{plsbuy[leftitem]?.qgDate}}</view>
<view>供应商:{{plsbuy[leftitem]?.gysId_dictText}}</view>
</view>
<scroll-view scroll-y="true" class="cgdscroll" scroll-with-animation>
<view class="fler">
<view class="boxitem" v-for="(f,l) in InvoicingList" :key='l' @scrolltolower="scrolltolower"
:lower-threshold="200">
<view>{{f.wlName}}</view>
<view style="white-space: nowrap;">规格型号:{{f.wlSpecificationModel}}</view>
<view>采购金额:{{f.procurementPrice}}</view>
<view>采购数量:{{f.purchaseQuantity}}</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>
<view class="rights">
<view class="shitem">
<view class="shypk">
<view>生活用品库</view>
</view>
<view class="jqry">
<view class="left tp">
<image
:src="cellobj?.fzrHeadPath?serverUrl + cellobj?.fzrHeadPath:'/static/index/warehouse/procurement/jqr.png'"
mode="aspectFill"></image>
</view>
<view class="rigname">
<view>{{cellobj?.fzr}}</view>
<view>
<text>{{cellobj?.fzrTel?cellobj?.fzrTel:'-'}}</text>
</view>
</view>
</view>
</view>
<view class="typeitem">
<view class="toptype">
<view v-for="v in ['三','二','一']">{{v+'级分类'}}</view>
<!-- <view :class="scroll.act3==-1?'act':''" @click="typescroll(3,-1,{})">全部</view>
<view :class="scroll.act2==-1?'act':''" @click="typescroll(2,-1,{})">全部</view>
<view :class="scroll.act1==-1?'act':''" @click="typescroll(1,-1,{})">全部</view> -->
</view>
<view class="scroltype">
<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop3"
class="scroll-Y">
<view :class="scroll.act3==i?'act':''"
v-for="(v,i) in TreeData[scroll.act1]?.children[scroll.act2]?.children"
@click="typescroll(3,i,v)">
{{v.title}}
</view>
</scroll-view>
<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop2"
class="scroll-Y">
<view :class="scroll.act2==i?'act':''" v-for="(v,i) in TreeData[scroll.act1]?.children"
@click="typescroll(2,i,v)">
{{v.title}}
</view>
</scroll-view>
<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop1"
class="scroll-Y scrl1">
<view :class="scroll.act1==i?'act':''" v-for="(v,i) in TreeData" @click="typescroll(1,i,v)">
<image :src="serverUrl + v.appCheckIconPath" mode="aspectFill" v-if="scroll.act1==i">
</image>
<image :src="serverUrl + v.appIconPath" mode="aspectFill" v-else></image>
<text>
{{v.title}}
</text>
</view>
</scroll-view>
</view>
<view class="anmikc">
<view v-for="(v,i) in animArray" :key="i" @click="admiclick(i)" class="mar-left">
<view>
<donghua width="2vw" height="2vw" :links="v.url" :playing="i === anmidex"
class="donghua" />
</view>
<text :style="plsbuy[leftitem]?.cgdType == '9'?{color:`#c8c8c8`}:{}">
{{v.name}}
</text>
</view>
</view>
<view class="serchs">
<view class="ipt">
<input type="text" placeholder="物料名称/物料编码/物料简拼" v-model="plzinfo.cgdParamInfo" />
<image src="/static/index/warehouse/procurement/x.png" mode="aspectFill"
v-if="plzinfo.cgdParamInfo" @click="search(0)"></image>
</view>
<view @click="search" class="scr">
检索
</view>
</view>
</view>
</view>
</view>
<view class="mengban" v-if="crk" @click="qingkong"></view>
<view class="crkcard guodu" :class="crk?'':'uncrkcard'">
<view class="crkcard-title">
{{ savedetail.materialName }}
</view>
<view class="crkcard-img-father">
<image class="crkcard-img"
:src="savedetail.materialImg?serverUrl + savedetail.materialImg : '/static/index/warehouse/procurement/k.png'"
mode="aspectFill"></image>
<view class="tagname">
<view class="tagname-one" v-if="savedetail.categoryName">
生活用品
</view>
<view class="tagname-one" v-if="savedetail.typeName">
照护用品
</view>
<view class="tagname-one" v-if="savedetail.medicationName">
医疗用品
</view>
</view>
</view>
<view class="crkcard-text" style="margin-top: 80rpx;">
物料编码: {{ savedetail.materialNo }}
</view>
<view class="crkcard-text">
规格型号: {{ savedetail.specificationModel }}
</view>
<view class="crkcard-text">
物料标签: {{ savedetail.tagName }}
</view>
<view class="crkcard-text">
物料单位: {{ savedetail.materialUnits }}
</view>
<view class="crkcard-text">
医保报销: {{ savedetail.izYbbxName }}
</view>
<view class="crkcard-text">
机构优惠: {{ savedetail.izJgyhName }}
</view>
<view class="bottom-card-father">
<view class="bottom-card">
<view class="bottom-card-font">
{{ savedetail.kcsl }}
</view>
<view class="bottom-card-gray">
库存数量
</view>
<view class="bottom-card-bian"></view>
</view>
<view class="bottom-card">
<view class="bottom-card-font">
{{ savedetail.upperLimit }}
</view>
<view class="bottom-card-gray">
物料上限
<text style="color: #0E8AFA;">
</text>
</view>
<view class="bottom-card-bian"></view>
</view>
<view class="bottom-card">
<view class="bottom-card-font">
{{ savedetail.lowerLimit }}
</view>
<view class="bottom-card-gray">
物料下限
<text style="color: #FAB6BA;">
</text>
</view>
</view>
</view>
</view>
<!-- 分享的弹出层 -->
<view v-show="shareShow" class="popup-share" @click="shareShow=false">
<view class="popup-share-content" :style="{ opacity: deletedownisopacity ? 1 : 0 }" @click.stop>
<view class="share-other">
<view class="share-main">
<view class="">
<view class="share-weight">
{{ plsbuy[leftitem]?.cgdNo }}
</view>
<view class="share-font">
供应商:{{ plsbuy[leftitem]?.gysId_dictText }}
</view>
<view class="share-font">
采购时间:{{ plsbuy[leftitem]?.qgDate }}
</view>
</view>
<view class="right-flex">
<view style="font-weight: 600;">
<text style="vertical-align: 4rpx;">
</text>
<text class="dollar-text">
{{plsbuy[leftitem]?.totalPrice}}
</text>
</view>
<view class="caigou-font">
采购金额
</view>
</view>
</view>
<view class="share-bottom">
<view style="display: flex;align-items: center;">
<image class="share-bottom-img" src="/static/index/youngman.png"></image>
<view class="share-name">
{{ plsbuy[leftitem]?.createBy_dictText }}
</view>
<view class="share-font">
采购人
</view>
</view>
<view class="blue-button" @click="clickshare">
分享
</view>
</view>
</view>
</view>
</view>
<view :class="['neuro-wrapper', donghuacs ? 'is-active' : '']" v-show="badshow">
<view class="neuro-mask" @click="badshow=false;"></view>
<view class="neuro-box" @click.stop>
<view class="button-father">
<view class="button-white" @click="badshow=false;">取消</view>
<view class="button" @click="zuofei">确定</view>
</view>
<view class="title">作废</view>
<view class="card-font">
确定要作废这个采购单吗
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineProps } from 'vue';
import { queryInvoicingList, getCgdMaterialTreeData, queryNuInfoByNuId, updateKfstatus, queryCgdList, queryCgdInfoList, queryWlInfoByWlId, voidedCgdMain } from './api/lunpan.js'
import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
import shadowview from './components/ShadowView.vue';
import calculator from './components/calculator.vue';
const navurl = ref('');
const InvoicingList = ref([]);
const TreeData = ref([]);
const cellobj = ref({});
const serverUrl = ref('');
const scrolltop = ref(0)
const leftscrolltop = ref(0)
const shopitem = ref(-1);
const leftitem = ref(0)
const getblue = ref(false);
const shyp = ref(false);
const opacity = ref(false);
const gysnum = ref(false);
const gys = ref(false);
const crk = ref(false);
const shareShow = ref(false);
const deletedownisopacity = ref(false);
const scrollnum = ref(0);
const scroll = reactive({ scrolltop1: 0, scrolltop2: 0, scrolltop3: 0, act1: -1, act2: -1, act3: -1 });
const form = reactive({
nuId: '',
pageNo: 1,
pageSize: 9,
categoryId: '',
typeId: '',
medicationId: '',
wlParamInfo: '',
cgdId: "",
isWaring: 0
})
const mobanform = {
nuId: '',
pageNo: 1,
pageSize: 9,
categoryId: '',
typeId: '',
medicationId: '',
wlParamInfo: '',
cgdId: "",
isWaring: 0
}
const getmiddle = (item : any, i : number) => {
let num = Math.ceil((i + 1))
leftscrolltop.value = (num - 2) * 185;
leftitem.value = i;
shopitem.value = -1
InvoicingList.value = [];
Object.assign(form, mobanform)
form.cgdId = item.id
// queryInvo();
getMaterial();
typescroll(1,-1,{})
// console.log("入参", form)
}
const switchshyp = () => {
let obj = {
id: cellobj.value.id,
status: shyp.value ? '5' : '2'
}
updateKfstatus(obj).then(res => {
// console.log(res)
if (res.success) {
shyp.value = shyp.value ? false : true;
cell();
} else {
uni.showToast({
icon: 'error',
title: res.message
})
}
})
}
const detailform = reactive({
wlId: "",
nuId: uni.getStorageSync('nuId')
})
const savedetail = ref({
categoryName: '',
typeName: '',
medicationName: '',
materialNo: '',
specificationModel: '',
tagName: '',
materialUnits: '',
izYbbxName: '',
izJgyhName: '',
kcsl: '',
upperLimit: '',
lowerLimit: '',
materialName: '',
materialImg: ''
})
const getdetail = () => {
// console.log("????", detailform)
queryWlInfoByWlId(detailform).then((res : any) => {
// console.log("res", res.result)
if (res.result) {
savedetail.value = res.result;
crk.value = true;
leftitem.value = -1
}
})
}
const shopclick = (i : number) => {
let num = Math.ceil((i + 1) / 2)
scrolltop.value = (num - 2) * 167;
shopitem.value = i;
// console.log(InvoicingList.value[i].wlId, uni.getStorageSync('nuId'))
detailform.wlId = InvoicingList.value[i]?.wlId
// getdetail()
}
const typescroll = (e : number, i : number, v : object) => {
if (e == 1) {
scroll.act2 = -1;
scroll.act3 = -1;
scroll.scrolltop2 = 0;
scroll.scrolltop3 = 0;
form.categoryId = v?.categoryId;
form.typeId = '';
form.medicationId = '';
if (scroll.act1 == i) {
scroll.act1 = -1;
form.categoryId = '';
form.pageNo = 1;
InvoicingList.value = [];
queryInvo();
return
}
}
if (e == 2) {
scroll.act3 = -1;
scroll.scrolltop3 = 0;
form.categoryId = v?.categoryId;
form.typeId = v?.typeId;
form.medicationId = '';
}
if (e == 3) {
form.categoryId = v?.categoryId;
form.typeId = v?.typeId;
form.medicationId = v?.key;
}
scroll['act' + e] = i;
scroll['scrolltop' + e] = (i - 2) * 50;
form.pageNo = 1;
InvoicingList.value = [];
shopitem.value = 0;
queryInvo();
}
const search = (x : number) => {
if (x === 0) { plzinfo.cgdParamInfo = '' }
plzinfo.pageNo = 1;
plsbuy.value = [];
leftitem.value = saveleftgo.value;
shopitem.value = -1;
// form.cgdId = plsbuy.value[leftitem.value].id
firstgetqueryCgdList();
}
onLoad(() => {
form.nuId = uni.getStorageSync('nuId');
serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
firstgetqueryCgdList();
cell()
})
const init = () => {
InvoicingList.value = [];
plsbuy.value = []
Object.assign(form, mobanform)
Object.assign(plzinfo, mobanplzinfo)
serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
firstgetqueryCgdList();
}
const plzinfo = reactive({
pageNo: 1,
pageSize: 10,
canpull: true,
cgdParamInfo:'',
})
const mobanplzinfo = {
pageNo: 1,
pageSize: 10,
canpull: true
}
const plsbuy = ref([])
const firstgetqueryCgdList = () => {
queryCgdList(plzinfo).then((res : any) => {
// console.log("请购单", res.result.records)
plsbuy.value.push(...res.result.records)
form.cgdId = plsbuy.value[0].id
queryInvo();
getMaterial();
if (res.result.records.length < plzinfo.pageSize) {
plzinfo.canpull = false;
}
})
}
//获得采购单列表
const getqueryCgdList = () => {
if (!plzinfo.canpull) return
queryCgdList(plzinfo).then((res : any) => {
plsbuy.value.push(...res.result.records)
if (res.result.records.length < plzinfo.pageSize) {
plzinfo.canpull = false;
}
})
}
const plsbuytolower = () => {
if (!setout) { return }
// status.value = 'loading'
// setout.value = false;
plzinfo.pageNo++;
getqueryCgdList()
times = setTimeout(() => {
setout.value = true
}, 1000)
}
const qingkong = () => {
gys.value = false;
anmidex.value = -1;
crk.value = false;
}
const colse = () => {
gysnum.value = !gysnum.value
}
const cell = () => {
queryNuInfoByNuId(form).then(res => {
cellobj.value = res.result;
shyp.value = res.result.status == 5 ? false : true
})
}
const getMaterial = () => {
getCgdMaterialTreeData(form).then(res => {
TreeData.value = res.result;
})
}
const setout = ref(true)
let times = null;
const status = ref('loadmore')
onPageScroll((e) => {
console.log(e)
})
const scrolltolower = () => {
if (!setout) { return }
status.value = 'loading'
setout.value = false;
form.pageNo++;
queryInvo()
times = setTimeout(() => {
setout.value = true
}, 1000)
}
const scrollview = (e : number) => {
if (e.detail.scrollTop > scrollnum.value) {
opacity.value = true;
setTimeout(() => {
opacity.value = false;
}, 900)
} else {
opacity.value = false;
}
scrollnum.value = e.detail.scrollTop;
}
const queryInvo = () => {
// console.log("form", form)
queryCgdInfoList(form).then(res => {
InvoicingList.value.push(...res.result.records);
detailform.wlId = InvoicingList.value[0].wlId
status.value = res.result.total == InvoicingList.value.length ? 'nomore' : 'loadmore';
})
}
const saveleftgo = ref(0);
const movecard = (type : number) => {
if (leftitem.value != -1) {
switch (type) {
case 0:
// 上
if (leftitem.value) {
leftitem.value--
getmiddle(plsbuy.value[leftitem.value], leftitem.value);
}
break;
case 1:
// →
saveleftgo.value = leftitem.value;
leftitem.value = -1;
shopitem.value = 0;
break;
case 2:
// 下
if (leftitem.value < plsbuy.value.length - 1) {
leftitem.value++
getmiddle(plsbuy.value[leftitem.value], leftitem.value)
}
break;
case 3:
// ←
break;
case 4:
// 扫描
// saveleftgo.value = leftitem.value;
// leftitem.value = -1;
// shopitem.value = 0;
break;
case 5:
// 返回
uni.navigateBack({
delta: 1
})
break;
default:
break;
}
}
else if (shopitem.value != -1) {
switch (type) {
case 0:
// 上
shopitem.value = shopitem.value < 1 ? shopitem.value = 0 : shopitem.value - 2
break;
case 1:
// →
shopitem.value = shopitem.value >= InvoicingList.value.length - 1 ? InvoicingList.value.length - 1 : shopitem.value + 1
break;
case 2:
// 下
shopitem.value = shopitem.value >= InvoicingList.value.length - 2 ? shopitem.value = 0 : shopitem.value + 2
break;
case 3:
shopitem.value = shopitem.value == 0 ? shopitem.value = InvoicingList.value.length - 1 : shopitem.value - 1
// ←
break;
case 4:
// 扫描
getdetail()
break;
case 5:
// 返回
leftitem.value = saveleftgo.value;
getmiddle(plsbuy.value[leftitem.value], leftitem.value)
shopitem.value = -1;
break;
default:
break;
}
shopclick(shopitem.value)
}
// shopclick(shopitem.value)
}
// 通用的生成函数
function genPaths(base, prefix, count, ext = 'png', startIndex = 0, pad = false) {
return Array.from({ length: count }, (_, i) => {
const idx = pad
? String(i + startIndex).padStart(2, '0')
: i + startIndex
return `${base}/${prefix}${idx}.${ext}`
})
}
const anmidex = ref(-1)
const admiclick = (i : number) => {
anmidex.value = i;
if (plsbuy.value[leftitem.value]?.cgdType == '9') {
uni.showToast({
title: '该表单已经作废',
icon: 'none', // 'none' 表示不带图标
duration: 2000
})
return
}
switch (i) {
case 0:
bebad();
break;
case 1:
// gys.value = true
shareToWeixin()
break;
case 2:
break;
case 3:
break;
case 4:
// crk.value = true
break;
case 5:
break;
default:
break;
}
}
const badshow = ref(false);
const donghuacs = ref(false);
const bebad = () => {
if (leftitem.value == -1) {
uni.showToast({
title: '请选择想要作废的采购单',
icon: 'none', // 'none' 表示不带图标
duration: 2000
})
return
} else {
badshow.value = true;
donghuacs.value = false;
setTimeout(() => donghuacs.value = true, 50)
}
}
const zuofei = () => {
voidedCgdMain({ id: plsbuy.value[leftitem.value].id }).then((res : any) => {
console.log("res", res)
if (res.success) {
uni.showToast({
title: res.message,
icon: 'success', // 'none' 表示不带图标
duration: 2000
})
badshow.value = false;
init()
}
})
}
const shareToWeixin = () => {
if (leftitem.value == -1) {
uni.showToast({
title: '请选择想要分享的采购单',
icon: 'none', // 'none' 表示不带图标
duration: 2000
})
return
} else {
shareShow.value = true;
deletedownisopacity.value = false;
setTimeout(() => {
deletedownisopacity.value = true
}, 100)
}
}
const clickshare = () => {
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 0,
href: "https://www.baidu.com/",
title: "护理日程分享",
summary: "九泰护理日程测试",
imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
success: function (res) {
console.log("success:");
},
fail: function (err) {
console.log("fail:");
}
});
}
const animArray = ref([
{
url: genPaths(
'/static/index/warehouse/procurement/cancel',
'cancel',
9, // 张数
'png',
1, // 起始索引为 1
false // 不补零
),
name: '作废',
},
{
url: genPaths(
'/static/index/warehouse/procurement/share',
'share',
6, // 张数
'png',
1, // 起始索引为 1
false // 不补零
),
name: '分享',
},
])
</script>
<style lang="less">
// 出入库
.uncrkcard {
bottom: -100vw !important;
}
.crkcard {
width: 27vw;
height: 50vw;
background: rgba(255, 255, 255, 1);
box-shadow: 0rpx 0rpx 1vw 0rpx rgba(171, 171, 172, 0.29);
border-radius: 1.6vw;
position: fixed;
right: 1.2vw;
bottom: 11.5vw;
z-index: 102;
padding: 0 50rpx;
padding-top: 100rpx;
.crkscroll {
width: 100%;
height: 29vw;
.cgrk {
width: 35vw;
height: 8.5vw;
background: rgba(236, 237, 239, 0.4);
border-radius: 1.6vw;
margin: 0.8vw auto 0;
padding: 1.8vw 2vw;
display: flex;
justify-content: space-between;
>view {
display: flex;
flex-direction: column;
justify-content: space-between;
&:nth-child(1) {
text {
&:nth-child(2),
&:nth-child(3) {
font-weight: 400;
font-size: 1.1vw;
color: #888888;
}
&:nth-child(1) {
font-weight: bold;
font-size: 1.2vw;
color: #333333;
}
}
}
&:nth-child(2) {
.c {
color: #FF6600 !important;
}
.l {
color: #0076D6 !important;
}
text {
font-weight: 400;
font-size: 1.1vw;
color: #888888;
text-align: right;
&:nth-child(2) {
font-weight: bold;
font-size: 1.4vw;
color: #333333;
}
}
}
}
}
}
.select {
width: 100%;
height: 7vw;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1vw 1.5vw;
>view {
display: flex;
&:nth-child(2) {
justify-content: space-between;
text {
font-weight: 400;
font-size: 1.1vw;
color: #555555;
}
}
&:nth-child(1) {
justify-content: flex-end;
view {
min-width: 5vw;
height: 2.6vw;
border-radius: 1.3vw;
border: 1px solid #DCDCDC;
padding: 0 1.4vw;
align-items: center;
display: flex;
align-items: center;
margin: 0 0.5vw;
image {
width: 0.7vw;
height: 0.5vw;
margin-left: 0.4vw;
}
}
}
}
}
.shopcont {
width: 100%;
height: 10vw;
background: rgba(236, 237, 239, 0.3);
border-bottom: 1px solid #DCDCDC;
display: flex;
align-items: center;
.cont {
width: 26vw;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
position: relative;
padding: 2vw 0;
view {
&:nth-child(4) {
width: 5vw;
height: 5vw;
background: rgba(236, 237, 239, 1);
border-radius: 1.4vw;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
font-weight: 400;
font-size: 1vw;
position: absolute;
color: #888888;
top: 2.5vw;
right: 1.8vw;
padding: 0.5vw 0;
text {
font-weight: bold;
font-size: 1.8vw;
color: #555555;
}
}
&:nth-child(2),
&:nth-child(3) {
font-weight: 400;
font-size: 1.1vw;
color: #888888;
}
&:nth-child(1) {
font-weight: bold;
font-size: 1.4vw;
color: #212327;
}
}
}
.img {
width: 10vw;
height: 9vw;
}
}
}
//
.shuru {
width: 20.6vw;
height: 34.5vw;
position: fixed;
bottom: 1.5vw;
right: 1.6vw;
z-index: 103;
}
// 采购
.unrigbot {
right: -25vw !important;
}
.rigbot {
width: 24.5vw;
height: 13vw;
background: #FFFFFF;
border-radius: 1.6vw;
position: fixed;
bottom: 1.5vw;
right: 1.6vw;
z-index: 102;
padding: 1.1vw;
display: flex;
flex-direction: column;
justify-content: space-between;
view {
display: flex;
align-items: center;
&:nth-child(3) {
align-items: center;
white-space: nowrap;
text {
font-weight: 400;
font-size: 1.1vw;
color: #555555;
white-space: nowrap;
margin-right: 1.2vw;
}
.jj {
width: 3.5vw;
height: 3.5vw;
background: rgba(85, 85, 85, .1);
border-radius: 1.0vw;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 0 1vw;
position: relative;
padding: 0 !important;
&:active {
content: '';
width: 3.5vw;
height: 3.5vw;
background: linear-gradient(-61deg, #EAF5FF, #CBE7FF) !important;
}
}
.num {
width: 6.5vw;
height: 3.5vw;
border-radius: 1.0vw;
background: rgba(85, 85, 85, .1);
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 0 1vw;
}
}
&:nth-child(2) {
width: 21.6vw;
height: 3.0vw;
background: rgba(85, 85, 85, 0.1);
border-radius: 1.0vw;
padding-left: 1.5vw;
}
&:nth-child(1) {
justify-content: space-between;
font-weight: 400;
font-size: 1.1vw;
color: #555555;
text {
width: 5.2vw;
height: 2.2vw;
display: inline-block;
text-align: center;
line-height: 2.2vw;
font-weight: 400;
font-size: 1vw;
color: #5C7992;
background: linear-gradient(-61deg, #EAF5FF, #CBE7FF) !important;
border-radius: 1.1vw;
}
}
}
}
.uncg {
left: -47vw !important;
}
.cgou {
width: 47vw;
height: 26vw;
background: #FFFFFF;
box-shadow: 0rpx 0rpx .5vw 0rpx #E8E9ED;
border-radius: 1.6vw;
position: fixed;
left: 2vw;
top: 16vw;
z-index: 101;
padding: 2vw 0 0;
.tj {
width: 100%;
height: 3.5vw;
display: flex;
justify-content: flex-end;
font-weight: 400;
font-size: 1.1vw;
color: #555555;
align-items: center;
padding-right: 2vw;
}
.gyscont {
width: 100%;
height: 5.7vw;
background: #EFF0F4;
padding: 2vw;
display: flex;
border-top: 1px solid #E8E9ED;
border-bottom: 1px solid #E8E9ED;
view {
width: 50%;
&:nth-child(2) {
display: flex;
align-items: center;
white-space: nowrap;
text {
font-weight: 400;
font-size: 1.1vw;
color: #555555;
white-space: nowrap;
}
.jj {
width: 3.5vw;
height: 3.5vw;
background: rgba(85, 85, 85, .1);
border-radius: 1.0vw;
display: flex;
justify-content: center;
align-items: center;
margin: 0 1vw;
position: relative;
&:active {
content: '';
width: 3.5vw;
height: 3.5vw;
background: linear-gradient(-61deg, #EAF5FF, #CBE7FF) !important;
}
}
.num {
width: 6.5vw;
height: 3.5vw;
border-radius: 1.0vw;
background: rgba(85, 85, 85, .1);
display: flex;
justify-content: center;
align-items: center;
}
}
&:nth-child(1) {
display: flex;
flex-direction: column;
text {
font-weight: 400;
font-size: 1vw;
margin-left: 1vw;
&:nth-child(1) {
color: rgba(85, 85, 85, 1);
margin-top: -0.4vw;
}
&:nth-child(2) {
margin-top: 0.4vw;
color: #555555;
}
}
}
}
}
.topcont {
width: 100%;
height: 14.6vw;
padding: 0 2vw;
.life {
width: 100%;
height: 4.4vw;
display: flex;
justify-content: space-around;
>view {
width: 50%;
height: 100%;
display: flex;
justify-content: space-between;
&:nth-child(2) {
display: flex;
justify-content: flex-end;
view {
min-width: 4vw;
height: 80%;
font-weight: 400;
font-size: .9vw;
color: #8F92A1;
display: flex;
flex-direction: column;
margin-left: 2.1vw;
margin-top: -0.2vw;
padding-right: 2.1vw;
.l {
color: rgba(3, 133, 250, 1);
}
.f {
color: rgba(250, 178, 182, 1);
}
&:nth-child(1) {
border-right: 1px solid rgba(239, 240, 244, 1);
}
>text {
&:nth-child(1) {
font-weight: bold;
font-size: 1.4vw;
color: #555555;
}
&:nth-child(2) {
font-weight: 400;
font-size: .9vw;
color: #8F92A1;
}
}
}
}
&:nth-child(1) {
display: flex;
justify-content: flex-start;
view {
&:nth-child(1),
&:nth-child(2) {
width: 5.3vw;
height: 1.8vw;
border-radius: .9vw;
border: 1px solid #D2D2D2;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: .9vw;
color: #555555;
margin-left: .6vw;
}
&:nth-child(3) {
width: 4vw;
height: 80%;
font-weight: 400;
font-size: .9vw;
color: #8F92A1;
display: flex;
flex-direction: column;
margin-left: 2.1vw;
margin-top: -0.2vw;
>text {
&:nth-child(1) {
font-weight: bold;
font-size: 1.4vw;
color: #555555;
}
&:nth-child(2) {
font-weight: 400;
font-size: .9vw;
color: #8F92A1;
}
}
}
}
}
}
}
.top {
width: 100%;
height: 10.2vw;
display: flex;
justify-content: space-between;
.leftimg {
width: 7vw;
height: 6vw;
}
.rightcont {
width: 29vw;
height: 100%;
display: flex;
flex-direction: column;
>view {
width: 100%;
&:nth-child(1) {
display: flex;
justify-content: space-between;
margin-bottom: .5vw;
text {
width: 25vw;
font-weight: bold;
font-size: 1.4vw;
color: #212327;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&:nth-child(2),
&:nth-child(3),
&:nth-child(4) {
display: flex;
font-weight: 400;
font-size: 1vw;
color: #777777;
align-items: center;
white-space: nowrap;
>view {
width: 16vw;
margin-top: .8vw;
}
text {
display: inline-block;
white-space: nowrap;
}
}
}
}
}
}
}
.mengban {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: RGBA(239, 240, 244, 0.55);
}
.tp {
image {
width: 100%;
height: 100%;
}
}
.box {
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
padding: 0vw 1vw 0;
overflow: hidden;
.rights {
width: 24.5vw;
height: calc(100% - 4vw);
margin-top: 4vw;
.serchs {
width: 24.5vw;
height: 3.2vw;
background: rgba(255, 255, 255, .5);
border-radius: 1.6vw;
display: flex;
justify-content: space-between;
padding: 0.5vw;
align-items: center;
margin-top: 1.1vw;
.ipt {
display: flex;
align-items: center;
width: 19vw;
image {
width: 2.2vw;
height: 2.2vw;
margin-left: 0.5vw;
}
input {
width: 16.5vw;
height: 2.4vw;
font-size: 1.1vw;
padding-left: 1.6vw;
}
}
.scr {
width: 4.2vw;
height: 2.4vw;
background: url('/static/index/warehouse/procurement/sh.png')no-repeat;
background-size: 100% 100%;
border-radius: 1.2vw;
border: 1px solid rgba(0, 155, 252, 1);
font-weight: 400;
font-size: 1vw;
color: #1083F8;
display: flex;
justify-content: center;
align-items: center;
}
}
.anmikc {
width: 100%;
height: 5vw;
display: flex;
justify-content: space-between;
// flex-wrap: wrap;
>view {
width: 49%;
height: 3.7vw;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 1.3vw;
color: #212327;
background: #FFFFFF;
margin: 0.25vw 0;
// margin-right: 1vw;
border-radius: 1.6vw;
view {
margin-right: .4vw;
image {
width: 2vw;
height: 2vw;
}
.donghua {
margin: 0;
}
}
text {
white-space: nowrap;
}
}
}
.typeitem {
width: 100%;
height: 56vh;
.scroltype {
width: 100%;
height: calc(56vh);
display: flex;
justify-content: space-around;
.scroll-Y {
width: 8.5vw;
height: calc(55vh - 2vh);
margin-top: 0.5vw;
view {
width: 100%;
height: 3.8vw;
background: rgba(255, 255, 255, .5);
border-radius: 1.9vw;
font-weight: 400;
font-size: 1.3vw;
color: #212327;
display: flex;
justify-content: center;
align-items: center;
padding: 0 0.4vw;
margin-bottom: .8vw;
text-align: center;
text {
white-space: nowrap;
}
>image {
width: 2vw;
height: 2vw;
}
}
.act {
background: rgba(255, 255, 255, 1) !important;
font-weight: 600;
color: #0385FA !important;
}
}
}
>.toptype {
width: 100%;
height: 2vw;
display: flex;
justify-content: space-around;
margin: .4vw 0 .4vw 0;
.act {
background: rgba(255, 255, 255, 1) !important;
font-weight: 600;
color: #0385FA !important;
}
>view {
width: 7vw;
height: 1.9vw;
border-radius: 1vw;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 1.2vw;
color: #333333;
padding: 0;
}
}
}
.shitem {
width: 24.5vw;
height: 10.3vw;
background: #E8E9ED;
border-radius: 1.6vw;
padding: 1.2vw 1.8vw;
.jqry {
width: 100%;
display: flex;
align-items: center;
.left {
width: 5vw;
height: 5vw;
margin-right: .8vw;
border-radius: .3vw;
overflow: hidden;
}
.rigname {
height: 4vw;
display: flex;
flex-direction: column;
justify-content: space-around;
view {
&:nth-child(1) {
font-weight: bold;
font-size: 1.4vw;
color: #212327;
}
&:nth-child(2) {
width: 11vw;
font-weight: 400;
font-size: 1vw;
color: #212327;
display: flex;
justify-content: space-between;
}
}
}
}
.shypk {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 10rpx;
view {
&:nth-child(1) {
font-weight: bold;
font-size: 30rpx;
color: #333333;
}
&:nth-child(2) {
display: flex;
flex-direction: column;
align-items: center;
text {
font-weight: 400;
font-size: 1vw;
color: #666666;
}
}
}
}
}
}
.lefts {
width: 46vw;
height: calc(100vh - 8vh);
position: relative;
background: #FFFFFF;
box-shadow: 0rpx 2px 3px 0rpx rgba(182, 186, 196, 0.24);
border-radius: 1.6vw;
margin-top: 6vh;
.caigoudan {
width: 46vw;
height: 92vh;
background: #FFFFFF;
border-radius: 1.6vw;
padding: 0.5vw 1.5vw 0;
.cgdscroll {
width: 100%;
height: calc(92vh - 10vw);
}
.fler {
display: grid;
grid-template-columns: 1fr 1fr;
}
.boxitem {
width: 22vw;
height: 10vw;
background: rgba(192, 192, 192, 0.14);
border-radius: 1.6vw;
margin: 0 1vw 1.2vw 0;
border: 2px dashed #fff;
display: inline-block;
padding: 1vw 1.6vw 0;
position: relative;
>view {
&:nth-child(1) {
font-weight: bold;
font-size: 1.4vw;
color: #333;
white-space: nowrap;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
max-width: 15vw;
}
&:nth-child(2) {
font-weight: 400;
font-size: 1.1vw;
color: #555555;
margin-top: .6vw;
}
&:nth-child(3),
&:nth-child(4) {
font-weight: 400;
font-size: 1.1vw;
color: #666666;
margin-top: .2vw;
}
}
}
.cgdh {
width: 100%;
height: 2.5vw;
display: flex;
justify-content: space-between;
align-items: center;
color: #333333;
view {
font-size: 1.1vw;
}
text {
font-size: 1.2vw;
font-weight: bold;
}
}
.title {
height: 4vw;
font-weight: 400;
font-size: 1.4vw;
color: #333333;
border-bottom: 1px solid #DCDCDC;
display: flex;
align-items: center;
view {
width: 0.5vw;
height: 1.4vw;
background: linear-gradient(-69deg, #006DC9, #0385FA);
border-radius: 0.25vw;
margin-right: 0.7vw;
}
}
}
}
}
.active {
border: 2px dashed #017DE9 !important;
}
.act {
background: linear-gradient(-69deg, #E1EFFC, #CAE0F9, #D2E9FF) !important;
border: 1px solid rgba(0, 130, 251, 0.34) !important;
padding-left: 1.3vw;
view {
background: #0385FA;
position: absolute;
}
}
.guodu {
transition: .4s;
-webkit-transform-style: preserve-3d;
-webkit-overflow-scrolling: touch;
}
.rel-left {
width: 26vw;
height: 100%;
position: relative;
margin-top: 6vh;
margin-right: -1.2vw;
.zuofei {
background-color: #FFE2E2;
color: #FF5757;
border: 1rpx solid #FF5757;
position: absolute;
top: 30rpx;
right: 30rpx;
width: 120rpx;
height: 50rpx;
border-radius: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
// margin-left: 1vw;
.fxj {
width: 23vw;
height: 22vw;
position: absolute;
left: 0;
bottom: 2vw;
z-index: 11;
border-radius: 1.6vw;
text {
width: 100%;
font-weight: 400;
font-size: .9vw;
color: #999999;
display: flex;
justify-content: center;
position: absolute;
left: 0;
bottom: 0vw;
}
}
.mblbg {
width: 24.5vw;
height: 25vh;
position: absolute;
left: -1vw;
bottom: 0.5vw;
border-radius: 1.6vw;
filter: blur(15rpx);
background: RGBA(239, 240, 244, 1);
z-index: 10;
}
.scroll-Y {
width: 100%;
height: 75vh;
display: flex;
flex-wrap: wrap;
}
.yujing {
color: black;
box-shadow: 0 0 8px rgba(255, 102, 107, 0.51);
}
.boxitem {
width: 24vw;
height: 14.7vw;
background: rgba(255, 255, 255, .7);
border-radius: 1.6vw;
margin: 0 0vw 1.2vw 0.6vw;
border: 2px dashed #fff;
display: inline-block;
padding: 1.5vw;
position: relative;
>view {
&:nth-child(1) {
font-weight: bold;
font-size: 1.5vw;
color: #333;
white-space: nowrap;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
}
&:nth-child(2) {
font-weight: 400;
font-size: 1.2vw;
color: #555555;
margin-top: .6vw;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
height: 1.5vw;
}
&:nth-child(3) {
font-weight: 400;
font-size: 1.2vw;
color: #666666;
margin-top: .6vw;
}
&:nth-child(4) {
font-weight: 400;
font-size: 1.2vw;
color: #666666;
margin-top: .6vw;
}
&:nth-child(5) {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 1.5vw;
view {
color: #888888;
}
text {
font-weight: bold;
font-size: 1.8vw;
color: #555;
}
}
}
}
}
.mar-left {
margin-left: 100vw;
}
.crkcard-title {
font-weight: bold;
font-size: 35rpx;
width: 100%;
text-align: center;
}
.crkcard-img-father {
width: 100%;
display: flex;
// justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 20rpx;
.crkcard-img {
width: 300rpx;
height: 300rpx;
}
.tagname {
display: flex;
.tagname-one {
width: 150rpx;
height: 50rpx;
margin: 0 20rpx;
border: 1rpx solid #D2D2D2;
border-radius: 30rpx;
display: flex;
align-items: center;
justify-content: center;
color: #555555;
}
}
}
.crkcard-text {
color: #777777;
margin-top: 20rpx;
}
.bottom-card-father {
position: absolute;
width: 100%;
height: 200rpx;
bottom: 0;
left: 0;
display: flex;
.bottom-card {
width: 33.3%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
.bottom-card-bian {
position: absolute;
height: 100rpx;
width: 1rpx;
background-color: #EFF0F4;
bottom: 50rpx;
right: 0;
}
.bottom-card-font {
font-weight: bold;
font-size: 35rpx;
}
.bottom-card-gray {
margin-top: 5rpx;
color: #8F92A1;
}
}
}
.blue-tags {
display: flex;
height: 3%;
margin-top: 12%;
margin-bottom: 5%;
align-items: center;
// padding: 0 0 20rpx 15rpx;
.blue-shu {
background: linear-gradient(to top, #007BFD, #019AF0);
width: 15rpx;
height: 40rpx;
border-radius: 15rpx;
margin: 0 15rpx 0 20rpx;
}
}
.blue-tags-middle {
display: flex;
height: 3%;
margin-top: 6%;
margin-bottom: 2.5%;
align-items: center;
// padding: 0 0 20rpx 15rpx;
.blue-shu {
background: linear-gradient(to top, #007BFD, #019AF0);
width: 15rpx;
height: 40rpx;
border-radius: 15rpx;
margin: 0 15rpx 0 20rpx;
}
}
.special-view {
width: 100%;
display: flex;
justify-content: space-between;
}
.popup-share {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(1rpx);
background-color: rgba(236, 237, 241, 0.4);
/* 添加毛玻璃效果 */
z-index: 999;
.share-other {
z-index: 1;
width: 100%;
height: 100%;
padding: 50rpx;
position: relative;
.share-main {
display: flex;
justify-content: space-between;
.share-weight {
font-weight: 600;
font-size: 30rpx;
}
.share-font {
color: #666666;
font-size: 30rpx;
margin-top: 20rpx;
}
}
}
.popup-share-content {
position: absolute;
display: flex;
flex-direction: column;
width: 1000rpx;
height: 500rpx;
background-color: #fff;
border-radius: 30rpx;
transition: opacity 0.4s ease;
.popup-share-title {
margin: 30rpx 30rpx;
font-size: 40rpx;
position: relative;
.popup-share-img {
position: absolute;
top: 0;
right: 0;
width: 200rpx;
height: 200rpx;
}
}
.popup-share-upcontent {
margin: 0 30rpx;
display: flex;
justify-content: space-between;
.popup-share-font {
font-size: 35rpx;
color: gray;
}
}
.popup-share-gray {
background-color: #D3D3D3;
width: calc(100% - 60rpx);
height: 2rpx;
margin: 110rpx 30rpx 0 30rpx;
}
.popup-share-downcontent {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
margin: 0 30rpx;
.popup-downcontent-img {
width: 70rpx;
height: 70rpx;
}
.popup-downcontent-font {
font-size: 27rpx;
margin-left: 20rpx;
}
.popup-share-downcontent-left {
display: flex;
align-items: center;
}
.popup-share-downcontent-button {
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 15rpx 30rpx;
border-radius: 20rpx;
font-size: 32rpx;
}
}
}
}
.blue-button {
margin-top: 60rpx;
width: 150rpx;
height: 70rpx;
border-radius: 40rpx;
display: flex;
justify-content: center;
align-items: center;
color: #007CFF;
font-size: 30rpx;
background: linear-gradient(to bottom, #e7f4ff, #c5e5ff);
border: 2rpx solid #9AD1FF;
}
/* 容器默认隐藏,透明度为 0不接受点击 */
.neuro-wrapper {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
/* 显示时透明度过渡到 1可接受点击 */
.neuro-wrapper.is-active {
opacity: 1;
pointer-events: auto;
}
/* 遮罩层,半透明黑色 */
.neuro-mask {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.3);
}
/* 拟态框 固定尺寸 + 阴影样式 + 相对定位于 wrapper */
.neuro-box {
position: relative;
width: 600rpx;
height: 450rpx;
border-radius: 30rpx;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
padding: 0 10%;
}
.button {
width: 47%;
background-color: #ddf0ff;
display: flex;
justify-content: center;
align-items: center;
// color: #fff;
color: #007CFF;
border: 1rpx solid #007CFF;
font-size: 25rpx;
border-radius: 30rpx;
}
.card-font {
margin-top: 70rpx;
width: 600rpx;
justify-content: center;
display: flex;
}
.button-white {
width: 47%;
border: 2rpx solid #c3cacd;
background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
display: flex;
justify-content: center;
align-items: center;
font-size: 25rpx;
border-radius: 30rpx;
}
.button-father {
position: absolute;
bottom: 60rpx;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 70rpx;
display: flex;
justify-content: space-between;
padding: 0 50rpx;
}
.margin-height {
height: 10rpx;
}
.right-flex {
display: flex;
flex-direction: column;
align-items: flex-end;
.dollar-text {
font-size: 2.2vw;
}
.caigou-font {
color: #999999;
margin-top: -5rpx;
font-size: 24rpx;
}
}
.share-bottom {
position: absolute;
width: 100%;
padding: 0 50rpx;
height: 120rpx;
bottom: 70rpx;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
.share-bottom-img {
width: 150rpx;
height: 140rpx;
}
.share-name {
margin: 0 20rpx;
font-size: 35rpx;
color: #555555;
font-weight: 600;
}
.share-font {
color: #555555;
margin-top: 10rpx;
font-size: 24rpx;
}
}
</style>
<style>
page {
background: RGBA(239, 240, 244, 1);
}
</style>