123 lines
2.8 KiB
Vue
123 lines
2.8 KiB
Vue
<template>
|
||
<view class="card cardBorder" @tap='goDetail' v-if="item">
|
||
<!-- 卡片第一行数据 -->
|
||
<view class="uni-flex jc-between">
|
||
<!-- 左侧 -->
|
||
<!-- 商品名称 -->
|
||
<p class="contentName">{{item.COMMODITY_NAME}}</p>
|
||
<!-- 右侧 -->
|
||
<!-- 有效状态 -->
|
||
<p class="other-coast">{{state[item.COMMODITY_TEMP_STATE]}}</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">{{item.QUALIFICATION_DATE}}</p>
|
||
</view>
|
||
<!-- 分割线 -->
|
||
<view class="bb1"></view>
|
||
<!-- 卡片第四行第一项数据 -->
|
||
<!-- 操作人员 -->
|
||
<view class="cellBetweenStyle" v-if="item.STAFF_NAME">
|
||
<view class="cellLeftStyle">
|
||
<!-- 圆点 -->
|
||
<p class="G-icon A-icon"></p>
|
||
<span class="content-span">{{item.STAFF_NAME}}</span>
|
||
</view>
|
||
<!-- 卡片第四行第一项右侧数据 -->
|
||
<text class="content-span lh15">{{STATISTICS_DATE}}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {//这里存放接收到的父级数据
|
||
item: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
i: {
|
||
type: Number,
|
||
required: true
|
||
}
|
||
},
|
||
data() {//这里存放组件私有数据
|
||
return {
|
||
state:{
|
||
0:"无效",
|
||
1:"待延期",
|
||
2:"已延期"
|
||
}
|
||
}
|
||
},
|
||
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;
|
||
}
|
||
|
||
.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>
|