package com.how2java.tmall.pojo;
import java.util.Date;
import java.util.List;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.Table;
import javax.persistence.Transient;

import org.springframework.data.elasticsearch.annotations.Document;

import com.fasterxml.jackson.annotation.JsonIgnoreProperties;

@Entity
@Table(name = "product")
@JsonIgnoreProperties({ "handler","hibernateLazyInitializer"})
@Document(indexName = "tmall_springboot",type = "product")
public class Product {
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	@Column(name = "id")
	int id;

	@ManyToOne
	@JoinColumn(name="cid")
	private Category category;

	//如果既没有指明 关联到哪个Column,又没有明确要用@Transient忽略，那么就会自动关联到表对应的同名字段
	private String name;
	private String subTitle;
	private float originalPrice;
	private float promotePrice;
	private int stock;
	private Date createDate;

	@Transient
	private ProductImage firstProductImage;
	@Transient
	private List<ProductImage> productSingleImages;
	@Transient
	private List<ProductImage> productDetailImages;
	@Transient
	private int reviewCount;
	@Transient
	private int saleCount;

	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public Category getCategory() {
		return category;
	}
	public void setCategory(Category category) {
		this.category = category;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getSubTitle() {
		return subTitle;
	}
	public void setSubTitle(String subTitle) {
		this.subTitle = subTitle;
	}
	public float getOriginalPrice() {
		return originalPrice;
	}
	public void setOriginalPrice(float originalPrice) {
		this.originalPrice = originalPrice;
	}
	public float getPromotePrice() {
		return promotePrice;
	}
	public void setPromotePrice(float promotePrice) {
		this.promotePrice = promotePrice;
	}
	public int getStock() {
		return stock;
	}
	public void setStock(int stock) {
		this.stock = stock;
	}
	public Date getCreateDate() {
		return createDate;
	}
	public void setCreateDate(Date createDate) {
		this.createDate = createDate;
	}
	public ProductImage getFirstProductImage() {
		return firstProductImage;
	}
	public void setFirstProductImage(ProductImage firstProductImage) {
		this.firstProductImage = firstProductImage;
	}
	public List<ProductImage> getProductSingleImages() {
		return productSingleImages;
	}
	public void setProductSingleImages(List<ProductImage> productSingleImages) {
		this.productSingleImages = productSingleImages;
	}
	public List<ProductImage> getProductDetailImages() {
		return productDetailImages;
	}
	public void setProductDetailImages(List<ProductImage> productDetailImages) {
		this.productDetailImages = productDetailImages;
	}
	public int getReviewCount() {
		return reviewCount;
	}
	public void setReviewCount(int reviewCount) {
		this.reviewCount = reviewCount;
	}
	public int getSaleCount() {
		return saleCount;
	}
	public void setSaleCount(int saleCount) {
		this.saleCount = saleCount;
	}
	@Override
	public String toString() {
		return "Product [id=" + id + ", category=" + category + ", name=" + name + ", subTitle=" + subTitle
				+ ", originalPrice=" + originalPrice + ", promotePrice=" + promotePrice + ", stock=" + stock
				+ ", createDate=" + createDate + ", firstProductImage=" + firstProductImage + ", reviewCount="
				+ reviewCount + ", saleCount=" + saleCount + "]";
	}

}

package com.how2java.tmall.pojo;

import java.util.Date;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.Table;

import com.fasterxml.jackson.annotation.JsonIgnoreProperties;

@Entity
@Table(name = "review")
@JsonIgnoreProperties({ "handler","hibernateLazyInitializer" })
public class Review {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id")
    private int id;

    @ManyToOne
    @JoinColumn(name="uid")

    private User user;

    @ManyToOne
    @JoinColumn(name="pid")

    private Product product;

    private String content;
    private Date createDate;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
    public Date getCreateDate() {
        return createDate;
    }
    public void setCreateDate(Date createDate) {
        this.createDate = createDate;
    }

    public User getUser() {
        return user;
    }
    public void setUser(User user) {
        this.user = user;
    }
    public Product getProduct() {
        return product;
    }
    public void setProduct(Product product) {
        this.product = product;
    }
}

package com.how2java.tmall.dao;
 
import java.util.List;

import org.springframework.data.jpa.repository.JpaRepository;

import com.how2java.tmall.pojo.Product;
import com.how2java.tmall.pojo.Review;

public interface ReviewDAO extends JpaRepository<Review,Integer>{

	List<Review> findByProductOrderByIdDesc(Product product);
	int countByProduct(Product product);

}

package com.how2java.tmall.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.cache.annotation.CacheConfig;
import org.springframework.cache.annotation.CacheEvict;
import org.springframework.cache.annotation.Cacheable;
import org.springframework.stereotype.Service;

import com.how2java.tmall.dao.ReviewDAO;
import com.how2java.tmall.pojo.Product;
import com.how2java.tmall.pojo.Review;

@Service
public class ReviewService {

	@Autowired ReviewDAO reviewDAO;
	@Autowired ProductService productService;

    public void add(Review review) {
    	reviewDAO.save(review);
    }

    public List<Review> list(Product product){
        List<Review> result =  reviewDAO.findByProductOrderByIdDesc(product);
        return result;
    }

    public int getCount(Product product) {
    	return reviewDAO.countByProduct(product);
    }
	
}

package com.how2java.tmall.dao;

import java.util.List;

import org.springframework.data.jpa.repository.JpaRepository;

import com.how2java.tmall.pojo.Order;
import com.how2java.tmall.pojo.OrderItem;
import com.how2java.tmall.pojo.Product;
import com.how2java.tmall.pojo.User;

public interface OrderItemDAO extends JpaRepository<OrderItem,Integer>{
	List<OrderItem> findByOrderOrderByIdDesc(Order order);
	List<OrderItem> findByProduct(Product product);
}

package com.how2java.tmall.service;

import com.how2java.tmall.dao.OrderItemDAO;
import com.how2java.tmall.pojo.Order;
import com.how2java.tmall.pojo.OrderItem;
import com.how2java.tmall.pojo.Product;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class OrderItemService {
	@Autowired OrderItemDAO orderItemDAO;
	@Autowired ProductImageService productImageService;

	public void fill(List<Order> orders) {
		for (Order order : orders)
			fill(order);
	}
	public void update(OrderItem orderItem) {
		orderItemDAO.save(orderItem);
	}

	public void fill(Order order) {
		List<OrderItem> orderItems = listByOrder(order);
		float total = 0;
		int totalNumber = 0;
		for (OrderItem oi :orderItems) {
			total+=oi.getNumber()*oi.getProduct().getPromotePrice();
			totalNumber+=oi.getNumber();
			productImageService.setFirstProdutImage(oi.getProduct());
		}
		order.setTotal(total);
		order.setOrderItems(orderItems);
		order.setTotalNumber(totalNumber);
		order.setOrderItems(orderItems);
	}

	public void add(OrderItem orderItem) {
		orderItemDAO.save(orderItem);
	}
	public OrderItem get(int id) {
		return orderItemDAO.findOne(id);
	}

	public void delete(int id) {
		orderItemDAO.delete(id);
	}

	public int getSaleCount(Product product) {
		List<OrderItem> ois =listByProduct(product);
		int result =0;
		for (OrderItem oi : ois) {
			if(null!=oi.getOrder())
				if(null!= oi.getOrder() && null!=oi.getOrder().getPayDate())
					result+=oi.getNumber();
		}
		return result;
	}

	public List<OrderItem> listByProduct(Product product) {
		return orderItemDAO.findByProduct(product);
	}
	public List<OrderItem> listByOrder(Order order) {
		return orderItemDAO.findByOrderOrderByIdDesc(order);
	}

}

package com.how2java.tmall.service;

import com.how2java.tmall.dao.ProductDAO;
import com.how2java.tmall.pojo.Category;
import com.how2java.tmall.pojo.Product;
import com.how2java.tmall.util.Page4Navigator;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.List;

@Service
public class ProductService  {
	
	@Autowired ProductDAO productDAO;
	@Autowired CategoryService categoryService;
	@Autowired ProductImageService productImageService;
	@Autowired OrderItemService orderItemService;
	@Autowired ReviewService reviewService;

	public void add(Product bean) {
		productDAO.save(bean);
	}

	public void delete(int id) {
		productDAO.delete(id);
	}

	public Product get(int id) {
		return productDAO.findOne(id);
	}

	public void update(Product bean) {
		productDAO.save(bean);
	}

	public Page4Navigator<Product> list(int cid, int start, int size,int navigatePages) {
    	Category category = categoryService.get(cid);
    	Sort sort = new Sort(Sort.Direction.DESC, "id");
    	Pageable pageable = new PageRequest(start, size, sort);    	
    	Page<Product> pageFromJPA =productDAO.findByCategory(category,pageable);
    	return new Page4Navigator<>(pageFromJPA,navigatePages);
	}

	public void fill(List<Category> categorys) {
		for (Category category : categorys) {
			fill(category);
		}
	}
	public void fill(Category category) {
		List<Product> products = listByCategory(category);
		productImageService.setFirstProdutImages(products);
		category.setProducts(products);
	}

	public void fillByRow(List<Category> categorys) {
		int productNumberEachRow = 8;
		for (Category category : categorys) {
			List<Product> products =  category.getProducts();
			List<List<Product>> productsByRow =  new ArrayList<>();
			for (int i = 0; i < products.size(); i+=productNumberEachRow) {
				int size = i+productNumberEachRow;
				size= size>products.size()?products.size():size;
				List<Product> productsOfEachRow =products.subList(i, size);
				productsByRow.add(productsOfEachRow);
			}
			category.setProductsByRow(productsByRow);
		}
	}

	public List<Product> listByCategory(Category category){
		return productDAO.findByCategoryOrderById(category);
	}

	public void setSaleAndReviewNumber(Product product) {
		int saleCount = orderItemService.getSaleCount(product);
		product.setSaleCount(saleCount);

		int reviewCount = reviewService.getCount(product);
		product.setReviewCount(reviewCount);

	}

	public void setSaleAndReviewNumber(List<Product> products) {
		for (Product product : products)
			setSaleAndReviewNumber(product);
	}

}

    @GetMapping("/foreproduct/{pid}")
    public Object product(@PathVariable("pid") int pid) {
        Product product = productService.get(pid);

        List<ProductImage> productSingleImages = productImageService.listSingleProductImages(product);
        List<ProductImage> productDetailImages = productImageService.listDetailProductImages(product);
        product.setProductSingleImages(productSingleImages);
        product.setProductDetailImages(productDetailImages);

        List<PropertyValue> pvs = propertyValueService.list(product);
        List<Review> reviews = reviewService.list(product);
        productService.setSaleAndReviewNumber(product);
        productImageService.setFirstProdutImage(product);

        Map<String,Object> map= new HashMap<>();
        map.put("product", product);
        map.put("pvs", pvs);
        map.put("reviews", reviews);

        return Result.success(map);
    }

package com.how2java.tmall.web;

import com.how2java.tmall.pojo.*;
import com.how2java.tmall.service.*;
import com.how2java.tmall.util.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.util.HtmlUtils;

import javax.servlet.http.HttpSession;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
public class ForeRESTController {
    @Autowired
    CategoryService categoryService;
    @Autowired
    ProductService productService;
    @Autowired
    UserService userService;
    @Autowired
    ProductImageService productImageService;
    @Autowired
    PropertyValueService propertyValueService;
    @Autowired
    OrderItemService orderItemService;
    @Autowired
    ReviewService reviewService;

    @GetMapping("/forehome")
    public Object home() {
        List<Category> cs= categoryService.list();
        productService.fill(cs);
        productService.fillByRow(cs);
        categoryService.removeCategoryFromProduct(cs);
        
        return cs;
    }    
    @PostMapping("/foreregister")
    public Object register(@RequestBody User user) {
        String name =  user.getName();
        String password = user.getPassword();
        name = HtmlUtils.htmlEscape(name);
        user.setName(name);
        boolean exist = userService.isExist(name);
            
        if(exist){
            String message ="用户名已经被使用,不能使用";
            return Result.fail(message);
        }
        
		user.setPassword(password);
		
        userService.add(user);
        
    	return Result.success();
    }

    @PostMapping("/forelogin")
    public Object login(@RequestBody User userParam, HttpSession session) {
        String name =  userParam.getName();
        name = HtmlUtils.htmlEscape(name);

        User user =userService.get(name,userParam.getPassword());
        if(null==user){
            String message ="账号密码错误";
            return Result.fail(message);
        }
        else{
            session.setAttribute("user", user);
            return Result.success();
        }
    }

    @GetMapping("/foreproduct/{pid}")
    public Object product(@PathVariable("pid") int pid) {
        Product product = productService.get(pid);

        List<ProductImage> productSingleImages = productImageService.listSingleProductImages(product);
        List<ProductImage> productDetailImages = productImageService.listDetailProductImages(product);
        product.setProductSingleImages(productSingleImages);
        product.setProductDetailImages(productDetailImages);

        List<PropertyValue> pvs = propertyValueService.list(product);
        List<Review> reviews = reviewService.list(product);
        productService.setSaleAndReviewNumber(product);
        productImageService.setFirstProdutImage(product);

        Map<String,Object> map= new HashMap<>();
        map.put("product", product);
        map.put("pvs", pvs);
        map.put("reviews", reviews);

        return Result.success(map);
    }
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/fore/header::html" ></head>
<body>
<div id="workingArea">
    <div th:replace="include/fore/top::html" ></div>
    <div th:replace="include/fore/search::html" ></div>
    <div th:replace="include/fore/product/productPage::html" ></div>
    <div th:replace="include/fore/modal4login::html" ></div>
    <div th:replace="include/fore/footer::html" ></div>
</div>
</body>
</html>

<div th:fragment="html">
    <script>
        $(function(){
            var pid = getUrlParms("pid");
            var data4Vue = {
                uri:'foreproduct',
                p:'',
                category:null,
                firstProductImage:null,
                pvs:[],
                reviews:[],
                showDetail:true,
                showReview:false,
                user:{name:'', password:''}
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                    linkDefaultActions();
                    this.load();
                },
                methods: {
                    load:function(){
                        var url =  this.uri+"/"+pid;
                        axios.get(url).then(function(response) {
                            var result = response.data;
                            vue.p=result.data.product;
                            vue.pvs=result.data.pvs;
                            vue.reviews=result.data.reviews;

                            vue.category = vue.p.category;
                            vue.firstProductImage = vue.p.firstProductImage;
                            vue.$nextTick(function(){
                                imgAndInfoPageRegisterListeners(vue);
                            })
                        });

                    },
                    toggle2Detail:function(){
                        this.showDetail=true;
                        this.showReview=false;
                    },
                    toggle2Review:function(){
                        this.showDetail=false;
                        this.showReview=true;
                    }
                }
            });

        });
    </script>

    <title>模仿天猫官网 -- {{p.name}}</title>
    <div class="categoryPictureInProductPageDiv">
        <img v-if="category!=null" class="categoryPictureInProductPage" :src="'img/category/'+category.id+'.jpg'">
    </div>
    <div class="productPageDiv">
        <div th:replace="include/fore/product/imgAndInfo::html" ></div>
        <div th:replace="include/fore/product/productReview::html" ></div>
        <div th:replace="include/fore/product/productDetail::html" ></div>
    </div>
</div>

<div th:fragment="html"> 

<script> 
function imgAndInfoPageRegisterListeners(vue){
    var stock = vue.p.stock;
    $(".productNumberSetting").keyup(function(){
        var num= $(".productNumberSetting").val();
        num = parseInt(num);
        if(isNaN(num))
            num= 1;
        if(num<=0)
            num = 1;
        if(num>stock)
            num = stock;
        $(".productNumberSetting").val(num);
    });
     
    $(".increaseNumber").click(function(){
        var num= $(".productNumberSetting").val();
        num++;
        if(num>stock)
            num = stock;
        $(".productNumberSetting").val(num);
    });
    $(".decreaseNumber").click(function(){
        var num= $(".productNumberSetting").val();
        --num;
        if(num<=0)
            num=1;
        $(".productNumberSetting").val(num);
    });
     
    $(".addCartButton").removeAttr("disabled");
    $(".addCartLink").click(function(){
        var url = "forecheckLogin";
        axios.get(url).then(function(response) {
            if(0==response.data.code){
                var pid = vue.p.id;
                var num= $(".productNumberSetting").val();
                var url =  "foreaddCart?pid="+pid+"&num="+num;
	            axios.get(url).then(function(response) {
		        	var result = response.data;
	                if(0==result.code){
	                    $(".addCartButton").html("已加入购物车");
	                    $(".addCartButton").attr("disabled","disabled");
	                    $(".addCartButton").css("background-color","lightgray")
	                    $(".addCartButton").css("border-color","lightgray")
	                    $(".addCartButton").css("color","black")
	                }
				});	
            }
            else{
                $("#loginModal").modal('show');                     
            }        	
        });
    });
    $(".buyLink").click(function(){
        var url = "forecheckLogin";
        axios.get(url).then(function(response) {
        	if(0==response.data.code){
                 var pid = vue.p.id;
                 var num= $(".productNumberSetting").val();
	             var url =  "forebuyone?pid="+pid+"&num="+num;
	             axios.get(url).then(function(response) {
	             	var oiid = response.data;
	             	location.href="buy?oiid="+oiid;	
	             });	            		
			}
        	else{
                $("#loginModal").modal('show');                     
        	}
        });
        return false;
    });
     
    $("button.loginSubmitButton").click(function(){
        var url =  "forelogin";
        if(0==vue.user.name.length){
            $("span.errorMessage").html("请输入用户名");
            $("div.loginErrorMessageDiv").css("visibility","visible");
            return;
        }
        if(0==vue.user.password.length){
            $("span.errorMessage").html("请输入密码");
            $("div.loginErrorMessageDiv").css("visibility","visible");
            return;
        }                    
        
        axios.post(url,vue.user).then(function(response) {
        	var result = response.data;
        	if(result.code==0){
        		location.href="product?pid="+vue.p.id;
        	}
        	else{
                $("span.errorMessage").html(result.message);
                $("div.loginErrorMessageDiv").css("visibility","visible");	                    		
        	}
        });
    });
     
    $("img.smallImage").mouseenter(function(){
        var bigImageURL = $(this).attr("bigImageURL");
        $("img.bigImg").attr("src",bigImageURL);
    });
     
    $("img.bigImg").load(
        function(){
            $("img.smallImage").each(function(){
                var bigImageURL = $(this).attr("bigImageURL");
                img = new Image();
                img.src = bigImageURL;
                 
                img.onload = function(){
                    $("div.img4load").append($(img));
                };
            });     
        }
    );
}
 
</script>
	 
	<div class="imgAndInfo">
	 
	    <div class="imgInimgAndInfo">
	        <img v-if="firstProductImage!=null" :src="'img/productSingle/'+firstProductImage.id+'.jpg'" class="bigImg">
	        <div class="smallImageDiv">
                <img v-for="pi in p.productSingleImages" :src="'img/productSingle_small/'+pi.id+'.jpg'" :bigImageURL="'img/productSingle/'+pi.id+'.jpg'" class="smallImage">
	        </div>
	        <div class="img4load hidden" ></div>
	    </div>
	
	    <div class="infoInimgAndInfo">
	         
	        <div class="productTitle">
	            {{p.name}}
	        </div>
	        <div class="productSubTitle">
	            {{p.subTitle}}
	        </div>
	
	        <div class="productPrice">
	            <div class="juhuasuan">
	                <span class="juhuasuanBig" >聚划算</span>
	                <span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
	            </div>
	
	            <div class="productPriceDiv">
	                <div class="gouwujuanDiv"><img height="16px" src="img/site/gouwujuan.png">
	                <span> 全天猫实物商品通用</span>
	                 
	                </div>
	                <div class="originalDiv">
	                    <span class="originalPriceDesc">价格</span>
	                    <span class="originalPriceYuan">¥</span>
	                    <span class="originalPrice">
	                    	{{p.originalPrice|formatMoneyFilter}}
	                    </span>
	                </div>
	
	                <div class="promotionDiv">
	                    <span class="promotionPriceDesc">促销价 </span>
	                    <span class="promotionPriceYuan">¥</span>
	                    <span class="promotionPrice">
							{{p.promotePrice|formatMoneyFilter}}
	                    </span>
	                </div>
	            </div>
	        </div>
	
	        <div class="productSaleAndReviewNumber">
	            <div>销量 <span class="redColor boldWord"> {{ p.saleCount }}</span></div>   
	            <div>累计评价 <span class="redColor boldWord"> {{ p.reviewCount }}</span></div>    
	        </div>
	        <div class="productNumber">
	            <span>数量</span>
	            <span>
	                <span class="productNumberSettingSpan">
	                <input class="productNumberSetting" type="text" value="1">
	                </span>
	                <span class="arrow">
	                    <a href="#nowhere" class="increaseNumber">
	                    <span class="updown">
	                            <img src="img/site/increase.png">
	                    </span>
	                    </a>
	                     
	                    <span class="updownMiddle"> </span>
	                    <a href="#nowhere"  class="decreaseNumber">
	                    <span class="updown">
	                            <img src="img/site/decrease.png">
	                    </span>
	                    </a>
	                     
	                </span>
	                     
	            件</span>
	            <span>库存{{p.stock}}件</span>
	        </div>
	        <div class="serviceCommitment">
	            <span class="serviceCommitmentDesc">服务承诺</span>
	            <span class="serviceCommitmentLink">
	                <a href="#nowhere">正品保证</a>
	                <a href="#nowhere">极速退款</a>
	                <a href="#nowhere">赠运费险</a>
	                <a href="#nowhere">七天无理由退换</a>
	            </span>
	        </div>    
	         
	        <div class="buyDiv">
	            <a class="buyLink" ><button class="buyButton" >立即购买</button></a>
	            <a href="#nowhere" class="addCartLink"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
	        </div>
	    </div>
	     
	    <div style="clear:both"></div>
	     
	</div>
</div>

<div th:fragment="html"> 
	<div class="productReviewDiv" v-show="showReview" >
		<div class="productReviewTopPart">
			<a  href="#nowhere" class="productReviewTopPartSelectedLink" @click="toggle2Detail">商品详情</a>
			<a  href="#nowhere" class="selected">累计评价 <span class="productReviewTopReviewLinkNumber">{{p.reviewCount}}</span> </a>
		</div>
		
		<div class="productReviewContentPart">
			<div class="productReviewItem" v-for="r in reviews">
				<div class="productReviewItemDesc">
					<div class="productReviewItemContent">
						{{r.content }}
					</div>
					<div class="productReviewItemDate">
						{{r.createDate|formatDateFilter('YYYY-MM-DD')}}
					</div>
				</div>
				<div class="productReviewItemUserInfo">
					{{r.user.anonymousName}}<span class="userInfoGrayPart">（匿名）</span>
				</div>
			
				<div style="clear:both"></div>			
			</div>
		</div>
	</div>
</div>

<div th:fragment="html"> 
	<div class="productDetailDiv" v-show="showDetail" >
		<div class="productDetailTopPart">
			<a href="#nowhere" class="productDetailTopPartSelectedLink selected">商品详情</a>
			<a href="#nowhere" class="productDetailTopReviewLink" @click="toggle2Review">累计评价 <span class="productDetailTopReviewLinkNumber">{{p.reviewCount}}</span> </a>
		</div>

		<div class="productParamterPart">
			<div class="productParamter">产品参数：</div>
			<div class="productParamterList">
				<span v-for="pv in pvs" >{{pv.property.name}}: {{pv.value | subStringFilter(0,10)}} </span>
			</div>
			<div style="clear:both"></div>
		</div>
		
		<div class="productDetailImagesPart">
			<img v-for="pi in p.productDetailImages" :src="'img/productDetail/'+pi.id+'.jpg'">
		</div>
	</div>
</div>

<div  th:fragment="html" class="modal " id="loginModal" tabindex="-1" role="dialog" >
	<div class="modal-dialog loginDivInProductPageModalDiv">
		<div class="modal-content">
			<div class="loginDivInProductPage">
				<div class="loginErrorMessageDiv">
					<div class="alert alert-danger" >
						<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
						<span class="errorMessage"></span>
					</div>
				</div>

				<div class="login_acount_text">账户登录</div>
				<div class="loginInput " >
							<span class="loginInputIcon ">
								<span class=" glyphicon glyphicon-user"></span>
							</span>
					<input v-model="user.name" placeholder="手机/会员名/邮箱" type="text">
				</div>

				<div class="loginInput " >
							<span class="loginInputIcon ">
								<span class=" glyphicon glyphicon-lock"></span>
							</span>
					<input v-model="user.password" type="password" placeholder="密码" type="text">
				</div>
				<span class="text-danger">不要输入真实的天猫账号密码</span><br><br>
				<div>
					<a class="notImplementLink" href="#nowhere">忘记登录密码</a>
					<a href="register" class="pull-right">免费注册</a>
				</div>
				<div style="margin-top:20px">
					<button class="btn btn-block redButton loginSubmitButton" type="submit">登录</button>
				</div>
			</div>
		</div>
	</div>

</div>