123 lines
4.2 KiB
Vue
123 lines
4.2 KiB
Vue
<template>
|
||
<view class="card cardBorder" @tap='goDetail' v-if="item">
|
||
<!-- 卡片第一行数据 -->
|
||
<view class="uni-flex jc-between">
|
||
<!-- 左侧 -->
|
||
<!-- 服务区名称 -->
|
||
<p class="contentName">{{item.SERVERPART_NAME || ''}}</p>
|
||
<!-- 右侧 -->
|
||
<!-- 站点类型 -->
|
||
<text class="typeText">{{item.STATISTICS_TYPE !== null ?
|
||
serverpartsiteType[item.STATISTICS_TYPE] : ''}}</text>
|
||
</view>
|
||
<!-- 卡片第一行角标 -->
|
||
<view class="content-index" style="background-color:#FB8B56">{{i+1}}</view>
|
||
<!-- 卡片第二行数据 -->
|
||
<view class="uni-flex jc-between">
|
||
<!-- 左侧 -->
|
||
<!-- 片区名称 -->
|
||
<text class="content-type-text">{{item.SPREGIONTYPE_NAME || ''}}</text>
|
||
</view>
|
||
<!-- 卡片第三行数据 -->
|
||
<view class="uni-flex content-box-cashpay">
|
||
<!-- 中间 -->
|
||
<!-- 实收金额 -->
|
||
<text class="content-price">{{item.CASHPAY !== null ?
|
||
item.CASHPAY : ''}}</text>
|
||
<text style="font-size: 24upx;">元</text>
|
||
<!-- 右侧 -->
|
||
<!-- 现金 -->
|
||
<text class="other-coast">{{item.CASH !== null ?
|
||
item.CASH : ''}}</text>
|
||
</view>
|
||
<!-- 分割线 -->
|
||
<view class="bb1"></view>
|
||
<!-- 卡片第四行顶部数据 -->
|
||
<view class="uni-flex jc-between align-center" v-if="item.TICKETCOUNT">
|
||
<!-- 左侧 -->
|
||
<view class="uni-flex align-top">
|
||
<!-- 客单数量 -->
|
||
<!-- 圆点 -->
|
||
<text class="G-icon A-icon"></text>
|
||
<span class="content-span">客单数量：{{item.TICKETCOUNT !== null ?
|
||
item.TICKETCOUNT : ''}}</span>
|
||
</view>
|
||
</view>
|
||
<!-- 卡片第四行中间数据 -->
|
||
<view class="uni-flex jc-between" v-if="item.TOTALCOUNT">
|
||
<!-- 左侧 -->
|
||
<view class="uni-flex align-top">
|
||
<!-- 销售总数 -->
|
||
<!-- 圆点 -->
|
||
<p class="B-icon A-icon"></p>
|
||
<span class="content-span">销售总数：{{item.TOTALCOUNT !== null ?
|
||
item.TOTALCOUNT : ''}}</span>
|
||
</view>
|
||
</view>
|
||
<!-- 卡片第四行底部数据 -->
|
||
<view class="uni-flex jc-between" v-if="item.DIFFERENT_PRICE">
|
||
<!-- 左侧 -->
|
||
<view class="uni-flex align-top">
|
||
<!-- 长短款 -->
|
||
<!-- 圆点 -->
|
||
<p class="G-icon A-icon"></p>
|
||
<span class="content-span">长短款：{{item.DIFFERENT_PRICE !== null ?
|
||
item.DIFFERENT_PRICE : ''}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
props: {//这里存放接收到的父级数据
|
||
item: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
i: {
|
||
type: Number,
|
||
required: true
|
||
},
|
||
serverpartsiteType: {
|
||
type: Object,
|
||
required: false
|
||
},
|
||
},
|
||
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;
|
||
}
|
||
.content-box-cashpay {
|
||
position: relative;
|
||
}
|
||
.other-coast {//标签渐变背景色
|
||
color: #D1A271;
|
||
background: linear-gradient(to top, #EBDDCF, #FCFBF8);
|
||
border-radius: 6rpx;
|
||
font-size: 20rpx;
|
||
padding: 0 10rpx;
|
||
margin-left: 16rpx;
|
||
margin-top: 3rpx;
|
||
position: absolute;
|
||
right: 0rpx;
|
||
bottom: 30rpx;
|
||
}
|
||
</style>
|