ag-special-sale/public/qc1.html

564 lines
22 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=yes">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover">
<title>验货报告</title>
<!-- version: v8.222f3-->
<link href="./qc/main.css" rel="stylesheet">
<link href="./qc/app.css" rel="stylesheet">
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://erp-temporary-file.oss-cn-hangzhou.aliyuncs.com/page_common/npm/vant%402.12/lib/index.min.css" />
<!-- 引入axios -->
<!-- <script src="https://unpkg.com/axios@1.5.0/dist/axios.min.js"></script> -->
<script src="https://erp-temporary-file.oss-cn-hangzhou.aliyuncs.com/page_common/npm/axios%401.5.0/axios.min.js"></script>
<!-- 引入复制 -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script> -->
<script src="https://erp-temporary-file.oss-cn-hangzhou.aliyuncs.com/page_common/npm/clipboard%402.0.6/clipboard.min.js"></script>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<!-- <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script> -->
<script src="https://erp-temporary-file.oss-cn-hangzhou.aliyuncs.com/page_common/npm/vue%402.7.14/vue.min.js"></script>
<!-- <script src="https://unpkg.com/vant@2.12.54/lib/vant.min.js"></script> -->
<script src="https://erp-temporary-file.oss-cn-hangzhou.aliyuncs.com/page_common/npm/vant%402.12/vant.min.js"></script>
</head>
<body>
<div id="app">
<div class="detection-report-wrapper">
<!-- <div class="detection-report-navigator">
<div class="navigator__back"><img src="./qc/f91120c59c495b475c73547633b800fd.png" class="navigator__back__img">
</div>
<h2 class="navigator__title">验货报告</h2>
<div class="navigator__box"></div>
</div> -->
<section class="detection-report-main" id="main">
<div class="main__wrapper">
<div class="main__bg">
<div class="main__top">
<img :src="logo" class="top__title">
<!-- <img src="./qc/zhijian.png" class="top__fish"> -->
<div class="top__fish"></div>
</div>
<div class="main__detail">
<div class="detail__top"
style="background-image: url(&quot;https://erp-temporary-file.oss-cn-hangzhou.aliyuncs.com/xy_common/banner.png&quot;);">
<span class="top__codetext">质检编码:</span><span
class="top__codetext top__copymain">{{xy_qc_data.business_id}}</span><img
src="./qc/e3e938a675054afaaff31e8ae81a0c45.png" class="top__copy"
@click="copyLink($event,xy_qc_data.business_id)">
</div>
<div class="detail__wrapper">
<div class="prodinfo__phoneinfo"><img v-if="xy_qc_data" class="prodinfo__cover" :src="xy_qc_data.img || res_img_url">
<div class="prodinfo__wrap">
<p class="prodinfo__name">{{xy_qc_data.sku}}</p>
<p class="prodinfo__imei">IMEI{{xy_qc_data.imei}}</p>
</div>
</div>
<div class="detail__qualityinfo">
<div class="qualityinfo__wrap"><span class="qualityinfo__score"
style="line-height: 0.7; margin-bottom: 0.03rem;"></span>
<!-- <div class="qualityinfo__level"><span> <span v-if="xytext">新· </span>{{xytext}}</span></div> -->
<div class="qualityinfo__level"><span v-if="xytext">{{xytext}}</span></div>
</div>
</div>
<div class="detail__qualitymessage">{{xy_qc_data.use_desc || ''}}</div>
<div class="detail__appearance">
<p class="rowTitle">外观检测</p>
<div class="appearance__previews imgBox">
<div @click="imgClick(0)" class="previews__left previews__box">
<div class="ant-image"><img v-if="res_img_url" class="ant-image-img previews__img" :src="res_img_url">
<!-- <div class="ant-image-mask">
<div class="ant-image-mask-info"><span role="img" aria-label="eye"
class="anticon anticon-eye">
</span>Preview</div>
</div> -->
</div>
</div>
<div class="previews__right previews__box">
<div v-for="(i,idx) in img_url1" :key="idx" @click="imgClick(idx + 1)"
class="previews__sitem previews__box false" :class="IsPC ? 'previews__sitem_my' : ''">
<div class="ant-image">
<img class="ant-image-img previews__img" v-if="i" :src="i">
<div class="ant-image-mask">
</div>
</div>
<div v-show="idx == 5 && img_url1.length > 6" class="previews__countplace">+{{img_url1.length -
6}}</div>
</div>
<!-- <div @click="imgClick(2)" class="previews__sitem previews__box false">
<div class="ant-image"><img class="ant-image-img previews__img"
src="./qc/44a8c100098e49868d6498f7c7882413.jpg">
</div>
<div v-show="images.length > 5" class="previews__countplace">+{{images.length}}</div>
</div> -->
</div>
</div>
</div>
<!-- 图片预览 -->
<van-image-preview v-model="show" :images="xy_qc_data.res_img_url" @change="onChange"
:start-position="position" ref="vanimgpre" :closeable="IsPC">
<template v-slot:cover v-if="IsPC" class="vancover">
<van-button @click="left" icon="arrow-left" class="btn" size="small"></van-button>
<van-button @click="right" icon="arrow" class="btn" size="small"></van-button>
</template>
</van-image-preview>
<!-- 图片预览 -->
<!-- 异常项 -->
<div class="list__wrap" v-show="xyyichangItem > 0">
<p class="rowTitle">异常检测项·{{xyyichangItem}}</p>
<div class="list__itemwrap" v-for="(item,index) in data" :key="index">
<p class="list__title" v-show="item.value.length > 0">{{item.qc_item}}</p>
<div class="list__item" v-for="(items,indexs) in item.value" :key="indexs">
<p class="list__content" v-show="items.fault_desc != ''"><span class="list__dot"></span><span
class="list__desc">{{items.fault_desc}}</span></p>
</div>
</div>
</div>
</div>
<div class="detail__all">
<p class="rowTitle all__title">全部检测项·{{xy_qc_item_map_len}}</p>
<div class="detail__expands" v-for="(item,index) in data" :key="index">
<div class="expands__titlewrap expands__levelTitle ">
<p class="rowTitle">{{item.qc_item}}</p>
<div class="expands__right" @click="item0(index)">
<p class="tip-default" v-show="item.value.length == 0">
{{itemLen.normalarr[index]}}项全部正常</span>
</p>
<p class="tip-default" v-show="item.value.length > 0">
{{itemLen.normalarr[index]}}项正常</span>
</p>
<p class="tip-wran" v-show="item.value.length > 0">{{item.value.length}}项需注意</p>
<img src="./qc/e561d1a6d254416183b6ebc19e3a8c0f.png" class="expands__arrow"
:class="!item.flag?'item':''">
</div>
</div>
<div class="expands__cols" v-show="item.flag" v-for="(items,indexs) in item.child" :key="indexs">
<div>
<div class="expands__titlewrap expands__gutter">
<p class="rowTitle collspae-title">{{items.qc_item}}</p>
</div>
</div>
<div v-for="(item_,index_) in items.child">
<div class="expands__item">
<p class="expands__itemlabel "
:class="item_.qc_item_value.length > 0 && item_.qc_item_value[0].abnormal != 0 ?'expands__stroke':''">
{{item_.qc_item}}</p>
<div class="expands__itemdivider"></div>
<p class="expands__itemvalue "
:class="item_.qc_item_value.length > 0 && item_.qc_item_value[0].abnormal != 0 ?'expands__stroke':''">
{{item_.qc_item_value.length > 0 ?
item_.qc_item_value[0].qc_item_value : ''}}</p>
</div>
</div>
</div>
<!-- <div class="expands__cols"></div> -->
<div class="expands__cols" v-show="!item.flag">
<div class="expands__item" v-for="(itemx,indx) in item.value" :key="indx">
<p class="expands__itemlabel expands__stroke">{{itemx.value}}</p>
<div class="expands__itemdivider"></div>
<p class="expands__itemvalue expands__stroke">{{itemx.text}}</p>
</div>
</div>
</div>
</div>
<p class="main__tipmsg">*商品的拆修情况目前仅针对第三方拆修进行检测,厂商官方的维修因技术原因无法判断,详见验机报告</p>
</div>
<!-- <div class="detection-report-footer">
<div class="footer__line"><img src="./qc/671751c6b1e24bb3b6d6098fd4cce9b3.png">
</div>
<div class="footer__content">
<div class="content__customer"><img :src="userinfodata.avatar || xy_qc_data.check_avatar" class="footer__logo">
<div class="footer__appinfo">
<p class="appinfo__title">{{userinfodata.signature}}</p>
<p class="appinfo__desc">{{ userinfodata.position || '资深验货工程师'}}</p>
</div>
</div>
<div class="content__disclaimer" @touchstart="goex"><img
src="./qc/8120650a4c8f4b448493e1e8f7918d6b.png">
</div>
</div>
</div> -->
<p class="main__report">本报告于{{ xy_qc_data.add_time | parseDateString}}出具</p>
</div>
</div>
</section>
</div>
</div>
</body>
<!-- 引入toast -->
<script src="./qc/toast.js"></script>
<script>
const service = axios.create({
timeout: 1000 * 60 * 2 // 接口超时
})
// 请求拦截
service.interceptors.request.use(
config => {
config.headers['token'] = localStorage.getItem('token')
return config
},
error => {
return Promise.reject(error)
}
)
new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
show: false,
index: 0,
position: 0,
flag0: false,
flag1: false,
flag2: false,
flag3: false,
id: '',
data: [],
xy_qc_data: '',
xy_qc_item_map: [],
res_img_url: '',
img_url1: '',
itemIndex: '',
index9: '',
check_phone: '',
logo: './qc/zhijian.png',
name: './qc/name.jpg',
userinfodata:'',
},
created() {
// 获取URL地址
const url = window.location.href
// 获取参数部分
const params = url.split('?')[1]
// 将参数部分转换为对象
const paramsObj = {}
if (params) {
const paramsArr = params.split('&')
for (let i = 0; i < paramsArr.length; i++) {
const param = paramsArr[i].split('=')
paramsObj[param[0]] = param[1]
}
}
this.id = paramsObj.business_id;
console.log(this.id, 'id---------------------', paramsObj);
},
filters: {
parseDateString(dateString) {
// 创建Date对象并解析日期字符串
let date = new Date(dateString);
// 获取年、月、日、时、分、秒
let year = date.getFullYear();
let month = date.getMonth() + 1; // 月份是从0开始的所以需要加1
let day = date.getDate();
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
// 补全数字例如如果月份、日期、小时、分钟或秒数为单数字则在其前面添加一个0
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hour = hour < 10 ? '0' + hour : hour;
minute = minute < 10 ? '0' + minute : minute;
second = second < 10 ? '0' + second : second;
// 返回格式化的字符串
// return `${year}年${month}月${day}日 ${hour}时${minute}分${second}秒`;
return `${year}${month}${day}`;
},
filterTimeYMD(time) {
var date = new Date(time)
var y = date.getFullYear()
var m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
var d = date.getDate()
d = d < 10 ? '0' + d : d
return y + '-' + m + '-' + d
}
},
computed: {
itemLen() {
const normalarr = []; //正常
const flawarr = []; //瑕疵
const len = this.data.length;
for (let i = 0; i < len; i++) {
normalarr[i] = 0;
flawarr[i] = 0;
}
this.data.forEach((item, index) => {
item.child.forEach((item1, index1) => {
item1.child.forEach((item2, index2) => {
item2.qc_item_value.forEach((item3, index3) => {
if (item3.fineness2 != '优品/严选') {
flawarr[index] += 1;
} else if (item3.fineness2 == '优品/严选' && item3.abnormal == 0) {
normalarr[index] += 1;
}
})
})
});
});
return { normalarr, flawarr }
},
xyyichangItem() {
let len = 0;
this.data.forEach((item, index) => {
item.value.forEach((items, indexs) => {
if (items.fault_desc != '') {
len += 1;
}
})
})
return len;
},
xy_qc_item_map_len() {
let len = this.xy_qc_item_map.length;
return len;
},
xytext() {
// 99细微使用痕迹
// 95轻微使用痕迹
// 9轻度使用
// 8明显使用
let text = '';
if (this.xy_qc_data.stuff_status == 9) {
text = '轻度使用'
} else if (this.xy_qc_data.stuff_status == 8) {
text = '明显使用'
} else if (this.xy_qc_data.stuff_status == 95) {
text = '轻微使用痕迹'
} else if (this.xy_qc_data.stuff_status == 99) {
text = '细微使用痕迹'
} else if(this.xy_qc_data.stuff_status == '微瑕'){
text = ''
}
return text;
},
IsPC() {
if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
// 当前设备是移动设备
return false;
} else {
return true;
}
},
},
mounted() {
// service.post('https://api.aiguoerp.com/api/xy/xy_product_details', { xy_product_id: this.id }).then((res) => {
service.post('https://api.aiguoerp.com/api/inspection_center/product_details', { business_id: this.id }).then((res) => {
this.userinfodata = res.data.datas;
this.data = res.data.datas.xy_qc_item;
this.xy_qc_data = res.data.datas.datas;
// this.xy_qc_data.warranty_end_time = this.filterTimeYMD(this.xy_qc_data.warranty_end_time)
this.check_phone = `tel:${this.xy_qc_data.check_phone}`;
// if (res.data.datas.logo == '' || res.data.datas.logo == null || res.data.datas.logo == undefined) {
// this.logo = './qc/bg1.png'
// } else {
// this.logo = res.data.datas.logo;
// }
if (this.xy_qc_data.check_avatar == '') {
this.xy_qc_data.check_avatar = './qc/avatar.png'
}
this.xy_qc_item_map = res.data.datas.xy_qc_item_map;
this.xy_qc_data.res_img_url = JSON.parse(this.xy_qc_data.res_img_url);
this.res_img_url = JSON.parse(JSON.stringify(this.xy_qc_data.res_img_url))[0];
this.img_url1 = JSON.parse(JSON.stringify(this.xy_qc_data.res_img_url));
this.img_url1.splice(0, 1);
console.log(this.res_img_url, '------------', this.img_url1);
console.log(this.xy_qc_data, '-------------8', this.xy_qc_item_map);
this.xyitem();
})
},
methods: {
xyitem() {
this.data.forEach((item, index) => {
this.$set(item, 'value', []);
this.$set(item, 'flag', false);
item.child.forEach((item1, index1) => {
item1.child.forEach((item2, index2) => {
item2.qc_item_value.forEach((items, indexs) => {
if (items.abnormal == 1) {
item.value.push({ value: item2.qc_item, text: items.qc_item_value, fault_desc: items.fault_desc })
}
if (items.qc_item_value_id == 53 && this.xy_qc_data.battery_cycle != '') {
items.qc_item_value = this.xy_qc_data.battery_cycle.includes('次') ? this.xy_qc_data.battery_cycle : this.xy_qc_data.battery_cycle + '次'
}
if (items.qc_item_value_id == 44) {
// items.qc_item_value = '到' + this.xy_qc_data.warranty_end_time
items.qc_item_value = this.xy_qc_data.warranty_end_time == '' ? '无' : this.xy_qc_data.warranty_end_time
}else if(items.qc_item_value_id == 44 && this){
}
})
})
})
})
},
xyitem1() {
service.post('https://api.aiguoerp.com/api/xy/xy_qc_item').then((res) => {
console.log(res.data)
this.data = res.data.datas;
this.data.forEach((item, index) => {
this.$set(item, 'flag', false);
item.child.forEach((item1, index1) => {
item1.child.forEach((item2, index2) => {
item2.qc_item_value = item2.qc_item_value.filter((item3) => {
if (this.xy_qc_item_map.some(i_ => i_.qc_item_value_id == item3.qc_item_value_id)) {
return item3;
}
})
})
})
});
this.data.forEach((item, index) => {
this.$set(item, 'value', []);
item.child.forEach((item1, index1) => {
item1.child.forEach((item2, index2) => {
item2.qc_item_value.forEach((items, indexs) => {
if (items.abnormal == 1) {
item.value.push({ value: item2.qc_item, text: items.qc_item_value, fault_desc: items.fault_desc })
}
if (items.qc_item_value_id == 53 && this.xy_qc_data.battery_cycle != '') {
items.qc_item_value = this.xy_qc_data.battery_cycle + '次'
}
if (items.qc_item_value_id == 44 && this.xy_qc_data.warranty_end_time != '') {
items.qc_item_value = '到' + this.xy_qc_data.warranty_end_time
}
})
})
})
})
console.log(this.data, 'data-----------------------666');
})
},
imgClick(e) {
this.show = true;
this.position = e;
},
onChange(index) {
this.index = index;
},
item0(e) {
// this['flag' + e] = !this['flag' + e];
this.itemIndex = e;
this.index9 = e;
this.data.forEach((item, index) => {
if (e == index) {
this.$set(item, 'flag', !item.flag);
}
});
},
left() {
this.index--;
this.$refs.vanimgpre.swipeTo(this.index);
},
right() {
this.index++;
this.$refs.vanimgpre.swipeTo(this.index);
},
copyLink(e, val) {
var yg = new Ygtoast();
const clipboard = new ClipboardJS(e.target, { text: () => val })
// 调用
clipboard.on('success', (e) => {
yg.toast("复制成功", 1500);
// 释放内存
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.on('error', (e) => {
// 不支持复制
yg.toast("不支持自动复制", 1500);
// 释放内存
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.onClick(e)
},
goex() {
window.location = 'ex.html'
},
closePreview() {
console.log(777);
},
filterTimeYMD(time) {
var date = new Date(time)
var y = date.getFullYear()
var m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
var d = date.getDate()
d = d < 10 ? '0' + d : d
return y + '-' + m + '-' + d
}
}
});
</script>
<style>
/* @font-face {
font-family: "DIN Alternate";
src: url("qc/font/PingFangHK-Semibold.otf") format("opentype"),
url("qc/font/Din\ Condensed.ttf") format(),
url("qc/font/PingFangSC-Medium.ttf"),
url("qc/font/PingFangSC-Regular.ttf");
} */
.detection-report-main .top__fish {
height:1.1rem;
}
.detection-report-main {
padding: 0 .32rem .5rem;
}
.item {
transform: rotate(180deg);
}
.imgBox {
height: 2.32rem;
}
.yg-toast {
position: fixed;
background: rgba(0, 0, 0, .7);
border-radius: 4px;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 60%;
text-align: center;
transition: all .1s;
z-index: 90000000;
}
.yg-toast-text {
color: #fff;
padding: 4px 10px;
padding-bottom: 6px;
}
.van-image-preview__cover {
top: 10px;
left: 10px;
}
.previews__sitem_my {
width: 0.9rem !important;
height: 1rem !important;
}
</style>
</html>