Skip to content

S
self-support
Commit 6d672f5d authored by Facius's avatar Facius
Browse files
Options

详情页面拆出来

parent 0bf75909
Hide whitespace changes
Inline Side-by-side
Showing with 243 additions and 227 deletions
src/components/order/detail.vue 0 → 100644
View file @ 6d672f5d
<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>
<!-- <u-read-more ref="uReadMore" :show-height="40" :shadowStyle="{paddingTop: '0rpx',marginTop: '0rpx'}" close-text="查看更多" open-text="点击收起" toggle color="#2272FF" font-size="26"> -->
<view v-if="readMore" @click="$emit('update:readMore', true)" 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="$emit('update:readMore', 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
}
},
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)
}
},
}
}
</script>
<style lang="scss" scoped>
.card {
background-color: #FFFFFF;
margin-bottom: 20rpx;
padding: 30rpx 30rpx 0 30rpx;
border-radius: 6px;
}
.base-item {
padding-bottom: 6rpx;
.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;
}
}
</style>
src/pages/order/detail.vue
View file @ 6d672f5d
......@@ -7,70 +7,7 @@
</view>
<view class="content">
<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>
<!-- <u-read-more ref="uReadMore" :show-height="40" :shadowStyle="{paddingTop: '0rpx',marginTop: '0rpx'}" close-text="查看更多" open-text="点击收起" toggle color="#2272FF" font-size="26"> -->
<view v-if="readMore" @click="readMore = 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="order-cell between-cell">
<!-- <view class="order-cell between-cell">
<text>备注：</text>
<text>{{ order.serviceContent }}</text>
</view> -->
<view class="read-more-toggle">
<u-icon name="arrow-up"></u-icon>
<text class="read-more-text" @click="readMore = true">点击收起</text>
</view>
</view>
<!-- </u-read-more> -->
<Detail :order="order"></Detail>
</view>
<!-- 从我的页面进来显示计算信息 -->
<view v-if="isFromMine" class="settlement-view">
......@@ -95,7 +32,7 @@
<appoint-time :dateList="dateList" :timeList="timeList" @dateChange="dateChange" @timeChange="timeChange" @weekChange="weekChange"></appoint-time>
</view>
<view class="card record-item">
<Record :orderRecords="orderRecords"></Record>
<Record :orderRecords="orderRecords" :readMore.sync="readMore"></Record>
</view>
</view>
</view>
......@@ -164,6 +101,7 @@
import baseFile from '@/components/upload/index'
import Customer from "@/components/mine/customer.vue"
import Record from "@/components/order/performanceRecord.vue"
import Detail from "@/components/order/detail.vue"
let now = new Date(new Date().toLocaleDateString()).getTime();
export default {
components: {
......@@ -171,7 +109,8 @@
'take-photo': takePhoto,
// PopView,
Customer,
Record
Record,
Detail
},
mixins: [baseFile],
data() {
......@@ -206,7 +145,7 @@
// 渐变色
},
visible: false,
orderId: 11880333,
orderId: null,
order: {},
allowRejection: false, // 允许拒单
allowFeedback: false, // 允许过程反馈
......@@ -289,33 +228,9 @@
let btnClass = "appoint-btn"
return btnClass
},
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
}
},
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');
}
});
}
},
updateLocation(){
let self = this
wx.startLocationUpdate({
......@@ -348,23 +263,6 @@
console.log("closeLocationChange")
wx.offLocationChange(this._locationChangeFn);
},
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)
}
},
handleClickRight(active) {
this.scenePhoto ? this.scenePhotoClick() : this.take()
},
......@@ -897,124 +795,6 @@
border-radius: 6px;
}
.base-item {
padding-bottom: 6rpx;
.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-item {
padding-bottom: 6rpx;
.top-item {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
.title {
height: 32rpx;
font-size: 32rpx;
font-weight: bold;
color: #333333;
line-height: 36rpx;
}
}
}
.record-item {
margin-bottom: 0rpx;
}
......
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