<!DOCTYPE html>
xmlns:th="http://www.thymeleaf.org">
content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
rel="apple-touch-icon-precomposed"> html, body { background-color: #efeff4; } .mui-bar .mui-pull-left .mui-icon { padding-right: 5px; font-size: 28px; } .mui-bar .mui-btn { font-weight: normal; font-size: 17px; } .mui-bar .mui-btn-link { top: 1px; } .mui-content img { width: 100%; } .hm-description { margin: 15px; } .hm-description>li { font-size: 14px; color: #8f8f94; } .shou{ color:#ff3300; }
<header id="header" class="mui-bar mui-bar-transparent">
<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"
style="color:#666"></a>
<h1 class="mui-title"></h1>
<a class="mui-icon mui-icon-paperplane mui-pull-right"
style="color: #666"></a>
</header>
<div class="mui-content" style="background: #fff">
<div id="slider" class="mui-slider">
<div class="mui-slider-group">
<div class="mui-slider-item">
<a href="#"> <img th:src="${food.image1}">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
</div>
</div>
<div class="aui-title-h b-line">
<h3 th:text="${food.fname}"></h3>
<p th:text="${food.fdetail}"></p>
<em th:text="'¥'+${food.fprice}"></em> <i
th:text="'价格¥'+${food.fprice}"></i>
<div class="aui-title-sp ">
<span class="mui-icon-extra mui-icon-extra-heart"
th:text="'销量 '+${food.salesvolume}"></span> <span
class="mui-icon-extra mui-icon-extra-heart"
th:text="'收藏 '+${food.collection}"></span> <span
class="mui-icon-extra mui-icon-extra-heart">美食快递</span>
</div>
</div>
<div class="devider b-line"></div>
<div class="">
<div style="padding: 0 10px; margin-top: 10px" class="">
<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
<a class="mui-control-item mui-active" href="#item1">食品详情</a>
<a class="mui-control-item" href="#item2">材料</a>
<a class="mui-control-item" href="#item3">食品评价</a>
</div>
</div>
<div>
<div id="item1" class="mui-control-content mui-active"
style="height: 1200px">
<div class="aui-p">
<p th:text="${food.fname}"></p>
</div>
<div class="aui-kill aui-op">
<img th:src="${food.image2}" alt="">
</div>
<div class="aui-kill aui-op">
<img th:src="${food.image3}" alt="">
</div>
<div class="aui-kill aui-op">
<img th:src="${food.image4}" alt="">
</div>
</div>
<input type="hidden" id="fid" name="fid" th:value="${food.fid}" />
<!-- <input type="hidden" id="num" name="num" th:value="${num}" /> -->
<div id="item2" class="mui-control-content">
<ul class="mui-table-view " th:each="materiallist:${materiallist}">
<li class="mui-table-view-cell b-line"
th:text="${materiallist}"></li>
</ul>
</div>
<div id="item3" class="mui-control-content" style="text-align:center">评价</div>
</div>
</div>
<div style="height: 900px"></div>
</div>
<div style="height: 50px"></div>
<nav class="mui-bar mui-bar-tab">
<div class="t-line aui-on-cell">
<div class="aui-ons">
<a href="#"><span
class="mui-icon-extra mui-icon-extra-addpeople"></span><i>客服</i></a> <a
href="#"><span class="mui-icon-extra mui-icon-extra-university"></span><i>店铺</i></a>
<a href="#"><span
class="mui-icon-extra mui-icon-extra-heart-filled " id="obj" onclick="ou(this)"></span><i>收藏</i></a>
</div>
<input type="hidden" id="hh" value="收藏"/>
<div class="aui-onc">
<a href="#" style="margin-right: -4px" name="btn" id="btn">加入购物车</a>
<a th:href="@{./toOneOrder(fid=${food.fid})}" class="aui-got">立即购买</a>
</div>
</div>
</nav>
<script th:src="@{js/mui.min.js}"></script>
<script>
//
mui.init({
swipeBack: true //启用右滑关闭功能
});
(function($) {
$('#scroll').scroll({
indicators: true //是否显示滚动条
});
var segmentedControl = document.getElementById('segmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
var styleEl = document.querySelector('input[name="style"]:checked');
var colorEl = document.querySelector('input[name="color"]:checked');
if (styleEl && colorEl) {
var style = styleEl.value;
var color = colorEl.value;
segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
}
}
});
})(mui);
</script>
<script type="text/javascript">
$(function(){
var num=document.getElementById("num").value
var obj=document.getElementById("obj")
if(num==0){
$(obj).removeClass('shou');
}else{
$(obj).addClass('shou');
}
});
function ou(obj){
console.log($(obj).hasClass('shou'));
if($(obj).hasClass('shou')==true){
$(obj).removeClass('shou');
var gid=document.getElementById("fid").value
$.ajax({
url:"./delcollection",
data:{"fid":gid},
type:"post",
success: function (data) {
}
});
}else {
var gid=document.getElementById("fid").value
$(obj).addClass('shou');
$.ajax({
url:"./collection",
data:{"fid":gid},
type:"post",
success: function (data) {
if(data=="error"){
alert("未登录，不能收藏！")
window.location.href="login.html"
}
}
});
}
}
function addCard(){
alert("hhhh")
var gid=$("#fid").val();
$.ajax({
url:"./addcar",
data:{"fid":gid},
type:"post",
success: function (data) {
if(data=="error"){
alert("未登录，不能添加！")
window.location.href="login.html"
}
}
});
}
(function ($) {
$.extend({
tipsBox: function (options) {
options = $.extend({
obj: null, //jq对象，要在那个html标签上显示
str: "+1", //字符串，要显示的内容;也可以传一段html，如: "+1"
startSize: "12px", //动画开始的文字大小
endSize: "30px", //动画结束的文字大小
interval: 600, //动画时间间隔
color: "red", //文字颜色
callback: //回调函数
}, options);
$("body").append("" + options.str + "");
var box = $(".num");
var left = options.obj.offset().left + options.obj.width() / 2;
var top = options.obj.offset().top - options.obj.height();
box.css({
"position": "absolute",
"left": left + "px",
"top": top + "px",
"z-index": 9999,
"font-size": options.startSize,
"line-height": options.endSize,
"color": options.color
});
box.animate({
"font-size": options.endSize,
"opacity": "0",
"top": top - parseInt(options.endSize) + "px"
}, options.interval, function () {
box.remove();
options.callback();
});
}
});
})(jQuery);
function niceIn(prop){
prop.find('i').addClass('niceIn');
setTimeout(function(){
prop.find('i').removeClass('niceIn');
},1000);
}
$(function () {
$("#btn").click(function () {
alert("1111111111")
$.tipsBox({
obj: $(this),
str: "+1",
callback: function () {
}
});
niceIn($(this));
});
});
<script type="text/javascript">
mui.init({
swipeBack: true //启用右滑关闭功能
});
var slider = document.getElementById("slider");
mui('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
switch (this.value) {
case 'static':
document.getElementById("img1").className = "";
document.getElementById("slider").classList.add("mui-hidden");
break;
case 'slider':
document.getElementById("img1").className = "mui-hidden";
if(slider.classList.contains("mui-hidden")){
document.getElementById("slider").classList.remove("mui-hidden");
}
break;
}
}
});
