Skip to content

S
self-support
Commit 439a8862 authored by Facius's avatar Facius
Browse files
Options

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

parent 9a33ac50
Hide whitespace changes
Inline Side-by-side
Showing with 295 additions and 283 deletions
src/components/order/detail.vue
View file @ 439a8862
<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 @longpress="handleLongpress(order.orderNumber)">{{ order.orderNumber }}</text>
</view>
<view class="order-cell">
<text>合作厂商：</text>
<text>{{ order.partnerCompanyName }}</text>
</view>
<view class="order-cell">
<text>厂商编号：</text>
<text>{{ order.partnerSerialNumber }}</text>
</view>
<view class="order-cell between-cell">
<view class="left">
<text>客户信息：</text>
<text>{{ order.contactName }}</text>
</view>
<image v-if="showOperate" 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 v-if="showOperate" 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>
<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 @longpress="handleLongpress(order.partnerSerialNumber)">{{
order.partnerSerialNumber
}}</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
v-if="showOperate"
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="order-cell">
<text>扳手会工单：</text>
<text>{{ order.orderNumber }}</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
v-if="showOperate"
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 {}
}
},
// true 显示「查看更多」按钮， false 显示「点击收起」按钮
readMore: {
type: Boolean,
default: true
},
// 可以点击电话和地址
operate: {
type: Boolean,
default: true
},
export default {
props: {
// 履约记录
order: {
type: Object,
default() {
return {}
},
},
// true 显示「查看更多」按钮， false 显示「点击收起」按钮
readMore: {
type: Boolean,
default: true,
},
// 可以点击电话和地址
operate: {
type: Boolean,
default: true,
},
// 显示点击电话和地址
showOperate: {
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.operate) {
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.operate) {
return process.uniEnv.qn_base_url + 'daohang.png'
} else {
return process.uniEnv.qn_base_url + 'daohang-d.png'
}
},
},
methods: {
openLocation(address) {
if (this.operate) {
const latitude = this.order.contactAddressLatitud //res.latitude;
const longitude = this.order.contactAddressLongitud //res.longitude;
getApp().track("order_open_location", { address: address });
uni.openLocation({
latitude: Number(latitude),
longitude: Number(longitude),
success: function() {
console.log('success');
}
});
}
},
phoneToCustomer(phone) { // 联系客户
if (this.operate) {
getApp().track("order_make_phone_call", { phone: phone });
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)
},
handleLongpress(text) {
uni.setClipboardData({
data: text,
success: function () {
console.log('success');
}
});
}
}
}
// 显示点击电话和地址
showOperate: {
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.operate) {
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.operate) {
return process.uniEnv.qn_base_url + 'daohang.png'
} else {
return process.uniEnv.qn_base_url + 'daohang-d.png'
}
},
},
methods: {
openLocation(address) {
if (this.operate) {
const latitude = this.order.contactAddressLatitud //res.latitude;
const longitude = this.order.contactAddressLongitud //res.longitude;
getApp().track('order_open_location', { address: address })
uni.openLocation({
latitude: Number(latitude),
longitude: Number(longitude),
success: function() {
console.log('success')
},
})
}
},
phoneToCustomer(phone) {
// 联系客户
if (this.operate) {
getApp().track('order_make_phone_call', { phone: phone })
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)
},
handleLongpress(text) {
uni.setClipboardData({
data: text,
success: function() {
console.log('success')
},
})
},
},
}
</script>
<style lang="scss" scoped>
.base-item {
padding-bottom: 6rpx;
background-color: #FFFFFF;
margin-bottom: 20rpx;
// padding: 30rpx 30rpx 0 30rpx;
border-radius: 6px;
.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;
.top-item {
display: flex;
justify-content: space-between;
margin-bottom: 30rpx;
.left {
display: flex;
align-items: center;
.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);
.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);
}
}
&.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;
}
}
.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;
}
}
.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;
.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;
.left-address {
display: flex;
align-items: flex-start;
.address-txt {
line-height: 30rpx;
margin-left: 8rpx;
margin-right: 30rpx;
}
}
}
}
.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-toggle {
text-align: center;
color: #2272ff;
font-size: 26rpx;
margin-top: 30rpx;
padding-bottom: 30rpx;
}
.read-more-text {
padding-left: 8rpx;
}
.read-more-text {
padding-left: 8rpx;
}
.order-item-more {
font-size: 26rpx;
color: #333333;
text-align: right;
.order-item-more {
font-size: 26rpx;
color: #333333;
text-align: right;
.line-view {
background-color: #F4F5F7;
height: 2rpx;
margin-bottom: 20rpx;
}
.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;
}
.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;
}
.between-cell {
display: flex;
justify-content: space-between;
align-items: center;
}
.display-cell {
display: flex;
}
.cell-title {
text-align: left;
flex-shrink: 0;
}
.cell-title {
text-align: left;
flex-shrink: 0;
}
</style>
src/components/order/index.vue
View file @ 439a8862
......@@ -128,6 +128,7 @@ export default {
auditResults: {}, // 审核结果
orderBusinessType: 'R', // 业务类型 R 为抢单
orderId: '0', // 订单id
partnerSerialNumber: '', // 上游单号
}
},
},
......@@ -209,16 +210,16 @@ export default {
infoTexts() {
return this.isSimple
? {
orderNumber: {
partnerSerialNumber: {
symbol: true,
name: '工单编号',
name: '订单编号',
style: 'font-weight: 450;font-size: 28rpx',
icon: 'arrow-right',
},
contactName: { name: '客户信息', content: 'contactPhone' },
}
: {
orderNumber: { name: '工单编号' },
partnerSerialNumber: { name: '订单编号' },
partnerCompanyName: { name: '合作厂商' },
contactName: { name: '客户信息', content: 'contactPhone' },
}
......@@ -547,7 +548,7 @@ export default {
},
handleLongpress(key, text) {
// 长按复制单号
if (key == 'orderNumber') {
if (key == 'partnerSerialNumber') {
uni.setClipboardData({
data: text,
success: function() {
......
src/pages/order/search.vue
View file @ 439a8862
......@@ -5,7 +5,7 @@
<u-search
v-model="search.keyword"
bg-color="#FFFFFF"
placeholder="搜索：工单号·用户姓名·手机号·地址"
placeholder="扳手会工单·用户姓名·手机号·地址"
search-icon-color="#999999"
color="#333333"
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