ag-special-sale/public/qc1.html

564 lines
22 KiB
HTML
Raw Normal View History

2024-07-18 10:36:22 +08:00
<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>