|
@@ -0,0 +1,155 @@
|
|
|
|
+<template>
|
|
|
|
+ <view>
|
|
|
|
+ <view class='search'>
|
|
|
|
+ <u-search placeholder='可按合同编号或买方、卖方名称查找' search-icon-color='#AFB3BF' bg-color='#F5F6F9' :shape='"round"' :clearabled="true" :show-action='false'></u-search>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view style='background:#fff;'>
|
|
|
|
+ <view class='contracttypewrap'>
|
|
|
|
+ <view class='item left active'>销售</view>
|
|
|
|
+ <view class='item'>采购</view>
|
|
|
|
+ <view class='item'>收购</view>
|
|
|
|
+ <view class='item'>代收</view>
|
|
|
|
+ <view class='item right'>代储</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class='costwrap'>
|
|
|
|
+ <view class='item active'>全部</view>
|
|
|
|
+ <view class='item'>粮款</view>
|
|
|
|
+ <view class='item'>非粮款</view>
|
|
|
|
+ <view class='item'>保证金</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class='contractwrap' v-for='(item,index) in contractList'>
|
|
|
|
+ <view class='flex contractwrap-title'>
|
|
|
|
+ <view class='contractNo'>{{item.contractNo}}</view>
|
|
|
|
+ <view v-if='item.status=="已完成"' style='color:#AFB3BF;' class='status'>{{item.status}}</view>
|
|
|
|
+ <view v-if='item.status=="执行中"' style='color:#22C572;' class='status'>{{item.status}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class='flex contractwrap-item'>
|
|
|
|
+ <view class="title">买方</view>
|
|
|
|
+ <view></view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class='flex contractwrap-item'>
|
|
|
|
+ <view class="title">卖方</view>
|
|
|
|
+ <view></view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class='flex contractwrap-item'>
|
|
|
|
+ <view class="title">合同重量(吨)</view>
|
|
|
|
+ <view></view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class='flex contractwrap-item'>
|
|
|
|
+ <view class="title">合同单价(元/吨)</view>
|
|
|
|
+ <view></view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class='flex contractwrap-item'>
|
|
|
|
+ <view class="title">合同总价(元)</view>
|
|
|
|
+ <view></view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class='flex contractwrap-item'>
|
|
|
|
+ <view class="title">已付款(元)</view>
|
|
|
|
+ <view></view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class='flex contractwrap-item'>
|
|
|
|
+ <view class="title">已开发票(元)</view>
|
|
|
|
+ <view></view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class='flex contractwrap-item'>
|
|
|
|
+ <view class="title">签订日期</view>
|
|
|
|
+ <view></view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ contractList:[
|
|
|
|
+ {status:'已完成',
|
|
|
|
+ contractNo:'HT39854455',
|
|
|
|
+ costtype:'水费',
|
|
|
|
+ costmoney:'121111',
|
|
|
|
+ warehouse:'金信库',
|
|
|
|
+ name:'张三',
|
|
|
|
+ date:'2022.11.22 15:32:21'},
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang='scss' scoped>
|
|
|
|
+.contracttypewrap{
|
|
|
|
+ display:flex;
|
|
|
|
+ background:#fff;
|
|
|
|
+ font-size:32rpx;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ width:93%;
|
|
|
|
+ .item{
|
|
|
|
+ padding:20rpx;
|
|
|
|
+ color:#7A7A7A;
|
|
|
|
+ width:33.3333%;
|
|
|
|
+ text-align:center;
|
|
|
|
+ }
|
|
|
|
+ .item.left{
|
|
|
|
+ text-align:left;
|
|
|
|
+ }
|
|
|
|
+ .item.right{
|
|
|
|
+ text-align:right;
|
|
|
|
+ }
|
|
|
|
+ .item.active{
|
|
|
|
+ color:#262626;
|
|
|
|
+ font-weight:600;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.costwrap{
|
|
|
|
+ display:flex;
|
|
|
|
+ margin:10rpx 34rpx;
|
|
|
|
+ .item{
|
|
|
|
+ padding:10rpx 20rpx;
|
|
|
|
+ color:#333333;
|
|
|
|
+ text-align:center;
|
|
|
|
+ border-radius:30rpx;
|
|
|
|
+ }
|
|
|
|
+ .item.active{
|
|
|
|
+ color:#fff;
|
|
|
|
+ background:#22C572;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.contractwrap{
|
|
|
|
+ background:#fff;
|
|
|
|
+ margin:20rpx;
|
|
|
|
+ padding:20rpx;
|
|
|
|
+ border-radius:20rpx;
|
|
|
|
+ .contractwrap-title{
|
|
|
|
+ font-size:28rpx;
|
|
|
|
+ padding:20rpx;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ border-bottom:2rpx solid #eee;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .contractwrap-item{
|
|
|
|
+ display:flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding:10rpx 20rpx;
|
|
|
|
+ font-size:28rpx;
|
|
|
|
+ .title{
|
|
|
|
+ font-size:24rpx;
|
|
|
|
+ color:#8F8F8F;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.search{
|
|
|
|
+ width:100vw;
|
|
|
|
+ background:#fff;
|
|
|
|
+}
|
|
|
|
+.u-search{
|
|
|
|
+ width:94%;
|
|
|
|
+ margin:0 auto !important;
|
|
|
|
+}
|
|
|
|
+</style>
|