138 lines
4.5 KiB
Vue
138 lines
4.5 KiB
Vue
<template>
|
||
<view class="card cardBorder" @tap='goDetail' :style="{boxShadow:item.DealMark===0?'0 0px 6rpx #f9b297':''}">
|
||
<!-- 卡片第一行数据 -->
|
||
<view class="uni-flex jc-between">
|
||
<!-- 左侧 -->
|
||
<!-- 商品名称 -->
|
||
<p class="contentName">{{item.BUSINESSPROJECT_NAME}}</p>
|
||
<!-- 右侧 -->
|
||
<!-- 有效状态 -->
|
||
<p v-if="item.DealMark===0" class="other-coast">{{item.PROJECTWARNING_STATE===1000?'待切换':item.PROJECTWARNING_STATE===2000?'审核中':item.PROJECTWARNING_STATE===9000?'已切换':item.PROJECTWARNING_STATE===9999?'暂不切换':''}}</p>
|
||
<p v-else class="other-coastGray">{{item.PROJECTWARNING_STATE===1000?'待切换':item.PROJECTWARNING_STATE===2000?'审核中':item.PROJECTWARNING_STATE===9000?'已切换':item.PROJECTWARNING_STATE===9999?'暂不切换':''}}</p>
|
||
<!-- <p v-else :class="item.PROJECTWARNING_STATE===9999 || item.PROJECTWARNING_STATE===9000?'other-coast other-coastGray':'other-coast'">{{item.PROJECTWARNING_STATE===1000?'待切换':item.PROJECTWARNING_STATE===2000?'审核中':item.PROJECTWARNING_STATE===9000?'已切换':item.PROJECTWARNING_STATE===9999?'暂不切换':''}}</p>-->
|
||
</view>
|
||
<!-- 卡片第一行角标 -->
|
||
<view class="content-index" style="background-color:#FB8B56">{{i+1}}</view>
|
||
<!-- 卡片第二行数据 -->
|
||
<view style="line-height: 1;">
|
||
<!-- 服务区名称 -->
|
||
<p class="content-type-text">{{item.SERVERPART_NAME}}</p>
|
||
</view>
|
||
<!-- 卡片第三行数据 -->
|
||
<view class="uni-flex content-box-cashpay">
|
||
<!-- 中间 -->
|
||
<!-- 资质到期时间 -->
|
||
<p class="titleStyle" >
|
||
<!-- 先判断是否有切换时间,如果有直接显示已切换,没有切换时间再判断是否有天数 有就显示天数没有就显示完成保底 -->
|
||
<text v-if="item.SWITCH_DATE">
|
||
<text style="font-size:18px;line-height:50px;margin:0 4px;color: red;">已切换</text>
|
||
</text>
|
||
<text v-else>
|
||
<text v-if="item.EXPIREDAYS!==0">
|
||
<text style="font-size: 12px;color: orangered;">预计</text>
|
||
<text style="font-size: 28px;line-height: 50px;margin: 0 4px;">{{item.EXPIREDAYS}}</text>
|
||
<text style="font-size: 12px;">天</text>
|
||
</text>
|
||
<text style="font-size:18px;line-height:50px;margin:0 4px;" v-else>完成保底</text>
|
||
</text>
|
||
</p>
|
||
</view>
|
||
<!-- 分割线 -->
|
||
<view class="bb1"></view>
|
||
<!-- 卡片第四行第一项数据 -->
|
||
<!-- 操作人员 -->
|
||
<view class="cellBetweenStyle" >
|
||
<view class="cellLeftStyle">
|
||
<!-- 圆点 -->
|
||
<p class="G-icon A-icon" style="margin: 0 8px 0 5px"></p>
|
||
<span class="content-span">{{item.BUSINESS_TYPE===1000?'合作经营':item.BUSINESS_TYPE===2000?'固定租金':''}}</span>
|
||
</view>
|
||
<!-- 卡片第四行第一项右侧数据 -->
|
||
<!-- CHANG_DATE是SWITCH_DATE不保留时分秒的数据 获取数组的地方加的 -->
|
||
<text class="content-span lh15">{{item.SWITCH_DATE?item.CHANG_DATE:item.WARNING_DATE}}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {//这里存放接收到的父级数据
|
||
item: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
i: {
|
||
type: Number,
|
||
required: true
|
||
}
|
||
},
|
||
data() {//这里存放组件私有数据
|
||
return {
|
||
}
|
||
},
|
||
computed: {},
|
||
methods: {//方法集合
|
||
goDetail() {
|
||
this.$emit('goDetail', this.item)
|
||
},
|
||
dateEmpty(v) {
|
||
return this.$util.cutDate(v, 'YYYY/MM/DD')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<!-- 注意：style样式增加scoped私有属性标记后，组件样式不能在引用的地方进行修改 -->
|
||
<style scoped>
|
||
@import url('/common/css/listUnit.css');
|
||
|
||
.cardBorder {//卡片边框颜色
|
||
box-shadow: 0 0px 6rpx #E2E2E2;
|
||
}
|
||
|
||
.titleStyle {//主信息标签
|
||
margin-right: 10rpx;
|
||
font-size: 36rpx;
|
||
color: #111;
|
||
font-family: Bahnschrift Regular;
|
||
}
|
||
|
||
.typeText {
|
||
padding: 0 10rpx;
|
||
margin-right: 16rpx;
|
||
margin-top: 40rpx;
|
||
position: absolute;
|
||
right: 0rpx;
|
||
}
|
||
|
||
.other-coast {//标签渐变背景色
|
||
color: #D1A271;
|
||
//background: linear-gradient(to top, #EBDDCF, #FCFBF8);
|
||
border-radius: 6rpx;
|
||
font-size: 24rpx;
|
||
padding: 0 10rpx;
|
||
height: 40rpx;
|
||
}
|
||
.other-coastGray{
|
||
background: transparent;
|
||
color: #999999;
|
||
}
|
||
|
||
.cellLeftStyle{//标签左侧对齐
|
||
line-height: 45rpx;
|
||
display: flex;
|
||
flex-wrap : wrap;
|
||
align-items: center; //上下对齐
|
||
justify-content: flex-start; //左侧对齐
|
||
}
|
||
|
||
.cellBetweenStyle {//标签两侧对齐
|
||
line-height: 45rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap : wrap;
|
||
align-items: center; //上下对齐
|
||
justify-content: space-between; //两侧对齐
|
||
}
|
||
</style>
|