资料库版本

components/cm-module/productDetails/cm-product-doc.vue

@@ -0,0 +1,503 @@
+<template>
+    <view class="product-doc hasBottom" :style="{ paddingBottom: isIphoneX ? '60rpx' : 0 }">
+        <view class="category">
+            <view class="category-title">图片资料</view>
+            <view class="content">
+                <view class="cm-none" v-if="imageArchiveList.length === 0">暂无相关资料</view>
+                <template v-else>
+                    <view class="section" v-for="(item, index) in imageArchiveList" :key="index">
+                        <view class="cm-title">{{ item.title }}</view>
+                        <view class="cm-time">{{ $reg.formatDate('', item.addTime) }}</view>
+                        <view class="cm-img-list cm-list">
+                            <template v-if="item.imageList">
+                                <image
+                                    :src="image.url"
+                                    @click="previewImage(i, item.imageList)"
+                                    mode="aspectFill"
+                                    v-for="(image, i) in imageFormat(item.imageList)"
+                                    :key="i"
+                                    :style="image.style"
+                                ></image>
+                            </template>
+                            <template v-else>
+                                <image
+                                    :src="defaultImage"
+                                    mode="aspectFill"
+                                    v-for="i in item.imageNum"
+                                    :key="i"
+                                    @click="checkPermission"
+                                ></image>
+                            </template>
+                        </view>
+                    </view>
+                </template>
+            </view>
+        </view>
+        <view class="category">
+            <view class="category-title">视频资料</view>
+            <view class="content">
+                <view class="cm-none" v-if="videoArchiveList.length === 0">暂无相关资料</view>
+                <template v-else>
+                    <view class="section" v-for="(item, index) in videoArchiveList" :key="index">
+                        <view class="cm-title">{{ item.title }}</view>
+                        <view class="cm-time">{{ $reg.formatDate('', item.addTime) }}</view>
+                        <view class="cm-video-list">
+                            <video
+                                :id="'myVideo' + index"
+                                :src="item.fileUrl"
+                                controls
+                                show-fullscreen-btn
+                                show-mute-btn
+                                @play="handlePlayer('myVideo' + index)"
+                                v-if="item.fileUrl"
+                            ></video>
+                            <view class="cm-video-section" v-else>
+                                <image class="cm-video-cover" :src="videoCover"></image>
+                                <text class="cm-player-btn" @click="checkPermission()"></text>
+                            </view>
+                        </view>
+                    </view>
+                </template>
+            </view>
+        </view>
+        <view class="category cm-file">
+            <view class="category-title">文件资料</view>
+            <view class="content">
+                <view class="cm-none" v-if="fileArchiveList.length === 0">暂无相关资料</view>
+                <template v-else>
+                    <view class="section" v-for="(item, index) in fileArchiveList" :key="index">
+                        <image
+                            src="https://static.caimei365.com/app/img/icon2/PDF-app.png"
+                            v-if="/\.pdf$/.test(item.fileName)"
+                        ></image>
+                        <image
+                            src="https://static.caimei365.com/app/img/icon2/DOC-app.png"
+                            v-else-if="/\.doc$/.test(item.fileName)"
+                        ></image>
+                        <image src="https://static.caimei365.com/app/img/icon2/PPT-app.png" v-else></image>
+                        <view class="cm-desc">
+                            <view class="cm-title">{{ item.title }}</view>
+                            <view class="cm-bottom">
+                                <view class="cm-time">{{ $reg.formatDate('', item.addTime) }}</view>
+                                <view class="cm-preview" @click="previewFile(item)">预览文件</view>
+                            </view>
+                        </view>
+                    </view>
+                </template>
+            </view>
+        </view>
+        <view
+            class="cm-login"
+            :class="{ maxBottom: !bottom && isIphoneX }"
+            :style="{ bottom: bottom }"
+            v-if="TipStatus"
+        >
+            <text>{{ TipStatus.text }}</text>
+            <view class="cm-btn" @click="nextAction(TipStatus.redirect)">{{ TipStatus.btn }}</view>
+        </view>
+
+        <tui-modal
+            :show="showModal"
+            :content="TipStatus.text"
+            shape="circle"
+            :button="modalButton"
+            fadeIn
+            @click="handleModalClick"
+        ></tui-modal>
+    </view>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+    props: {
+        product: {
+            type: Object,
+            default: () => {}
+        },
+        archiveId: {
+            type: Number,
+            default: 0
+        },
+        bottom: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            userId: -1,
+            prevVideoId: '',
+            currentVideoId: '',
+            videoContexts: [],
+            modalButton: [
+                {
+                    text: '取消',
+                    type: 'gray',
+                    plain: true //是否空心
+                },
+                {
+                    text: '确认',
+                    customStyle: {
+                        color: '#fff',
+                        bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
+                    },
+                    plain: false
+                }
+            ],
+            showModal: false,
+            //用户信息相关
+            permission: 5, //用户权限  0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
+            imageArchiveList: [], // 图片资料列表
+            videoArchiveList: [], // 视频资料列表
+            fileArchiveList: [], // 文件资料列表
+            defaultImage: 'https://static.caimei365.com/app/img/icon2/PC-default.png', // 默认图片
+            videoCover: 'https://static.caimei365.com/app/img/icon2/video-cover.png' //默认视频封面
+        }
+    },
+    computed: {
+        ...mapState(['isIphoneX']),
+        //资料查看状态提示
+        TipStatus: function() {
+            // 资料权限
+            const statusText = [
+                false,
+                { text: '请登录后查看！', btn: '去登录', redirect: '/pages/login/login' },
+                { text: '请升级成为会员机构后方可查看！', btn: '去升级', redirect: '/pages/login/apply' },
+                { text: '请升级成为医美会员机构后方可查看！', btn: '去升级', redirect: '/pages/login/apply' },
+                { text: '需抵扣100采美豆方可查看！', btn: '去查看', redirect: 10 },
+                { text: '无权限查看！', btn: '' }
+            ]
+            // 0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
+            return statusText[this.permission]
+        }
+    },
+    created() {
+        this.userId = uni.getStorageSync('userInfo').userId || -1
+        // uni.createVideoContext()
+        this.getDetail()
+    },
+    methods: {
+        // 获取商品资料详情
+        getDetail() {
+            console.log(this.userId)
+            this.BeautyArchive.GetProdcutArchiveDetails({
+                userId: this.userId,
+                archiveId: this.archiveId
+            }).then(res => {
+                console.log(res)
+                if (res.code) return
+                this.imageArchiveList = res.data.imageArchiveList
+                this.videoArchiveList = res.data.videoArchiveList
+                this.fileArchiveList = res.data.fileArchiveList
+                this.permission = res.data.permission
+            })
+        },
+        // 视频播放
+        handlePlayer(id) {
+            if (this.checkPermission()) {
+                this.handleStop(id)
+                return
+            }
+            if (this.prevVideoId === id) return
+            this.prevVideoId = this.currentVideoId
+            // 暂停上一个播放器
+            this.handelPause(this.prevVideoId)
+            // 保存当前播放器id
+            this.currentVideoId = id
+        },
+        // 开始播放
+        handelPlay(id) {
+            if (!id) return
+            const vContext = uni.createVideoContext(id, this)
+            vContext.play()
+        },
+        // 暂停播放
+        handelPause(id) {
+            if (!id) return
+            const vContext = uni.createVideoContext(id, this)
+            vContext.pause()
+        },
+        // 停止视频
+        handleStop(id) {
+            if (!id) return
+            const vContext = uni.createVideoContext(id, this)
+            vContext.stop()
+        },
+        // 预览图片
+        previewImage(index, previewImageList) {
+            if (this.checkPermission()) return
+            uni.previewImage({
+                current: index,
+                indicator: 'number',
+                urls: previewImageList,
+                loop: true
+            })
+        },
+        //用户权限校验拦截
+        checkPermission() {
+            //permission:查看权限:0可查看，1未登录，2需升级会员机构，3需升级医美会员机构，4需要抵扣采美豆，5无权限查看
+            const _self = this
+            // 如果 TipStatus 返回false 就放行
+            if (!_self.TipStatus) return 0
+            this.modalButton[1].text = this.TipStatus.btn
+            this.showModal = true
+            return -1
+        },
+        // modal 按钮点击
+        handleModalClick(e) {
+            // 点击确认按钮
+            if (e.index === 1) {
+                this.showModal = false
+                this.nextAction(this.TipStatus.redirect)
+            } else {
+                this.showModal = false
+            }
+        },
+        //图片列表处理
+        imageFormat(list) {
+            const imageList = []
+
+            if (list.length > 2) {
+                list.forEach((item, index) => {
+                    imageList.push({ url: item, style: '' })
+                })
+            }
+            if (list.length === 1) {
+                try {
+                    const strArr = list[0]
+                        .split('?')[1]
+                        .replace(/\&|\=/g, '-')
+                        .split('-')
+                    const w = strArr[1] // 图片长
+                    const h = strArr[3] // 图片高
+                    let style = ''
+                    if (w > h) {
+                        style = `width:600rpx;height:${(600 / w) * h}rpx`
+                    } else {
+                        style = `height:600rpx;width:${(600 * w) / h}rpx`
+                    }
+                    imageList.push({ url: list[0], style: style })
+                } catch (e) {
+                    //TODO handle the exception
+                    console.error(
+                        '图片链接格式不正确，返回未处理图片，请设置正确的链接：http://image/text.png?width=xx&height=xx  '
+                    )
+                    imageList.push({ url: list[0], style: '' })
+                }
+            }
+
+            if (list.length === 2) {
+                const style = 'width:300rpx;height:300rpx;'
+                imageList.push({ url: list[0], style })
+                imageList.push({ url: list[1], style })
+            }
+            return imageList
+        },
+        // 点击按钮后要做的事
+        nextAction(redirect) {
+            const _self = this
+            if (typeof redirect == 'string') {
+                // 跳转链接
+                console.log('链接跳转')
+                this.$api.navigateTo(redirect)
+            }
+            if (redirect === 10) {
+                console.log('调用接口')
+            }
+        },
+        // 文件预览
+        previewFile(file) {
+            // 获取文件后缀
+            const index = file.fileName.lastIndexOf('.')
+            const suffix = file.fileName.substring(index)
+            if (suffix === '.doc' || suffix === '.ppt') {
+                this.$api.navigateTo(
+                    `/pages/h5/article/path?link=https://view.officeapps.live.com/op/view.aspx?src=${file.fileUrl}`
+                )
+            } else if (suffix === '.pdf') {
+                this.$api.navigateTo(`/pages/h5/other/pdf?url=${file.fileUrl}&title=${file.title}`)
+            } else {
+                // 不支持的文件
+                return uni.showModal({
+                    content: `${suffix}类型文件暂不支持预览`,
+                    cancelColor: '#666',
+                    confirmColor: '#E15616'
+                })
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.product-doc {
+    background: #f7f7f7;
+}
+.hasBottom {
+    padding-bottom: 90rpx;
+}
+.cm-login {
+    position: fixed;
+    left: 24rpx;
+    bottom: 115rpx; // 包含商品导航
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 32rpx;
+    width: 702rpx;
+    height: 90rpx;
+    background: #ffe6dc;
+    border-radius: 16px;
+    box-sizing: border-box;
+    &.maxBottom {
+        bottom: 175rpx;
+    }
+    text {
+        font-size: 26rpx;
+        color: #e15616;
+    }
+    .cm-btn {
+        width: 136rpx;
+        height: 48rpx;
+        background: #e15616;
+        border-radius: 28px;
+        font-size: 26rpx;
+        text-align: center;
+        line-height: 48rpx;
+        color: #ffffff;
+    }
+}
+.category {
+    padding: 0 24rpx;
+    margin-bottom: 20rpx;
+    background: #fff;
+    .cm-video-section {
+        position: relative;
+        width: 702rpx;
+        height: 402rpx;
+        .cm-video-cover {
+            width: 702rpx;
+            height: 402rpx;
+        }
+        .cm-player-btn {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 5;
+            width: 56rpx;
+            height: 56rpx;
+            background: url(https://static.caimei365.com/app/img/icon2/H5-plalyer.png) center no-repeat;
+            background-size: 56rpx 56rpx;
+        }
+    }
+    .category-title {
+        padding-top: 24rpx;
+        padding-bottom: 8rpx;
+        font-size: 28rpx;
+        font-weight: 500;
+        color: #333333;
+        border-bottom: 1px solid #f0f0f0;
+    }
+    .cm-none {
+        height: 37rpx;
+        margin: 24rpx 0 0 0;
+        padding-bottom: 48rpx;
+        font-size: 26rpx;
+        font-weight: 400;
+        line-height: 37rpx;
+        color: #333333;
+    }
+    &.cm-file {
+        .section {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            image {
+                width: 88rpx;
+                height: 88rpx;
+            }
+            .cm-desc {
+                width: 582rpx;
+            }
+            .cm-bottom {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 16rpx 0 0;
+                .cm-preview {
+                    font-size: 26rpx;
+                    font-weight: 400;
+                    color: #e15616;
+                }
+                .cm-time {
+                    padding: 0;
+                }
+            }
+        }
+    }
+    .section {
+        padding-bottom: 24rpx;
+        border-bottom: 1px solid #f0f0f0;
+        &:last-child {
+            border-bottom: 0;
+        }
+        .cm-title {
+            display: -webkit-box;
+            height: 74rpx;
+            margin-top: 24rpx;
+            font-size: 26rpx;
+            font-weight: 400;
+            line-height: 1.5;
+            color: #333333;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+            word-break: break-all;
+            text-align: justify;
+        }
+        .cm-time {
+            padding: 8rpx 0;
+            font-size: 22rpx;
+            font-weight: 400;
+            color: #b2b2b2;
+        }
+        .cm-img-list {
+            display: flex;
+            justify-content: flex-start;
+            flex-wrap: wrap;
+            &.cm-list {
+                image {
+                    width: 162rpx;
+                    height: 162rpx;
+                    margin: 18rpx 18rpx 0 0;
+                    box-sizing: border-box;
+                    border-radius: 6rpx;
+                    border: 1px solid #e1e1e1;
+                    &:nth-child(4n) {
+                        margin-right: 0;
+                    }
+                }
+            }
+            &.cm-one {
+                max-width: 400rpx;
+                max-height: 400rpx;
+                image {
+                    box-sizing: border-box;
+                    border-radius: 6rpx;
+                    border: 1px solid #e1e1e1;
+                }
+            }
+        }
+        .cm-video-list {
+            margin-top: 18rpx;
+            video {
+                width: 702rpx;
+                height: 420rpx;
+                background: #000;
+            }
+        }
+    }
+}
+</style>

components/thorui/tui-modal/tui-modal.vue

@@ -6,10 +6,12 @@
 				<view class="tui-modal-content" :class="[title?'':'tui-mtop']" :style="{color:color,fontSize:size+'rpx'}">{{content}}</view>
 				<view class="tui-modalBtn-box" :class="[button.length!=2?'tui-flex-column':'']">
 					<block v-for="(item,index) in button" :key="index">
-						<button class="tui-modal-btn" :class="['tui-'+(item.type || 'primary')+(item.plain?'-outline':''),button.length!=2?'tui-btn-width':'',button.length>2?'tui-mbtm':'',shape=='circle'?'tui-circle-btn':'']"
-						 :hover-class="'tui-'+(item.plain?'outline':(item.type || 'primary'))+'-hover'" :data-index="index" @tap="handleClick">{{item.text || "确定"}}</button>
+                        <!-- :style="{background: item.customStyle.bgColor ? item.customStyle.bgColor : '',color: item.customStyle.color ? item.customStyle.color : ''}" -->
+						<button class="tui-modal-btn" :class="[(!item.customStyle && ('tui-'+(item.type || 'primary')+(item.plain?'-outline':''))),button.length!=2?'tui-btn-width':'',button.length>2?'tui-mbtm':'',shape=='circle'?'tui-circle-btn':'']"
+                         :style="{background: item.customStyle.bgColor ? item.customStyle.bgColor : '',color: item.customStyle.color ? item.customStyle.color : '',fontSize: item.customStyle.fontSize ? item.customStyle.fontSize : ''}"
+						 :hover-class="!item.customStyle && ('tui-'+(item.plain?'outline':(item.type || 'primary'))+'-hover')"  :data-index="index" @tap="handleClick">{{item.text || "确定"}}</button>
 					</block>
-				</view>
+				</view> 
 			</view>
 			<view v-else>
 				<slot></slot>
@@ -22,7 +24,7 @@
 
 <script>
 	export default {
-		name: "tuiModal",
+		name: 'tuiModal',
 		props: {
 			//是否显示
 			show: {
@@ -31,30 +33,30 @@
 			},
 			width: {
 				type: String,
-				default: "84%"
+				default: '84%'
 			},
 			padding: {
 				type: String,
-				default: "40rpx 64rpx"
+				default: '40rpx 64rpx'
 			},
 			radius: {
 				type: String,
-				default: "24rpx"
+				default: '24rpx'
 			},
 			//标题
 			title: {
 				type: String,
-				default: ""
+				default: ''
 			},
 			//内容
 			content: {
 				type: String,
-				default: ""
+				default: ''
 			},
 			//内容字体颜色
 			color: {
 				type: String,
-				default: "#999"
+				default: '#999'
 			},
 			//内容字体大小 rpx
 			size: {
@@ -70,12 +72,12 @@
 				type: Array,
 				default: function() {
 					return [{
-						text: "取消",
-						type: "danger",
+						text: '取消',
+						type: 'danger',
 						plain: true //是否空心
 					}, {
-						text: "确定",
-						type: "danger",
+						text: '确定',
+						type: 'danger',
 						plain: false
 					}]
 				}
@@ -99,19 +101,19 @@
 		data() {
 			return {
 
-			};
+			}
 		},
 		methods: {
 			handleClick(e) {
-				if (!this.show) return;
-				const dataset = e.currentTarget.dataset;
+				if (!this.show) return
+				const dataset = e.currentTarget.dataset
 				this.$emit('click', {
 					index: Number(dataset.index)
-				});
+				})
 			},
 			handleClickCancel() {
-				if (!this.maskClosable) return;
-				this.$emit('cancel');
+				if (!this.maskClosable) return
+				this.$emit('cancel')
 			}
 		}
 	}

main.js

@@ -10,33 +10,33 @@ import { umtrackWxKey } from '@/utils/config.js'
 import uma from 'umtrack-wx'
 
 // 公共组件
-import { msg, modal,prePage } from'./utils/util'
+import { msg, modal, prePage, boundingClientRect } from './utils/util'
 import cuCustom from './components/cm-custom/cu-custom.vue'
 import auCustom from './components/cm-custom/au-custom.vue'
 import cmCustom from './components/cm-custom/cm-custom.vue'
 import scrollTop from '@/components/cm-module/scrollTop/scrollTop.vue'
-import CityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'//全局注册地址组件
+import CityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue' //全局注册地址组件
 
-Vue.component('cu-custom',cuCustom)
-Vue.component('au-custom',auCustom)
-Vue.component('cm-custom',cmCustom)
-Vue.component('scroll-top',scrollTop)
-Vue.component('city-Picker',CityPicker)
+Vue.component('cu-custom', cuCustom)
+Vue.component('au-custom', auCustom)
+Vue.component('cm-custom', cmCustom)
+Vue.component('scroll-top', scrollTop)
+Vue.component('city-Picker', CityPicker)
 
-Vue.prototype.$getStorage = function(key){
+Vue.prototype.$getStorage = function(key) {
     var userParam = uni.getStorageSync(key)
-    if (userParam != null && userParam != '' && userParam!= undefined) {
+    if (userParam != null && userParam != '' && userParam != undefined) {
         return userParam
-    }else{
+    } else {
         return null
-    } 
+    }
 }
 
 /**
  * 友盟+小程序统计
  */
-if(process.env.NODE_ENV != 'development'){
-// #ifdef MP-WEIXIN
+if (process.env.NODE_ENV != 'development') {
+    // #ifdef MP-WEIXIN
     uma.init({
         appKey: umtrackWxKey, //由友盟分配的APP_KEY
         // 使用Openid进行统计，此项为false时将使用友盟+uuid进行用户统计。
@@ -48,26 +48,25 @@ if(process.env.NODE_ENV != 'development'){
         debug: true, //是否打开调试模式
         uploadUserInfo: false // 自动上传用户信息，设为false取消上传，默认为false
     })
-    uma.install = function (Vue) {
+    uma.install = function(Vue) {
         Vue.prototype.$uma = uma
     }
     Vue.use(uma)
-// #endif
+    // #endif
 }
 
 // Vue实例化
 Vue.config.productionTip = false
 Vue.prototype.$fire = new Vue()
 Vue.prototype.$store = store
-Vue.prototype.$util = {msg,prePage,modal}
+Vue.prototype.$util = { msg, prePage, modal, boundingClientRect }
 Vue.prototype.$api = Api
 Vue.prototype.$reg = Regs
 Vue.prototype.$Static = 'https://static.caimei365.com/app/img/'
 
-
 App.mpType = 'app'
 
 const app = new Vue({
     ...App
 })
-app.$mount()
+app.$mount()

node_modules/pdfh5/.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+
+node_js:
+    - 4.4.4

node_modules/pdfh5/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2018] [gjTool]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

node_modules/pdfh5/README.md

@@ -0,0 +1,324 @@
+# pdfh5.js
+[![npm version](https://img.shields.io/npm/v/pdfh5.svg)](https://www.npmjs.com/package/pdfh5) [![npm downloads](https://img.shields.io/npm/dt/pdfh5.svg)](https://www.npmjs.com/package/pdfh5)   [![MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/gjTool/pdfh5/blob/master/LICENSE) [![GitHub issues](https://img.shields.io/github/issues/gjTool/pdfh5.svg)](https://github.com/gjTool/pdfh5/issues) [![GitHub stars](https://img.shields.io/github/stars/gjTool/pdfh5.svg?style=social)](https://github.com/gjTool/pdfh5/stargazers) [![GitHub forks](https://img.shields.io/github/forks/gjTool/pdfh5.svg?style=social)](https://github.com/gjTool/pdfh5/network/members)  
+
+**pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。**
+
+- **注意：本地绝对路径地址不能加载，跨域问题用代理或者服务端解决。** 
+- **svg模式渲染存在缺陷，只能渲染普通pdf，带签名、印章的可能会渲染不全，报错，pdf.js官方目前没有给出解决方案** 
+- **canvas模式本质是图片，默认进去的时候，图片在手机端被缩放，不是原分辨率，所以失真模糊。所以需要放大查看pdf** 
+
+- [pdfh5博客主页](https://www.gjtool.cn/)  
+
+- [pdfh5项目GitHub地址](https://github.com/gjTool/pdfh5)  
+
+
+
+#### react、vue均可使用
+#### [example/test](https://github.com/gjTool/pdfh5/tree/master/example/test)是vue使用示例，vue示例展示axios调用接口展示pdf，跨域代理，相对路径等方法
+#### [example/react-test](https://github.com/gjTool/pdfh5/tree/master/example/react-test)是react使用示例
+
+![pdfh5.js示例](https://img-blog.csdnimg.cn/20190731133403792.gif)
+
+## 更新信息
+
+- 2020.07.30 更新：  更新jquery版本至jquery-2.1.1.min.js
+
+
+### pdfh5在线预览 （建议使用谷歌浏览器F12手机模式打开预览）
+
+-  [https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/git.pdf](https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/git.pdf)  
+
+
+## 快速使用（有两种方式）
+
+#### 一、script标签引入方式（需下载本项目文件夹css/pdfh5.css、js内所有文件）
+
+- 	1.引入css   
+
+```javascript
+<link rel="stylesheet" href="css/pdfh5.css" />
+```
+
+- 	2.创建div  
+
+```javascript
+<div id="demo"></div>
+```
+
+- 	3.依次引入js（需引用本项目的js,不要引用官方的pdf.js,jquery可以引用其它版的）   
+
+```javascript
+<script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
+<script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
+<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
+```
+
+- 	4.实例化
+
+```javascript
+var pdfh5 = new Pdfh5('#demo', {
+  pdfurl: "./default.pdf"
+});
+```
+
+####  二、npm安装方式（适应于vue）, react使用方法类似vue（example/react-test是react使用示例）
+
+- 	1.安装
+
+```javascript
+npm install pdfh5
+```
+- 	2.使用
+
+```javascript
+<template>
+  <div id="app">
+	<div id="demo"></div>
+  </div>
+</template>
+<script>
+  import Pdfh5 from "pdfh5";
+  export default {
+    name: 'App',
+	data() {
+	  return {
+	    pdfh5: null
+	  };
+	},
+	mounted() {
+		//实例化
+	  this.pdfh5 = new Pdfh5("#demo", {
+		pdfurl: "../../static/test.pdf"
+	  });
+	  //监听完成事件
+	  this.pdfh5.on("complete", function (status, msg, time) {
+		console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
+	  })
+	}
+  }
+</script>
+
+<style>
+	@import "pdfh5/css/pdfh5.css";
+	*{
+	padding: 0;
+	margin: 0;
+	}
+	html,body,#app {
+	width: 100%;
+	height: 100%;
+	}
+</style>
+```
+
+- **注意：如果css引用报错的话，按下面的方式引用。** 
+```javascript
+  import Pdfh5 from "pdfh5";
+  import "pdfh5/css/pdfh5.css";
+```
+
+# API接口方法
+
+
+## 实例化
+- **pdfh5实例化的时候传两个参数，selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件** 
+```javascript
+var pdfh5 = new Pdfh5(selector, options);
+```
+|参数名称|类型|取值|是否必须|作用|
+|:---:|:---:|:---:|:---:|:---:|
+|selector|  {String} | - | √ |pdfh5的容器选择器|
+|options|  {Object} | - | × |pdfh5的配置项参数|
+
+## options配置项参数列表
+
+- **示例：** 配置项参数 pdfurl
+
+```javascript
+var pdfh5 = new Pdfh5('#demo', {
+	pdfurl: "./default.pdf"
+});
+```
+
+|参数名称|类型|取值|作用|
+|:---:|:---:|:---:|:---:|
+|pdfurl|  {String} | - |pdf地址 |
+|URIenable|  {Boolean} |true、false， 默认false |  true开启地址栏file参数|
+|data|  {String(blob)/Array(arraybuffer) | - |pdf文件流 ，与pdfurl二选一(二进制PDF数据。使用类型化数组（Uint8Array）可以提高内存使用率。如果PDF数据是BASE64编码的，请先使用atob（）将其转换为二进制字符串。)|
+|renderType| {String}|"canvas"、"svg"，默认"canvas"|pdf渲染模式|
+|pageNum| {Boolean}|true、false， 默认true|是否显示左上角页码|
+|backTop| {Boolean}|true、false， 默认true|是否显示右上角回到顶部按钮|
+|lazy| {Boolean}|true、false， 默认false|是否开启懒加载(实际是延迟加载图片，即屏幕滚动到pdf位置时加载图片)|
+|maxZoom|  {Number}|最大倍数3|手势缩放最大倍数|
+|scale|  {Number}|最大比例5，默认1.5|pdf渲染的比例|
+|scrollEnable| {Boolean}|true、false， 默认true|是否允许pdf滚动|
+|zoomEnable| {Boolean}|true、false， 默认true|是否允许pdf手势缩放|
+|cMapUrl| {String}| 默认"https://www.gjtool.cn/cmaps/"|解析pdf时，特殊情况下显示完整字体的cmaps文件夹路径，例如 cMapUrl:"https://unpkg.com/pdfjs-dist@2.0.943/cmaps/"|
+|limit| {Number}| 默认0 |限制pdf加载最大页数|
+|logo| {Object}|{src:"pdfh5.png",x:10,y:10,width:40,height:40}src水印图片路径（建议使用png透明图片），width水印宽度，height水印高度，以每页pdf左上角为0点，x、y为偏移值。 默认false |给每页pdf添加水印logo（canvas模式下使用）|
+|goto| {Number}| 默认0 |加载pdf跳转到第几页|
+|textLayer|  {Boolean} | true、false， 默认false |是否开启textLayer，可以复制文本（canvas模式下使用）【处于测试阶段，位置偏移严重】|
+|background|  {Object} | {color:"#fff",image:"url('pdfh5.png')",repeat:"no-repeat",position:"left top",size:"40px 40px"}，和css的background属性语法相同，默认false|是否开启背景图模式|
+
+- 以下属性可选
+
+|参数名称|类型|取值|作用|
+|:---:|:---:|:---:|:---:|
+|httpHeaders| {Object}| 默认空 |设置httpHeaders信息|
+|withCredentials| {Boolean}| 默认false |是否使用cookie或授权标头之类的凭据发出跨站点访问|
+|password| {String}| 默认空 |用于访问有密码的PDF|
+|stopAtErrors| {Boolean}| 默认false |当无法成功解析关联的PDF数据时，停止解析|
+|disableFontFace| {Boolean}| 默认false |默认情况下，字体会转换为OpenType字体，并通过字体规则来加载。如果禁用，字体将使用内置的字体渲染器渲染。|
+|disableRange| {Boolean}| 默认false |禁用范围请求加载PDF文件。启用后，如果服务器支持部分内容请求，则将以块的形式获取PDF。|
+|disableStream| {Boolean}| 默认false |禁用流式传输PDF文件数据。默认情况下，PDF.js尝试加载成块的PDF。|
+|disableAutoFetch| {Boolean}| 默认false |禁用PDF文件数据的预取。启用范围请求后，即使不需要显示当前页面，PDF.js也会自动继续获取更多数据。默认值为“ false”。注意：还必须禁用流传输disableStream|
+
+## 	pdf文件流请求示例（以jq ajax为例）
+1.
+```javascript
+$.ajax({
+	url: "https://www.gjtool.cn/pdfh5/git.pdf", //假设这是pdf文件流的请求接口
+	type: "get",
+	mimeType: 'text/plain; charset=x-user-defined',//jq ajax请求文件流的方式
+	success: function (data) {
+		var pdfh5 = new Pdfh5('#demo', {
+			data: data
+		});
+	}
+});
+```
+2.
+```javascript
+$.ajax({
+	url: "https://www.gjtool.cn/pdfh5/git.pdf", //假设这是pdf文件流的请求接口
+	type: "get",
+	mimeType: 'text/plain; charset=x-user-defined',//jq ajax请求文件流的方式
+	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 pdfh5 = new Pdfh5('#demo', {
+			data: array
+		});
+	}
+});
+```
+3.
+```javascript
+$.ajax({
+	url: "https://www.gjtool.cn/pdfh5/git.pdf", //假设这是pdf文件流的请求接口
+	type: "get",
+	mimeType: 'text/plain; charset=x-user-defined',//jq ajax请求文件流的方式
+	success: function (data) {
+		var rawLength = data.length;
+		var array = [];
+		for (i = 0; i < rawLength; i++) {
+		    array.push(data.charCodeAt(i) & 0xff);
+		}
+		var pdfh5 = new Pdfh5('#demo', {
+			data: array
+		});
+	}
+});
+```
+4. axios示例
+```javascript
+axios.get("https://www.gjtool.cn/pdfh5/git.pdf",{
+	responseType:"arraybuffer"
+}).then(res=>{
+	this.pdfh5 = new Pdfh5('#demo', {
+		data: res.data
+	});
+})
+```
+
+## methods 方法列表
+
+- **示例：** 是否允许pdf滚动
+
+```javascript
+pdfh5.scrollEnable(true) //允许pdf滚动
+pdfh5.scrollEnable(false) //不允许pdf滚动
+```
+
+|参数名称|类型|取值|作用|
+|:---:|:---:|:---:|:---:|
+|scrollEnable| {Boolean}|true、false， 默认true|是否允许pdf滚动(需要在pdf加载完成后使用)|
+|zoomEnable| {Boolean}|true、false， 默认true|是否允许pdf手势缩放(需要在pdf加载完成后使用)|
+|show| {Function}|带一个回调函数|pdfh5显示|
+|hide| {Function}|带一个回调函数|pdfh5隐藏|
+|reset| {Function}|带一个回调函数|pdfh5还原|
+|destroy| {Function}|带一个回调函数|pdfh5销毁|
+|on| {String, Function}|String：监听的事件名，Function：监听的事件回调|on方法监听所有事件|
+|goto | {Number}}|Number:要跳转的pdf页数 |pdf跳转到第几页（pdf加载完成后使用）|
+
+## on方法监听所有事件-事件名列表
+
+- **示例：** 监听pdf准备开始渲染，此时可以拿到pdf总页数
+
+```javascript
+pdfh5.on("ready", function () {
+	console.log("总页数：" + this.totalNum)
+})
+```
+|参数名称|回调|作用|
+|:---:|:---:|:---:|
+|init| {Function}|监听pdfh5开始初始化|
+|ready| {Function}|监听pdf准备开始渲染，此时可以拿到pdf总页数|
+|error| {Function(msg,time))}|监听加载失败，msg信息，time耗时 |
+|success| {Function(msg,time))}| 监听pdf渲染成功，msg信息，time耗时|
+|complete| {Function(status, msg, time)}| 监听pdf加载完成事件，加载失败、渲染成功都会触发。status有两种状态success和error|
+|render| {Function(currentNum, time, currentPageDom)}| 监听pdf渲染过程，currentPageDom当前加载的pdf的dom,currentNum当前加载的pdf页数,|
+|zoom| {Function(scale)}| 监听pdf缩放，scale缩放比例|
+|scroll| {Function(scrollTop)}| 监听pdf滚动，scrollTop滚动条高度|
+|backTop| {Function}| 监听回到顶部按钮的点击事件回调|
+|zoomEnable| {Function(flag)}| 监听允许缩放，flag：true，false|
+|scrollEnable| {Function(flag)}| 监听允许滚动，flag：true，false|
+|show | {Function}| 监听pdfh5显示|
+|hide | {Function}| 监听pdfh5隐藏|
+|reset | {Function}| 监听pdfh5还原|
+|destroy | {Function}| 监听pdfh5销毁|
+
+## 扫下面小程序码，微信授权登陆即可搜索vip影视漫画小说，免费观看：
+![image.png](https://www.gjtool.cn/download/weixin_advert.jpeg)
+
+## 前端技术交流微信群，现有100+人，扫码加我微信，邀请加入：
+![image.png](https://www.gjtool.cn/download/wxqun.jpg?1wdf324376583333333333)
+
+## 打赏赞助作者：
+![支付宝二维码](https://www.gjtool.cn/download/zfb.jpg) ![微信二维码](https://www.gjtool.cn/download/wx.jpg)
+
+- 感谢打赏！请打赏的童鞋留下github、QQ、微信 。然后，我会对打赏过的童鞋的问题及时响应。（当然是在我不忙的时候啦）
+- 相比打赏，点star还要重要些，请各位走过路过帮忙点下star，万分感谢
+
+
+## 打赏榜单
+- [JayLin](https://github.com/110117ab) ￥6.66
+- [靓仔城](https://github.com/ljc7877376) ￥6.67
+- 南蓝 ￥8.80
+- 我是太阳 ￥29.99
+- *小波 ￥1.00
+- *鑫 ¥9.99
+- *手 ¥9.99
+- *勇 ￥19.99 
+- *爷 ¥5.00
+- *超 ¥20.00
+- 3*Y ¥5.00
+- *阳 ¥5.00
+- **雄 ¥5.00
+- A*r ¥1.23
+- *客 ¥5.00
+- *运 ¥66.66
+- *辰 ¥30.00
+- *黎 ¥6.66+¥5.00
+- **福 ¥6.66
+- *🏀 ¥6.66+¥1.00
+- *阳 ¥10.00
+- 自闭中 ¥16.66+¥16.00
+- *焕 ¥6.66
+- *人 ¥5.00
+- *。 ¥5.20
+- 半*) ¥5.00

node_modules/pdfh5/css/style.css

@@ -0,0 +1,1242 @@
+@charset "utf-8";
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+blockquote,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+pre,
+form,
+fieldset,
+legend,
+button,
+input,
+textarea,
+th,
+td {
+	margin: 0;
+	padding: 0;
+}
+
+body,
+button,
+input,
+select,
+textarea {
+	font-size:12px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-size: 100%;
+}
+
+address,
+cite,
+dfn,
+em,
+var {
+	font-style: normal;
+}
+
+code,
+kbd,
+pre,
+samp {
+	font-family: couriernew, courier, monospace;
+}
+
+small {
+	font-size: 12px;
+}
+
+ul,
+ol {
+	list-style: none;
+}
+
+a {
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+sup {
+	vertical-align: text-top;
+}
+
+sub {
+	vertical-align: text-bottom;
+}
+
+legend {
+	color: #000;
+}
+
+fieldset,
+img {
+	border: 0;
+}
+
+button,
+input,
+select,
+textarea {
+	font-size: 100%;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+.clearfix {
+	*zoom: 1;
+}
+
+.clearfix:before,
+.clearfix:after {
+	display: table;
+	line-height: 0;
+	content: "";
+}
+
+.clearfix:after {
+	clear: both;
+}
+
+  
+  #app {
+	  display: -webkit-box;
+	  display: -ms-flexbox;
+	  display: flex;
+	  -webkit-box-pack: center;
+	  -ms-flex-pack: center;
+	  justify-content: center;
+	  -webkit-box-align: center;
+	  -ms-flex-align: center;
+	  align-items: center;
+	  height: 100%;
+	  background: rgba(249, 249, 249, 0.9);
+	  overflow: hidden;
+  }
+  
+  .text-wrapper {
+	  padding: 0 1rem;
+	  max-width: 50rem;
+	  width: 100%;
+	  text-align: center;
+  }
+  
+  .text {
+	  font-size: 8em;
+	  text-transform: uppercase;
+	  letter-spacing: -14px;
+  }
+  
+  .text .letter {
+	  position: relative;
+	  display: inline-block;
+	  -webkit-transition: all .4s;
+	  transition: all .4s;
+  }
+  
+  .text .letter .character {
+	  opacity: 0.65;
+	  -webkit-transition: color .4s;
+	  transition: color .4s;
+	  cursor: pointer;
+  }
+  
+  .text .letter span {
+	  position: absolute;
+	  bottom: .8rem;
+	  left: .4rem;
+	  display: block;
+	  width: 100%;
+	  height: 15px;
+  }
+  
+  .text .letter span::before {
+	  content: '';
+	  position: absolute;
+	  top: 50%;
+	  left: 50%;
+	  width: 0;
+	  height: 0;
+	  -webkit-transform: translate(-50%, -50%);
+	  transform: translate(-50%, -50%);
+	  border-radius: 50%;
+	  background: rgba(0, 0, 0, 0.25);
+  }
+  
+  .text .letter:hover .character {
+	  color: #fff !important;
+  }
+  
+  .text.part1 .letter:nth-child(1).poofed {
+	  -webkit-transform-origin: 50% 50%;
+	  transform-origin: 50% 50%;
+	  -webkit-animation: poofing1 1.4s ease-in-out infinite alternate;
+	  animation: poofing1 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes poofing1 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(459deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(459deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(459deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(459deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes poofing1 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(459deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(459deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(459deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(459deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part1 .letter:nth-child(1) .character {
+	  color: #f44336;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 0.33333s;
+	  animation-delay: 0.33333s;
+  }
+  
+  .text.part1 .letter:nth-child(1) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 0.33333s;
+	  animation-delay: 0.33333s;
+  }
+  
+  .text.part1 .letter:nth-child(2).poofed {
+	  -webkit-transform-origin: 50% 50%;
+	  transform-origin: 50% 50%;
+	  -webkit-animation: poofing2 1.4s ease-in-out infinite alternate;
+	  animation: poofing2 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes poofing2 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(540deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(540deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(540deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(540deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes poofing2 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(540deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(540deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(540deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(540deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part1 .letter:nth-child(2) .character {
+	  color: #9C27B0;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 0.66667s;
+	  animation-delay: 0.66667s;
+  }
+  
+  .text.part1 .letter:nth-child(2) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 0.66667s;
+	  animation-delay: 0.66667s;
+  }
+  
+  .text.part1 .letter:nth-child(3).poofed {
+	  -webkit-transform-origin: 50% 50%;
+	  transform-origin: 50% 50%;
+	  -webkit-animation: poofing3 1.4s ease-in-out infinite alternate;
+	  animation: poofing3 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes poofing3 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(264deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(264deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(264deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(264deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes poofing3 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(264deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(264deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(264deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(264deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part1 .letter:nth-child(3) .character {
+	  color: #f99b0c;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 1s;
+	  animation-delay: 1s;
+  }
+  
+  .text.part1 .letter:nth-child(3) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 1s;
+	  animation-delay: 1s;
+  }
+  
+  .text.part1 .letter:nth-child(4).poofed {
+	  -webkit-transform-origin: 50% 50%;
+	  transform-origin: 50% 50%;
+	  -webkit-animation: poofing4 1.4s ease-in-out infinite alternate;
+	  animation: poofing4 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes poofing4 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(42deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(42deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(42deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(42deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes poofing4 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(42deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(42deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(42deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(42deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part1 .letter:nth-child(4) .character {
+	  color: #cee007;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 1.33333s;
+	  animation-delay: 1.33333s;
+  }
+  
+  .text.part1 .letter:nth-child(4) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 1.33333s;
+	  animation-delay: 1.33333s;
+  }
+  
+  .text.part1 .letter:nth-child(5).poofed {
+	  -webkit-transform-origin: 50% 50%;
+	  transform-origin: 50% 50%;
+	  -webkit-animation: poofing5 1.4s ease-in-out infinite alternate;
+	  animation: poofing5 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes poofing5 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(384deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(384deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(384deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(384deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes poofing5 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(384deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(384deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(384deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(384deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part1 .letter:nth-child(5) .character {
+	  color: #00c6b2;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 1.66667s;
+	  animation-delay: 1.66667s;
+  }
+  
+  .text.part1 .letter:nth-child(5) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 1.66667s;
+	  animation-delay: 1.66667s;
+  }
+  
+  .text.part1 .letter:nth-child(6).poofed {
+	  -webkit-transform-origin: 50% 50%;
+	  transform-origin: 50% 50%;
+	  -webkit-animation: poofing6 1.4s ease-in-out infinite alternate;
+	  animation: poofing6 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes poofing6 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(156deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(156deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(156deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(156deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes poofing6 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(156deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(156deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(156deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(156deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part1 .letter:nth-child(6) .character {
+	  color: #f44336;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 2s;
+	  animation-delay: 2s;
+  }
+  
+  .text.part1 .letter:nth-child(6) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 2s;
+	  animation-delay: 2s;
+  }
+  
+  .text.part1 .letter:nth-child(7).poofed {
+	  -webkit-transform-origin: 50% 50%;
+	  transform-origin: 50% 50%;
+	  -webkit-animation: poofing7 1.4s ease-in-out infinite alternate;
+	  animation: poofing7 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes poofing7 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(156deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(156deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(156deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(156deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes poofing7 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(156deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(156deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(156deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(156deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part1 .letter:nth-child(7) .character {
+	  color: #4CAF50;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 2s;
+	  animation-delay: 2.5s;
+  }
+  
+  .text.part1 .letter:nth-child(7) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 2s;
+	  animation-delay: 3s;
+  }
+  
+  .text.part2 span:nth-child(1).poofed {
+	  -webkit-animation: sec_poofing1 1.4s ease-in-out infinite alternate;
+	  animation: sec_poofing1 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes sec_poofing1 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(268deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(268deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(268deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(268deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes sec_poofing1 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(268deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(268deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(268deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(268deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part2 span:nth-child(1) .character {
+	  color: #ff5a5f;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 2.33333s;
+	  animation-delay: 2.33333s;
+  }
+  
+  .text.part2 span:nth-child(1) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 2.33333s;
+	  animation-delay: 2.33333s;
+  }
+  
+  .text.part2 span:nth-child(2).poofed {
+	  -webkit-animation: sec_poofing2 1.4s ease-in-out infinite alternate;
+	  animation: sec_poofing2 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes sec_poofing2 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(135deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(135deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(135deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(135deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes sec_poofing2 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(135deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(135deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(135deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(135deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part2 span:nth-child(2) .character {
+	  color: #f99b0c;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 2.66667s;
+	  animation-delay: 2.66667s;
+  }
+  
+  .text.part2 span:nth-child(2) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 2.66667s;
+	  animation-delay: 2.66667s;
+  }
+  
+  .text.part2 span:nth-child(3).poofed {
+	  -webkit-animation: sec_poofing3 1.4s ease-in-out infinite alternate;
+	  animation: sec_poofing3 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes sec_poofing3 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(442deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(442deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(442deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(442deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes sec_poofing3 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(442deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(442deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(442deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(442deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part2 span:nth-child(3) .character {
+	  color: #cee007;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 3s;
+	  animation-delay: 3s;
+  }
+  
+  .text.part2 span:nth-child(3) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 3s;
+	  animation-delay: 3s;
+  }
+  
+  .text.part2 span:nth-child(4).poofed {
+	  -webkit-animation: sec_poofing4 1.4s ease-in-out infinite alternate;
+	  animation: sec_poofing4 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes sec_poofing4 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(525deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(525deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(525deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(525deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes sec_poofing4 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(525deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(525deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(525deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(525deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part2 span:nth-child(4) .character {
+	  color: #00c6b2;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 3.33333s;
+	  animation-delay: 3.33333s;
+  }
+  
+  .text.part2 span:nth-child(4) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 3.33333s;
+	  animation-delay: 3.33333s;
+  }
+  
+  .text.part2 span:nth-child(5).poofed {
+	  -webkit-animation: sec_poofing5 1.4s ease-in-out infinite alternate;
+	  animation: sec_poofing5 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes sec_poofing5 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(419deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(419deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(419deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(419deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes sec_poofing5 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(419deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(419deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(419deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(419deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part2 span:nth-child(5) .character {
+	  color: #4e2a84;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 3.66667s;
+	  animation-delay: 3.66667s;
+  }
+  
+  .text.part2 span:nth-child(5) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 3.66667s;
+	  animation-delay: 3.66667s;
+  }
+  
+  .text.part2 span:nth-child(6).poofed {
+	  -webkit-animation: sec_poofing6 1.4s ease-in-out infinite alternate;
+	  animation: sec_poofing6 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes sec_poofing6 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(246deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(246deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(246deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(246deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes sec_poofing6 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(246deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(246deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(246deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(246deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part2 span:nth-child(6) .character {
+	  color: #9C27B0;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 4s;
+	  animation-delay: 4s;
+  }
+  
+  .text.part2 span:nth-child(6) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 4s;
+	  animation-delay: 4s;
+  }
+  
+  .text.part2 span:nth-child(7).poofed {
+	  -webkit-animation: sec_poofing7 1.4s ease-in-out infinite alternate;
+	  animation: sec_poofing7 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes sec_poofing7 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(206deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(206deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(206deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(206deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes sec_poofing7 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(206deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(206deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(206deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(206deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part2 span:nth-child(7) .character {
+	  color: #f99b0c;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 4.33333s;
+	  animation-delay: 4.33333s;
+  }
+  
+  .text.part2 span:nth-child(7) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 4.33333s;
+	  animation-delay: 4.33333s;
+  }
+  
+  .text.part2 span:nth-child(8).poofed {
+	  -webkit-animation: sec_poofing8 1.4s ease-in-out infinite alternate;
+	  animation: sec_poofing8 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes sec_poofing8 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(60deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(60deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(60deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(60deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes sec_poofing8 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(60deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(60deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(60deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(60deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part2 span:nth-child(8) .character {
+	  color: #cee007;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 4.66667s;
+	  animation-delay: 4.66667s;
+  }
+  
+  .text.part2 span:nth-child(8) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 4.66667s;
+	  animation-delay: 4.66667s;
+  }
+  
+  .text.part2 span:nth-child(9).poofed {
+	  -webkit-animation: sec_poofing9 1.4s ease-in-out infinite alternate;
+	  animation: sec_poofing9 1.4s ease-in-out infinite alternate;
+  }
+  
+  @-webkit-keyframes sec_poofing9 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(496deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(496deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(496deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(496deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  @keyframes sec_poofing9 {
+	  0% {
+		  -webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
+	  }
+	  50% {
+		  -webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  56% {
+		  -webkit-transform: rotateZ(496deg) rotateY(360deg) translateY(0px) scale(1);
+		  transform: rotateZ(496deg) rotateY(360deg) translateY(0px) scale(1);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(496deg) rotateY(360deg) translateY(-700px) scale(0.01);
+		  transform: rotateZ(496deg) rotateY(360deg) translateY(-700px) scale(0.01);
+	  }
+  }
+  
+  .text.part2 span:nth-child(9) .character {
+	  color: #00c6b2;
+	  -webkit-animation: wave 1.2s linear infinite;
+	  animation: wave 1.2s linear infinite;
+	  -webkit-animation-delay: 5s;
+	  animation-delay: 5s;
+  }
+  
+  .text.part2 span:nth-child(9) span::before {
+	  -webkit-animation: shadow 1.2s linear infinite;
+	  animation: shadow 1.2s linear infinite;
+	  -webkit-animation-delay: 5s;
+	  animation-delay: 5s;
+  }
+  
+  @-webkit-keyframes wave {
+	  0% {
+		  -webkit-transform: translateY(0);
+		  transform: translateY(0);
+	  }
+	  50% {
+		  -webkit-transform: translateY(-10px);
+		  transform: translateY(-10px);
+	  }
+	  100% {
+		  -webkit-transform: translateY(0);
+		  transform: translateY(0);
+	  }
+  }
+  
+  @keyframes wave {
+	  0% {
+		  -webkit-transform: translateY(0);
+		  transform: translateY(0);
+	  }
+	  50% {
+		  -webkit-transform: translateY(-10px);
+		  transform: translateY(-10px);
+	  }
+	  100% {
+		  -webkit-transform: translateY(0);
+		  transform: translateY(0);
+	  }
+  }
+  
+  @-webkit-keyframes shadow {
+	  0% {
+		  width: 0;
+		  height: 0;
+	  }
+	  50% {
+		  width: 100%;
+		  height: 100%;
+	  }
+	  100% {
+		  width: 0;
+		  height: 0;
+	  }
+  }
+  
+  @keyframes shadow {
+	  0% {
+		  width: 0;
+		  height: 0;
+	  }
+	  50% {
+		  width: 100%;
+		  height: 100%;
+	  }
+	  100% {
+		  width: 0;
+		  height: 0;
+	  }
+  }
+  
+  .how-to {
+	  margin: 2rem 0 2rem 1rem;
+	  font-family: "Opens Sans", sans-serif;
+	  font-weight: 300;
+	  font-size: .85em;
+	  letter-spacing: 4px;
+	  color: rgba(0, 0, 0, 0.8);
+  }
+  
+  @-webkit-keyframes rotate {
+	  0% {
+		  -webkit-transform: rotateZ(0) scale(0.7);
+		  transform: rotateZ(0) scale(0.7);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(360deg) scale(0.7);
+		  transform: rotateZ(360deg) scale(0.7);
+	  }
+  }
+  
+  @keyframes rotate {
+	  0% {
+		  -webkit-transform: rotateZ(0) scale(0.7);
+		  transform: rotateZ(0) scale(0.7);
+	  }
+	  100% {
+		  -webkit-transform: rotateZ(360deg) scale(0.7);
+		  transform: rotateZ(360deg) scale(0.7);
+	  }
+  }
+  
+  @media only screen and (max-width: 767px) {
+	  .text {
+		  font-size: 6em;
+	  }
+	  .text .letter span {
+		  bottom: .5rem;
+	  }
+  }
+  
+  @media only screen and (max-width: 480px) {
+	  .text {
+		  font-size: 4em;
+	  }
+	  .text .letter span {
+		  bottom: 0;
+	  }
+  }

node_modules/pdfh5/js/jquery.qrcode.min.js

@@ -0,0 +1,28 @@
+(function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.data=a}function o(a,c){this.typeNumber=a;this.errorCorrectLevel=c;this.modules=null;this.moduleCount=0;this.dataCache=null;this.dataList=[]}function q(a,c){if(void 0==a.length)throw Error(a.length+"/"+c);for(var d=0;d<a.length&&0==a[d];)d++;this.num=Array(a.length-d+c);for(var b=0;b<a.length-d;b++)this.num[b]=a[b+d]}function p(a,c){this.totalCount=a;this.dataCount=c}function t(){this.buffer=[];this.length=0}u.prototype={getLength:function(){return this.data.length},
+write:function(a){for(var c=0;c<this.data.length;c++)a.put(this.data.charCodeAt(c),8)}};o.prototype={addData:function(a){this.dataList.push(new u(a));this.dataCache=null},isDark:function(a,c){if(0>a||this.moduleCount<=a||0>c||this.moduleCount<=c)throw Error(a+","+c);return this.modules[a][c]},getModuleCount:function(){return this.moduleCount},make:function(){if(1>this.typeNumber){for(var a=1,a=1;40>a;a++){for(var c=p.getRSBlocks(a,this.errorCorrectLevel),d=new t,b=0,e=0;e<c.length;e++)b+=c[e].dataCount;
+for(e=0;e<this.dataList.length;e++)c=this.dataList[e],d.put(c.mode,4),d.put(c.getLength(),j.getLengthInBits(c.mode,a)),c.write(d);if(d.getLengthInBits()<=8*b)break}this.typeNumber=a}this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(a,c){this.moduleCount=4*this.typeNumber+17;this.modules=Array(this.moduleCount);for(var d=0;d<this.moduleCount;d++){this.modules[d]=Array(this.moduleCount);for(var b=0;b<this.moduleCount;b++)this.modules[d][b]=null}this.setupPositionProbePattern(0,0);this.setupPositionProbePattern(this.moduleCount-
+7,0);this.setupPositionProbePattern(0,this.moduleCount-7);this.setupPositionAdjustPattern();this.setupTimingPattern();this.setupTypeInfo(a,c);7<=this.typeNumber&&this.setupTypeNumber(a);null==this.dataCache&&(this.dataCache=o.createData(this.typeNumber,this.errorCorrectLevel,this.dataList));this.mapData(this.dataCache,c)},setupPositionProbePattern:function(a,c){for(var d=-1;7>=d;d++)if(!(-1>=a+d||this.moduleCount<=a+d))for(var b=-1;7>=b;b++)-1>=c+b||this.moduleCount<=c+b||(this.modules[a+d][c+b]=
+0<=d&&6>=d&&(0==b||6==b)||0<=b&&6>=b&&(0==d||6==d)||2<=d&&4>=d&&2<=b&&4>=b?!0:!1)},getBestMaskPattern:function(){for(var a=0,c=0,d=0;8>d;d++){this.makeImpl(!0,d);var b=j.getLostPoint(this);if(0==d||a>b)a=b,c=d}return c},createMovieClip:function(a,c,d){a=a.createEmptyMovieClip(c,d);this.make();for(c=0;c<this.modules.length;c++)for(var d=1*c,b=0;b<this.modules[c].length;b++){var e=1*b;this.modules[c][b]&&(a.beginFill(0,100),a.moveTo(e,d),a.lineTo(e+1,d),a.lineTo(e+1,d+1),a.lineTo(e,d+1),a.endFill())}return a},
+setupTimingPattern:function(){for(var a=8;a<this.moduleCount-8;a++)null==this.modules[a][6]&&(this.modules[a][6]=0==a%2);for(a=8;a<this.moduleCount-8;a++)null==this.modules[6][a]&&(this.modules[6][a]=0==a%2)},setupPositionAdjustPattern:function(){for(var a=j.getPatternPosition(this.typeNumber),c=0;c<a.length;c++)for(var d=0;d<a.length;d++){var b=a[c],e=a[d];if(null==this.modules[b][e])for(var f=-2;2>=f;f++)for(var i=-2;2>=i;i++)this.modules[b+f][e+i]=-2==f||2==f||-2==i||2==i||0==f&&0==i?!0:!1}},setupTypeNumber:function(a){for(var c=
+j.getBCHTypeNumber(this.typeNumber),d=0;18>d;d++){var b=!a&&1==(c>>d&1);this.modules[Math.floor(d/3)][d%3+this.moduleCount-8-3]=b}for(d=0;18>d;d++)b=!a&&1==(c>>d&1),this.modules[d%3+this.moduleCount-8-3][Math.floor(d/3)]=b},setupTypeInfo:function(a,c){for(var d=j.getBCHTypeInfo(this.errorCorrectLevel<<3|c),b=0;15>b;b++){var e=!a&&1==(d>>b&1);6>b?this.modules[b][8]=e:8>b?this.modules[b+1][8]=e:this.modules[this.moduleCount-15+b][8]=e}for(b=0;15>b;b++)e=!a&&1==(d>>b&1),8>b?this.modules[8][this.moduleCount-
+b-1]=e:9>b?this.modules[8][15-b-1+1]=e:this.modules[8][15-b-1]=e;this.modules[this.moduleCount-8][8]=!a},mapData:function(a,c){for(var d=-1,b=this.moduleCount-1,e=7,f=0,i=this.moduleCount-1;0<i;i-=2)for(6==i&&i--;;){for(var g=0;2>g;g++)if(null==this.modules[b][i-g]){var n=!1;f<a.length&&(n=1==(a[f]>>>e&1));j.getMask(c,b,i-g)&&(n=!n);this.modules[b][i-g]=n;e--; -1==e&&(f++,e=7)}b+=d;if(0>b||this.moduleCount<=b){b-=d;d=-d;break}}}};o.PAD0=236;o.PAD1=17;o.createData=function(a,c,d){for(var c=p.getRSBlocks(a,
+c),b=new t,e=0;e<d.length;e++){var f=d[e];b.put(f.mode,4);b.put(f.getLength(),j.getLengthInBits(f.mode,a));f.write(b)}for(e=a=0;e<c.length;e++)a+=c[e].dataCount;if(b.getLengthInBits()>8*a)throw Error("code length overflow. ("+b.getLengthInBits()+">"+8*a+")");for(b.getLengthInBits()+4<=8*a&&b.put(0,4);0!=b.getLengthInBits()%8;)b.putBit(!1);for(;!(b.getLengthInBits()>=8*a);){b.put(o.PAD0,8);if(b.getLengthInBits()>=8*a)break;b.put(o.PAD1,8)}return o.createBytes(b,c)};o.createBytes=function(a,c){for(var d=
+0,b=0,e=0,f=Array(c.length),i=Array(c.length),g=0;g<c.length;g++){var n=c[g].dataCount,h=c[g].totalCount-n,b=Math.max(b,n),e=Math.max(e,h);f[g]=Array(n);for(var k=0;k<f[g].length;k++)f[g][k]=255&a.buffer[k+d];d+=n;k=j.getErrorCorrectPolynomial(h);n=(new q(f[g],k.getLength()-1)).mod(k);i[g]=Array(k.getLength()-1);for(k=0;k<i[g].length;k++)h=k+n.getLength()-i[g].length,i[g][k]=0<=h?n.get(h):0}for(k=g=0;k<c.length;k++)g+=c[k].totalCount;d=Array(g);for(k=n=0;k<b;k++)for(g=0;g<c.length;g++)k<f[g].length&&
+(d[n++]=f[g][k]);for(k=0;k<e;k++)for(g=0;g<c.length;g++)k<i[g].length&&(d[n++]=i[g][k]);return d};s=4;for(var j={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,
+78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:1335,G18:7973,G15_MASK:21522,getBCHTypeInfo:function(a){for(var c=a<<10;0<=j.getBCHDigit(c)-j.getBCHDigit(j.G15);)c^=j.G15<<j.getBCHDigit(c)-j.getBCHDigit(j.G15);return(a<<10|c)^j.G15_MASK},getBCHTypeNumber:function(a){for(var c=a<<12;0<=j.getBCHDigit(c)-
+j.getBCHDigit(j.G18);)c^=j.G18<<j.getBCHDigit(c)-j.getBCHDigit(j.G18);return a<<12|c},getBCHDigit:function(a){for(var c=0;0!=a;)c++,a>>>=1;return c},getPatternPosition:function(a){return j.PATTERN_POSITION_TABLE[a-1]},getMask:function(a,c,d){switch(a){case 0:return 0==(c+d)%2;case 1:return 0==c%2;case 2:return 0==d%3;case 3:return 0==(c+d)%3;case 4:return 0==(Math.floor(c/2)+Math.floor(d/3))%2;case 5:return 0==c*d%2+c*d%3;case 6:return 0==(c*d%2+c*d%3)%2;case 7:return 0==(c*d%3+(c+d)%2)%2;default:throw Error("bad maskPattern:"+
+a);}},getErrorCorrectPolynomial:function(a){for(var c=new q([1],0),d=0;d<a;d++)c=c.multiply(new q([1,l.gexp(d)],0));return c},getLengthInBits:function(a,c){if(1<=c&&10>c)switch(a){case 1:return 10;case 2:return 9;case s:return 8;case 8:return 8;default:throw Error("mode:"+a);}else if(27>c)switch(a){case 1:return 12;case 2:return 11;case s:return 16;case 8:return 10;default:throw Error("mode:"+a);}else if(41>c)switch(a){case 1:return 14;case 2:return 13;case s:return 16;case 8:return 12;default:throw Error("mode:"+
+a);}else throw Error("type:"+c);},getLostPoint:function(a){for(var c=a.getModuleCount(),d=0,b=0;b<c;b++)for(var e=0;e<c;e++){for(var f=0,i=a.isDark(b,e),g=-1;1>=g;g++)if(!(0>b+g||c<=b+g))for(var h=-1;1>=h;h++)0>e+h||c<=e+h||0==g&&0==h||i==a.isDark(b+g,e+h)&&f++;5<f&&(d+=3+f-5)}for(b=0;b<c-1;b++)for(e=0;e<c-1;e++)if(f=0,a.isDark(b,e)&&f++,a.isDark(b+1,e)&&f++,a.isDark(b,e+1)&&f++,a.isDark(b+1,e+1)&&f++,0==f||4==f)d+=3;for(b=0;b<c;b++)for(e=0;e<c-6;e++)a.isDark(b,e)&&!a.isDark(b,e+1)&&a.isDark(b,e+
+2)&&a.isDark(b,e+3)&&a.isDark(b,e+4)&&!a.isDark(b,e+5)&&a.isDark(b,e+6)&&(d+=40);for(e=0;e<c;e++)for(b=0;b<c-6;b++)a.isDark(b,e)&&!a.isDark(b+1,e)&&a.isDark(b+2,e)&&a.isDark(b+3,e)&&a.isDark(b+4,e)&&!a.isDark(b+5,e)&&a.isDark(b+6,e)&&(d+=40);for(e=f=0;e<c;e++)for(b=0;b<c;b++)a.isDark(b,e)&&f++;a=Math.abs(100*f/c/c-50)/5;return d+10*a}},l={glog:function(a){if(1>a)throw Error("glog("+a+")");return l.LOG_TABLE[a]},gexp:function(a){for(;0>a;)a+=255;for(;256<=a;)a-=255;return l.EXP_TABLE[a]},EXP_TABLE:Array(256),
+LOG_TABLE:Array(256)},m=0;8>m;m++)l.EXP_TABLE[m]=1<<m;for(m=8;256>m;m++)l.EXP_TABLE[m]=l.EXP_TABLE[m-4]^l.EXP_TABLE[m-5]^l.EXP_TABLE[m-6]^l.EXP_TABLE[m-8];for(m=0;255>m;m++)l.LOG_TABLE[l.EXP_TABLE[m]]=m;q.prototype={get:function(a){return this.num[a]},getLength:function(){return this.num.length},multiply:function(a){for(var c=Array(this.getLength()+a.getLength()-1),d=0;d<this.getLength();d++)for(var b=0;b<a.getLength();b++)c[d+b]^=l.gexp(l.glog(this.get(d))+l.glog(a.get(b)));return new q(c,0)},mod:function(a){if(0>
+this.getLength()-a.getLength())return this;for(var c=l.glog(this.get(0))-l.glog(a.get(0)),d=Array(this.getLength()),b=0;b<this.getLength();b++)d[b]=this.get(b);for(b=0;b<a.getLength();b++)d[b]^=l.gexp(l.glog(a.get(b))+c);return(new q(d,0)).mod(a)}};p.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],
+[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,
+116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,
+43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,
+3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,
+55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,
+45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]];p.getRSBlocks=function(a,c){var d=p.getRsBlockTable(a,c);if(void 0==d)throw Error("bad rs block @ typeNumber:"+a+"/errorCorrectLevel:"+c);for(var b=d.length/3,e=[],f=0;f<b;f++)for(var h=d[3*f+0],g=d[3*f+1],j=d[3*f+2],l=0;l<h;l++)e.push(new p(g,j));return e};p.getRsBlockTable=function(a,c){switch(c){case 1:return p.RS_BLOCK_TABLE[4*(a-1)+0];case 0:return p.RS_BLOCK_TABLE[4*(a-1)+1];case 3:return p.RS_BLOCK_TABLE[4*
+(a-1)+2];case 2:return p.RS_BLOCK_TABLE[4*(a-1)+3]}};t.prototype={get:function(a){return 1==(this.buffer[Math.floor(a/8)]>>>7-a%8&1)},put:function(a,c){for(var d=0;d<c;d++)this.putBit(1==(a>>>c-d-1&1))},getLengthInBits:function(){return this.length},putBit:function(a){var c=Math.floor(this.length/8);this.buffer.length<=c&&this.buffer.push(0);a&&(this.buffer[c]|=128>>>this.length%8);this.length++}};"string"===typeof h&&(h={text:h});h=r.extend({},{render:"canvas",width:256,height:256,typeNumber:-1,
+correctLevel:2,background:"#ffffff",foreground:"#000000"},h);return this.each(function(){var a;if("canvas"==h.render){a=new o(h.typeNumber,h.correctLevel);a.addData(h.text);a.make();var c=document.createElement("canvas");c.width=h.width;c.height=h.height;for(var d=c.getContext("2d"),b=h.width/a.getModuleCount(),e=h.height/a.getModuleCount(),f=0;f<a.getModuleCount();f++)for(var i=0;i<a.getModuleCount();i++){d.fillStyle=a.isDark(f,i)?h.foreground:h.background;var g=Math.ceil((i+1)*b)-Math.floor(i*b),
+j=Math.ceil((f+1)*b)-Math.floor(f*b);d.fillRect(Math.round(i*b),Math.round(f*e),g,j)}}else{a=new o(h.typeNumber,h.correctLevel);a.addData(h.text);a.make();c=r("<table></table>").css("width",h.width+"px").css("height",h.height+"px").css("border","0px").css("border-collapse","collapse").css("background-color",h.background);d=h.width/a.getModuleCount();b=h.height/a.getModuleCount();for(e=0;e<a.getModuleCount();e++){f=r("<tr></tr>").css("height",b+"px").appendTo(c);for(i=0;i<a.getModuleCount();i++)r("<td></td>").css("width",
+d+"px").css("background-color",a.isDark(e,i)?h.foreground:h.background).appendTo(f)}}a=c;jQuery(a).appendTo(this)})}})(jQuery);

node_modules/pdfh5/js/pdfh5.js

@@ -0,0 +1,2031 @@
+;
+(function(g, fn) {
+	var version = "1.3.19",
+		pdfjsVersion = "2.3.200";
+	console.log("pdfh5.js v" + version + "  https://www.gjtool.cn")
+	if (typeof require !== 'undefined') {
+		if (g.$ === undefined) {
+			g.$ = require('./jquery-2.1.1.min.js');
+		}
+		g.pdfjsWorker = require('./pdf.worker.js');
+		g.pdfjsLib = require('./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 _createClass = function() {
+		function defineProperties(target, props) {
+			for (var i = 0; i < props.length; i++) {
+				var descriptor = props[i];
+				descriptor.enumerable = descriptor.enumerable || false;
+				descriptor.configurable = true;
+				if ("value" in descriptor) descriptor.writable = true;
+				Object.defineProperty(target, descriptor.key, descriptor);
+			}
+		}
+		return function(Constructor, protoProps, staticProps) {
+			if (protoProps) defineProperties(Constructor.prototype, protoProps);
+			if (staticProps) defineProperties(Constructor, staticProps);
+			return Constructor;
+		};
+	}();
+
+	function _classCallCheck(instance, Constructor) {
+		if (!(instance instanceof Constructor)) {
+			throw new TypeError("Cannot call a class as a function");
+		}
+	}
+
+	var renderTextLayer = pdfjsLib.renderTextLayer;
+	var EXPAND_DIVS_TIMEOUT = 300; // ms
+
+	var TextLayerBuilder = function() {
+		function TextLayerBuilder(_ref) {
+			var textLayerDiv = _ref.textLayerDiv;
+			var eventBus = _ref.eventBus;
+			var pageIndex = _ref.pageIndex;
+			var viewport = _ref.viewport;
+			var _ref$findController = _ref.findController;
+			var findController = _ref$findController === undefined ? null : _ref$findController;
+			var _ref$enhanceTextSelec = _ref.enhanceTextSelection;
+			var enhanceTextSelection = _ref$enhanceTextSelec === undefined ? false : _ref$enhanceTextSelec;
+
+			_classCallCheck(this, TextLayerBuilder);
+
+			this.textLayerDiv = textLayerDiv;
+			this.eventBus = eventBus;
+			this.textContent = null;
+			this.textContentItemsStr = [];
+			this.textContentStream = null;
+			this.renderingDone = false;
+			this.pageIdx = pageIndex;
+			this.pageNumber = this.pageIdx + 1;
+			this.matches = [];
+			this.viewport = viewport;
+			this.textDivs = [];
+			this.findController = findController;
+			this.textLayerRenderTask = null;
+			this.enhanceTextSelection = enhanceTextSelection;
+
+			this._onUpdateTextLayerMatches = null;
+			this._bindMouse();
+		}
+
+		/**
+		 * @private
+		 */
+
+
+		_createClass(TextLayerBuilder, [{
+			key: "_finishRendering",
+			value: function _finishRendering() {
+				this.renderingDone = true;
+
+				if (!this.enhanceTextSelection) {
+					var endOfContent = document.createElement("div");
+					endOfContent.className = "endOfContent";
+					this.textLayerDiv.appendChild(endOfContent);
+				}
+				if (this.eventBus) {
+					this.eventBus.dispatch("textlayerrendered", {
+						source: this,
+						pageNumber: this.pageNumber,
+						numTextDivs: this.textDivs.length
+					});
+				}
+			}
+
+			/**
+			 * Renders the text layer.
+			 *
+			 * @param {number} [timeout] - Wait for a specified amount of milliseconds
+			 *                             before rendering.
+			 */
+
+		}, {
+			key: "render",
+			value: function render() {
+				var _this = this;
+
+				var timeout = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
+
+				if (!(this.textContent || this.textContentStream) || this.renderingDone) {
+					return;
+				}
+				this.cancel();
+
+				this.textDivs = [];
+				var textLayerFrag = document.createDocumentFragment();
+				this.textLayerRenderTask = renderTextLayer({
+					textContent: this.textContent,
+					textContentStream: this.textContentStream,
+					container: textLayerFrag,
+					viewport: this.viewport,
+					textDivs: this.textDivs,
+					textContentItemsStr: this.textContentItemsStr,
+					timeout: timeout,
+					enhanceTextSelection: this.enhanceTextSelection
+				});
+				this.textLayerRenderTask.promise.then(function() {
+					_this.textLayerDiv.appendChild(textLayerFrag);
+					_this._finishRendering();
+					_this._updateMatches();
+				}, function(reason) {
+					// Cancelled or failed to render text layer; skipping errors.
+				});
+
+				if (!this._onUpdateTextLayerMatches) {
+					this._onUpdateTextLayerMatches = function(evt) {
+						if (evt.pageIndex === _this.pageIdx || evt.pageIndex === -1) {
+							_this._updateMatches();
+						}
+					};
+					if (this.eventBus) {
+						this.eventBus._on("updatetextlayermatches", this._onUpdateTextLayerMatches);
+					}
+				}
+			}
+
+			/**
+			 * Cancel rendering of the text layer.
+			 */
+
+		}, {
+			key: "cancel",
+			value: function cancel() {
+				if (this.textLayerRenderTask) {
+					this.textLayerRenderTask.cancel();
+					this.textLayerRenderTask = null;
+				}
+				if (this._onUpdateTextLayerMatches) {
+					this.eventBus._off("updatetextlayermatches", this._onUpdateTextLayerMatches);
+					this._onUpdateTextLayerMatches = null;
+				}
+			}
+		}, {
+			key: "setTextContentStream",
+			value: function setTextContentStream(readableStream) {
+				this.cancel();
+				this.textContentStream = readableStream;
+			}
+		}, {
+			key: "setTextContent",
+			value: function setTextContent(textContent) {
+				this.cancel();
+				this.textContent = textContent;
+			}
+		}, {
+			key: "_convertMatches",
+			value: function _convertMatches(matches, matchesLength) {
+				// Early exit if there is nothing to convert.
+				if (!matches) {
+					return [];
+				}
+				var findController = this.findController;
+				var textContentItemsStr = this.textContentItemsStr;
+
+
+				var i = 0,
+					iIndex = 0;
+				var end = textContentItemsStr.length - 1;
+				var queryLen = findController.state.query.length;
+				var result = [];
+
+				for (var m = 0, mm = matches.length; m < mm; m++) {
+					// Calculate the start position.
+					var matchIdx = matches[m];
+
+					// Loop over the divIdxs.
+					while (i !== end && matchIdx >= iIndex + textContentItemsStr[i].length) {
+						iIndex += textContentItemsStr[i].length;
+						i++;
+					}
+
+					if (i === textContentItemsStr.length) {
+						console.error("Could not find a matching mapping");
+					}
+
+					var match = {
+						begin: {
+							divIdx: i,
+							offset: matchIdx - iIndex
+						}
+					};
+
+					// Calculate the end position.
+					if (matchesLength) {
+						// Multiterm search.
+						matchIdx += matchesLength[m];
+					} else {
+						// Phrase search.
+						matchIdx += queryLen;
+					}
+
+					// Somewhat the same array as above, but use > instead of >= to get
+					// the end position right.
+					while (i !== end && matchIdx > iIndex + textContentItemsStr[i].length) {
+						iIndex += textContentItemsStr[i].length;
+						i++;
+					}
+
+					match.end = {
+						divIdx: i,
+						offset: matchIdx - iIndex
+					};
+					result.push(match);
+				}
+				return result;
+			}
+		}, {
+			key: "_renderMatches",
+			value: function _renderMatches(matches) {
+				// Early exit if there is nothing to render.
+				if (matches.length === 0) {
+					return;
+				}
+				var findController = this.findController;
+				var pageIdx = this.pageIdx;
+				var textContentItemsStr = this.textContentItemsStr;
+				var textDivs = this.textDivs;
+
+
+				var isSelectedPage = pageIdx === findController.selected.pageIdx;
+				var selectedMatchIdx = findController.selected.matchIdx;
+				var highlightAll = findController.state.highlightAll;
+				var prevEnd = null;
+				var infinity = {
+					divIdx: -1,
+					offset: undefined
+				};
+
+				function beginText(begin, className) {
+					var divIdx = begin.divIdx;
+					textDivs[divIdx].textContent = "";
+					appendTextToDiv(divIdx, 0, begin.offset, className);
+				}
+
+				function appendTextToDiv(divIdx, fromOffset, toOffset, className) {
+					var div = textDivs[divIdx];
+					var content = textContentItemsStr[divIdx].substring(fromOffset, toOffset);
+					var node = document.createTextNode(content);
+					if (className) {
+						var span = document.createElement("span");
+						span.className = className;
+						span.appendChild(node);
+						div.appendChild(span);
+						return;
+					}
+					div.appendChild(node);
+				}
+
+				var i0 = selectedMatchIdx,
+					i1 = i0 + 1;
+				if (highlightAll) {
+					i0 = 0;
+					i1 = matches.length;
+				} else if (!isSelectedPage) {
+					// Not highlighting all and this isn't the selected page, so do nothing.
+					return;
+				}
+
+				for (var i = i0; i < i1; i++) {
+					var match = matches[i];
+					var begin = match.begin;
+					var end = match.end;
+					var isSelected = isSelectedPage && i === selectedMatchIdx;
+					var highlightSuffix = isSelected ? " selected" : "";
+
+					if (isSelected) {
+						// Attempt to scroll the selected match into view.
+						findController.scrollMatchIntoView({
+							element: textDivs[begin.divIdx],
+							pageIndex: pageIdx,
+							matchIndex: selectedMatchIdx
+						});
+					}
+
+					// Match inside new div.
+					if (!prevEnd || begin.divIdx !== prevEnd.divIdx) {
+						// If there was a previous div, then add the text at the end.
+						if (prevEnd !== null) {
+							appendTextToDiv(prevEnd.divIdx, prevEnd.offset, infinity.offset);
+						}
+						// Clear the divs and set the content until the starting point.
+						beginText(begin);
+					} else {
+						appendTextToDiv(prevEnd.divIdx, prevEnd.offset, begin.offset);
+					}
+
+					if (begin.divIdx === end.divIdx) {
+						appendTextToDiv(begin.divIdx, begin.offset, end.offset, "highlight" + highlightSuffix);
+					} else {
+						appendTextToDiv(begin.divIdx, begin.offset, infinity.offset, "highlight begin" + highlightSuffix);
+						for (var n0 = begin.divIdx + 1, n1 = end.divIdx; n0 < n1; n0++) {
+							textDivs[n0].className = "highlight middle" + highlightSuffix;
+						}
+						beginText(end, "highlight end" + highlightSuffix);
+					}
+					prevEnd = end;
+				}
+
+				if (prevEnd) {
+					appendTextToDiv(prevEnd.divIdx, prevEnd.offset, infinity.offset);
+				}
+			}
+		}, {
+			key: "_updateMatches",
+			value: function _updateMatches() {
+				// Only show matches when all rendering is done.
+				if (!this.renderingDone) {
+					return;
+				}
+				var findController = this.findController;
+				var matches = this.matches;
+				var pageIdx = this.pageIdx;
+				var textContentItemsStr = this.textContentItemsStr;
+				var textDivs = this.textDivs;
+
+				var clearedUntilDivIdx = -1;
+
+				// Clear all current matches.
+				for (var i = 0, ii = matches.length; i < ii; i++) {
+					var match = matches[i];
+					var begin = Math.max(clearedUntilDivIdx, match.begin.divIdx);
+					for (var n = begin, end = match.end.divIdx; n <= end; n++) {
+						var div = textDivs[n];
+						div.textContent = textContentItemsStr[n];
+						div.className = "";
+					}
+					clearedUntilDivIdx = match.end.divIdx + 1;
+				}
+
+				if (!findController || !findController.highlightMatches) {
+					return;
+				}
+				// Convert the matches on the `findController` into the match format
+				// used for the textLayer.
+				var pageMatches = findController.pageMatches[pageIdx] || null;
+				var pageMatchesLength = findController.pageMatchesLength[pageIdx] || null;
+
+				this.matches = this._convertMatches(pageMatches, pageMatchesLength);
+				this._renderMatches(this.matches);
+			}
+
+			/**
+			 * Improves text selection by adding an additional div where the mouse was
+			 * clicked. This reduces flickering of the content if the mouse is slowly
+			 * dragged up or down.
+			 *
+			 * @private
+			 */
+
+		}, {
+			key: "_bindMouse",
+			value: function _bindMouse() {
+				var _this2 = this;
+
+				var div = this.textLayerDiv;
+				var expandDivsTimer = null;
+
+				div.addEventListener("mousedown", function(evt) {
+					if (_this2.enhanceTextSelection && _this2.textLayerRenderTask) {
+						_this2.textLayerRenderTask.expandTextDivs(true);
+						if ((typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) && expandDivsTimer) {
+							clearTimeout(expandDivsTimer);
+							expandDivsTimer = null;
+						}
+						return;
+					}
+
+					var end = div.querySelector(".endOfContent");
+					if (!end) {
+						return;
+					}
+					if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {
+						// On non-Firefox browsers, the selection will feel better if the height
+						// of the `endOfContent` div is adjusted to start at mouse click
+						// location. This avoids flickering when the selection moves up.
+						// However it does not work when selection is started on empty space.
+						var adjustTop = evt.target !== div;
+						if (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) {
+							adjustTop = adjustTop && window.getComputedStyle(end).getPropertyValue("-moz-user-select") !== "none";
+						}
+						if (adjustTop) {
+							var divBounds = div.getBoundingClientRect();
+							var r = Math.max(0, (evt.pageY - divBounds.top) / divBounds.height);
+							end.style.top = (r * 100).toFixed(2) + "%";
+						}
+					}
+					end.classList.add("active");
+				});
+
+				div.addEventListener("mouseup", function() {
+					if (_this2.enhanceTextSelection && _this2.textLayerRenderTask) {
+						if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {
+							expandDivsTimer = setTimeout(function() {
+								if (_this2.textLayerRenderTask) {
+									_this2.textLayerRenderTask.expandTextDivs(false);
+								}
+								expandDivsTimer = null;
+							}, EXPAND_DIVS_TIMEOUT);
+						} else {
+							_this2.textLayerRenderTask.expandTextDivs(false);
+						}
+						return;
+					}
+
+					var end = div.querySelector(".endOfContent");
+					if (!end) {
+						return;
+					}
+					if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {
+						end.style.top = "";
+					}
+					end.classList.remove("active");
+				});
+			}
+		}]);
+
+		return TextLayerBuilder;
+	}();
+
+	/**
+	 * @implements IPDFTextLayerFactory
+	 */
+
+
+	var DefaultTextLayerFactory = function() {
+		function DefaultTextLayerFactory() {
+			_classCallCheck(this, DefaultTextLayerFactory);
+		}
+
+		_createClass(DefaultTextLayerFactory, [{
+			key: "createTextLayerBuilder",
+
+			/**
+			 * @param {HTMLDivElement} textLayerDiv
+			 * @param {number} pageIndex
+			 * @param {PageViewport} viewport
+			 * @param {boolean} enhanceTextSelection
+			 * @param {EventBus} eventBus
+			 * @returns {TextLayerBuilder}
+			 */
+			value: function createTextLayerBuilder(textLayerDiv, pageIndex, viewport) {
+				var enhanceTextSelection = arguments.length <= 3 || arguments[3] === undefined ? false : arguments[3];
+				var eventBus = arguments[4];
+
+				return new TextLayerBuilder({
+					textLayerDiv: textLayerDiv,
+					pageIndex: pageIndex,
+					viewport: viewport,
+					enhanceTextSelection: enhanceTextSelection,
+					eventBus: eventBus
+				});
+			}
+		}]);
+
+		return DefaultTextLayerFactory;
+	}();
+
+	g.TextLayerBuilder = TextLayerBuilder;
+	g.DefaultTextLayerFactory = DefaultTextLayerFactory;
+
+	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: 5,
+				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.thePDF = null;
+		this.totalNum = null;
+		this.pages = null;
+		this.initTime = 0;
+		this.scale = 1.5;
+		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;
+		this.init(options);
+	};
+	Pdfh5.prototype = {
+		init: function(options) {
+			var self = this;
+			if (this.container[0].pdfLoaded) {
+				this.destroy();
+			}
+			if (options.cMapUrl) {
+				pdfjsLib.cMapUrl = options.cMapUrl;
+			} else {
+				pdfjsLib.cMapUrl = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/';
+			}
+			pdfjsLib.cMapPacked = true;
+			pdfjsLib.rangeChunkSize = 65536;
+			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.options.scale ? 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;
+			this.options.textLayer = this.options.textLayer === true ? true : false;
+			this.options.goto = isNaN(this.options.goto) ? 0 : this.options.goto;
+			if (this.options.logo && Object.prototype.toString.call(this.options.logo) === '[object Object]' && this.options.logo
+				.src) {
+				this.options.logo.img = new Image();
+				this.options.logo.img.src = this.options.logo.src;
+				this.options.logo.img.style.display = "none";
+				document.body.appendChild(this.options.logo.img)
+			} else {
+				this.options.logo = false;
+			}
+			if (!(this.options.background && (this.options.background.color || this.options.background.image))) {
+				this.options.background = false
+			}
+			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
+			}
+			this.options.type = this.options.type === "fetch" ? "fetch" : "ajax";
+			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) {
+				if (self.options.type === "ajax") {
+					$.ajax({
+						type: "get",
+						mimeType: 'text/plain; charset=x-user-defined',
+						url: url,
+						success: function(data) {
+							var rawLength = data.length;
+							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 {
+					self.renderPdf(self.options, {
+						url: url
+					})
+				}
+			} 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/';
+			}
+			if (options.httpHeaders) {
+				obj.httpHeaders = options.httpHeaders;
+			}
+			if (options.withCredentials) {
+				obj.withCredentials = true;
+			}
+			if (options.password) {
+				obj.password = options.password;
+				console.log(obj.password)
+			}
+			if (options.stopAtErrors) {
+				obj.stopAtErrors = true;
+			}
+			if (options.disableFontFace) {
+				obj.disableFontFace = true;
+			}
+			if (options.disableRange) {
+				obj.disableRange = true;
+			}
+			if (options.disableStream) {
+				obj.disableStream = true;
+			}
+			if (options.disableAutoFetch) {
+				obj.disableAutoFetch = true;
+			}
+			obj.cMapPacked = true;
+			obj.rangeChunkSize = 65536;
+			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 == 5) {
+								return
+							}
+							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);
+				var i = 1;
+				for (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) {
+							setTimeout(function() {
+								if (self.options.goto) {
+									if (pageNum == self.options.goto) {
+										self.goto(pageNum)
+									}
+								}
+							}, 0)
+
+							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 = self.container.find('.pageContainer' + pageNum)[0];
+							var container;
+							if (!div) {
+								container = document.createElement('div');
+								container.className = 'pageContainer pageContainer' + pageNum;
+								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
+							}
+							if (options.background) {
+								/*背景颜色*/
+								if (options.background.color) {
+									container.style["background-color"] = options.background.color
+								}
+								/*背景图片*/
+								if (options.background.image) {
+									container.style["background-image"] = options.background.image
+								}
+								/*平铺与否*/
+								if (options.background.repeat) {
+									container.style["background-repeat"] = options.background.repeat
+								}
+								/*背景图片位置*/
+								if (options.background.position) {
+									container.style["background-position"] = options.background.position
+								}
+								/*背景图像的尺寸*/
+								if (options.background.size) {
+									container.style["background-size"] = options.background.size
+								}
+							}
+							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;
+			var viewport = page.getViewport(options.scale);
+			var scale = (self.docWidth / viewport.width).toFixed(2)
+			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)
+					}
+				});
+			}).then(function() {
+				return page.getTextContent();
+			}).then(function(textContent) {
+				if (!self.options.textLayer) {
+					return
+				}
+				if ($(container).find(".textLayer")[0]) {
+					return
+				}
+				var textLayerDiv = document.createElement('div');
+				textLayerDiv.setAttribute('class', 'textLayer');
+				container.appendChild(textLayerDiv);
+				viewport.width = viewport.width * scale;
+				viewport.height = viewport.height * scale;
+				var textLayer = new TextLayerBuilder({
+					textLayerDiv: textLayerDiv,
+					pageIndex: page.pageIndex,
+					viewport: viewport
+				});
+
+				textLayer.setTextContent(textContent);
+
+				textLayer.render();
+			});;
+		},
+		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');
+			if (options.logo) {
+				context.drawImage(self.options.logo.img, self.options.logo.x * self.options.scale,
+					self.options.logo.y * self.options.scale, self.options.logo.width * self.options.scale, self.options.logo.height *
+					self.options.scale
+				);
+			}
+			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/png");
+			var renderObj = {
+				canvasContext: context,
+				viewport: viewport
+			}
+			if (options.background) {
+				renderObj.background = "rgba(255, 255, 255, 0)"
+			}
+			return page.render(renderObj).then(function() {
+				if (options.logo) {
+					context.drawImage(self.options.logo.img, self.options.logo.x * self.options.scale,
+						self.options.logo.y * self.options.scale, self.options.logo.width * self.options.scale, self.options.logo.height *
+						self.options.scale
+					);
+				}
+				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/png");
+
+				img.src = obj2.src;
+				img.className = "canvasImg" + pageNum;
+				var img0 = self.container.find(".pageContainer" + pageNum).find(".canvasImg" + pageNum)[0];
+				if (container && !img0) {
+					container.appendChild(img);
+				} else if (img0) {
+					img0.src = obj2.src
+				}
+				container.children[0].style.display = "none";
+				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)
+				}
+			}).then(function() {
+				return page.getTextContent();
+			}).then(function(textContent) {
+				if (!self.options.textLayer) {
+					return
+				}
+				if ($(container).find(".textLayer")[0]) {
+					return
+				}
+				var textLayerDiv = document.createElement('div');
+				textLayerDiv.setAttribute('class', 'textLayer');
+				container.appendChild(textLayerDiv);
+				viewport.width = viewport.width * scale;
+				viewport.height = viewport.height * scale;
+				var textLayer = new TextLayerBuilder({
+					textLayerDiv: textLayerDiv,
+					pageIndex: page.pageIndex,
+					viewport: viewport
+				});
+
+				textLayer.setTextContent(textContent);
+
+				textLayer.render();
+			});
+		},
+		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) {
+				$(window).on("resize", function() {
+					self.pages.each(function(i, item) {
+						$(item).css("min-height", "auto")
+					})
+				})
+			}
+		},
+		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]
+				}
+			}
+		},
+		goto: function(num) {
+			var self = this;
+
+			if (!isNaN(num)) {
+				if (self.viewerContainer) {
+					self.pages = self.viewerContainer.find('.pageContainer');
+
+					if (self.pages) {
+						var h = 0;
+						var signHeight = 0;
+						if (num - 1 > 0) {
+							signHeight = self.pages[0].getBoundingClientRect().height;
+						}
+						self.viewerContainer.animate({
+							scrollTop: signHeight* (num - 1)+8*num
+						}, 300)
+					}
+				}
+			}
+		},
+		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;
+			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;
+});

node_modules/pdfh5/package.json

@@ -0,0 +1,61 @@
+{
+  "_from": "pdfh5",
+  "_id": "pdfh5@1.3.20",
+  "_inBundle": false,
+  "_integrity": "sha1-T9QffjBrUdci2KWgESPPPX6upJk=",
+  "_location": "/pdfh5",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "tag",
+    "registry": true,
+    "raw": "pdfh5",
+    "name": "pdfh5",
+    "escapedName": "pdfh5",
+    "rawSpec": "",
+    "saveSpec": null,
+    "fetchSpec": "latest"
+  },
+  "_requiredBy": [
+    "#USER",
+    "/"
+  ],
+  "_resolved": "https://registry.npm.taobao.org/pdfh5/download/pdfh5-1.3.20.tgz",
+  "_shasum": "4fd41f7e306b51d722d8a5a01123cf3d7eaea499",
+  "_spec": "pdfh5",
+  "_where": "D:\\yuwenjun_dev\\caimei-applets-caime",
+  "author": {
+    "name": "Gao Jin"
+  },
+  "bugs": {
+    "url": "https://github.com/gjTool/pdfh5/issues"
+  },
+  "bundleDependencies": false,
+  "dependencies": {},
+  "deprecated": false,
+  "description": " JS plugin of preview PDF  for mobile. web/h5/移动端PDF预览手势缩放插件",
+  "devDependencies": {},
+  "directories": {
+    "example": "example"
+  },
+  "homepage": "https://github.com/gjTool/pdfh5#readme",
+  "keywords": [
+    "pdf",
+    "pdf.js",
+    "pdfjs",
+    "pdfh5",
+    "pdfh5.js",
+    "javascript",
+    "plugin",
+    "library",
+    "mobile"
+  ],
+  "license": "MIT",
+  "main": "js/pdfh5.js",
+  "name": "pdfh5",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gjTool/pdfh5.git"
+  },
+  "scripts": {},
+  "version": "1.3.20"
+}

node_modules/pdfh5/pdf.html

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="UTF-8">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-status-bar-style" content="black">
+		<meta name="format-detection" content="telephone=no" />
+		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
+		<meta http-equiv="pragma" content="no-cache">
+		<meta http-equiv="cache-control" content="no-cache">
+		<meta http-equiv="expires" content="0">
+		<title>PDFH5</title>
+		<link rel="stylesheet" href="css/style.css" />
+		<link rel="stylesheet" href="css/pdfh5.css" />
+		<link href="https://www.gjtool.cn/download/pdfh5.png" type="image/x-icon" rel="shortcut icon" />
+		<style>
+			html,
+        body {
+            width: 100%;
+            height: 100%;
+        }
+        
+        #demo {
+            display: none;
+            /* height: 33%; */
+        }
+		#demo2 {
+		    /* display: none; */
+		    height: 33%;
+		}
+		#demo3 {
+		    /* display: none; */
+		    height: 33%;
+		}
+    </style>
+	</head>
+
+	<body>
+		<div id="app">
+			<div class="text-wrapper">
+				<div class="text part1">
+					<div>
+						<span class="letter">
+							<div class="character">L</div> <span></span>
+						</span>
+						<span class="letter">
+							<div class="character">o</div> <span></span>
+						</span>
+						<span class="letter">
+							<div class="character">a</div> <span></span>
+						</span>
+						<span class="letter">
+							<div class="character">d</div> <span></span>
+						</span>
+						<span class="letter">
+							<div class="character">i</div> <span></span>
+						</span>
+						<span class="letter">
+							<div class="character">n</div> <span></span>
+						</span>
+						<span class="letter">
+							<div class="character">g</div> <span></span>
+						</span>
+					</div>
+				</div>
+				<div class="how-to"><span>正在加载中，请您耐心等待...</span></div>
+			</div>
+
+		</div>
+		<div id="demo"></div>
+	<!-- 	<div id="demo2"></div>
+		<div id="demo3"></div> -->
+		<script src="js/pdf.js"></script>
+		<script src="js/pdf.worker.js"></script>
+		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
+		<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
+		<script type="text/javascript">
+			var pdfh5;
+			$(function() {
+				$("#app").remove()
+				$("#demo").show()
+				pdfh5 = new Pdfh5('#demo', {
+					pdfurl: "https://www.gjtool.cn/pdfh5/git.pdf",
+					// renderType:"svg",
+					// textLayer:true,
+					// background:{
+					// 	image:"url('pdfh5.png')",
+					// 	repeat:"no-repeat",
+					// 	position:"left top",
+					// 	size:"40px 40px"
+					// },
+					// goto:6,
+					// URIenable:true //开启浏览器地址栏file参数获取
+				});
+				pdfh5.on("zoom", function (scale) {
+				    console.log(scale)
+				})
+				// new Pdfh5('#demo2', {
+				// 	pdfurl: "222.pdf"
+				// });
+				// new Pdfh5('#demo3', {
+				// 	pdfurl: "git.pdf"
+				// });
+				// setTimeout(() => {
+				//     var pdfh5 = new Pdfh5('#demo', {
+				//         pdfurl: "https://www.gjtool.cn/pdfh5/git.pdf"
+				//     });
+				//     setTimeout(() => {
+				//         var pdfh5 = new Pdfh5('#demo', {
+				//             pdfurl: "1.pdf"
+				//         });
+				//         setTimeout(() => {
+				//             var pdfh5 = new Pdfh5('#demo', {
+				//                 pdfurl: "test.pdf"
+				//             });
+				//             pdfh5.on("complete", function (status, msg, time) {
+				//                 console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
+				//             })
+				//         }, 5000);
+				//     }, 5000);
+				// }, 5000);
+
+				//配置项参数 renderType:"svg" 渲染模式为svg，默认canvas
+				// var pdfh5 = new Pdfh5('#demo', {
+				//     pdfurl: "./default.pdf",
+				//     renderType:"svg"
+				// });
+
+				//配置项参数 lazy:true 开启懒加载，默认是false,不开启懒加载
+				// var pdfh5 = new Pdfh5('#demo', {
+				//     pdfurl: "./default.pdf",
+				//     lazy:true 
+				// });
+
+				//配置项参数 URIenable:true 开启获取地址栏file参数，获取地址栏pdf路径?file=xxx.pdf，默认false不开启
+				// var pdfh5 = new Pdfh5('#demo', {
+				//     URIenable:false,
+				//     pdfurl: "./default.pdf"
+				// });
+
+				//配置项参数 是否显示小部件 顶部绿色加载进度条loadingBar 左上角页码显示pageNum 右下角回到顶部按钮backTop  默认显示
+				//		var pdfh5 = new Pdfh5('#demo', {
+				// 			 loadingBar: false,
+				//           pageNum:false,
+				//           backTop:false
+				// 		});
+
+				//配置项参数data，文件流形式传入  pdfurl和data二选一
+				//		var pdfh5 = new Pdfh5('#demo', {
+				// 			data: data
+				// 		});
+
+				//配置项参数scrollEnable:false不允许pdf滚动,true允许pdf滚动  默认允许
+				//		var pdfh5 = new Pdfh5('#demo', {
+				// 			scrollEnable:false,//是否允许pdf滚动
+				// 			pdfurl: url
+				// 		});
+				//pdfh5.scrollEnable(true)允许pdf滚动,pdfh5.scrollEnable(false)不允许pdf滚动
+
+				//配置项参数zoomEnable:false不允许pdf手势缩放,true允许pdf手势缩放  默认允许
+				//		var pdfh5 = new Pdfh5('#demo', {
+				// 			zoomEnable:false,//是否允许pdf手势缩放
+				// 			pdfurl: url
+				// 		});
+				//pdfh5.zoomEnable(true)允许pdf手势缩放，pdfh5.zoomEnable(false)不允许pdf手势缩放
+
+				//pdfh5还原、销毁（附带回调函数）：   pdfh5.reset pdfh5.destroy 
+				//pdfh5显示、隐藏（附带回调函数）：   pdfh5.show pdfh5.hide 
+
+				//pdf准备开始渲染，此时可以拿到pdf总页数
+				pdfh5.on("ready", function() {
+					console.log("pdf准备开始渲染，总页数：" + this.totalNum)
+				})
+				//监听pdf渲染成功
+				pdfh5.on("success", function(time) {
+					time = time / 1000
+					console.log("pdf渲染完成，总耗时" + time + "秒");
+					//滚动到第3页
+					// pdfh5.goto(3);
+				})
+				//监听pdf渲染失败
+				// pdfh5.on("error", function (time) {
+				//     console.log("渲染失败，总耗时" + time + "毫秒")
+				// })
+				//监听完成事件，加载失败、渲染成功都会触发
+				 pdfh5.on("complete", function (status, msg, time) {
+				    console.log("状态：" + status + "，总耗时：" + time + "毫秒，总页数：" + this.totalNum,msg)
+				})
+				
+				//监听渲染中事件
+				 pdfh5.on("render", function (currentNum, time, currentPageDom) {
+					 // currentPageDom.append("<span class='name-logo'>张三</span>")
+					console.log("当前页码：" + currentNum)
+				})
+				//on方法,监听事件： 开始初始化 init 准备渲染pdf ready 加载完成 complete 加载失败 error 加载成功 success 渲染pdf中 render
+				// 缩放zoom   滚动scroll 显示show  隐藏hide 还原reset 销毁destroy  允许缩放zoomEnable 允许滚动scrollEnable
+
+				//pdfh5支持在线预览 
+				//http://www.gjtool.cn/pdfh5/pdf.html?file=http://www.gjtool.cn/pdfh5/default.pdf
+			})
+		</script>
+	</body>
+
+</html>

package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "pdfh5": {
+      "version": "1.3.20",
+      "resolved": "https://registry.npm.taobao.org/pdfh5/download/pdfh5-1.3.20.tgz",
+      "integrity": "sha1-T9QffjBrUdci2KWgESPPPX6upJk="
+    },
     "umtrack-wx": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/umtrack-wx/-/umtrack-wx-2.5.2.tgz",

package.json

@@ -14,6 +14,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "pdfh5": "^1.3.20",
     "umtrack-wx": "^2.5.2"
   }
 }

pages.json

@@ -142,6 +142,20 @@
                         "enablePullDownRefresh": true,
                         "navigationStyle": "custom"
                     }
+                },
+                {
+                    "path": "goods-doc-list",
+                    "style": {
+                        "navigationBarTitleText": "美业资料",
+                        "enablePullDownRefresh": false
+                    }
+                },
+                { 
+                    "path": "goods-doc-detail",
+                    "style": {
+                        "navigationBarTitleText": "美业资料详情",
+                        "enablePullDownRefresh": false
+                    }
                 }
             ]
         },
@@ -667,6 +681,12 @@
                     "style": {
                         "navigationBarTitleText": "品牌招商"
                     }
+                },
+                {
+                    "path": "other/pdf",
+                    "style": {
+                        "navigationBarTitleText": "文件预览"
+                    }
                 }
             ]
         }, {

pages/goods/goods-doc-detail.vue

@@ -0,0 +1,68 @@
+<!-- 自定义页面 -->
+<template>
+    <view class="goods-doc-detail"> 
+        <view class="cm-header">
+            <image class="cm-cover" src="https://picsum.photos/750/750" mode=""></image>
+            <view class="cm-title">
+                韩国恩盛进口氢洁气小气泡清韩国恩韩进口氢洁气小气泡清韩国恩
+            </view>
+            <view class="cm-params"><text>供应商：</text>科医人医疗激光设备贸易公司</view>
+            <view class="cm-params"><text>商品属性：</text>产品</view>
+        </view>
+        <cm-product-doc v-if="archiveId !== 0" :archiveId="archiveId" :bottom="isIphoneX ? '60rpx' : '10rpx'"></cm-product-doc>
+    </view>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import cmProductDoc from '@/components/cm-module/productDetails/cm-product-doc.vue'
+export default {
+    components:{
+        cmProductDoc
+    },
+    computed:{
+        ...mapState(['isIphoneX']),
+    },
+    onLoad(e) {
+       this.archiveId = e.id || 0
+    },
+    data() {
+        return {
+            archiveId: 0
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.goods-doc-detail{
+    background: #F7F7F7;
+}
+.cm-header{
+    background: #fff;
+    margin-bottom: 16rpx;
+    overflow: hidden;
+    .cm-cover{
+        width: 750rpx;
+        height: 750rpx;
+    }
+    .cm-title,.cm-params{
+        padding: 0 24rpx;
+    }
+    .cm-title{
+        margin: 32rpx 0;
+        font-size: 34rpx;
+        line-height: 1.6;
+        color: #333333;
+    }
+    .cm-params{
+        margin: 16rpx 0;
+        font-size: 24rpx;
+        line-height: 1.6;
+        color: #333333;
+        text{
+            font-size: #999999
+        }
+    }
+}
+</style>

pages/goods/goods-doc-list.vue

@@ -0,0 +1,260 @@
+<template>
+    <view class="goods-doc-list" :class="{ hasBottom: isIphoneX }">
+        <view class="search">
+            <view class="search-control">
+                <text class="iconfont icon-iconfonticonfontsousuo1"></text>
+                <input
+                    placeholder-class="search-placeholder"
+                    placeholder="请输入商品名称/供应商名称"
+                    class="search-input"
+                    type="text"
+                    v-model="listQuery.keyword"
+                    @click="isFoucs = true"
+                    @blur="handleBlur"
+                    @input="handleInput"
+                />
+            </view>
+        </view>
+        <!-- tabs -->
+        <tui-sticky :scrollTop="scrollTop" @sticky="handleSticky" v-if="!isSearch">
+            <template v-slot:header>
+                <view :class="{ hasBorder: isSitcky }">
+                    <tui-tabs
+                        :tabs="tabs"
+                        :currentTab="currentTab"
+                        sliderBgColor="#E15616"
+                        selectedColor="#E15616"
+                        itemWidth="50%"
+                        @change="tabChange"
+                    ></tui-tabs>
+                </view>
+            </template>
+        </tui-sticky>
+        <!-- list -->
+        <view class="doc-list" :style="{ paddingTop: isSitcky ? '80rpx' : '' }">
+            <view class="section" v-for="(item, index) in showList" :key="index" @click="handleRoute(item)">
+                <image class="cover" :src="item.productImage"></image>
+                <view class="content">
+                    <view class="title">{{ item.productName }}</view>
+                    <view class="params"><text>供应商：</text>{{ item.shopName }}</view>
+                    <view class="params"><text>商品属性：</text>{{ item.productType === 1 ? '仪器' : '产品' }}</view>
+                </view>
+            </view>
+        </view>
+        <!-- loading more -->
+        <view v-if="showList.length > 6">
+            <tui-loadmore :text="loadingText" :index="1" :visible="isLoading"></tui-loadmore>
+            <tui-nomore :text="loadingText" :visible="!isLoading"></tui-nomore>
+        </view>
+        <!-- back top -->
+        <!-- <tui-scroll-top :scrollTop="scrollTop"></tui-scroll-top> -->
+    </view>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+    data() {
+        return {
+            isLoading: false,
+            hasMore: false,
+            scrollTop: 0,
+            isSitcky: false,
+            listQuery: {
+                keyword: '', //查询关键词
+                productType: 0, //商品类型 0 全部 1 仪器 2 产品
+                pageNum: 1,
+                pageSize: 10
+            },
+            isFoucs: false,
+            tabs: [{ id: 0, name: '全部' }, { id: 1, name: '仪器' }, { id: 2, name: '产品' }],
+            currentTab: 0,
+            searchList: [],
+            list: []
+        }
+    },
+    computed: {
+        ...mapState(['isIphoneX']),
+        loadingText() {
+            if (!this.hasMore) return '没有更多了'
+            if (this.hasMore && !this.isLoading) return '上拉加载更多'
+            return '加载中'
+        },
+        isSearch() {
+            return this.listQuery.keyword.trim() !== '' || this.isFoucs
+        },
+        showList() {
+            if (this.isSearch) return this.searchList
+            return this.list
+        }
+    },
+    watch:{
+        isSearch(val){
+            if(!val) this.searchList = []
+        }
+    },
+    onLoad() {
+        this.getList()
+    },
+    methods: {
+        // 获取商品列表
+        getList() {
+            this.isLoading = true
+            this.BeautyArchive.GetArchiveProduct(this.listQuery).then(res => {
+                console.log(res)
+                if(res.code) return
+                if(this.isSearch) {
+                    this.searchList = [...this.searchList, ...res.data.results]
+                }else {
+                    this.list = [...this.list, ...res.data.results]
+                }
+                this.hasMore = res.data.hasNextPage
+                this.isLoading = false
+            })
+        },
+        // tab切换
+        tabChange(e) {
+            this.currentTab = e.index
+            this.listQuery.productType = this.currentTab
+            // 清空列表 重置页码为1
+            this.list = []
+            this.listQuery.pageNum = 1
+            this.getList()
+        },
+        // 吸顶
+        handleSticky(e) {
+            this.isSitcky = e.isFixed
+        },
+        // 搜索框输入
+        handleInput(e) {
+            if(e.detail.value.trim() === '') return
+            this.searchList = []
+            // 从第一页开始 ， 搜索全部
+            this.listQuery.pageNum = 1
+            this.listQuery.productType = 0
+            let timer = null
+            clearTimeout(timer)
+            timer = setTimeout(()=>{
+                this.getList()
+            },500)
+        },
+        // 搜索框失去焦点
+        handleBlur(){
+            this.isFoucs = false
+            this.listQuery.productType = this.currentTab
+        },
+        // 路由跳转
+        handleRoute(item){
+            console.log(item)
+            if(item.redirectType === 1){
+                this.$api.navigateTo(`/pages/goods/product?id=${item.productId}`)
+            }else{
+                this.$api.navigateTo(`/pages/goods/goods-doc-detail?id=${item.archiveId}`)
+            }
+        }
+    },
+    onPageScroll(e) {
+        this.scrollTop = e.scrollTop
+    },
+    onReachBottom() {
+        if (!this.hasMore) return
+        let timer = null
+        clearTimeout(timer)
+        this.listQuery.pageNum ++
+        this.isLoading = true
+        timer = setTimeout(() => {
+            this.getList()
+        }, 200)
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+page {
+    height: initial;
+}
+.hasBorder {
+    border-bottom: 1px solid #eee;
+}
+.hasBottom {
+    padding-bottom: 60rpx;
+}
+.doc-list {
+    padding: 0 24rpx;
+    .section {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 32rpx 0;
+        border-bottom: 1rpx solid #f0f0f0;
+        &:last-child {
+            border-bottom: 0;
+            padding-bottom: 0;
+        }
+    }
+    .cover {
+        width: 180rpx;
+        height: 180rpx;
+        border-radius: 8rpx;
+    }
+    .content {
+        width: 494rpx;
+        margin-left: 24rpx;
+        .title {
+            height: 74rpx;
+            margin-bottom: 34rpx;
+            font-size: 26rpx;
+            line-height: 37rpx;
+            color: #333333;
+            word-break: break-all;
+            overflow: hidden; /*超出隐藏*/
+            text-overflow: ellipsis; /*文本溢出时显示省略标记*/
+            display: -webkit-box; /*设置弹性盒模型*/
+            -webkit-line-clamp: 2; /*文本占的行数,如果要设置2行加...则设置为2*/
+            -webkit-box-orient: vertical;
+        }
+        .params {
+            margin-top: 8rpx;
+            font-size: 22rpx;
+            color: #333333;
+            text {
+                color: #999999;
+            }
+        }
+    }
+}
+
+.search-placeholder {
+    color: #b2b2b2;
+    font-size: 28rpx;
+}
+
+.search {
+    display: flex;
+    justify-content: center;
+    width: 750rpx;
+    padding: 24rpx 0 0;
+    background: #fff;
+    .search-control {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 702rpx;
+        border-radius: 40rpx;
+        background: #f7f7f7;
+        overflow: hidden;
+        .search-input {
+            flex: 1;
+            border: 0;
+            height: 66rpx;
+            font-size: 28rpx;
+            color: #333333;
+        }
+        .iconfont {
+            font-size: 36rpx;
+            margin: 0 20rpx;
+            color: #b2b2b2;
+        }
+    }
+}
+</style>

pages/goods/product.vue

@@ -1,2354 +1,2600 @@
 <template>
-	<view class="product" :style="{paddingBottom: userIdentity==1 && userIdentity == 3 ? '0rpx' :'188rpx',paddingTop:CustomBar+'px'}">
-		<custom-p   v-if="isHeaderPoduct"
-					:systeminfo='systeminfo' 
-					:navbar-data='nvabarData' 
-					:headerBtnPosi ="headerBtnPosi" 
-					:headerColor="headerColor" 
-					:type="isShareType"
-					:page='backPage'>
-		</custom-p>
-		<view class="product-topnav" v-if='isNavbarFiexd' :class="navbarFiexd" :style="{top:CustomBar +'px'}">
-			<view class="search-input">
-				<view class="gosearch-btn" :class="navbarFiexd" @click="this.$api.navigateTo(clickPath)">
-					<view class="search-icon">
-						<text class="iconfont icon-iconfonticonfontsousuo1"></text>
-					</view>
-					<view class="search-text">搜索商品/项目仪器</view>
-				</view>
-			</view>
-			<view class="navbar">
-				<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
-					<text>详情</text>
-					<text class="line"></text>
-				</view>
-				<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 1 }" @click="tabClick(1)">
-					<text>服务项目</text>
-					<text class="line"></text>
-				</view>	
-				<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">
-					<text>推荐</text>
-					<text class="line"></text>
-				</view>	
-			</view>	
-		</view>
-		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="5"></tui-skeleton>
-		<template v-else >
-			<view class="cart-content empty" v-if="isInvalid">
-				<view  class="empty-container">
-					<image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
-					<text class="error-text">商品已失效，去商城逛逛别的吧~</text>
-					<view class="login-btn"  @click="goIndex">去商城</view>
-				</view>
-			</view>
-			<view class="container-product tui-skeleton" v-else>
-				<view class="container-product-main">
-					<view class="product-top">
-						<view class="banner-section">
-							<uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
-								<swiper class="banner tui-banner tui-skeleton-rect"  @change="swiperChange" :duration='800' :autoplay="false" :circular="true" >
-									<swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item"> 
-										<image :src="item" @click="previewImg(index)" class="product-img" />
-										<view class="cm-product-cover" v-if="product.appletsActType === 1">云上美博会</view>
-									</swiper-item>
-								</swiper>
-								<view class="swiper__dots-box">
-									<tui-tag padding="12rpx 24rpx" 
-											 type="translucent" 
-											 shape="circleLeft" 
-											 size="32rpx" 
-											 :scaleMultiple="0.82" originRight>
-										{{ current + 1 }}/{{ productImage.length }}
-									</tui-tag>
-								</view>
-							</uni-swiper-dot>
-						</view>
-						<view class="product-wrap clearfix">
-							<view class="wrap-top" :class="goodsData.isNoneDisabled ? 'none' : ''">
-								<view class="wrap-top-price">
-									<cm-price v-if="isRequest"
-											  :product="product"
-											  :userIdentity="userIdentity"
-											  :shopID= "shopID"
-											  :promotions="product.promotions"
-											  :ladderPriceList="ladderPriceList"/>
-								</view>
-								<view class="p-title tui-skeleton-fillet">
-									<view class="mclap-tag" v-if="product.beautyActFlag == '1'">美博会</view>
-									<view class="p-title-name" :class="product.beautyActFlag == '1' ? 'indent' : ''"> 
-										{{product.name == undefined ? '' : product.name}} 
-									</view>
-									<button open-type="share" class="p-title-share tui-share-position" @tap="onShare">
-										<view class=""><text class="iconfont icon-fenxiang1"></text></view>
-										<view class="">分享</view>
-									</button>
-								</view>
-								<view class="wrap-label" v-if="product.tagsList.length>0">
-									<view class="label-a tui-skeleton-fillet" v-for="(label,index) in  product.tagsList" :key="index">{{label}}</view>
-								</view>
-								<view class="product-seve" v-if="hasLogin">
-									<text class="label">采美承诺：</text>
-									<text class="iconfont icon-dui tui-skeleton-rect"><text class="text">无忧退货</text></text>
-									<text class="iconfont icon-dui tui-skeleton-rect"><text class="text">快速退款</text></text>
-									<text class="iconfont icon-dui tui-skeleton-rect"><text class="text">正品保证</text></text>
-								</view>
-								<view class="productRemarks"  v-if="product.productRemarks!=''&&product.productRemarks!=null">
-									备注:{{product.productRemarks}}
-								</view>
-							</view>
-						</view>			
-					</view>
-					<view class="product-item-none" v-if="goodsData.isNoneDisabled">
-						<image class="none-image" :src="productNoneImage" mode=""></image>
-						<view class="none-text">此商品已{{goodsData.disabledText}}，请浏览以下推荐商品~</view>
-					</view>
-					<!-- 参数 -->
-					<view class="product-parameter" @click="showPopup(0)" v-if="!goodsData.isNoneDisabled">
-						<text class="title">参数：</text>
-						<text class="name">品牌  起订量  分类...</text>
-						<text class="iconfont icon-xiayibu"></text>
-					</view>
-					<!-- 优惠券 -->
-					<view class="product-parameter coupon" v-if="isShowButton && productCoupon.length>0" @click="showPopup(2)">
-						<text class="title">优惠券：</text>
-						<view class="coupon">
-							<text class="tags"  v-for="(coupon, index) in productCoupon.slice(0,3)" :key="index"> 
-								满{{ coupon.touchPrice }}减{{ coupon.couponAmount }} 
-							</text>
-						</view>
-						<text class="iconfont icon-xiayibu"></text>
-					</view>
-					<!-- 仪器培训方案 -->
-					<view class="product-parameter" @click="showPopup(1)" v-if='product.commodityType == 2 && product.trainingMethod'>
-						<text class="title">培训方案：</text>
-						<text class="name">{{ product.trainingMethod == 1 ? '线上培训' : '线下培训' }}</text>
-						<text class="iconfont icon-xiayibu"></text>
-					</view>
-					<!-- 供应商 -->
-					<view class="product-supplier" v-if="isNoneSupplier" @click="goSupplier">
-						<view class="logo"><img :src="shop.logo ? shop.logo :'https://static.caimei365.com/app/img/icon/icon-shoplogo.png'" alt=""></view>
-						<view class="main">
-							<view class="name">{{shop.name}}</view>
-							<view class="massgs">
-								<view class="label">满意度:</view>
-								<view class="p-stars">
-									<uni-stars :stars="6" :iconClass="iconClass" :iconColor="iconColor" :fontSize="36" :widthInfo="176"></uni-stars>
-								</view>
-								<view class="acount">
-									<text>{{ shop.normalNum }}</text>件商品
-								</view>
-							</view>
-						</view>
-						<view class="right"><text class="iconfont icon-xiayibu"></text></view>
-					</view>
-				</view>
-				<view class="product-details product-details0">
-					<!-- 商品详情 -->
-					<view class="title">
-						<view class="title-tab">商品详情</view>
-					</view>
-					<view class="content tui-banner product-rich-text tui-skeleton-rect">
-						<parser :html="html" :img-mode="widthFix" v-if="!goodsData.isNoneDisabled && product.productDetail.detailInfo"></parser>
-						<view class="product-rich-text-none" v-else>暂无商品信息</view>
-					</view>
-				</view>	
-				<view class="product-details service product-details1">
-					<!-- 服务项目 -->
-					<view class="title">
-						<view class="title-tab">服务项目</view>
-					</view>
-					<view class="content service" v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo">
-						<cm-service :product="product.productDetail" v-if="isRequest"></cm-service>
-					</view>
-					<view class="content-none"  v-else>
-						<text>暂无服务项目</text>
-					</view>
-				</view>	
-				<view class="product-details recommend product-details2">
-					<!-- 相关推荐 -->
-					<view class="title">
-						<view class="title-tab">相关推荐</view>
-					</view>
-					<view class="content hot">
-						<recommend :query-productid="product.productId" :query-type="product.recommendType" v-if="isRequest"></recommend>
-					</view>
-				</view>	
-				<!-- 商品参数 -->
-				<tui-bottom-popup :radius="true" :show="popupShow0" @close="hidePopup(0)">
-					<view class="tui-popup-box clearfix">
-						<view class="title">商品参数</view>
-						<div class="tui-popup-main">
-							<scroll-view class="tui-popup-scroll"  scroll-y="true">
-								<view class="content-tr">
-									<view class="content-td">起订量</view>
-									<view class="content-th">{{product.minBuyNumber}}</view>
-								</view>
-								<view class="content-tr">
-									<view class="content-td">品牌</view>
-									<view class="content-th">{{product.brandName == null? '其他' : product.brandName}}</view>
-								</view>
-								<view class="content-tr">
-									<view class="content-td">分类</view>
-									<view class="content-th">{{product.typeName == null? '暂无' : product.typeName}}</view>
-								</view>
-								<view class="content-tr">
-									<view class="content-td">包装规格</view> 
-									<view class="content-th">{{product.unit}}</view>
-								</view>
-								<view class="content-tr">
-									<view class="content-td">商品编码</view>
-									<view class="content-th">{{product.productCode}}</view>
-								</view>
-								<view class="content-tr">
-									<view class="content-td">库存</view>
-									<view class="content-th">{{product.stock}}</view>
-								</view>
-								<view class="content-tr" v-if="product.parametersList.length>0" v-for="(item, index) in product.parametersList" :key="index">
-									<view class="content-td">{{item.paramsName}}</view>
-									<view class="content-th">{{item.paramsContent}}</view>
-								</view>
-							</scroll-view>
-						</div>
-						<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
-							<view class="tui-flex-1">
-								<view class="tui-button" @click="hidePopup(0)">收起</view>
-							</view>
-						</view>
-					</view>	
-				</tui-bottom-popup>	
-				<!-- 优惠券 -->
-				<tui-bottom-popup :radius="true" :show="popupShow2" @close="hidePopup(2)">
-					<view class="tui-popup-box clearfix">
-						<view class="title">优惠券</view>
-						<view class="tui-popup-close" @click="hidePopup(2)">
-							<text class="iconfont icon-iconfontguanbi"></text>
-						</view>
-						<view class="tui-popup-tabs">
-							<coupon-tabs  :tabs="navbar"
-										  :currentTab="currentTab > 2 ? 0 : currentTab" 
-										  @change="couponChange" 
-										  :itemWidth="(100/navbar.length)+'%'"
-										  selectedColor="#e15616" 
-										  sliderBgColor="#e15616">
-							</coupon-tabs>
-						</view>
-						<div class="tui-popup-main coupon">
-							<scroll-view class="tui-popup-scroll"  scroll-y="true">
-								<view class="coupon-empty" v-if="isCouponEmpty">
-									<image class="empty-container-image" :src="StaticUrl+'/icon/icon-coupon-empty@2x.png'"></image>
-									<text class="error-text">暂无可领的优惠券~</text>
-								</view>
-								<template v-else>
-									<view 	v-for="(coupon,index) in productCouponList"
-											:key="index" 
-											:id="coupon.couponId" 
-											class="coupon-list" 
-									>
-										<view class="list-cell-le">
-											<view class="coupon-maxMoney"><text class="small">￥</text>{{ coupon.couponAmount }}</view>
-											<view class="coupon-minMoney">满{{ coupon.touchPrice }}可用</view>
-										</view>
-										<view class="list-cell-ri">
-											<view class="list-cell-top">
-												<view class="list-cell-type">
-													<view class="list-cell-tags">
-														<text class="tags">{{ coupon.couponType | TypeFormat }}</text>
-													</view>
-													<view class="list-cell-texts">
-														<text v-if="coupon.couponType == 0">
-															{{ coupon.productType && coupon.productType == 1 ? '全商城商品通用' : '仅可购买指定商品'  }}
-														</text>
-														<text v-if="coupon.couponType == 1">
-															{{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
-														</text>
-														<text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
-														<text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
-													</view>
-												</view>
-												<view class="list-cell-btn">
-													<view class="icon-used">
-														<view class="icon-used-btn receive" v-if="currentTab == 0" @click="receiveCoupon(coupon)">领取</view>
-														<view class="icon-used-btn make" v-if="currentTab == 1">已领取</view>
-													</view>
-												</view>
-											</view>
-											<view class="list-cell-time">{{ coupon.startDate }} - {{ coupon.endDate }}</view>
-										</view>
-									</view>
-								</template>
-							</scroll-view>
-						</div>
-					</view>	
-				</tui-bottom-popup>	
-				<!-- 培训方案 -->
-				<tui-bottom-popup :radius="true" :show="popupShow1" @close="hidePopup(1)">
-					<view class="tui-popup-box clearfix">
-						<view class="title">培训方案</view>
-						<div class="tui-popup-main">
-							<scroll-view class="tui-popup-scroll train"  scroll-y="true">
-								<view class="content-tr">
-									<view class="content-td">培训方式：</view>
-									<view class="content-th">{{ product.trainingMethod == 1 ? '线上培训' : '线下培训' }}</view>
-								</view>
-								<view class="content-tr">
-									<view class="content-td">培训费用：</view>
-									<view class="content-th">{{ product.trainingType == 1 ? '￥'+product.trainingFee : '售价已包含' }}</view>
-								</view>
-							</scroll-view>
-						</div>
-						<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
-							<view class="tui-flex-1">
-								<view class="tui-button" @click="hidePopup(1)">收起</view>
-							</view>
-						</view>
-					</view>	
-				</tui-bottom-popup>	
-				<!-- 底部按钮 -->
-				<view class="menu" v-if="isShowButton">
-					<view class="bottom-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
-						<view class="bottom-le">
-							<view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/home/index')">
-								<image src="../../static/icon-home-active@3x.png"></image>
-								<text>首页</text>
-							</view>
-							<button class="item-bt" open-type="contact" @click="handleContact">
-								<image src="../../static/severs@3x.png"></image>
-								<text>客服</text>
-							</button>
-							<view class="item-bt" @click="buyProductCart()">
-								<image src="https://static.caimei365.com/app/img/icon/icon-cart-active@3x.png"></image>
-								<text>购物车</text>
-								<text  	v-if="hasLogin && bottomCartNumber>0"
-										class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
-										:class="[bottomCartNumber < 10 ? 'goleft':'']">
-										{{ bottomCartNumber >= 100 ? '99+': bottomCartNumber}}
-								</text>
-								<view class="animation-num"  :class="isAnimation ? 'animation' : 'restion'">+1</view>
-							</view>
-						</view>
-						<view class="bottom-ri">
-							<button  
-									:disabled="goodsData.disabled" 
-									class="btn btn-cart" 
-									:class="[goodsData.disabled ? 'disabled':'']"
-									@tap.stop="btnGetConfirm('add')">加入购物车</button>
-							<button  
-									:disabled="goodsData.disabled" 
-									class="btn btn-bay" 
-									:class="[goodsData.disabled ? 'disabled':'']"
-									@tap.stop="btnGetConfirm('buy')">立即购买</button>
-						</view>
-					</view>	
-				</view>
-				<!--底部选择模态层弹窗组件 -->	
-				<view class="popup spec" :class="specClass"  @touchmove.stop.prevent="discard" @tap="hideSpec">
-					<!-- 遮罩层 -->
-					<view class="mask"></view>
-					<view class="layer" @tap.stop="discard" :style="{paddingBottom :isIphoneX ? '68rpx' : '36rpx',bottom:isIphoneX ?'-352rpx' : '-296rpx'}">
-						<view class="content">
-							<view class="layer-smimg">
-								<image :src="product.mainImage" mode=""></image>
-							</view>
-							<view class="layer-nunbox">
-								<view class="layer-nunbox-t" v-if="product.step === 2">
-									<view class="text">*该商品只能以起订量的整数倍购买</view>
-								</view>
-								<view class="layer-nunbox-t">
-									<view class="layer-nunbox-text">数量:</view>
-									<view class="number-box">
-										<view  class="iconfont icon-jianhao" :class="[isQuantity==true?'disabled':'']" @click="changeCountSub()"></view>
-										<input class="btn-input" type="number" v-model="number" maxlength='4'  @blur="changeNumber($event)">
-										<view  class="iconfont icon-jiahao"  :class="[isStock==true?'disabled':'']" @click="changeCountAdd()"></view>
-									</view>
-								</view>
-								<view class="layer-nunbox-b">
-									<view class="text">单价:
-										<text class="p sm">￥</text>
-										<text class="p bg">{{buyRetailPrice.toFixed(2)}}</text>
-									</view>
-								</view>
-							</view>
-						</view>
-						<view class="btn"><view class="button" @click.stop="btnConfirm">确定</view></view>
-					</view>
-				</view>
-				<!-- 侧边 -->
-				<scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
-			</view>
-		</template>
-	</view>
+    <view
+        class="product "
+        :style="{
+            paddingBottom: userIdentity == 1 && userIdentity == 3 ? '0rpx' : '188rpx',
+            paddingTop: CustomBar + 'px'
+        }"
+    >
+        <custom-p
+            v-if="isHeaderPoduct"
+            :systeminfo="systeminfo"
+            :navbar-data="nvabarData"
+            :headerBtnPosi="headerBtnPosi"
+            :headerColor="headerColor"
+            :type="isShareType"
+            :page="backPage"
+        >
+        </custom-p>
+        <view
+            class="product-topnav"
+            id="topBar"
+            v-show="isNavbarFiexd"
+            :class="navbarFiexd"
+            :style="{ top: CustomBar + 'px' }"
+        >
+            <view class="search-input">
+                <view class="gosearch-btn" :class="navbarFiexd" @click="this.$api.navigateTo(clickPath)">
+                    <view class="search-icon"> <text class="iconfont icon-iconfonticonfontsousuo1"></text> </view>
+                    <view class="search-text">搜索商品/项目仪器</view>
+                </view>
+            </view>
+            <view class="navbar">
+                <view
+                    class="nav-item tui-skeleton-fillet"
+                    :class="{ current: tabCurrentIndex === 0 }"
+                    @click="tabClick(0)"
+                >
+                    <text>详情</text> <text class="line"></text>
+                </view>
+                <view
+                    class="nav-item tui-skeleton-fillet"
+                    :class="{ current: tabCurrentIndex === 1 }"
+                    @click="tabClick(1)"
+                >
+                    <text>服务项目</text> <text class="line"></text>
+                </view>
+                <view
+                    class="nav-item tui-skeleton-fillet"
+                    :class="{ current: tabCurrentIndex === 2 }"
+                    @click="tabClick(2)"
+                >
+                    <text>推荐</text> <text class="line"></text>
+                </view>
+                <view
+                    class="nav-item tui-skeleton-fillet"
+                    :class="{ current: tabCurrentIndex === 3 }"
+                    @click="tabClick(3)"
+                >
+                    <text>相关资料</text> <text class="line"></text>
+                </view>
+            </view>
+        </view>
+        <tui-skeleton
+            v-if="skeletonShow"
+            backgroundColor="#fafafa"
+            borderRadius="10rpx"
+            :isLoading="true"
+            :loadingType="5"
+        ></tui-skeleton>
+        <template v-else>
+            <view class="cart-content empty" v-if="isInvalid">
+                <view class="empty-container">
+                    <image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
+                    <text class="error-text">商品已失效，去商城逛逛别的吧~</text>
+                    <view class="login-btn" @click="goIndex">去商城</view>
+                </view>
+            </view>
+            <view class="container-product tui-skeleton" v-else>
+                <view class="container-product-main">
+                    <view class="product-top">
+                        <view class="banner-section">
+                            <uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode">
+                                <swiper
+                                    class="banner tui-banner tui-skeleton-rect"
+                                    @change="swiperChange"
+                                    :duration="800"
+                                    :autoplay="false"
+                                    :circular="true"
+                                >
+                                    <swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
+                                        <image :src="item" @click="previewImg(index)" class="product-img" />
+                                        <view class="cm-product-cover" v-if="product.appletsActType === 1"
+                                            >云上美博会</view
+                                        >
+                                    </swiper-item>
+                                </swiper>
+                                <view class="swiper__dots-box">
+                                    <tui-tag
+                                        padding="12rpx 24rpx"
+                                        type="translucent"
+                                        shape="circleLeft"
+                                        size="32rpx"
+                                        :scaleMultiple="0.82"
+                                        originRight
+                                    >
+                                        {{ current + 1 }}/{{ productImage.length }}
+                                    </tui-tag>
+                                </view>
+                            </uni-swiper-dot>
+                        </view>
+                        <view class="product-wrap clearfix">
+                            <view class="wrap-top" :class="goodsData.isNoneDisabled ? 'none' : ''">
+                                <view class="wrap-top-price">
+                                    <cm-price
+                                        v-if="isRequest"
+                                        :product="product"
+                                        :userIdentity="userIdentity"
+                                        :shopID="shopID"
+                                        :promotions="product.promotions"
+                                        :ladderPriceList="ladderPriceList"
+                                    />
+                                </view>
+                                <view class="p-title tui-skeleton-fillet">
+                                    <view class="mclap-tag" v-if="product.beautyActFlag == '1'">美博会</view>
+                                    <view class="p-title-name" :class="product.beautyActFlag == '1' ? 'indent' : ''">
+                                        {{ product.name == undefined ? '' : product.name }}
+                                    </view>
+                                    <button open-type="share" class="p-title-share tui-share-position" @tap="onShare">
+                                        <view class=""><text class="iconfont icon-fenxiang1"></text></view>
+                                        <view class="">分享</view>
+                                    </button>
+                                </view>
+                                <view class="wrap-label" v-if="product.tagsList.length > 0">
+                                    <view
+                                        class="label-a tui-skeleton-fillet"
+                                        v-for="(label, index) in product.tagsList"
+                                        :key="index"
+                                        >{{ label }}</view
+                                    >
+                                </view>
+                                <view class="product-seve" v-if="hasLogin">
+                                    <text class="label">采美承诺：</text>
+                                    <text class="iconfont icon-dui tui-skeleton-rect"
+                                        ><text class="text">无忧退货</text></text
+                                    >
+                                    <text class="iconfont icon-dui tui-skeleton-rect"
+                                        ><text class="text">快速退款</text></text
+                                    >
+                                    <text class="iconfont icon-dui tui-skeleton-rect"
+                                        ><text class="text">正品保证</text></text
+                                    >
+                                </view>
+                                <view
+                                    class="productRemarks"
+                                    v-if="product.productRemarks != '' && product.productRemarks != null"
+                                >
+                                    备注:{{ product.productRemarks }}
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="product-item-none" v-if="goodsData.isNoneDisabled">
+                        <image class="none-image" :src="productNoneImage" mode=""></image>
+                        <view class="none-text">此商品已{{ goodsData.disabledText }}，请浏览以下推荐商品~</view>
+                    </view>
+                    <!-- 参数 -->
+                    <view class="product-parameter" @click="showPopup(0)" v-if="!goodsData.isNoneDisabled">
+                        <text class="title">参数：</text> <text class="name">品牌 起订量 分类...</text>
+                        <text class="iconfont icon-xiayibu"></text>
+                    </view>
+                    <!-- 优惠券 -->
+                    <view
+                        class="product-parameter coupon"
+                        v-if="isShowButton && productCoupon.length > 0"
+                        @click="showPopup(2)"
+                    >
+                        <text class="title">优惠券：</text>
+                        <view class="coupon">
+                            <text class="tags" v-for="(coupon, index) in productCoupon.slice(0, 3)" :key="index">
+                                满{{ coupon.touchPrice }}减{{ coupon.couponAmount }}
+                            </text>
+                        </view>
+                        <text class="iconfont icon-xiayibu"></text>
+                    </view>
+                    <!-- 仪器培训方案 -->
+                    <view
+                        class="product-parameter"
+                        @click="showPopup(1)"
+                        v-if="product.commodityType == 2 && product.trainingMethod"
+                    >
+                        <text class="title">培训方案：</text>
+                        <text class="name">{{ product.trainingMethod == 1 ? '线上培训' : '线下培训' }}</text>
+                        <text class="iconfont icon-xiayibu"></text>
+                    </view>
+                    <!-- 供应商 -->
+                    <view class="product-supplier" v-if="isNoneSupplier" @click="goSupplier">
+                        <view class="logo"
+                            ><img
+                                :src="
+                                    shop.logo
+                                        ? shop.logo
+                                        : 'https://static.caimei365.com/app/img/icon/icon-shoplogo.png'
+                                "
+                                alt=""
+                        /></view>
+                        <view class="main">
+                            <view class="name">{{ shop.name }}</view>
+                            <view class="massgs">
+                                <view class="label">满意度:</view>
+                                <view class="p-stars">
+                                    <uni-stars
+                                        :stars="6"
+                                        :iconClass="iconClass"
+                                        :iconColor="iconColor"
+                                        :fontSize="36"
+                                        :widthInfo="176"
+                                    ></uni-stars>
+                                </view>
+                                <view class="acount">
+                                    <text>{{ shop.normalNum }}</text
+                                    >件商品
+                                </view>
+                            </view>
+                        </view>
+                        <view class="right"><text class="iconfont icon-xiayibu"></text></view>
+                    </view>
+                </view>
+                <!-- 商品详情 -->
+                <view v-show="tabCurrentIndex !== 3">
+                    <view class="product-details product-details0">
+                        <view class="title"> <view class="title-tab">商品详情</view> </view>
+                        <view class="content tui-banner product-rich-text tui-skeleton-rect">
+                            <parser
+                                :html="html"
+                                :img-mode="widthFix"
+                                v-if="!goodsData.isNoneDisabled && product.productDetail.detailInfo"
+                            ></parser>
+                            <view class="product-rich-text-none" v-else>暂无商品信息</view>
+                        </view>
+                    </view>
+                    <!-- 服务项目 -->
+                    <view class="product-details service product-details1" style="height: 1000px;">
+                        <view class="title"> <view class="title-tab">服务项目</view> </view>
+                        <view
+                            class="content service"
+                            v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo"
+                        >
+                            <cm-service :product="product.productDetail" v-if="isRequest"></cm-service>
+                        </view>
+                        <view class="content-none" v-else> <text>暂无服务项目</text> </view>
+                    </view>
+                    <!-- 相关推荐 -->
+                    <view class="product-details recommend product-details2">
+                        <view class="title"> <view class="title-tab">相关推荐</view> </view>
+                        <view class="content hot">
+                            <recommend
+                                :query-productid="product.productId"
+                                :query-type="product.recommendType"
+                                v-if="isRequest"
+                            ></recommend>
+                        </view>
+                    </view>
+                </view>
+                <!-- 相关资料 -->
+                <view class="product-details recommend product-details3" v-show="tabCurrentIndex === 3">
+                    <cm-product-doc :archiveId="product.archiveId" :userId='userId'></cm-product-doc>
+                </view>
+                <!-- 商品参数 -->
+                <tui-bottom-popup :radius="true" :show="popupShow0" @close="hidePopup(0)">
+                    <view class="tui-popup-box clearfix">
+                        <view class="title">商品参数</view>
+                        <div class="tui-popup-main">
+                            <scroll-view class="tui-popup-scroll" scroll-y="true">
+                                <view class="content-tr">
+                                    <view class="content-td">起订量</view>
+                                    <view class="content-th">{{ product.minBuyNumber }}</view>
+                                </view>
+                                <view class="content-tr">
+                                    <view class="content-td">品牌</view>
+                                    <view class="content-th">{{
+                                        product.brandName == null ? '其他' : product.brandName
+                                    }}</view>
+                                </view>
+                                <view class="content-tr">
+                                    <view class="content-td">分类</view>
+                                    <view class="content-th">{{
+                                        product.typeName == null ? '暂无' : product.typeName
+                                    }}</view>
+                                </view>
+                                <view class="content-tr">
+                                    <view class="content-td">包装规格</view>
+                                    <view class="content-th">{{ product.unit }}</view>
+                                </view>
+                                <view class="content-tr">
+                                    <view class="content-td">商品编码</view>
+                                    <view class="content-th">{{ product.productCode }}</view>
+                                </view>
+                                <view class="content-tr">
+                                    <view class="content-td">库存</view>
+                                    <view class="content-th">{{ product.stock }}</view>
+                                </view>
+                                <view
+                                    class="content-tr"
+                                    v-if="product.parametersList.length > 0"
+                                    v-for="(item, index) in product.parametersList"
+                                    :key="index"
+                                >
+                                    <view class="content-td">{{ item.paramsName }}</view>
+                                    <view class="content-th">{{ item.paramsContent }}</view>
+                                </view>
+                            </scroll-view>
+                        </div>
+                        <view
+                            class="tui-right-flex tui-popup-btn"
+                            :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }"
+                        >
+                            <view class="tui-flex-1"> <view class="tui-button" @click="hidePopup(0)">收起</view> </view>
+                        </view>
+                    </view>
+                </tui-bottom-popup>
+                <!-- 优惠券 -->
+                <tui-bottom-popup :radius="true" :show="popupShow2" @close="hidePopup(2)">
+                    <view class="tui-popup-box clearfix">
+                        <view class="title">优惠券</view>
+                        <view class="tui-popup-close" @click="hidePopup(2)">
+                            <text class="iconfont icon-iconfontguanbi"></text>
+                        </view>
+                        <view class="tui-popup-tabs">
+                            <coupon-tabs
+                                :tabs="navbar"
+                                :currentTab="currentTab > 2 ? 0 : currentTab"
+                                @change="couponChange"
+                                :itemWidth="100 / navbar.length + '%'"
+                                selectedColor="#e15616"
+                                sliderBgColor="#e15616"
+                            >
+                            </coupon-tabs>
+                        </view>
+                        <div class="tui-popup-main coupon">
+                            <scroll-view class="tui-popup-scroll" scroll-y="true">
+                                <view class="coupon-empty" v-if="isCouponEmpty">
+                                    <image
+                                        class="empty-container-image"
+                                        :src="StaticUrl + '/icon/icon-coupon-empty@2x.png'"
+                                    ></image>
+                                    <text class="error-text">暂无可领的优惠券~</text>
+                                </view>
+                                <template v-else>
+                                    <view
+                                        v-for="(coupon, index) in productCouponList"
+                                        :key="index"
+                                        :id="coupon.couponId"
+                                        class="coupon-list"
+                                    >
+                                        <view class="list-cell-le">
+                                            <view class="coupon-maxMoney"
+                                                ><text class="small">￥</text>{{ coupon.couponAmount }}</view
+                                            >
+                                            <view class="coupon-minMoney">满{{ coupon.touchPrice }}可用</view>
+                                        </view>
+                                        <view class="list-cell-ri">
+                                            <view class="list-cell-top">
+                                                <view class="list-cell-type">
+                                                    <view class="list-cell-tags">
+                                                        <text class="tags">{{ coupon.couponType | TypeFormat }}</text>
+                                                    </view>
+                                                    <view class="list-cell-texts">
+                                                        <text v-if="coupon.couponType == 0">
+                                                            {{
+                                                                coupon.productType && coupon.productType == 1
+                                                                    ? '全商城商品通用'
+                                                                    : '仅可购买指定商品'
+                                                            }}
+                                                        </text>
+                                                        <text v-if="coupon.couponType == 1">
+                                                            {{
+                                                                coupon.categoryType == 1
+                                                                    ? '仅限购买产品类商品'
+                                                                    : '仅限购买仪器类商品'
+                                                            }}
+                                                        </text>
+                                                        <text v-if="coupon.couponType == 3"
+                                                            >仅限购买店铺【{{ coupon.shopName }}】的商品</text
+                                                        >
+                                                        <text v-if="coupon.couponType == 4 || coupon.couponType == 2"
+                                                            >全商城商品通用</text
+                                                        >
+                                                    </view>
+                                                </view>
+                                                <view class="list-cell-btn">
+                                                    <view class="icon-used">
+                                                        <view
+                                                            class="icon-used-btn receive"
+                                                            v-if="currentTab == 0"
+                                                            @click="receiveCoupon(coupon)"
+                                                            >领取</view
+                                                        >
+                                                        <view class="icon-used-btn make" v-if="currentTab == 1"
+                                                            >已领取</view
+                                                        >
+                                                    </view>
+                                                </view>
+                                            </view>
+                                            <view class="list-cell-time"
+                                                >{{ coupon.startDate }} - {{ coupon.endDate }}</view
+                                            >
+                                        </view>
+                                    </view>
+                                </template>
+                            </scroll-view>
+                        </div>
+                    </view>
+                </tui-bottom-popup>
+                <!-- 培训方案 -->
+                <tui-bottom-popup :radius="true" :show="popupShow1" @close="hidePopup(1)">
+                    <view class="tui-popup-box clearfix">
+                        <view class="title">培训方案</view>
+                        <div class="tui-popup-main">
+                            <scroll-view class="tui-popup-scroll train" scroll-y="true">
+                                <view class="content-tr">
+                                    <view class="content-td">培训方式：</view>
+                                    <view class="content-th">{{
+                                        product.trainingMethod == 1 ? '线上培训' : '线下培训'
+                                    }}</view>
+                                </view>
+                                <view class="content-tr">
+                                    <view class="content-td">培训费用：</view>
+                                    <view class="content-th">{{
+                                        product.trainingType == 1 ? '￥' + product.trainingFee : '售价已包含'
+                                    }}</view>
+                                </view>
+                            </scroll-view>
+                        </div>
+                        <view
+                            class="tui-right-flex tui-popup-btn"
+                            :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }"
+                        >
+                            <view class="tui-flex-1"> <view class="tui-button" @click="hidePopup(1)">收起</view> </view>
+                        </view>
+                    </view>
+                </tui-bottom-popup>
+                <!-- 底部按钮 -->
+                <view class="menu" v-if="isShowButton">
+                    <view class="bottom-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
+                        <view class="bottom-le">
+                            <view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/home/index')">
+                                <image src="../../static/icon-home-active@3x.png"></image> <text>首页</text>
+                            </view>
+                            <button class="item-bt" open-type="contact" @click="handleContact">
+                                <image src="../../static/severs@3x.png"></image> <text>客服</text>
+                            </button>
+                            <view class="item-bt" @click="buyProductCart()">
+                                <image src="https://static.caimei365.com/app/img/icon/icon-cart-active@3x.png"></image>
+                                <text>购物车</text>
+                                <text
+                                    v-if="hasLogin && bottomCartNumber > 0"
+                                    class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
+                                    :class="[bottomCartNumber < 10 ? 'goleft' : '']"
+                                >
+                                    {{ bottomCartNumber >= 100 ? '99+' : bottomCartNumber }}
+                                </text>
+                                <view class="animation-num" :class="isAnimation ? 'animation' : 'restion'">+1</view>
+                            </view>
+                        </view>
+                        <view class="bottom-ri">
+                            <button
+                                :disabled="goodsData.disabled"
+                                class="btn btn-cart"
+                                :class="[goodsData.disabled ? 'disabled' : '']"
+                                @tap.stop="btnGetConfirm('add')"
+                            >
+                                加入购物车
+                            </button>
+                            <button
+                                :disabled="goodsData.disabled"
+                                class="btn btn-bay"
+                                :class="[goodsData.disabled ? 'disabled' : '']"
+                                @tap.stop="btnGetConfirm('buy')"
+                            >
+                                立即购买
+                            </button>
+                        </view>
+                    </view>
+                </view>
+                <!--底部选择模态层弹窗组件 -->
+                <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
+                    <!-- 遮罩层 -->
+                    <view class="mask"></view>
+                    <view
+                        class="layer"
+                        @tap.stop="discard"
+                        :style="{
+                            paddingBottom: isIphoneX ? '68rpx' : '36rpx',
+                            bottom: isIphoneX ? '-352rpx' : '-296rpx'
+                        }"
+                    >
+                        <view class="content">
+                            <view class="layer-smimg"> <image :src="product.mainImage" mode=""></image> </view>
+                            <view class="layer-nunbox">
+                                <view class="layer-nunbox-t" v-if="product.step === 2">
+                                    <view class="text">*该商品只能以起订量的整数倍购买</view>
+                                </view>
+                                <view class="layer-nunbox-t">
+                                    <view class="layer-nunbox-text">数量:</view>
+                                    <view class="number-box">
+                                        <view
+                                            class="iconfont icon-jianhao"
+                                            :class="[isQuantity == true ? 'disabled' : '']"
+                                            @click="changeCountSub()"
+                                        ></view>
+                                        <input
+                                            class="btn-input"
+                                            type="number"
+                                            v-model="number"
+                                            maxlength="4"
+                                            @blur="changeNumber($event)"
+                                        />
+                                        <view
+                                            class="iconfont icon-jiahao"
+                                            :class="[isStock == true ? 'disabled' : '']"
+                                            @click="changeCountAdd()"
+                                        ></view>
+                                    </view>
+                                </view>
+                                <view class="layer-nunbox-b">
+                                    <view class="text"
+                                        >单价: <text class="p sm">￥</text>
+                                        <text class="p bg">{{ buyRetailPrice.toFixed(2) }}</text>
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+                        <view class="btn"><view class="button" @click.stop="btnConfirm">确定</view></view>
+                    </view>
+                </view>
+                <!-- 侧边 -->
+                <scroll-top :isScrollTop="isScrollTop" :bottom="200" v-show="tabCurrentIndex !== 3"></scroll-top>
+            </view>
+        </template>
+    </view>
 </template>
 
 <script>
-	import { mapState,mapMutations } from 'vuex'
-	import customP from '@/components/cm-module/headerNavbar/header-poduct' 		 //自定义导航
-	import cmPrice from "@/components/cm-module/productDetails/cm-price.vue" //价格显示
-	import cmAttributes from "@/components/cm-module/productDetails/cm-attributes.vue" //规格信息
-	import parser from "@/components/jyf-Parser/index" //富文本处理
-	import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
-	import recommend from "@/components/cm-module/productDetails/recommend" //相关推荐
-	import cmParameter from "@/components/cm-module/productDetails/cm-parameter" //相关参数
-	import cmService from "@/components/cm-module/productDetails/cm-service" //服务项目
-	import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
-	import authorize from '@/common/config/authorize.js'
-	import wxLogin from "@/common/config/wxLogin.js"
-	import { debounce } from '@/common/config/common.js'
-	var isPreviewImg;
-	export default{
-		components:{
-			customP,
-			parser,
-			tuiSkeleton,
-			recommend,
-			cmPrice,
-			cmAttributes,
-			cmParameter,
-			cmService,
-			couponTabs
-		},
-		data(){
-			return{			
-				StaticUrl:this.$Static, //静态图片路径
-				clickPath:'/pages/search/search',
-				html:'<div style="text-align: center;color:#333333;">暂无内容</div>',
-				productNoneImage:'https://static.caimei365.com/app/img/icon/icon-pnone.png',
-				mode:'round',
-				iconClass:'icon-aixin',
-				iconColor:'#ff9100',
-				specClass: '',								// 规格弹窗css类，控制开关动画
-				isBtnType:'',
-				isRequest:false,
-				isScrollTop:false,
-				current:0,
-				shopId:0,
-				isShareType:'',
-				isHeaderPoduct:false,
-				isNavbarFiexd:false,
-				navbarFiexd:'none',
-				ladderPriceFlag:'',
-				ladderPriceList:'',
-				isInvalid:false,
-				isEvaluate:false,
-				isAnimation:false,
-				skeletonShow:true,
-				isQuantity:false,
-				isStock:false,
-				disabled:false,
-				isNoneDisabled:false,
-				tabCurrentIndex:0,
-				userId:'',
-				shopID:'',
-				productId:0,
-				userIdentity:0,								// 用户类型
-				goodsData:{},								// 自定义数据
-				shop:{},//供应商信息
-				product:{},//采美
-				productImage:[],
-				retailPrice:0,
-				buyRetailPrice:0,
-				buyRetailPriceStep:1,
-				stock:0,
-				number:0,
-				minBuyNumber:0,
-				productsList:[],
-				goodListData:[],
-				productCoupon:[], 							// 优惠券
-				productCouponList:[],						// 优惠券弹窗列表
-				headerBtnPosi:	this.setHeaderBtnPosi(), 	// 获取设备顶部胶囊高度
-				systeminfo: this.setSysteminfo(),		 	// 获取设备信息
-				isIphoneX:this.$store.state.isIphoneX,
-				windowHeight: '',
-				headerColor:false,
-				backPage:1,
-				nvabarData: {							 	// 顶部自定义导航
-					showCapsule: 1, 						// 是否显示左上角图标   1表示显示    0表示不显示
-					title: ''								// 导航栏 中间的标题
-				},
-				linkPath:'',
-				CustomBar:this.CustomBar,					// 顶部导航栏高度
-				popupShow0:false,							// 参数弹窗
-				popupShow1:false,							// 培训方案
-				popupShow2:false,							// 优惠券
-				tabSelectFlag:false,
-				sectionPropsArr: [],
-				scrollTopArray:[],
-				sectionTopRangeArr: [],
-				winHeight:'',
-				isShowButton:true,
-				isNoneSupplier:false,
-				isCouponEmpty:false,
-				currentTab: 0,
-				couponParam:{								// 获取弹窗优惠券领取参数
-					userId:0,
-					productId:0,
-					status:1,
-					source:2
-				},
-				bottomCartNumber:0,
-				navbar: [
-					{ name: "未领取",num:0 }, 
-					{ name: "已领取",num:0 } 
-				]
-			}
-		},
-		computed: {
-			...mapState(['hasLogin','isWxAuthorize','identity'])
-		},
-		filters: {
-			TypeFormat(value) {
-				switch (value) {
-					case 0:
-						return  '活动券';
-						break;
-					case 1:
-						return  '品类券';
-						break;
-					case 2:
-						return  '用户专享券';
-						break;
-					case 3:
-						return  '店铺券';
-						break;
-					case 4:
-						return  '新用户券';
-						break;
-				}
-			},
-		},
-		onLoad(option) {
-			this.productId = this.couponParam.productId = option.id;//获取商品ID
-			this.isShareType = option.type
-			this.linkPath = option.path
-			this.isHeaderPoduct = true
-			if(option.page == 2){
-				this.backPage = option.page
-			}
-			if(this.isShareType =='share'){
-				wxLogin.wxLoginAuthorize()
-			}
-			this.getWinHeight()
-		},
-		methods:{
-			initData(){// 初始化商品详情查询
-				this.ProductService.QueryProductDetils(
-					{
-						userId:this.userId,
-						productId:this.productId,
-						identity:this.identity,
-					}
-				)
-				.then(response =>{
-					this.skeletonShow = false
-					this.productImage=[];
-					this.shop = response.data.shop
-					this.shopId = response.data.shopID
-					this.product = response.data
-					//已删除/已冻结
-					if(this.product.validFlag === 0 || this.product.validFlag ==10){
-						this.isInvalid = true
-					}else if(this.product.validFlag === 9){
-						if(this.userIdentity == 1){
-							this.isInvalid = false
-						}else{
-							this.isInvalid = true
-						}
-					}
-					this.ladderPriceFlag = this.product.ladderPriceFlag;
-					this.html = this.product.productDetail == null ? this.html : this.$api.adaptRichTextImg(this.product.productDetail.detailInfo)
-					this.stock = this.product.stock
-					this.buyRetailPriceStep = this.product.step
-					this.number = this.product.minBuyNumber
-					this.minBuyNumber = this.product.minBuyNumber					
-					//处理商品图片列表
-					this.product.imageList.forEach(item =>{
-						this.productImage.push(item.image);
-					})
-					//处理阶梯价格
-					if(this.product.ladderPriceList!=null){
-						this.ladderPriceList = this.product.ladderPriceList;
-					}
-					//拆分金额并转千分位格式显示
-					if(this.product.price!=null){
-						this.retailPrice = this.product.price.toFixed(2);
-						this.buyRetailPrice = this.product.price;
-					}
-					
-					//处理下架商品和售罄商品
-					if(this.product.validFlag ==3 || this.stock == 0){
-						this.isNoneDisabled = true
-						this.disabled = true
-					}else{
-						this.disabled = false
-						this.isNoneDisabled = false
-						this.goodsData.disabledText = ''
-					}
-					if(this.product.priceFlag == 1){
-						this.disabled = true
-					}else if(this.product.priceFlag == 2){
-						if(this.userIdentity == 4){
-							this.disabled = true
-						}else{
-							this.disabled = false
-						}
-					}else{
-						this.disabled = false
-					}
-					this.goodsData.disabled = this.disabled
-					this.goodsData.isNoneDisabled = this.isNoneDisabled
-					if(this.product.validFlag ==3){
-						this.goodsData.disabledText = '下架'
-					}
-					if(this.product.validFlag ==10){
-						this.goodsData.disabledText = '停售'
-					}
-					if(this.stock == 0){
-						this.goodsData.disabledText = '售罄'
-					}
-					console.log(this.disabled);
-					setTimeout(()=>{
-						this.getSectionProps();
-					},2000)
-					this.shoppingHeaderCartNumber()
-					this.queryProductDetilsCoupons()
-					this.isRequest = true
-				})
-				.catch(error =>{
-					this.$util.msg(error.msg,2000);
-				})
-			},
-			queryProductDetilsCoupons(){// 初始化商品详情优惠券信息
-				this.ProductService.QueryProductDetilsCoupons(this.couponParam).then(response =>{
-					this.productCoupon = response.data.list
-				})
-				.catch(error =>{
-					console.log('获取优惠券列表失败')
-				})
-			},
-			queryPopupCoupons(){// 获取弹窗优惠券列表
-				this.ProductService.QueryProductDetilsCoupons(this.couponParam).then(response =>{
-					let data = response.data
-					this.navbar[0].num = data.notCouponNum
-					this.navbar[1].num = data.couponNum
-					if(data.couponList && data.couponList.length >0){
-						this.productCouponList = data.couponList
-						this.isCouponEmpty = false
-					}else{
-						this.isCouponEmpty = true
-					}
-				})
-				.catch(error =>{
-					console.log('获取优惠券列表失败')
-				})
-			},
-			shoppingHeaderCartNumber(){// 获取用户购物车储量
-				this.ProductService.shoppingHeaderCartNumber({userId:this.userId}).then(response =>{
-					this.bottomCartNumber = response.data.length;
-				})
-				.catch(error =>{
-					console.log('获取购物车数量失败')
-				})
-			},
-			receiveCoupon(coupon){// 点击优惠券领取按钮
-				this.ProductService.ReceiveCoupon(
-					{
-						userId:this.couponParam.userId,
-						couponId:coupon.couponId,
-						source:2
-					}
-				) 
-				.then(response =>{
-					this.$util.msg('领取成功',1500,true,'success')
-					setTimeout(()=>{
-						this.currentTab = 1
-						this.couponParam.status = 2
-						this.queryPopupCoupons()
-					},1500)
-				})
-				.catch(error =>{
-					this.$util.msg(error.msg,2000);
-				})
-			},
-			swiperChange(e) {//顶部商品图片切换
-				const index = e.detail.current;
-				this.current = index;
-			},
-			previewImg (index) {//顶部商品图片预览
-				isPreviewImg = true
-				let previewUrls = this.productImage
-				uni.previewImage({
-					current: index, 	//图片索引
-					urls: previewUrls, //必须是http图片，本地图片无效
-					longPressActions:''
-				})
-			},
-			tabClick(index) {//商品详情&&供应商信息tab切换
-				this.tabSelectFlag = true
-				this.tabCurrentIndex = index;
-				let classIndex = '.product-details'+index;
-				uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
-				　　uni.createSelectorQuery().select(classIndex).boundingClientRect((res)=>{//最外层盒子节点
-				　　　　uni.pageScrollTo({
-				　　　　　　duration:300,//过渡时间必须为0，uniapp bug，否则运行到手机会报错
-				　　　　　　scrollTop:res.top - data.top - 150,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
-				　　　　})
-						setTimeout(()=>{
-							this.tabSelectFlag = false;
-						},500)
-				　　}).exec()
-				}).exec()
-			},
-			handleContact(e){//跳转小程序客服
-				console.log(e.detail.path)
-				console.log(e.detail.query)
-			},
-			buyProductCart(){//底部购物车按钮点击
-				if(this.hasLogin){
-					// 友盟埋点商品详情购物车入口点击事件
-					if(process.env.NODE_ENV != 'development'){
-						this.$uma.trackEvent('Um_Event_ProductShoppingCart', {
-							Um_Key_PageName: '去购物车',
-							Um_Key_SourcePage: '商品详情购物车入口',
-						})
-					}		
-					// this.$api.navigateTo('/pages/goods/cart')
-					this.$api.navigateTo('/pages/goods/cart-index')
-				}else{
-					this.$api.navigateTo('/pages/login/login?type=1')
-				}
-			},
-			btnGetConfirm(type){//加入购物车&&立即购买点击
-				if(this.hasLogin){
-					switch(type){
-						case 'add':
-							// 友盟埋点商品详情加入购物车点击事件
-							if(process.env.NODE_ENV != 'development'){
-								this.$uma.trackEvent('Um_Event_ProductAddCart', {
-									Um_Key_PageName: '加入购物车',
-									Um_Key_SourcePage: '商品详情',
-									Um_Key_ProductID:`${this.product.productId}`
-								})
-							}
-							break;
-						case 'buy':
-							// 友盟埋点商品详情立即购买点击事件
-							if(process.env.NODE_ENV != 'development'){
-								this.$uma.trackEvent('Um_Event_ProductBuyConfirm', {
-									Um_Key_PageName: '立即购买',
-									Um_Key_SourcePage: '商品详情',
-									Um_Key_ProductID:`${this.product.productId}`
-								})
-							}
-							break;
-					}
-					this.showSpec(type);
-				}else{
-					this.$api.navigateTo('/pages/login/login?type=1')
-				}
-			},	
-			changeCountAdd(){//popup弹窗数量增加按钮
-				if(this.buyRetailPriceStep == 2){
-					this.number+=this.minBuyNumber
-				}else{
-					this.number++
-				}
-				this.processActivityPrice()
-			},
-			changeCountSub(){//popup弹窗数量减按钮
-				if(this.number<=this.minBuyNumber){
-					this.number= this.minBuyNumber
-					this.isQuantity =true
-					this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
-					return
-				}else{
-					if(this.buyRetailPriceStep == 2){
-						this.number-=this.minBuyNumber
-					}else{
-						this.number--
-					}
-					this.processActivityPrice()
-					this.isQuantity =false
-				}
-			 },
-			changeNumber(e){
-				let _value = e.detail.value;
-				if(!this.$api.isNumber(_value)){
-					this.number = this.minBuyNumber
-				}else if(_value < this.minBuyNumber){	
-					this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
-					this.number = this.minBuyNumber
-				}else if( _value % this.minBuyNumber !=0 ){
-					this.$util.msg(`购买量必须为起订量的整数倍`,2000);
-					this.number = this.minBuyNumber
-				}else{
-					this.number = e.detail.value
-				}
-				this.processActivityPrice()
-			},
-			processActivityPrice(){//单独处理活动价格和阶梯价格
-				if(this.ladderPriceFlag == '0' && this.product.actStatus == 0 || this.product.actStatus == 1){
-					this.buyRetailPrice = this.product.price
-				}else{
-					this.ladderPriceList.forEach((item,index)=>{
-						if(this.number>=item.buyNum){
-							this.buyRetailPrice = item.buyPrice
-						}
-					})
-				}
-			},
-			showSpec(type) {//显示选择数量确认弹窗
-				this.isBtnType = type
-				this.specClass = 'show';
-				if (this.ladderPriceFlag) {
-					this.processActivityPrice()
-				}
-			},
-			hideSpec() {//关闭选择数量确认弹窗
-				this.specClass = 'hide';
-				setTimeout(() => {
-					this.specClass = 'none';
-				}, 200);
-			},
-			btnConfirm() {//加入购物车&&立即购买跳转订单页并关闭弹窗
-				// 友盟埋点商品详情确认购买商品点击事件
-				if(process.env.NODE_ENV != 'development'){
-					this.$uma.trackEvent('Um_Event_ProductShoppingConfirm', {
-						Um_Key_PageName: '商品购买确认',
-						Um_Key_SourcePage: '商品详情',
-						Um_Key_ProductID:`${this.product.productId}`
-					})
-				}
-				if(this.isBtnType == 'add'){				
-					this.getAddProductCart()				
-				}else{
-					this.toConfirmation()
-				}
-			},
-			toConfirmation(){//跳转确认订单页面
-				this.specClass = 'hide';
-				let productStp ={
-						allPrice:this.number*this.buyRetailPrice,
-						allCount:this.number,
-						productID:this.product.productId,
-						productCount:this.number
-				}	
-				this.$api.navigateTo(`/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({data:productStp})}`)
-				setTimeout(() => {
-					this.specClass = 'none';
-				}, 200);
-			},
-			getAddProductCart(){//增加购物车成功和toast弹窗提示成功	
-				this.ProductService.shoppingAddCart({productID:this.productId,userID:this.userId,productCount:this.number}).then(response => {
-					this.specClass = 'hide';
-					this.$util.msg('加入购物车成功',1500,true,'success')
-					this.isAnimation = true
-					setTimeout(() => {this.specClass = 'none'}, 200)
-					setTimeout(() => {this.isAnimation = false},2000)
-					this.bottomCartNumber = response.data;
-				}).catch(error =>{
-					this.$util.msg(error.msg,2000);
-				})
-			},
-			setHeaderBtnPosi(){
-				// 获得胶囊按钮位置信息
-				let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
-				return headerBtnPosi
-			},
-			setSysteminfo(){
-				let systeminfo;
-				uni.getSystemInfo({ // 获取设备信息
-					success: (res) => {
-						systeminfo = res
-					},
-				})
-				return systeminfo
-			},
-			goIndex(){//商城首页
-				uni.switchTab({
-				    url: '/pages/tabBar/home/index'
-				});
-			},
-			goSupplier(){//跳供应商资料页
-				this.$api.navigateTo('/pages/supplier/user/my-shop?shopId='+this.shopId)
-			},
-			discard(){
-				//丢弃
-			},
-			onShare(res){//分享转发
-				if (res.from === 'button') {
-			      // 来自页面内转发按钮
-			    }
-				return {
-				  title: `${this.product.name}`,
-				  path: `pages/goods/product?type=share&id=${this.productId}`,
-				  imageUrl:`${this.productImage[0]}`
-				}
-			},
-			showPopup(index){
-				switch(index){
-					case 0:
-						this.popupShow0 = true
-						break;
-					case 1:
-						this.popupShow1 = true
-						break;
-					case 2:
-						if(this.hasLogin){
-							this.queryPopupCoupons()
-							this.popupShow2 = true
-						}else{
-							this.$api.navigateTo('/pages/login/login')
-						}
-						break;
-				}
-			},
-			hidePopup(index){
-				switch(index){
-					case 0:
-						this.popupShow0 = false
-						break;
-					case 1:
-						this.popupShow1 = false
-						break;
-					case 2:
-						this.popupShow2 = false
-						break;
-				}
-			},
-			couponChange(e) {
-				this.currentTab = e.index
-				switch(this.currentTab){
-					case 0:
-						this.couponParam.status = 1
-						this.queryPopupCoupons()
-						break;
-					case 1:
-						this.couponParam.status = 2
-						this.queryPopupCoupons()
-						break;
-				}
-			},
-			getSectionProps() {//获取每个tab对应区域的scrollTop值
-				let className = '.product-details',
-					sectionPropsArr = [];
-				uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
-				　　uni.createSelectorQuery().selectAll(className).boundingClientRect((res)=>{//最外层盒子节点
-						res.forEach((item, index) => {
-							sectionPropsArr.push({
-								className: `${className}${index}`,
-								scrollTop: item.top - data.top - 150
-							})
-						})
-						this.sectionPropsArr = sectionPropsArr;
-						this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr);
-				　　}).exec()
-				}).exec()
-			},
-			getSectionRange(arr) {// 获取每个tab对应区域的区间
-				let sectionScrollTopList = [];
-				for(let i = 0; i < arr.length; i++) {
-					let thisScrollTop = arr[i].scrollTop;
-					if(i < arr.length - 1) {
-						let nextScrollTop = arr[i+1].scrollTop;
-						if(i == 0) {
-							sectionScrollTopList.push(`0-${thisScrollTop}`);
-						} else if(i == arr.length - 1){
-							sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop - this.winHeight}`);
-						} else {
-							sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop}`);
-						}
-					} else {
-						sectionScrollTopList.push(`${thisScrollTop}-${thisScrollTop+500}`);
-					}
-				}
-				return sectionScrollTopList;
-			},
-			activeTab: debounce((top, _this)=> {//当滑动时也能同步激活tab
-				const { sectionTopRangeArr } = _this;
-				if(sectionTopRangeArr.length > 0) {
-					sectionTopRangeArr.forEach((item, index) => {
-						let splitItem = item.split('-'),
-							openInterval = Number(splitItem[0]),
-							closedInterval = Number(splitItem[1]);
-						if(top >= openInterval && top < closedInterval) {
-							_this.tabCurrentIndex = index;
-						}
-					})
-				}
-			},100, true),
-			getWinHeight() {
-				this.winHeight = wx.getSystemInfoSync().windowHeight;
-			},
-		},
-		onPageScroll(e){//实时获取到滚动的值
-			const { scrollTop } = e;
-			if(!this.tabSelectFlag) {
-				this.activeTab(scrollTop, this);
-			}
-			if(e.scrollTop>60){
-				this.headerColor = true
-				this.navbarFiexd = 'fixed'
-				this.isNavbarFiexd = true
-				this.nvabarData={							
-					showCapsule: 1, 
-					title: '商品详情', 		
-				}
-			}else{
-				this.headerColor = false
-				this.isNavbarFiexd = false
-				this.navbarFiexd = 'none'
-				this.nvabarData={
-					showCapsule: 1, 
-					title: '', 		
-				}
-			}
-			if(e.scrollTop>700){
-				this.isScrollTop = true
-			}else{
-				this.isScrollTop = false
-			}
-		},
-		onShareAppMessage(res){//分享转发
-			if (res.from === 'button') {
-		      // 来自页面内转发按钮
-		    }
-			return {
-			  title: `${this.product.name}`,
-			  path: `pages/goods/product?type=share&id=${this.productId}`,
-			  imageUrl:`${this.productImage[0]}`
-			}
-		},
-		onShow() {
-			this.$api.getStorage().then((resolve) => {
-				this.userId = this.couponParam.userId = resolve.userId ? resolve.userId : '';
-				this.userIdentity = resolve.userIdentity ? resolve.userIdentity : 0
-				this.shopID =  resolve.shopId ? resolve.shopId : '';
-				if(this.userIdentity == 0 || this.userIdentity == 2 || this.userIdentity == 4){
-					this.isShowButton = true
-				}else{
-					this.isShowButton = false
-				}					
-				if (isPreviewImg) {
-					isPreviewImg = false;
-					return;
-				} else {
-					this.initData();
-				}
-			}).catch(error =>{
-				this.initData();
-			})
-		}
-	}
+import { mapState, mapMutations } from 'vuex'
+import customP from '@/components/cm-module/headerNavbar/header-poduct' //自定义导航
+import cmPrice from '@/components/cm-module/productDetails/cm-price.vue' //价格显示
+import cmAttributes from '@/components/cm-module/productDetails/cm-attributes.vue' //规格信息
+import parser from '@/components/jyf-Parser/index' //富文本处理
+import tuiSkeleton from '@/components/tui-skeleton/tui-skeleton'
+import recommend from '@/components/cm-module/productDetails/recommend' //相关推荐
+import cmParameter from '@/components/cm-module/productDetails/cm-parameter' //相关参数
+import cmService from '@/components/cm-module/productDetails/cm-service' //服务项目
+import cmProductDoc from '@/components/cm-module/productDetails/cm-product-doc.vue'
+import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
+import authorize from '@/common/config/authorize.js'
+import wxLogin from '@/common/config/wxLogin.js'
+import { debounce } from '@/common/config/common.js'
+var isPreviewImg
+export default {
+    components: {
+        customP,
+        parser,
+        tuiSkeleton,
+        recommend,
+        cmPrice,
+        cmAttributes,
+        cmParameter,
+        cmService,
+        couponTabs,
+        cmProductDoc
+    },
+    data() {
+        return {
+            StaticUrl: this.$Static, //静态图片路径
+            clickPath: '/pages/search/search',
+            html: '<div style="text-align: center;color:#333333;">暂无内容</div>',
+            productNoneImage: 'https://static.caimei365.com/app/img/icon/icon-pnone.png',
+            mode: 'round',
+            iconClass: 'icon-aixin',
+            iconColor: '#ff9100',
+            specClass: '', // 规格弹窗css类，控制开关动画
+            isBtnType: '',
+            isRequest: false,
+            isScrollTop: false,
+            current: 0,
+            shopId: 0,
+            isShareType: '',
+            isHeaderPoduct: false,
+            isNavbarFiexd: false,
+            navbarFiexd: 'none',
+            ladderPriceFlag: '',
+            ladderPriceList: '',
+            isInvalid: false,
+            isEvaluate: false,
+            isAnimation: false,
+            skeletonShow: true,
+            isQuantity: false,
+            isStock: false,
+            disabled: false,
+            isNoneDisabled: false,
+            tabCurrentIndex: 0,
+            userId: '',
+            shopID: '',
+            productId: 0,
+            userIdentity: 0, // 用户类型
+            goodsData: {}, // 自定义数据
+            shop: {}, //供应商信息
+            product: {}, //采美
+            productImage: [],
+            retailPrice: 0,
+            buyRetailPrice: 0,
+            buyRetailPriceStep: 1,
+            stock: 0,
+            number: 0,
+            minBuyNumber: 0,
+            productsList: [],
+            goodListData: [],
+            productCoupon: [], // 优惠券
+            productCouponList: [], // 优惠券弹窗列表
+            headerBtnPosi: this.setHeaderBtnPosi(), // 获取设备顶部胶囊高度
+            systeminfo: this.setSysteminfo(), // 获取设备信息
+            isIphoneX: this.$store.state.isIphoneX,
+            windowHeight: '',
+            headerColor: false,
+            backPage: 1,
+            nvabarData: {
+                // 顶部自定义导航
+                showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
+                title: '' // 导航栏 中间的标题
+            },
+            linkPath: '',
+            CustomBar: this.CustomBar, // 顶部导航栏高度
+            popupShow0: false, // 参数弹窗
+            popupShow1: false, // 培训方案
+            popupShow2: false, // 优惠券
+            tabSelectFlag: false,
+            sectionPropsArr: [],
+            scrollTopArray: [],
+            winHeight: '',
+            isShowButton: true,
+            isNoneSupplier: false,
+            isCouponEmpty: false,
+            currentTab: 0,
+            couponParam: {
+                // 获取弹窗优惠券领取参数
+                userId: 0,
+                productId: 0,
+                status: 1,
+                source: 2
+            },
+            bottomCartNumber: 0,
+            navbar: [{ name: '未领取', num: 0 }, { name: '已领取', num: 0 }],
+        }
+    },
+    computed: {
+        ...mapState(['hasLogin', 'isWxAuthorize', 'identity'])
+    },
+    filters: {
+        TypeFormat(value) {
+            switch (value) {
+                case 0:
+                    return '活动券'
+                    break
+                case 1:
+                    return '品类券'
+                    break
+                case 2:
+                    return '用户专享券'
+                    break
+                case 3:
+                    return '店铺券'
+                    break
+                case 4:
+                    return '新用户券'
+                    break
+            }
+        }
+    },
+    watch: {
+        isNavbarFiexd(val) {
+            if (!this.isRequest || !val) return
+            let timer = null
+            clearTimeout(timer)
+            timer = setTimeout(() => {
+                if (this.sectionPropsArr.length > 0) return
+                this.getSectionProps()
+            }, 200)
+        }
+    },
+    onLoad(option) {
+        this.productId = this.couponParam.productId = option.id //获取商品ID
+        this.isShareType = option.type
+        this.linkPath = option.path
+        this.isHeaderPoduct = true
+        if (option.page == 2) {
+            this.backPage = option.page
+        }
+        if (this.isShareType == 'share') {
+            wxLogin.wxLoginAuthorize()
+        }
+        this.getWinHeight()
+    },
+    methods: {
+        initData() {
+            // 初始化商品详情查询
+            this.ProductService.QueryProductDetils({
+                userId: this.userId,
+                productId: this.productId,
+                identity: this.identity
+            })
+                .then(response => {
+                    this.skeletonShow = false
+                    this.productImage = []
+                    this.shop = response.data.shop
+                    this.shopId = response.data.shopID
+                    this.product = response.data
+                    //已删除/已冻结
+                    if (this.product.validFlag === 0 || this.product.validFlag == 10) {
+                        this.isInvalid = true
+                    } else if (this.product.validFlag === 9) {
+                        if (this.userIdentity == 1) {
+                            this.isInvalid = false
+                        } else {
+                            this.isInvalid = true
+                        }
+                    }
+                    this.ladderPriceFlag = this.product.ladderPriceFlag
+                    this.html =
+                        this.product.productDetail == null
+                            ? this.html
+                            : this.$api.adaptRichTextImg(this.product.productDetail.detailInfo)
+                    this.stock = this.product.stock
+                    this.buyRetailPriceStep = this.product.step
+                    this.number = this.product.minBuyNumber
+                    this.minBuyNumber = this.product.minBuyNumber
+                    //处理商品图片列表
+                    this.product.imageList.forEach(item => {
+                        this.productImage.push(item.image)
+                    })
+                    //处理阶梯价格
+                    if (this.product.ladderPriceList != null) {
+                        this.ladderPriceList = this.product.ladderPriceList
+                    }
+                    //拆分金额并转千分位格式显示
+                    if (this.product.price != null) {
+                        this.retailPrice = this.product.price.toFixed(2)
+                        this.buyRetailPrice = this.product.price
+                    }
+
+                    //处理下架商品和售罄商品
+                    if (this.product.validFlag == 3 || this.stock == 0) {
+                        this.isNoneDisabled = true
+                        this.disabled = true
+                    } else {
+                        this.disabled = false
+                        this.isNoneDisabled = false
+                        this.goodsData.disabledText = ''
+                    }
+                    if (this.product.priceFlag == 1) {
+                        this.disabled = true
+                    } else if (this.product.priceFlag == 2) {
+                        if (this.userIdentity == 4) {
+                            this.disabled = true
+                        } else {
+                            this.disabled = false
+                        }
+                    } else {
+                        this.disabled = false
+                    }
+                    this.goodsData.disabled = this.disabled
+                    this.goodsData.isNoneDisabled = this.isNoneDisabled
+                    if (this.product.validFlag == 3) {
+                        this.goodsData.disabledText = '下架'
+                    }
+                    if (this.product.validFlag == 10) {
+                        this.goodsData.disabledText = '停售'
+                    }
+                    if (this.stock == 0) {
+                        this.goodsData.disabledText = '售罄'
+                    }
+                    console.log(this.disabled)
+                    // setTimeout(() => {
+                    //     this.getSectionProps()
+                    // }, 2000)
+                    this.shoppingHeaderCartNumber()
+                    this.queryProductDetilsCoupons()
+                    this.isRequest = true
+                })
+                .catch(error => {
+                    this.$util.msg(error.msg, 2000)
+                })
+        },
+        queryProductDetilsCoupons() {
+            // 初始化商品详情优惠券信息
+            this.ProductService.QueryProductDetilsCoupons(this.couponParam)
+                .then(response => {
+                    this.productCoupon = response.data.list
+                })
+                .catch(error => {
+                    console.log('获取优惠券列表失败')
+                })
+        },
+        queryPopupCoupons() {
+            // 获取弹窗优惠券列表
+            this.ProductService.QueryProductDetilsCoupons(this.couponParam)
+                .then(response => {
+                    let data = response.data
+                    this.navbar[0].num = data.notCouponNum
+                    this.navbar[1].num = data.couponNum
+                    if (data.couponList && data.couponList.length > 0) {
+                        this.productCouponList = data.couponList
+                        this.isCouponEmpty = false
+                    } else {
+                        this.isCouponEmpty = true
+                    }
+                })
+                .catch(error => {
+                    console.log('获取优惠券列表失败')
+                })
+        },
+        shoppingHeaderCartNumber() {
+            // 获取用户购物车储量
+            this.ProductService.shoppingHeaderCartNumber({ userId: this.userId })
+                .then(response => {
+                    this.bottomCartNumber = response.data.length
+                })
+                .catch(error => {
+                    console.log('获取购物车数量失败')
+                })
+        },
+        receiveCoupon(coupon) {
+            // 点击优惠券领取按钮
+            this.ProductService.ReceiveCoupon({
+                userId: this.couponParam.userId,
+                couponId: coupon.couponId,
+                source: 2
+            })
+                .then(response => {
+                    this.$util.msg('领取成功', 1500, true, 'success')
+                    setTimeout(() => {
+                        this.currentTab = 1
+                        this.couponParam.status = 2
+                        this.queryPopupCoupons()
+                    }, 1500)
+                })
+                .catch(error => {
+                    this.$util.msg(error.msg, 2000)
+                })
+        },
+        swiperChange(e) {
+            //顶部商品图片切换
+            const index = e.detail.current
+            this.current = index
+        },
+        previewImg(index) {
+            //顶部商品图片预览
+            isPreviewImg = true
+            let previewUrls = this.productImage
+            uni.previewImage({
+                current: index, //图片索引
+                urls: previewUrls, //必须是http图片，本地图片无效
+                longPressActions: ''
+            })
+        },
+        //商品详情&&供应商信息tab切换
+        tabClick(index) {
+            // 重新标记
+            this.getSectionProps()
+            this.tabCurrentIndex = index
+            this.tabSelectFlag = true
+            let timer = null
+            clearTimeout(timer)
+            // 点击tab 300ms才执行跳转，避免出错（来回跳动）
+            timer = setTimeout(() => {
+                this.tabClickAction(index)
+            }, 300)
+        },
+        // 跳转执行
+        tabClickAction(index) {
+            const that = this
+            if (index === 3) {
+                return uni.pageScrollTo({
+                    duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
+                    scrollTop: this.sectionPropsArr[0].scrollTop
+                })
+            }
+            uni.pageScrollTo({
+                duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
+                scrollTop: this.sectionPropsArr[index].scrollTop,
+                success() {
+                    setTimeout(() => {
+                        that.tabSelectFlag = false
+                    }, 300)
+                }
+            })
+        },
+        handleContact(e) {
+            //跳转小程序客服
+            console.log(e.detail.path)
+            console.log(e.detail.query)
+        },
+        buyProductCart() {
+            //底部购物车按钮点击
+            if (this.hasLogin) {
+                // 友盟埋点商品详情购物车入口点击事件
+                if (process.env.NODE_ENV != 'development') {
+                    this.$uma.trackEvent('Um_Event_ProductShoppingCart', {
+                        Um_Key_PageName: '去购物车',
+                        Um_Key_SourcePage: '商品详情购物车入口'
+                    })
+                }
+                // this.$api.navigateTo('/pages/goods/cart')
+                this.$api.navigateTo('/pages/goods/cart-index')
+            } else {
+                this.$api.navigateTo('/pages/login/login?type=1')
+            }
+        },
+        btnGetConfirm(type) {
+            //加入购物车&&立即购买点击
+            if (this.hasLogin) {
+                switch (type) {
+                    case 'add':
+                        // 友盟埋点商品详情加入购物车点击事件
+                        if (process.env.NODE_ENV != 'development') {
+                            this.$uma.trackEvent('Um_Event_ProductAddCart', {
+                                Um_Key_PageName: '加入购物车',
+                                Um_Key_SourcePage: '商品详情',
+                                Um_Key_ProductID: `${this.product.productId}`
+                            })
+                        }
+                        break
+                    case 'buy':
+                        // 友盟埋点商品详情立即购买点击事件
+                        if (process.env.NODE_ENV != 'development') {
+                            this.$uma.trackEvent('Um_Event_ProductBuyConfirm', {
+                                Um_Key_PageName: '立即购买',
+                                Um_Key_SourcePage: '商品详情',
+                                Um_Key_ProductID: `${this.product.productId}`
+                            })
+                        }
+                        break
+                }
+                this.showSpec(type)
+            } else {
+                this.$api.navigateTo('/pages/login/login?type=1')
+            }
+        },
+        //popup弹窗数量增加按钮
+        changeCountAdd() {
+            if (this.buyRetailPriceStep == 2) {
+                this.number += this.minBuyNumber
+            } else {
+                this.number++
+            }
+            this.processActivityPrice()
+        },
+        //popup弹窗数量减按钮
+        changeCountSub() {
+            if (this.number <= this.minBuyNumber) {
+                this.number = this.minBuyNumber
+                this.isQuantity = true
+                this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`, 2000)
+                return
+            } else {
+                if (this.buyRetailPriceStep == 2) {
+                    this.number -= this.minBuyNumber
+                } else {
+                    this.number--
+                }
+                this.processActivityPrice()
+                this.isQuantity = false
+            }
+        },
+        changeNumber(e) {
+            let _value = e.detail.value
+            if (!this.$api.isNumber(_value)) {
+                this.number = this.minBuyNumber
+            } else if (_value < this.minBuyNumber) {
+                this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`, 2000)
+                this.number = this.minBuyNumber
+            } else if (_value % this.minBuyNumber != 0) {
+                this.$util.msg('购买量必须为起订量的整数倍', 2000)
+                this.number = this.minBuyNumber
+            } else {
+                this.number = e.detail.value
+            }
+            this.processActivityPrice()
+        },
+        processActivityPrice() {
+            //单独处理活动价格和阶梯价格
+            if ((this.ladderPriceFlag == '0' && this.product.actStatus == 0) || this.product.actStatus == 1) {
+                this.buyRetailPrice = this.product.price
+            } else {
+                this.ladderPriceList.forEach((item, index) => {
+                    if (this.number >= item.buyNum) {
+                        this.buyRetailPrice = item.buyPrice
+                    }
+                })
+            }
+        },
+        showSpec(type) {
+            //显示选择数量确认弹窗
+            this.isBtnType = type
+            this.specClass = 'show'
+            if (this.ladderPriceFlag) {
+                this.processActivityPrice()
+            }
+        },
+        hideSpec() {
+            //关闭选择数量确认弹窗
+            this.specClass = 'hide'
+            setTimeout(() => {
+                this.specClass = 'none'
+            }, 200)
+        },
+        btnConfirm() {
+            //加入购物车&&立即购买跳转订单页并关闭弹窗
+            // 友盟埋点商品详情确认购买商品点击事件
+            if (process.env.NODE_ENV != 'development') {
+                this.$uma.trackEvent('Um_Event_ProductShoppingConfirm', {
+                    Um_Key_PageName: '商品购买确认',
+                    Um_Key_SourcePage: '商品详情',
+                    Um_Key_ProductID: `${this.product.productId}`
+                })
+            }
+            if (this.isBtnType == 'add') {
+                this.getAddProductCart()
+            } else {
+                this.toConfirmation()
+            }
+        },
+        toConfirmation() {
+            //跳转确认订单页面
+            this.specClass = 'hide'
+            let productStp = {
+                allPrice: this.number * this.buyRetailPrice,
+                allCount: this.number,
+                productID: this.product.productId,
+                productCount: this.number
+            }
+            this.$api.navigateTo(
+                `/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({ data: productStp })}`
+            )
+            setTimeout(() => {
+                this.specClass = 'none'
+            }, 200)
+        },
+        getAddProductCart() {
+            //增加购物车成功和toast弹窗提示成功
+            this.ProductService.shoppingAddCart({
+                productID: this.productId,
+                userID: this.userId,
+                productCount: this.number
+            })
+                .then(response => {
+                    this.specClass = 'hide'
+                    this.$util.msg('加入购物车成功', 1500, true, 'success')
+                    this.isAnimation = true
+                    setTimeout(() => {
+                        this.specClass = 'none'
+                    }, 200)
+                    setTimeout(() => {
+                        this.isAnimation = false
+                    }, 2000)
+                    this.bottomCartNumber = response.data
+                })
+                .catch(error => {
+                    this.$util.msg(error.msg, 2000)
+                })
+        },
+        setHeaderBtnPosi() {
+            // 获得胶囊按钮位置信息
+            let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
+            return headerBtnPosi
+        },
+        setSysteminfo() {
+            let systeminfo
+            uni.getSystemInfo({
+                // 获取设备信息
+                success: res => {
+                    systeminfo = res
+                }
+            })
+            return systeminfo
+        },
+        goIndex() {
+            //商城首页
+            uni.switchTab({
+                url: '/pages/tabBar/home/index'
+            })
+        },
+        goSupplier() {
+            //跳供应商资料页
+            this.$api.navigateTo('/pages/supplier/user/my-shop?shopId=' + this.shopId)
+        },
+        discard() {
+            //丢弃
+        },
+        onShare(res) {
+            //分享转发
+            if (res.from === 'button') {
+                // 来自页面内转发按钮
+            }
+            return {
+                title: `${this.product.name}`,
+                path: `pages/goods/product?type=share&id=${this.productId}`,
+                imageUrl: `${this.productImage[0]}`
+            }
+        },
+        showPopup(index) {
+            switch (index) {
+                case 0:
+                    this.popupShow0 = true
+                    break
+                case 1:
+                    this.popupShow1 = true
+                    break
+                case 2:
+                    if (this.hasLogin) {
+                        this.queryPopupCoupons()
+                        this.popupShow2 = true
+                    } else {
+                        this.$api.navigateTo('/pages/login/login')
+                    }
+                    break
+            }
+        },
+        hidePopup(index) {
+            switch (index) {
+                case 0:
+                    this.popupShow0 = false
+                    break
+                case 1:
+                    this.popupShow1 = false
+                    break
+                case 2:
+                    this.popupShow2 = false
+                    break
+            }
+        },
+        couponChange(e) {
+            this.currentTab = e.index
+            switch (this.currentTab) {
+                case 0:
+                    this.couponParam.status = 1
+                    this.queryPopupCoupons()
+                    break
+                case 1:
+                    this.couponParam.status = 2
+                    this.queryPopupCoupons()
+                    break
+            }
+        },
+        // 获取每个tab对应区域的区间
+        async getSectionProps() {
+            const sectionPropsArr = [],
+                scrollTopArray = [],
+                className = 'product-details'
+            
+            // 获取相关节点元素信息
+            const productMain = await this.$util.boundingClientRect(this, '.container-product-main', false)
+            const productDetail = await this.$util.boundingClientRect(this, '.product-details', true)
+            const topBar = await this.$util.boundingClientRect(this, '#topBar', false)
+
+            /*
+                说明：采用累加方式来计算每一个 prdocut-details 的 scrollTop 定位
+                     scrollTop = 上一个的scrollTop + 上一个的高度
+            */
+            productDetail.forEach((item, index) => {
+                // 上一个 prdocut-details 的 scrollTop 值
+                const prev = sectionPropsArr[index - 1]
+                const prevScrollTop = prev ? prev.scrollTop : productMain.height
+                // 上一个 prdocut-details 的高度
+                const add = productDetail[index - 1]
+                // 第一个需要减去tabs的高度
+                const addHeight = index === 0 ? (add ? add.height : 0) - topBar.height : add ? add.height : 0
+
+                sectionPropsArr.push({
+                    className: `${className}-${index}`,
+                    scrollTop: prevScrollTop + addHeight
+                })
+                // - topBar.height
+            })
+            this.sectionPropsArr = sectionPropsArr
+            console.log('更新tab影响区域')
+        },
+        //当滑动时也能同步激活tab
+        activeTab: debounce(
+            (top, _this) => {
+                const { sectionPropsArr } = _this
+                if (sectionPropsArr.length > 0) {
+                    sectionPropsArr.forEach((item, index) => {
+                        // 当前位置为开始位置， 下个起始位置为结束位置
+                        const openInterval = (index === 0 ? 0 : item.scrollTop) - 20 // 自定义偏移
+                        const next = sectionPropsArr[index + 1]
+                        const closedInterval = (next ? next.scrollTop : 10000000) - 20 // 自定义偏移
+                        if (top >= openInterval && top < closedInterval) {
+                            _this.tabCurrentIndex = index
+                        }
+                    })
+                }
+            },
+            100,
+            true
+        ),
+        getWinHeight() {
+            this.winHeight = wx.getSystemInfoSync().windowHeight
+        }
+    },
+    onPageScroll(e) {
+        //实时获取到滚动的值
+        const { scrollTop } = e
+        if (!this.tabSelectFlag) {
+            this.activeTab(scrollTop, this)
+        }
+        if (e.scrollTop > 60) {
+            this.headerColor = true
+            this.navbarFiexd = 'fixed'
+            this.isNavbarFiexd = true
+            this.nvabarData = {
+                showCapsule: 1,
+                title: '商品详情'
+            }
+        } else {
+            this.headerColor = false
+            this.isNavbarFiexd = false
+            this.navbarFiexd = 'none'
+            this.nvabarData = {
+                showCapsule: 1,
+                title: ''
+            }
+        }
+        if (e.scrollTop > 700) {
+            this.isScrollTop = true
+        } else {
+            this.isScrollTop = false
+        }
+    },
+    onShareAppMessage(res) {
+        //分享转发
+        if (res.from === 'button') {
+            // 来自页面内转发按钮
+        }
+        return {
+            title: `${this.product.name}`,
+            path: `pages/goods/product?type=share&id=${this.productId}`,
+            imageUrl: `${this.productImage[0]}`
+        }
+    },
+    onShow() {
+        this.$api
+            .getStorage()
+            .then(resolve => {
+                this.userId = this.couponParam.userId = resolve.userId ? resolve.userId : ''
+                this.userIdentity = resolve.userIdentity ? resolve.userIdentity : 0
+                this.shopID = resolve.shopId ? resolve.shopId : ''
+                if (this.userIdentity == 0 || this.userIdentity == 2 || this.userIdentity == 4) {
+                    this.isShowButton = true
+                } else {
+                    this.isShowButton = false
+                }
+                if (isPreviewImg) {
+                    isPreviewImg = false
+                    return
+                } else {
+                    this.initData()
+                }
+            })
+            .catch(error => {
+                this.initData()
+            })
+    },
+    created() {}
+}
 </script>
 
 <style lang="scss">
-	page{
-		background-color: #FFFFFF;
-	}
-	.banner-section{
-		width: 100%;
-		height: 750rpx;
-		position: relative;
-	}	
-	.banner{
-		width: 100%;
-		height: 750rpx;
-		.product-img{
-			width: 750rpx;
-		}
-		image {
-			width: 100%;
-			height: 100%;
-		}
-		.banner-item{
-			position: relative;
-		   .cm-product-cover{
-			   position: absolute;
-			   right: 30rpx;
-			   top: 30rpx;
-			   width: 147rpx;
-			   height: 57rpx;
-			   line-height: 57rpx;
-			   font-size: 24rpx;
-			   color: #fff;
-			   text-align: center;
-			   background: url(https://static.caimei365.com/app/img/icon2/cm_cover_bg_app.png) no-repeat center;
-			   background-size: 147rpx;
-		   } 
-		}
-	}
-	.swiper__dots-box{
-		position: absolute;
-		color: #fff;
-		bottom: 30rpx;
-		right: 0;
-	}
-	.product-wrap{
-		width: 100%;
-		height: auto;
-		padding: 24rpx 0 0 0;
-		background-color: #FFFFFF;
-		border-bottom: 20rpx solid #F7F7F7;
-		.productRemarks{
-			height: 48rpx;
-			width: 100%;
-			float: left;
-			line-height: 48rpx;
-			font-size: 24rpx;
-			color: #999999;
-			text-align: left;
-		}
-		.wrap-top{
-			width: 702rpx;
-			padding: 0 24rpx;
-			height: auto;
-			float: left;
-			padding-bottom:20rpx;
-			border-bottom: 1px solid #F8F8F8;
-			&.none{
-				.p-title{
-					color:#999999
-				}
-			}
-			.p-title{
-				width: 100%;
-				height: auto;
-				float: left;
-				position: relative;
-				.p-title-name{
-					width:602rpx;
-					height: auto;
-					float: left;
-					line-height:48rpx;
-					font-size: $font-size-28;
-					color: $text-color;
-					-o-text-overflow: ellipsis;
-					text-overflow: ellipsis;
-					display: -webkit-box;
-					word-break: break-all;
-					-webkit-box-orient: vertical;
-					-webkit-line-clamp: 2;
-					overflow: hidden;
-					&.indent{
-						text-indent: 95rpx;
-					}
-				}
-				.mclap-tag{
-					display: block;
-					width: 84rpx;
-					height: 32rpx;
-					background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
-					border-radius: 4rpx 48rpx 4px 4px;
-					line-height: 32rpx;
-					font-size: $font-size-22;
-					color: #FFFFFF;
-					text-align: center;
-					position: absolute;
-					left: 0;
-					top: 6rpx;
-				}
-				.p-title-share{
-					width: 96rpx;
-					height: 96rpx;
-					position: absolute;
-					right: 0;
-					text-align: center;
-					color: #999999;
-					font-size: $font-size-24;
-					box-sizing: border-box;
-					display: block;
-					background: transparent;
-					border-radius: 0;
-					border: 0;
-					margin: 0;
-					padding: 8rpx 0;
-					z-index: 990;
-					.icon-fenxiang1{
-						font-size: $font-size-34;
-					}
-				}
-				.tui-share-btn::after {
-					border: 0;
-				}
-			}
-			.wrap-main-text{
-				line-height: 56rpx;
-				color: #FF2A2A;
-				font-size: $font-size-26;
-				display: block;
-				float: left;
-				font-weight: normal;
-			}
-			.wrap-main-none{
-				display: block;
-				width: 256rpx;
-				height: 44rpx;
-				padding-left: 20rpx;
-				border-radius: 11rpx;
-				background: $btn-confirm;
-				float: right;
-				line-height: 44rpx;
-				color: #FFFFFF;
-				text-align: center;
-				font-size: $font-size-24;
-			}
-			
-			.p-price-none{
-				height: 44rpx;
-				line-height: 44rpx;
-				float: left;
-				font-size: $font-size-24;
-				color: #666;
-				text-decoration: line-through;
-				margin-left: 8rpx;
-			}
-			.p-minBuy{
-				height: 44rpx;
-				line-height: 44rpx;
-				float: right;
-				padding: 0 18rpx;
-				border-radius: 22rpx;
-				background-color: #f7f7f7;
-				color: #7F7F7F;
-				font-size: 24rpx;
-				text-align: center;
-				.min-text{
-					margin: 0 6rpx;
-				}
-			}
-			.p-login{
-				height: 56rpx;
-				line-height: 56rpx;
-				color: $color-system;
-				font-size: $font-size-24;
-				&.grade{
-					.price-left{
-						float: left;
-						.none{
-							display: block;
-							font-size: $font-size-20;
-							line-height: 48rpx;
-							color: #4A4B54;
-							float: left;
-							font-weight: bold;
-							margin-left: 5rpx;
-							text{
-								letter-spacing: 4rpx;
-								font-size: $font-size-32;
-							}
-						}
-					}
-				}
-				.p-no{
-					float: left;
-					margin-right: 5rpx;
-					font-size: $font-size-28;
-					color: $text-color;
-				}
-				.p-login-btn{
-					display: block;
-					height: 44rpx;
-					padding: 0 10rpx 0 20rpx;
-					border-radius: 11rpx;
-					background: $btn-confirm;
-					float: right;
-					line-height: 44rpx;
-					color: #FFFFFF;
-					text-align: center;
-					font-size: $font-size-24;
-				}
-			}
-		}
-		.wrap-label{
-			float: left;
-			width: 100%;
-			box-sizing: border-box;
-			.label-a{
-				padding: 0 18rpx;
-				line-height: 32rpx;
-				font-size: $font-size-20;
-				color:$color-system;
-				text-align: center;
-				border-radius: 6rpx;
-				background:#ffe6dc;
-				margin: 0 20rpx 15rpx 0;
-				display: inline-block;
-			}
-		}
-		.wrap-top-price{
-			float: left;
-			width: 100%;
-			box-sizing: border-box;
-			.wrap-main-item{
-				width: 100%;
-				height: 56rpx;
-				.p-price{
-					height: 56rpx;
-					line-height: 56rpx;
-					float: left;
-					color: #FF2A2A;
-					font-weight: bold;
-					&.none{
-						text-decoration: line-through;
-						color: #999999;
-						font-weight: normal;
-					}
-					.txt{
-						margin:0 2rpx;
-					}
-					.txt.sm{
-						font-size: $font-size-26;
-					}
-					.txt.big{
-						font-size: $font-size-34;
-					}
-				}
-			}
-			.floor-item-act{
-				height: 56rpx;
-				text-align: center;
-				box-sizing: border-box;
-				float: left;
-				padding:10rpx 0;
-				margin-left: 10rpx;
-				.floor-tags{
-					float: right;
-					height: 28rpx;
-					border-radius: 6rpx;
-					background-color: #FFFFFF;
-					line-height: 28rpx;
-					color: $color-system;
-					text-align: center;
-					display: inline-block;
-					padding:0 16rpx;
-					font-size: $font-size-20;
-					margin-left: 15rpx;
-					border: 1px solid #E15616;
-				}
-			}
-			.floor-item-btn{
-				float: left;
-				height: 40rpx;
-				margin-top: 8rpx;
-				margin-left: 10rpx;
-				.btn{
-					line-height: 40rpx;
-					padding: 0 20rpx;
-					height: 40rpx;
-					background: $btn-confirm;
-					color: #FFFFFF;
-					font-size: $font-size-20;
-					border-radius: 4rpx;
-				}
-			}
-		}
-		.wrap-info{
-			float: left;
-			width: 702rpx;
-			padding: 24rpx 24rpx 0 24rpx;
-			border-bottom: 1px solid #F8F8F8;
-			.info-viewT{
-				width: 100%;
-				min-height: 40rpx;
-				font-size: $font-size-28;
-				color: $text-color;
-				line-height: 40rpx;
-				text-align: left;
-				&.none{
-					color: #999999;
-				}
-				.info-viewL{
-					min-width: 350rpx;
-					float: left;
-					margin-bottom: 24rpx;
-				}
-				.info-viewR{
-					min-width: 352rpx;
-					float: left;
-					margin-bottom: 24rpx;
-				}
-			}
-			.info-viewB{
-				width: 100%;
-				height: auto;
-			}
-			.info-f{
-				width: 50%;
-				float: left;
-				font-size: $font-size-28;
-				color: $text-color;
-				line-height: 40rpx;
-				margin-bottom: 24rpx;
-				text-align: left;
-			}
-		}
-	}
-	.product-seve{
-		width: 100%;
-		height: 60rpx;
-		background-color: #FFFFFF;
-		position: relative;
-		display: flex;
-		line-height: 60rpx;
-		.label{
-			font-size: $font-size-28;
-			color: #333333;
-		}
-		.iconfont{
-			color: #fea785;
-			margin-right: 20rpx;
-			font-size: $font-size-22;
-		}
-		.text{
-			font-size: $font-size-22;
-			color: #fea785;
-			margin-left: 10rpx;
-		}
-	}
-	.product-item-none{
-		min-height: 348rpx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		border-bottom: 20rpx solid #F7F7F7;
-		box-sizing: border-box;
-		padding: 40rpx 0;
-		.none-image{
-			width: 284rpx;
-			height: 225rpx;
-		}
-		.none-text{
-			text-align: center;
-			font-size: $font-size-28;
-			color: #fea785;
-			line-height: 40rpx;
-		}
-	}
-	.product-parameter{
-		width: 702rpx;
-		height: 90rpx;
-		padding: 0 24rpx;
-		background-color: #FFFFFF;
-		position: relative;
-		border-bottom: 20rpx solid #F7F7F7;
-		&.coupon{
-			.title{
-				color: #f94b4b;
-			}
-			.icon-xiayibu{
-				color: #f94b4b;
-			}
-			.coupon{
-				float: right;
-				box-sizing: border-box;
-				padding: 29rpx 0;
-				padding-right: 35rpx;
-				.tags{
-					height: 32rpx;
-					box-sizing: border-box;
-					border-radius: 8rpx;
-					background-color: #fff1eb;
-					line-height: 28rpx;
-					color: #f94b4b;
-					text-align: center;
-					display: inline-block;
-					padding:0 10rpx;
-					font-size: $font-size-20;
-					border: 1px solid #f94b4b;
-					float: right;
-					margin:0 6rpx;
-				}
-			}
-		}
-		.title{
-			line-height: 90rpx;
-			display: inline-block;
-			float: left;
-			font-size: $font-size-28;
-			color: #666666;
-		}
-		.name{
-			line-height: 90rpx;
-			display: inline-block;
-			float: left;
-			font-size: $font-size-28;
-			color: $text-color;
-			padding-right: 48rpx;
-			overflow: hidden;
-			text-overflow:ellipsis;
-			white-space: nowrap;
-			text-align: right;
-		}
-		.icon-xiayibu{
-			line-height: 90rpx;
-			display: inline-block;
-			position: absolute;
-			width: 48rpx;
-			top: 0;
-			right: 0;
-			color: #b2b2b2;
-		}
-	}
-	.product-supplier{
-		width: 100%;
-		height: 174rpx;
-		padding: 30rpx 24rpx;
-		box-sizing: border-box;
-		background-color: #FFFFFF;
-		position: relative;
-		box-sizing: border-box;
-		border-bottom: 20rpx solid #F7F7F7;
-		.logo{
-			width: 128rpx;
-			height: 92rpx;
-			float: left;
-			border: 1px solid #efefef;
-			border-radius: 6rpx;
-			image{
-				width: 100%;
-				height: 100%;
-				display: block;
-				border-radius: 6rpx;
-			}
-		}
-		.main{
-			width: 470rpx;
-			height: 92rpx;
-			float: left;
-			margin-left: 20rpx;
-			.name{
-				width: 100%;
-				line-height: 46rpx;
-				float: left;
-				font-size: $font-size-28;
-				color: $text-color;
-				float: right;
-				overflow: hidden;
-				text-overflow:ellipsis;
-				white-space: nowrap;
-				text-align: left;
-			}
-			.massgs{
-				width: 100%;
-				line-height: 46rpx;
-				float: left;
-				font-size: $font-size-24;
-				color: #999999;
-				.label{
-					float: left;
-				}
-				.p-stars{
-					float: left;
-					margin-left: 20rpx;
-				}
-				.acount{
-					float: right;
-					text{
-						color: $color-system;
-					}
-				}
-			}
-		}
-		
-		.icon-xiayibu{
-			line-height: 154rpx;
-			display: inline-block;
-			position: absolute;
-			width: 48rpx;
-			top: 0;
-			right: 0;
-			color: #b2b2b2;
-		}
-	}
-	.product-details {
-		width: 100%;
-		background: #FFFFFF;
-		border-bottom: 20rpx solid #F7F7F7;
-		&.service{
-			border-bottom: none;
-		}
-		&.recommend{
-			background-color: #F7F7F7;
-			border-bottom: none;
-			.title{
-				.title-tab{
-					background-color: #F7F7F7;
-					color: $text-color;
-				}
-			}
-		}
-		.product-rich-text-none{
-			box-sizing: border-box;
-			padding: 0 24rpx;
-			text-align: left;
-			font-size: 24rpx;
-			color: #999999;
-			line-height: 60rpx;
-		}
-		.content-none{
-			width: 100%;
-			height: 80rpx;
-			line-height: 80rpx;
-			text-align: left;
-			font-size: $font-size-26;
-			color: #999999;
-			box-sizing: border-box;
-			padding: 0 24rpx;
-		}
-		.title{
-			width: 100%;
-			box-sizing: border-box;
-			padding: 0 24rpx;
-			.title-tab{
-				width: 100%;
-				height: 100rpx;
-				background: #fff;
-				z-index: 10;
-				font-size: $font-size-30;
-				text-align: left;
-				color: $text-color;
-				line-height: 100rpx;
-				font-weight: 600;
-			}
-			.title-msg{
-				width: 100%;
-				height: 236rpx;
-				padding: 18rpx;
-				background-color: rgba(225,86,22, 0.1);
-				color: $color-system;
-				box-sizing: border-box;
-				margin-bottom: 30rpx;
-				.tit{
-					line-height: 46rpx;
-					font-size: $font-size-24;
-					text-align: left;
-				}
-				.txt{
-					line-height: 38rpx;
-					font-size: $font-size-20;
-					text-align: justify;
-				}
-			}
-		}
-		.content{
-			width: 100%;
-			background-color: #FFFFFF;
-		}
-	}
-	.isLower{
-		width: 100%;
-		height: 116rpx;
-		line-height: 116rpx;
-		text-align: center;
-		color: #000000;
-		font-size: $font-size-32;
-		font-weight: bold;
-	}
-	.bottom-btn{
-		width: 100%;
-		height: 100rpx;
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		background: #FFFFFF;
-		z-index: 99;
-		.bottom-le{
-			width: 300rpx;
-			height: 100rpx;
-			padding:10rpx 20rpx 10rpx 0;
-			float: left;
-			box-sizing: border-box;
-			.item-bt{
-				width: 80rpx;
-				height: 100%;
-				margin-right:15rpx;
-				display: flex;
-				float: left;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				font-size: $font-size-22;
-				color: $text-color;
-				line-height: 34rpx;
-				position: relative;
-				.animation-num{
-					font-size:$font-size-32 ;
-					color: #FF2A2A;
-					position: absolute;
-					top: -12rpx;
-					right: 4rpx;
-					font-weight: bold;
-				}
-				.animation{
-					animation: showAmnation 2.2s ease-in-out both;
-				}
-				.restion{
-					animation: hideAmnation 1s ease-in-out both;
-				}
-				.icon-num{
-					position: absolute;
-					right:-12rpx;
-					top: -5rpx;
-				}
-				.icon-num.goleft{
-					right: 2rpx;
-				}
-				&:last-child{
-					margin-right: 0;
-				}
-				image {
-					width: 44rpx;
-					height: 44rpx;
-				}
-				button.contact-btn{
-					width: 100%;
-					height: 100%;
-					margin: 0;
-					padding: 0;
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					justify-content: center;
-					box-sizing: border-box;
-					font-size: $font-size-24;
-					text-align: center;
-					text-decoration: none;
-					line-height: 34rpx;
-					border-radius: 0;
-					-webkit-tap-highlight-color: transparent;
-					overflow: hidden;
-					color: $text-color;
-					background-color:#FFFFFF;
-				}
-			}
-		}
-		.bottom-ri{
-			width: 450rpx;
-			height: 100%;
-			float: right;
-			display: flex;
-			box-sizing: border-box;
-			padding: 13rpx 20rpx 13rpx 0;
-			.btn{
-				flex: 1;
-				width: 200rpx;
-				line-height: 80rpx;
-				text-align: center;
-				font-size: $font-size-24;
-				color: #FFFFFF;
-			}
-			.btn-cart{
-				background-color: #ffe6dc;
-				color: $color-system;
-				border-radius: 42rpx 0 0 42rpx;
-			}
-			.btn-cart.disabled{
-				background-color: #E1E1E1;
-				color: #FFFFFF;
-			}
-			.btn-bay{
-				background:linear-gradient(to right, #f28f31 0%, #e15616 100%);
-				border-radius: 0 42rpx 42rpx 0;
-			}
-			.btn-bay.disabled{
-				background: linear-gradient(135deg,rgba(242,143,49,0.5) 0%,rgba(225,86,22,0.5) 100%);
-			}
-		}
-	}
-	.uni-badge--small {
-		-webkit-transform: scale(.8);
-		-ms-transform: scale(.8);
-		transform: scale(.8);
-		-webkit-transform-origin: center center;
-		-ms-transform-origin: center center;
-		transform-origin: center center;
-	}
-	.uni-badge {
-		font-family: 'Helvetica Neue', Helvetica, sans-serif;
-		-webkit-box-sizing: border-box;
-		box-sizing: border-box;
-		font-size: 12px;
-		line-height: 1;
-		display: inline-block;
-		padding: 3px 6px;
-		color: #333;
-		border-radius: 100px;
-		background-color: #f1f1f1;
-	}
-	.uni-badge-error {
-		color: #fff;
-		background-color: #dd524d;
-	}
-	.product-topnav{
-		width: 100%;
-		height: 174rpx;
-		box-sizing: border-box;
-		background: #FFFFFF;
-		z-index: 990;
-		position: fixed;
-		opacity: 1;
-		left: 0;
-		&.fixed{
-			animation: showFixedColor 0.1s ease-in-out both;
-		}
-		&.none{
-		   animation: hideFixedColor 0.1s ease-in-out both;
-		}
-		.navbar {
-			width: 100%;
-			height: 60rpx;
-			box-sizing: border-box;
-			padding: 0 24rpx;
-			display: flex;
-			.nav-item {
-				display: flex;
-				flex: 1;
-				justify-content: center;
-				align-items: center;
-				height: 60rpx;
-				font-size: $font-size-28;
-				color: $text-color;
-				position: relative;
-				float: left;
-				position: relative;
-				.line{
-					width: 60rpx;
-					height: 2px;
-					border-radius: 1px;
-					background: #FFFFFF;
-					position: absolute;
-					bottom: 0;
-					left: 50%;
-					margin-left: -30rpx;
-				}
-				&.current{
-					color:$color-system;
-					.line{
-						background: $color-system;
-					}
-				}
-			}
-		}
-		.search-input{
-			width: 100%;
-			height: 114rpx;
-			padding:24rpx;
-			box-sizing: border-box;
-			.gosearch-btn{
-				width: 100%;
-				height: 100%;
-				border-radius: 40rpx;
-				margin: 0 auto;
-				font-size: 26rpx;
-				line-height: 66rpx;
-				color: #B2B2B2;
-				position: relative;
-				box-sizing: border-box;
-				padding-left: 66rpx;
-				&.fixed{
-					background: rgba(70,70,70,0.1);
-				}
-				&.none{
-					background: rgba(70,70,70,0.1);
-				}
-				.search-icon{
-					width: 66rpx;
-					height: 66rpx;
-					position:absolute ;
-					left: 0;
-					top: 2rpx;
-					text-align: center;
-					line-height: 66rpx;
-					.icon-iconfonticonfontsousuo1{
-						margin:0 6rpx;
-						font-size: $font-size-34;
-						color: #B2B2B2;
-						z-index: 10;
-					}
-				}
-				.search-text{
-					font-size: $font-size-24;
-					line-height: 66rpx;
-					color: #B2B2B2;
-				}
-			}
-		}
-	}
-	
-	@keyframes showFixedColor {
-		0% {background: rgba(255,255,255,0);}
-		50% {background: rgba(255,255,255,0.5);}
-		100% {background: rgba(255,255,255,1);}
-	}
-	@keyframes hideFixedColor {
-		0% {background: rgba(255,255,255,1);}
-		50% {background: rgba(255,255,255,0.5);}
-		100% {background: rgba(255,255,255,0);}
-	}
-	/* 加入购物模态层*/
-	@keyframes showPopup {
-		0% {
-			opacity: 0;
-		}
-		100% {
-			opacity: 1;
-		}
-	}
-	@keyframes hidePopup {
-		0% {
-			opacity: 1;
-		}
-		100% {
-			opacity: 0;
-		}
-	}
-	@keyframes showLayer {
-		0% {
-			transform: translateY(0);
-		}
-		100% {
-			transform: translateY(-100%);
-		}
-	}
-	@keyframes hideLayer {
-		0% {
-			transform: translateY(-100%);
-		}
-		100% {
-			transform: translateY(0);
-		}
-	}
-	@keyframes showAmnation {
-		0% {
-			top: -12rpx;
-			opacity: 0;
-		}
-		50% {
-			top: -60rpx;
-			opacity: 1;
-		}
-		100% {
-			top: -100rpx;
-			opacity: 0;
-		}
-	}
-	@keyframes hideAmnation {
-		0% {
-			top: -100rpx;
-			opacity: 0;
-		}
-		100% {
-			top: -12rpx;
-			opacity: 0;
-		}
-	}
-	.popup {
-		position: fixed;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 999;
-		display: none;
-		.mask{
-			position: fixed;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			z-index: 21;
-			background-color: rgba(0, 0, 0, 0.6);
-		}
-		.layer {
-			position: fixed;
-			z-index: 22;
-			bottom: -294rpx;
-			width: 702rpx;
-			padding: 24rpx 24rpx 36rpx 24rpx;
-			height: 260rpx;
-			border-radius: 20rpx 20rpx 0 0;
-			background-color: #fff;
-			display: flex;
-			flex-wrap: wrap;
-			align-content: space-between;
-			.content {
-				width: 100%;
-			}
-			.btn {
-				width: 100%;
-				height: 88rpx;
-				margin-top: 20rpx;
-				.button {
-					width: 100%;
-					height: 88rpx;
-					color: #fff;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					background: $btn-confirm;
-					font-size: $font-size-28;
-					border-radius: 44rpx;
-				}
-			}
-		}
-		
-		&.show {
-			display: block;
-			.mask{
-				animation: showPopup 0.2s linear both;
-			}
-			.layer {
-				animation: showLayer 0.2s linear both;
-			}
-		}
-		&.hide {
-			display: block;
-			.mask{
-				animation: hidePopup 0.2s linear both;
-			}
-			
-			.layer {
-				animation: hideLayer 0.2s linear both;
-			}
-		}
-		&.none {
-			display: none;
-		}
-		&.service {
-			.row {
-				margin: 30upx 0;
-				.title {
-					font-size: 30upx;
-					margin: 10upx 0;
-				}
-				.description {
-					font-size: 28upx;
-					color: #999;
-				}
-			}
-		}
-		.layer-smimg{
-			width: 114rpx;
-			height: 114rpx;
-			float: left;
-			border-radius: 10rpx;
-			margin-right: 24rpx;
-			image{
-				width: 114rpx;
-				height: 114rpx;	
-				border-radius: 10rpx;
-			}
-		}
-		.layer-nunbox{
-			justify-content: space-between;
-			align-items: center;
-			width: 536rpx;
-			height: auto;
-			float: left;
-			.layer-nunbox-t{
-				width: 100%;
-				height:44rpx;
-				position:relative;
-				display: flex;
-				margin-bottom: 10rpx;
-				.text{
-					font-size: $font-size-24;
-					line-height: 48rpx;
-					color: #999999;
-				}
-				.layer-nunbox-text{
-					line-height: 44rpx;
-					font-size: $font-size-28;
-				}
-				.number-box{
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					border:2rpx solid #ffe6dc;
-					border-radius: 30rpx;
-					height: 48rpx;
-					margin-left: 20rpx;
-					.iconfont{
-						font-size: $font-size-24;
-						padding:0 18rpx;
-						color: #999999;
-						text-align: center;
-						line-height: 48rpx;
-						font-weight: bold;
-						background: #fef6f3;
-						&.icon-jianhao{
-							border-radius: 30rpx 0 0 30rpx;
-						}
-						&.icon-jiahao{
-							border-radius: 0 30rpx 30rpx 0;
-						}
-					}
-					.btn-input{
-						width: 62rpx;
-						height: 48rpx;
-						line-height: 48rpx;
-						background: #FFFFFF;
-						border-radius: 4rpx;
-						text-align: center;
-						font-size: $font-size-28;
-					}
-				}
-				.product-step{
-					position: absolute;
-					left: 45rpx;
-					bottom: 0;
-					height: 44rpx;
-					background: #FFFFFF;
-				}
-			}
-			.layer-nunbox-b{
-				width: 100%;
-				height:44rpx;
-				margin-top: 13rpx;
-			}
-			.text{
-				line-height: 44rpx;
-				font-size: $font-size-28;
-				.p{
-					color: #FF2A2A;
-				}
-				.p:first-child{
-					margin-left: 30rpx;
-				}
-				.p.sm{
-					font-size: $font-size-24;
-				}
-			}
-		}
-	}
-	.tui-popup-box {
-		position: relative;
-		box-sizing: border-box;
-		min-height: 220rpx;
-		padding:24rpx 24rpx 0 24rpx;
-		.tui-popup-close{
-			width: 90rpx;
-			height: 90rpx;
-			position: absolute;
-			right: 0;
-			top: 24rpx;
-			line-height: 90rpx;
-			text-align: center;
-			color: #b2b2b2;
-			.icon-iconfontguanbi{
-				font-size: $font-size-40;
-			}
-		}
-		.title{
-			font-size: $font-size-34;
-			color: $text-color;
-			line-height: 88rpx;
-			text-align: center;
-			float: left;
-			width: 100%;
-			height: 88rpx;
-			font-weight: bold;
-		}
-		.tui-popup-main{
-			width: 100%;
-			float: left;
-			&.coupon{
-				padding-bottom: 40rpx;
-				.coupon-empty{
-					width: 100%;
-					height: 600rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					flex-direction: column;
-					position: fixed;
-					background: $bg-color;
-					.empty-container-image{
-						width: 150rpx;
-						height: 150rpx;
-						margin-bottom: 0;
-						margin-top: 0;
-					}
-					.error-text{
-						font-size: $font-size-28;
-						color: #999999;
-						line-height: 88rpx;
-					}
-				}
-			}
-			.tui-popup-scroll{
-				width: 100%;
-				height: 600rpx;
-				.coupon-list{
-					width: 100%;
-					height: 200rpx;
-					margin-top: 24rpx;
-					box-sizing: border-box;
-					background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
-					background-size: cover;
-					&:last-child{
-						margin-bottom: 24rpx;
-					}
-					.list-cell-le{
-						width: 224rpx;
-						height: 100%;
-						box-sizing: border-box;
-						padding: 37rpx 0;
-						float: left;
-						.coupon-maxMoney{
-							width: 100%;
-							height: 78rpx;
-							line-height: 78rpx;
-							font-size: 56rpx;
-							color: #FFFFFF;
-							text-align: center;
-							.small{
-								font-size: $font-size-24;
-							}
-						}
-						.coupon-minMoney{
-							width: 100%;
-							height: 33rpx;
-							line-height: 33rpx;
-							font-size: $font-size-24;
-							color: #FFFFFF;
-							text-align: center;
-						}
-					}
-					.list-cell-ri{
-						width: 478rpx;
-						height: 100%;
-						box-sizing: border-box;
-						padding: 20rpx 24rpx 0 24rpx;
-						float: right;
-						.list-cell-top{
-							width: 100%;
-							height: 121rpx;
-							float: left;
-							border-bottom: 1px solid #e1e1e1;
-							.list-cell-type{
-								width: 286rpx;
-								height: 100%;
-								float: left;
-								.list-cell-tags{
-									width: 100%;
-									height: 32rpx;
-									margin-bottom: 7rpx;
-									.tags{
-										display: inline-block;
-										padding: 0 10rpx;
-										height: 32rpx;
-										line-height: 32rpx;
-										background-color: #ffdcce;
-										color: #f94b4b;
-										font-size: $font-size-20;
-										border-radius: 8rpx;
-										text-align: center;
-										float: left;
-									}
-								}
-								.list-cell-texts{
-									width: 100%;
-									height: auto;
-									line-height:35rpx;
-									text-overflow:ellipsis;
-									display: -webkit-box;
-									word-break: break-all;
-									-webkit-box-orient: vertical;
-									-webkit-line-clamp: 2;
-									overflow: hidden;
-									font-size: 26rpx;
-									color: #333333;
-								}
-							}
-							.list-cell-btn{
-								width: 128rpx;
-								height: 100%;
-								float: right;
-								.icon-used{
-									width: 100%;
-									height: 100%;
-									box-sizing: border-box;
-									padding-top: 57rpx;
-									.icon-used-btn{
-										width: 128rpx;
-										height: 48rpx;
-										border-radius: 28rpx;
-										line-height: 48rpx;
-										font-size: $font-size-26;
-										text-align: center;
-										&.receive{
-											background-image: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);;
-											color: #FFFFFF;
-										}
-										&.make{
-											border: solid 1px #f94b4b;
-											color: #f94b4b;
-										}
-									}
-								}
-							}
-						}
-						.list-cell-time{
-							width: 100%;
-							height: 58rpx;
-							line-height: 58rpx;
-							text-align: left;
-							font-size: $font-size-20;
-							color: #999999;
-						}
-					}
-				}
-				&.train{
-					height: 240rpx;
-				}
-				.content-tr{
-					width: 100%;
-					min-height: 58rpx;
-					line-height: 58rpx;
-					display: flex;
-					.content-td{
-						display: flex;
-						flex: 3;
-						font-size: $font-size-26;
-						color: #999999;
-						line-height: 58rpx;
-						text-align: left;
-					}
-					.content-th{
-						display: flex;
-						flex: 7;
-						font-size: $font-size-26;
-						color: #333333;
-						line-height: 58rpx;
-						text-align: left;
-						padding-left: 10rpx;
-					}
-				}
-			}
-		}
-	}
-	.tui-popup-btn {
-		width: 100%;
-		height: auto;
-		float: left;
-		margin-top: 24rpx;
-		.tui-button{
-			width: 100%;
-			height: 88rpx;
-			background: $btn-confirm;
-			line-height: 88rpx;
-			text-align: center;
-			color: #FFFFFF;
-			font-size: $font-size-28;
-			border-radius: 44rpx;
-		}
-	}
-	/*富文本样式*/
-	rich-text.p{
-		width: 702rpx !important;
-		padding: 0 24rpx;
-		text-align: justify;
-	}
-	rich-text.img{
-		width: 100%;
-		height: auto;
-	}
+page {
+    background-color: #ffffff;
+}
+.banner-section {
+    width: 100%;
+    height: 750rpx;
+    position: relative;
+}
+.banner {
+    width: 100%;
+    height: 750rpx;
+    .product-img {
+        width: 750rpx;
+    }
+    image {
+        width: 100%;
+        height: 100%;
+    }
+    .banner-item {
+        position: relative;
+        .cm-product-cover {
+            position: absolute;
+            right: 30rpx;
+            top: 30rpx;
+            width: 147rpx;
+            height: 57rpx;
+            line-height: 57rpx;
+            font-size: 24rpx;
+            color: #fff;
+            text-align: center;
+            background: url(https://static.caimei365.com/app/img/icon2/cm_cover_bg_app.png) no-repeat center;
+            background-size: 147rpx;
+        }
+    }
+}
+.swiper__dots-box {
+    position: absolute;
+    color: #fff;
+    bottom: 30rpx;
+    right: 0;
+}
+.product-wrap {
+    width: 100%;
+    height: auto;
+    padding: 24rpx 0 0 0;
+    background-color: #ffffff;
+    border-bottom: 20rpx solid #f7f7f7;
+    .productRemarks {
+        height: 48rpx;
+        width: 100%;
+        float: left;
+        line-height: 48rpx;
+        font-size: 24rpx;
+        color: #999999;
+        text-align: left;
+    }
+    .wrap-top {
+        width: 702rpx;
+        padding: 0 24rpx;
+        height: auto;
+        float: left;
+        padding-bottom: 20rpx;
+        border-bottom: 1px solid #f8f8f8;
+        &.none {
+            .p-title {
+                color: #999999;
+            }
+        }
+        .p-title {
+            width: 100%;
+            height: auto;
+            float: left;
+            position: relative;
+            .p-title-name {
+                width: 602rpx;
+                height: auto;
+                float: left;
+                line-height: 48rpx;
+                font-size: $font-size-28;
+                color: $text-color;
+                -o-text-overflow: ellipsis;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                word-break: break-all;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                &.indent {
+                    text-indent: 95rpx;
+                }
+            }
+            .mclap-tag {
+                display: block;
+                width: 84rpx;
+                height: 32rpx;
+                background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
+                border-radius: 4rpx 48rpx 4px 4px;
+                line-height: 32rpx;
+                font-size: $font-size-22;
+                color: #ffffff;
+                text-align: center;
+                position: absolute;
+                left: 0;
+                top: 6rpx;
+            }
+            .p-title-share {
+                width: 96rpx;
+                height: 96rpx;
+                position: absolute;
+                right: 0;
+                text-align: center;
+                color: #999999;
+                font-size: $font-size-24;
+                box-sizing: border-box;
+                display: block;
+                background: transparent;
+                border-radius: 0;
+                border: 0;
+                margin: 0;
+                padding: 8rpx 0;
+                z-index: 980;
+                .icon-fenxiang1 {
+                    font-size: $font-size-34;
+                }
+            }
+            .tui-share-btn::after {
+                border: 0;
+            }
+        }
+        .wrap-main-text {
+            line-height: 56rpx;
+            color: #ff2a2a;
+            font-size: $font-size-26;
+            display: block;
+            float: left;
+            font-weight: normal;
+        }
+        .wrap-main-none {
+            display: block;
+            width: 256rpx;
+            height: 44rpx;
+            padding-left: 20rpx;
+            border-radius: 11rpx;
+            background: $btn-confirm;
+            float: right;
+            line-height: 44rpx;
+            color: #ffffff;
+            text-align: center;
+            font-size: $font-size-24;
+        }
+
+        .p-price-none {
+            height: 44rpx;
+            line-height: 44rpx;
+            float: left;
+            font-size: $font-size-24;
+            color: #666;
+            text-decoration: line-through;
+            margin-left: 8rpx;
+        }
+        .p-minBuy {
+            height: 44rpx;
+            line-height: 44rpx;
+            float: right;
+            padding: 0 18rpx;
+            border-radius: 22rpx;
+            background-color: #f7f7f7;
+            color: #7f7f7f;
+            font-size: 24rpx;
+            text-align: center;
+            .min-text {
+                margin: 0 6rpx;
+            }
+        }
+        .p-login {
+            height: 56rpx;
+            line-height: 56rpx;
+            color: $color-system;
+            font-size: $font-size-24;
+            &.grade {
+                .price-left {
+                    float: left;
+                    .none {
+                        display: block;
+                        font-size: $font-size-20;
+                        line-height: 48rpx;
+                        color: #4a4b54;
+                        float: left;
+                        font-weight: bold;
+                        margin-left: 5rpx;
+                        text {
+                            letter-spacing: 4rpx;
+                            font-size: $font-size-32;
+                        }
+                    }
+                }
+            }
+            .p-no {
+                float: left;
+                margin-right: 5rpx;
+                font-size: $font-size-28;
+                color: $text-color;
+            }
+            .p-login-btn {
+                display: block;
+                height: 44rpx;
+                padding: 0 10rpx 0 20rpx;
+                border-radius: 11rpx;
+                background: $btn-confirm;
+                float: right;
+                line-height: 44rpx;
+                color: #ffffff;
+                text-align: center;
+                font-size: $font-size-24;
+            }
+        }
+    }
+    .wrap-label {
+        float: left;
+        width: 100%;
+        box-sizing: border-box;
+        .label-a {
+            padding: 0 18rpx;
+            line-height: 32rpx;
+            font-size: $font-size-20;
+            color: $color-system;
+            text-align: center;
+            border-radius: 6rpx;
+            background: #ffe6dc;
+            margin: 0 20rpx 15rpx 0;
+            display: inline-block;
+        }
+    }
+    .wrap-top-price {
+        float: left;
+        width: 100%;
+        box-sizing: border-box;
+        .wrap-main-item {
+            width: 100%;
+            height: 56rpx;
+            .p-price {
+                height: 56rpx;
+                line-height: 56rpx;
+                float: left;
+                color: #ff2a2a;
+                font-weight: bold;
+                &.none {
+                    text-decoration: line-through;
+                    color: #999999;
+                    font-weight: normal;
+                }
+                .txt {
+                    margin: 0 2rpx;
+                }
+                .txt.sm {
+                    font-size: $font-size-26;
+                }
+                .txt.big {
+                    font-size: $font-size-34;
+                }
+            }
+        }
+        .floor-item-act {
+            height: 56rpx;
+            text-align: center;
+            box-sizing: border-box;
+            float: left;
+            padding: 10rpx 0;
+            margin-left: 10rpx;
+            .floor-tags {
+                float: right;
+                height: 28rpx;
+                border-radius: 6rpx;
+                background-color: #ffffff;
+                line-height: 28rpx;
+                color: $color-system;
+                text-align: center;
+                display: inline-block;
+                padding: 0 16rpx;
+                font-size: $font-size-20;
+                margin-left: 15rpx;
+                border: 1px solid #e15616;
+            }
+        }
+        .floor-item-btn {
+            float: left;
+            height: 40rpx;
+            margin-top: 8rpx;
+            margin-left: 10rpx;
+            .btn {
+                line-height: 40rpx;
+                padding: 0 20rpx;
+                height: 40rpx;
+                background: $btn-confirm;
+                color: #ffffff;
+                font-size: $font-size-20;
+                border-radius: 4rpx;
+            }
+        }
+    }
+    .wrap-info {
+        float: left;
+        width: 702rpx;
+        padding: 24rpx 24rpx 0 24rpx;
+        border-bottom: 1px solid #f8f8f8;
+        .info-viewT {
+            width: 100%;
+            min-height: 40rpx;
+            font-size: $font-size-28;
+            color: $text-color;
+            line-height: 40rpx;
+            text-align: left;
+            &.none {
+                color: #999999;
+            }
+            .info-viewL {
+                min-width: 350rpx;
+                float: left;
+                margin-bottom: 24rpx;
+            }
+            .info-viewR {
+                min-width: 352rpx;
+                float: left;
+                margin-bottom: 24rpx;
+            }
+        }
+        .info-viewB {
+            width: 100%;
+            height: auto;
+        }
+        .info-f {
+            width: 50%;
+            float: left;
+            font-size: $font-size-28;
+            color: $text-color;
+            line-height: 40rpx;
+            margin-bottom: 24rpx;
+            text-align: left;
+        }
+    }
+}
+.product-seve {
+    width: 100%;
+    height: 60rpx;
+    background-color: #ffffff;
+    position: relative;
+    display: flex;
+    line-height: 60rpx;
+    .label {
+        font-size: $font-size-28;
+        color: #333333;
+    }
+    .iconfont {
+        color: #fea785;
+        margin-right: 20rpx;
+        font-size: $font-size-22;
+    }
+    .text {
+        font-size: $font-size-22;
+        color: #fea785;
+        margin-left: 10rpx;
+    }
+}
+.product-item-none {
+    min-height: 348rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-bottom: 20rpx solid #f7f7f7;
+    box-sizing: border-box;
+    padding: 40rpx 0;
+    .none-image {
+        width: 284rpx;
+        height: 225rpx;
+    }
+    .none-text {
+        text-align: center;
+        font-size: $font-size-28;
+        color: #fea785;
+        line-height: 40rpx;
+    }
+}
+.product-parameter {
+    width: 702rpx;
+    height: 90rpx;
+    padding: 0 24rpx;
+    background-color: #ffffff;
+    position: relative;
+    border-bottom: 20rpx solid #f7f7f7;
+    &.coupon {
+        .title {
+            color: #f94b4b;
+        }
+        .icon-xiayibu {
+            color: #f94b4b;
+        }
+        .coupon {
+            float: right;
+            box-sizing: border-box;
+            padding: 29rpx 0;
+            padding-right: 35rpx;
+            .tags {
+                height: 32rpx;
+                box-sizing: border-box;
+                border-radius: 8rpx;
+                background-color: #fff1eb;
+                line-height: 28rpx;
+                color: #f94b4b;
+                text-align: center;
+                display: inline-block;
+                padding: 0 10rpx;
+                font-size: $font-size-20;
+                border: 1px solid #f94b4b;
+                float: right;
+                margin: 0 6rpx;
+            }
+        }
+    }
+    .title {
+        line-height: 90rpx;
+        display: inline-block;
+        float: left;
+        font-size: $font-size-28;
+        color: #666666;
+    }
+    .name {
+        line-height: 90rpx;
+        display: inline-block;
+        float: left;
+        font-size: $font-size-28;
+        color: $text-color;
+        padding-right: 48rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: right;
+    }
+    .icon-xiayibu {
+        line-height: 90rpx;
+        display: inline-block;
+        position: absolute;
+        width: 48rpx;
+        top: 0;
+        right: 0;
+        color: #b2b2b2;
+    }
+}
+.product-supplier {
+    width: 100%;
+    height: 174rpx;
+    padding: 30rpx 24rpx;
+    box-sizing: border-box;
+    background-color: #ffffff;
+    position: relative;
+    box-sizing: border-box;
+    border-bottom: 20rpx solid #f7f7f7;
+    .logo {
+        width: 128rpx;
+        height: 92rpx;
+        float: left;
+        border: 1px solid #efefef;
+        border-radius: 6rpx;
+        image {
+            width: 100%;
+            height: 100%;
+            display: block;
+            border-radius: 6rpx;
+        }
+    }
+    .main {
+        width: 470rpx;
+        height: 92rpx;
+        float: left;
+        margin-left: 20rpx;
+        .name {
+            width: 100%;
+            line-height: 46rpx;
+            float: left;
+            font-size: $font-size-28;
+            color: $text-color;
+            float: right;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            text-align: left;
+        }
+        .massgs {
+            width: 100%;
+            line-height: 46rpx;
+            float: left;
+            font-size: $font-size-24;
+            color: #999999;
+            .label {
+                float: left;
+            }
+            .p-stars {
+                float: left;
+                margin-left: 20rpx;
+            }
+            .acount {
+                float: right;
+                text {
+                    color: $color-system;
+                }
+            }
+        }
+    }
+
+    .icon-xiayibu {
+        line-height: 154rpx;
+        display: inline-block;
+        position: absolute;
+        width: 48rpx;
+        top: 0;
+        right: 0;
+        color: #b2b2b2;
+    }
+}
+.product-details {
+    width: 100%;
+    background: #ffffff;
+    border-bottom: 20rpx solid #f7f7f7;
+    &.service {
+        border-bottom: none;
+    }
+    &.recommend {
+        background-color: #f7f7f7;
+        border-bottom: none;
+        .title {
+            .title-tab {
+                background-color: #f7f7f7;
+                color: $text-color;
+            }
+        }
+    }
+    .product-rich-text-none {
+        box-sizing: border-box;
+        padding: 0 24rpx;
+        text-align: left;
+        font-size: 24rpx;
+        color: #999999;
+        line-height: 60rpx;
+    }
+    .content-none {
+        width: 100%;
+        height: 80rpx;
+        line-height: 80rpx;
+        text-align: left;
+        font-size: $font-size-26;
+        color: #999999;
+        box-sizing: border-box;
+        padding: 0 24rpx;
+    }
+    .title {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 24rpx;
+        .title-tab {
+            width: 100%;
+            height: 100rpx;
+            background: #fff;
+            z-index: 10;
+            font-size: $font-size-30;
+            text-align: left;
+            color: $text-color;
+            line-height: 100rpx;
+            font-weight: 600;
+        }
+        .title-msg {
+            width: 100%;
+            height: 236rpx;
+            padding: 18rpx;
+            background-color: rgba(225, 86, 22, 0.1);
+            color: $color-system;
+            box-sizing: border-box;
+            margin-bottom: 30rpx;
+            .tit {
+                line-height: 46rpx;
+                font-size: $font-size-24;
+                text-align: left;
+            }
+            .txt {
+                line-height: 38rpx;
+                font-size: $font-size-20;
+                text-align: justify;
+            }
+        }
+    }
+    .content {
+        width: 100%;
+        background-color: #ffffff;
+    }
+}
+.isLower {
+    width: 100%;
+    height: 116rpx;
+    line-height: 116rpx;
+    text-align: center;
+    color: #000000;
+    font-size: $font-size-32;
+    font-weight: bold;
+}
+.bottom-btn {
+    width: 100%;
+    height: 100rpx;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background: #ffffff;
+    z-index: 99;
+    .bottom-le {
+        width: 300rpx;
+        height: 100rpx;
+        padding: 10rpx 20rpx 10rpx 0;
+        float: left;
+        box-sizing: border-box;
+        .item-bt {
+            width: 80rpx;
+            height: 100%;
+            margin-right: 15rpx;
+            display: flex;
+            float: left;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            font-size: $font-size-22;
+            color: $text-color;
+            line-height: 34rpx;
+            position: relative;
+            .animation-num {
+                font-size: $font-size-32;
+                color: #ff2a2a;
+                position: absolute;
+                top: -12rpx;
+                right: 4rpx;
+                font-weight: bold;
+            }
+            .animation {
+                animation: showAmnation 2.2s ease-in-out both;
+            }
+            .restion {
+                animation: hideAmnation 1s ease-in-out both;
+            }
+            .icon-num {
+                position: absolute;
+                right: -12rpx;
+                top: -5rpx;
+            }
+            .icon-num.goleft {
+                right: 2rpx;
+            }
+            &:last-child {
+                margin-right: 0;
+            }
+            image {
+                width: 44rpx;
+                height: 44rpx;
+            }
+            button.contact-btn {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                box-sizing: border-box;
+                font-size: $font-size-24;
+                text-align: center;
+                text-decoration: none;
+                line-height: 34rpx;
+                border-radius: 0;
+                -webkit-tap-highlight-color: transparent;
+                overflow: hidden;
+                color: $text-color;
+                background-color: #ffffff;
+            }
+        }
+    }
+    .bottom-ri {
+        width: 450rpx;
+        height: 100%;
+        float: right;
+        display: flex;
+        box-sizing: border-box;
+        padding: 13rpx 20rpx 13rpx 0;
+        .btn {
+            flex: 1;
+            width: 200rpx;
+            line-height: 80rpx;
+            text-align: center;
+            font-size: $font-size-24;
+            color: #ffffff;
+        }
+        .btn-cart {
+            background-color: #ffe6dc;
+            color: $color-system;
+            border-radius: 42rpx 0 0 42rpx;
+        }
+        .btn-cart.disabled {
+            background-color: #e1e1e1;
+            color: #ffffff;
+        }
+        .btn-bay {
+            background: linear-gradient(to right, #f28f31 0%, #e15616 100%);
+            border-radius: 0 42rpx 42rpx 0;
+        }
+        .btn-bay.disabled {
+            background: linear-gradient(135deg, rgba(242, 143, 49, 0.5) 0%, rgba(225, 86, 22, 0.5) 100%);
+        }
+    }
+}
+.uni-badge--small {
+    -webkit-transform: scale(0.8);
+    -ms-transform: scale(0.8);
+    transform: scale(0.8);
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+}
+.uni-badge {
+    font-family: 'Helvetica Neue', Helvetica, sans-serif;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    font-size: 12px;
+    line-height: 1;
+    display: inline-block;
+    padding: 3px 6px;
+    color: #333;
+    border-radius: 100px;
+    background-color: #f1f1f1;
+}
+.uni-badge-error {
+    color: #fff;
+    background-color: #dd524d;
+}
+.product-topnav {
+    width: 100%;
+    height: 174rpx;
+    box-sizing: border-box;
+    background: #ffffff;
+    z-index: 990;
+    position: fixed;
+    opacity: 1;
+    left: 0;
+    &.fixed {
+        animation: showFixedColor 0.1s ease-in-out both;
+    }
+    &.none {
+        animation: hideFixedColor 0.1s ease-in-out both;
+    }
+    .navbar {
+        width: 100%;
+        height: 60rpx;
+        box-sizing: border-box;
+        padding: 0 24rpx;
+        display: flex;
+        .nav-item {
+            display: flex;
+            flex: 1;
+            justify-content: center;
+            align-items: center;
+            height: 60rpx;
+            font-size: $font-size-28;
+            color: $text-color;
+            position: relative;
+            float: left;
+            position: relative;
+            .line {
+                width: 60rpx;
+                height: 2px;
+                border-radius: 1px;
+                background: #ffffff;
+                position: absolute;
+                bottom: 0;
+                left: 50%;
+                margin-left: -30rpx;
+            }
+            &.current {
+                color: $color-system;
+                .line {
+                    background: $color-system;
+                }
+            }
+        }
+    }
+    .search-input {
+        width: 100%;
+        height: 114rpx;
+        padding: 24rpx;
+        box-sizing: border-box;
+        .gosearch-btn {
+            width: 100%;
+            height: 100%;
+            border-radius: 40rpx;
+            margin: 0 auto;
+            font-size: 26rpx;
+            line-height: 66rpx;
+            color: #b2b2b2;
+            position: relative;
+            box-sizing: border-box;
+            padding-left: 66rpx;
+            &.fixed {
+                background: rgba(70, 70, 70, 0.1);
+            }
+            &.none {
+                background: rgba(70, 70, 70, 0.1);
+            }
+            .search-icon {
+                width: 66rpx;
+                height: 66rpx;
+                position: absolute;
+                left: 0;
+                top: 2rpx;
+                text-align: center;
+                line-height: 66rpx;
+                .icon-iconfonticonfontsousuo1 {
+                    margin: 0 6rpx;
+                    font-size: $font-size-34;
+                    color: #b2b2b2;
+                    z-index: 10;
+                }
+            }
+            .search-text {
+                font-size: $font-size-24;
+                line-height: 66rpx;
+                color: #b2b2b2;
+            }
+        }
+    }
+}
+
+@keyframes showFixedColor {
+    0% {
+        background: rgba(255, 255, 255, 0);
+    }
+    50% {
+        background: rgba(255, 255, 255, 0.5);
+    }
+    100% {
+        background: rgba(255, 255, 255, 1);
+    }
+}
+@keyframes hideFixedColor {
+    0% {
+        background: rgba(255, 255, 255, 1);
+    }
+    50% {
+        background: rgba(255, 255, 255, 0.5);
+    }
+    100% {
+        background: rgba(255, 255, 255, 0);
+    }
+}
+/* 加入购物模态层*/
+@keyframes showPopup {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+@keyframes hidePopup {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+@keyframes showLayer {
+    0% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(-100%);
+    }
+}
+@keyframes hideLayer {
+    0% {
+        transform: translateY(-100%);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+@keyframes showAmnation {
+    0% {
+        top: -12rpx;
+        opacity: 0;
+    }
+    50% {
+        top: -60rpx;
+        opacity: 1;
+    }
+    100% {
+        top: -100rpx;
+        opacity: 0;
+    }
+}
+@keyframes hideAmnation {
+    0% {
+        top: -100rpx;
+        opacity: 0;
+    }
+    100% {
+        top: -12rpx;
+        opacity: 0;
+    }
+}
+.popup {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    display: none;
+    .mask {
+        position: fixed;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 21;
+        background-color: rgba(0, 0, 0, 0.6);
+    }
+    .layer {
+        position: fixed;
+        z-index: 22;
+        bottom: -294rpx;
+        width: 702rpx;
+        padding: 24rpx 24rpx 36rpx 24rpx;
+        height: 260rpx;
+        border-radius: 20rpx 20rpx 0 0;
+        background-color: #fff;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: space-between;
+        .content {
+            width: 100%;
+        }
+        .btn {
+            width: 100%;
+            height: 88rpx;
+            margin-top: 20rpx;
+            .button {
+                width: 100%;
+                height: 88rpx;
+                color: #fff;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: $btn-confirm;
+                font-size: $font-size-28;
+                border-radius: 44rpx;
+            }
+        }
+    }
+
+    &.show {
+        display: block;
+        .mask {
+            animation: showPopup 0.2s linear both;
+        }
+        .layer {
+            animation: showLayer 0.2s linear both;
+        }
+    }
+    &.hide {
+        display: block;
+        .mask {
+            animation: hidePopup 0.2s linear both;
+        }
+
+        .layer {
+            animation: hideLayer 0.2s linear both;
+        }
+    }
+    &.none {
+        display: none;
+    }
+    &.service {
+        .row {
+            margin: 30upx 0;
+            .title {
+                font-size: 30upx;
+                margin: 10upx 0;
+            }
+            .description {
+                font-size: 28upx;
+                color: #999;
+            }
+        }
+    }
+    .layer-smimg {
+        width: 114rpx;
+        height: 114rpx;
+        float: left;
+        border-radius: 10rpx;
+        margin-right: 24rpx;
+        image {
+            width: 114rpx;
+            height: 114rpx;
+            border-radius: 10rpx;
+        }
+    }
+    .layer-nunbox {
+        justify-content: space-between;
+        align-items: center;
+        width: 536rpx;
+        height: auto;
+        float: left;
+        .layer-nunbox-t {
+            width: 100%;
+            height: 44rpx;
+            position: relative;
+            display: flex;
+            margin-bottom: 10rpx;
+            .text {
+                font-size: $font-size-24;
+                line-height: 48rpx;
+                color: #999999;
+            }
+            .layer-nunbox-text {
+                line-height: 44rpx;
+                font-size: $font-size-28;
+            }
+            .number-box {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                border: 2rpx solid #ffe6dc;
+                border-radius: 30rpx;
+                height: 48rpx;
+                margin-left: 20rpx;
+                .iconfont {
+                    font-size: $font-size-24;
+                    padding: 0 18rpx;
+                    color: #999999;
+                    text-align: center;
+                    line-height: 48rpx;
+                    font-weight: bold;
+                    background: #fef6f3;
+                    &.icon-jianhao {
+                        border-radius: 30rpx 0 0 30rpx;
+                    }
+                    &.icon-jiahao {
+                        border-radius: 0 30rpx 30rpx 0;
+                    }
+                }
+                .btn-input {
+                    width: 62rpx;
+                    height: 48rpx;
+                    line-height: 48rpx;
+                    background: #ffffff;
+                    border-radius: 4rpx;
+                    text-align: center;
+                    font-size: $font-size-28;
+                }
+            }
+            .product-step {
+                position: absolute;
+                left: 45rpx;
+                bottom: 0;
+                height: 44rpx;
+                background: #ffffff;
+            }
+        }
+        .layer-nunbox-b {
+            width: 100%;
+            height: 44rpx;
+            margin-top: 13rpx;
+        }
+        .text {
+            line-height: 44rpx;
+            font-size: $font-size-28;
+            .p {
+                color: #ff2a2a;
+            }
+            .p:first-child {
+                margin-left: 30rpx;
+            }
+            .p.sm {
+                font-size: $font-size-24;
+            }
+        }
+    }
+}
+.tui-popup-box {
+    position: relative;
+    box-sizing: border-box;
+    min-height: 220rpx;
+    padding: 24rpx 24rpx 0 24rpx;
+    .tui-popup-close {
+        width: 90rpx;
+        height: 90rpx;
+        position: absolute;
+        right: 0;
+        top: 24rpx;
+        line-height: 90rpx;
+        text-align: center;
+        color: #b2b2b2;
+        .icon-iconfontguanbi {
+            font-size: $font-size-40;
+        }
+    }
+    .title {
+        font-size: $font-size-34;
+        color: $text-color;
+        line-height: 88rpx;
+        text-align: center;
+        float: left;
+        width: 100%;
+        height: 88rpx;
+        font-weight: bold;
+    }
+    .tui-popup-main {
+        width: 100%;
+        float: left;
+        &.coupon {
+            padding-bottom: 40rpx;
+            .coupon-empty {
+                width: 100%;
+                height: 600rpx;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                position: fixed;
+                background: $bg-color;
+                .empty-container-image {
+                    width: 150rpx;
+                    height: 150rpx;
+                    margin-bottom: 0;
+                    margin-top: 0;
+                }
+                .error-text {
+                    font-size: $font-size-28;
+                    color: #999999;
+                    line-height: 88rpx;
+                }
+            }
+        }
+        .tui-popup-scroll {
+            width: 100%;
+            height: 600rpx;
+            .coupon-list {
+                width: 100%;
+                height: 200rpx;
+                margin-top: 24rpx;
+                box-sizing: border-box;
+                background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
+                background-size: cover;
+                &:last-child {
+                    margin-bottom: 24rpx;
+                }
+                .list-cell-le {
+                    width: 224rpx;
+                    height: 100%;
+                    box-sizing: border-box;
+                    padding: 37rpx 0;
+                    float: left;
+                    .coupon-maxMoney {
+                        width: 100%;
+                        height: 78rpx;
+                        line-height: 78rpx;
+                        font-size: 56rpx;
+                        color: #ffffff;
+                        text-align: center;
+                        .small {
+                            font-size: $font-size-24;
+                        }
+                    }
+                    .coupon-minMoney {
+                        width: 100%;
+                        height: 33rpx;
+                        line-height: 33rpx;
+                        font-size: $font-size-24;
+                        color: #ffffff;
+                        text-align: center;
+                    }
+                }
+                .list-cell-ri {
+                    width: 478rpx;
+                    height: 100%;
+                    box-sizing: border-box;
+                    padding: 20rpx 24rpx 0 24rpx;
+                    float: right;
+                    .list-cell-top {
+                        width: 100%;
+                        height: 121rpx;
+                        float: left;
+                        border-bottom: 1px solid #e1e1e1;
+                        .list-cell-type {
+                            width: 286rpx;
+                            height: 100%;
+                            float: left;
+                            .list-cell-tags {
+                                width: 100%;
+                                height: 32rpx;
+                                margin-bottom: 7rpx;
+                                .tags {
+                                    display: inline-block;
+                                    padding: 0 10rpx;
+                                    height: 32rpx;
+                                    line-height: 32rpx;
+                                    background-color: #ffdcce;
+                                    color: #f94b4b;
+                                    font-size: $font-size-20;
+                                    border-radius: 8rpx;
+                                    text-align: center;
+                                    float: left;
+                                }
+                            }
+                            .list-cell-texts {
+                                width: 100%;
+                                height: auto;
+                                line-height: 35rpx;
+                                text-overflow: ellipsis;
+                                display: -webkit-box;
+                                word-break: break-all;
+                                -webkit-box-orient: vertical;
+                                -webkit-line-clamp: 2;
+                                overflow: hidden;
+                                font-size: 26rpx;
+                                color: #333333;
+                            }
+                        }
+                        .list-cell-btn {
+                            width: 128rpx;
+                            height: 100%;
+                            float: right;
+                            .icon-used {
+                                width: 100%;
+                                height: 100%;
+                                box-sizing: border-box;
+                                padding-top: 57rpx;
+                                .icon-used-btn {
+                                    width: 128rpx;
+                                    height: 48rpx;
+                                    border-radius: 28rpx;
+                                    line-height: 48rpx;
+                                    font-size: $font-size-26;
+                                    text-align: center;
+                                    &.receive {
+                                        background-image: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);
+                                        color: #ffffff;
+                                    }
+                                    &.make {
+                                        border: solid 1px #f94b4b;
+                                        color: #f94b4b;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    .list-cell-time {
+                        width: 100%;
+                        height: 58rpx;
+                        line-height: 58rpx;
+                        text-align: left;
+                        font-size: $font-size-20;
+                        color: #999999;
+                    }
+                }
+            }
+            &.train {
+                height: 240rpx;
+            }
+            .content-tr {
+                width: 100%;
+                min-height: 58rpx;
+                line-height: 58rpx;
+                display: flex;
+                .content-td {
+                    display: flex;
+                    flex: 3;
+                    font-size: $font-size-26;
+                    color: #999999;
+                    line-height: 58rpx;
+                    text-align: left;
+                }
+                .content-th {
+                    display: flex;
+                    flex: 7;
+                    font-size: $font-size-26;
+                    color: #333333;
+                    line-height: 58rpx;
+                    text-align: left;
+                    padding-left: 10rpx;
+                }
+            }
+        }
+    }
+}
+.tui-popup-btn {
+    width: 100%;
+    height: auto;
+    float: left;
+    margin-top: 24rpx;
+    .tui-button {
+        width: 100%;
+        height: 88rpx;
+        background: $btn-confirm;
+        line-height: 88rpx;
+        text-align: center;
+        color: #ffffff;
+        font-size: $font-size-28;
+        border-radius: 44rpx;
+    }
+}
+/*富文本样式*/
+rich-text.p {
+    width: 702rpx !important;
+    padding: 0 24rpx;
+    text-align: justify;
+}
+rich-text.img {
+    width: 100%;
+    height: auto;
+}
 </style>

pages/h5/other/pdf.vue

@@ -0,0 +1,43 @@
+<template>
+    <view class="pdf-view"> <view id="demo"></view> </view>
+</template>
+<script>
+// import Pdfh5 from 'pdfh5'
+import 'pdfh5/css/pdfh5.css'
+export default {
+    data() {
+        return {
+            pdfh5: null,
+            pdfurl: '',
+            title: ''
+        }
+    },
+    onLoad(option) {
+        console.log(option)
+        this.pdfurl = option.url
+        this.title = option.title || ''
+        uni.setNavigationBarTitle({
+            title: this.title
+        })
+    },
+    onReady() {
+        //实例化
+        // console.log(Pdfh5)
+        // this.pdfh5 = new Pdfh5('#demo', {
+        //     pdfurl: this.pdfurl,
+        //     lazy: true
+        // })
+        // //监听完成事件
+        // this.pdfh5.on('complete', function(status, msg, time) {
+        //     console.log('状态：' + status + '，信息：' + msg + '，耗时：' + time + '毫秒，总页数：' + this.totalNum)
+        // })
+    }
+}
+</script>
+
+<style lang="scss">
+.pdf-view {
+    width: 100%;
+    height: 100vh;
+}
+</style>

services/ajax.service.js

@@ -6,69 +6,69 @@ import corServiceUrl from './config.env'
 import { msg } from '@/utils/util'
 
 class AjaxService {
-	constructor() {
-		this.name = 'AjaxService'
-	}
-	getBaseUrl (url = '') {
-		return url.indexOf('://') > -1 ? url : url
-	}
-	getHeaders({ header = {} }) {
-		const REV_TOKEN_ENV = uni.getStorageSync('token') ? uni.getStorageSync('token') : 'X-token';
-		const REV_COOKIE_ENV = uni.getStorageSync('sessionid') ? uni.getStorageSync('sessionid') : 'sessionid';
-		header['Accept'] = 'application/json'
-		header['Content-Type'] = 'application/x-www-form-urlencoded'
-		header['X-Token'] = REV_TOKEN_ENV
-		header['cookie'] = REV_COOKIE_ENV
-		return header
-	}
-	request(options = {}) {
-		let header = this.getHeaders(options)
-		let url = this.getBaseUrl(options.url)
-		if (options.header) {
-			header = Object.assign(header, options.header)
-		}
-		if(options.isHost){
-			url = corServiceUrl + url
-		}else{
-			url = spiServiceUrl + url
-		}
-		let { isLoading = true } = options
-		if (isLoading) {
-			wx.showLoading({ title: '加载中' })
-		}
-		const requestPromise = new Promise((resolve, reject) => {
-			uni.request({
-				url: url,
-				method: options.method || 'POST',
-				data: options.data || {},
-				header,
-				success: res => {
-					if (isLoading) wx.hideLoading();
-					if(options.isStatus){
-						resolve(res.data)
-					}else{
-						if (res.data.code === 0) {
-							resolve(res.data)
-						} else {
-							reject(res.data)
-						}
-					}
-				},
-				fail: error => {
-					reject(error)
-					wx.hideLoading()
-				}
-			})
-		})
-		return requestPromise
-	}
-	get(options) {
-		options.method = 'GET'
-		return this.request(options)
-	}
-	post(options) {
-		options.method = 'POST'
-		return this.request(options)
-	}
+    constructor() {
+        this.name = 'AjaxService'
+    }
+    getBaseUrl (url = '') {
+        return url.indexOf('://') > -1 ? url : url
+    }
+    getHeaders({ header = {} }) {
+        const REV_TOKEN_ENV = uni.getStorageSync('token') ? uni.getStorageSync('token') : 'X-token'
+        const REV_COOKIE_ENV = uni.getStorageSync('sessionid') ? uni.getStorageSync('sessionid') : 'sessionid'
+        header['Accept'] = 'application/json'
+        header['Content-Type'] = 'application/x-www-form-urlencoded'
+        // header['X-Token'] = REV_TOKEN_ENV
+        header['cookie'] = REV_COOKIE_ENV
+        return header
+    }
+    request(options = {}) {
+        let header = this.getHeaders(options)
+        let url = this.getBaseUrl(options.url)
+        if (options.header) {
+            header = Object.assign(header, options.header)
+        }
+        if(options.isHost){
+            url = corServiceUrl + url
+        }else{
+            url = spiServiceUrl + url
+        }
+        let { isLoading = true } = options
+        if (isLoading) {
+            wx.showLoading({ title: '加载中' })
+        }
+        const requestPromise = new Promise((resolve, reject) => {
+            uni.request({
+                url: url,
+                method: options.method || 'POST',
+                data: options.data || {},
+                header,
+                success: res => {
+                    if (isLoading) wx.hideLoading()
+                    if(options.isStatus){
+                        resolve(res.data)
+                    }else{
+                        if (res.data.code === 0) {
+                            resolve(res.data)
+                        } else {
+                            reject(res.data)
+                        }
+                    }
+                },
+                fail: error => {
+                    reject(error)
+                    wx.hideLoading()
+                }
+            })
+        })
+        return requestPromise
+    }
+    get(options) {
+        options.method = 'GET'
+        return this.request(options)
+    }
+    post(options) {
+        options.method = 'POST'
+        return this.request(options)
+    }
 }
 export default new AjaxService()

services/beautyArchive.service.js

@@ -0,0 +1,39 @@
+/**
+ * 这是商品资料库相关的业务逻辑的服务
+ */
+export default class BeautyArchiveService {
+    constructor(AjaxService) {
+        Object.assign(this, { AjaxService })
+        this.name = 'BeautyArchiveService'
+    }
+
+    /* 获取资料库商品列表 */
+    GetArchiveProduct(data = {}) {
+        return this.AjaxService.get({
+            url: '/commodity/product/archive',
+            data,
+            isLoading: true,
+            isHost: true
+        })
+    }
+
+    /* 获取商品资料列表 */
+    GetProdcutArchiveDetails(data = {}) {
+        return this.AjaxService.get({
+            url: '/commodity/product/archive/detail',
+            data,
+            isLoading: true,
+            isHost: true
+        })
+    }
+
+    /* 采美豆抵扣 */
+    SearchArchiveByBeans(data = {}) {
+        return this.AjaxService.post({
+            url: '/user/club/archive/deduction',
+            data,
+            isLoading: true,
+            isHost:true
+        })
+    }
+}

services/index.js

@@ -15,6 +15,7 @@ import SecondService from './second.service'
 import PublicService from './public.service.js'
 import OtherService from './other.service.js'
 import UploadService from './upload.service.js'
+import BeautyArchive from './beautyArchive.service.js'
 
 let commonService = new CommonService(ajaxService)
 let locateService = new LocateService(ajaxService)
@@ -30,6 +31,7 @@ let secondService = new SecondService(ajaxService)
 let publicService = new PublicService(ajaxService)
 let otherService = new OtherService(ajaxService)
 let uploadService = new UploadService(ajaxService)
+let beautyArchive = new BeautyArchive(ajaxService)
 
 Vue.prototype.AjaxService = ajaxService
 Vue.prototype.CommonService = commonService
@@ -45,4 +47,5 @@ Vue.prototype.OrderService = orderService
 Vue.prototype.SecondService = secondService
 Vue.prototype.PublicService = publicService
 Vue.prototype.OtherService = otherService
-Vue.prototype.UploadService = uploadService
+Vue.prototype.UploadService = uploadService
+Vue.prototype.BeautyArchive = beautyArchive

utils/util.js

@@ -1,44 +1,66 @@
 /* 常用工具函数 */
-export const msg = (title, duration=1500, mask=true, icon='none')=>{
-	//统一提示方便全局修改
-	if(Boolean(title) === false){return;}
-	uni.showToast({
-		title,
-		duration,
-		mask,
-		icon
-	});
+export const msg = (title, duration = 1500, mask = true, icon = 'none') => {
+    //统一提示方便全局修改
+    if (Boolean(title) === false) { return }
+    uni.showToast({
+        title,
+        duration,
+        mask,
+        icon
+    })
 }
-export const modal = (title,content,confirmText,cancelText,showCancel=false,callBack) =>{
-	uni.showModal({
-		title,
-		content,
-		confirmText,
-		cancelText,
-		confirmColor:'#E15616',
-		showCancel,
-		success: function (res) {
-			if (res.confirm) {
-				callBack()
-			}
-		}
-	});
-}	
-export const json = type=>{
-	//模拟异步请求数据
-	return new Promise(resolve=>{
-		setTimeout(()=>{
-			// console.log(resolve+'======='+type);
-			resolve(Json[type]);
-		}, 500)
-	})
+export const modal = (title, content, confirmText, cancelText, showCancel = false, callBack) => {
+    uni.showModal({
+        title,
+        content,
+        confirmText,
+        cancelText,
+        confirmColor: '#E15616',
+        showCancel,
+        success: function(res) {
+            if (res.confirm) {
+                callBack()
+            }
+        }
+    })
+}
+export const json = type => {
+    //模拟异步请求数据
+    return new Promise(resolve => {
+        setTimeout(() => {
+            // console.log(resolve+'======='+type);
+            resolve(Json[type])
+        }, 500)
+    })
+}
+
+export const prePage = () => {
+    let pages = getCurrentPages()
+    let prePage = pages[pages.length - 2]
+    // #ifdef H5
+    return prePage
+    // #endif
+    return prePage.$vm
 }
 
-export const prePage = ()=>{
-	let pages = getCurrentPages();
-	let prePage = pages[pages.length - 2];
-	// #ifdef H5
-	return prePage;
-	// #endif
-	return prePage.$vm;
-}
+// 获取节点元素信息
+export const boundingClientRect = (component, selector, flag = false) => {
+    return new Promise((resolve, reject) => {
+        const query = uni.createSelectorQuery().in(component)
+        if (!flag) {
+            query
+                .select(selector)
+                .boundingClientRect(data => {
+                    resolve(data)
+                })
+                .exec()
+        } else {
+            query
+                .selectAll(selector)
+                .boundingClientRect(data => {
+                    resolve(data)
+                })
+                .exec()
+        }
+    })
+}