259 lines
7.7 KiB
HTML
Executable File
259 lines
7.7 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>layui</title>
|
||
<meta name="renderer" content="webkit">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
|
||
<link rel="stylesheet" href="../../assets/css/public.css" media="all">
|
||
<style>
|
||
.layui-elem-quote {
|
||
border-left: 5px solid #2d8cf0;
|
||
}
|
||
.c-t div{
|
||
line-height: 40px;
|
||
}
|
||
.layuimini-form{
|
||
margin: 0px;
|
||
}
|
||
html,.layuimini-form {
|
||
height: 100%;
|
||
}
|
||
body,.layui-tab{
|
||
background-color: #ffffff;
|
||
height: 93%;
|
||
}
|
||
.layui-tab-content{
|
||
height: 93%;
|
||
overflow: scroll;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="layui-form layuimini-form">
|
||
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this" data-i18n="carlist.basic_info"></li>
|
||
<li data-i18n="carlist.car_album"></li>
|
||
</ul>
|
||
<div class="layui-tab-content">
|
||
<div class="layui-tab-item layui-show">
|
||
<div id="view" style="margin-bottom: 60px;"></div>
|
||
</div>
|
||
<div class="layui-tab-item">
|
||
<div id="imgview" style="margin-bottom: 60px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="layui-form-item showbtn" >
|
||
<div class="layui-input-block" style="padding-right: 10px;">
|
||
<button class="layui-btn layui-btn-danger" id="qxBtn">关闭</button>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
|
||
<script id="demo" type="text/html">
|
||
<!-- <blockquote class="layui-elem-quote" style="padding: 8px;">信息</blockquote> -->
|
||
<table class="layui-table" lay-even>
|
||
<colgroup>
|
||
<col width="60">
|
||
<col width="60">
|
||
<col>
|
||
</colgroup>
|
||
<tbody>
|
||
<tr>
|
||
<td>{{d.lang.carlist.product_name}}：</td>
|
||
<td>{{ d.name }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>{{d.lang.carlist.VIN}}：</td>
|
||
<td>{{ d.vin }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>{{d.lang.carlist.product_image}}：</td>
|
||
<td>
|
||
<img class="clickable-img" style="width: 90%; cursor: pointer;" src="{{ d.cover_full }}" >
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>{{d.lang.carlist.user}}：</td>
|
||
<td>
|
||
{{ d.user_nickname }}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>{{d.lang.carlist.brand}}：</td>
|
||
<td>
|
||
{{ d.brand_name }}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>{{d.lang.carlist.price}}：</td>
|
||
<td>{{ d.price }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>{{d.lang.carlist.type}}：</td>
|
||
<td>
|
||
{{ d.type_name }}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>{{d.lang.carlist.energy}}：</td>
|
||
<td>
|
||
{{ d.energy_name }}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>{{d.lang.carlist.mileage}}：</td>
|
||
<td>{{ d.mileage }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>{{d.lang.carlist.vehicle_age}}：</td>
|
||
<td>{{ d.vehicle_age }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>{{d.lang.carlist.condition_desc}}：</td>
|
||
<td>{{ d.condition_desc }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>{{d.lang.carlist.location}}：</td>
|
||
<td>{{ d.location_name }}</td>
|
||
</tr>
|
||
<!-- <tr>
|
||
<td>{{d.lang.carlist.status}}：</td>
|
||
<td >
|
||
{{# if(d.info_status == 2){ }}
|
||
<span class="layui-badge">{{d.lang.carlist.rejected}}</span>
|
||
{{# } }}
|
||
{{# if(d.info_status == 1){ }}
|
||
<span class="layui-badge layui-bg-blue">{{d.lang.carlist.pending_publish}}</span>
|
||
{{# } }}
|
||
{{# if(d.info_status == 0){ }}
|
||
<span class="layui-badge layui-bg-orange">{{d.lang.carlist.pending_review}}</span>
|
||
{{# } }}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>{{d.lang.carlist.is_sold}}：</td>
|
||
<td>
|
||
{{# if(d.is_saled == 1){ }}
|
||
<span class="green">{{d.lang.carlist.sold}}</span>
|
||
{{# } }}
|
||
{{# if(d.is_saled == 0){ }}
|
||
<span class="orange">{{d.lang.carlist.not_sold}}</span>
|
||
{{# } }}
|
||
</td>
|
||
</tr> -->
|
||
</tbody>
|
||
</table>
|
||
<!-- <blockquote class="layui-elem-quote" style="padding: 8px;">图册</blockquote> -->
|
||
</script>
|
||
<script id="img" type="text/html">
|
||
<div class="contimg">
|
||
<div class="layui-row">
|
||
{{# layui.each(d, function(index, item){ }}
|
||
{{# if(item.value_full !=''){ }}
|
||
<div class="layui-col-md2 layui-col-xs6 layui-col-sm3 c-t">
|
||
<img class="clickable-img" style="width: 90%; cursor: pointer;" src="{{ item.value_full }}" alt="{{ item.name }}">
|
||
<div>{{ item.name }}</div>
|
||
</div>
|
||
{{# } }}
|
||
{{# }); }}
|
||
</div>
|
||
</div>
|
||
</script>
|
||
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
|
||
<script src="../../assets/js/lay-config.js" charset="utf-8"></script>
|
||
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
|
||
<script src="../../assets/main.js" charset="utf-8"></script>
|
||
<script src="../../assets/js/tablei18n.js"></script>
|
||
<script src="../../assets/js/i18n1.js"></script>
|
||
<script>
|
||
function getQueryString(name) {
|
||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||
var r = window.location.search.substr(1).match(reg);
|
||
if (r != null) return unescape(r[2]);
|
||
return null;
|
||
}
|
||
layui.use(['form', 'table', 'laytpl'], function() {
|
||
var form = layui.form,
|
||
layer = layui.layer,
|
||
table = layui.table,
|
||
laytpl = layui.laytpl,
|
||
$ = layui.$;
|
||
|
||
/**
|
||
* 初始化表单，要加上，不然刷新部分组件可能会不加载
|
||
*/
|
||
// 获取当前语言
|
||
var currentLang = localStorage.getItem('language') || 'zh';
|
||
var lang = langConfig[currentLang];
|
||
form.render();
|
||
self.vehicledetail({
|
||
type:'get',
|
||
data:{id:getQueryString('id')},
|
||
successCallBack: function(result){
|
||
if (result.code == 0) {
|
||
var getTpl = demo.innerHTML,
|
||
imggetTpl = img.innerHTML,
|
||
view = document.getElementById('view'),
|
||
imgview = document.getElementById('imgview');
|
||
var datas = result.data.albums;
|
||
// var album_info=[]
|
||
// if(datas&& datas!=''){
|
||
// for (const key in datas) {
|
||
// var obj={}
|
||
// obj.title = key
|
||
// obj.url = datas[key]
|
||
// album_info.push(obj);
|
||
// }
|
||
// }
|
||
// console.log(album_info);
|
||
var datalang = result.data
|
||
datalang.lang = lang
|
||
console.log(datalang)
|
||
laytpl(getTpl).render(datalang, function(html) {
|
||
view.innerHTML = html;
|
||
});
|
||
laytpl(imggetTpl).render(datas, function(html) {
|
||
imgview.innerHTML = html;
|
||
});
|
||
form.render();
|
||
var images = document.querySelectorAll('.clickable-img');
|
||
images.forEach(function(img) {
|
||
img.addEventListener('click', function() {
|
||
layer.photos({
|
||
photos: {
|
||
"title": "图片查看", // 弹出框标题
|
||
"id": "photo-viewer", // 唯一标识
|
||
"start": 0, // 初始显示的图片索引
|
||
"data": [{
|
||
"src": img.src, // 图片的src地址
|
||
"alt": img.alt // 图片的alt文本
|
||
}]
|
||
},
|
||
anim: 5 // 设置动画效果，5为淡入淡出
|
||
});
|
||
});
|
||
});
|
||
};
|
||
},
|
||
failCallBack: function(result){
|
||
alert(result.message);
|
||
}
|
||
})
|
||
// 当前弹出层，防止ID被覆盖
|
||
var parentIndex = layer.index;
|
||
|
||
$("#qxBtn").click(function() {
|
||
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
|
||
parent.layer.close(index);
|
||
})
|
||
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |