purchase-let/pageQuota/purchase_product_offer/index.vue

210 lines
4.3 KiB
Vue

<template>
<view>
<view class="content">
<up-transition mode="slide-left">
<view class="a" v-if="goodsList1.length>0">
<view class="card" v-for="(item,index) in goodsList1" :key='index'>
<view class="head">
<!-- <text> {{orer_sn}}</text> -->
<!-- <text style="color: #989898;">{{time}}</text> -->
</view>
<view class="card-content">
<view class="card-content-l" style="width: 152rpx;height: 152rpx;">
<image style="width: 152rpx;height: 152rpx;" :src="item.image" mode=""></image>
</view>
<view class="card-content-r">
<view class="title ellipsis">
{{item.store_name}}
</view>
<view class="need">
需求量: {{item.need_num}}
</view>
</view>
</view>
<view class="card-footer" v-if="item.nums && item.price">
共{{item.nums}}{{item.unit_name}}&nbsp; &nbsp;合计:<text
style="font-size: 28rpx;color: #FC452F;font-weight: 700;">¥{{item.nums*item.price}}</text>
</view>
<up-line style="margin-top: 30rpx;" color="#F3F3F3"></up-line>
</view>
</view>
<up-empty @click='test2' v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
</up-empty>
<!-- <button @click="test2">叫我按钮</button> -->
</up-transition>
</view>
</view>
</template>
<script setup>
import {
ref,
reactive,
} from "vue"
import {
purchaseProductOfferLists
} from "@/api/purchase_product_offer.js"
const test2 = () => {
console.log("点解")
uni.navigateTo({
url: '/pages/index/index'
})
}
// 状态图片url
const successPng = ref('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/739c3202405071458553459.png')
const errPng = ref('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/04c2c202405071501462462.png')
const waitPng = ref('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/274ad202405111523222891.png')
// tabsindex
const tabIndex = ref(1)
const {
windowWidth
} = uni.getSystemInfoSync();
const tabsLeft = ref(((windowWidth / 2) - 26) / 2)
const tabsRight = ref(tabsLeft.value + (windowWidth / 2))
// tabsindex结束
const priceBlur = (index, goodsList) => {
goodsList[index].price = Number(goodsList[index].price).toFixed(2)
}
// 列表
const showGoods = ref(false)
const showGoods1 = ref(false)
const goodsList = ref([])
const goodsList1 = ref([])
const getGoodsList = async (type) => {
let res = await purchaseProductOfferLists({
type
})
goodsList1.value = res.data.lists
}
getGoodsList(tabIndex.value)
</script>
<style lang="scss">
.head {
padding: 20rpx;
background-color: white;
position: relative;
.act {
color: #20B128;
}
.line {
width: 26px;
height: 5rpx;
background-color: #20B128;
border-radius: 50rpx;
position: absolute;
transition: 300ms;
}
}
.content {
padding: 20rpx;
padding-bottom: 150rpx;
.card {
width: 710rpx;
margin: 0 auto;
padding: 20rpx;
box-sizing: border-box;
background-color: white;
.card-content {
display: flex;
position: relative;
.card-content-l {
margin-right: 20rpx;
position: relative;
.status {
width: 152rpx;
height: 40rpx;
background-color: rgba(0, 0, 0, .3);
text-align: center;
color: white;
font-size: 24rpx;
line-height: 40rpx;
position: absolute;
bottom: 0;
}
}
.card-content-r {
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
font-size: 30rpx;
width: 500rpx;
}
.need {
color: #777777;
font-size: 24rpx;
}
.ipt {
display: flex;
height: 56rpx;
}
}
.status-png {
position: absolute;
right: 20rpx;
}
}
.card-footer {
margin-top: 30rpx;
text-align: right;
font-size: 28rpx;
color: #060606;
}
}
.submit-btn {
position: fixed;
bottom: 50rpx;
width: 710rpx;
margin: 0 auto;
}
}
.detail {
width: 88rpx;
height: 88rpx;
border-radius: 88rpx;
text-align: center;
line-height: 88rpx;
background-color: #50C758;
color: white;
position: absolute;
bottom: 300rpx;
right: 20rpx;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>