|
|
@@ -1,11 +1,272 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- 详情
|
|
|
+ <view style="background-color: #fff;padding: 20rpx 0;">
|
|
|
+ <up-steps :current="current" dot activeColor="#0279FE">
|
|
|
+ <up-steps-item v-for="item in steps" :key="item.title" :title="item.title" />
|
|
|
+ </up-steps>
|
|
|
+ </view>
|
|
|
+ <view class="main">
|
|
|
+ <view class="billno" style="margin-bottom: -24rpx;">
|
|
|
+ 工单编号：{{ detail.billno }}
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label col-center">服务类型</view>
|
|
|
+ <view class="servicetype"
|
|
|
+ :style="{ 'background': { '安装': '#70B603', '维修': '#D9001B', '清洁': '#3874F6' }[detail.servicetype] || '#999999' }">
|
|
|
+ {{ detail.servicetype || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">产品品类</view>
|
|
|
+ <view class="value">{{ detail.class1 || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="detail.servicetype == '维修'">
|
|
|
+ <view class="label">故障类型</view>
|
|
|
+ <view class="value">{{ detail.reason || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">服务地址</view>
|
|
|
+ <view class="value">{{ detail.province + detail.city + detail.county + detail.address || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row" style="align-items: center;">
|
|
|
+ <view class="label justify">联系人</view>
|
|
|
+ <view class="value phonenumber">{{ detail.scenecontact || '--' }}
|
|
|
+ <block v-if="detail.scenecontactphonenumber">
|
|
|
+ <text style="margin: 0 20rpx 0 10rpx;">
|
|
|
+ {{ detail.scenecontactphonenumber }}
|
|
|
+ </text>
|
|
|
+ <My-button :customStyle="{
|
|
|
+ width: '142rpx',
|
|
|
+ height: '48rpx',
|
|
|
+ 'background-color': '#FFFFFF',
|
|
|
+ 'color': '#3874F6',
|
|
|
+ borderRadius: '10rpx'
|
|
|
+ }" frontIcon="icon-bodadianhua1" text="电话" :phonenumber="detail.scenecontactphonenumber" />
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">派单日期</view>
|
|
|
+ <view class="value">{{ detail.createdate || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">服务需求</view>
|
|
|
+ <view class="value">{{ detail.remarks || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <up-divider />
|
|
|
+ <view class="row" v-if="detail.enterprisename">
|
|
|
+ <view class="label justify">销售商</view>
|
|
|
+ <view class="value">{{ detail.enterprisename || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="detail.itemsText.length">
|
|
|
+ <view class="label">产品信息</view>
|
|
|
+ <view class="value">
|
|
|
+ <view class="col-center" v-for="(item, index) in detail.itemsText" :key="index">
|
|
|
+ <view class="value"><text v-if="detail.itemsText.length != 1">{{ index + 1 }}. </text>{{ item }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="detail.sku">
|
|
|
+ <view class="label justify">序列号</view>
|
|
|
+ <view class="value">{{ detail.sku || '--' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="detail.customername || detail.customerphonenumber" style="align-items: center;">
|
|
|
+ <view class="label justify">客户信息</view>
|
|
|
+ <view class="value phonenumber">{{ detail.customername || '' }}
|
|
|
+ <block v-if="detail.customerphonenumber">
|
|
|
+ <text style="margin: 0 20rpx 0 10rpx;">
|
|
|
+ {{ detail.customerphonenumber }}
|
|
|
+ </text>
|
|
|
+ <My-button :customStyle="{
|
|
|
+ width: '142rpx',
|
|
|
+ height: '48rpx',
|
|
|
+ 'background-color': '#FFFFFF',
|
|
|
+ 'color': '#3874F6',
|
|
|
+ borderRadius: '10rpx'
|
|
|
+ }" frontIcon="icon-bodadianhua1" text="电话" :phonenumber="detail.customerphonenumber" />
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="detail.servicetype !== '安装' && detail.cardno">
|
|
|
+ <view class="label">保修信息</view>
|
|
|
+ <view class="value">
|
|
|
+ <text :style="{ color: detail.inqualityguaranteeperiod ? '#70B603' : '#D9001B' }"
|
|
|
+ style="margin-right: 0rpx;">
|
|
|
+ {{ detail.inqualityguaranteeperiod ? '在保' : '已过保' }}
|
|
|
+ </text>
|
|
|
+ {{ detail.cardno || '' }}
|
|
|
+ <view v-if="detail.cardno" style="margin-top: 20rpx;">
|
|
|
+ {{ item.begdate || '' }} - {{ item.enddate || '' }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <view v-if="detail.status == '待接单'" class="but-box">
|
|
|
+ <view class="but-box-item" v-if="detail.customerphonenumber">
|
|
|
+ <My-button :customStyle="{
|
|
|
+ 'background-color': '#FFFFFF',
|
|
|
+ 'color': '#3874F6',
|
|
|
+ }" frontIcon="icon-bodadianhua1" text="电话" :phonenumber="detail.customerphonenumber" />
|
|
|
+ </view>
|
|
|
+ <view class="but-box-item" @click="takeOrderShow = true">
|
|
|
+ <My-button frontIcon="icon-dianhua" text="接单" />
|
|
|
+ <up-modal :show="takeOrderShow" title="是否确认接单？" showCancelButton @confirm="takeOrders"
|
|
|
+ @cancel="takeOrderShow = false" ref="uModal" :asyncClose="true"></up-modal>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { ref, reactive, getCurrentInstance } from 'vue';
|
|
|
+const { $Http } = getCurrentInstance().proxy;
|
|
|
+import { onLoad } from '@dcloudio/uni-app';
|
|
|
+
|
|
|
+const current = ref(-1);
|
|
|
+const steps = reactive([
|
|
|
+ { title: '接单', value: '待接单' },
|
|
|
+ { title: '开始', value: '待开始' },
|
|
|
+ { title: '进行中', value: '进行中' },
|
|
|
+ { title: '提交', value: '提交' },
|
|
|
+ { title: '完工', value: '已完成' }
|
|
|
+]);
|
|
|
+let sa_workorderid = 0;
|
|
|
+onLoad((options) => {
|
|
|
+ sa_workorderid = options.id;
|
|
|
+ getDetail()
|
|
|
+});
|
|
|
+let detail = reactive({
|
|
|
+ itemsText: []
|
|
|
+});
|
|
|
+function getDetail() {
|
|
|
+ $Http.basic({ "id": "20230208140103", "content": { "nocache": true, sa_workorderid } }).then(res => {
|
|
|
+ console.log("工单详情", res)
|
|
|
+ if (res.code !== 1) return uni.showToast({ title: res.msg, icon: 'none' });
|
|
|
+ res.data.itemsText = res.data.titems.map(item => {
|
|
|
+ return `${item.itemname} ${item.model}`;
|
|
|
+ })
|
|
|
+ detail = reactive(res.data);
|
|
|
+ current.value = steps.findIndex(item => item.value === res.data.status);
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 接单
|
|
|
+let takeOrderShow = ref(false);
|
|
|
|
|
|
+function takeOrders() {
|
|
|
+ $Http.basic({
|
|
|
+ id: 20230210101103,
|
|
|
+ "content": {
|
|
|
+ "sa_workorderid": detail.sa_workorderid
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ console.log("接单结果", res)
|
|
|
+ if (res.code == 1) {
|
|
|
+ takeOrderShow.value = false;
|
|
|
+ getDetail();
|
|
|
+ uni.showToast({
|
|
|
+ title: '接单成功',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (res.msg) uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.main {
|
|
|
+ width: 690rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(150, 157, 165, 0.16);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 40rpx;
|
|
|
+ margin: 40rpx auto 0;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ line-height: 32rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ position: relative;
|
|
|
+ width: 108rpx;
|
|
|
+ color: #999999;
|
|
|
+ box-sizing: border-box;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label::after {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: -12rpx;
|
|
|
+ content: ':';
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .phonenumber {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .servicetype {
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 8rpx 16rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-center::after {
|
|
|
+ top: 50% !important;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .justify {
|
|
|
+ text-align: justify;
|
|
|
+ text-align-last: justify;
|
|
|
+ }
|
|
|
+
|
|
|
+ .billno {
|
|
|
+ position: relative;
|
|
|
+ width: 400rpx;
|
|
|
+ top: -40rpx;
|
|
|
+ left: -40rpx;
|
|
|
+ background: #3874F6;
|
|
|
+ border-radius: 0 0rpx 24rpx 0rpx;
|
|
|
+ padding: 10rpx 52rpx 10rpx 20rpx;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.but-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-top: 40rpx;
|
|
|
+
|
|
|
+ .but-box-item {
|
|
|
+ width: 45%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
