Explorar o código

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

# Conflicts:
#	pages/goods/product.vue
zhengjinyi %!s(int64=3) %!d(string=hai) anos
pai
achega
815e1c4083

+ 19 - 19
App.vue

@@ -3,7 +3,7 @@
 	 * vuex管理登陆状态,具体可以参考官方登陆模板示例
 	 */
 	import Vue from 'vue'
-	import { mapState,mapMutations} from 'vuex';
+	import { mapState,mapMutations} from 'vuex'
 	import authorize from '@/common/config/authorize.js'
 	export default {
 		onLaunch: function() {
@@ -32,20 +32,20 @@
 			// }
 			uni.getSystemInfo({
 				success: function(e) {
-					let modelmes = e.model;
-					console.log(e);
-					if (modelmes.search('iPhone 11') || modelmes.search('iPhone 11 Pro Max') ||modelmes.search('iPhone X') != -1) { //XS,XR,XS MAX均可以适配
+					let modelmes = e.model
+					console.log(e)
+					if (modelmes.search('iPhone 11') !== -1 || modelmes.search('iPhone 11 Pro Max') !== -1 ||modelmes.search('iPhone X') != -1) { //XS,XR,XS MAX均可以适配
 						self.$store.dispatch('setVariableFun',true)
 					}else{
 						self.$store.dispatch('setVariableFun',false)
 					}
 					// #ifndef MP
-					Vue.prototype.StatusBar = e.statusBarHeight;
+					Vue.prototype.StatusBar = e.statusBarHeight
 					if (e.platform == 'android') {
-						Vue.prototype.CustomBar = e.statusBarHeight + 50;
+						Vue.prototype.CustomBar = e.statusBarHeight + 50
 						Vue.prototype.platformClass = true
 					} else {
-						Vue.prototype.CustomBar = e.statusBarHeight + 45;
+						Vue.prototype.CustomBar = e.statusBarHeight + 45
 						Vue.prototype.platformClass = false
 					};
 					// #endif
@@ -59,22 +59,22 @@
 						Vue.prototype.platformClass = 'center'
 						self.$store.dispatch('setIsIphoneFun',true)
 					}
-					Vue.prototype.StatusBar = e.statusBarHeight;
+					Vue.prototype.StatusBar = e.statusBarHeight
 					Vue.prototype.fontSizeSetting = e.fontSizeSetting
 					Vue.prototype.screenWidth = e.screenWidth
-					let capsule = wx.getMenuButtonBoundingClientRect();
+					let capsule = wx.getMenuButtonBoundingClientRect()
 					Vue.prototype.capsule = capsule
 					if (capsule) {
-						Vue.prototype.Custom = capsule;
+						Vue.prototype.Custom = capsule
 						// Vue.prototype.capsuleSafe = uni.upx2px(750) - capsule.left + uni.upx2px(750) - capsule.right;
-						Vue.prototype.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
+						Vue.prototype.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight
 					} else {
-						Vue.prototype.CustomBar = e.statusBarHeight + 50;
+						Vue.prototype.CustomBar = e.statusBarHeight + 50
 					}
 					// #endif		
 					// #ifdef MP-ALIPAY
-					Vue.prototype.StatusBar = e.statusBarHeight;
-					Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
+					Vue.prototype.StatusBar = e.statusBarHeight
+					Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight
 					// #endif
 				}
 			})
@@ -86,8 +86,8 @@
 		methods:{
 			...mapMutations(['login','logout','isWxAuthorize']),
 			async getWxAuthorize(){
-				const wechatCode = await authorize.getCode('weixin');// 根据微信的code获取用户登录状态:1已登录过 -1未登录过
-				const getUserInfo = await authorize.getUserInfo('weixin');
+				const wechatCode = await authorize.getCode('weixin')// 根据微信的code获取用户登录状态:1已登录过 -1未登录过
+				const getUserInfo = await authorize.getUserInfo('weixin')
 				this.UserService.UserLoginAuthApplets({ 
 					code:wechatCode,
 					encryptedData:getUserInfo.encryptedData,
@@ -95,7 +95,7 @@
 				})
 				.then(response =>{
 					this.$store.commit('updateStatus',response.data)
-					this.login(response.data);
+					this.login(response.data)
 					uni.setStorageSync('token',response.data.token)
 					uni.setStorageSync('unionId',response.data.unionId)
 				})
@@ -115,13 +115,13 @@
 				})
 			},		
 			refresh(){
-				let TIME = (20*60)*1000;
+				let TIME = (20*60)*1000
 				setInterval(()=>{
 					this.getWxAuthorize()
 				},TIME)
 			},
 			diffTime(t){
-				let date = Date.now();
+				let date = Date.now()
 				return (date -t) < 2*60*1000 ? false : true
 			}
 		},

+ 345 - 328
common/config/caimeiApi.js

@@ -5,229 +5,229 @@
  */
 import requestUrl from '@/services/ajax.env.js'
 const caimeiApi = {
-	/**
+    /**
 	 * @封装公共get数据请求方法无加载动画
 	 * @方法参数:请求地址,请求后台需要的参数字段,回调函数
 	 * @自定义请求头信息
 	 */
-	get:function(url,data,callback){
+    get:function(url,data,callback){
 		 uni.request({
-			url: requestUrl + url,
-			data:data,
-			header: {
-				'Accept': 'application/json',
-				'Content-Type': 'application/x-www-form-urlencoded', 
-				'X-Token': uni.getStorageSync('token') ? uni.getStorageSync('token') : 'token',
-				'cookie': uni.getStorageSync('sessionid')
-			},
-			method: 'GET',
-			success: (response) => {
-				if(response.statusCode !== 200){
-					uni.showToast({icon: 'none',title:'服务器连接错误',duration: 2000})
-					callback(response.statusCode)
-				}else{
-					callback(response.data)
-				}
-			},
-			fail: (error) => {
-				if (error) {
-					uni.showToast({icon: 'none',title: '网络错误,请稍后重试',duration: 2000})
-				}
-			}
+            url: requestUrl + url,
+            data:data,
+            header: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/x-www-form-urlencoded', 
+                'X-Token': uni.getStorageSync('token') ? uni.getStorageSync('token') : 'token',
+                'cookie': uni.getStorageSync('sessionid')
+            },
+            method: 'GET',
+            success: (response) => {
+                if(response.statusCode !== 200){
+                    uni.showToast({icon: 'none',title:'服务器连接错误',duration: 2000})
+                    callback(response.statusCode)
+                }else{
+                    callback(response.data)
+                }
+            },
+            fail: (error) => {
+                if (error) {
+                    uni.showToast({icon: 'none',title: '网络错误,请稍后重试',duration: 2000})
+                }
+            }
 		 })
-	},
-	/**
+    },
+    /**
 	 * @封装公共get数据请求方法有加载动画
 	 * @方法参数:请求地址,请求后台需要的参数字段,回调函数
 	 * @自定义请求头信息
 	 */
-	lodingGet:function(url,data,callback){
+    lodingGet:function(url,data,callback){
 		 uni.showLoading({mask: true,title:'加载中~',})
 		 uni.request({
-			url: requestUrl + url,
-			data:data,
-			header: {
-				'Accept': 'application/json',
-				'Content-Type': 'application/x-www-form-urlencoded', 
-				'X-Token': uni.getStorageSync('token') ? uni.getStorageSync('token') : 'token',
-				'cookie': uni.getStorageSync('sessionid')
-			},
-			method: 'GET',
-			success: (response) => {
-				if(response.statusCode !== 200){
-					uni.showToast({icon: 'none',title: '服务器连接错误',duration: 2000})
-					callback(response.statusCode)
-				}else{
-					callback(response.data)
-				}
-			},
-			fail: (error) => {
-				if (error) {
-					uni.showToast({icon: 'none',title: '网络错误,请稍后重试',duration: 2000})
-				}
-			},
-			complete: () => {
-				setTimeout(function () {
-					uni.hideLoading()
-				}, 250)
-			}
+            url: requestUrl + url,
+            data:data,
+            header: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/x-www-form-urlencoded', 
+                'X-Token': uni.getStorageSync('token') ? uni.getStorageSync('token') : 'token',
+                'cookie': uni.getStorageSync('sessionid')
+            },
+            method: 'GET',
+            success: (response) => {
+                if(response.statusCode !== 200){
+                    uni.showToast({icon: 'none',title: '服务器连接错误',duration: 2000})
+                    callback(response.statusCode)
+                }else{
+                    callback(response.data)
+                }
+            },
+            fail: (error) => {
+                if (error) {
+                    uni.showToast({icon: 'none',title: '网络错误,请稍后重试',duration: 2000})
+                }
+            },
+            complete: () => {
+                setTimeout(function () {
+                    uni.hideLoading()
+                }, 250)
+            }
 		 })
-	},
-	/**
+    },
+    /**
 	 * @封装公共post数据请求方法
 	 * @方法参数:请求地址,请求后台需要的参数字段,回调函数
 	 */
-	post:function(url,data,loadingStatus,callback){
-		if(loadingStatus){uni.showLoading({mask: true,title:'加载中~'})}
-		uni.request({
-			url: requestUrl+url,
-			data:data,
-			header: {
-				'Accept': 'application/json',
-				'Content-Type': 'application/x-www-form-urlencoded',
-				'X-Token': uni.getStorageSync('token') ? uni.getStorageSync('token') : 'token',
-				'cookie': uni.getStorageSync('sessionid')
-			},
-			method: 'POST',
-			success: (response) => {
-				if(loadingStatus){uni.hideLoading()}
-				const result = response.data
-				callback(result)
-			},
-			fail: (error) => {
-				uni.hideLoading()
-				if (error) {
-					uni.showToast({icon: 'none',title: '网络错误,请稍后重试',duration: 2000})
-				}
-			}
-		})
-	},
-	getComStorage:function(key){// 获取本地Storage
-		return new Promise(function(resolve,reject) {
-			uni.getStorage({
-				key: key,
-				success: function (res){
-					resolve(res.data)
-				},
-				fail: function(res){
-					reject(false)
-				}
-			})
-		})
-	},
-	setStorage:function(key,data){// 存储本地Storage
-		return new Promise(function(resolve,reject) {
-			uni.setStorage({
-				key: key,
-				data:data,
-				success: function (res){
-				}
-			})
-		})
-	},
-	getStorage:function(){// 获取本地userInfo
-		return new Promise(function(resolve,reject) {
-			uni.getStorage({
-				key: 'userInfo',
-				success: function (res){
-					resolve(res.data)
-				},
-				fail: function(res){
-					reject(false)
-				}
-			})
-		})
-	},
-	getStorageAddressKey:function(){// 获取本地地址信息
-		return new Promise(function(resolve,reject) {
-			uni.getStorage({
-				key: 'address_key',
-				success: function (res){
-					resolve(res.data)
-				}
-			})
-		})
-	},
-	loginStatus:function(){
-	// 获取用户是否登陆 1:已登陆,否则未登陆
-		return new Promise(function(resolve,reject) {
-			uni.getStorage({
-				key: 'userInfo',
-				success: function (res){
-					if(res.data.code == '1'){
-						resolve(true)
-					} else {
-						resolve(false)
-					}
-				}
-			})
-		})
-	},
-	navToListPage:function({type,value,id,lType} = {}){	
-	// 跳转到列表页
-		if(lType=='4'){
-			const pages = getCurrentPages()
-			const prevPage = pages[pages.length-2]
-			prevPage.refresh = true
-			prevPage.listData = {
-				type: type,
-				from: value,
-				id: id
-			}
-			uni.navigateBack({
-				delta: 1
-			})
-		}else{
-			uni.navigateTo({
-				url:`/pages/goods/goods?type=${type}&from=${value}&id=${id}`
-			})
-		}
-	},
-	navigateToGoods:function({type,value,id,lType} = {}){
-	// 跳转到列表页
-		if(lType=='4'){
-			const pages = getCurrentPages()
-			const prevPage = pages[pages.length-2]
-			prevPage.refresh = true
-			prevPage.listData = {
-				type: type,
-				from: value,
-				id: id
-			}
-			uni.navigateBack({
-				delta: 1
-			})
-		}else{
-			uni.navigateTo({
-				url:`/pages/goods/goods-classify?type=${type}&from=${value}&id=${id}`
-			})
-		}
-	},
-	FlooryNavigateTo:function(pros){
-		if(pros.listType == 1){
-			if(pros.product.productCategory == '1'){
-				uni.navigateTo({
+    post:function(url,data,loadingStatus,callback){
+        if(loadingStatus){uni.showLoading({mask: true,title:'加载中~'})}
+        uni.request({
+            url: requestUrl+url,
+            data:data,
+            header: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'X-Token': uni.getStorageSync('token') ? uni.getStorageSync('token') : 'token',
+                'cookie': uni.getStorageSync('sessionid')
+            },
+            method: 'POST',
+            success: (response) => {
+                if(loadingStatus){uni.hideLoading()}
+                const result = response.data
+                callback(result)
+            },
+            fail: (error) => {
+                uni.hideLoading()
+                if (error) {
+                    uni.showToast({icon: 'none',title: '网络错误,请稍后重试',duration: 2000})
+                }
+            }
+        })
+    },
+    getComStorage:function(key){// 获取本地Storage
+        return new Promise(function(resolve,reject) {
+            uni.getStorage({
+                key: key,
+                success: function (res){
+                    resolve(res.data)
+                },
+                fail: function(res){
+                    reject(false)
+                }
+            })
+        })
+    },
+    setStorage:function(key,data){// 存储本地Storage
+        return new Promise(function(resolve,reject) {
+            uni.setStorage({
+                key: key,
+                data:data,
+                success: function (res){
+                }
+            })
+        })
+    },
+    getStorage:function(){// 获取本地userInfo
+        return new Promise(function(resolve,reject) {
+            uni.getStorage({
+                key: 'userInfo',
+                success: function (res){
+                    resolve(res.data)
+                },
+                fail: function(res){
+                    reject(false)
+                }
+            })
+        })
+    },
+    getStorageAddressKey:function(){// 获取本地地址信息
+        return new Promise(function(resolve,reject) {
+            uni.getStorage({
+                key: 'address_key',
+                success: function (res){
+                    resolve(res.data)
+                }
+            })
+        })
+    },
+    loginStatus:function(){
+        // 获取用户是否登陆 1:已登陆,否则未登陆
+        return new Promise(function(resolve,reject) {
+            uni.getStorage({
+                key: 'userInfo',
+                success: function (res){
+                    if(res.data.code == '1'){
+                        resolve(true)
+                    } else {
+                        resolve(false)
+                    }
+                }
+            })
+        })
+    },
+    navToListPage:function({type,value,id,lType} = {}){	
+        // 跳转到列表页
+        if(lType=='4'){
+            const pages = getCurrentPages()
+            const prevPage = pages[pages.length-2]
+            prevPage.refresh = true
+            prevPage.listData = {
+                type: type,
+                from: value,
+                id: id
+            }
+            uni.navigateBack({
+                delta: 1
+            })
+        }else{
+            uni.navigateTo({
+                url:`/pages/goods/goods?type=${type}&from=${value}&id=${id}`
+            })
+        }
+    },
+    navigateToGoods:function({type,value,id,lType} = {}){
+        // 跳转到列表页
+        if(lType=='4'){
+            const pages = getCurrentPages()
+            const prevPage = pages[pages.length-2]
+            prevPage.refresh = true
+            prevPage.listData = {
+                type: type,
+                from: value,
+                id: id
+            }
+            uni.navigateBack({
+                delta: 1
+            })
+        }else{
+            uni.navigateTo({
+                url:`/pages/goods/goods-classify?type=${type}&from=${value}&id=${id}`
+            })
+        }
+    },
+    FlooryNavigateTo:function(pros){
+        if(pros.listType == 1){
+            if(pros.product.productCategory == '1'){
+                uni.navigateTo({
 				  	url:`/pages/goods/product?id=${pros.product.productId}`
-				})
-			}else{
-				uni.navigateTo({
+                })
+            }else{
+                uni.navigateTo({
 				  	url:`/pages/second/product/product-details?id=${pros.product.productId}`
-				})
-			}
-		}else{
-			/**
+                })
+            }
+        }else{
+            /**
 			 * 页面跳转类型
 			 * 1、二级页面,2、搜索项目仪器,3、直播页面,4、自由页面,5、商品详情,6、仪器项目详情,7、供应商主页
 			 * 8、专题活动页,9、二手市场介绍,10、二手商品列表,11、二手商品发布,12、商品搜索,13、信息详情
 			 * 14、品牌招商介绍页,15、维修保养介绍页,16、首页,17、注册页,18、信息中心,19、供应商列表
 			 **/
-			if(pros.linkType){
-				console.log(pros.linkType)
-				const typeMap = {
+            if(pros.linkType){
+                console.log(pros.linkType)
+                const typeMap = {
 				 	1:`/pages/goods/goods-instrument?linkId=${pros.linkParam.id}`,
 				 	2:`/pages/goods/instrument-details?id=${pros.linkParam.id}`,
 				 	3:`/pages/h5/article/page-image?image=${pros.adsImage}&title=专题直播`,
-					4:`/pages/h5/activity/activity?title=${pros.crmTitle}&link=${pros.crmLink}`,
+                    4:`/pages/h5/activity/activity?title=${pros.crmTitle}&link=${pros.crmLink}`,
 				 	5:`/pages/goods/product?id=${pros.linkParam.id}`,
 				 	// 7:`/pages/supplier/user/my-shop?shopId=${pros.linkParam.id}`,
 				 	8:'/pages/h5/activity/activity-list',
@@ -238,128 +238,130 @@ const caimeiApi = {
 				 	13:`/pages/h5/article/path?link=${pros.link}`,
 				 	14:`/pages/h5/article/path?link=${pros.link}`,
 				 	15:`/pages/h5/article/path?link=${pros.link}`,
-					// '-1':`/pages/h5/article/path?link=${pros.link}`,
+                    // '-1':`/pages/h5/article/path?link=${pros.link}`,
 				 	17:'/pages/login/register-select',
 				 	18:`/pages/h5/article/path?link=${pros.link}`,
 				 	19:`/pages/search/search-supplier?keyWord=${pros.linkParam.keyword}`,
-					21:'/pages/h5/activity/meobohui',
-					24:'/pages/user/coupon/coupon',
-					23:`/pages/h5/activity/activity-topic?linkId=${pros.linkParam.id}`
-				}
-				const url = typeMap[pros.linkType]
-				uni.navigateTo({
+                    21:'/pages/h5/activity/meobohui',
+                    23:`/pages/h5/activity/activity-topic?linkId=${pros.linkParam.id}`,
+                    24:'/pages/user/coupon/coupon',
+                    25:'/pages/goods/goods-doc-list' //美业资料
+                }
+                const url = typeMap[pros.linkType]
+                uni.navigateTo({
 				  	url:url
-				})
-			}
-		}
-	},
-	BannerNavigateTo:function(linkType,linkId,linkHref,keyword){//楼层跳转判断
-		if(linkType){
-			const typeMap = {
-				1:`/pages/goods/goods-instrument?linkId=${linkId}`,
-				2:`/pages/goods/instrument-details?id=${linkId}`,
-				4:`/pages/h5/activity/activity?id=${linkId}`,
-				5:`/pages/goods/product?id=${linkId}`, 
-				// 7:`/pages/supplier/user/my-shop?shopId=${linkId}`,
-				8:'/pages/h5/activity/activity-list',
-				9:'/pages/second/form/introduce',
-				10:'/pages/second/product/product-list',
-				11:'/pages/second/form/form',
-				12:`/pages/search/search?keyWord=${keyword}`,
-				13:`/pages/h5/article/path?link=${linkHref}`,
-				14:`/pages/h5/article/path?link=${linkHref}`,
-				15:`/pages/h5/article/path?link=${linkHref}`,
-				17:'/pages/login/register-select',
-				18:`/pages/h5/article/path?link=${linkHref}`,
-				19:`/pages/search/search-supplier?keyWord=${keyword}`,
-				21:'/pages/h5/activity/meobohui',
-				// '-1':`/pages/h5/article/path?link=${pros.link}`
-				24:'/pages/user/coupon/coupon'
-			}
-			const url = typeMap[linkType]
-			uni.navigateTo({
+                })
+            }
+        }
+    },
+    BannerNavigateTo:function(linkType,linkId,linkHref,keyword){//楼层跳转判断
+        if(linkType){
+            const typeMap = {
+                1:`/pages/goods/goods-instrument?linkId=${linkId}`,
+                2:`/pages/goods/instrument-details?id=${linkId}`,
+                4:`/pages/h5/activity/activity?id=${linkId}`,
+                5:`/pages/goods/product?id=${linkId}`, 
+                // 7:`/pages/supplier/user/my-shop?shopId=${linkId}`,
+                8:'/pages/h5/activity/activity-list',
+                9:'/pages/second/form/introduce',
+                10:'/pages/second/product/product-list',
+                11:'/pages/second/form/form',
+                12:`/pages/search/search?keyWord=${keyword}`,
+                13:`/pages/h5/article/path?link=${linkHref}`,
+                14:`/pages/h5/article/path?link=${linkHref}`,
+                15:`/pages/h5/article/path?link=${linkHref}`,
+                17:'/pages/login/register-select',
+                18:`/pages/h5/article/path?link=${linkHref}`,
+                19:`/pages/search/search-supplier?keyWord=${keyword}`,
+                21:'/pages/h5/activity/meobohui',
+                // '-1':`/pages/h5/article/path?link=${pros.link}`
+                24:'/pages/user/coupon/coupon',
+                25:'/pages/goods/goods-doc-list'  //美业资料
+            }
+            const url = typeMap[linkType]
+            uni.navigateTo({
 			 	url:url
-			})
-		}
-	},
-	navigateTo:function(url){
-		//路由跳转:页面之间路由跳转
-		uni.navigateTo({
-			url:url
-		})
-	},
-	redirectTo:function(url){
-	//路由跳转:关闭当前页跳转到新页面	
-		uni.redirectTo({
-			url:url
-		})
-	},
-	switchTabTo:function(url){
-	//路由跳转:底部 tab页
-		uni.switchTab({
-			url:url
-		})
-	},
-	isNumber:function(value){//验证是否为数字
+            })
+        }
+    },
+    navigateTo:function(url){
+        //路由跳转:页面之间路由跳转
+        uni.navigateTo({
+            url:url
+        })
+    },
+    redirectTo:function(url){
+        //路由跳转:关闭当前页跳转到新页面	
+        uni.redirectTo({
+            url:url
+        })
+    },
+    switchTabTo:function(url){
+        //路由跳转:底部 tab页
+        uni.switchTab({
+            url:url
+        })
+    },
+    isNumber:function(value){//验证是否为数字
 	    var patrn = /^(-)?\d+(\.\d+)?$/
 	    if (patrn.exec(value) == null || value == '') {
 	         return false
 	    } else {
 	         return true  
-		}	 
-	},
-	getWindowHeight:function(){
-		// 获取窗口高度
-		const {windowHeight, pixelRatio} = wx.getSystemInfoSync()
-		return windowHeight
-	},
-	adaptRichTextImg:function(res){
-		/**
+        }	 
+    },
+    getWindowHeight:function(){
+        // 获取窗口高度
+        const {windowHeight, pixelRatio} = wx.getSystemInfoSync()
+        return windowHeight
+    },
+    adaptRichTextImg:function(res){
+        /**
 		 *@富文本实现图片自适应
 		 *@style再添加自适应样式
 		 */ 
-		const html = res.replace(/<img[^>]*>/gi,function(match,capture){			
-			let match1 = match.replace(/<img*/gi, '<img style="width:100% !important;height:auto !important;float:left !important;"'),
-				results = match1.replace(/style=/gi, 'style="width:100%;height:auto;float:left;"')
-			return results
-		})
-		return html	
-	},
-	FormatMoney:function(num){
-		// 金额千分位
-		return num.toString().replace(/\d+/, function (n) { // 先提取整数部分
-			return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) { // 对整数部分添加分隔符
-				return $1 + ','
-			})
-		})
-	},
-	formatDate:function(){
-		//获取当前时间
-		let date = new Date()
-		let y = date.getFullYear()
-		let MM = date.getMonth() + 1
-		MM = MM < 10 ? ('0' + MM) : MM
-		let d = date.getDate()
-		d = d < 10 ? ('0' + d) : d
-		let h = date.getHours()
-		h = h < 10 ? ('0' + h) : h
-		let m = date.getMinutes()
-		m = m < 10 ? ('0' + m) : m
-		let s = date.getSeconds()
-		s = s < 10 ? ('0' + s) : s
+        const html = res.replace(/<img[^>]*>/gi,function(match,capture){			
+            let match1 = match.replace(/<img*/gi, '<img style="width:100% !important;height:auto !important;float:left !important;"'),
+                results = match1.replace(/style=/gi, 'style="width:100%;height:auto;float:left;"')
+            return results
+        })
+        return html	
+    },
+    FormatMoney:function(num){
+        // 金额千分位
+        return num.toString().replace(/\d+/, function (n) { // 先提取整数部分
+            return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) { // 对整数部分添加分隔符
+                return $1 + ','
+            })
+        })
+    },
+    formatDate:function(){
+        //获取当前时间
+        let date = new Date()
+        let y = date.getFullYear()
+        let MM = date.getMonth() + 1
+        MM = MM < 10 ? ('0' + MM) : MM
+        let d = date.getDate()
+        d = d < 10 ? ('0' + d) : d
+        let h = date.getHours()
+        h = h < 10 ? ('0' + h) : h
+        let m = date.getMinutes()
+        m = m < 10 ? ('0' + m) : m
+        let s = date.getSeconds()
+        s = s < 10 ? ('0' + s) : s
 	    return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
-	},
-	regexSets:function() {
-		let sets = {
-			'companyName': /^[\u4e00-\u9fa5\(\)()\s\da-zA-Z&]{2,50}$/gi,
-			'phoneAndTelephone': /^([1]\d{10}|([\((]?0[0-9]{2,3}[)\)]?[-]?)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?)$/,
-			'bankNum': /^([1-9]{1})(\d{18})$/,
-			'invalidChar': /^[\s\u4e00-\u9fa5a-z0-9_-]{0,}$/
-		}
-		return sets
-	},
-	timestampToTime:function(timestamp) {
-		// 时间戳转日期
+    },
+    regexSets:function() {
+        let sets = {
+            'companyName': /^[\u4e00-\u9fa5\(\)()\s\da-zA-Z&]{2,50}$/gi,
+            'phoneAndTelephone': /^([1]\d{10}|([\((]?0[0-9]{2,3}[)\)]?[-]?)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?)$/,
+            'bankNum': /^([1-9]{1})(\d{18})$/,
+            'invalidChar': /^[\s\u4e00-\u9fa5a-z0-9_-]{0,}$/
+        }
+        return sets
+    },
+    timestampToTime:function(timestamp) {
+        // 时间戳转日期
 	   let date = new Date(timestamp * 1000)//时间戳为10位需*1000,时间戳为13位的话不需乘1000
 	   let Y = date.getFullYear() + '-'
 	   let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
@@ -368,33 +370,48 @@ const caimeiApi = {
 	   let m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':'
 	   let s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds())
 	   return `${Y}${M}${D}${h}${m}${s}`
-	}
+    },
+    easyFormatData(timestamp){
+        //时间转换
+        let a = new Date(timestamp).getTime()
+        const date = new Date(a)
+        const Y = date.getFullYear() + '-'
+        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
+        const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + '  '
+        const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':'
+        const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) 
+        // const s = date.getSeconds(); // 秒
+        const dateString = Y + M + D + h + m
+        // console.log('dateString', dateString); // > dateString 2021-07-06 14:23
+        return dateString
+    }
 }
 
 /**
  *@导出
  */ 
 module.exports = {
-	get: caimeiApi.get,
-	post: caimeiApi.post,
-	lodingGet: caimeiApi.lodingGet,
-	isNumber: caimeiApi.isNumber,
-	FormatMoney: caimeiApi.FormatMoney,
-	navigateTo: caimeiApi.navigateTo,
-	redirectTo: caimeiApi.redirectTo,
-	switchTabTo: caimeiApi.switchTabTo,
-	formatDate: caimeiApi.formatDate,
-	loginStatus: caimeiApi.loginStatus,
-	setStorage: caimeiApi.setStorage,
-	getStorage: caimeiApi.getStorage,
-	getComStorage: caimeiApi.getComStorage,
-	navToListPage: caimeiApi.navToListPage,
-	navigateToGoods: caimeiApi.navigateToGoods,
-	getWindowHeight: caimeiApi.getWindowHeight,
-	adaptRichTextImg: caimeiApi.adaptRichTextImg,
-	getStorageAddressKey: caimeiApi.getStorageAddressKey,
-	regexSets: caimeiApi.regexSets,
-	timestampToTime: caimeiApi.timestampToTime,
-	BannerNavigateTo:caimeiApi.BannerNavigateTo,
-	FlooryNavigateTo:caimeiApi.FlooryNavigateTo 
+    get: caimeiApi.get,
+    post: caimeiApi.post,
+    lodingGet: caimeiApi.lodingGet,
+    isNumber: caimeiApi.isNumber,
+    FormatMoney: caimeiApi.FormatMoney,
+    navigateTo: caimeiApi.navigateTo,
+    redirectTo: caimeiApi.redirectTo,
+    switchTabTo: caimeiApi.switchTabTo,
+    formatDate: caimeiApi.formatDate,
+    loginStatus: caimeiApi.loginStatus,
+    setStorage: caimeiApi.setStorage,
+    getStorage: caimeiApi.getStorage,
+    getComStorage: caimeiApi.getComStorage,
+    navToListPage: caimeiApi.navToListPage,
+    navigateToGoods: caimeiApi.navigateToGoods,
+    getWindowHeight: caimeiApi.getWindowHeight,
+    adaptRichTextImg: caimeiApi.adaptRichTextImg,
+    getStorageAddressKey: caimeiApi.getStorageAddressKey,
+    regexSets: caimeiApi.regexSets,
+    timestampToTime: caimeiApi.timestampToTime,
+    BannerNavigateTo:caimeiApi.BannerNavigateTo,
+    FlooryNavigateTo:caimeiApi.FlooryNavigateTo,
+    easyFormatData:caimeiApi.easyFormatData
 }

+ 14 - 4
components/cm-module/activityContact/index.vue

@@ -11,9 +11,9 @@
             <view class="cm-icon cm-bround cm-mobile" @click="handelShowMobile">
                 <view class="cm-dialog" v-show="mobileVisiable">
                     <view class="cm-dialog-content content1">
-                        <view class="cm-item"> <text>展会咨询电话:15338897365</text> </view>
+                        <view class="cm-item" @click="phoneCall('15338897365')"> <text>展会咨询电话:15338897365</text> </view>
                         <view class="cm-line line1"></view>
-                        <view class="cm-item"> <text>客服咨询电话:15338851365</text> </view>
+                        <view class="cm-item" @click="phoneCall('15338851365')"> <text>客服咨询电话:15338851365</text> </view>
                     </view>
                 </view>
             </view>
@@ -22,6 +22,7 @@
                     <view class="cm-dialog-content content2">
                         <view class="cm-item">
                             <image
+                                show-menu-by-longpress
                                 src="https://static.caimei365.com/app/img/icon2/cm_wechat_02.png"
                                 mode="widthFix"
                             ></image>
@@ -30,6 +31,7 @@
                         <view class="cm-line line2"></view>
                         <view class="cm-item">
                             <image
+                                show-menu-by-longpress
                                 src="https://static.caimei365.com/app/img/icon2/cm_wechat_01.png"
                                 mode="widthFix"
                             ></image>
@@ -89,8 +91,15 @@ export default {
             this.pageInfo.redPacketEndTime
         )
         console.log(this.pageInfo)
-    },
+    }, 
     methods: {
+        // 拨打电话
+        phoneCall(number){
+            console.log(number)
+            uni.makePhoneCall({
+                phoneNumber: number //仅为示例
+            })
+        },
         // 是否展开
         handleToggleAcitve(active) {
             this.isActive = active
@@ -217,6 +226,7 @@ export default {
     padding: 20rpx;
     background: rgb(255, 92, 0);
     border-radius: 16rpx;
+    z-index: 99999;
     &::after {
         position: absolute;
         top: 20rpx;
@@ -279,7 +289,7 @@ export default {
     justify-content: center;
     align-items: center;
     position: fixed;
-    z-index: 999;
+    // z-index: 999;
     top: 0;
     left: 0;
     width: 100vw;

+ 11 - 10
components/cm-module/homeIndex/navbars.vue

@@ -13,7 +13,7 @@
 
 <script>
 	export default{
-		name:"navbars",
+		name:'navbars',
 		props:{
 			list:{
 				type:Array
@@ -43,22 +43,23 @@
 				 * 14、品牌招商介绍页,15、维修保养介绍页,16、首页,17、注册页,18、信息中心,19、供应商列表
 				 * 23、新活动专题页面
 				 **/
-				console.log(pros);
+				console.log(pros)
 				if(pros.linkType){
 					 const typeMap = {
 						1:`/pages/goods/goods-instrument?linkId=${pros.linkParam.id}&title=${pros.name}`,
-						3:`/pages/h5/article/path-live`,
-						4:`/pages/h5/other/brands`,
-						10:`/pages/second/product/product-list`,
-						14:`/pages/h5/other/brand`,
-						15:`/pages/h5/other/repair`,
+						3:'/pages/h5/article/path-live',
+						4:'/pages/h5/other/brands',
+						10:'/pages/second/product/product-list',
+						14:'/pages/h5/other/brand',
+						15:'/pages/h5/other/repair',
 						18:`/pages/h5/article/path?link=${pros.link}`,
 						20:`/pages/goods/good-floor?linkId=${pros.linkParam.id}&title=${pros.name}`,
-						21:`/pages/h5/activity/meobohui`,
+						21:'/pages/h5/activity/meobohui',
 						22:`/pages/goods/good-floor-temp?linkId=${pros.linkParam.id}&title=${pros.name}`,
-						23:`/pages/h5/activity/activity-topic?linkId=${pros.linkParam.id}`  //活动专题页面
+						23:`/pages/h5/activity/activity-topic?linkId=${pros.linkParam.id}`,  //活动专题页面
+                        25:'/pages/goods/goods-doc-list' //美业资料
 					 }
-					const url = typeMap[pros.linkType];
+					const url = typeMap[pros.linkType]
 					this.$api.navigateTo(url)
 				}
 			}

+ 629 - 0
components/cm-module/productDetails/cm-product-doc.vue

@@ -0,0 +1,629 @@
+<template>
+    <view
+        class="product-doc "
+        :class="{ hasBottom: TipStatus }"
+        :style="{ paddingBottom: isIphoneX && TipStatus ? '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">{{ $api.easyFormatData(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">{{ $api.easyFormatData(item.addTime) }}</view>
+                        <view class="cm-video-list">
+                            <video
+                                class="cm-video"
+                                :id="'myVideo' + index"
+                                :src="item.fileUrl"
+                                :style="videoStyle['myVideo' + index]"
+                                controls
+                                show-fullscreen-btn
+                                show-mute-btn
+                                play-btn-position="center"
+                                @play="handlePlayer('myVideo' + index)"
+                                v-if="item.fileUrl"
+                                @loadedmetadata="loadedmetadata"
+                            ></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">{{ $api.easyFormatData(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', //默认视频封面
+            videoStyle: {}
+        }
+    },
+    computed: {
+        ...mapState(['isIphoneX']),
+        //资料查看状态提示
+        TipStatus() {
+            // 资料权限
+            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]
+        }
+    },
+    watch: {
+        TipStatus(val) {
+            this.$emit('tipStatus', this.TipStatus)
+        }
+    },
+    created() {
+        this.userId = uni.getStorageSync('userInfo').userId || -1
+        this.getDetail()
+    },
+    methods: {
+        // 获取商品资料详情
+        getDetail() {
+            this.BeautyArchive.GetProdcutArchiveDetails({
+                userId: this.userId,
+                archiveId: this.archiveId
+            }).then(res => {
+                this.imageArchiveList = res.data.imageArchiveList
+                this.videoArchiveList = res.data.videoArchiveList
+                this.fileArchiveList = res.data.fileArchiveList
+                this.permission = res.data.permission
+            })
+        },
+        //采美豆抵扣
+        searchArchiveByBean() {
+            this.BeautyArchive.SearchArchiveByBeans({
+                userId: this.userId,
+                archiveId: this.archiveId
+            })
+                .then(res => {
+                    uni.showToast({
+                        duration: 1500,
+                        title: res.msg
+                    })
+                    setTimeout(() => {
+                        //刷新资料列表
+                        this.getDetail()
+                    }, 1500)
+                })
+                .catch(err => {
+                    uni.showToast({
+                        icon: 'none',
+                        duration: 1500,
+                        title: err.msg
+                    })
+                })
+        },
+        // 获取视频源信息
+        loadedmetadata(e) {
+            // 获取视频长宽
+            const w = e.detail.width //视频真实宽度
+            const h = e.detail.height //视频真实高度
+            let rw = 0 //视频展示宽度
+            let rh = 0 //视频展示宽度
+            // 视频宽大于等于高时
+            if (w >= h) {
+                rw = 702
+                rh = (rh * h) / w
+            } else {
+                rw = 400
+                rh = (rw * h) / w
+            }
+            // 使用set向videoStyle添加样式信息
+            this.$set(this.videoStyle, e.currentTarget.id, `width:${rw}rpx;height:${rh}rpx;`)
+        },
+        // 视频播放
+        handlePlayer(id) {
+            if (this.checkPermission()) {
+                this.handleStop(id)
+                return
+            }
+            // 如果点击同一个播放器,就
+            if (this.prevVideoId === id) return
+            // this.handleFullScreen(id) // 点击播放时全屏
+            // 暂停上一个播放器
+            this.handelPause(this.prevVideoId)
+            // 保存当前播放器id
+            this.prevVideoId = 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()
+        },
+        // 进入全屏
+        handleFullScreen(id) {
+            if (!id) return
+            const vContext = uni.createVideoContext(id, this)
+            vContext.requestFullScreen()
+        },
+        // 预览图片
+        previewImage(index, previewImageList) {
+            if (this.checkPermission()) return
+            const that = this
+            uni.previewImage({
+                current: index,
+                indicator: 'number',
+                urls: previewImageList,
+                loop: true,
+                success() {
+                    that.$emit('previewImage', 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) {
+                    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') {
+                // 跳转链接
+                this.$api.navigateTo(redirect)
+            }
+            if (redirect === 10) {
+                this.searchArchiveByBean()
+            }
+        },
+        // 文件预览
+        previewFile(file) {
+            if (this.checkPermission()) return
+            // 获取文件后缀
+            // const index = file.fileName.lastIndexOf('.')
+            // const suffix = file.fileName.substring(index)
+            this.openDocument(file)
+            // if (suffix === '.doc' || suffix === '.ppt' || suffix === '.pptx' || suffix === '.docx') {
+            //     //先将链接缓存
+            //     uni.setStorageSync('openLink', file.htmlUrl)
+            //     this.openDocument(file.fileUrl)
+            //     // this.$api.navigateTo('/pages/h5/article/path?key=openLink&type=1')
+            // } else if (suffix === '.pdf') {
+            //     //先将链接缓存
+            //     uni.setStorageSync('openLink', file.fileUrl)
+            //     this.$api.navigateTo('/pages/h5/article/path?key=openLink&type=2')
+            // } else {
+            //     // 不支持的文件
+            //     return uni.showModal({
+            //         content: `${suffix}类型文件暂不支持预览`,
+            //         cancelColor: '#666',
+            //         confirmColor: '#E15616'
+            //     })
+            // }
+        },
+        // 打开文档
+        openDocument(file) {
+            uni.showLoading({
+                title:'加载中'
+            })
+            // 获取文件后缀
+            const index = file.fileName.lastIndexOf('.')
+            const suffix = file.fileName.substring(index + 1)
+            // 下载文件
+            uni.downloadFile({
+                url: file.fileUrl,
+                success(res) {
+                    const filePath = res.tempFilePath
+                    console.log(filePath) 
+                    // 打开文件
+                    uni.openDocument({
+                        filePath: filePath,
+                        fileType: suffix,
+                        success(res) {
+                            uni.showToast({
+                                icon:'success',
+                                title:'打开成功',
+                                duration: 1200
+                            })
+                            uni.hideLoading()
+                        },
+                        fail(err) {
+                            if(err.errMsg.indexOf('fail filetype not supported')){
+                                uni.showModal({
+                                    content: '不支持的文件预览',
+                                    cancelColor: '#666',
+                                    confirmColor: '#E15616'
+                                })
+                            }
+                            uni.hideLoading()
+                        }
+                    })
+                },
+                fail(err){
+                    uni.showToast({
+                        title: JSON.stringify(err),
+                        icon:'none',
+                        duration: 5000
+                    })
+                    uni.hideLoading()
+                },
+            })
+        }
+    }
+}
+</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;
+    z-index: 9;
+    &.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-title {
+                height: 74rpx;
+            }
+            .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;
+            max-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;
+            // // width: 702rpx;
+            // // height: 420rpx;
+            // width: 544rpx;
+            // height: 960rpx;
+            // .cm-video {
+            //     width: 100% !important;
+            //     max-width: 100%;
+            //     min-width: 100%;
+            //     display: flex;
+            //     // max-height: 420rpx;
+            //     // width: 100%;
+            //     height: 100%;
+            //     background: #000;
+            // }
+        }
+    }
+}
+</style>

+ 22 - 20
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')
 			}
 		}
 	}

+ 17 - 18
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()

+ 14 - 0
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
+                    }
                 }
             ]
         },

+ 105 - 0
pages/goods/goods-doc-detail.vue

@@ -0,0 +1,105 @@
+<!-- 自定义页面 -->
+<template>
+    <view class="goods-doc-detail" :style="{ paddingBottom: tipStatus ? '80rpx' : '0' }">
+        <view class="cm-header">
+            <image
+                class="cm-cover"
+                :src="productImage ? productImage : 'https://static.caimei365.com/app/img/icon2/placeholder.png'"
+            ></image>
+            <view class="cm-title"> {{ productName }} </view>
+            <view class="cm-params"><text>供应商:</text>{{ shopName || '暂无' }}</view>
+            <view class="cm-params"><text>商品属性:</text>{{ productType === 1 ? '商品' : '仪器' }}</view>
+        </view>
+        <cm-product-doc
+            v-if="archiveId !== 0"
+            :archiveId="archiveId"
+            :bottom="isIphoneX ? '60rpx' : '10rpx'"
+            @tipStatus="getTipStatus"
+        ></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.userId = uni.getStorageSync('userInfo').userId || -1
+        this.archiveId = e.id || 0
+        this.getDetail()
+    },
+    data() {
+        return {
+            userId: -1,
+            archiveId: 0,
+            archiveProductInfo: {},
+            productImage: '',
+            productName: '',
+            productType: 0,
+            shopName: '',
+            tipStatus: ''
+        }
+    },
+    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.productImage = res.data.productImage
+                this.productName = res.data.productName
+                this.productType = res.data.productType
+                this.shopName = res.data.shopName
+            })
+        },
+        // 获取权限tip
+        getTipStatus(status) {
+            this.tipStatus = status
+        }
+    }
+}
+</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>

+ 300 - 0
pages/goods/goods-doc-list.vue

@@ -0,0 +1,300 @@
+<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="search"
+                    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 ? item.productImage : 'https://static.caimei365.com/app/img/icon2/placeholder.png'"></image>
+                <view class="content">
+                    <view class="title" v-if="!isSearch">{{ item.productName }}</view>
+                    <view class="title" v-else v-html="item.productName"></view>
+                    <view class="params"><text>供应商:</text>{{ item.shopName || '暂无' }}</view>
+                    <view class="params"><text>商品属性:</text>{{ item.productType === 1 ? '产品' : '仪器' }}</view>
+                </view>
+            </view>
+            <view class="cm-emtpy" v-if="isEmpty">
+                <image src="https://static.caimei365.com/app/img/icon2/PC-empty.png"></image> <text>暂无资料~</text>
+            </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: [],
+            isEmpty: false
+        }
+    },
+    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.formatTitle(res.data.results) // 如果是搜索,需要高亮关键词
+                    this.searchList = [...this.searchList, ...res.data.results]
+                    this.isEmpty = this.searchList.length === 0
+                } else {
+                    this.list = [...this.list, ...res.data.results]
+                    this.isEmpty = this.list.length === 0
+                }
+                this.hasMore = res.data.hasNextPage
+                this.isLoading = false
+            })
+        },
+        // 高亮文字
+        formatTitle(list) {
+            list.forEach((item, index) => {
+                //正则表达式
+                const reg = new RegExp(this.listQuery.keyword, 'g')
+                item.productName = item.productName.replace(reg, $1 => {
+                    return `<span style="color: #E15616;">${$1}</span>`
+                })
+            })
+        },
+        // 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) {
+            if (item.redirectType === 1) {
+                this.$api.navigateTo(`/pages/goods/product?id=${item.productId}&open=caimei`)
+            } 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()
+        }, 400)
+    }
+}
+</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;
+            text {
+                color: #e15616;
+            }
+        }
+        .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;
+        }
+    }
+}
+.cm-emtpy {
+    width: 100%;
+    padding-top: 40vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    image {
+        display: block;
+        width: 260rpx;
+        height: 260rpx;
+    }
+    text {
+        display: block;
+        margin-top: 10rpx;
+        font-size: 26rpx;
+        font-weight: 400;
+        color: #999999;
+    }
+}
+</style>

+ 2604 - 2351
pages/goods/product.vue

@@ -1,2359 +1,2612 @@
 <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)"
+                    v-if="product.archiveId !== 0"
+                >
+                    <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">
+                        <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 @previewImage="changePreViewImageStatus" :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 ={
-						productIds: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,
-						source:2
-					}
-				).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 =>{
-					console.log('error',error.msg)
-				})
-			},
-			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(), // 获取设备信息
+            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 }],
+            isPreviewImage: false,
+            opentype: ''
+        }
+    },
+    computed: {
+        ...mapState(['hasLogin', 'isWxAuthorize', 'identity','isIphoneX'])
+    },
+    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.opentype = option.open
+        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()
+    },
+    onReady() {
+      if(this.opentype == 'caimei'){
+          // 跳转到资料详情
+          uni.showLoading({
+              title:'加载中'
+          })
+          setTimeout(()=>{
+              this.isNavbarFiexd = true
+              this.tabClick(3)
+              uni.hideLoading()
+          }, 2000)
+      }
+      console.log('是iPhoneX', this.isIphoneX)
+    },
+    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 ={
+                    productIds: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,
+                    source:2
+                }
+            ).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 =>{
+                console.log('error',error.msg)
+            })
+        },
+        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
+        },
+        changePreViewImageStatus(falg){
+            this.isPreviewImage = falg
+        }
+    },
+    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() {
+        // 是否开启图片预览 true 不刷新调用接口 false刷新调用接口
+        if(!this.isPreviewImage){
+            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()
+                })
+        }
+        this.isPreviewImage = false
+    },
+    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>

+ 23 - 2
pages/h5/article/path.vue

@@ -16,16 +16,37 @@
 	            },
 				productID:'',
 				activityPath:'',
-				
 	        }
 	    },
 		onLoad(option) {
-			this.activityPath = option.link
+            // 普通传参
+            if(option.link) {
+                this.activityPath = option.link
+                return
+            }
+            this.initPath(option)
 		},
 		methods:{
 			navToDetailPage() {//跳转商品详情页
 				this.$api.navigateTo(`/pages/goods/product?id=${this.productID}`)
 			},
+            initPath(option){
+                if(!option.key || !option.type) return
+                const link = uni.getStorageSync(option.key)
+                const type = parseInt(option.type)
+                uni.removeStorageSync(option.key) // 清除链接缓存
+                //是word 或 ppt链接
+                if(type === 1){
+                    this.activityPath = link
+                    return
+                }
+                //是pdf链接
+                let URL_CONFIG = ''
+                if(process.env.NODE_ENV === 'development'){
+                    URL_CONFIG = 'https://www-b.caimei365.com'
+                }
+                this.activityPath = `${URL_CONFIG}/document/pdfdetails.html?type=1&src=${link}`
+            }
 		}
 	}
 </script>

+ 25 - 24
pages/user/account/account-bean.vue

@@ -60,10 +60,10 @@
 	</view>
 </template>
 <script>
-	import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
-	import tuiNomore from "@/components/tui-components/nomore/nomore"
+	import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
+	import tuiNomore from '@/components/tui-components/nomore/nomore'
 	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
-	var date = new Date();
+	var date = new Date()
 	export default{
 		components: {
 			uniCalendar,
@@ -138,14 +138,15 @@
 						9:'抵用退回',
 						10:'抵用运费',
 						11:'退款回收',
-						12:'登录奖励'
-					};
+						12:'登录奖励',
+                        13:'查看商品资料'
+					}
 				Object.keys(stateTextObject).forEach(function(key){
 					if(key == state){
 						stateText = stateTextObject[key]
 					}
-				});
-				return stateText;
+				})
+				return stateText
 },
 		},
 		methods: {
@@ -160,10 +161,10 @@
 					let data = response.data
 					let list = data.pageInfo.list
 					this.userBeans = data.userBeans
-					this.hasNextPage =  data.pageInfo.hasNextPage;
+					this.hasNextPage =  data.pageInfo.hasNextPage
 					if(list && list.length > 0){
-						this.isEmpty = false;
-						this.beansList = [...list];
+						this.isEmpty = false
+						this.beansList = [...list]
 					}else{
 						this.isEmpty = true
 					}
@@ -188,10 +189,10 @@
 					let data = response.data
 					let list = data.pageInfo.list
 					this.userBeans = data.userBeans
-					this.hasNextPage =  data.pageInfo.hasNextPage;
+					this.hasNextPage =  data.pageInfo.hasNextPage
 					this.beansList = this.beansList.concat(list)
-					this.pullFlag = false;// 防上拉暴滑
-					setTimeout(()=>{this.pullFlag = true;},500)
+					this.pullFlag = false// 防上拉暴滑
+					setTimeout(()=>{this.pullFlag = true},500)
 					if(this.hasNextPage){
 						this.pullUpOn = false
 						this.nomoreText = '上拉显示更多'
@@ -205,17 +206,17 @@
 				})
 			},
 			tabClick(index){//tab点击
-				this.tabCurrentIndex = index;
-				this.listQuery.type = index;
+				this.tabCurrentIndex = index
+				this.listQuery.type = index
 				this.listQuery.pageNum = 1
 				this.beansList = []
 				this.pullUpOn = true //隐藏
-				this.GetAccountInitData();
+				this.GetAccountInitData()
 			},			
 			monthSwitch(e) {
-				this.listQuery.year = e.year;
-				this.listQuery.month = e.month;
-				this.GetAccountInitData();
+				this.listQuery.year = e.year
+				this.listQuery.month = e.month
+				this.GetAccountInitData()
 			},
 			cheakType(type){
 				let typeTextHtml,
@@ -229,18 +230,18 @@
 						7:'余额订单充值',
 						8:'订金订单退款',
 						9:'余额订单退款'
-					};
+					}
 				Object.keys(typeObject).forEach(function(key){
 					if(key == type){
 						typeTextHtml = typeObject[key]
 					}
-				});	
-				return typeTextHtml;
+				})	
+				return typeTextHtml
 			},
 			hanldNavigateBack(){
 				uni.navigateBack({
 					delta: 1
-				});
+				})
 			},
 		},
 		onReachBottom() {
@@ -251,7 +252,7 @@
 			}	
 		},
 		onPullDownRefresh() {//下拉刷新
-			this.listQuery.pageNum = 1;
+			this.listQuery.pageNum = 1
 			this.GetAccountInitData()
 			uni.stopPullDownRefresh()
 		},

+ 64 - 64
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) {
+            uni.showLoading({ title: '加载中' })
+        }
+        const requestPromise = new Promise((resolve, reject) => {
+            uni.request({
+                url: url,
+                method: options.method || 'POST',
+                data: options.data || {},
+                header,
+                success: res => {
+                    if (isLoading) uni.hideLoading()
+                    if(options.isStatus){
+                        resolve(res.data)
+                    }else{
+                        if (res.data.code === 0) {
+                            resolve(res.data)
+                        } else {
+                            reject(res.data)
+                        }
+                    }
+                },
+                fail: error => {
+                    reject(error)
+                    if (isLoading) uni.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()

+ 39 - 0
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
+        })
+    }
+}

+ 4 - 1
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

+ 62 - 40
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()
+        }
+    })
+}