148 lines
3.1 KiB
Vue
148 lines
3.1 KiB
Vue
<template>
|
||
<view class="content">
|
||
<up-sticky bgColor="#fff">
|
||
<view class="head">
|
||
<up-search placeholder="请输入提货点名称" @search="searchKeyword" v-model="keyword"
|
||
@custom="searchKeyword"></up-search>
|
||
<view class="">
|
||
<view class="" style="display: flex;justify-content: space-around;margin-top: 24rpx;color:#777777">
|
||
<view :class="{act: tabIndex==1}" @click="tabIndex=1">
|
||
订单列表
|
||
</view>
|
||
<view :class="{act: tabIndex==2}" @click="tabIndex=2">
|
||
报价记录
|
||
</view>
|
||
</view>
|
||
<view style="height: 8rpx;" />
|
||
<view class="line" :style="{left:tabIndex==1?tabsLeft+'px':tabsRight+'px'}" />
|
||
</view>
|
||
</view>
|
||
</up-sticky>
|
||
<view class="card" v-for="item in 10">
|
||
<view class="card-head">
|
||
<text>PF171504442988969633</text>
|
||
<text style="color:#20B128 ;">待报价</text>
|
||
<text style="color:#FC452F ;">已成交</text>
|
||
<text style="color:#777777 ;">未成交</text>
|
||
</view>
|
||
<view style="padding-right: 20rpx;">
|
||
<view class="card-content">
|
||
<image v-for="(item,index) in 10" style="width: 152rpx;height: 152rpx;margin-right: 20rpx;"
|
||
src="../../static/logo.png" mode="">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="total">
|
||
<view style="display: flex;align-items: center;color: #777777;"
|
||
@click="navgo('/pageQuota/quotation/detail')">
|
||
共4件 <up-icon name="arrow-right"></up-icon>
|
||
</view>
|
||
</view>
|
||
<view class="card-foot" v-if='false'>
|
||
温馨提示：请于2024年05月20日前发货
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive
|
||
} from "vue"
|
||
|
||
const navgo = (url) => {
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
}
|
||
|
||
|
||
// 搜索
|
||
const keyword = ref('')
|
||
const searchKeyword = () => {
|
||
console.log("sousuo1")
|
||
}
|
||
// 搜索结束
|
||
|
||
// tabsindex
|
||
const tabIndex = ref(1)
|
||
const {
|
||
windowWidth
|
||
} = uni.getSystemInfoSync();
|
||
const tabsLeft = ref(((windowWidth / 2) - 26) / 2)
|
||
const tabsRight = ref(tabsLeft.value + (windowWidth / 2))
|
||
// tabsindex结束
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.card {
|
||
width: 710rpx;
|
||
margin: 20rpx auto;
|
||
background-color: white;
|
||
box-sizing: border-box;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
position: relative;
|
||
|
||
.card-head {
|
||
padding: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.card-content {
|
||
padding: 20rpx;
|
||
overflow-x: auto;
|
||
white-space: nowrap;
|
||
padding-right: 152rpx;
|
||
}
|
||
|
||
.total {
|
||
width: 152rpx;
|
||
height: 160rpx;
|
||
position: absolute;
|
||
// border: 1px dashed black;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
top: 100rpx;
|
||
right: 20rpx;
|
||
background-color: white;
|
||
}
|
||
|
||
.card-foot {
|
||
background-color: #FFF1EC;
|
||
color: #FC452F;
|
||
text-indent: 2em;
|
||
font-size: 24rpx;
|
||
height: 74rpx;
|
||
line-height: 74rpx;
|
||
|
||
}
|
||
}
|
||
}
|
||
</style> |