Commit 143c9416 authored by Damon's avatar Damon

Merge branch 'dev' of https://git.banshouhui.com/lijundan/self-support into dev

parents 7c393795 cf273f90
<template>
<view class="card base-item">
<view class="top-item">
<view class="left">
<view :class="['tag', {'active': order.orderServiceType == '安装'}]">{{ order.orderServiceType }}</view>
<text class="title">{{ order.categoryName }}</text>
</view>
<view class="right">{{ order.orderBusinessTypeText }}</view>
</view>
<view class="order-cell">
<text>工单编号:</text>
<text>{{ order.orderNumber }}</text>
</view>
<view class="order-cell">
<text>合作厂商:</text>
<text>{{ order.partnerCompanyName }}</text>
</view>
<view class="order-cell between-cell">
<view class="left">
<text>客户信息:</text>
<text>{{ order.contactName }}</text>
</view>
<image style="width: 84rpx;height: 56rpx;" :src="phoneIcon" @click="phoneToCustomer(order.contactPhone)">
</image>
</view>
<view class="order-cell">
<text>联系方式:</text>
<text>{{ order.contactPhone }}</text>
</view>
<view class="between-cell address-cell">
<view class="left-address">
<u-icon name="map" size="28"></u-icon>
<text class="address-txt">{{ formatAddress }}</text>
</view>
<image style="width: 84rpx;height: 56rpx;" :src="navigationIcon"
@click="openLocation(order.contactAddress)"></image>
</view>
<view v-if="readMore" @click="handleClick(false)" class="read-more-toggle">
<u-icon name="arrow-down"></u-icon>
<text class="read-more-text">查看更多</text>
</view>
<view v-else class="order-item-more">
<view class="line-view"></view>
<view class="order-cell between-cell">
<text class="cell-title">品牌:</text>
<text>{{ order.brandName }}</text>
</view>
<view class="order-cell between-cell">
<text class="cell-title">数量:</text>
<text>x{{ order.orderProductCount }}</text>
</view>
<view class="order-cell between-cell">
<text class="cell-title">充电桩信息:</text>
<text>{{ order.serviceContent }}</text>
</view>
<view class="read-more-toggle" @click="handleClick(true)">
<u-icon name="arrow-up"></u-icon>
<text class="read-more-text">点击收起</text>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
// 履约记录
order: {
type: Object,
default () {
return {}
}
},
readMore: {
type: Boolean,
default: true
}
},
data() {
return {}
},
computed: {
formatAddress() {
let self = this
let address = ""
if (self.order) {
address = self.order.contactProvinceText || ""
address += self.order.contactCityText || ""
address += self.order.contactCommunityText || ""
address += self.order.contactStreetText || ""
address += self.order.contactAddress || ""
}
return address
},
phoneIcon() {
//self-support/icon/dianhua-0@2x.png
if (this.isAllowDianhuaAndDaohang) {
return process.uniEnv.qn_base_url + 'dianhua.png'
} else {
return process.uniEnv.qn_base_url + 'dianhua-d.png'
}
},
navigationIcon() {
//self-support/icon/daohang-0@2x.png
if (this.isAllowDianhuaAndDaohang) {
return process.uniEnv.qn_base_url + 'daohang.png'
} else {
return process.uniEnv.qn_base_url + 'daohang-d.png'
}
},
},
methods: {
openLocation(address) {
if (this.isAllowDianhuaAndDaohang) {
const latitude = this.order.contactAddressLatitud //res.latitude;
const longitude = this.order.contactAddressLongitud //res.longitude;
uni.openLocation({
latitude: Number(latitude),
longitude: Number(longitude),
success: function() {
console.log('success');
}
});
}
},
phoneToCustomer(phone) { // 联系客户
if (this.isAllowDianhuaAndDaohang) {
uni.makePhoneCall({
phoneNumber: phone, //仅为示例
complete() {}
});
this.contactTime()
}
},
contactTime() {
let self = this
var data = {}
if (this.submitType === "workerAppointment") {
self.$u.api.contactTime(data, this.order.orderId)
}
},
handleClick(val) {
this.$emit('update:readMore', val)
}
}
}
</script>
<style lang="scss" scoped>
.base-item {
padding-bottom: 6rpx;
background-color: #FFFFFF;
margin-bottom: 20rpx;
padding: 30rpx 30rpx 0 30rpx;
border-radius: 6px;
.top-item {
display: flex;
justify-content: space-between;
margin-bottom: 30rpx;
.left {
display: flex;
align-items: center;
.tag {
text-align: center;
width: 84rpx;
height: 40rpx;
border-radius: 8rpx;
font-size: 22rpx;
font-weight: 500;
color: #FFFFFF;
line-height: 40rpx;
background-image: linear-gradient(to right, #FF930D, #FFC174);
&.active {
background-image: linear-gradient(to right, #2272FF, #47ABFF);
}
}
.title {
margin-left: 20rpx;
height: 36rpx;
font-size: 36rpx;
font-weight: bold;
color: #333333;
line-height: 36rpx;
}
}
.right {
text-align: center;
width: 100rpx;
height: 40rpx;
background: #F4F5F7;
border-radius: 22rpx;
font-size: 22rpx;
font-weight: 400;
color: #333333;
line-height: 40rpx;
}
}
.address-cell {
font-size: 24rpx;
font-weight: 400;
color: #333333;
line-height: 24rpx;
margin-top: 20rpx;
margin-bottom: 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
.left-address {
display: flex;
align-items: flex-start;
.address-txt {
line-height: 30rpx;
margin-left: 8rpx;
margin-right: 30rpx;
}
}
}
}
.read-more-toggle {
text-align: center;
color: #2272FF;
font-size: 26rpx;
margin-top: 30rpx;
padding-bottom: 30rpx;
}
.read-more-text {
padding-left: 8rpx;
}
.order-item-more {
font-size: 26rpx;
color: #333333;
text-align: right;
.line-view {
background-color: #F4F5F7;
height: 2rpx;
margin-bottom: 20rpx;
}
}
.order-cell {
font-size: 26rpx;
font-weight: 400;
color: #333333;
line-height: 48rpx;
margin-bottom: 10rpx;
}
.between-cell {
display: flex;
justify-content: space-between;
align-items: center;
}
.display-cell {
display: flex;
}
.cell-title {
text-align: left;
flex-shrink: 0;
}
</style>
<template>
<view class="order-record-view">
<view class="top-item">
<text>履约记录</text>
</view>
<view v-if="orderRecords.length == 0" class="no-record-view">当前暂无履约记录</view>
<view v-else class="record-list-view">
<view class="record-right-view">
<view class="dashed-line-view"></view>
<view class="order-list">
<view v-for="(record,index) in shwoOrderRecords" :key="record.operationContent" :class="['order-cell', {'first': index == 0}]">
<view class="node-view">
<view class="node-border-view">
<view class="node-middle-view"></view>
</view>
</view>
<view class="right-view">
<view class="line-view-top">
<text>{{$u.timeFormat(record.operationDatetime, 'yyyy.mm.dd hh:MM:ss')}} </text>
<text style="color: red;">{{record.overTime?'超时':''}}{{record.exception?'异常':''}}</text>
<text style="color: #2272FF;"
v-show="record.operationType==='报备' || record.operationType==='改约'">跟进</text>
</view>
<view class="line-view-item">
<view>
<text>{{record.operationTypeText}}</text>
</view>
<view class="item-operation-view"
v-show="record.operationType==='报备' || record.operationType==='预约'|| record.operationType==='改约'">
<text>{{record.operationType==='报备' ? '下次联系时间:' : record.operationType==='改约'?'改约时间:': ''}}</text>
<text
style="color: #2272FF;word-break: break-all;">{{record.orderRecordRemark}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-if="orderRecords && orderRecords.length > showLenght" @click="readMoreRecord = !readMoreRecord">
<view v-if="readMoreRecord" class="read-more-toggle">
<u-icon name="arrow-down"></u-icon>
<text class="read-more-text">查看更多</text>
</view>
<view v-else class="read-more-toggle">
<u-icon name="arrow-up"></u-icon>
<text class="read-more-text">点击收起</text>
</view>
</view>
<view v-else style="height: 10rpx;"></view>
</view>
</view>
</template>
<script>
export default {
props: {
// 履约记录
orderRecords: {
type: Array,
default () {
return []
}
},
},
data() {
return {
readMoreRecord: true,
showLenght: 5,
}
},
computed: {
shwoOrderRecords() {
if (this.readMoreRecord && this.orderRecords && this.orderRecords.length > 0) {
return this.orderRecords.slice(0, this.showLenght)
} else {
return this.orderRecords
}
},
}
}
</script>
<style lang="scss" scoped>
.order-record-view {
.top-item {
font-size: 32rpx;
color: #333333;
font-weight: bold;
margin-bottom: 20rpx;
}
.no-record-view {
font-size: 26rpx;
color: #333333;
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.record-list-view {
position: relative;
.record-right-view {
position: relative;
display: flex;
justify-content: space-between;
.dashed-line-view {
position: absolute;
width: 2rpx;
border-left: 1px dashed #2272FF;
height: 100%;
top: 14rpx;
left: 11rpx;
}
.order-list {
width: 100%;
.order-cell {
margin-top: 50rpx;
display: flex;
&.first {
margin-top: 0;
}
.node-view {
margin-right: 18rpx;
flex-shrink: 0;
margin-top: 8rpx;
.node-border-view {
border: 2rpx solid #2272FF;
border-radius: 11rpx;
width: 22rpx;
height: 22rpx;
display: flex;
align-items: center;
justify-content: center;
.node-middle-view {
width: 10rpx;
height: 10rpx;
background-color: #2272FF;
border-radius: 5rpx;
}
}
}
.right-view {
width: 100%;
.line-view-top {
display: flex;
align-items: center;
justify-content: space-between;
color: #333333;
font-size: 28rpx;
}
.line-view-item {
color: #666666;
font-size: 26rpx;
margin-top: 10rpx;
.item-operation-view {
margin-top: 20rpx;
}
}
}
}
}
}
}
.read-more-toggle {
text-align: center;
color: #2272FF;
font-size: 26rpx;
margin-top: 30rpx;
padding-bottom: 30rpx;
}
.read-more-text {
padding-left: 8rpx;
}
.order-item-more {
font-size: 26rpx;
color: #333333;
text-align: right;
.line-view {
background-color: #F4F5F7;
height: 2rpx;
margin-bottom: 20rpx;
}
}
}
</style>
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment