<template>
<view>
<view class="keyword-view clearfix">
<u-search
disabled
@custom="clearValue"
@search="searchConfirm()"
action-text="重置"
:clearabled="true"
placeholder="请选择客户"
v-model="customer_name"
@click="goPage('/pagesT/customer/selCustomer')"
></u-search>
</view>
<view class="logs-ul">
<view class="look-li" v-for="(item, index) in order_list" :key="index">
<view class="goods-name">{{ item.goodsName }}</view>
<view class="other-info clearfix">
<view class="float_left"><text class="label">客户</text>{{ item.customerName }}</view>
<view class="float_right" @click="callPhone(item.mobile)"><u-icon name="ziyuan" custom-prefix="custom-icon" :label="item.mobile" label-color="#4076D6"></u-icon></view>
</view>
<view class="other-info">
<text class="label">时间</text>
{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
</view>
</view>
<!-- <view class="logs-li clearfix" v-for="(item, index) in order_list" :key="index">
<view class="clearfix logs-goods">
<view class="float_left goods-img">
<image src="../../static/Tar_bar_slices/goods-fill.png" mode="aspectFill"></image>
</view>
<view class="float_left goods-info">
<view class="goods-name ellipsis">{{ item.goodsName }}</view>
<view class="other-info">
<view class="info-li">购买价格：89</view>
<view class="info-li">购买数量：51</view>
</view>
<view class="look-time-out clearfix">
<view class="price float_left">¥117</view>
<view class="look-time float_right">
<view class="triangle"><text>浏览</text></view>
<view class="second">21s</view>
</view>
</view>
</view>
</view>
<view class="bottom clearfix">
<view class="float_left">
<view class="cutomer ellipsis">{{ item.customerName }}</view>
<view class="date">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
</view>
<view class="float_right">
<view class="btn-li">查看订单</view>
<view class="btn-li">联系客户</view>
</view>
</view>
</view> -->
<u-loadmore :status="load_status" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
load_status: 'nomore',
page: 1,
pageSize: 10,
total: 0,
order_list: [],
keyword: '',
customerData: '',
customer_name: '',
customer_id: ''
};
},
watch: {
customerData(val) {
if (val) {
this.customer_name = val.name;
this.customer_id = val.id;
this.page = 1;
this.getAllCustomerVisitsLog();
}
}
},
onLoad() {
this.getAllCustomerVisitsLog();
},
onPullDownRefresh() {
this.page = 1;
this.getAllCustomerVisitsLog();
},
onReachBottom() {
if (this.total / this.pageSize > this.page) {
this.page += 1;
this.getAllCustomerVisitsLog();
}
},
methods: {
clearValue() {
this.customer_name = '';
this.customer_id = 0;
this.page = 1;
this.getAllCustomerVisitsLog();
},
searchConfirm() {
this.page = 1;
this.getAllCustomerVisitsLog();
},
getAllCustomerVisitsLog() {
let params = {
page: this.page,
pageSize: this.pageSize,
customerId: this.customer_id
};
this.load_status = 'loading';
this.$u.api.getAllCustomerVisitsLog(params).then(res => {
if (this.page === 1) {
this.order_list = res.data;
} else {
this.order_list = this.order_list.concat(res.data);
}
this.load_status = this.$utils.loadStatus(this.page, this.pageSize, res.pageTotal);
this.total = res.pageTotal;
// console.log(this.order_list);
});
}
}
};
</script>
<style lang="scss" scoped>
.keyword-view {
position: fixed;
width: 100%;
top: 0;
left: 0;
padding: 20rpx 24rpx;
background-color: #ffffff;
z-index: 9;
.float_left {
width: 640rpx;
}
.float_right {
line-height: 64rpx;
width: 50rpx;
text-align: center;
color: #666666;
}
}
.logs-ul {
padding-top: 100rpx;
.logs-li {
width: 710rpx;
margin: 20rpx auto;
background-color: #ffffff;
border-radius: 20rpx;
padding: 24rpx;
.goods-img {
position: relative;
width: 120rpx;
height: 120rpx;
border-radius: 20rpx;
overflow: hidden;
margin-right: 20rpx;
border: 1px solid #f5f5f5;
image {
width: 100%;
height: 100%;
display: block;
}
.buy-status {
position: absolute;
line-height: 30rpx;
height: 30rpx;
font-size: 20rpx;
text-align: center;
width: 100%;
left: 0;
bottom: 0;
background-color: $uni-color-success;
color: #ffffff;
&.no-buy {
background-color: $uni-color-error;
}
}
}
.goods-info {
width: 520rpx;
position: relative;
.goods-name {
font-weight: bold;
}
.date-time {
font-size: 22rpx;
}
.other-info {
padding-top: 10rpx;
display: flex;
flex-wrap: wrap;
font-size: 22rpx;
.info-li {
width: 50%;
display: inline-block;
color: #6c6c6c;
}
}
}
.look-time-out {
.price {
color: $uni-color-error;
}
.look-time {
color: #ffffff;
font-size: 18rpx;
width: 150rpx;
height: 40rpx;
line-height: 40rpx;
overflow: hidden;
background-color: $uni-color-warning;
position: relative;
border-radius: 6rpx;
.triangle {
text-align: center;
position: absolute;
width: 76rpx;
height: 0;
border-bottom: 40rpx solid #000000;
border-left: 10px solid transparent;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
text {
display: block;
transform: rotate(180deg);
}
}
.second {
font-size: 22rpx;
position: absolute;
right: 0;
width: 74rpx;
height: 40rpx;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
}
}
}
.bottom {
padding-top: 24rpx;
border-top: 1px solid #eeeeee;
margin-top: 24rpx;
.float_left {
width: 320rpx;
.cutomer {
font-weight: bold;
font-size: 26rpx;
padding-bottom: 6rpx;
}
.date {
font-size: 22rpx;
color: #666666;
}
}
.float_right {
.btn-li {
display: inline-block;
border-radius: 10rpx;
margin-left: 16rpx;
width: 140rpx;
line-height: 54rpx;
font-size: 24rpx;
text-align: center;
border: 1px solid $uni-color-primary;
color: $uni-color-primary;
&:last-child {
background-color: $uni-color-primary;
color: #ffffff;
}
}
}
}
}
.look-li {
width: 710rpx;
margin: 24rpx auto;
background-color: #ffffff;
padding: 24rpx;
border-radius: 8rpx;
.goods-name {
color: #2d405e;
font-weight: 600;
font-size: 30rpx;
padding-bottom: 20rpx;
}
.other-info {
line-height: 40rpx;
margin-top: 10rpx;
.label {
width: 82rpx;
font-weight: 400;
color: #b8c0c8;
margin-right: 30rpx;
}
}
}
</style>