hls_crm/pages/index/groupCompany/chargelist/chargelist.vue

192 lines
4.2 KiB
Vue

<template>
<view class="cust_detail">
<view class="cust_item_con" v-for="(item,index1) in cost_list" :key="index1"
@click.stop="toCostDetail(item.id)">
<view class="con_info">
<view style="font-weight: 600;">{{item.consume_type}}</view>
<view class="c_time">{{item.consume_time}}</view>
</view>
<view class="con_center">
<view>消费金额:</view>
<view class="con_money">&yen; {{item.money}}</view>
</view>
<view style="color: #999;font-size: 32rpx;margin:0 0 24rpx;">备注:{{item.remark}}</view>
<view class="con_foot" @click.stop.prevent>
<view class="c_f_top">
附件:
</view>
<scroll-view scroll-x style="width: 100%; white-space: nowrap;margin:24rpx 0" >
<view
class="box" v-for="(ind,index2) in item.file_text" :key="index2"
@click.stop="toPrevimg(item.file_text,index2)"
style="display: inline-block;margin-right:50rpx; width: 150rpx; height: 150rpx;">
<image
:src=" ind? ind: BASE_IMG_URL+'headImg.png'"
class="headimg"
style="width: 150rpx;height: 150rpx;"
mode="scaleToFill"></image>
</view>
</scroll-view>
</view>
<view class="status" v-if="item.check_status == 0"><span>待审核</span></view>
<view class="status" v-if="item.check_status == 1"><span>审核中</span></view>
<view class="status" v-if="item.check_status == 2"><span>审核通过</span></view>
<view class="status" v-if="item.check_status == 3"><span>审核未通过</span></view>
<view class="status" v-if="item.check_status == 4"><span>撤销</span></view>
</view>
<view style="height: 200rpx;"></view>
<u-empty v-if="cost_list.length == 0" text="暂无更多"></u-empty>
<view class="icon_creat" v-if="type == 1" @click="addCost">
<image :src="BASE_IMG_URL+'1.png'" mode="scaleToFill"></image>
</view>
</view>
</template>
<script>
import {
netCostList
} from '@/api/kehu.js'
import {
netGetSignList
} from '@/api/index.js'
import {
BASE_IMG_URL
} from '@/util/api.js'
export default {
data() {
return {
BASE_IMG_URL: BASE_IMG_URL,
cost_list: [], //费用列表
id: '',
type:1, //1普通客户 2公海客户
}
},
onLoad(options) {
this.id = options.id
this.type = options.type
},
onShow() {
//费用列表
this.getCostlist()
},
methods: {
//费用 列表
getCostlist() {
netCostList({
customer_id: this.id
}).then(res => {
this.cost_list = res.data.data
})
},
//新建费用
addCost() {
uni.navigateTo({
url: '/pages/index/groupCompany/cost/addCost?kehuid=' + this.id
})
},
//费用 详情
toCostDetail(id) {
uni.navigateTo({
url: '/pages/index/groupCompany/cost/costDetail?id=' + id
})
},
//查看图
toPrevimg(arr,index){
uni.previewImage({
current:index,
urls:arr
})
}
}
}
</script>
<style lang="scss" scoped>
.imgbox{
align-items: center;
margin-top:15rpx;
.box{
width: 150rpx;
height: 150rpx;
margin-left: 30rpx;
background: #ededed;
float: left;
}
image{
margin: auto 0;
}
}
.cust_detail{
.cust_item_con{
background: #fff;
margin-top: 20rpx;
padding:30rpx 24rpx 30rpx 45rpx;
.con_info{
display: flex;
justify-content: space-between;
font-size: 34rpx;
color: #333;
.c_time{
margin: 10rpx;
font-size: 28rpx;
color: #999;
}
}
.con_center{
display: flex;
justify-content: space-between;
font-size: 32rpx;
height: 80rpx;
line-height: 80rpx;
color:#999999;
.con_money{
color: $uni-text-color;
font-size: 40rpx;
font-weight: 600;
}
}
.con_foot{
.c_f_top{
font-size: 32rpx;
color: #999;
}
.c_f_foot{
display: flex;
justify-content: space-around;
.box{
width: 150rpx;
height: 150rpx;
background: #ededed;
}
image{
margin: auto 0;
}
}
}
.status{
span{
font-size: 26rpx;
color: $uni-text-color;
padding: 5rpx 12rpx;
background: $uni-text-color-opcity;
}
}
}
}
#btn {
font-size: 26rpx;
color: #fff;
text-align: center;
line-height: 88rpx;
width: 500rpx;
height: 88rpx;
background: $uni-text-color;
border-radius: 29rpx;
margin: 30rpx auto;
}
</style>