You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

468 lines
18 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!-- 首页 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>首页</title>
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 样式 -->
<link rel="stylesheet" href="../../css/style.css" />
<!-- 主题(主要颜色设置) -->
<link rel="stylesheet" href="../../css/theme.css" />
<!-- 通用的css -->
<link rel="stylesheet" href="../../css/common.css" />
</head>
<style>
html::after {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
content: '';
display: block;
background-attachment: fixed;
background-size: cover;
background-position: center;
z-index: -1;
}
#swiper {
overflow: hidden;
}
#swiper .layui-carousel-ind li {
width: 16px;
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
border-radius: 3px;
background-color: #f7f7f7;
box-shadow: 0 0 6px rgba(255,0,0,.8);
}
#swiper .layui-carousel-ind li.layui-this {
width: 18px;
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
border-radius: 3px;
background-color: rgba(233, 121, 19, 1);
box-shadow: 0 0 6px rgba(255,0,0,.8);
}
input#buynumber::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }
input#buynumber[type="number"]{ -moz-appearance: textfield; }
.message-container {width: 100%}
.detail-tab .layui-tab-card>.layui-tab-title .layui-this {
background-color: rgba(255, 0, 0, 0.36);
color: #fff;
font-size: 14px;
}
.data-detail {
padding-bottom: 20px;
}
.data-detail .layui-breadcrumb a.first {
color: rgba(233, 121, 19, 1) !important;
}
</style>
<body>
<div id="app">
<div class="data-detail">
<div class="data-detail-breadcrumb" :style='{"padding":"0 10px","boxShadow":"2px 0 6px ","margin":"20px auto","borderColor":"rgba(238, 219, 219, 0.3)","backgroundColor":"rgba(21, 20, 20, 1)","borderRadius":"4px","borderWidth":"0","borderStyle":"solid","height":"70px"}'>
<span class="layui-breadcrumb">
<a class="first" :style='{"padding":"8px 10px","boxShadow":"0 0 6px rgba(8, 8, 8, 1)","margin":"0 5px","borderColor":"rgba(255,0,0,.3)","backgroundColor":"rgba(8, 8, 8, 1)","color":"rgba(233, 121, 19, 1)","borderRadius":"0","borderWidth":"0","fontSize":"25px","borderStyle":"solid"}' href="../home/home.html">首页</a>
<a><cite :style='{"padding":"8px 15px","boxShadow":"0 0 6px rgba(8, 8, 8, 1)","margin":"0 15px","borderColor":"rgba(255,0,0,.3)","backgroundColor":"rgba(8, 8, 8, 1)","color":"rgba(228, 198, 208, 1)","borderRadius":"4px","borderWidth":"0","fontSize":"18px","borderStyle":"solid"}'>{{title}}</cite></a>
</span>
</div>
<div class="layui-row" style="display: flex">
<div class="layui-col-md5" style="width:450px">
<!-- <div class="layui-carousel" id="swiper">
<div carousel-item id="swiper-item">
<div v-for="(item,index) in swiperList" v-bind:key="index">
<img class="swiper-item" :src="item.img">
</div>
</div>
</div> -->
<div class="layui-carousel" id="swiper" :style='{"boxShadow":"3px 0 10px ","margin":"0 auto","borderColor":"rgba(233, 121, 19, 1)","borderRadius":"0px 8px 16px 0px","borderWidth":"0","width":"450px","borderStyle":"solid","height":"400px"}'>
<div carousel-item>
<div v-if="swiperList.length" v-for="(item,index) in swiperList" :key="index">
<img style="width: 100%;height: 100%;object-fit:cover;" :src="item" />
</div>
</div>
</div>
</div>
<div class="layui-col-md7" style="padding-left: 20px;flex: 1;" :style='{"padding":"2px","boxShadow":"2px 0 6px #177cb0","margin":"0 0 0 20px","borderColor":"rgba(23, 124, 176, 1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"1px","borderStyle":"solid"}'>
<h1 style="position: relative;" :style='{"padding":"10px 15px","boxShadow":"0 0 3px #177cb0","borderColor":"rgba(255, 255, 255, 1)","backgroundColor":"#fff","color":"rgba(66, 80, 102, 1)","borderRadius":"0","textAlign":"center","borderWidth":"0","fontSize":"20px","borderStyle":"solid"}' class="title">{{title}}</h1>
<div :style='{"padding":"6px 15px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(68, 206, 246, 1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","borderStyle":"solid"}' class="detail-item">
<span :style='{"padding":"0 12px 0 0","minWidth":"120px","fontSize":"16px","color":"rgba(61, 59, 79, 1)","textAlign":"left"}'>关联表id</span>
<span style="word-break: break-all" :style='{"padding":"5px 15px","boxShadow":"0 0 0px ","borderColor":"rgba(255, 251, 251, 0.3)","backgroundColor":"#fff","color":"rgba(6, 82, 121, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"0","width":"auto","lineHeight":"34px","fontSize":"16px","borderStyle":"solid"}' class="desc">
{{detail.refid}}
</span>
</div>
<div :style='{"padding":"6px 15px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(68, 206, 246, 1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","borderStyle":"solid"}' class="detail-item">
<span :style='{"padding":"0 12px 0 0","minWidth":"120px","fontSize":"16px","color":"rgba(61, 59, 79, 1)","textAlign":"left"}'>用户名:</span>
<span style="word-break: break-all" :style='{"padding":"5px 15px","boxShadow":"0 0 0px ","borderColor":"rgba(255, 251, 251, 0.3)","backgroundColor":"#fff","color":"rgba(6, 82, 121, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"0","width":"auto","lineHeight":"34px","fontSize":"16px","borderStyle":"solid"}' class="desc">
{{detail.nickname}}
</span>
</div>
<div :style='{"padding":"6px 15px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(68, 206, 246, 1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","borderStyle":"solid"}' class="detail-item">
<span :style='{"padding":"0 12px 0 0","minWidth":"120px","fontSize":"16px","color":"rgba(61, 59, 79, 1)","textAlign":"left"}'>评论内容:</span>
<span style="word-break: break-all" :style='{"padding":"5px 15px","boxShadow":"0 0 0px ","borderColor":"rgba(255, 251, 251, 0.3)","backgroundColor":"#fff","color":"rgba(6, 82, 121, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"0","width":"auto","lineHeight":"34px","fontSize":"16px","borderStyle":"solid"}' class="desc">
{{detail.content}}
</span>
</div>
<div :style='{"padding":"6px 15px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(68, 206, 246, 1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","borderStyle":"solid"}' class="detail-item">
<span :style='{"padding":"0 12px 0 0","minWidth":"120px","fontSize":"16px","color":"rgba(61, 59, 79, 1)","textAlign":"left"}'>回复内容:</span>
<span style="word-break: break-all" :style='{"padding":"5px 15px","boxShadow":"0 0 0px ","borderColor":"rgba(255, 251, 251, 0.3)","backgroundColor":"#fff","color":"rgba(6, 82, 121, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"0","width":"auto","lineHeight":"34px","fontSize":"16px","borderStyle":"solid"}' class="desc">
{{detail.reply}}
</span>
</div>
</div>
</div>
<div class="layui-row detail-tab">
<div class="layui-tab layui-tab-card" :style='{"boxShadow":"0 0 2px#44cef6 ","borderColor":"rgba(46, 78, 126, 1)","backgroundColor":"#fff","borderRadius":"4px","borderStyle":"solid","borderWidth":"1px"}' style="overflow: hidden;">
<ul class="layui-tab-title" :style='{"color":"rgba(76, 141, 174, 1)","backgroundColor":"rgba(224, 240, 233, 1)","fontSize":"16px"}'>
<li>评论</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item">
<div class="message-container">
<form class="layui-form message-form" :style='{"padding":"20px","boxShadow":"2px px ","margin":"0 0 20px 0","borderColor":"rgba(100, 104, 105, 1)","backgroundColor":"#fff","borderRadius":"6px","borderWidth":"0","borderStyle":"solid"}'>
<div class="layui-form-item layui-form-text" style="display: flex;align-items: center;margin:0">
<label style="width: auto;" :style='{"padding":"0","minWidth":"65px","fontSize":"14px","color":"rgba(13, 10, 10, 1)","textAlign":"left"}' class="layui-form-label">评论</label>
<div class="layui-input-block" style="margin:0;flex:1;">
<textarea :style='{"padding":"10px","boxShadow":"0 0 6px rgba(107, 110, 111, 1)","borderColor":"rgba(107, 110, 111, 1)","backgroundColor":"#fff","color":"rgba(140, 67, 86, 1)","borderRadius":"6px","borderWidth":"0","fontSize":"14px","borderStyle":"solid","height":"120px"}' name="content" required lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button :style='{"padding":"0 10px","boxShadow":"2px 0 6px #70f3ff","margin":"10px 5px 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(112, 243, 255, 1)","color":"#fff","borderRadius":"10px","borderWidth":"0","width":"auto","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}' class="layui-btn btn-submit" lay-submit lay-filter="*">立即提交</button>
<button :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,.3)","margin":"10px 5px 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(238, 101, 101, 0.42)","color":"rgba(133, 125, 125, 1)","borderRadius":"10px","borderWidth":"0","width":"auto","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}' type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<div class="message-list" :style='{"padding":"0 20px 20px","boxShadow":"2px 0 6px ","margin":"0","borderColor":"rgba(140, 134, 134, 0.8)","backgroundColor":"#fff","borderRadius":"5px","borderWidth":"1px","borderStyle":"solid"}'>
<div :style='{"padding":"20px 0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","borderStyle":"solid"}' class="message-item" v-for="(item,index) in dataList" v-bind:key="index">
<div class="username-container">
<img :style='{"boxShadow":"2px 0 6px","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,.3)","borderRadius":"100%","borderWidth":"0","width":"50px","borderStyle":"solid","height":"50px"}' class="avator" src="http://codegen.caihongy.cn/20210105/ced7a383a88747a18e5d5fa3b99d2b06.png">
<span style="display: inline-block;" :style='{"padding":"0 10px","boxShadow":"0 0 0px","margin":"0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","color":"rgba(73, 49, 49, 1)","borderRadius":"4px","borderWidth":"0","width":"auto","lineHeight":"28px","fontSize":"16px","borderStyle":"solid"}' class="username">{{item.nickname}}</span>
</div>
<div class="content" style="margin: 0;flex: 1;">
<span style="display: inline-block;" :style='{"padding":"8px","boxShadow":"0 0 0px ","margin":"8px 0 0 50px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 0.3)","color":"rgba(114, 94, 130, 1)","borderRadius":"4px","borderWidth":"0","fontSize":"15px","borderStyle":"solid"}' class="message">
{{item.content}}
</span>
</div>
<div v-if="item.reply" class="content" style="margin: 0;flex: 1;">
<span style="display: inline-block;" :style='{"padding":"8px","boxShadow":"0 0 0px ","margin":"8px 0 0 50px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 0.3)","color":"rgba(114, 94, 130, 1)","borderRadius":"4px","borderWidth":"0","fontSize":"15px","borderStyle":"solid"}' class="message">
回复:{{item.reply}}
</span>
</div>
</div>
</div>
<div class="pager" id="pager"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../layui/layui.js"></script>
<script src="../../js/vue.js"></script>
<!-- 组件配置信息 -->
<script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 -->
<script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script>
<script>
var vue = new Vue({
el: '#app',
data: {
// 轮播图
swiperList: [],
// 数据详情
detail: {
id: 0
},
// 商品标题
title: '',
// 倒计时
count: 0,
// 加入购物车数量
buynumber: 1,
// 当前详情页表
detailTable: 'discussdianyingxinxi',
// 评价列表
dataList: [],
// 选座座位列表
numberList: []
},
// 倒计时效果
computed: {
SecondToDate: function() {
var time = this.count;
if (null != time && "" != time) {
if (time > 60 && time < 60 * 60) {
time =
parseInt(time / 60.0) +
"分钟" +
parseInt((parseFloat(time / 60.0) - parseInt(time / 60.0)) * 60) +
"秒";
} else if (time >= 60 * 60 && time < 60 * 60 * 24) {
time =
parseInt(time / 3600.0) +
"小时" +
parseInt(
(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
) +
"分钟" +
parseInt(
(parseFloat(
(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
) -
parseInt(
(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
)) *
60
) +
"秒";
} else if (time >= 60 * 60 * 24) {
time =
parseInt(time / 3600.0 / 24) +
"天" +
parseInt(
(parseFloat(time / 3600.0 / 24) - parseInt(time / 3600.0 / 24)) *
24
) +
"小时" +
parseInt(
(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
) +
"分钟" +
parseInt(
(parseFloat(
(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
) -
parseInt(
(parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60
)) *
60
) +
"秒";
} else {
time = parseInt(time) + "秒";
}
}
return time;
}
},
// 清除定时器
destroyed: function() {
window.clearInterval(this.inter);
},
methods: {
jump(url) {
jump(url)
},
isAuth(tablename, button) {
return isFrontAuth(tablename, button)
},
// 倒计时初始化
countDown() {
let reversetime = new Date(this.detail.reversetime).getTime()
let now = new Date().getTime();
let count = reversetime - now;
if (count > 0) {
this.count = count / 1000
var _this = this;
this.inter = window.setInterval(function() {
_this.count = _this.count - 1;
if (_this.count < 0) {
window.clearInterval(_this.inter);
layer.msg("活动已结束", {
time: 2000,
icon: 5
})
}
}, 1000);
}
},
// 下载文件
downFile(url) {
var download = $("#download");
download.append(
"<a id=\"down\" href=\"aaaa.txt\" target=\"_blank\" download=\"aaaa.txt\" style=\"display:none\">下载该文件</a>");
console.log(download);
$("#down")[0].click();
},
// 跨表
onAcrossTap(acrossTable){
localStorage.setItem('crossTable',`discussdianyingxinxi`);
localStorage.setItem('crossObj', JSON.stringify(this.detail));
jump(`../${acrossTable}/add.html?corss=true`);
},
}
})
layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage'], function() {
var layer = layui.layer;
var element = layui.element;
var form = layui.form;
var carousel = layui.carousel;
var http = layui.http;
var jquery = layui.jquery;
var laypage = layui.laypage;
var limit = 10;
// 数据ID
var id = http.getParam('id');
vue.detail.id = id;
// 商品信息
http.request(`${vue.detailTable}/detail/` + id, 'get', {}, function(res) {
// 详情信息
vue.detail = res.data
// var swiperItemHtml = '';
// for (let item of vue.swiperList) {
// swiperItemHtml +=
// '<div>' +
// '<img class="swiper-item" style="width: 100%;height: 100%;object-fit:cover;" src="' + item + '">' +
// '</div>';
// }
// jquery('#swiper-item').html(swiperItemHtml);
// 轮播图
vue.$nextTick(() => {
carousel.render({
elem: '#swiper',
width: '450px',
height: '400px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
});
})
// carousel.render({
// elem: '#swiper',
// width: swiper.width,height:swiper.height,
// arrow: swiper.arrow,
// anim: swiper.anim,
// interval: swiper.interval,
// indicator: swiper.indicator
// });
});
// 获取评论
http.request(`discuss${vue.detailTable}/list`, 'get', {
page: 1,
limit: limit,
refid : vue.detail.id
}, function(res) {
vue.dataList = res.data.list
// 分页
laypage.render({
elem: 'pager',
count: res.data.total,
limit: limit,
jump: function(obj, first) {
//首次不执行
if (!first) {
http.request(`discuss${vue.detailTable}/list`, 'get', {
page: obj.curr,
limit: obj.limit,
refid : vue.detail.id
}, function(res) {
vue.dataList = res.data.list
})
}
}
});
})
// 提交评论
form.on('submit(*)', function(data) {
data = data.field;
data.userid = localStorage.getItem('userid')
data.nickname = localStorage.getItem('adminName')
data.refid = vue.detail.id
http.requestJson(`discuss${vue.detailTable}/save`, 'post', data, function(res) {
layer.msg('评论成功', {
time: 2000,
icon: 6
}, function() {
window.location.reload();
});
return false
});
return false
});
});
</script>
</body>
</html>