Merge remote-tracking branch 'origin/developer' into developer

pom.xml

@@ -106,6 +106,26 @@
             <version>1.2.6</version>
         </dependency>
 
+        <dependency>
+            <groupId>commons-codec</groupId>
+            <artifactId>commons-codec</artifactId>
+            <version>${commons-codec.version}</version>
+        </dependency>
+
+        <!--手机短信-->
+        <dependency>
+            <groupId>caimei</groupId>
+            <artifactId>smsClient</artifactId>
+            <version>1.0</version>
+        </dependency>
+
+        <!--对象存储oss-->
+        <dependency>
+            <groupId>com.aliyun.oss</groupId>
+            <artifactId>aliyun-sdk-oss</artifactId>
+            <version>3.10.2</version>
+        </dependency>
+
     </dependencies>
 
 

src/main/java/com/caimei/www/controller/authorized/document/DocumentAuthController.java

@@ -0,0 +1,98 @@
+package com.caimei.www.controller.authorized.document;
+
+import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.document.OssAuthorization;
+import com.caimei.www.service.page.DocumentAuthService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
+import org.springframework.util.StringUtils;
+import org.springframework.web.bind.annotation.*;
+import reactor.core.publisher.Mono;
+
+/**
+ * Description
+ *
+ * @author : plf
+ * @date : 2020/11/10
+ */
+@RestController
+@RequestMapping("/document")
+public class DocumentAuthController {
+
+    private DocumentAuthService documentAuthService;
+
+    @Autowired
+    public void setDocumentAuthService(DocumentAuthService documentAuthService) {
+        this.documentAuthService = documentAuthService;
+    }
+
+    /**
+     * 获取图形验证码
+     */
+    @GetMapping("/getImgVerifyCode")
+    public Mono<JsonModel> getImgVerifyCode() {
+        return documentAuthService.getImgVerifyCode();
+    }
+
+    /**
+     * oss短信登录,发送短信验证
+     */
+    @GetMapping("/note")
+    public Mono<JsonModel> ossNote(String mobile, String imgCode, String token) {
+        if (StringUtils.isEmpty(mobile) || StringUtils.isEmpty(imgCode) || StringUtils.isEmpty(token)) {
+            return Mono.just(JsonModel.error("参数异常"));
+        }
+        return documentAuthService.ossNote(mobile, imgCode, token);
+    }
+
+    /**
+     * oss手机短信验证码登录
+     */
+    @PostMapping("/mobileCodeLogin")
+    public ResponseEntity<JsonModel> mobileCodeLogin(OssAuthorization authorization) {
+        return documentAuthService.mobileCodeLogin(authorization);
+    }
+
+    /**
+     * 资料列表
+     */
+    @GetMapping("/dataList")
+    public Mono<JsonModel> dataList(@CookieValue(value = "authorizationMobile", required = false) String mobile, String name, Integer pageNum, Integer pageSize) {
+        Boolean isLogin = documentAuthService.getAuthorizationCookie(mobile);
+        if (!isLogin) {
+            return Mono.just(JsonModel.error(-99, "请登录"));
+        }
+        return documentAuthService.dataList(name, pageNum, pageSize);
+    }
+
+    /**
+     * 资料详情
+     */
+    @GetMapping("/dataDetails")
+    public Mono<JsonModel> dataDetails(@CookieValue(value = "authorizationMobile", required = false) String mobile, Integer pdfId) {
+        Boolean isLogin = documentAuthService.getAuthorizationCookie(mobile);
+        if (!isLogin) {
+            return Mono.just(JsonModel.error(-99, "请登录"));
+        }
+        if (pdfId == null) {
+            return Mono.just(JsonModel.error("参数异常"));
+        }
+        return documentAuthService.dataDetails(pdfId);
+    }
+
+    /**
+     * 更多资料
+     */
+    @GetMapping("/moreData")
+    public Mono<JsonModel> moreData(@CookieValue(value = "authorizationMobile", required = false) String mobile, Integer archiveId) {
+        Boolean isLogin = documentAuthService.getAuthorizationCookie(mobile);
+        if (!isLogin) {
+            return Mono.just(JsonModel.error(-99, "请登录"));
+        }
+        if (archiveId == null) {
+            return Mono.just(JsonModel.error("参数异常"));
+        }
+        return documentAuthService.moreData(archiveId);
+    }
+
+}

src/main/java/com/caimei/www/controller/authorized/document/DocumentController.java

@@ -0,0 +1,50 @@
+package com.caimei.www.controller.authorized.document;
+
+import com.caimei.www.controller.BaseController;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class DocumentController extends BaseController {
+    /** 资料库登录 */
+    private static final String DOCUMENT_LOGIN = "document/login";
+    /** 资料列表 */
+    private static final String DOCUMENT_LIST = "document/list";
+    /** 资料详情 */
+    private static final String DOCUMENT_DETAILS = "document/details";
+    /** PDF资料详情 */
+    private static final String DOCUMENT_PDFDETAILS = "document/pdfdetails";
+    /** 更多资料 */
+    private static final String DOCUMENT_MORECONTENT= "document/more-content";
+
+
+    /** 资料库登录 */
+    @GetMapping("/document/login.html")
+    public String dashboard() {
+        return DOCUMENT_LOGIN;
+    }
+
+    /** 资料列表 */
+    @GetMapping("/document/list.html")
+    public String documentList() {
+        return DOCUMENT_LIST;
+    }
+
+    /** 资料详情 */
+    @GetMapping("/document/details.html")
+    public String documentDetails() {
+        return DOCUMENT_DETAILS;
+    }
+
+    /** pdf资料详情 */
+    @GetMapping("/document/pdfdetails.html")
+    public String documentPdfDetail() {
+        return DOCUMENT_PDFDETAILS;
+    }
+
+    /** 更多资料 */
+    @GetMapping("/document/more-content.html")
+    public String orderSettlement() {
+        return DOCUMENT_MORECONTENT;
+    }
+}

src/main/java/com/caimei/www/mapper/DocumentAuthDao.java

@@ -0,0 +1,58 @@
+package com.caimei.www.mapper;
+
+import com.caimei.www.pojo.document.OssArchive;
+import com.caimei.www.pojo.document.OssArchivePdf;
+import com.caimei.www.pojo.document.OssAuthorization;
+import org.apache.ibatis.annotations.Mapper;
+
+import java.util.List;
+
+/**
+ * Description
+ *
+ * @author : plf
+ * @date : 2020/11/10
+ */
+@Mapper
+public interface DocumentAuthDao {
+
+    /**
+     * 判断手机号是否有权限
+     *
+     * @param mobile
+     * @return
+     */
+    OssAuthorization findOssAuthorizationByMobile(String mobile);
+
+    /**
+     * 查询资料列表
+     *
+     * @param name 商品名称，资料库名称，资料名称
+     * @return
+     */
+    List<OssArchive> findOssArchive(String name);
+
+    /**
+     * 查询该资料库下的所有文件
+     *
+     * @param archiveId 资料库id
+     * @return
+     */
+    List<OssArchivePdf> findOssArchivePdf(Integer archiveId);
+
+    /**
+     * 查询该文件资料
+     *
+     * @param pdfId
+     * @return
+     */
+    OssArchivePdf findOssArchivePdfById(Integer pdfId);
+
+    /**
+     * 根据id获取资料库
+     *
+     * @param archiveId
+     * @return
+     */
+    OssArchive getOssArchive(Integer archiveId);
+}

src/main/java/com/caimei/www/pojo/document/CookieBuilder.java

@@ -0,0 +1,73 @@
+package com.caimei.www.pojo.document;
+
+import java.text.SimpleDateFormat;
+import java.util.Date;
+import java.util.Locale;
+import java.util.TimeZone;
+
+/**
+ * Description
+ *
+ * @author : plf
+ * @date : 2020/11/12
+ */
+public class CookieBuilder {
+    private String key;
+    private String value;
+    private String expires;
+    private String domain;
+    private String path;
+
+    public CookieBuilder setKey(String key) {
+        this.key = key;
+        return this;
+    }
+
+    public CookieBuilder setValue(String value) {
+        this.value = value;
+        return this;
+    }
+
+    public CookieBuilder setMaxAge(long ms) {
+        //cookie的过期日期为GMT格式的时间。
+        Date date = new Date(System.currentTimeMillis() + ms);
+        SimpleDateFormat sdf = new SimpleDateFormat("EEE d MMM yyyy HH:mm:ss 'GMT'", Locale.US);
+        sdf.setTimeZone(TimeZone.getTimeZone("GMT"));
+        this.expires = sdf.format(date);
+        return this;
+    }
+
+    public CookieBuilder setDomain(String domain) {
+        this.domain = domain;
+        return this;
+    }
+
+    public CookieBuilder setPath(String path) {
+        this.path = path;
+        return this;
+    }
+
+    public String build() {
+        StringBuilder sb = new StringBuilder();
+        sb.append(this.key);
+        sb.append("=");
+        sb.append(this.value);
+        sb.append(";");
+        if (null != this.expires) {
+            sb.append("expires=");
+            sb.append(this.expires);
+            sb.append(";");
+        }
+        if (null != this.domain) {
+            sb.append("domain=");
+            sb.append(this.domain);
+            sb.append(";");
+        }
+        if (null != this.path) {
+            sb.append("path=");
+            sb.append(this.path);
+            sb.append(";");
+        }
+        return sb.toString();
+    }
+}

src/main/java/com/caimei/www/pojo/document/OssArchive.java

@@ -0,0 +1,63 @@
+package com.caimei.www.pojo.document;
+
+import lombok.Data;
+
+import java.io.Serializable;
+import java.util.Date;
+import java.util.List;
+
+/**
+ * Description
+ *
+ * @author : plf
+ * @date : 2020/11/11
+ */
+@Data
+public class OssArchive implements Serializable {
+    private Integer id;
+
+    /**
+     * 资料库名称
+     */
+    private String name;
+
+    /**
+     * 对应商品表id
+     */
+    private Integer productId;
+
+    /**
+     * 添加时间
+     */
+    private Date addTime;
+
+    /**
+     * 商品主图
+     */
+    private String mainImage;
+
+    /**
+     * 商品名称
+     */
+    private String productName;
+
+    /**
+     * 供应商名称
+     */
+    private String shopName;
+
+    /**
+     * 供应商id
+     */
+    private Integer shopId;
+
+    /**
+     * 资料库下PDF文件
+     */
+    private List<OssArchivePdf> pdfList;
+
+    /**
+     * 前端使用
+     */
+    private Boolean isShowDowns;
+}

src/main/java/com/caimei/www/pojo/document/OssArchivePdf.java

@@ -0,0 +1,54 @@
+package com.caimei.www.pojo.document;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import lombok.Data;
+
+import java.io.Serializable;
+import java.util.Date;
+
+/**
+ * Description
+ *
+ * @author : plf
+ * @date : 2020/11/11
+ */
+@Data
+public class OssArchivePdf implements Serializable {
+    private Integer id;
+
+    /**
+     * 对应cm_oss_archive表id
+     */
+    private Integer archiveId;
+
+    /**
+     * 对应product表id
+     */
+    private Integer productId;
+
+    /**
+     * 资料名称
+     */
+    private String name;
+
+    /**
+     * oss存储名
+     */
+    private String ossName;
+
+    /**
+     * 文件唯一标识
+     */
+    private String md5Hex;
+
+    /**
+     * 上传时间
+     */
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
+    private Date uploadTime;
+
+    /**
+     * 访问pdf链接
+     */
+    private String url;
+}

src/main/java/com/caimei/www/pojo/document/OssAuthorization.java

@@ -0,0 +1,37 @@
+package com.caimei.www.pojo.document;
+
+import lombok.Data;
+
+import java.io.Serializable;
+import java.util.Date;
+
+/**
+ * Description
+ *
+ * @author : plf
+ * @date : 2020/11/10
+ */
+@Data
+public class OssAuthorization implements Serializable {
+    private Integer id;
+
+    /**
+     * 姓名
+     */
+    private String name;
+
+    /**
+     * 手机号码
+     */
+    private String mobile;
+
+    /**
+     * 授权时间
+     */
+    private Date addTime;
+
+    /**
+     * 手机验证码
+     */
+    private String code;
+}

src/main/java/com/caimei/www/service/page/DocumentAuthService.java

@@ -0,0 +1,72 @@
+package com.caimei.www.service.page;
+
+import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.document.OssAuthorization;
+import org.springframework.http.ResponseEntity;
+import reactor.core.publisher.Mono;
+
+/**
+ * Description
+ *
+ * @author : plf
+ * @date : 2020/11/10
+ */
+public interface DocumentAuthService {
+
+    /**
+     * 获取cookie数据,判断是否登录
+     *
+     * @param authorizationMobile cookie中的数据
+     * @return
+     */
+    Boolean getAuthorizationCookie(String authorizationMobile);
+
+    /**
+     * 获取图形验证码
+     */
+    Mono<JsonModel> getImgVerifyCode();
+
+    /**
+     * oss短信登录,发送短信验证
+     *
+     * @param mobile  手机号
+     * @param imgCode 图形验证码
+     * @param token   图形token
+     * @return
+     */
+    Mono<JsonModel> ossNote(String mobile, String imgCode, String token);
+
+    /**
+     * oss手机短信验证码登录
+     *
+     * @param authorization 用户信息
+     * @return
+     */
+    ResponseEntity<JsonModel> mobileCodeLogin(OssAuthorization authorization);
+
+    /**
+     * 资料列表
+     *
+     * @param name     商品名称，资料库名称，资料名称
+     * @param pageNum  分页参数
+     * @param pageSize 分页参数
+     * @return
+     */
+    Mono<JsonModel> dataList(String name, Integer pageNum, Integer pageSize);
+
+    /**
+     * 资料详情
+     *
+     * @param pdfId 文件id
+     * @return
+     */
+    Mono<JsonModel> dataDetails(Integer pdfId);
+
+    /**
+     * 更多资料
+     *
+     * @param archiveId 资料库id
+     * @return
+     */
+    Mono<JsonModel> moreData(Integer archiveId);
+}

src/main/java/com/caimei/www/service/page/impl/DocumentAuthServiceImpl.java

@@ -0,0 +1,201 @@
+package com.caimei.www.service.page.impl;
+
+import com.aliyun.oss.OSS;
+import com.aliyun.oss.OSSClientBuilder;
+import com.caimei.www.mapper.DocumentAuthDao;
+import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.document.CookieBuilder;
+import com.caimei.www.pojo.document.OssArchive;
+import com.caimei.www.pojo.document.OssArchivePdf;
+import com.caimei.www.pojo.document.OssAuthorization;
+import com.caimei.www.service.page.DocumentAuthService;
+import com.caimei.www.service.redis.RedisService;
+import com.caimei.www.utils.ImageUtil;
+import com.caimei.www.utils.RandomCodeGenerator;
+import com.caimei.www.utils.SMSUtils;
+import com.caimei.www.utils.VerifyCodeUtils;
+import com.github.pagehelper.PageHelper;
+import com.github.pagehelper.PageInfo;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Service;
+import org.springframework.util.StringUtils;
+import reactor.core.publisher.Mono;
+
+import javax.annotation.Resource;
+import java.util.Date;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+/**
+ * Description
+ *
+ * @author : plf
+ * @date : 2020/11/10
+ */
+@Slf4j
+@Service
+public class DocumentAuthServiceImpl implements DocumentAuthService {
+    @Resource
+    private DocumentAuthDao documentAuthDao;
+
+    @Resource
+    private RedisService redisService;
+
+    @Value("${caimei.wwwDomain}")
+    private String domain;
+
+    @Value("${aliyun.accessKeyId}")
+    private String accessKeyId;
+
+    @Value("${aliyun.accessKeySecret}")
+    private String accessKeySecret;
+
+    @Value("${aliyun.bucketName}")
+    private String bucketName;
+
+    @Value("${aliyun.endpoint}")
+    private String endpoint;
+
+    @Override
+    public Boolean getAuthorizationCookie(String authorizationMobile) {
+        if (!StringUtils.isEmpty(authorizationMobile)) {
+            OssAuthorization ossAuthorization = documentAuthDao.findOssAuthorizationByMobile(authorizationMobile);
+            return ossAuthorization != null;
+        }
+        return false;
+    }
+
+    @Override
+    public Mono<JsonModel> getImgVerifyCode() {
+        Map<String, Object> jsonResult = new HashMap<>(2);
+        try {
+            VerifyCodeUtils.VerifyCode verifyCode = null;
+            String verifyCodeKey = "";
+            while (true) {
+                verifyCode = VerifyCodeUtils.createVerifyCode(200, 80, 4);
+                verifyCodeKey = "www:oss:" + verifyCode.getMd5Code();
+                boolean exists = redisService.exists(verifyCodeKey);
+                // 不存在，为了防止重复的图片验证码
+                if (!exists) {
+                    // 保存5分钟
+                    redisService.set(verifyCodeKey, verifyCode.getCode(), 5 * 60L);
+                    break;
+                }
+            }
+            jsonResult.put("baseImage", verifyCode.getBase64Image());
+            jsonResult.put("token", verifyCode.getMd5Code());
+            return Mono.just(JsonModel.success(jsonResult));
+        } catch (Exception e) {
+            return Mono.just(JsonModel.error("验证码获取失败"));
+        }
+    }
+
+    @Override
+    public Mono<JsonModel> ossNote(String mobile, String imgCode, String token) {
+        String code = (String) redisService.get("www:oss:" + token);
+        String mobileCode = RandomCodeGenerator.generateCodeInt(6);
+        //手机验证码,30分钟有效
+        redisService.set(mobile + ":mobileCode", mobileCode, 30 * 60L);
+        String content = "采美资料库访问授权验证码：" + mobileCode + "，30分钟内有效";
+        if (!StringUtils.isEmpty(code) && code.equalsIgnoreCase(imgCode)) {
+            log.info("采美资料库访问授权验证码>>>>>" + mobileCode);
+            boolean sms = SMSUtils.sendSms(mobile, content);
+            if (sms) {
+                return Mono.just(JsonModel.success());
+            }
+        } else {
+            boolean exists = redisService.exists(mobile + ":mobileCode");
+            if (exists) {
+                redisService.remove(mobile + ":mobileCode");
+            }
+        }
+        return Mono.just(JsonModel.error("验证码不正确"));
+    }
+
+    @Override
+    public ResponseEntity<JsonModel> mobileCodeLogin(OssAuthorization authorization) {
+        HttpHeaders headers = new HttpHeaders();
+        if (StringUtils.isEmpty(authorization.getMobile()) || StringUtils.isEmpty(authorization.getCode())) {
+            return new ResponseEntity<>(JsonModel.error("参数异常"), headers, HttpStatus.OK);
+        }
+        String mobileCode = (String) redisService.get(authorization.getMobile() + ":mobileCode");
+        if (!StringUtils.isEmpty(mobileCode) && authorization.getCode().equals(mobileCode)) {
+            OssAuthorization ossAuthorization = documentAuthDao.findOssAuthorizationByMobile(authorization.getMobile());
+            if (ossAuthorization != null) {
+                String cookie = new CookieBuilder().setKey("authorizationMobile")
+                        .setValue(authorization.getMobile())
+                        .setMaxAge(60 * 60 * 24 * 30 * 1000L)
+                        .setPath("/")
+                        .build();
+                headers.add("Set-Cookie", cookie);
+                return new ResponseEntity<>(JsonModel.success(), headers, HttpStatus.OK);
+            } else {
+                return new ResponseEntity<>(JsonModel.error(-2, "登录失败,您可能没有查看资料的权限"), headers, HttpStatus.OK);
+            }
+        } else {
+            return new ResponseEntity<>(JsonModel.error("短信验证码不正确"), headers, HttpStatus.OK);
+        }
+    }
+
+    @Override
+    public Mono<JsonModel> dataList(String name, Integer pageNum, Integer pageSize) {
+        pageNum = pageNum == null ? 1 : pageNum;
+        pageSize = pageSize == null ? 20 : pageSize;
+        PageHelper.startPage(pageNum, pageSize);
+        List<OssArchive> ossArchiveList = documentAuthDao.findOssArchive(name);
+        PageInfo<OssArchive> pageInfo = null;
+        if (ossArchiveList != null && ossArchiveList.size() > 0) {
+            for (OssArchive ossArchive : ossArchiveList) {
+                if (!StringUtils.isEmpty(ossArchive.getMainImage())) {
+                    ossArchive.setMainImage(ImageUtil.getImageURL("product", ossArchive.getMainImage(), 0, domain));
+                }
+                List<OssArchivePdf> pdfList = documentAuthDao.findOssArchivePdf(ossArchive.getId());
+                if (pdfList != null && pdfList.size() > 0) {
+                    ossArchive.setIsShowDowns(false);
+                } else {
+                    ossArchive.setIsShowDowns(true);
+                }
+                ossArchive.setPdfList(pdfList);
+            }
+            pageInfo = new PageInfo<>(ossArchiveList);
+        }
+        return Mono.just(JsonModel.success(pageInfo));
+    }
+
+    @Override
+    public Mono<JsonModel> dataDetails(Integer pdfId) {
+        Map<String, Object> map = new HashMap<>(2);
+        OssArchivePdf ossArchivePdf = documentAuthDao.findOssArchivePdfById(pdfId);
+        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
+        // 设置URL过期时间为1个小时
+        Date expiration = new Date(System.currentTimeMillis() + 3600L * 1000);
+        String url = ossClient.generatePresignedUrl(bucketName, ossArchivePdf.getOssName(), expiration).toString();
+        ossArchivePdf.setUrl(url);
+        OssArchive ossArchive = documentAuthDao.getOssArchive(ossArchivePdf.getArchiveId());
+        if (!StringUtils.isEmpty(ossArchive.getMainImage())) {
+            ossArchive.setMainImage(ImageUtil.getImageURL("product", ossArchive.getMainImage(), 0, domain));
+        }
+        map.put("ossArchivePdf", ossArchivePdf);
+        map.put("ossArchive", ossArchive);
+        ossClient.shutdown();
+        return Mono.just(JsonModel.success(map));
+    }
+
+    @Override
+    public Mono<JsonModel> moreData(Integer archiveId) {
+        OssArchive ossArchive = documentAuthDao.getOssArchive(archiveId);
+        if (ossArchive != null) {
+            if (!StringUtils.isEmpty(ossArchive.getMainImage())) {
+                ossArchive.setMainImage(ImageUtil.getImageURL("product", ossArchive.getMainImage(), 0, domain));
+            }
+            List<OssArchivePdf> pdfList = documentAuthDao.findOssArchivePdf(ossArchive.getId());
+            ossArchive.setPdfList(pdfList);
+        }
+        return Mono.just(JsonModel.success(ossArchive));
+    }
+}

src/main/java/com/caimei/www/utils/Md5Util.java

@@ -0,0 +1,90 @@
+package com.caimei.www.utils;
+
+import java.security.MessageDigest;
+import java.util.UUID;
+
+/**
+ * md5加密工具类
+ *
+ * @author : Charles
+ * @date : 2020/1/17
+ */
+public class Md5Util {
+    /**
+     * md5加密
+     *
+     * @param s：待加密字符串
+     * @return 加密后16进制字符串
+     */
+    public static String md5(String s) {
+        try {
+            //实例化MessageDigest的MD5算法对象
+            MessageDigest md = MessageDigest.getInstance("MD5");
+            //通过digest方法返回哈希计算后的字节数组
+            byte[] bytes = md.digest(s.getBytes("utf-8"));
+            //将字节数组转换为16进制字符串并返回
+            return toHex(bytes);
+        } catch (Exception e) {
+            throw new RuntimeException(e);
+        }
+    }
+
+    /**
+     * 获取随即盐
+     *
+     * @return
+     */
+    public static String salt() {
+        //利用UUID生成随机盐
+        UUID uuid = UUID.randomUUID();
+        //返回a2c64597-232f-4782-ab2d-9dfeb9d76932
+        String[] arr = uuid.toString().split("-");
+        return arr[0];
+    }
+
+    /**
+     * 字节数组转换为16进制字符串
+     *
+     * @return 16进制字符串
+     */
+    private static String toHex(byte[] bytes) {
+        final char[] HEX_DIGITS = "0123456789ABCDEF".toCharArray();
+        StringBuilder ret = new StringBuilder(bytes.length * 2);
+        for (int i = 0; i < bytes.length; i++) {
+            ret.append(HEX_DIGITS[(bytes[i] >> 4) & 0x0f]);
+            ret.append(HEX_DIGITS[bytes[i] & 0x0f]);
+        }
+        return ret.toString();
+    }
+
+    /**
+     * <p>Description: 16位的MD5值</p>
+     * <p>Company: caimei365</p>
+     *
+     * @param s
+     * @return
+     * @throws Exception
+     * @author dmeng
+     * @date 2015年12月17日 下午5:28:49
+     */
+    public static String MD5To16Bit(String s) throws Exception {
+        MessageDigest md = MessageDigest.getInstance("MD5");
+        md.update(s.getBytes());
+        byte b[] = md.digest();
+        int i;
+        StringBuffer buf = new StringBuffer("");
+        for (int offset = 0; offset < b.length; offset++) {
+            i = b[offset];
+            if (i < 0) {
+                i += 256;
+            }
+            if (i < 16) {
+                buf.append("0");
+            }
+            buf.append(Integer.toHexString(i));
+        }
+        return buf.toString().substring(8, 24);
+    }
+
+}
+

src/main/java/com/caimei/www/utils/RandomCodeGenerator.java

@@ -0,0 +1,89 @@
+package com.caimei.www.utils;
+
+import java.util.Random;
+
+public class RandomCodeGenerator {
+
+    // TODO 与WWW的RandomCodeGenerator是重复的,后续需要删除www的RandomCodeGenerator
+    private static char codeSequence[] = {
+            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K',
+            'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
+            'W', 'X', 'Y', 'Z', '2', '3', '4', '5', '6', '7',
+            '8', '9'
+    };
+
+    private static char intSequence[] = {
+            '2', '3', '4', '5', '6', '7',
+            '8', '9'
+    };
+
+    private static char stringSequence[] = {
+            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K',
+            'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
+            'W', 'X', 'Y', 'Z'
+    };
+
+    private static char newStringSequence[] = {
+            'A', 'a', 'B', 'b', 'D', 'd', 'E', 'e', 'F', 'f', 'G', 'g', 'H', 'h',
+            'L', 'N', 'n', 'Q', 'q', 'R', 'r', 'T', 't', 'Y', 'y'
+    };
+//	C,i，j，k，M,O,P,S,U,V,W,X,Z,l
+
+    public static String generateCode(int length) {
+        StringBuffer sb = new StringBuffer();
+        Random random = new Random();
+        for (int i = 0; i < codeSequence.length && i < length; ++i) {
+            sb.append(codeSequence[random.nextInt(codeSequence.length)]);
+        }
+
+        return sb.toString();
+    }
+
+    public static String generateCodeInt(int length) {
+        StringBuffer sb = new StringBuffer();
+        Random random = new Random();
+        for (int i = 0; i < intSequence.length && i < length; ++i) {
+            sb.append(intSequence[random.nextInt(intSequence.length)]);
+        }
+
+        return sb.toString();
+    }
+
+    public static String generateCodeString(int length) {
+        StringBuffer sb = new StringBuffer();
+        Random random = new Random();
+        for (int i = 0; i < stringSequence.length && i < length; ++i) {
+            sb.append(stringSequence[random.nextInt(stringSequence.length)]);
+        }
+
+        return sb.toString();
+    }
+
+
+    public static String getRandomCharAndNumr(int length) {
+        String val = "";
+        Random random = new Random();
+        for (int i = 0; i < length; i++) {
+            // 输出字母还是数字
+            String charOrNum = random.nextInt(2) % 2 == 0 ? "char" : "num";
+            // 字符串
+            if ("char".equalsIgnoreCase(charOrNum)) {
+                // 取得大写字母还是小写字母
+                int choice = random.nextInt(2) % 2 == 0 ? 65 : 97;
+                val += (char) (choice + random.nextInt(26));
+            } else if ("num".equalsIgnoreCase(charOrNum)) { // 数字
+                val += String.valueOf(random.nextInt(10));
+            }
+        }
+        return val;
+    }
+
+    public static String generateAccount(int length) {
+        StringBuffer sb = new StringBuffer();
+        Random random = new Random();
+        for (int i = 0; i < newStringSequence.length && i < length; ++i) {
+            sb.append(newStringSequence[random.nextInt(newStringSequence.length)]);
+        }
+        return sb.toString();
+    }
+}

src/main/java/com/caimei/www/utils/SMSUtils.java

@@ -0,0 +1,19 @@
+package com.caimei.www.utils;
+
+import com.ruanwei.interfacej.SmsClientSend;
+
+public class SMSUtils {
+    private static String url = "http://47.96.109.82:9999/sms.aspx";
+    private static String userid = "321";
+    private static String account = "0755cmxx";
+    private static String password = "CaimeiSMS999";
+
+    public static boolean sendSms(String mobile, String content) {
+        String res = SmsClientSend.sendSms(url, userid, account, password, mobile, content);
+        return res.indexOf("Success") != -1;
+    }
+
+    public static void main(String[] args) {
+        System.out.println(sendSms("13631650502", "您登录亲朋棋牌的手机短 信验证码是：7895，祝您游戏愉快！请确认账号是由本人操作"));
+    }
+}

src/main/java/com/caimei/www/utils/VerifyCodeUtils.java

@@ -0,0 +1,354 @@
+package com.caimei.www.utils;
+
+import org.apache.commons.codec.binary.Base64;
+
+import javax.imageio.ImageIO;
+import java.awt.*;
+import java.awt.geom.AffineTransform;
+import java.awt.image.BufferedImage;
+import java.io.*;
+import java.util.Arrays;
+import java.util.Random;
+
+/**
+ * <p>Description: Copyright © 2014-2015 CAIMEI365.com All Rights Reserved</p>
+ *
+ * @author xun.zhang
+ * @date 2016年5月25日 上午10:18:35
+ */
+
+public class VerifyCodeUtils {
+
+    // 使用到Algerian字体，系统里没有的话需要安装字体，字体只显示大写，去掉了1,0,i,o几个容易混淆的字符
+    public static final String VERIFY_CODES = "23456789ABCDEFGHJKLMNPQRSTUVWXYZ";
+    private static Random random = new Random();
+
+    /**
+     * <p>Description: </p>
+     * <p>Company: caimei365</p>
+     *
+     * @param w          验证码图片宽度
+     * @param h          验证码图片高度
+     * @param verifySize 验证码图片里面字符串位数
+     * @return
+     * @throws IOException
+     * @author xun.zhang
+     * @date 2016年5月25日 上午11:39:46
+     */
+    public static VerifyCode createVerifyCode(int w, int h, int verifySize) throws IOException {
+        String code = generateVerifyCode(verifySize);
+        ByteArrayOutputStream outPutStream = new ByteArrayOutputStream();
+        outputImage(w, h, outPutStream, code);
+
+        InputStream in = new ByteArrayInputStream(outPutStream.toByteArray());
+        byte[] data = null;
+        // 读取图片字节数组
+        try {
+            data = new byte[in.available()];
+            in.read(data);
+            in.close();
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+        // 对字节数组Base64编码
+        String base64 = Base64.encodeBase64String(data);
+
+        VerifyCode verifyCode = new VerifyCode(code, "data:image/jpg;base64," + base64);
+
+        return verifyCode;
+    }
+
+    /**
+     * 使用系统默认字符源生成验证码
+     *
+     * @param verifySize 验证码长度
+     * @return
+     */
+    public static String generateVerifyCode(int verifySize) {
+        return generateVerifyCode(verifySize, VERIFY_CODES);
+    }
+
+    /**
+     * 使用指定源生成验证码
+     *
+     * @param verifySize 验证码长度
+     * @param sources    验证码字符源
+     * @return
+     */
+    public static String generateVerifyCode(int verifySize, String sources) {
+        if (sources == null || sources.length() == 0) {
+            sources = VERIFY_CODES;
+        }
+        int codesLen = sources.length();
+        Random rand = new Random(System.currentTimeMillis());
+        StringBuilder verifyCode = new StringBuilder(verifySize);
+        for (int i = 0; i < verifySize; i++) {
+            verifyCode.append(sources.charAt(rand.nextInt(codesLen - 1)));
+        }
+        return verifyCode.toString();
+    }
+
+    /**
+     * 生成随机验证码文件,并返回验证码值
+     *
+     * @param w
+     * @param h
+     * @param outputFile
+     * @param verifySize
+     * @return
+     * @throws IOException
+     */
+    public static String outputVerifyImage(int w, int h, File outputFile, int verifySize) throws IOException {
+        String verifyCode = generateVerifyCode(verifySize);
+        outputImage(w, h, outputFile, verifyCode);
+        return verifyCode;
+    }
+
+    /**
+     * 输出随机验证码图片流,并返回验证码值
+     *
+     * @param w
+     * @param h
+     * @param os
+     * @param verifySize
+     * @return
+     * @throws IOException
+     */
+    public static String outputVerifyImage(int w, int h, OutputStream os, int verifySize) throws IOException {
+        String verifyCode = generateVerifyCode(verifySize);
+        outputImage(w, h, os, verifyCode);
+        return verifyCode;
+    }
+
+    /**
+     * 生成指定验证码图像文件
+     *
+     * @param w
+     * @param h
+     * @param outputFile
+     * @param code
+     * @throws IOException
+     */
+    public static void outputImage(int w, int h, File outputFile, String code) throws IOException {
+        if (outputFile == null) {
+            return;
+        }
+        File dir = outputFile.getParentFile();
+        if (!dir.exists()) {
+            dir.mkdirs();
+        }
+        try {
+            outputFile.createNewFile();
+            FileOutputStream fos = new FileOutputStream(outputFile);
+            outputImage(w, h, fos, code);
+            fos.close();
+        } catch (IOException e) {
+            throw e;
+        }
+    }
+
+    /**
+     * 输出指定验证码图片流
+     *
+     * @param w
+     * @param h
+     * @param os
+     * @param code
+     * @throws IOException
+     */
+    public static void outputImage(int w, int h, OutputStream os, String code) throws IOException {
+        int verifySize = code.length();
+        BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
+        Random rand = new Random();
+        Graphics2D g2 = image.createGraphics();
+        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
+        Color[] colors = new Color[5];
+        Color[] colorSpaces = new Color[]{Color.WHITE, Color.CYAN, Color.GRAY, Color.LIGHT_GRAY, Color.MAGENTA,
+                Color.ORANGE, Color.PINK, Color.YELLOW};
+        float[] fractions = new float[colors.length];
+        for (int i = 0; i < colors.length; i++) {
+            colors[i] = colorSpaces[rand.nextInt(colorSpaces.length)];
+            fractions[i] = rand.nextFloat();
+        }
+        Arrays.sort(fractions);
+
+        g2.setColor(Color.GRAY);// 设置边框色
+        g2.fillRect(0, 0, w, h);
+
+        Color c = getRandColor(200, 250);
+        g2.setColor(c);// 设置背景色
+        g2.fillRect(0, 2, w, h - 4);
+
+        // 绘制干扰线
+        Random random = new Random();
+        g2.setColor(getRandColor(160, 200));// 设置线条的颜色
+        for (int i = 0; i < 20; i++) {
+            int x = random.nextInt(w - 1);
+            int y = random.nextInt(h - 1);
+            int xl = random.nextInt(6) + 1;
+            int yl = random.nextInt(12) + 1;
+            g2.drawLine(x, y, x + xl + 40, y + yl + 20);
+        }
+
+        // 添加噪点
+        float yawpRate = 0.05f;// 噪声率
+        int area = (int) (yawpRate * w * h);
+        for (int i = 0; i < area; i++) {
+            int x = random.nextInt(w);
+            int y = random.nextInt(h);
+            int rgb = getRandomIntColor();
+            image.setRGB(x, y, rgb);
+        }
+
+        shear(g2, w, h, c);// 使图片扭曲
+
+        g2.setColor(getRandColor(100, 160));
+        int fontSize = h - 4;
+        Font font = new Font("Algerian", Font.ITALIC, fontSize);
+        g2.setFont(font);
+        char[] chars = code.toCharArray();
+        for (int i = 0; i < verifySize; i++) {
+            AffineTransform affine = new AffineTransform();
+            affine.setToRotation(Math.PI / 4 * rand.nextDouble() * (rand.nextBoolean() ? 1 : -1),
+                    (w / verifySize) * i + fontSize / 2, h / 2);
+            g2.setTransform(affine);
+            g2.drawChars(chars, i, 1, ((w - 10) / verifySize) * i + 5, h / 2 + fontSize / 2 - 10);
+        }
+
+        g2.dispose();
+        ImageIO.write(image, "jpg", os);
+    }
+
+    private static Color getRandColor(int fc, int bc) {
+        if (fc > 255) {
+            fc = 255;
+        }
+        if (bc > 255) {
+            bc = 255;
+        }
+        int r = fc + random.nextInt(bc - fc);
+        int g = fc + random.nextInt(bc - fc);
+        int b = fc + random.nextInt(bc - fc);
+        return new Color(r, g, b);
+    }
+
+    private static int getRandomIntColor() {
+        int[] rgb = getRandomRgb();
+        int color = 0;
+        for (int c : rgb) {
+            color = color << 8;
+            color = color | c;
+        }
+        return color;
+    }
+
+    private static int[] getRandomRgb() {
+        int[] rgb = new int[3];
+        for (int i = 0; i < 3; i++) {
+            rgb[i] = random.nextInt(255);
+        }
+        return rgb;
+    }
+
+    private static void shear(Graphics g, int w1, int h1, Color color) {
+        shearX(g, w1, h1, color);
+        shearY(g, w1, h1, color);
+    }
+
+    private static void shearX(Graphics g, int w1, int h1, Color color) {
+
+        int period = random.nextInt(2);
+
+        boolean borderGap = true;
+        int frames = 1;
+        int phase = random.nextInt(2);
+
+        for (int i = 0; i < h1; i++) {
+            double d = (double) (period >> 1)
+                    * Math.sin((double) i / (double) period + (6.2831853071795862D * (double) phase) / (double) frames);
+            g.copyArea(0, i, w1, 1, (int) d, 0);
+            if (borderGap) {
+                g.setColor(color);
+                g.drawLine((int) d, i, 0, i);
+                g.drawLine((int) d + w1, i, w1, i);
+            }
+        }
+
+    }
+
+    private static void shearY(Graphics g, int w1, int h1, Color color) {
+
+        int period = random.nextInt(40) + 10; // 50;
+
+        boolean borderGap = true;
+        int frames = 20;
+        int phase = 7;
+        for (int i = 0; i < w1; i++) {
+            double d = (double) (period >> 1)
+                    * Math.sin((double) i / (double) period + (6.2831853071795862D * (double) phase) / (double) frames);
+            g.copyArea(i, 0, 1, h1, 0, (int) d);
+            if (borderGap) {
+                g.setColor(color);
+                g.drawLine(i, (int) d, i, 0);
+                g.drawLine(i, (int) d + h1, i, h1);
+            }
+
+        }
+
+    }
+
+    public static class VerifyCode {
+        /**
+         * 生成的字符串验证码
+         */
+        private String code;
+        /**
+         * 验证码字符串的加密
+         */
+        private String md5Code;
+        /**
+         * 验证码生成的图片(base64格式)
+         */
+        private String base64Image;
+
+        public VerifyCode(String code, String base64Image) {
+            this.code = code;
+            this.base64Image = base64Image;
+        }
+
+        public String getCode() {
+            return code;
+        }
+
+        public void setCode(String code) {
+            this.code = code;
+        }
+
+        public String getMd5Code() throws Exception {
+            if (this.code != null) {
+                md5Code = code;
+                for (int i = 0; i < 3; i++) {
+                    md5Code = Md5Util.MD5To16Bit(md5Code);
+                }
+            }
+            return md5Code;
+        }
+
+        public String getBase64Image() {
+            return base64Image;
+        }
+
+        public void setBase64Image(String base64Image) {
+            this.base64Image = base64Image;
+        }
+    }
+
+    public static void main(String[] args) throws Exception {
+
+        VerifyCode verifyCode = createVerifyCode(200, 80, 4);
+        System.out.println(verifyCode.getCode());
+        System.out.println(verifyCode.getMd5Code());
+        System.out.println(verifyCode.getBase64Image());
+    }
+
+}

src/main/resources/config/beta/application-beta.yml

@@ -68,3 +68,10 @@ http:
     maxFileSize: 10Mb
     maxRequestSize: 100Mb
 
+#阿里云oss存储
+aliyun:
+  accessKeyId: LTAI4GBL3o4YkWnbKYgf2Xia
+  accessKeySecret: dBjAXqbYiEPP6Ukuk2ZsXQeET7FVkK
+  bucketName: caimei-oss
+  endpoint: https://oss-cn-shenzhen.aliyuncs.com
+

src/main/resources/config/dev/application-dev.yml

@@ -53,7 +53,7 @@ logging:
 # 服务域名
 caimei:
   siteEnv: 0 #网站环境，（2：正式环境，1：测试环境，0：开发环境）
-  spiServer: https://spi-b.caimei365.com
+  spiServer: http://192.168.2.56:8008
   imageDomain: https://img-b.caimei365.com
   wwwDomain: https://www-b.caimei365.com
 
@@ -76,3 +76,10 @@ http:
     maxFileSize: 10Mb
     maxRequestSize: 100Mb
 
+#阿里云oss存储
+aliyun:
+  accessKeyId: LTAI4GBL3o4YkWnbKYgf2Xia
+  accessKeySecret: dBjAXqbYiEPP6Ukuk2ZsXQeET7FVkK
+  bucketName: caimei-oss
+  endpoint: https://oss-cn-shenzhen.aliyuncs.com
+

src/main/resources/config/prod/application-prod.yml

@@ -69,3 +69,10 @@ http:
     maxFileSize: 10Mb
     maxRequestSize: 100Mb
 
+#阿里云oss存储
+aliyun:
+  accessKeyId: LTAI4GBL3o4YkWnbKYgf2Xia
+  accessKeySecret: dBjAXqbYiEPP6Ukuk2ZsXQeET7FVkK
+  bucketName: caimei-oss
+  endpoint: https://oss-cn-shenzhen.aliyuncs.com
+

src/main/resources/mapper/DocumentAuthMapper.xml

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.caimei.www.mapper.DocumentAuthDao">
+    <select id="findOssAuthorizationByMobile" resultType="com.caimei.www.pojo.document.OssAuthorization">
+        SELECT * FROM cm_oss_authorization WHERE mobile = #{mobile}
+    </select>
+
+    <select id="findOssArchive" resultType="com.caimei.www.pojo.document.OssArchive">
+        SELECT DISTINCT
+          coa.*,
+          p.name AS productName,
+          p.mainImage AS mainImage,
+          s.name AS shopName,
+          s.shopID AS shopId
+        FROM
+          cm_oss_archive coa
+          LEFT JOIN product p ON coa.productId = p.productID
+          LEFT JOIN shop s ON p.shopID = s.shopID
+          LEFT JOIN cm_oss_archive_pdf coap ON coap.archiveId = coa.id
+          <if test="name != null and name != ''">
+              WHERE (coa.name LIKE CONCAT('%',#{name},'%')
+               OR p.name LIKE CONCAT('%',#{name},'%')
+               OR coap.name LIKE CONCAT('%',#{name},'%'))
+          </if>
+        ORDER BY
+          coa.updateDate DESC
+    </select>
+
+    <select id="findOssArchivePdf" resultType="com.caimei.www.pojo.document.OssArchivePdf">
+        SELECT * FROM cm_oss_archive_pdf WHERE archiveId = #{archiveId} ORDER BY uploadTime DESC
+    </select>
+
+    <select id="findOssArchivePdfById" resultType="com.caimei.www.pojo.document.OssArchivePdf">
+        SELECT * FROM cm_oss_archive_pdf WHERE id = #{pdfId}
+    </select>
+
+    <select id="getOssArchive" resultType="com.caimei.www.pojo.document.OssArchive">
+        SELECT
+          coa.*,
+          p.name AS productName,
+          p.mainImage AS mainImage,
+          s.name AS shopName,
+          s.shopID AS shopId
+        FROM
+          cm_oss_archive coa
+          LEFT JOIN product p ON coa.productId = p.productID
+          LEFT JOIN shop s ON p.shopID = s.shopID
+        WHERE
+          coa.id = #{archiveId}
+    </select>
+
+</mapper>

src/main/resources/static/css/document/details.css

@@ -0,0 +1,112 @@
+@charset "utf-8";
+li{list-style:none}
+.toLogin{display:none;}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    body{background-color: #F7F7F7;}
+    ::-webkit-input-placeholder {
+        color: #ffffff;
+    }
+    :-moz-placeholder {/* Firefox 18- */
+        color: #ffffff;
+    }
+    ::-moz-placeholder{/* Firefox 19+ */
+        color: #ffffff;
+    }
+    :-ms-input-placeholder {
+        color: #ffffff;
+    }
+    .header{width: 100%;height: 80px;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 18px 0;}
+    .wrap-header{width: 1200px;height: 100%;line-height: 44px;font-size: 20px;color: #ffffff;margin: 0 auto;}
+    .wrap-header .logo{width: 52px;height: 44px;margin-right: 10px;}
+    .wrap-header .search{width: 400px;height: 44px;float: right;border-radius: 22px;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 20px;}
+    .wrap-header .search .input{width: 316px;height: 44px;background-color: rgba(255,255,255,0);box-sizing: border-box;border: none;font-size: 16px;color: #ffffff;}
+    .wrap-header .search .icon-search{width: 44px;height: 44px;float: right;box-sizing: border-box;padding: 10px;cursor: pointer;}
+    .wrap-header .search .icon-search img{width: 22px;height: 22px;display: block;}
+    .document-content{width: 100%;min-height:900px;float: left;}
+    .document-content .inner{width: 1200px;margin: 0 auto;}
+    .document-content .document-list{width: 100%;height: auto;margin-top: 40px;}
+    .document-list .list-item{width: 100%;min-height: 160px;background-color: #FFFFFF;border-radius: 4px;box-sizing: border-box;padding: 20px 20px 0 20px ;float: left;margin-bottom: 20px;}
+    .document-list .list-item .list-item-top{width: 100%;height:auto;float: left;padding-bottom:20px; position: relative;}
+    .document-list .list-item .list-item-top .image{width: 140px;height: 120px;float: left;border: 1px solid #F3F6F9;border-radius: 4px;margin-right: 20px;}
+    .document-list .list-item .list-item-top .image img{width: 140px;height: 120px;display: block;}
+    .document-list .list-item .list-item-top .icon{width: 24px;height: 24px;border-radius: 2px;background-color: #FFF5F1;position: absolute;bottom: 20px;right: 0;cursor: pointer;}
+    .document-list .list-item .list-item-top .icon:before{width: 24px;height: 24px;background-position: -148px 2px;}
+    .document-list .list-item .list-item-top .icon.top:before{width: 24px;height: 24px;background-position: -178px 2px;}
+    .document-list .list-item .list-item-top .main {width: 800px;height: 120px;float: left;}
+    .document-list .list-item .list-item-top .main h1{font-weight: normal;font-size: 20px;line-height: 40px;color: #E15616;text-align: left;white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
+    .document-list .list-item .list-item-top .main .p{display: flex;font-weight: normal;font-size: 16px;line-height: 34px;color: #666666;text-align: left;white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
+    .document-list .list-item .list-item-top .main .p .p-span{flex: 0.9;float: left;margin-right: 10px;}
+    .document-list .list-item .list-item-top .main h1 span{margin-right: 5px;}
+    .document-list .list-item .list-item-top .main .p span{margin-right: 5px;}
+    .document-list .list-item .list-item-top .main .p .name{width:49%;float: left;margin-right:10px;font-weight: normal;text-align: left;white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
+    .document-list .list-item .list-item-top .main .p .more{color: #E15616;cursor: pointer;}
+    .document-list .list-item .list-item-bot{width: 100%;min-height: 1185px;padding: 20px 0;border-top: 1px solid #F5F5F5;float: left;margin-bottom: 120px;}
+    .document-list .list-item .list-item-bot .pdf-li{width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #999999;float: left;margin: 5px 0;}
+    .document-list .list-item .list-item-bot .pdf-li .img{width: 18px;height: 20px;display: block;float: left;margin-top: 5px;}
+    .document-list .list-item .list-item-bot .pdf-li .name{float: left;margin-left: 10px;cursor: pointer;}
+    .document-list .list-item .list-item-bot .pdf-li .name:hover{color: #E15616;}
+    .document-list .list-item .list-item-bot .pdf-li .time{float: right;}
+
+    iframe{width: 1160px !important;height: 1185px !important;}
+    .document-footer{width: 100%;height: 120px;background-color: #F0F0F0;box-sizing: border-box;padding: 30px 0;float: left;}
+    .wrap{color: #999999;font-size: 14px;line-height: 30px;}
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    ::-webkit-input-placeholder {
+        color: #ffffff;
+    }
+    :-moz-placeholder {/* Firefox 18- */
+        color: #ffffff;
+    }
+    ::-moz-placeholder{/* Firefox 19+ */
+        color: #ffffff;
+    }
+    :-ms-input-placeholder {
+        color: #ffffff;
+    }
+    .mIcon:before{transition:none;}
+    .header{width: 100%;height: 17.8vw;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 3.4vw 2vw;}
+    .wrap-header{width: 100%;height: 100%;line-height: 10vw;font-size: 4vw;color: #ffffff;}
+    .wrap-header .logo{width: 10vw;height: 8.8vw;margin-right: 1vw;}
+    .wrap-header .search{width: 59.9vw;height: 10vw;float: right;border-radius: 5vw;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 4vw;position: relative;}
+    .wrap-header .search .input{width: 43.9vw;height: 10vw;line-height:10vw;background-color: rgba(255,255,255,0);box-sizing: border-box;border: none;font-size:3vw;color: #ffffff;}
+    .wrap-header .search .icon-search{width:10vw;height: 10vw;float: right;box-sizing: border-box;padding: 2vw;cursor: pointer;margin-top: 0.5vw;position: absolute;right: 0;top: 0;}
+    .wrap-header .search .icon-search img{width: 4vw;height: 4vw;display: block;cursor: pointer;}
+    .document-content{width: 100%;min-height:100%;float: left;}
+    .document-content .inner{width:100%;margin: 0 auto;}
+    .document-content .document-list{width: 100%;height: auto;box-sizing: border-box;padding: 0;}
+    .document-list .list-item{width: 100%;min-height: auto;background-color: #FFFFFF;border-radius: 1.5vw;float: left;margin-bottom: 4vw;}
+    .document-list .list-item .list-item-top{width: 100%;height:auto;float: left;padding-bottom:2vw; position: relative;box-sizing: border-box;padding: 3vw;}
+    .document-list .list-item .list-item-top .image{width:20vw;height: 20vw;float: left;border: 1px solid #F3F6F9;border-radius: 1.5vw;margin-right: 2vw;}
+    .document-list .list-item .list-item-top .image img{width: 20vw;height: 20vw;display: block;}
+    .document-list .list-item .list-item-top .icon{width: 24px;height: 24px;border-radius: 2px;background-color: #FFF5F1;position: absolute;bottom: 20px;right: 0;cursor: pointer;}
+    .document-list .list-item .list-item-top .icon:before{width: 24px;height: 24px;background-position: -59vw 0;}
+    .document-list .list-item .list-item-top .icon.top:before{width: 24px;height: 24px;background-position: -67vw 0;}
+    .document-list .list-item .list-item-top .main {height: 20vw;float: left;width: 70vw;}
+    .document-list .list-item .list-item-top .main h1{font-weight: normal;font-size: 4vw;line-height: 6.5vw;color: #E15616;text-align: left;white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
+    .document-list .list-item .list-item-top .main .p{width: 100%;font-weight: normal;font-size: 3vw;line-height: 6.5vw;color: #666666;text-align: left;	white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;display: flex;}
+    .document-list .list-item .list-item-top .main .p .p-span{margin-right: 3vw;}
+    .document-list .list-item .list-item-top .main .p .name{ float: left; width: 48%;font-weight: normal;font-size: 3vw;line-height: 6.5vw;color: #666666;text-align: left;	white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
+    .document-list .list-item .list-item-top .main span{margin-right: 3vw;}
+    .document-list .list-item .list-item-top .main .p .more{display: inline-block;float: right;margin-right: 0;color: #E15616;cursor: pointer;width: 15vw;height: 6.5vw;background-color: #FFF5F1;border-radius: 0.5vw;text-align: center;}
+    .document-list .list-item .list-item-bot{width: 100%;min-height: 80vw;padding: 0;border-top: 1px solid #F5F5F5;float: left;box-sizing: border-box;}
+    .document-list .list-item .list-item-bot .pdf-li{width: 100%;height: 10vw;font-size: 3vw;color: #999999;float: left;margin:1vw 0;}
+    .document-list .list-item .list-item-bot .pdf-li .img{width: 7vw;height:8vw;display: block;float: left;margin-top: 0;}
+    .document-list .list-item .list-item-bot .pdf-li .name{float: left;margin-left: 3vw;cursor: pointer;width: 65vw;line-height: 5vw;}
+    .document-list .list-item .list-item-bot .pdf-li .name:hover{color: #E15616;}
+    .document-list .list-item .list-item-bot .pdf-li .time{float: left;margin-left: 3vw;width: 56vw;line-height: 5vw;}
+    .document-footer{width: 100%;height: auto;background-color: #F0F0F0;box-sizing: border-box;padding: 30px 0;float: left;}
+    .wrap{color: #999999;font-size: 14px;line-height: 30px;}
+    .media{width: 100% !important;height: 1000vw !important;}
+    iframe{width: 100% !important;height: 100% !important;}
+    .pdfjs .pdfViewer{padding: 0 !important;}
+
+
+}

src/main/resources/static/css/document/list.css

@@ -0,0 +1,103 @@
+@charset "utf-8";
+li{list-style:none}
+.toLogin{display:none;}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    body{background-color: #F7F7F7;}
+    ::-webkit-input-placeholder {
+        color: #ffffff;
+    }
+    :-moz-placeholder {/* Firefox 18- */
+        color: #ffffff;
+    }
+    ::-moz-placeholder{/* Firefox 19+ */
+        color: #ffffff;
+    }
+    :-ms-input-placeholder {
+        color: #ffffff;
+    }
+    .header{width: 100%;height: 80px;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 18px 0;}
+    .wrap-header{width: 1200px;height: 100%;line-height: 44px;font-size: 20px;color: #ffffff;margin: 0 auto;}
+    .wrap-header .logo{width: 52px;height: 44px;margin-right: 10px;}
+    .wrap-header .search{width: 400px;height: 44px;float: right;border-radius: 22px;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 20px;}
+    .wrap-header .search .input{width: 316px;height: 44px;background-color: rgba(255,255,255,0);box-sizing: border-box;border: none;font-size: 16px;color: #ffffff;}
+    .wrap-header .search .icon-search{width: 44px;height: 44px;float: right;box-sizing: border-box;padding: 10px;cursor: pointer;}
+    .wrap-header .search .icon-search img{width: 22px;height: 22px;display: block;cursor: pointer;}
+    .document-content{width: 100%;min-height:900px;float: left;}
+    .document-content .inner{width: 1200px;margin: 0 auto;}
+    .document-content .document-list{width: 100%;height: auto;margin-top: 40px;}
+    .document-list .list-item-none{width: 100%;line-height: 40px;text-align: center;font-size: 14px;color: #999999;}
+    .document-list .list-item{width: 100%;min-height: 160px;background-color: #FFFFFF;border-radius: 4px;box-sizing: border-box;padding: 20px 20px 0 20px ;float: left;margin-bottom: 20px;}
+    .document-list .list-item .list-item-top{width: 100%;height:auto;float: left;padding-bottom:20px; position: relative;}
+    .document-list .list-item .list-item-top .image{width: 140px;height: 120px;float: left;border: 1px solid #F3F6F9;border-radius: 4px;margin-right: 20px;}
+    .document-list .list-item .list-item-top .image img{width: 140px;height: 120px;display: block;}
+    .document-list .list-item .list-item-top .icon{width: 24px;height: 24px;border-radius: 2px;background-color: #FFF5F1;position: absolute;bottom: 20px;right: 0;cursor: pointer;}
+    .document-list .list-item .list-item-top .icon:before{width: 24px;height: 24px;background-position: -178px 2px;}
+    .document-list .list-item .list-item-top .icon.top:before{width: 24px;height: 24px;background-position: -148px 2px;}
+    .document-list .list-item .list-item-top .main {width: 800px;height: 120px;float: left;}
+    .document-list .list-item .list-item-top .main h1{font-weight: normal;font-size: 20px;line-height: 40px;color: #E15616;text-align: left;white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
+    .document-list .list-item .list-item-top .main p{font-weight: normal;font-size: 16px;line-height: 34px;color: #666666;text-align: left;white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
+    .document-list .list-item .list-item-bot{width: 100%;height: auto;padding: 20px 0;border-top: 1px solid #F5F5F5;float: left;}
+    .document-list .list-item .list-item-bot.none{border-top: none;}
+    .document-list .list-item .list-item-bot .pdf-li{width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #999999;float: left;margin: 5px 0;}
+    .document-list .list-item .list-item-bot .pdf-li .img{width: 18px;height: 20px;display: block;float: left;margin-top: 5px;}
+    .document-list .list-item .list-item-bot .pdf-li .name{float: left;margin-left: 10px;cursor: pointer;}
+    .document-list .list-item .list-item-bot .pdf-li .name:hover{color: #E15616;}
+    .document-list .list-item .list-item-bot .pdf-li .time{float: right;}
+    .document-footer{width: 100%;height: 120px;background-color: #F0F0F0;box-sizing: border-box;padding: 30px 0;float: left;}
+    .wrap{color: #999999;font-size: 14px;line-height: 30px;}
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    ::-webkit-input-placeholder {
+        color: #ffffff;
+    }
+    :-moz-placeholder {/* Firefox 18- */
+        color: #ffffff;
+    }
+    ::-moz-placeholder{/* Firefox 19+ */
+        color: #ffffff;
+    }
+    :-ms-input-placeholder {
+        color: #ffffff;
+    }
+    .mIcon:before{transition:none;}
+    .header{width: 100%;height: 17.8vw;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 3.4vw 2vw;}
+    .wrap-header{width: 100%;height: 100%;line-height: 10vw;font-size:4vw;color: #ffffff;}
+    .wrap-header .logo{width: 10vw;height: 8.8vw;margin-right: 1vw;}
+    .wrap-header .search{width: 59.9vw;height: 10vw;float: right;border-radius: 5vw;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 4vw;position: relative;}
+    .wrap-header .search .input{width: 43.9vw;height: 10vw;line-height:10vw;background-color: rgba(255,255,255,0);box-sizing: border-box;border: none;font-size:3vw;color: #ffffff;}
+    .wrap-header .search .icon-search{width:10vw;height: 10vw;float: right;box-sizing: border-box;padding: 2vw;cursor: pointer;margin-top: 0.5vw;position: absolute;right: 0;top: 0;}
+    .wrap-header .search .icon-search img{width: 4vw;height: 4vw;display: block;cursor: pointer;}
+    .document-content{width: 100%;min-height:108vw;float: left;}
+    .document-content .inner{width:100%;margin: 0 auto;}
+    .document-content .document-list{width: 100%;height: auto;margin-top: 4vw;box-sizing: border-box;padding: 0 3vw;}
+    .document-list .list-item-none{width: 100%;line-height: 20vw;text-align: center;font-size: 4vw;color: #999999;}
+    .document-list .list-item{width: 100%;min-height: auto;background-color: #FFFFFF;border-radius: 1.5vw;box-sizing: border-box;padding: 3vw 3vw 0 3vw;float: left;margin-bottom: 4vw;}
+    .document-list .list-item .list-item-top{width: 100%;height:auto;float: left;padding-bottom:2vw; position: relative;}
+    .document-list .list-item .list-item-top .image{width:20vw;height: 20vw;float: left;border: 1px solid #F3F6F9;border-radius: 1.5vw;margin-right: 2vw;}
+    .document-list .list-item .list-item-top .image img{width: 20vw;height: 20vw;display: block;}
+    .document-list .list-item .list-item-top .icon{width: 5.2vw;height:5.2vw;background-color: #FFF5F1;position: absolute;bottom: 4vw;right: 0;cursor: pointer;}
+    .document-list .list-item .list-item-top .icon:before{width:5.2vw;height: 5.2vw;background: url("/img/document/icon-up.png");background-size: cover;}
+    .document-list .list-item .list-item-top .icon.top:before{width:5.2vw;height: 5.2vw;background: url("/img/document/icon-down.png");background-size: cover;}
+    .document-list .list-item .list-item-top .main {height: 20vw;float: left;width: 60vw;}
+    .document-list .list-item .list-item-top .main h1{font-weight: normal;font-size: 4vw;line-height: 6.5vw;color: #E15616;text-align: left;white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
+    .document-list .list-item .list-item-top .main p{width: 100%;font-weight: normal;font-size: 3vw;line-height: 6.5vw;color: #666666;text-align: left;	white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
+    .document-list .list-item .list-item-top .main span{margin-left: 1vw;}
+    .document-list .list-item .list-item-bot{width: 100%;height: auto;padding: 2vw 0;border-top: 1px solid #F5F5F5;float: left;}
+    .document-list .list-item .list-item-bot .pdf-li{width: 100%;height: 10vw;font-size: 3vw;color: #999999;float: left;margin:1vw 0;}
+    .document-list .list-item .list-item-bot .pdf-li .img{width: 7vw;height:8vw;display: block;float: left;margin-top: 0.5vw;}
+    .document-list .list-item .list-item-bot .pdf-li .name{float: left;margin-left: 3vw;cursor: pointer;width: 65vw;line-height: 5vw;}
+    .document-list .list-item .list-item-bot .pdf-li .name:hover{color: #E15616;}
+    .document-list .list-item .list-item-bot .pdf-li .time{float: left;margin-left: 3vw;width: 56vw;line-height: 5vw;}
+    .document-footer{width: 100%;height: auto;background-color: #F0F0F0;box-sizing: border-box;padding: 30px 0;float: left;}
+    .wrap{color: #999999;font-size: 14px;line-height: 30px;}
+
+
+
+}

src/main/resources/static/css/document/login.css

@@ -0,0 +1,92 @@
+@charset "utf-8";
+li{list-style:none}
+.toLogin{display:none;}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    body{width: 100%;height: 100%;background-color: #ffffff;background: url("/img/document/document_bg.png")no-repeat;background-size: cover;}
+    #loginPage{width: 100%;height: 100%;}
+    #globalHead{width: 100%;position: fixed;top: 0;left: 0;z-index: 10000;}
+    .header{width: 100%;height: 80px;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 18px 0;}
+    .wrap{width: 1200px;height: 100%;line-height: 44px;font-size: 20px;color: #ffffff;}
+    .wrap .logo{width: 52px;height: 44px;margin-right: 10px;}
+    .login-contailer{width: 100%;min-height: 100%;box-sizing: border-box;padding-top: 216px;position: relative;}
+    .loginWrap{width:900px;height:420px;overflow:hidden;background-color: #ffffff;margin:0 auto;box-sizing:border-box;box-shadow: 0px 0px 20px 0px rgba(227, 88, 24, 0.1);border-radius: 10px;    position: fixed;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
+    .login-image{width: 383px;height: 420px;float: left;}
+    .loginForm{float:right;width:517px;height:420px;padding:74px 80px;font-size:14px;position:relative;box-sizing: border-box;}
+    .loginForm h1{color:#E15616;font-size:24px;font-weight:bold;line-height:30px;text-align: center;}
+    .loginForm form{margin-top:40px}
+    .loginForm .formLine{height:70px;padding:0;margin-top: 10px;}
+    .loginForm input{height:48px;line-height:48px;}
+    .loginForm .checked{top:14px;}
+    .loginForm .submit{height:44px;line-height:0;font-size:0;text-align:justify;margin-top:20px}
+    .loginForm .submit:after{content:'';display:inline-block;width:100%}
+    .loginForm .submit .btn{display:inline-block;box-sizing:border-box;width: 360px;height: 48px;background: linear-gradient(90deg, #FF8B45, #E15616);border-radius: 4px;cursor: pointer;font-size: 18px;color: #ffffff;    line-height: 48px;text-align: center;}
+    .loginForm .submit .btn:hover{opacity:.8}
+    .formLine.code input{width: 230px;float: left;}
+    .formLine.code .code-btn{width: 120px;height: 48px;background: linear-gradient(135deg, #F28F31 0%, #E15616 100%);border-radius: 4px;float: right;display: block;line-height: 48px;text-align: center;color: #FFFFFF;}
+    .formLine.code .code-btn.disabled{background: #EBEBEB;color: #999999;}
+    .formLine.code .checked{left:200px;}
+    #codeMsg{display: inline-block;float: left;}
+    .loginForm .codeBtn{position:absolute;right:0;top:0;width:100px;height:100px;}
+    .loginForm .codeBtn:before{width:100px;height:100px;background-position:-138px -146px}
+    .baseHeadCenter.account .accountLogin{display:none}
+    .login-success{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: #FFFFFF;z-index: 9999;opacity: 0;}
+    .login-success.active{opacity: 1;}
+    .login-success .inner{width: 500px;margin: 0 auto;display: flex;flex-direction: column;align-items: center;padding-top: 130px;}
+    .login-success .pc-icon{width: 300px;height:228px;display: block;}
+    .login-success h1{width: 300px;height: 60px;font-size: 30px;line-height: 60px;text-align: center;margin-top: 20px;}
+    .login-success h1.text-success{color: #25C474;}
+    .login-success h1.text-error{color: #F94B4B;}
+    .login-success p{width: 300px;height: 24px;font-size: 18px;color: #666666;line-height: 24px;text-align: center;}
+    .login-success p span{color: #E15616;}
+    .login-success .btn{display: block;width: 120px;height: 40px;background: linear-gradient(90deg, #FF8B45, #E15616);border-radius: 20px;font-size: 18px;color: #FFFFFF;line-height: 40px;text-align: center;margin:20px auto;}
+
+
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    body{background-color: #ffffff;}
+    #loginPage{width: 100%;height: 100%;}
+    #globalHead{width: 100%;position: fixed;top: 0;left: 0;z-index: 10000;}
+    .header{width: 100%;height: 17.8vw;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 3.4vw 6vw;}
+    .wrap{width: 100%;height: 100%;line-height: 10vw;font-size: 4vw;color: #ffffff;}
+    .wrap .logo{width: 10vw;height: 8.8vw;margin-right: 1vw;}
+    .loginForm .showPwd{display:none;}
+    .login-contailer{width: 100%;min-height:100%;box-sizing: border-box;padding: 0 10vw;position: relative;padding-top: 17.8vw;}
+    .login-image{width: 56.1vw;height: 50.1vw;margin: 0 auto;margin-top: 15vw;margin-bottom: 10vw;}
+    .loginForm .title{display: none;}
+    .loginForm h1{color:#22272e;font-size:6.4vw;font-weight:bold;line-height:10vw}
+    .loginForm h2{font-size:3.1vw;font-weight:normal;line-height:5.4vw;color:#627386}
+    .loginForm form{width:100%;margin:0 auto 0}
+    .loginForm .formLine{height:16.4vw;padding:0;}
+    .loginForm input{height:11.2vw;line-height:6vw;padding: 2.6vw 0;box-sizing: border-box;border-radius:1vw; }
+    .loginForm .checked{top:3.6vw;right:3.6vw;}
+    .formLine.code .code-btn{width: 21vw;height: 11vw;display: block;float: right;text-align: center;line-height: 11vw;border-radius: 1vw;box-sizing: border-box;background: linear-gradient(135deg, #F28F31 0%, #E15616 100%);color: #FFFFFF;font-size: 3vw;}
+    .formLine.code .code-btn.disabled{background: #EBEBEB;color: #999999;}
+    .loginForm .forget{text-align:right;color:#4a4f58;font-size:3.4vw;line-height:3.4vw;margin-bottom:4.8vw}
+    .loginForm .submit{line-height:11.2vw;font-size:3.4vw;text-align:center;color:#22272e;}
+    .loginForm .submit .btn{display:inline-block;box-sizing:border-box;width:100%;height:11.2vw;border-radius:1vw;margin-bottom:4.8vw}
+    .loginForm .submit .btn{background: linear-gradient(135deg, #F28F31 0%, #E15616 100%);color: #FFFFFF;}
+    .loginForm .submit .weChat{display:block;margin:6vw auto;width:50vw;color:#627386;line-height:8vw}
+    .loginForm .submit .weChat span{display:inline-block;width:100%}
+    .loginForm .submit .weChat .mIcon:before{width:12vw;height:12vw;background-position:0 -77.8vw}
+    .login-success{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: #FFFFFF;z-index: 9999;opacity: 0;}
+    .login-success.active{opacity: 1;}
+    .login-success .inner{width: 100%;display: flex;flex-direction: column;align-items: center;padding-top: 30vw;}
+    .login-success .success-main{display: flex;flex-direction: column;align-items: center;}
+    .login-success .h5-icon{width: 47vw;height:35vw;display: block;}
+    .login-success h1{width:  47vw;height: 10vw;font-size: 5vw;line-height: 10vw;text-align: center;margin-top: 4vw;}
+    .login-success h1.text-success{color: #25C474;}
+    .login-success h1.text-error{color: #F94B4B;}
+    .login-success p{width: 47vw;height: 4vw;font-size: 3vw;color: #666666;line-height:  4vw;text-align: center;}
+    .login-success p span{color: #E15616;}
+    .login-success .btn{display: block;width: 30vw;height: 9vw;background: linear-gradient(90deg, #FF8B45, #E15616);border-radius: 4.5vw;font-size:3vw;color: #FFFFFF;line-height: 9vw;text-align: center;margin:4vw auto;}
+
+
+
+}

src/main/resources/static/css/document/more-content.css

@@ -0,0 +1,101 @@
+@charset "utf-8";
+li{list-style:none}
+.toLogin{display:none;}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    body{background-color: #F7F7F7;}
+    ::-webkit-input-placeholder {
+        color: #ffffff;
+    }
+    :-moz-placeholder {/* Firefox 18- */
+        color: #ffffff;
+    }
+    ::-moz-placeholder{/* Firefox 19+ */
+        color: #ffffff;
+    }
+    :-ms-input-placeholder {
+        color: #ffffff;
+    }
+    .header{width: 100%;height: 80px;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 18px 0;}
+    .wrap-header{width: 1200px;height: 100%;line-height: 44px;font-size: 20px;color: #ffffff;margin: 0 auto;}
+    .wrap-header .logo{width: 52px;height: 44px;margin-right: 10px;}
+    .wrap-header .search{width: 400px;height: 44px;float: right;border-radius: 22px;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 20px;}
+    .wrap-header .search .input{width: 316px;height: 44px;background-color: rgba(255,255,255,0);box-sizing: border-box;border: none;font-size: 16px;color: #ffffff;}
+    .wrap-header .search .icon-search{width: 44px;height: 44px;float: right;box-sizing: border-box;padding: 10px;cursor: pointer;}
+    .wrap-header .search .icon-search img{width: 22px;height: 22px;display: block;cursor: pointer;}
+    .document-content{width: 100%;min-height:900px;float: left;}
+    .document-content .inner{width: 1200px;margin: 0 auto;}
+    .document-content .document-list{width: 100%;height: auto;margin-top: 40px;}
+    .document-list .list-item{width: 100%;min-height: 160px;background-color: #FFFFFF;border-radius: 4px;box-sizing: border-box;padding: 20px 20px 0 20px ;float: left;margin-bottom: 20px;}
+    .document-list .list-item .list-item-top{width: 100%;height:auto;float: left;padding-bottom:20px; position: relative;}
+    .document-list .list-item .list-item-top .image{width: 140px;height: 120px;float: left;border: 1px solid #F3F6F9;border-radius: 4px;margin-right: 20px;}
+    .document-list .list-item .list-item-top .image img{width: 140px;height: 120px;display: block;}
+    .document-list .list-item .list-item-top .icon{width: 24px;height: 24px;border-radius: 2px;background-color: #FFF5F1;position: absolute;bottom: 20px;right: 0;cursor: pointer;}
+    .document-list .list-item .list-item-top .icon:before{width: 24px;height: 24px;background-position: -148px 2px;}
+    .document-list .list-item .list-item-top .icon.top:before{width: 24px;height: 24px;background-position: -178px 2px;}
+    .document-list .list-item .list-item-top .main {width: 800px;height: 120px;float: left;}
+    .document-list .list-item .list-item-top .main h1{font-weight: normal;font-size: 20px;line-height: 40px;color: #E15616;text-align: left;white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
+    .document-list .list-item .list-item-top .main p{font-weight: normal;font-size: 16px;line-height: 34px;color: #666666;text-align: left;white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
+    .document-list .list-item .list-item-top .main span{margin-right: 10px;}
+    .document-list .list-item .list-item-bot{width: 100%;height: auto;padding: 20px 0;border-top: 1px solid #F5F5F5;float: left;}
+    .document-list .list-item .list-item-bot .pdf-li{width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #999999;float: left;margin: 5px 0;}
+    .document-list .list-item .list-item-bot .pdf-li .img{width: 18px;height: 20px;display: block;float: left;margin-top: 5px;}
+    .document-list .list-item .list-item-bot .pdf-li .name{float: left;margin-left: 10px;cursor: pointer;}
+    .document-list .list-item .list-item-bot .pdf-li .name:hover{color: #E15616;}
+    .document-list .list-item .list-item-bot .pdf-li .time{float: right;}
+    .document-footer{width: 100%;height: 120px;background-color: #F0F0F0;box-sizing: border-box;padding: 30px 0;float: left;}
+    .wrap{color: #999999;font-size: 14px;line-height: 30px;}
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    ::-webkit-input-placeholder {
+        color: #ffffff;
+    }
+    :-moz-placeholder {/* Firefox 18- */
+        color: #ffffff;
+    }
+    ::-moz-placeholder{/* Firefox 19+ */
+        color: #ffffff;
+    }
+    :-ms-input-placeholder {
+        color: #ffffff;
+    }
+    .mIcon:before{transition:none;}
+    .header{width: 100%;height: 17.8vw;background: linear-gradient(90deg, #FF8B45, #E15616);box-sizing: border-box;padding: 3.4vw 2vw;}
+    .wrap-header{width: 100%;height: 100%;line-height: 10vw;font-size: 4vw;color: #ffffff;}
+    .wrap-header .logo{width: 10vw;height: 8.8vw;margin-right:  1vw;}
+    .wrap-header .search{width: 59.9vw;height: 10vw;float: right;border-radius: 5vw;background-color: rgba(255,255,255,0.16);box-sizing: border-box;padding: 0 4vw;position: relative;}
+    .wrap-header .search .input{width: 43.9vw;height: 10vw;line-height:10vw;background-color: rgba(255,255,255,0);box-sizing: border-box;border: none;font-size:3vw;color: #ffffff;}
+    .wrap-header .search .icon-search{width:10vw;height: 10vw;float: right;box-sizing: border-box;padding: 2vw;cursor: pointer;margin-top: 0.5vw;position: absolute;right: 0;top: 0;}
+    .wrap-header .search .icon-search img{width: 4vw;height: 4vw;display: block;cursor: pointer;}
+    .document-content{width: 100%;min-height:108vw;float: left;}
+    .document-content .inner{width:100%;margin: 0 auto;}
+    .document-content .document-list{width: 100%;height: auto;margin-top: 4vw;box-sizing: border-box;padding: 0 3vw;}
+    .document-list .list-item{width: 100%;min-height: auto;background-color: #FFFFFF;border-radius: 1.5vw;box-sizing: border-box;padding: 3vw 3vw 0 3vw;float: left;margin-bottom: 4vw;}
+    .document-list .list-item .list-item-top{width: 100%;height:auto;float: left;padding-bottom:2vw; position: relative;}
+    .document-list .list-item .list-item-top .image{width:20vw;height: 20vw;float: left;border: 1px solid #F3F6F9;border-radius: 1.5vw;margin-right: 2vw;}
+    .document-list .list-item .list-item-top .image img{width: 20vw;height: 20vw;display: block;}
+    .document-list .list-item .list-item-top .icon{width: 24px;height: 24px;border-radius: 2px;background-color: #FFF5F1;position: absolute;bottom: 20px;right: 0;cursor: pointer;}
+    .document-list .list-item .list-item-top .icon:before{width: 24px;height: 24px;background-position: -59vw 0;}
+    .document-list .list-item .list-item-top .icon.top:before{width: 24px;height: 24px;background-position: -67vw 0;}
+    .document-list .list-item .list-item-top .main {height: 20vw;float: left;width: 56vw;}
+    .document-list .list-item .list-item-top .main h1{font-weight: normal;font-size: 4vw;line-height: 6.5vw;color: #E15616;text-align: left;white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
+    .document-list .list-item .list-item-top .main p{width: 100%;font-weight: normal;font-size: 3vw;line-height: 6.5vw;color: #666666;text-align: left;	white-space: normal;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
+    .document-list .list-item .list-item-top .main span{margin-right: 3vw;}
+    .document-list .list-item .list-item-bot{width: 100%;height: auto;padding: 2vw 0;border-top: 1px solid #F5F5F5;float: left;}
+    .document-list .list-item .list-item-bot .pdf-li{width: 100%;height: 10vw;font-size: 3vw;color: #999999;float: left;margin:1vw 0;}
+    .document-list .list-item .list-item-bot .pdf-li .img{width: 7vw;height:8vw;display: block;float: left;margin-top: 0;}
+    .document-list .list-item .list-item-bot .pdf-li .name{float: left;margin-left: 3vw;cursor: pointer;width: 65vw;line-height: 5vw;}
+    .document-list .list-item .list-item-bot .pdf-li .name:hover{color: #E15616;}
+    .document-list .list-item .list-item-bot .pdf-li .time{float: left;margin-left: 3vw;width: 56vw;line-height: 5vw;}
+    .document-footer{width: 100%;height: auto;background-color: #F0F0F0;box-sizing: border-box;padding: 30px 0;float: left;}
+    .wrap{color: #999999;font-size: 14px;line-height: 30px;}
+
+
+
+}

src/main/resources/static/js/common/locallhostAjax.service.js

@@ -0,0 +1,47 @@
+
+/*
+*封装的ajax函数
+* Created by ZHJY on 2020/06/03.
+* @param  option.type     请求类型  get 和 post
+* @param  option.json     数据请求方式,
+* @param  option.url(必选) 请求的url地址   相同域名下的页面（此函数不支持跨域请求）
+* @param  option.data(必选) 请求协带的参数  以js对象的形式定义，如：{name:'张三'}
+* @param  option.replace  是否更新续签
+* @param  option.mask     是否使用模态层加载动画
+*/
+var LocakkHost = {
+        AjaxService : function(option){
+            var loading = '';
+            var def = $.Deferred();
+            console.log(option.json);
+            $.ajax({
+                url: option.url,
+                data: option.data,
+                xhrFields: {//此处为跨域后台保持session一致,切勿删除!!!
+                    withCredentials: true
+                },
+                type: option.type,
+                dataType: "json",
+                async:false,
+                cache:false,
+                contentType: option.json ? 'application/json;charset=UTF-8' : 'application/x-www-form-urlencoded',
+                beforeSend:function () {
+                    // if (option.mask) {
+                    //     loading = layer.load(0,{shade: [0.1,'#000']}); //0.1透明度的白色背景
+                    // }
+                }
+            }).then(function(res) {
+                if(res.code== -99){
+                    location.href = "/document/login.html";
+                }else{
+                    def.resolve(res);
+                }
+            }, function(error) {
+                CAIMEI.Alert('网络请求超时，请重试~','确定',true,function () {
+                    window.location.reload();
+                });
+                def.reject(error);
+            });
+            return def;
+        }
+};

src/main/resources/static/js/common/serviceapi/document.service.js

@@ -0,0 +1,49 @@
+/* HTTP API 采美资料库业务模块
+ * Copyright 2020, CAIMEI365
+ * Date   2020/11/10
+ * auther zhj
+ */
+var DocumentApi = {
+        GetAuthorization: function (params, callback) {//资料库登录初始化
+            LocakkHost.AjaxService({ url:'/document/authorization', type:'get', data:params, json:false})
+            .then(function(res){
+                callback(res);
+            });
+        },
+        GetImgVerifyCode: function (params, callback) {//资料库获取图形验证码
+            LocakkHost.AjaxService({ url:'/document/getImgVerifyCode', type:'get', data:params, json:false})
+            .then(function(res){
+                callback(res);
+            });
+        },
+        DocumentNote: function (params, callback) {//资料库获取短信验证码
+            LocakkHost.AjaxService({ url:'/document/note', type:'get', data:params, json:true})
+            .then(function(res){
+                callback(res);
+            });
+        },
+        MobileCodeLogin: function (params, callback) {//资料库登录
+            LocakkHost.AjaxService({ url:'/document/mobileCodeLogin', type:'POST', data:params, json:false})
+            .then(function(res){
+                callback(res);
+            });
+        },
+        GetDocumentDataList: function (params, callback) {//资料库获取列表
+            LocakkHost.AjaxService({ url:'/document/dataList', type:'GET', data:params, json:false})
+            .then(function(res){
+                callback(res);
+            });
+        },
+        GetDocumentDataDetails: function (params, callback) {//资料库获取详情
+            LocakkHost.AjaxService({ url:'/document/dataDetails', type:'GET', data:params, json:false})
+            .then(function(res){
+                callback(res);
+            });
+        },
+        GetDocumentMoreData: function (params, callback) {//资料库获取详情
+            LocakkHost.AjaxService({ url:'/document/moreData', type:'GET', data:params, json:false})
+            .then(function(res){
+                callback(res);
+            });
+        },
+};

src/main/resources/static/js/document/details.js

@@ -0,0 +1,57 @@
+var documentList = new Vue({
+    el: "#documentList",
+    data: {
+        pdfId:0,
+        ossArchive:{},
+        ossArchivePdf: {},
+        keyWord:'',
+    },
+    computed: {
+
+    },
+    methods: {
+        GetDocumentDataDetailsInfo:function(){//查询资料详情
+            var _self = this;
+            DocumentApi.GetDocumentDataDetails({pdfId:_self.pdfId},function(response){
+                if(response.code == 0){
+                    var data = response.data;
+                    _self.ossArchive = data.ossArchive;
+                    _self.ossArchivePdf = data.ossArchivePdf;
+                    var pdfh5 = new Pdfh5('#pdfMedia', {
+                            pdfurl:  _self.ossArchivePdf.url
+                    });
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
+        },
+        searchKeyWord:function(){//搜索
+            var _self = this;
+            if (_self.keyWord ==''){
+                CAIMEI.dialog('请输入搜索关键字',false,function () {});
+                return;
+            }
+            location.href = '/document/list.html?keyWord='+encodeURI(_self.keyWord);
+        },
+        MoreDetails:function(){
+            var _self = this;
+            location.href = '/document/more-content.html?id='+_self.ossArchive.id;
+        },
+        // PdfDetails:function(){//跳转
+        //     var _self = this;
+        //     location.href = '/document/pdfdetails.html?id='+_self.ossArchivePdf.id
+        // },
+        goPathList:function(){
+            location.href = '/document/list.html';
+        }
+    }
+
+    ,
+    created: function () {
+
+    },
+    mounted: function () {
+        this.pdfId = CAIMEI.getUrlParam('id');
+        this.GetDocumentDataDetailsInfo();
+    }
+});

src/main/resources/static/js/document/list.js

@@ -0,0 +1,105 @@
+var documentList = new Vue({
+    el: "#documentList",
+    data: {
+        requestFlag: true,
+        userId: 0,
+        supplierInfo:{},
+        supplierBanner: [],
+        mainProducts:[],
+        listQuery: {
+            name: '',
+            pageNum: 1,
+            pageSize: 20
+        },
+        hasNextPage:false,
+        pdfDataList:[],
+        isEmptyData:false
+    },
+    computed: {
+
+    },
+    methods: {
+        GetDocumentDataListInfo:function(more){
+            var _self = this;
+            DocumentApi.GetDocumentDataList(_self.listQuery,function(response){
+                if(response.code == 0){
+                    var data = response.data;
+                    if(data){
+                        _self.isEmptyData = false;
+                        _self.hasNextPage = data.hasNextPage;
+                        if(more){
+                            _self.pdfDataList = _self.pdfDataList.concat(data.list);
+                        }else{
+                            _self.pdfDataList = data.list
+                        }
+                    }else{
+                        _self.isEmptyData = true;
+                        _self.pdfDataList=[];
+                    }
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
+        },
+        searchKeyWord:function(){//搜索
+            var _self = this;
+            // if (_self.listQuery.name ==''){
+            //     CAIMEI.dialog('请输入搜索关键字',false,function () {});
+            //     return;
+            // }
+            this.GetDocumentDataListInfo();
+        },
+        PdfDetails:function(id){//跳转
+            location.href = '/document/details.html?id='+id;
+        },
+        productDetails:function(id){//商品详情
+            if(id){
+                location.href = '/product-'+id+'.html';
+            }
+        },
+        supplierDetails:function(id){//供应商主页
+            if(id){
+                location.href = '/supplier/index.html?id='+id;
+            }
+        },
+        keyupSearch: function(event) {
+            // 搜索输入框 按回车键搜索
+            var keyCode = event.keyCode || event.which;
+            console.log(keyCode)
+            if(keyCode === 13){
+                this.GetDocumentDataListInfo();
+            }
+        },
+        showPdfList:function(item){
+            item.isShowDowns = !item.isShowDowns;
+        }
+    },
+    created: function () {
+
+    },
+    mounted: function () {
+        var _self = this;
+        if(CAIMEI.getUrlParam('keyWord')){
+            _self.listQuery.name = decodeURI(CAIMEI.getUrlParam('keyWord'));
+        }
+        _self.GetDocumentDataListInfo();
+        //上垃加载更多
+        $(window).on('scroll', function(){
+            var scrollTop = $(this).scrollTop();
+            var scrollHeight = $(document).height();
+            var windowHeight = window.innerHeight;
+            if (scrollTop + windowHeight >= scrollHeight) {
+                //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
+                var next = _self.listQuery.pageNum+1;
+                if(_self.hasNextPage){
+                    if (_self.requestFlag){
+                        _self.listQuery.pageNum = next;
+                        // 获取列表数据
+                        _self.GetDocumentDataListInfo(true);
+                    }
+                    _self.requestFlag = false;
+                }
+            }
+        });
+    }
+});

src/main/resources/static/js/document/login.js

@@ -0,0 +1,167 @@
+var loginPage = new Vue({
+    el: "#loginPage",
+    data: {
+        maxtime:60,
+        loginLoading: false,
+        qrCodeLogin: false,
+        loginAccount: '',
+        activateCode: '',
+        showClass:'',
+        mobilCount:0,
+        mobileCodeText:'获取验证码',
+        mobilTime:null,
+        isMobileDisabled:false,
+        emailCount:0,
+        emailCodeText:'获取验证码',
+        emailTime:null,
+        isEmailDisabled:false,
+        isCodeModel:false,
+        codeImagePath:'',
+        codeImageToken:'',
+        imageCode:'',
+        isSuccess:false,
+        isError:false,
+        isLoginSuccess:false,
+        rule:{
+            phone: '^1[3|4|5|7|8][0-9]{9}$',
+            code: '^\\d{6}$'
+        },
+        isWeChat: false,
+        maxtime:3
+    },
+    computed: {
+
+    },
+    methods: {
+        getMobileImage:function() {//获取图形验证码
+            var _self = this;
+            var pass = verifyCheack('.massageBtn');
+            if (_self.isMobileDisabled) { return false; }
+            this.$nextTick(function() {
+                if (!pass) {
+                    return false;
+                }
+                DocumentApi.GetImgVerifyCode({},function(response){
+                    if(response.code == 0){
+                        _self.imageCode = '';
+                        _self.codeImagePath = response.data.baseImage;
+                        _self.codeImageToken = response.data.token;
+                        _self.isCodeModel = true;
+                    }else{
+                        CAIMEI.Alert(response.msg,'确定',false);
+                    }
+                })
+            });
+        },
+        getMobileCodeFn:function(){//获取登录短信验证码
+            var _self = this;
+            if(_self.imageCode == ''){
+                CAIMEI.dialog('请输入图形验证码',false,function () {});
+                return;
+            }
+            var params = {
+                    mobile:_self.loginAccount,
+                    imgCode:_self.imageCode,
+                    token:_self.codeImageToken
+            };
+            _self.isMobileDisabled = true;
+            DocumentApi.DocumentNote(params,function (response) {
+                if(response.code == 0){
+                    _self.isCodeModel = false;
+                    CAIMEI.dialog('验证短信已发送',false,function () {});
+                    var TIME_COUNT = 60;
+                    if (!_self.mobilTime) {
+                        _self.mobilCount = TIME_COUNT;
+                        _self.isMobileDisabled = true;
+                        _self.mobilTime = setInterval(function(){
+                            if (_self.mobilCount > 1 && _self.mobilCount <= TIME_COUNT) {
+                                _self.mobilCount--;
+                                _self.mobileCodeText = _self.mobilCount +'s重新发送';
+                            } else {
+                                _self.isMobileDisabled = false;
+                                clearInterval(_self.mobilTime);
+                                _self.mobilTime = null;
+                                _self.mobileCodeText = '获取验证码';
+                            }
+                        },1000)
+                    }
+                }else{
+                    CAIMEI.Alert(response.msg,'确定',false);
+                    _self.isMobileDisabled = false;
+                    _self.isCodeModel = false;
+                }
+            })
+        },
+        blurHandle: function(event) {  // 失去焦点校验
+            var el = event.currentTarget;
+            verifyHandle(el);
+        },
+        refreshCodeImage:function(){
+            this.getMobileImage()
+        },
+        closeCodeModel:function(){
+            this.isCodeModel = false;
+        },
+        loginSubmit: function () {  // 账号登录
+            var _self = this;
+            var pass = verifyForm();
+            if (this.loginLoading) { return false; }
+            this.$nextTick(function(){
+                if (!pass) { return false; }
+                _self.loginLoading = true;
+                var params =  {mobile: _self.loginAccount,code: _self.activateCode};
+                DocumentApi.MobileCodeLogin(params,function(response){
+                    _self.loginLoading = false;
+                    if(response.code === 0){
+                        // 登录成功页面跳转
+                        _self.isLoginSuccess = true;
+                        _self.isSuccess = true;
+                        var timeClock = setInterval(function(){
+                            _self.maxtime--;
+                            if (_self.maxtime == 0) {
+                                location.href = '/document/list.html';
+                                clearInterval(timeClock);
+                                _self.maxtime = 3;
+                                _self.isRefresh = true;
+                            }
+                        },1000);
+                    } else if(response.code == -2) {// 登录失败
+                        _self.isLoginSuccess = true;
+                        _self.isError = true;
+                    }else{
+                        CAIMEI.Alert(response.msg,'确定',false);
+                    }
+                });
+            });
+        },
+        navLinkFn:function(){//跳转
+            location.href = '/document/list.html';
+        },
+        goBackLogin:function(){
+            this.isLoginSuccess = false;
+            this.isError = false
+        },
+        setStorages:function(data){//存储本地数据
+            localStorage.setItem('userInfo',JSON.stringify(data));
+        }
+    },
+    created: function () {
+        var userAgent = navigator.userAgent.toLowerCase();
+        this.isWeChat = userAgent.match(/MicroMessenger/i);
+        // this.weChatAutoLogin();
+    },
+    mounted: function () {
+        var _self = this;
+        $('body').on("focus",'[needverify]:visible',function(){
+            $(this).siblings('.errTips').removeClass("show").siblings('.checked').removeClass("show");
+        });
+        //enter键登录
+        $(document).keyup(function (e) {
+            var e = e || event;
+            e.stopPropagation();
+            if (e.keyCode === 13) {
+                _self.loginSubmit();
+            }
+        });
+    }
+});

src/main/resources/static/js/document/more-content.js

@@ -0,0 +1,45 @@
+var documentList = new Vue({
+    el: "#documentList",
+    data: {
+        pdfId:0,
+        ossArchive:{},
+        keyWord:''
+    },
+    computed: {
+
+    },
+    methods: {
+        GetDocumentMoreDataInfo:function(){//查询更多资料详情
+            var _self = this;
+            DocumentApi.GetDocumentMoreData({archiveId:_self.archiveId},function(response){
+                if(response.code ==0){
+                    var data = response.data;
+                    _self.ossArchive = data;
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
+        },
+        PdfDetails:function(id){//跳转
+            location.href = '/document/details.html?id='+id;
+        },
+        searchKeyWord:function(){//搜索
+            var _self = this;
+            if (_self.keyWord ==''){
+                CAIMEI.dialog('请输入搜索关键字',false,function () {});
+                return;
+            }
+            location.href = '/document/list.html?keyWord='+encodeURI(_self.keyWord);
+        },
+        goPathList:function(){
+            location.href = '/document/list.html';
+        }
+    },
+    created: function () {
+
+    },
+    mounted: function () {
+        this.archiveId = CAIMEI.getUrlParam('id');
+        this.GetDocumentMoreDataInfo();
+    }
+});

src/main/resources/static/js/document/pdfdetails.js

@@ -0,0 +1,39 @@
+var documentList = new Vue({
+    el: "#documentList",
+    data: {
+        pdfId:0,
+        ossArchive:{},
+        ossArchivePdf: {},
+    },
+    computed: {
+
+    },
+    methods: {
+        GetDocumentDataDetailsInfo:function(){//查询资料详情
+            var _self = this;
+            DocumentApi.GetDocumentDataDetails({pdfId:_self.pdfId},function(response){
+                if(response.code == 0){
+                    var data = response.data;
+                    _self.ossArchive = data.ossArchive;
+                    _self.ossArchivePdf = data.ossArchivePdf;
+                    var pdfh5 = new Pdfh5('#pdfMedia', {
+                        pdfurl:  _self.ossArchivePdf.url
+                    });
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
+        },
+        PdfDetails:function(){//跳转
+            var _self = this;
+            location.href = '/document/pdfdetails.html?id='+_self.ossArchivePdf.id
+        }
+    },
+    created: function () {
+
+    },
+    mounted: function () {
+        this.pdfId = CAIMEI.getUrlParam('id');
+        this.GetDocumentDataDetailsInfo();
+    }
+});

src/main/resources/static/lib/js/jquery.media.js

@@ -0,0 +1,511 @@
+/*
+ * jQuery Media Plugin for converting elements into rich media content.
+ *
+ * Examples and documentation at: http://malsup.com/jquery/media/
+ * Copyright (c) 2007-2010 M. Alsup
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ * @author: M. Alsup
+ * @version: 0.99 (05-JUN-2013)
+ * @requires jQuery v1.1.2 or later
+ * $Id: jquery.media.js 2460 2007-07-23 02:53:15Z malsup $
+ *
+ * Supported Media Players:
+ *	- Flash
+ *	- Quicktime
+ *	- Real Player
+ *	- Silverlight
+ *	- Windows Media Player
+ *	- iframe
+ *
+ * Supported Media Formats:
+ *	 Any types supported by the above players, such as:
+ *	 Video: asf, avi, flv, mov, mpg, mpeg, mp4, qt, smil, swf, wmv, 3g2, 3gp
+ *	 Audio: aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, rm, wav, wma
+ *	 Other: bmp, html, pdf, psd, qif, qtif, qti, tif, tiff, xaml
+ *
+ * Thanks to Mark Hicken and Brent Pedersen for helping me debug this on the Mac!
+ * Thanks to Dan Rossi for numerous bug reports and code bits!
+ * Thanks to Skye Giordano for several great suggestions!
+ * Thanks to Richard Connamacher for excellent improvements to the non-IE behavior!
+ */
+/*global SWFObject alert Sys */
+/*jshint forin:false */
+;(function($) {
+"use strict";	
+
+var mode = document.documentMode || 0;
+var msie = /MSIE/.test(navigator.userAgent);
+var lameIE = msie && (/MSIE (6|7|8)\.0/.test(navigator.userAgent) || mode < 9);
+
+/**
+ * Chainable method for converting elements into rich media.
+ *
+ * @param options
+ * @param callback fn invoked for each matched element before conversion
+ * @param callback fn invoked for each matched element after conversion
+ */
+$.fn.media = function(options, f1, f2) {
+	if (options == 'undo') {
+		return this.each(function() {
+			var $this = $(this);
+			var html = $this.data('media.origHTML');
+			if (html)
+				$this.replaceWith(html);
+		});
+	}
+	
+	return this.each(function() {
+		if (typeof options == 'function') {
+			f2 = f1;
+			f1 = options;
+			options = {};
+		}
+		var o = getSettings(this, options);
+		// pre-conversion callback, passes original element and fully populated options
+		if (typeof f1 == 'function') f1(this, o);
+
+		var r = getTypesRegExp();
+		var m = r.exec(o.src.toLowerCase()) || [''];
+		var fn;
+
+		if (o.type)
+			m[0] = o.type;
+		else
+			m.shift();
+
+		for (var i=0; i < m.length; i++) {
+			fn = m[i].toLowerCase();
+			if (isDigit(fn[0])) fn = 'fn' + fn; // fns can't begin with numbers
+			if (!$.fn.media[fn])
+				continue;  // unrecognized media type
+			// normalize autoplay settings
+			var player = $.fn.media[fn+'_player'];
+			if (!o.params) o.params = {};
+			if (player) {
+				var num = player.autoplayAttr == 'autostart';
+				o.params[player.autoplayAttr || 'autoplay'] = num ? (o.autoplay ? 1 : 0) : o.autoplay ? true : false;
+			}
+			var $div = $.fn.media[fn](this, o);
+
+			$div.css('backgroundColor', o.bgColor).width(o.width);
+			
+			if (o.canUndo) {
+				var $temp = $('<div></div>').append(this);
+				$div.data('media.origHTML', $temp.html()); // store original markup
+			}
+			
+			// post-conversion callback, passes original element, new div element and fully populated options
+			if (typeof f2 == 'function') f2(this, $div[0], o, player.name);
+			break;
+		}
+	});
+};
+
+/**
+ * Non-chainable method for adding or changing file format / player mapping
+ * @name mapFormat
+ * @param String format File format extension (ie: mov, wav, mp3)
+ * @param String player Player name to use for the format (one of: flash, quicktime, realplayer, winmedia, silverlight or iframe
+ */
+$.fn.media.mapFormat = function(format, player) {
+	if (!format || !player || !$.fn.media.defaults.players[player]) return; // invalid
+	format = format.toLowerCase();
+	if (isDigit(format[0])) format = 'fn' + format;
+	$.fn.media[format] = $.fn.media[player];
+	$.fn.media[format+'_player'] = $.fn.media.defaults.players[player];
+};
+
+// global defautls; override as needed
+$.fn.media.defaults = {
+	standards:  true,       // use object tags only (no embeds for non-IE browsers)
+	canUndo:    true,       // tells plugin to store the original markup so it can be reverted via: $(sel).mediaUndo()
+	width:		400,
+	height:		400,
+	autoplay:	0,			// normalized cross-player setting
+	bgColor:	'#ffffff',	// background color
+	params:		{ wmode: 'transparent'},	// added to object element as param elements; added to embed element as attrs
+	attrs:		{},			// added to object and embed elements as attrs
+	flvKeyName: 'file',		// key used for object src param (thanks to Andrea Ercolino)
+	flashvars:	{},			// added to flash content as flashvars param/attr
+	flashVersion:	'7',	// required flash version
+	expressInstaller: null,	// src for express installer
+
+	// default flash video and mp3 player (@see: http://jeroenwijering.com/?item=Flash_Media_Player)
+	flvPlayer:	 'mediaplayer.swf',
+	mp3Player:	 'mediaplayer.swf',
+
+	// @see http://msdn2.microsoft.com/en-us/library/bb412401.aspx
+	silverlight: {
+		inplaceInstallPrompt: 'true', // display in-place install prompt?
+		isWindowless:		  'true', // windowless mode (false for wrapping markup)
+		framerate:			  '24',	  // maximum framerate
+		version:			  '0.9',  // Silverlight version
+		onError:			  null,	  // onError callback
+		onLoad:			      null,   // onLoad callback
+		initParams:			  null,	  // object init params
+		userContext:		  null	  // callback arg passed to the load callback
+	}
+};
+
+// Media Players; think twice before overriding
+$.fn.media.defaults.players = {
+	flash: {
+		name:		 'flash',
+		title:		 'Flash',
+		types:		 'flv,mp3,swf',
+		mimetype:	 'application/x-shockwave-flash',
+		pluginspage: 'http://www.adobe.com/go/getflashplayer',
+		ieAttrs: {
+			classid:  'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000',
+			type:	  'application/x-oleobject',
+			codebase: 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=' + $.fn.media.defaults.flashVersion
+		}
+	},
+	quicktime: {
+		name:		 'quicktime',
+		title:		 'QuickTime',
+		mimetype:	 'video/quicktime',
+		pluginspage: 'http://www.apple.com/quicktime/download/',
+		types:		 'aif,aiff,aac,au,bmp,gsm,mov,mid,midi,mpg,mpeg,mp4,m4a,psd,qt,qtif,qif,qti,snd,tif,tiff,wav,3g2,3gp',
+		ieAttrs: {
+			classid:  'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B',
+			codebase: 'http://www.apple.com/qtactivex/qtplugin.cab'
+		}
+	},
+	realplayer: {
+		name:		  'real',
+		title:		  'RealPlayer',
+		types:		  'ra,ram,rm,rpm,rv,smi,smil',
+		mimetype:	  'audio/x-pn-realaudio-plugin',
+		pluginspage:  'http://www.real.com/player/',
+		autoplayAttr: 'autostart',
+		ieAttrs: {
+			classid: 'clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA'
+		}
+	},
+	winmedia: {
+		name:		  'winmedia',
+		title:		  'Windows Media',
+		types:		  'asx,asf,avi,wma,wmv',
+		mimetype:	  isFirefoxWMPPluginInstalled() ? 'application/x-ms-wmp' : 'application/x-mplayer2',
+		pluginspage:  'http://www.microsoft.com/Windows/MediaPlayer/',
+		autoplayAttr: 'autostart',
+		oUrl:		  'url',
+		ieAttrs: {
+			classid:  'clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6',
+			type:	  'application/x-oleobject'
+		}
+	},
+	// special cases
+	img: {
+		name:  'img',
+		title: 'Image',
+		types: 'gif,png,jpg'
+	},
+	iframe: {
+		name:  'iframe',
+		types: 'html,pdf'
+	},
+	silverlight: {
+		name:  'silverlight',
+		types: 'xaml'
+	}
+};
+
+//
+//	everything below here is private
+//
+
+
+// detection script for FF WMP plugin (http://www.therossman.org/experiments/wmp_play.html)
+// (hat tip to Mark Ross for this script)
+function isFirefoxWMPPluginInstalled() {
+	var plugs = navigator.plugins || [];
+	for (var i = 0; i < plugs.length; i++) {
+		var plugin = plugs[i];
+		if (plugin['filename'] == 'np-mswmp.dll')
+			return true;
+	}
+	return false;
+}
+
+var counter = 1;
+
+for (var player in $.fn.media.defaults.players) {
+	var types = $.fn.media.defaults.players[player].types;
+	$.each(types.split(','), function(i,o) {
+		if (isDigit(o[0])) o = 'fn' + o;
+		$.fn.media[o] = $.fn.media[player] = getGenerator(player);
+		$.fn.media[o+'_player'] = $.fn.media.defaults.players[player];
+	});
+}
+
+function getTypesRegExp() {
+	var types = '';
+	for (var player in $.fn.media.defaults.players) {
+		if (types.length) types += ',';
+		types += $.fn.media.defaults.players[player].types;
+	}
+	return new RegExp('\\.(' + types.replace(/,/ig,'|') + ')\\b');
+}
+
+function getGenerator(player) {
+	return function(el, options) {
+		return generate(el, options, player);
+	};
+}
+
+function isDigit(c) {
+	return '0123456789'.indexOf(c) > -1;
+}
+
+// flatten all possible options: global defaults, meta, option obj
+function getSettings(el, options) {
+	options = options || {};
+	var a, n;
+	var $el = $(el);
+	var cls = el.className || '';
+	// support metadata plugin (v1.0 and v2.0)
+	var meta = $.metadata ? $el.metadata() : $.meta ? $el.data() : {};
+	meta = meta || {};
+	var w = meta.width  || parseInt(((cls.match(/\bw:(\d+)/)||[])[1]||0),10) || parseInt(((cls.match(/\bwidth:(\d+)/)||[])[1]||0),10);
+	var h = meta.height || parseInt(((cls.match(/\bh:(\d+)/)||[])[1]||0),10) || parseInt(((cls.match(/\bheight:(\d+)/)||[])[1]||0),10);
+
+	if (w) meta.width = w;
+	if (h) meta.height = h;
+	if (cls) meta.cls = cls;
+	
+	// crank html5 style data attributes
+	var dataName = 'data-';
+    for (var i=0; i < el.attributes.length; i++) {
+        a = el.attributes[i], n = $.trim(a.name);
+        var index = n.indexOf(dataName);
+        if (index === 0) {
+			n = n.substring(dataName.length);
+			meta[n] = a.value;
+        }
+    }
+
+	a = $.fn.media.defaults;
+	var b = options;
+	var c = meta;
+
+	var p = { params: { bgColor: options.bgColor || $.fn.media.defaults.bgColor } };
+	var opts = $.extend({}, a, b, c);
+	$.each(['attrs','params','flashvars','silverlight'], function(i,o) {
+		opts[o] = $.extend({}, p[o] || {}, a[o] || {}, b[o] || {}, c[o] || {});
+	});
+
+	if (typeof opts.caption == 'undefined') opts.caption = $el.text();
+
+	// make sure we have a source!
+	opts.src = opts.src || $el.attr('href') || $el.attr('src') || 'unknown';
+	return opts;
+}
+
+//
+//	Flash Player
+//
+
+// generate flash using SWFObject library if possible
+$.fn.media.swf = function(el, opts) {
+	var f, p;
+	if (!window.SWFObject && !window.swfobject) {
+		// roll our own
+		if (opts.flashvars) {
+			var a = [];
+			for (f in opts.flashvars)
+				a.push(f + '=' + opts.flashvars[f]);
+			if (!opts.params) opts.params = {};
+			opts.params.flashvars = a.join('&');
+		}
+		return generate(el, opts, 'flash');
+	}
+
+	var id = el.id ? (' id="'+el.id+'"') : '';
+	var cls = opts.cls ? (' class="' + opts.cls + '"') : '';
+	var $div = $('<div' + id + cls + '>');
+
+	// swfobject v2+
+	if (window.swfobject) {
+		$(el).after($div).appendTo($div);
+		if (!el.id) el.id = 'movie_player_' + counter++;
+
+		// replace el with swfobject content
+		window.swfobject.embedSWF(opts.src, el.id, opts.width, opts.height, opts.flashVersion,
+			opts.expressInstaller, opts.flashvars, opts.params, opts.attrs);
+	}
+	// swfobject < v2
+	else {
+		$(el).after($div).remove();
+		var so = new SWFObject(opts.src, 'movie_player_' + counter++, opts.width, opts.height, opts.flashVersion, opts.bgColor);
+		if (opts.expressInstaller) so.useExpressInstall(opts.expressInstaller);
+
+		for (p in opts.params)
+			if (p != 'bgColor') so.addParam(p, opts.params[p]);
+		for (f in opts.flashvars)
+			so.addVariable(f, opts.flashvars[f]);
+		so.write($div[0]);
+	}
+
+	if (opts.caption) $('<div>').appendTo($div).html(opts.caption);
+	return $div;
+};
+
+// map flv and mp3 files to the swf player by default
+$.fn.media.flv = $.fn.media.mp3 = function(el, opts) {
+	var src = opts.src;
+	var player = /\.mp3\b/i.test(src) ? opts.mp3Player : opts.flvPlayer;
+	var key = opts.flvKeyName;
+	src = encodeURIComponent(src);
+	opts.src = player;
+	opts.src = opts.src + '?'+key+'=' + (src);
+	var srcObj = {};
+	srcObj[key] = src;
+	opts.flashvars = $.extend({}, srcObj, opts.flashvars );
+	return $.fn.media.swf(el, opts);
+};
+
+//
+//	Silverlight
+//
+$.fn.media.xaml = function(el, opts) {
+	if (!window.Sys || !window.Sys.Silverlight) {
+		if ($.fn.media.xaml.warning) return;
+		$.fn.media.xaml.warning = 1;
+		alert('You must include the Silverlight.js script.');
+		return;
+	}
+
+	var props = {
+		width: opts.width,
+		height: opts.height,
+		background: opts.bgColor,
+		inplaceInstallPrompt: opts.silverlight.inplaceInstallPrompt,
+		isWindowless: opts.silverlight.isWindowless,
+		framerate: opts.silverlight.framerate,
+		version: opts.silverlight.version
+	};
+	var events = {
+		onError: opts.silverlight.onError,
+		onLoad: opts.silverlight.onLoad
+	};
+
+	var id1 = el.id ? (' id="'+el.id+'"') : '';
+	var id2 = opts.id || 'AG' + counter++;
+	// convert element to div
+	var cls = opts.cls ? (' class="' + opts.cls + '"') : '';
+	var $div = $('<div' + id1 + cls + '>');
+	$(el).after($div).remove();
+
+	Sys.Silverlight.createObjectEx({
+		source: opts.src,
+		initParams: opts.silverlight.initParams,
+		userContext: opts.silverlight.userContext,
+		id: id2,
+		parentElement: $div[0],
+		properties: props,
+		events: events
+	});
+
+	if (opts.caption) $('<div>').appendTo($div).html(opts.caption);
+	return $div;
+};
+
+//
+// generate object/embed markup
+//
+function generate(el, opts, player) {
+	var $el = $(el);
+	var o = $.fn.media.defaults.players[player];
+	var a, key, v;
+
+	if (player == 'iframe') {
+		o = $('<iframe' + ' width="' + opts.width + '" height="' + opts.height + '" >');
+		o.attr('src', opts.src);
+		o.css('backgroundColor', o.bgColor);
+	}
+	else if (player == 'img') {
+		o = $('<img>');
+		o.attr('src', opts.src);
+		if (opts.width)
+			o.attr('width', opts.width);
+		if (opts.height)
+			o.attr('height', opts.height);
+		o.css('backgroundColor', o.bgColor);
+	}
+	else if (lameIE) {
+		a = ['<object width="' + opts.width + '" height="' + opts.height + '" '];
+		for (key in opts.attrs)
+			a.push(key + '="'+opts.attrs[key]+'" ');
+		for (key in o.ieAttrs || {}) {
+			v = o.ieAttrs[key];
+			if (key == 'codebase' && window.location.protocol == 'https:')
+				v = v.replace('http','https');
+			a.push(key + '="'+v+'" ');
+		}
+		a.push('></ob'+'ject'+'>');
+		var p = ['<param name="' + (o.oUrl || 'src') +'" value="' + opts.src + '">'];
+		for (key in opts.params)
+			p.push('<param name="'+ key +'" value="' + opts.params[key] + '">');
+		o = document.createElement(a.join(''));
+		for (var i=0; i < p.length; i++)
+			o.appendChild(document.createElement(p[i]));
+	}
+	else if (opts.standards) {
+		// Rewritten to be standards compliant by Richard Connamacher
+		a = ['<object type="' + o.mimetype +'" width="' + opts.width + '" height="' + opts.height +'"'];
+		if (opts.src) a.push(' data="' + opts.src + '" ');
+		if (msie) {
+			for (key in o.ieAttrs || {}) {
+				v = o.ieAttrs[key];
+				if (key == 'codebase' && window.location.protocol == 'https:')
+					v = v.replace('http','https');
+				a.push(key + '="'+v+'" ');
+			}
+		}
+		a.push('>');
+		a.push('<param name="' + (o.oUrl || 'src') +'" value="' + opts.src + '">');
+		for (key in opts.params) {
+			if (key == 'wmode' && player != 'flash') // FF3/Quicktime borks on wmode
+				continue;
+			a.push('<param name="'+ key +'" value="' + opts.params[key] + '">');
+		}
+		// Alternate HTML
+		a.push('<div><p><strong>'+o.title+' Required</strong></p><p>'+o.title+' is required to view this media. <a href="'+o.pluginspage+'">Download Here</a>.</p></div>');
+		a.push('</ob'+'ject'+'>');
+	}
+	 else {
+	        a = ['<embed width="' + opts.width + '" height="' + opts.height + '" style="display:block"'];
+	        if (opts.src) a.push(' src="' + opts.src + '" ');
+	        for (key in opts.attrs)
+	            a.push(key + '="'+opts.attrs[key]+'" ');
+	        for (key in o.eAttrs || {})
+	            a.push(key + '="'+o.eAttrs[key]+'" ');
+	        for (key in opts.params) {
+	            if (key == 'wmode' && player != 'flash') // FF3/Quicktime borks on wmode
+					continue;
+	            a.push(key + '="'+opts.params[key]+'" ');
+	        }
+	        a.push('></em'+'bed'+'>');
+	    }	
+	// convert element to div
+	var id = el.id ? (' id="'+el.id+'"') : '';
+	var cls = opts.cls ? (' class="' + opts.cls + '"') : '';
+	var $div = $('<div' + id + cls + '>');
+	$el.after($div).remove();
+	if (lameIE || player == 'iframe' || player == 'img')
+		$div.append(o);
+	else
+		$div.html(a.join(''));
+	
+	if (opts.caption) 
+		$('<div>').appendTo($div).html(opts.caption);
+	return $div;
+}
+
+
+})(jQuery);

src/main/resources/static/lib/js/pdfh5.js

@@ -0,0 +1,1415 @@
+;
+(function(g, fn) {
+    var version = "1.3.9",
+        pdfjsVersion = "2.3.200";
+    console.log("pdfh5.js v" + version + " & https://www.gjtool.cn")
+    if (typeof require !== 'undefined') {
+        if (g.$ === undefined) {
+            g.$ = require('/lib/jquery-3.5.1.min.js');
+        }
+        g.pdfjsWorker = require('/lib/js/pdf.worker');
+        g.pdfjsLib = require('/lib/js/pdf.js');
+    }
+    var pdfjsLib = g.pdfjsLib,
+        $ = g.$,
+        pdfjsWorker = g.pdfjsWorker;
+    if (typeof define === 'function' && define.amd) {
+        define(function() {
+            return fn(g, pdfjsWorker, pdfjsLib, $, version)
+        })
+    } else if (typeof module !== 'undefined' && module.exports) {
+        module.exports = fn(g, pdfjsWorker, pdfjsLib, $, version)
+    } else {
+        g.Pdfh5 = fn(g, pdfjsWorker, pdfjsLib, $, version)
+    }
+})(typeof window !== 'undefined' ? window : this, function(g, pdfjsWorker, pdfjsLib, $, version) {
+    'use strict';
+    var definePinchZoom = function($) {
+        var PinchZoom = function(el, options, viewerContainer) {
+                this.el = $(el);
+                this.viewerContainer = viewerContainer;
+                this.zoomFactor = 1;
+                this.lastScale = 1;
+                this.offset = {
+                    x: 0,
+                    y: 0
+                };
+                this.options = $.extend({}, this.defaults, options);
+                this.options.zoomOutFactor = isNaN(options.zoomOutFactor) ? 1.2 : options.zoomOutFactor;
+                this.options.animationDuration = isNaN(options.animationDuration) ? 300 : options.animationDuration;
+                this.options.maxZoom = isNaN(options.maxZoom) ? 3 : options.maxZoom;
+                this.options.minZoom = isNaN(options.minZoom) ? 0.8 : options.minZoom;
+                this.setupMarkup();
+                this.bindEvents();
+                this.update();
+                this.enable();
+                this.height = 0;
+                this.load = false;
+                this.direction = null;
+                this.clientY = null;
+                this.lastclientY = null;
+            },
+            sum = function(a, b) {
+                return a + b;
+            },
+            isCloseTo = function(value, expected) {
+                return value > expected - 0.01 && value < expected + 0.01;
+            };
+
+        PinchZoom.prototype = {
+            defaults: {
+                tapZoomFactor: 3,
+                zoomOutFactor: 1.2,
+                animationDuration: 300,
+                maxZoom: 3,
+                minZoom: 0.8,
+                lockDragAxis: false,
+                use2d: true,
+                zoomStartEventName: 'pz_zoomstart',
+                zoomEndEventName: 'pz_zoomend',
+                dragStartEventName: 'pz_dragstart',
+                dragEndEventName: 'pz_dragend',
+                doubleTapEventName: 'pz_doubletap'
+            },
+            handleDragStart: function(event) {
+                this.el.trigger(this.options.dragStartEventName);
+                this.stopAnimation();
+                this.lastDragPosition = false;
+                this.hasInteraction = true;
+                this.handleDrag(event);
+            },
+            handleDrag: function(event) {
+
+                if (this.zoomFactor > 1.0) {
+                    var touch = this.getTouches(event)[0];
+                    this.drag(touch, this.lastDragPosition, event);
+                    this.offset = this.sanitizeOffset(this.offset);
+                    this.lastDragPosition = touch;
+                }
+            },
+
+            handleDragEnd: function() {
+                this.el.trigger(this.options.dragEndEventName);
+                this.end();
+            },
+            handleZoomStart: function(event) {
+                this.el.trigger(this.options.zoomStartEventName);
+                this.stopAnimation();
+                this.lastScale = 1;
+                this.nthZoom = 0;
+                this.lastZoomCenter = false;
+                this.hasInteraction = true;
+            },
+            handleZoom: function(event, newScale) {
+                var touchCenter = this.getTouchCenter(this.getTouches(event)),
+                    scale = newScale / this.lastScale;
+                this.lastScale = newScale;
+                this.nthZoom += 1;
+                if (this.nthZoom > 3) {
+
+                    this.scale(scale, touchCenter);
+                    this.drag(touchCenter, this.lastZoomCenter);
+                }
+                this.lastZoomCenter = touchCenter;
+            },
+
+            handleZoomEnd: function() {
+                this.el.trigger(this.options.zoomEndEventName);
+                this.end();
+            },
+            handleDoubleTap: function(event) {
+                var center = this.getTouches(event)[0],
+                    zoomFactor = this.zoomFactor > 1 ? 1 : this.options.tapZoomFactor,
+                    startZoomFactor = this.zoomFactor,
+                    updateProgress = (function(progress) {
+                        this.scaleTo(startZoomFactor + progress * (zoomFactor - startZoomFactor), center);
+                    }).bind(this);
+
+                if (this.hasInteraction) {
+                    return;
+                }
+                if (startZoomFactor > zoomFactor) {
+                    center = this.getCurrentZoomCenter();
+                }
+
+                this.animate(this.options.animationDuration, updateProgress, this.swing);
+                this.el.trigger(this.options.doubleTapEventName);
+            },
+            sanitizeOffset: function(offset) {
+                var maxX = (this.zoomFactor - 1) * this.getContainerX(),
+                    maxY = (this.zoomFactor - 1) * this.getContainerY(),
+                    maxOffsetX = Math.max(maxX, 0),
+                    maxOffsetY = Math.max(maxY, 0),
+                    minOffsetX = Math.min(maxX, 0),
+                    minOffsetY = Math.min(maxY, 0);
+
+                var x = Math.min(Math.max(offset.x, minOffsetX), maxOffsetX),
+                    y = Math.min(Math.max(offset.y, minOffsetY), maxOffsetY);
+
+
+                return {
+                    x: x,
+                    y: y
+                };
+            },
+            scaleTo: function(zoomFactor, center) {
+                this.scale(zoomFactor / this.zoomFactor, center);
+            },
+            scale: function(scale, center) {
+                scale = this.scaleZoomFactor(scale);
+                this.addOffset({
+                    x: (scale - 1) * (center.x + this.offset.x),
+                    y: (scale - 1) * (center.y + this.offset.y)
+                });
+                this.done && this.done.call(this, this.getInitialZoomFactor() * this.zoomFactor)
+            },
+            scaleZoomFactor: function(scale) {
+                var originalZoomFactor = this.zoomFactor;
+                this.zoomFactor *= scale;
+                this.zoomFactor = Math.min(this.options.maxZoom, Math.max(this.zoomFactor, this.options.minZoom));
+                return this.zoomFactor / originalZoomFactor;
+            },
+            drag: function(center, lastCenter, event) {
+                if (lastCenter) {
+                    if (this.options.lockDragAxis) {
+                        if (Math.abs(center.x - lastCenter.x) > Math.abs(center.y - lastCenter.y)) {
+                            this.addOffset({
+                                x: -(center.x - lastCenter.x),
+                                y: 0
+                            });
+                        } else {
+                            this.addOffset({
+                                y: -(center.y - lastCenter.y),
+                                x: 0
+                            });
+                        }
+                    } else {
+                        if (center.y - lastCenter.y < 0) {
+                            this.direction = "down";
+                        } else if (center.y - lastCenter.y > 10) {
+                            this.direction = "up";
+                        }
+                        this.addOffset({
+                            y: -(center.y - lastCenter.y),
+                            x: -(center.x - lastCenter.x)
+                        });
+                    }
+                }
+            },
+            getTouchCenter: function(touches) {
+                return this.getVectorAvg(touches);
+            },
+            getVectorAvg: function(vectors) {
+                return {
+                    x: vectors.map(function(v) {
+                        return v.x;
+                    }).reduce(sum) / vectors.length,
+                    y: vectors.map(function(v) {
+                        return v.y;
+                    }).reduce(sum) / vectors.length
+                };
+            },
+            addOffset: function(offset) {
+                this.offset = {
+                    x: this.offset.x + offset.x,
+                    y: this.offset.y + offset.y
+                };
+            },
+
+            sanitize: function() {
+                if (this.zoomFactor < this.options.zoomOutFactor) {
+                    this.zoomOutAnimation();
+                } else if (this.isInsaneOffset(this.offset)) {
+                    this.sanitizeOffsetAnimation();
+                }
+            },
+            isInsaneOffset: function(offset) {
+                var sanitizedOffset = this.sanitizeOffset(offset);
+                return sanitizedOffset.x !== offset.x ||
+                    sanitizedOffset.y !== offset.y;
+            },
+            sanitizeOffsetAnimation: function() {
+                var targetOffset = this.sanitizeOffset(this.offset),
+                    startOffset = {
+                        x: this.offset.x,
+                        y: this.offset.y
+                    },
+                    updateProgress = (function(progress) {
+                        this.offset.x = startOffset.x + progress * (targetOffset.x - startOffset.x);
+                        this.offset.y = startOffset.y + progress * (targetOffset.y - startOffset.y);
+                        this.update();
+                    }).bind(this);
+
+                this.animate(
+                    this.options.animationDuration,
+                    updateProgress,
+                    this.swing
+                );
+            },
+            zoomOutAnimation: function() {
+                var startZoomFactor = this.zoomFactor,
+                    zoomFactor = 1,
+                    center = this.getCurrentZoomCenter(),
+                    updateProgress = (function(progress) {
+                        this.scaleTo(startZoomFactor + progress * (zoomFactor - startZoomFactor), center);
+                    }).bind(this);
+
+                this.animate(
+                    this.options.animationDuration,
+                    updateProgress,
+                    this.swing
+                );
+            },
+            updateAspectRatio: function() {
+                this.setContainerY(this.getContainerX() / this.getAspectRatio());
+            },
+            getInitialZoomFactor: function() {
+                if (this.container[0] && this.el[0]) {
+                    return this.container[0].offsetWidth / this.el[0].offsetWidth;
+                } else {
+                    return 0
+                }
+            },
+            getAspectRatio: function() {
+                if (this.el[0]) {
+                    var offsetHeight = this.el[0].offsetHeight;
+                    return this.container[0].offsetWidth / offsetHeight;
+                } else {
+                    return 0
+                }
+
+            },
+            getCurrentZoomCenter: function() {
+                var length = this.container[0].offsetWidth * this.zoomFactor,
+                    offsetLeft = this.offset.x,
+                    offsetRight = length - offsetLeft - this.container[0].offsetWidth,
+                    widthOffsetRatio = offsetLeft / offsetRight,
+                    centerX = widthOffsetRatio * this.container[0].offsetWidth / (widthOffsetRatio + 1),
+
+                    height = this.container[0].offsetHeight * this.zoomFactor,
+                    offsetTop = this.offset.y,
+                    offsetBottom = height - offsetTop - this.container[0].offsetHeight,
+                    heightOffsetRatio = offsetTop / offsetBottom,
+                    centerY = heightOffsetRatio * this.container[0].offsetHeight / (heightOffsetRatio + 1);
+
+                if (offsetRight === 0) {
+                    centerX = this.container[0].offsetWidth;
+                }
+                if (offsetBottom === 0) {
+                    centerY = this.container[0].offsetHeight;
+                }
+
+                return {
+                    x: centerX,
+                    y: centerY
+                };
+            },
+
+            canDrag: function() {
+                return !isCloseTo(this.zoomFactor, 1);
+            },
+
+            getTouches: function(event) {
+                var position = this.container.offset();
+                return Array.prototype.slice.call(event.touches).map(function(touch) {
+                    return {
+                        x: touch.pageX - position.left,
+                        y: touch.pageY - position.top
+                    };
+                });
+            },
+            animate: function(duration, framefn, timefn, callback) {
+                var startTime = new Date().getTime(),
+                    renderFrame = (function() {
+                        if (!this.inAnimation) {
+                            return;
+                        }
+                        var frameTime = new Date().getTime() - startTime,
+                            progress = frameTime / duration;
+                        if (frameTime >= duration) {
+                            framefn(1);
+                            if (callback) {
+                                callback();
+                            }
+                            this.update();
+                            this.stopAnimation();
+                        } else {
+                            if (timefn) {
+                                progress = timefn(progress);
+                            }
+                            framefn(progress);
+                            this.update();
+                            requestAnimationFrame(renderFrame);
+                        }
+                    }).bind(this);
+                this.inAnimation = true;
+                requestAnimationFrame(renderFrame);
+            },
+            stopAnimation: function() {
+                this.inAnimation = false;
+
+            },
+            swing: function(p) {
+                return -Math.cos(p * Math.PI) / 2 + 0.5;
+            },
+
+            getContainerX: function() {
+                if (this.el[0]) {
+                    return this.el[0].offsetWidth;
+                } else {
+                    return 0;
+                }
+            },
+
+            getContainerY: function() {
+                return this.el[0].offsetHeight;
+            },
+            setContainerY: function(y) {
+                y = y.toFixed(2);
+                return this.container.height(y);
+            },
+            setupMarkup: function() {
+                this.container = $('<div class="pinch-zoom-container"></div>');
+                this.el.before(this.container);
+                this.container.append(this.el);
+
+                this.container.css({
+                    'position': 'relative',
+                });
+
+                this.el.css({
+                    '-webkit-transform-origin': '0% 0%',
+                    '-moz-transform-origin': '0% 0%',
+                    '-ms-transform-origin': '0% 0%',
+                    '-o-transform-origin': '0% 0%',
+                    'transform-origin': '0% 0%',
+                    'position': 'relative'
+                });
+
+            },
+
+            end: function() {
+                this.hasInteraction = false;
+                this.sanitize();
+                this.update();
+
+            },
+            bindEvents: function() {
+                detectGestures(this.container.eq(0), this, this.viewerContainer);
+                $(g).on('resize', this.update.bind(this));
+                $(this.el).find('img').on('load', this.update.bind(this));
+
+            },
+            update: function() {
+
+                if (this.updatePlaned) {
+                    return;
+                }
+                this.updatePlaned = true;
+                setTimeout((function() {
+                    this.updatePlaned = false;
+                    this.updateAspectRatio();
+                    var zoomFactor = this.getInitialZoomFactor() * this.zoomFactor,
+                        offsetX = (-this.offset.x / zoomFactor).toFixed(3),
+                        offsetY = (-this.offset.y / zoomFactor).toFixed(3);
+                    this.lastclientY = offsetY;
+
+                    var transform3d = 'scale3d(' + zoomFactor + ', ' + zoomFactor + ',1) ' +
+                        'translate3d(' + offsetX + 'px,' + offsetY + 'px,0px)',
+                        transform2d = 'scale(' + zoomFactor + ', ' + zoomFactor + ') ' +
+                        'translate(' + offsetX + 'px,' + offsetY + 'px)',
+                        removeClone = (function() {
+                            if (this.clone) {
+                                this.clone.remove();
+                                delete this.clone;
+                            }
+                        }).bind(this);
+                    if (!this.options.use2d || this.hasInteraction || this.inAnimation) {
+                        this.is3d = true;
+                        this.el.css({
+                            '-webkit-transform': transform3d,
+                            '-o-transform': transform2d,
+                            '-ms-transform': transform2d,
+                            '-moz-transform': transform2d,
+                            'transform': transform3d
+                        });
+                    } else {
+                        this.el.css({
+                            '-webkit-transform': transform2d,
+                            '-o-transform': transform2d,
+                            '-ms-transform': transform2d,
+                            '-moz-transform': transform2d,
+                            'transform': transform2d
+                        });
+                        this.is3d = false;
+                    }
+                }).bind(this), 0);
+            },
+            enable: function() {
+                this.enabled = true;
+            },
+            disable: function() {
+                this.enabled = false;
+            },
+            destroy: function() {
+                var dom = this.el.clone();
+                var p = this.container.parent();
+                this.container.remove();
+                dom.removeAttr('style');
+                p.append(dom);
+            }
+        };
+
+        var detectGestures = function(el, target, viewerContainer) {
+            var interaction = null,
+                fingers = 0,
+                lastTouchStart = null,
+                startTouches = null,
+                lastTouchY = null,
+                clientY = null,
+                lastclientY = 0,
+                lastTop = 0,
+                setInteraction = function(newInteraction, event) {
+                    if (interaction !== newInteraction) {
+
+                        if (interaction && !newInteraction) {
+                            switch (interaction) {
+                                case "zoom":
+                                    target.handleZoomEnd(event);
+                                    break;
+                                case 'drag':
+                                    target.handleDragEnd(event);
+                                    break;
+                            }
+                        }
+
+                        switch (newInteraction) {
+                            case 'zoom':
+                                target.handleZoomStart(event);
+                                break;
+                            case 'drag':
+                                target.handleDragStart(event);
+                                break;
+                        }
+                    }
+                    interaction = newInteraction;
+                },
+
+                updateInteraction = function(event) {
+                    if (fingers === 2) {
+                        setInteraction('zoom');
+                    } else if (fingers === 1 && target.canDrag()) {
+                        setInteraction('drag', event);
+                    } else {
+                        setInteraction(null, event);
+                    }
+                },
+
+                targetTouches = function(touches) {
+                    return Array.prototype.slice.call(touches).map(function(touch) {
+                        return {
+                            x: touch.pageX,
+                            y: touch.pageY
+                        };
+                    });
+                },
+
+                getDistance = function(a, b) {
+                    var x, y;
+                    x = a.x - b.x;
+                    y = a.y - b.y;
+                    return Math.sqrt(x * x + y * y);
+                },
+
+                calculateScale = function(startTouches, endTouches) {
+                    var startDistance = getDistance(startTouches[0], startTouches[1]),
+                        endDistance = getDistance(endTouches[0], endTouches[1]);
+                    return endDistance / startDistance;
+                },
+
+                cancelEvent = function(event) {
+                    event.stopPropagation();
+                    event.preventDefault();
+                },
+
+                detectDoubleTap = function(event) {
+                    var time = (new Date()).getTime();
+                    var pageY = event.changedTouches[0].pageY;
+                    var top = parentNode.scrollTop || 0;
+                    if (fingers > 1) {
+                        lastTouchStart = null;
+                        lastTouchY = null;
+                        cancelEvent(event);
+                    }
+
+                    if (time - lastTouchStart < 300 && Math.abs(pageY - lastTouchY) < 10 && Math.abs(lastTop - top) < 10) {
+                        cancelEvent(event);
+                        target.handleDoubleTap(event);
+                        switch (interaction) {
+                            case "zoom":
+                                target.handleZoomEnd(event);
+                                break;
+                            case 'drag':
+                                target.handleDragEnd(event);
+                                break;
+                        }
+                    }
+
+                    if (fingers === 1) {
+                        lastTouchStart = time;
+                        lastTouchY = pageY;
+                        lastTop = top;
+                    }
+                },
+                firstMove = true;
+            if (viewerContainer) {
+                var parentNode = viewerContainer[0];
+            }
+            if (parentNode) {
+                parentNode.addEventListener('touchstart', function(event) {
+                    if (target.enabled) {
+                        firstMove = true;
+                        fingers = event.touches.length;
+                        detectDoubleTap(event);
+                        clientY = event.changedTouches[0].clientY;
+                        if (fingers > 1) {
+                            cancelEvent(event);
+                        }
+                    }
+                });
+
+                parentNode.addEventListener('touchmove', function(event) {
+                    if (target.enabled) {
+                        lastclientY = event.changedTouches[0].clientY;
+                        if (firstMove) {
+                            updateInteraction(event);
+                            startTouches = targetTouches(event.touches);
+                        } else {
+                            switch (interaction) {
+                                case 'zoom':
+                                    target.handleZoom(event, calculateScale(startTouches, targetTouches(event.touches)));
+                                    break;
+                                case 'drag':
+                                    target.handleDrag(event);
+                                    break;
+                            }
+                            if (interaction) {
+                                target.update(lastclientY);
+                            }
+                        }
+                        if (fingers > 1) {
+                            cancelEvent(event);
+                        }
+                        firstMove = false;
+                    }
+                });
+
+                parentNode.addEventListener('touchend', function(event) {
+                    if (target.enabled) {
+                        fingers = event.touches.length;
+                        if (fingers > 1) {
+                            cancelEvent(event);
+                        }
+                        updateInteraction(event);
+                    }
+                });
+            }
+
+        };
+        return PinchZoom;
+    };
+    var PinchZoom = definePinchZoom($);
+    var Pdfh5 = function(dom, options) {
+        this.version = version;
+        this.container = $(dom);
+        this.options = options;
+        this.init();
+    };
+    Pdfh5.prototype = {
+        init: function() {
+            var self = this;
+            this.thePDF = null;
+            this.totalNum = null;
+            this.pages = null;
+            this.initTime = 0;
+            this.scale = 1;
+            this.currentNum = 1;
+            this.loadedCount = 0;
+            this.endTime = 0;
+            this.pinchZoom = null;
+            this.timer = null;
+            this.docWidth = document.documentElement.clientWidth;
+            this.winWidth = $(window).width();
+            this.cache = {};
+            this.eventType = {};
+            this.cacheNum = 1;
+            this.resizeEvent = false;
+            this.cacheData = null;
+            this.pdfjsLibPromise = null;
+            if (this.container[0].pdfLoaded) {
+                this.destroy();
+            }
+            this.container[0].pdfLoaded = false;
+            this.container.addClass("pdfjs")
+            this.initTime = new Date().getTime();
+            setTimeout(function() {
+                var arr1 = self.eventType["scroll"];
+                if (arr1 && arr1 instanceof Array) {
+                    for (var i = 0; i < arr1.length; i++) {
+                        arr1[i] && arr1[i].call(self, self.initTime)
+                    }
+                }
+            }, 0)
+            this.options = this.options ? this.options : {};
+            this.options.pdfurl = this.options.pdfurl ? this.options.pdfurl : null;
+            this.options.data = this.options.data ? this.options.data : null;
+            this.options.scale = this.scale;
+            this.options.zoomEnable = this.options.zoomEnable === false ? false : true;
+            this.options.scrollEnable = this.options.scrollEnable === false ? false : true;
+            this.options.loadingBar = this.options.loadingBar === false ? false : true;
+            this.options.pageNum = this.options.pageNum === false ? false : true;
+            this.options.backTop = this.options.backTop === false ? false : true;
+            this.options.URIenable = this.options.URIenable === true ? true : false;
+            this.options.fullscreen = this.options.fullscreen === false ? false : true;
+            this.options.lazy = this.options.lazy === true ? true : false;
+            this.options.renderType = this.options.renderType === "svg" ? "svg" : "canvas";
+            this.options.resize = this.options.resize === false ? false : true;
+            if (this.options.limit) {
+                var n = parseFloat(this.options.limit)
+                this.options.limit = isNaN(n) ? 0 : n < 0 ? 0 : n;
+            } else {
+                this.options.limit = 0
+            }
+            var html = '<div class="loadingBar">' +
+                '<div class="progress">' +
+                ' <div class="glimmer">' +
+                '</div>' +
+                ' </div>' +
+                '</div>' +
+                '<div class="pageNum">' +
+                '<div class="pageNum-bg"></div>' +
+                ' <div class="pageNum-num">' +
+                ' <span class="pageNow">1</span>/' +
+                '<span class="pageTotal">1</span>' +
+                '</div>' +
+                ' </div>' +
+                '<div class="backTop">' +
+                '</div>' +
+                '<div class="loadEffect loading"></div>';
+            if (!this.container.find('.pageNum')[0]) {
+                this.container.append(html);
+            }
+            var viewer = document.createElement("div");
+            viewer.className = 'pdfViewer';
+            var viewerContainer = document.createElement("div");
+            viewerContainer.className = 'viewerContainer';
+            viewerContainer.appendChild(viewer);
+            this.container.append(viewerContainer);
+            this.viewer = $(viewer);
+            this.viewerContainer = $(viewerContainer);
+            this.pageNum = this.container.find('.pageNum');
+            this.pageNow = this.pageNum.find('.pageNow');
+            this.pageTotal = this.pageNum.find('.pageTotal');
+            this.loadingBar = this.container.find('.loadingBar');
+            this.progress = this.loadingBar.find('.progress');
+            this.progressDom = this.progress[0];
+            this.backTop = this.container.find('.backTop');
+            this.loading = this.container.find('.loading');
+            if (!this.options.loadingBar) {
+                this.loadingBar.hide()
+            }
+            var containerH = this.container.height(),
+                height = containerH * (1 / 3);
+
+            if (!this.options.scrollEnable) {
+                this.viewerContainer.css({
+                    "overflow": "hidden"
+                })
+            } else {
+                this.viewerContainer.css({
+                    "overflow": "auto"
+                })
+            }
+            viewerContainer.addEventListener('scroll', function() {
+                var scrollTop = viewerContainer.scrollTop;
+                if (scrollTop >= 150) {
+                    if (self.options.backTop) {
+                        self.backTop.show();
+                    }
+                } else {
+                    if (self.options.backTop) {
+                        self.backTop.fadeOut(200);
+                    }
+                }
+                if (self.viewerContainer) {
+                    self.pages = self.viewerContainer.find('.pageContainer');
+                }
+                clearTimeout(self.timer);
+                if (self.options.pageNum && self.pageNum) {
+                    self.pageNum.show();
+                }
+                var h = containerH;
+                if (self.pages) {
+                    self.pages.each(function(index, obj) {
+                        var top = obj.getBoundingClientRect().top;
+                        var bottom = obj.getBoundingClientRect().bottom;
+                        if (top <= height && bottom > height) {
+                            if (self.options.pageNum) {
+                                self.pageNow.text(index + 1)
+                            }
+                            self.currentNum = index + 1;
+                        }
+                        if (top <= h && bottom > h) {
+                            self.cacheNum = index + 1;
+                        }
+                    })
+                }
+                if (scrollTop + self.container.height() >= self.viewer[0].offsetHeight) {
+                    self.pageNow.text(self.totalNum)
+                }
+                if (scrollTop === 0) {
+                    self.pageNow.text(1)
+                }
+                self.timer = setTimeout(function() {
+                    if (self.options.pageNum && self.pageNum) {
+                        self.pageNum.fadeOut(200);
+                    }
+                }, 1500)
+                if (self.options.lazy) {
+                    var num = Math.floor(100 / self.totalNum).toFixed(2);
+                    if (self.cache[self.cacheNum + ""] && !self.cache[self.cacheNum + ""].loaded) {
+                        var page = self.cache[self.cacheNum + ""].page;
+                        var container = self.cache[self.cacheNum + ""].container;
+                        var pageNum = self.cacheNum;
+                        self.cache[pageNum + ""].loaded = true;
+                        var scaledViewport = self.cache[pageNum + ""].scaledViewport;
+                        if (self.options.renderType === "svg") {
+                            self.renderSvg(page, scaledViewport, pageNum, num, container, self.options)
+                        } else {
+                            self.renderCanvas(page, scaledViewport, pageNum, num, container, self.options)
+                        }
+                    }
+                    if (self.cache[(self.totalNum - 1) + ""] && self.cache[(self.totalNum - 1) + ""].loaded && !self.cache[self.totalNum + ""].loaded) {
+                        var page = self.cache[self.totalNum + ""].page;
+                        var container = self.cache[self.totalNum + ""].container;
+                        var pageNum = self.totalNum;
+                        self.cache[pageNum + ""].loaded = true;
+                        var scaledViewport = self.cache[pageNum + ""].scaledViewport;
+                        if (self.options.renderType === "svg") {
+                            self.renderSvg(page, scaledViewport, pageNum, num, container, self.options)
+                        } else {
+                            self.renderCanvas(page, scaledViewport, pageNum, num, container, self.options)
+                        }
+                    }
+                }
+                var arr1 = self.eventType["scroll"];
+                if (arr1 && arr1 instanceof Array) {
+                    for (var i = 0; i < arr1.length; i++) {
+                        arr1[i] && arr1[i].call(self, scrollTop)
+                    }
+                }
+            })
+            this.backTop.on('click tap', function() {
+                var mart = self.viewer.css('transform');
+                var arr = mart.replace(/[a-z\(\)\s]/g, '').split(',');
+                var s1 = arr[0];
+                var s2 = arr[3];
+                var x = arr[4] / 2;
+                var left = self.viewer[0].getBoundingClientRect().left;
+                if (left <= -self.docWidth * 2) {
+                    x = -self.docWidth / 2
+                }
+                self.viewer.css({
+                    transform: 'scale(' + s1 + ', ' + s2 + ') translate(' + x + 'px, 0px)'
+                })
+                if (self.pinchZoom) {
+                    self.pinchZoom.offset.y = 0;
+                    self.pinchZoom.lastclientY = 0;
+                }
+                self.viewerContainer.animate({
+                    scrollTop: 0
+                }, 300)
+                var arr1 = self.eventType["backTop"];
+                if (arr1 && arr1 instanceof Array) {
+                    for (var i = 0; i < arr1.length; i++) {
+                        arr1[i] && arr1[i].call(self)
+                    }
+                }
+            })
+
+            function GetQueryString(name) {
+                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+                var r = g.location.search.substr(1).match(reg);
+                if (r != null) return decodeURIComponent(r[2]);
+                return "";
+            }
+            var pdfurl = GetQueryString("file"),
+                url = "";
+            if (pdfurl && self.options.URIenable) {
+                url = pdfurl
+            } else if (self.options.pdfurl) {
+                url = self.options.pdfurl
+            }
+            if (self.options.loadingBar) {
+                self.loadingBar.show();
+                self.progress.css({
+                    width: "3%"
+                })
+            }
+
+            if (url) {
+                $.ajax({
+                    type: "get",
+                    mimeType: 'text/plain; charset=x-user-defined',
+                    url: url,
+                    success: function(data) {
+                        var rawLength = data.length;
+                        // var array = new Uint8Array(new ArrayBuffer(rawLength));
+                        // for (i = 0; i < rawLength; i++) {
+                        //     array[i] = data.charCodeAt(i) & 0xff;
+                        // }
+                        var array = [];
+                        for (i = 0; i < rawLength; i++) {
+                            array.push(data.charCodeAt(i) & 0xff);
+                        }
+                        self.cacheData = array
+                        self.renderPdf(self.options, {
+                            data: array
+                        })
+                    },
+                    error: function(err) {
+                        self.loading.hide()
+                        var time = new Date().getTime();
+                        self.endTime = time - self.initTime;
+                        var arr1 = self.eventType["complete"];
+                        if (arr1 && arr1 instanceof Array) {
+                            for (var i = 0; i < arr1.length; i++) {
+                                arr1[i] && arr1[i].call(self, "error", err.statusText, self.endTime)
+                            }
+                        }
+                        var arr2 = self.eventType["error"];
+                        if (arr2 && arr2 instanceof Array) {
+                            for (var i = 0; i < arr2.length; i++) {
+                                arr2[i] && arr2[i].call(self, err.statusText, self.endTime)
+                            }
+                        }
+                        throw Error(err.statusText)
+                    }
+                });
+            } else if (self.options.data) {
+                var data = self.options.data;
+                var rawLength = data.length;
+                if (typeof data === "string" && data != "") {
+                    var array = [];
+                    for (i = 0; i < rawLength; i++) {
+                        array.push(data.charCodeAt(i) & 0xff);
+                    }
+                    self.cacheData = array
+                    self.renderPdf(self.options, {
+                        data: array
+                    })
+                } else if (typeof data === "object") {
+                    if (data.length == 0) {
+                        var time = new Date().getTime();
+                        self.endTime = time - self.initTime;
+                        var arr1 = self.eventType["complete"];
+                        if (arr1 && arr1 instanceof Array) {
+                            for (var i = 0; i < arr1.length; i++) {
+                                arr1[i] && arr1[i].call(self, "error", "options.data is empty Array", self.endTime)
+                            }
+                        }
+                        var arr2 = self.eventType["error"];
+                        if (arr2 && arr2 instanceof Array) {
+                            for (var i = 0; i < arr2.length; i++) {
+                                arr2[i] && arr2[i].call(self, "options.data is empty Array", self.endTime)
+                            }
+                        }
+                        throw Error("options.data is empty Array")
+                    } else {
+                        self.cacheData = data
+                        self.renderPdf(self.options, {
+                            data: data
+                        })
+                    }
+                }
+
+            } else {
+                var time = new Date().getTime();
+                self.endTime = time - self.initTime;
+                var arr1 = self.eventType["complete"];
+                if (arr1 && arr1 instanceof Array) {
+                    for (var i = 0; i < arr1.length; i++) {
+                        arr1[i] && arr1[i].call(self, "error", "Expect options.pdfurl or options.data!", self.endTime)
+                    }
+                }
+                var arr2 = self.eventType["error"];
+                if (arr2 && arr2 instanceof Array) {
+                    for (var i = 0; i < arr2.length; i++) {
+                        arr2[i] && arr2[i].call(self, "Expect options.pdfurl or options.data!", self.endTime)
+                    }
+                }
+                throw Error("Expect options.pdfurl or options.data!")
+            }
+        },
+        renderPdf: function(options, obj) {
+            this.container[0].pdfLoaded = true;
+            var self = this;
+            if (options.cMapUrl) {
+                obj.cMapUrl = options.cMapUrl;
+            } else {
+                obj.cMapUrl = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/';
+            }
+            obj.cMapPacked = true;
+
+            this.pdfjsLibPromise = pdfjsLib.getDocument(obj).then(function(pdf) {
+                self.loading.hide()
+                self.thePDF = pdf;
+                self.totalNum = pdf.numPages;
+                if (options.limit > 0) {
+                    self.totalNum = options.limit
+                }
+                self.pageTotal.text(self.totalNum)
+                if (!self.pinchZoom) {
+                    var arr1 = self.eventType["ready"];
+                    if (arr1 && arr1 instanceof Array) {
+                        for (var i = 0; i < arr1.length; i++) {
+                            arr1[i] && arr1[i].call(self)
+                        }
+                    }
+                    self.pinchZoom = new PinchZoom(self.viewer, {
+                        tapZoomFactor: options.tapZoomFactor,
+                        zoomOutFactor: options.zoomOutFactor,
+                        animationDuration: options.animationDuration,
+                        maxZoom: options.maxZoom,
+                        minZoom: options.minZoom
+                    }, self.viewerContainer);
+                    var timeout, firstZoom = true;
+                    self.pinchZoom.done = function(scale) {
+                        clearTimeout(timeout)
+                        timeout = setTimeout(function() {
+                            if (self.options.renderType === "svg") {
+                                return
+                            }
+                            if (scale <= 1 || self.options.scale == 3) {
+                                return
+                            }
+                            console.log(scale, self.options.scale)
+                            if (self.thePDF) {
+                                self.thePDF.destroy();
+                                self.thePDF = null;
+                            }
+                            self.options.scale = scale;
+                            self.renderPdf(self.options, { data: self.cacheData })
+                        }, 310)
+                        if (scale == 1) {
+                            if (self.viewerContainer) {
+                                self.viewerContainer.css({
+                                    '-webkit-overflow-scrolling': 'touch'
+                                })
+                            }
+
+                        } else {
+                            if (self.viewerContainer) {
+                                self.viewerContainer.css({
+                                    '-webkit-overflow-scrolling': 'auto'
+                                })
+                            }
+                        }
+                        var arr1 = self.eventType["zoom"];
+                        if (arr1 && arr1 instanceof Array) {
+                            for (var i = 0; i < arr1.length; i++) {
+                                arr1[i] && arr1[i].call(self, scale)
+                            }
+                        }
+                    }
+                    if (options.zoomEnable) {
+                        self.pinchZoom.enable()
+                    } else {
+                        self.pinchZoom.disable()
+                    }
+                }
+
+                var promise = Promise.resolve();
+                var num = Math.floor(100 / self.totalNum).toFixed(2);
+                for (var i = 1; i <= self.totalNum; i++) {
+                    self.cache[i + ""] = {
+                        page: null,
+                        loaded: false,
+                        container: null,
+                        scaledViewport: null
+                    };
+                    promise = promise.then(function(pageNum) {
+                        return self.thePDF.getPage(pageNum).then(function(page) {
+                            self.cache[pageNum + ""].page = page;
+                            var viewport = page.getViewport(options.scale);
+                            var scale = (self.docWidth / viewport.width).toFixed(2)
+                            var scaledViewport = page.getViewport(parseFloat(scale))
+                            var div = document.getElementById('pageContainer' + pageNum)
+                            var container;
+                            if (!div) {
+                                container = document.createElement('div');
+                                container.id = 'pageContainer' + pageNum;
+                                container.className = 'pageContainer';
+                                container.setAttribute('name', 'page=' + pageNum);
+                                container.setAttribute('title', 'Page ' + pageNum);
+                                var loadEffect = document.createElement('div');
+                                loadEffect.className = 'loadEffect';
+                                container.appendChild(loadEffect);
+                                self.viewer[0].appendChild(container);
+                                if (window.ActiveXObject || "ActiveXObject" in window) {
+                                    $(container).css({
+                                        'width': viewport.width + 'px',
+                                        "height": viewport.height + 'px'
+                                    }).attr("data-scale", viewport.width / viewport.height)
+                                } else {
+                                    var h = $(container).width() / (viewport.viewBox[2] / viewport.viewBox[3]);
+                                    if (h > viewport.height) {
+                                        h = viewport.height
+                                    }
+                                    $(container).css({
+                                        'max-width': viewport.width,
+                                        "max-height": viewport.height,
+                                        "min-height": h + 'px'
+                                    }).attr("data-scale", viewport.width / viewport.height)
+                                }
+                            } else {
+                                container = div
+                            }
+                            self.cache[pageNum + ""].container = container;
+                            self.cache[pageNum + ""].scaledViewport = scaledViewport;
+                            var sum = 0,
+                                containerH = self.container.height();
+                            self.pages = self.viewerContainer.find('.pageContainer');
+                            if (options.resize) {
+                                self.resize()
+                            }
+                            if (self.pages && options.lazy) {
+                                self.pages.each(function(index, obj) {
+                                    var top = obj.offsetTop;
+                                    if (top <= containerH) {
+                                        sum = index + 1;
+                                        self.cache[sum + ""].loaded = true;
+                                    }
+                                })
+                            }
+
+                            if (pageNum > sum && options.lazy) {
+                                return
+                            }
+                            if (options.renderType === "svg") {
+                                return self.renderSvg(page, scaledViewport, pageNum, num, container, options, viewport)
+                            }
+                            return self.renderCanvas(page, scaledViewport, pageNum, num, container, options)
+                        });
+                    }.bind(null, i));
+                }
+
+            }).catch(function(err) {
+                self.loading.hide();
+                var time = new Date().getTime();
+                self.endTime = time - self.initTime;
+                var arr1 = self.eventType["complete"];
+                if (arr1 && arr1 instanceof Array) {
+                    for (var i = 0; i < arr1.length; i++) {
+                        arr1[i] && arr1[i].call(self, "error", err.message, self.endTime)
+                    }
+                }
+                var arr2 = self.eventType["error"];
+                if (arr2 && arr2 instanceof Array) {
+                    for (var i = 0; i < arr2.length; i++) {
+                        arr2[i] && arr2[i].call(self, err.message, self.endTime)
+                    }
+                }
+            })
+        },
+        renderSvg: function(page, scaledViewport, pageNum, num, container, options, viewport) {
+            var self = this;
+            return page.getOperatorList().then(function(opList) {
+                var svgGfx = new pdfjsLib.SVGGraphics(page.commonObjs, page.objs);
+                return svgGfx.getSVG(opList, scaledViewport).then(function(svg) {
+                    self.loadedCount++;
+                    container.children[0].style.display = "none";
+                    container.appendChild(svg);
+                    svg.style.width = "100%";
+                    svg.style.height = "100%";
+                    if (self.options.loadingBar) {
+                        self.progress.css({
+                            width: num * self.loadedCount + "%"
+                        })
+                    }
+                    var time = new Date().getTime();
+                    var arr1 = self.eventType["render"];
+                    if (arr1 && arr1 instanceof Array) {
+                        for (var i = 0; i < arr1.length; i++) {
+                            arr1[i] && arr1[i].call(self, pageNum, time - self.initTime, container)
+                        }
+                    }
+                    if (self.loadedCount === self.totalNum) {
+                        self.finalRender(options)
+                    }
+                });
+            });
+        },
+        renderCanvas: function(page, viewport, pageNum, num, container, options) {
+            var self = this;
+            var viewport = page.getViewport(options.scale);
+            var scale = (self.docWidth / viewport.width).toFixed(2)
+            var canvas = document.createElement("canvas");
+            var obj2 = {
+                'Cheight': viewport.height * scale,
+                'width': viewport.width,
+                'height': viewport.height,
+                'canvas': canvas,
+                'index': self.loadedCount
+            }
+            var context = canvas.getContext('2d');
+            canvas.height = viewport.height;
+            canvas.width = viewport.width;
+            if (self.options.loadingBar) {
+                self.progress.css({
+                    width: num * self.loadedCount + "%"
+                })
+            }
+            obj2.src = obj2.canvas.toDataURL("image/jpeg");
+            return page.render({
+                canvasContext: context,
+                viewport: viewport
+            }).then(function() {
+                self.loadedCount++;
+                var img = new Image();
+                var time = new Date().getTime();
+                var time2 = 0;
+                if (self.renderTime == 0) {
+                    time2 = time - self.startTime
+                } else {
+                    time2 = time - self.renderTime
+                }
+                obj2.src = obj2.canvas.toDataURL("image/jpeg");
+                img.src = obj2.src;
+                img.className = "canvasImg" + pageNum;
+                var img0 = $("#pageContainer" + pageNum).find(".canvasImg" + pageNum)[0];
+                if (container && !img0) {
+                    container.appendChild(img);
+                    img.onload = function() {
+                        // $(container).css({
+                        //     "min-height": img.height + 'px'
+                        // })
+                    }
+                } else if (img0) {
+                    img0.src = obj2.src
+                }
+                var time = new Date().getTime();
+                var arr1 = self.eventType["render"];
+                if (arr1 && arr1 instanceof Array) {
+                    for (var i = 0; i < arr1.length; i++) {
+                        arr1[i] && arr1[i].call(self, pageNum, time - self.initTime, container)
+                    }
+                }
+                if (self.loadedCount === self.totalNum) {
+                    self.finalRender(options)
+                }
+            })
+        },
+        finalRender: function(options) {
+            var time = new Date().getTime();
+            var self = this;
+            if (self.options.loadingBar) {
+                self.progress.css({
+                    width: "100%"
+                });
+            }
+            setTimeout(function() {
+                self.loadingBar.hide();
+            }, 300)
+            self.endTime = time - self.initTime;
+            if (options.renderType === "svg") {
+                if (self.totalNum !== 1) {
+                    self.cache[(self.totalNum - 1) + ""].loaded = true;
+                } else {
+                    self.cache["1"].loaded = true;
+                }
+            }
+            if (options.zoomEnable) {
+                if (self.pinchZoom) {
+                    self.pinchZoom.enable()
+                }
+            } else {
+                if (self.pinchZoom) {
+                    self.pinchZoom.disable()
+                }
+            }
+            var arr1 = self.eventType["complete"];
+            if (arr1 && arr1 instanceof Array) {
+                for (var i = 0; i < arr1.length; i++) {
+                    arr1[i] && arr1[i].call(self, "success", "pdf加载完成", self.endTime)
+                }
+            }
+            var arr2 = self.eventType["success"];
+            if (arr2 && arr2 instanceof Array) {
+                for (var i = 0; i < arr2.length; i++) {
+                    arr2[i] && arr2[i].call(self, self.endTime)
+                }
+            }
+        },
+        resize: function() {
+            var self = this;
+            if (self.resizeEvent) {
+                return
+            }
+            self.resizeEvent = true;
+            var timer;
+            if (self.pages) {
+                self.getH()
+                $(window).on("resize", function() {
+                    clearTimeout(timer)
+                    timer = setTimeout(function() {
+                        var winWidth = $(window).width();
+                        if (self.winWidth !== winWidth) {
+                            self.pages.each(function(i, item) {
+                                var w = $(item).width(),
+                                    s = $(item).attr("data-scale");
+                                $(item).css({
+                                    "min-height": w / s + 'px'
+                                })
+                            })
+                        }
+                        self.getH()
+                    }, 300)
+                })
+            }
+        },
+        getH: function() {
+            var self = this;
+            var num = 0;
+            self.pages.each(function(i, item) {
+                var w = $(item).height();
+                num + w
+            })
+            $(".pinch-zoom-container").height(num)
+        },
+        show: function(callback) {
+            this.container.show();
+            callback && callback.call(this)
+            var arr = this.eventType["show"];
+            if (arr && arr instanceof Array) {
+                for (var i = 0; i < arr.length; i++) {
+                    arr[i] && arr[i].call(this)
+                }
+            }
+        },
+        hide: function(callback) {
+            this.container.hide()
+            callback && callback.call(this)
+            var arr = this.eventType["hide"];
+            if (arr && arr instanceof Array) {
+                for (var i = 0; i < arr.length; i++) {
+                    arr[i] && arr[i].call(this)
+                }
+            }
+        },
+        on: function(type, callback) {
+            if (this.eventType[type] && this.eventType[type] instanceof Array) {
+                this.eventType[type].push(callback)
+            }
+            this.eventType[type] = [callback]
+        },
+        off: function(type) {
+            if (type !== undefined) {
+                this.eventType[type] = [null]
+            } else {
+                for (var i in this.eventType) {
+                    this.eventType[i] = [null]
+                }
+            }
+        },
+        scrollEnable: function(flag) {
+            if (flag === false) {
+                this.viewerContainer.css({
+                    "overflow": "hidden"
+                })
+            } else {
+                this.viewerContainer.css({
+                    "overflow": "auto"
+                })
+            }
+            var arr = this.eventType["scrollEnable"];
+            if (arr && arr instanceof Array) {
+                for (var i = 0; i < arr.length; i++) {
+                    arr[i] && arr[i].call(this, flag)
+                }
+            }
+        },
+        zoomEnable: function(flag) {
+            if (!this.pinchZoom) {
+                return
+            }
+            if (flag === false) {
+                this.pinchZoom.disable()
+            } else {
+                this.pinchZoom.enable()
+            }
+            var arr = this.eventType["zoomEnable"];
+            if (arr && arr instanceof Array) {
+                for (var i = 0; i < arr.length; i++) {
+                    arr[i] && arr[i].call(this, flag)
+                }
+            }
+        },
+        reset: function(callback) {
+            if (this.pinchZoom) {
+                this.pinchZoom.offset.y = 0;
+                this.pinchZoom.offset.x = 0;
+                this.pinchZoom.lastclientY = 0;
+                this.pinchZoom.zoomFactor = 1;
+                this.pinchZoom.update();
+            }
+            if (this.viewerContainer) {
+                this.viewerContainer.scrollTop(0);
+            }
+            callback && callback.call(this)
+            var arr = this.eventType["reset"];
+            if (arr && arr instanceof Array) {
+                for (var i = 0; i < arr.length; i++) {
+                    arr[i] && arr[i].call(this)
+                }
+            }
+        },
+        destroy: function(callback) {
+            this.reset();
+            this.off();
+            if (this.thePDF) {
+                this.thePDF.destroy();
+                this.thePDF = null;
+            }
+            if (this.viewerContainer) {
+                this.viewerContainer.remove();
+                this.viewerContainer = null;
+            }
+            if (this.container) {
+                this.container.html('');
+            }
+            this.totalNum = null;
+            this.pages = null;
+            this.initTime = 0;
+            this.endTime = 0;
+            this.viewer = null;
+            this.pageNum = null;
+            this.pageNow = null;
+            this.pageTotal = null;
+            this.loadingBar = null;
+            this.progress = null;
+            this.loadedCount = 0;
+            this.timer = null;
+            this.show = null;
+            this.hide = null;
+            callback && callback.call(this)
+            var arr = this.eventType["destroy"];
+            if (arr && arr instanceof Array) {
+                for (var i = 0; i < arr.length; i++) {
+                    arr[i] && arr[i].call(this)
+                }
+            }
+        }
+    }
+    return Pdfh5;
+});

src/main/resources/templates/components/document-link.html

@@ -0,0 +1,10 @@
+<script charset="utf-8" type="text/javascript" src="/lib/jquery-3.5.1.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/jquery.slide-2.1.3.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/swiper.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/viewer.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/jquery-confirm.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/vue2.6.11.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/lazyload.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/locallhostAjax.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/utils.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/base.js(v=${version})}"></script>

src/main/resources/templates/document/details.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美资料库-详情</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/document/details.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/lib/css/pdfh5.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 二级页面 -->
+<div id="documentList" v-cloak>
+    <!-- 引用头部 -->
+    <div>
+        <div class="header document">
+            <div class="wrap-header clear">
+                <img class="logo" src="/img/document/document_logo.png" alt="采美 生美/医美采购服务平台" @click="goPathList"/>
+                <span @click="goPathList">采美资料库</span>
+                <div class="search">
+                    <input class="input"  v-model="keyWord" type="text" placeholder="商品名/资料库名/资料名">
+                    <div class="icon-search" @click="searchKeyWord">
+                        <img src="/img/document/icon-search.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <input type="hidden" th:value="${spiServer}" id="spiServer">
+        <input type="hidden" th:value="${agent}" id="userAgent">
+    </div>
+    <div class="document-content">
+        <div class="inner">
+            <div class="document-list">
+                <div class="list-item">
+                    <div class="list-item-top">
+                        <div class="image"><img :src="ossArchive.mainImage" alt=""></div>
+                        <div class="main">
+                            <h1><span>供应商:</span>{{ ossArchive.shopName ? ossArchive.shopName : '暂无' }}</h1>
+                            <div class="p"><p class="p-span">商品名称:</p><p class="name">{{ ossArchive.productName ? ossArchive.productName : '暂无' }}</p></div>
+                            <div class="p"><p class="p-span">资料库名称: </p><p class="name">{{ ossArchive.name }}</p><span @click="MoreDetails()" class="more">更多资料</span></div>
+                        </div>
+                    </div>
+                    <div class="list-item-bot" >
+                        <div class="media" id="pdfMedia"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="document-footer">
+        <div class="wrap copyright clear">
+            <div class="item icon mIcon">
+                <p><span>Copyright © 2015-2020 CAIMEI365.com All Rights Reserved.</span><span>深圳市采美信息技术有限公司</span></p>
+                <p><span>粤B1-20160129 备案号 粤ICP备14019824号</span><span>中华人民共和国增值电信业务经营许可证</span></p>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/document-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/document.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/js/pdf.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/js/pdf.worker.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/js/pdfh5.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/document/details.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/document/list.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美资料库-资料列表</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/document/list.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 二级页面 -->
+<div id="documentList" v-cloak>
+    <!-- 引用头部 -->
+    <div class="header-content">
+        <div class="header document">
+            <div class="wrap-header clear">
+                <img class="logo" src="/img/document/document_logo.png" alt="采美 生美/医美采购服务平台"/>
+                <span>采美资料库</span>
+                <div class="search">
+                    <input class="input" v-model="listQuery.name" type="text" placeholder="商品名/资料库名/资料名">
+                    <div class="icon-search" @click="searchKeyWord" @keyup="keyupSearch()">
+                        <img src="/img/document/icon-search.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <input type="hidden" th:value="${spiServer}" id="spiServer">
+        <input type="hidden" th:value="${agent}" id="userAgent">
+    </div>
+    <div class="document-content clear">
+        <div class="inner">
+            <div class="document-list">
+                <div v-if="isEmptyData" class="list-item-none" ><p>暂无数据</p></div>
+                <div v-else class="list-item" v-for="(item,index) in pdfDataList" :key="index">
+                    <div class="list-item-top" :class="item.isShowDowns ? 'none' : ''">
+                        <div class="image" @click="productDetails(item.productId)"><img :src="item.mainImage ? item.mainImage : '/img/base/placeholder.png'" alt=""></div>
+                        <div class="main">
+                            <h1 @click="supplierDetails(item.shopId)">供应商: <span>{{ item.shopName ? item.shopName : '暂无' }}</span> </h1>
+                            <p @click="productDetails(item.productId)">商品名称: <span>{{ item.productName ? item.productName : '暂无' }}</span> </p>
+                            <p>资料库名称: <span>{{ item.name ? item.name : '暂无' }}</span> </p>
+                        </div>
+                        <i class="icon mIcon" v-if="item.pdfList.length>0.0" @click="showPdfList(item)" :class="item.isShowDowns ? 'top' : ''"></i>
+                    </div>
+                    <div class="list-item-bot" v-show="!item.isShowDowns" :class="item.isShowDowns ? 'none' : ''">
+                        <div class="pdf-li" v-for="(pdf,idx) in item.pdfList" :key="idx" @click="PdfDetails(pdf.id)">
+                            <img v-if="isPC" class="img" src="/img/document/pdf.png" alt="">
+                            <img v-else class="img" src="/img/document/icon-pdfh5.png" alt="">
+                            <p class="name">{{ pdf.name }}</p>
+                            <p class="time">{{ pdf.uploadTime }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="document-footer">
+        <div class="wrap copyright clear">
+            <div class="item icon mIcon">
+                <p><span>Copyright © 2015-2020 CAIMEI365.com All Rights Reserved.</span><span>深圳市采美信息技术有限公司</span></p>
+                <p><span>粤B1-20160129 备案号 粤ICP备14019824号</span><span>中华人民共和国增值电信业务经营许可证</span></p>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/document-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/document.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/document/list.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/document/login.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美资料库</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/document/login.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 二级页面 -->
+<div id="loginPage">
+    <header id="globalHead" xmlns:th="http://www.w3.org/1999/xhtml">
+        <div class="header document">
+            <div class="wrap clear">
+                <img class="logo" src="/img/document/document_logo.png" alt="采美 生美/医美采购服务平台"/>
+                <span>采美资料库</span>
+            </div>
+        </div>
+        <input type="hidden" th:value="${spiServer}" id="spiServer">
+        <input type="hidden" th:value="${agent}" id="userAgent">
+    </header>
+    <div class="login-contailer">
+        <div class="loginWrap clear">
+            <div class="login-image">
+                <img v-if="isPC" src="/img/document/document_img.png" alt="">
+                <img v-else src="/img/document/document-h5img.png" alt="">
+            </div>
+            <div class="loginForm">
+                <div class="title">
+                    <h1>欢迎登录</h1>
+                </div>
+                <form>
+                    <div class="formLine">
+                        <input class="massageBtn" type="text" v-model="loginAccount" placeholder="请输入手机号" :rule="rule.phone" maxlength="11" @blur="blurHandle($event)" needverify>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入正确的手机号"></span>
+                    </div>
+                    <div class="formLine code">
+                        <input type="text" v-model="activateCode" autocomplete="off" placeholder="请输入短信验证码" :rule="rule.code"  maxlength="6" @blur="blurHandle($event)" needverify>
+                        <a class="code-btn" href="javascript:void(0);" @click="getMobileImage" :class="[isMobileDisabled  ? 'disabled' : '']">{{ mobileCodeText }}</a>
+                        <i class="checked icon mIcon"></i>
+                        <span class="errTips icon mIcon" tips="请输入有效短信验证码" id="codeMsg"></span>
+                    </div>
+                    <div class="submit clear">
+                        <div class="btn" @click="loginSubmit()">登录</div>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div class="login-success" v-if="isLoginSuccess" :class="isLoginSuccess ? 'active' : ''">
+            <div class="header document">
+                <div class="wrap clear">
+                    <img class="logo" src="/img/document/document_logo.png" alt="采美 生美/医美采购服务平台"/>
+                    <span>采美资料库</span>
+                </div>
+            </div>
+            <div class="inner">
+                <div class="success-main" v-if="isSuccess">
+                    <img class="pc-icon" v-if="isPC" src="/img/document/icon-success.png" alt="">
+                    <img class="h5-icon" v-else src="/img/document/icon-h5success.png" alt="">
+                    <h1 class="text-success">登录成功</h1>
+                    <p><span>{{ maxtime }}</span>秒后自动 <span @click="navLinkFn">跳转</span></p>
+                </div>
+                <div class="success-main" v-if="isError">
+                    <img class="pc-icon" v-if="isPC" src="/img/document/icon-error.png" alt="">
+                    <img class="h5-icon" v-else src="/img/document/icon-h5error.png" alt="">
+                    <h1 class="text-error">登录失败!</h1>
+                    <p>您可能没有查看资料的权限</p>
+                   <a href="javascript:void(0);"class="btn" @click="goBackLogin">返回登录</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="content-model"  :class="isCodeModel ? 'active' : ''">
+        <div class="model-main">
+            <div class="model-title"><p>获取短信验证码</p><i class="icon mIcon icon-close"  @click="closeCodeModel"></i></div>
+            <div class="model-content">
+                <div class="model-form">
+                    <input class="input" type="text" placeholder="请输入图形验证码" v-model="imageCode" maxlength="4">
+                    <div class="image"><img :src="codeImagePath" alt=""></div>
+                    <div class="refresh" @click="refreshCodeImage">
+                        <i class="icon mIcon"></i>
+                        <span>刷新</span>
+                    </div>
+                </div>
+                <div class="model-button">
+                    <div class="button"  @click="getMobileCodeFn">获取短信验证码</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/document-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/document.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/document/login.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/document/more-content.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美资料库-更多资料</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/document/more-content.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 二级页面 -->
+<div id="documentList" v-cloak>
+    <!-- 引用头部 -->
+    <div>
+        <div class="header document">
+            <div class="wrap-header clear">
+                <img class="logo" src="/img/document/document_logo.png" alt="采美 生美/医美采购服务平台" @click="goPathList"/>
+                <span @click="goPathList">采美资料库</span>
+                <div class="search">
+                    <input class="input" v-model="keyWord" type="text" placeholder="商品名/资料库名/资料名">
+                    <div class="icon-search" @click="searchKeyWord">
+                        <img src="/img/document/icon-search.png" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <input type="hidden" th:value="${spiServer}" id="spiServer">
+        <input type="hidden" th:value="${agent}" id="userAgent">
+    </div>
+    <div class="document-content">
+        <div class="inner">
+            <div class="document-list">
+                <div class="list-item">
+                    <div class="list-item-top">
+                        <div class="image"><img :src="ossArchive.mainImage" alt=""></div>
+                        <div class="main">
+                            <h1><span>供应商:</span>{{ ossArchive.shopName }}</h1>
+                            <p><span>商品名称:</span> {{ ossArchive.productName }}</p>
+                            <p><span>资料库名称:</span>{{ ossArchive.name }}</p>
+                        </div>
+                    </div>
+                    <div class="list-item-bot">
+                        <div class="pdf-li" v-for="(pdf,index) in ossArchive.pdfList" :key="index" >
+                            <img v-if="isPC" class="img" src="/img/document/pdf.png" alt="">
+                            <img v-else class="img" src="/img/document/icon-pdfh5.png" alt="">
+                            <p class="name" @click="PdfDetails(pdf.id)">{{ pdf.name }}</p>
+                            <p class="time">{{ pdf.uploadTime }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="document-footer">
+        <div class="wrap copyright clear">
+            <div class="item icon mIcon">
+                <p><span>Copyright © 2015-2020 CAIMEI365.com All Rights Reserved.</span><span>深圳市采美信息技术有限公司</span></p>
+                <p><span>粤B1-20160129 备案号 粤ICP备14019824号</span><span>中华人民共和国增值电信业务经营许可证</span></p>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/document-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/document.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/document/more-content.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/document/pdfdetails.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美资料库-详情</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/document/details.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/lib/css/pdfh5.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 二级页面 -->
+<div id="documentList" v-cloak>
+    <div class="media" id="pdfMedia"></div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/document-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/document.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/js/pdf.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/js/pdf.worker.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/js/pdfh5.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/document/pdfdetails.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/user-center/order/detail.html

@@ -106,7 +106,7 @@
                                                 <div class="info">
                                                     <p v-if="pros.productCategory != 2">规格：<span class="none">{{pros.productUnit ? pros.productUnit : ''}}</span> </p>
                                                     <p>数量：<span class="none">{{pros.num}}</span> </p>
-                                                    <p>单价：<span class="none">￥{{pros.price | NumFormat}}</span><span class="red" v-show="pros.includedTaxFlag === '1' || pros.includedTaxFlag === '2'">({{ pros.includedTaxFlag | formatIncludedTax }})</span></p>
+                                                    <p>单价：<span class="none">￥{{pros.price | NumFormat}}</span></p>
                                                     <p>税率：<span class="none">{{pros.taxRate}}%</span></p>
                                                     <p>折扣：<span class="none">{{pros.discount == null ? '0' : pros.discount}}%</span></p>
                                                     <p>折后单价：<span class="none">￥{{pros.discountPrice | NumFormat}}</span></p>