Commit 439a8862 authored by Facius's avatar Facius

feat: 【前台】修改扳手会工单编号、厂商编号名称及位置

parent 9a33ac50
<template> <template>
<view class="card base-item"> <view class="card base-item">
<view class="top-item"> <view class="top-item">
<view class="left"> <view class="left">
<view :class="['tag', {'active': order.orderServiceType == '安装'}]">{{ order.orderServiceType }}</view> <view :class="['tag', { active: order.orderServiceType == '安装' }]">{{
<text class="title">{{ order.categoryName }}</text> order.orderServiceType
</view> }}</view>
<view class="right">{{ order.orderBusinessTypeText }}</view> <text class="title">{{ order.categoryName }}</text>
</view> </view>
<view class="order-cell"> <view class="right">{{ order.orderBusinessTypeText }}</view>
<text>工单编号:</text> </view>
<text @longpress="handleLongpress(order.orderNumber)">{{ order.orderNumber }}</text> <view class="order-cell">
</view> <text>订单编号:</text>
<view class="order-cell"> <text @longpress="handleLongpress(order.partnerSerialNumber)">{{
<text>合作厂商:</text> order.partnerSerialNumber
<text>{{ order.partnerCompanyName }}</text> }}</text>
</view> </view>
<view class="order-cell"> <view class="order-cell">
<text>厂商编号:</text> <text>合作厂商:</text>
<text>{{ order.partnerSerialNumber }}</text> <text>{{ order.partnerCompanyName }}</text>
</view> </view>
<view class="order-cell between-cell"> <view class="order-cell between-cell">
<view class="left"> <view class="left">
<text>客户信息:</text> <text>客户信息:</text>
<text>{{ order.contactName }}</text> <text>{{ order.contactName }}</text>
</view> </view>
<image v-if="showOperate" style="width: 84rpx;height: 56rpx;" :src="phoneIcon" <image
@click="phoneToCustomer(order.contactPhone)"> v-if="showOperate"
</image> style="width: 84rpx;height: 56rpx;"
</view> :src="phoneIcon"
<view class="order-cell"> @click="phoneToCustomer(order.contactPhone)"
<text>联系方式:</text> >
<text>{{ order.contactPhone }}</text> </image>
</view> </view>
<view class="between-cell address-cell"> <view class="order-cell">
<view class="left-address"> <text>联系方式:</text>
<u-icon name="map" size="28"></u-icon> <text>{{ order.contactPhone }}</text>
<text class="address-txt">{{ formatAddress }}</text> </view>
</view> <view class="order-cell">
<image v-if="showOperate" style="width: 84rpx;height: 56rpx;" :src="navigationIcon" <text>扳手会工单:</text>
@click="openLocation(order.contactAddress)"></image> <text>{{ order.orderNumber }}</text>
</view> </view>
<view v-if="readMore" @click="handleClick(false)" class="read-more-toggle"> <view class="between-cell address-cell">
<u-icon name="arrow-down"></u-icon> <view class="left-address">
<text class="read-more-text">查看更多</text> <u-icon name="map" size="28"></u-icon>
</view> <text class="address-txt">{{ formatAddress }}</text>
<view v-else class="order-item-more"> </view>
<view class="line-view"></view> <image
<view class="order-cell between-cell"> v-if="showOperate"
<text class="cell-title">品牌:</text> style="width: 84rpx;height: 56rpx;"
<text>{{ order.brandName }}</text> :src="navigationIcon"
</view> @click="openLocation(order.contactAddress)"
<view class="order-cell between-cell"> ></image>
<text class="cell-title">数量:</text> </view>
<text>x{{ order.orderProductCount }}</text> <view v-if="readMore" @click="handleClick(false)" class="read-more-toggle">
</view> <u-icon name="arrow-down"></u-icon>
<view class="order-cell between-cell"> <text class="read-more-text">查看更多</text>
<text class="cell-title">充电桩信息:</text> </view>
<text>{{ order.serviceContent }}</text> <view v-else class="order-item-more">
</view> <view class="line-view"></view>
<view class="read-more-toggle" @click="handleClick(true)"> <view class="order-cell between-cell">
<u-icon name="arrow-up"></u-icon> <text class="cell-title">品牌:</text>
<text class="read-more-text">点击收起</text> <text>{{ order.brandName }}</text>
</view> </view>
</view> <view class="order-cell between-cell">
</view> <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> </template>
<script> <script>
export default { export default {
props: { props: {
// 履约记录 // 履约记录
order: { order: {
type: Object, type: Object,
default () { default() {
return {} return {}
} },
}, },
// true 显示「查看更多」按钮, false 显示「点击收起」按钮 // true 显示「查看更多」按钮, false 显示「点击收起」按钮
readMore: { readMore: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
// 可以点击电话和地址 // 可以点击电话和地址
operate: { operate: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
// 显示点击电话和地址 // 显示点击电话和地址
showOperate: { showOperate: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}, },
data() { data() {
return {} return {}
}, },
computed: { computed: {
formatAddress() { formatAddress() {
let self = this let self = this
let address = "" let address = ''
if (self.order) { if (self.order) {
address = self.order.contactProvinceText || "" address = self.order.contactProvinceText || ''
address += self.order.contactCityText || "" address += self.order.contactCityText || ''
address += self.order.contactCommunityText || "" address += self.order.contactCommunityText || ''
address += self.order.contactStreetText || "" address += self.order.contactStreetText || ''
address += self.order.contactAddress || "" address += self.order.contactAddress || ''
} }
return address return address
}, },
phoneIcon() { phoneIcon() {
//self-support/icon/dianhua-0@2x.png //self-support/icon/dianhua-0@2x.png
if (this.operate) { if (this.operate) {
return process.uniEnv.qn_base_url + 'dianhua.png' return process.uniEnv.qn_base_url + 'dianhua.png'
} else { } else {
return process.uniEnv.qn_base_url + 'dianhua-d.png' return process.uniEnv.qn_base_url + 'dianhua-d.png'
} }
}, },
navigationIcon() { navigationIcon() {
//self-support/icon/daohang-0@2x.png //self-support/icon/daohang-0@2x.png
if (this.operate) { if (this.operate) {
return process.uniEnv.qn_base_url + 'daohang.png' return process.uniEnv.qn_base_url + 'daohang.png'
} else { } else {
return process.uniEnv.qn_base_url + 'daohang-d.png' return process.uniEnv.qn_base_url + 'daohang-d.png'
} }
}, },
}, },
methods: { methods: {
openLocation(address) { openLocation(address) {
if (this.operate) { if (this.operate) {
const latitude = this.order.contactAddressLatitud //res.latitude; const latitude = this.order.contactAddressLatitud //res.latitude;
const longitude = this.order.contactAddressLongitud //res.longitude; const longitude = this.order.contactAddressLongitud //res.longitude;
getApp().track("order_open_location", { address: address }); getApp().track('order_open_location', { address: address })
uni.openLocation({ uni.openLocation({
latitude: Number(latitude), latitude: Number(latitude),
longitude: Number(longitude), longitude: Number(longitude),
success: function() { success: function() {
console.log('success'); console.log('success')
} },
}); })
} }
}, },
phoneToCustomer(phone) { // 联系客户 phoneToCustomer(phone) {
if (this.operate) { // 联系客户
getApp().track("order_make_phone_call", { phone: phone }); if (this.operate) {
uni.makePhoneCall({ getApp().track('order_make_phone_call', { phone: phone })
phoneNumber: phone, //仅为示例 uni.makePhoneCall({
complete() {} phoneNumber: phone, //仅为示例
}); complete() {},
this.contactTime() })
} this.contactTime()
}, }
contactTime() { },
let self = this contactTime() {
var data = {} let self = this
if (this.submitType === "workerAppointment") { var data = {}
self.$u.api.contactTime(data, this.order.orderId) if (this.submitType === 'workerAppointment') {
} self.$u.api.contactTime(data, this.order.orderId)
}, }
handleClick(val) { },
this.$emit('update:readMore', val) handleClick(val) {
}, this.$emit('update:readMore', val)
handleLongpress(text) { },
uni.setClipboardData({ handleLongpress(text) {
data: text, uni.setClipboardData({
success: function () { data: text,
console.log('success'); success: function() {
} console.log('success')
}); },
} })
} },
} },
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.base-item { .base-item {
padding-bottom: 6rpx; padding-bottom: 6rpx;
background-color: #FFFFFF; background-color: #ffffff;
margin-bottom: 20rpx; margin-bottom: 20rpx;
// padding: 30rpx 30rpx 0 30rpx; // padding: 30rpx 30rpx 0 30rpx;
border-radius: 6px; border-radius: 6px;
.top-item { .top-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 30rpx; margin-bottom: 30rpx;
.left { .left {
display: flex; display: flex;
align-items: center; align-items: center;
.tag { .tag {
text-align: center; text-align: center;
width: 84rpx; width: 84rpx;
height: 40rpx; height: 40rpx;
border-radius: 8rpx; border-radius: 8rpx;
font-size: 22rpx; font-size: 22rpx;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
line-height: 40rpx; line-height: 40rpx;
background-image: linear-gradient(to right, #FF930D, #FFC174); background-image: linear-gradient(to right, #ff930d, #ffc174);
&.active { &.active {
background-image: linear-gradient(to right, #2272FF, #47ABFF); background-image: linear-gradient(to right, #2272ff, #47abff);
} }
} }
.title { .title {
margin-left: 20rpx; margin-left: 20rpx;
height: 36rpx; height: 36rpx;
font-size: 36rpx; font-size: 36rpx;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
line-height: 36rpx; line-height: 36rpx;
} }
} }
.right { .right {
text-align: center; text-align: center;
width: 100rpx; width: 100rpx;
height: 40rpx; height: 40rpx;
background: #F4F5F7; background: #f4f5f7;
border-radius: 22rpx; border-radius: 22rpx;
font-size: 22rpx; font-size: 22rpx;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
line-height: 40rpx; line-height: 40rpx;
} }
} }
.address-cell { .address-cell {
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
line-height: 24rpx; line-height: 24rpx;
margin-top: 20rpx; margin-top: 20rpx;
margin-bottom: 40rpx; margin-bottom: 40rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.left-address { .left-address {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
.address-txt { .address-txt {
line-height: 30rpx; line-height: 30rpx;
margin-left: 8rpx; margin-left: 8rpx;
margin-right: 30rpx; margin-right: 30rpx;
} }
} }
} }
} }
.read-more-toggle { .read-more-toggle {
text-align: center; text-align: center;
color: #2272FF; color: #2272ff;
font-size: 26rpx; font-size: 26rpx;
margin-top: 30rpx; margin-top: 30rpx;
padding-bottom: 30rpx; padding-bottom: 30rpx;
} }
.read-more-text { .read-more-text {
padding-left: 8rpx; padding-left: 8rpx;
} }
.order-item-more { .order-item-more {
font-size: 26rpx; font-size: 26rpx;
color: #333333; color: #333333;
text-align: right; text-align: right;
.line-view { .line-view {
background-color: #F4F5F7; background-color: #f4f5f7;
height: 2rpx; height: 2rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
}
} .order-cell {
font-size: 26rpx;
font-weight: 400;
color: #333333;
line-height: 48rpx;
margin-bottom: 10rpx;
}
.order-cell { .between-cell {
font-size: 26rpx; display: flex;
font-weight: 400; justify-content: space-between;
color: #333333; align-items: center;
line-height: 48rpx; }
margin-bottom: 10rpx;
} .display-cell {
display: flex;
}
.between-cell { .cell-title {
display: flex; text-align: left;
justify-content: space-between; flex-shrink: 0;
align-items: center; }
}
.display-cell {
display: flex;
}
.cell-title {
text-align: left;
flex-shrink: 0;
}
</style> </style>
...@@ -128,6 +128,7 @@ export default { ...@@ -128,6 +128,7 @@ export default {
auditResults: {}, // 审核结果 auditResults: {}, // 审核结果
orderBusinessType: 'R', // 业务类型 R 为抢单 orderBusinessType: 'R', // 业务类型 R 为抢单
orderId: '0', // 订单id orderId: '0', // 订单id
partnerSerialNumber: '', // 上游单号
} }
}, },
}, },
...@@ -209,16 +210,16 @@ export default { ...@@ -209,16 +210,16 @@ export default {
infoTexts() { infoTexts() {
return this.isSimple return this.isSimple
? { ? {
orderNumber: { partnerSerialNumber: {
symbol: true, symbol: true,
name: '工单编号', name: '订单编号',
style: 'font-weight: 450;font-size: 28rpx', style: 'font-weight: 450;font-size: 28rpx',
icon: 'arrow-right', icon: 'arrow-right',
}, },
contactName: { name: '客户信息', content: 'contactPhone' }, contactName: { name: '客户信息', content: 'contactPhone' },
} }
: { : {
orderNumber: { name: '工单编号' }, partnerSerialNumber: { name: '订单编号' },
partnerCompanyName: { name: '合作厂商' }, partnerCompanyName: { name: '合作厂商' },
contactName: { name: '客户信息', content: 'contactPhone' }, contactName: { name: '客户信息', content: 'contactPhone' },
} }
...@@ -547,7 +548,7 @@ export default { ...@@ -547,7 +548,7 @@ export default {
}, },
handleLongpress(key, text) { handleLongpress(key, text) {
// 长按复制单号 // 长按复制单号
if (key == 'orderNumber') { if (key == 'partnerSerialNumber') {
uni.setClipboardData({ uni.setClipboardData({
data: text, data: text,
success: function() { success: function() {
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<u-search <u-search
v-model="search.keyword" v-model="search.keyword"
bg-color="#FFFFFF" bg-color="#FFFFFF"
placeholder="搜索:工单号·用户姓名·手机号·地址" placeholder="扳手会工单·用户姓名·手机号·地址"
search-icon-color="#999999" search-icon-color="#999999"
color="#333333" color="#333333"
placeholder-color="#999999" placeholder-color="#999999"
......
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