renshou/product/detail/detail.vue

<template>
	<view v-if="allShow">
		<!--pages/detail/detail.wxml-->
		<view class="banner">
			<swiper class="swiper" @change="swiperChange" :current="current" autoplay="true" circular="true"
				duration="1000">
				<block v-for="(item, index) in product.images" :key="index">
					<swiper-item autoplay="true">
						<image :src="item" mode="aspectFit"></image>
					</swiper-item>
				</block>
			</swiper>
			<view class="dots dflex">
				<block v-for="(item, index) in product.images" :key="index">
					<view :class="'dot ' + (index == swiperCurrent ? ' active' : '')" :data-current="index"
						@tap="dotEvent"></view>
				</block>
			</view>
		</view>
		<view class="info bgfff">
			<view class="infos dflex">
				<view class="title">{{product.title?product.title:''}}</view>
				<button class="share" open-type="share">
					<image src="/static/pages/images/fxico.png"></image>分享
				</button>
			</view>
			<view class="protext">
				{{product.brandName ? product.brandName : ''}} {{product.brief ?  product.brief : ''}}
			</view>
		</view>

		<view class="detinfo mt20 bgfff">
			<view class="item pro-sel dflex" v-if="skuList.length>0">
				<view class="tag" v-for="it,idx in skuList" :key="idx">{{JSON.parse(it.properties)[0].value}}</view>
			</view>
			<view class="item pro-sel dflex" v-if="product.label">
				<label>标签</label>
				<view class="flex">{{product.label}}</view>
			</view>
		</view>
		<!--  商品详情等页面 -->
		<product-footer ref="list" id="list" :detail="nodes" :imgs="imgs" :proId="product.id" :form="form"
			@scoreTab="scoreTab" @showTab="showTab" v-if="product.id" @freshen="freshenFun" @getForm="getForm">
		</product-footer>


		<v-share :hide-toast="hideShare" :product="product" :code-url="codeUrl" @onFather="click"></v-share>


		<view class="bottom-text" style="margin-top: 30rpx;" v-if="recommendCard.realName">
			<view>{{config.CONFIG_COMPANY_NAME?config.CONFIG_COMPANY_NAME:'中国人寿保险股份有限公司'}}
				{{recommendCard.realName}}向您推荐</view>
			<view>电话: {{recommendCard.phone}}</view>
			<view v-if="recommendCard.professionalCertificateNo">执业证书: {{recommendCard.professionalCertificateNo}}</view>
		</view>
		<view class="bottom-text" style="margin:0 30rpx 30rpx;border-top: 2rpx solid #e5e5e5;">
			<view>{{config.CONFIG_COMPANY_NAME?config.CONFIG_COMPANY_NAME:'中国人寿保险股份有限公司'}} 版权所有</view>
			<view v-if="config.CONFIG_COMPANY_EMAIL">{{config.CONFIG_COMPANY_EMAIL}}</view>
			<view v-if="config.CONFIG_COMPANY_PHONE">客户服务专线:{{config.CONFIG_COMPANY_PHONE}}</view>
			<view v-if="config.CONFIG_COMPANY_FILING_NUMBER">{{config.CONFIG_COMPANY_FILING_NUMBER}}</view>
		</view>



		<view class="placeholder-view" :style="'height:' + (bottomBlankHeight + 140) + 'rpx'"></view>
		<view class="bot fixed bgfff dflex">
			<view class="fflex ddflex">
				<view class="botbtn fflex" style="border-right: 1px solid #fff;" v-if="recommendCard.wechat||recommendCard.wechatCode||recommendCard.wechatCompanyCode"
					@click="showCodePop()">
					加微咨询
				</view>
				<view class="botbtn fflex" @click="callPhone(recommendCard.phone)" v-if="recommendCard.phone">
					电话咨询
				</view>
			</view>
			<view class="botbtn fflex" style="border-left: 1px solid #fff;background-color: red;" @click="toBuy()" v-if="product.linkUrl">
				购买
			</view>
		</view>
		<view class="xiajia" v-if="product.state !=1">您来晚了，产品已经下架</view>


		<view class="contact_index" @tap="goTop">
			<image src="/static/pages/images/backtop.png"></image>顶部
		</view>
		<view :class="'chat-fixed '+(chatShow?'chat-fixed-long':'')"
			v-if="recommendCard&&recommendCard.id&&userInfo.id!=recommendCard.userId">
			<view class="chat-box ddflex" @click="jumpSingleChatRoom()">
				<image :src="recommendCard.avatar?recommendCard.avatar:'../../static/pages/images/userimg.png'"></image>
				<view v-if="chatShowText" class="fflex tover"
					style="font-size: 24rpx;color: #333333;margin-left: 20rpx;">您好，我是{{recommendCard.realName}}，欢迎访问我的微页
				</view>
				<view :class="'chat-lyl '+(!chatShowText?'chat-lyl2':'')">聊一聊</view>
			</view>
		</view>


		<view class="ceng2" v-if="isShowCodePop" @click="isShowCodePop = false" @touchmove.stop.prevent="moveHandle">
		</view>
		<view :class="'code-pop ' +(about.greyTheme==1?'grayTheme':'')" v-if="isShowCodePop">
			<view v-if="recommendCard.wechatCode||recommendCard.wechatCompanyCode" class="ddflex" style="justify-content: center;">
				<view class="code-content" v-if="recommendCard.wechatCode">
					<image :src="recommendCard.wechatCode?recommendCard.wechatCode:'/static/images/wxCode.jpg'" :style="recommendCard.wechatCompanyCode?'width: 200rpx;height: 200rpx;':''"
						show-menu-by-longpress="true"></image>
					<view style="text-align: center;font-size: 24rpx;color: #999;margin-bottom: 50rpx;">长按识别微信二维码</view>
				</view>
				<view class="code-content" v-if="recommendCard.wechatCompanyCode" :style="recommendCard.wechatCode?'margin-left:30rpx':''">
					<image :src="recommendCard.wechatCompanyCode?recommendCard.wechatCompanyCode:'/static/images/wxCode.jpg'" :style="recommendCard.wechatCode?'width: 200rpx;height: 200rpx;':''"
						show-menu-by-longpress="true"></image>
					<view style="text-align: center;font-size: 24rpx;color: #999;margin-bottom: 50rpx;">长按识别企微二维码</view>
				</view>
			</view>
			<view class="code-text" v-else>
				<view>微信号</view>
				<view>{{recommendCard.wechat}}</view>
			</view>
			<view class="code-btn" @click="copy(recommendCard.wechat)" v-if="recommendCard.wechat">
				复制微信号
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	const utils = require("../../utils/util.js");
	var QQMapWX = require("../../utils/qqmap.js");
	const route = require("../../utils/route");
	const api = require("../../utils/api.js");
	import productFooter from "../components/product_footer/index";

	export default {
		data() {
			return {
				bottomBlankHeight: app.globalData.isIPhoneX ? 68 : 0,
				swiperCurrent: 0,
				bannerUrls: [],
				isShow: false,
				pro: {},
				isCart: false,
				timer: [],
				hideShare: true,
				codeUrl: '',
				form: {
					page: 1,
					limit: 10
				},
				freshen: true,
				//是否更新页面
				isActive: false,
				current: "",
				query: "",
				userInfo: "",
				shopId: "",
				params: "",
				product: "",
				nodes: "",
				imgs: [],
				tabe: "",
				load: false,
				address: {},
				index: "",
				popup: "",
				tabIndex: "",
				switch: true,
				about: {},
				allShow: false,
				isVideoScene: false, //立即购买是否需要登录
				isShowUpdate: false, //是否显示更新信息弹窗
				isUpdateInfo: false, //更新用户信息
				isUpdateMobile: false, //绑定手机号

				recommendCard: {},
				chatShow: true,
				chatShowText: true,

				isShowCodePop: false,

				config: {},
				skuList:[]
			};
		},

		components: {
			productFooter,
		},
		props: {},
		onLoad: async function(options) {
			let that = this;
			this.query = options;
			if(options.shareId) req.setStorage('shareId',options.shareId)

			if (options.scene) {
				this.scene = options.scene;
			}
			this.getConfig()
			await req.silenceLogin();
		},
		onShow: async function() {
			await req.silenceLogin();
			this.userInfo = req.getStorage('userInfo')
			if (this.scene) {
				this.query.id = this.scene
			}
			this.loadProudct()
			// await this.browsRecound(this.query.id);
			QQMapWX.initMap();
			req.getLocation(res => {
				const to = {
					latitude: res.latitude,
					longitude: res.longitude
				};
				QQMapWX.reverseGeocoder(to, resp => {});
				this.getRecommendCard(to)
			});
		},
		onShareAppMessage: function(options) {
			let merchantId = '';
			let path = 'id=' + this.query.id
			let userInfo = req.getStorage('userInfo');
			if (!userInfo.id) {} else {
				path += '&userId=' + userInfo.id;
			}
			if(userInfo.userType==1){
				path += '&shareId=' + req.getStorage('userInfo').saleNo
			}
			let url = '/product/detail/detail?' + path;
			return {
				title: this.product.title,
				imageUrl: this.product.pic,
				path: url
			};
		},
		// onShareTimeline() {
		// 	let merchantId = '';
		// 	let path = 'id=' + this.query.id
		// 	let userInfo = req.getStorage('userInfo');
		// 	if (!userInfo.id) {} else {
		// 		path += '&userId=' + userInfo.id;
		// 	}
		// 	let url = '/product/detail/detail?' + path;
		// 	return {
		// 		title: this.product.title,
		// 		query: path,
		// 		imageUrl: this.product.images[0]
		// 	};
		// },

		onReachBottom() {},

		methods: {
			getConfig() {
				req.getRequest('/api/other/config', {}, data => {
					req.setStorage('configRes', JSON.stringify(data));
					this.config = data;
				})
			},
			click(e) {
				// console.log(e,"7899")
				this.hideShare = e
			},

			/**
			 * 轮播切换
			 */
			swiperChange({
				detail
			}) {
				if (this.current == 0 && this.swiperCurrent > 1) {
					//卡死时，重置current为正确索引
					this.setData({
						current: this.swiperCurrent
					});
				} else {
					//正常轮转时，记录正确页码索引
					this.setData({
						swiperCurrent: detail.current
					});
				}
			},

			dotEvent(e) {
				this.setData({
					current: e.currentTarget.dataset.current
				});
			},

			// 获取推荐销售
			getRecommendCard(loction) {
				let params = loction
				if (req.getStorage("shareId")) {
					params.shareSaleNo = req.getStorage("shareId")
				}
				req.getRequest('/api/visiting/card/recommendCardInfo', params, res => {
					this.recommendCard = res
					console.log('获取推荐销售》》》》》', res);
					setTimeout(() => {
						this.chatShow = false
						setTimeout(() => {
							this.chatShowText = false
						}, 450)
					}, 2000)
				})
			},

			loadProudct() {
				let that = this;
				that.setData({
					bannerUrls: [],
					product: '',
					nodes: ''
				});
				let form = {
					id: this.query.id
				};
				let isShowLoading = false;
				this.allShow = false
				if (!isShowLoading) {
					req.loadIng('加载中');
					isShowLoading = true;
				}

				req.getRequest('/api/v1/product/detail', form, data => {
					//富文本图片放大
					var nodes = data.detail;
					let tabe = [];
					that.setData({
						bannerUrls: data.images,
						product: data,
						nodes: nodes,
						tabe: tabe,
						load: true,
						allShow: true
					});
					this.loadProductSku()
					if (isShowLoading) {
						uni.hideLoading();
						isShowLoading = false;
					}

				});
			},
			loadProductSku() {
				let _ts = this;
				let from = {
					id : this.product.id
				}
				return new Promise((resolve, reject) => {
					req.getRequest(
						'/api/v1/product/sku',
						from,
						res => {
							this.skuList = res
							resolve();
						},
						true
					);
				});
			},
			goTop(e) {
				// 一键回到顶部
				if (uni.pageScrollTo) {
					uni.pageScrollTo({
						scrollTop: 0
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
					});
				}
			},

			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			closeUpdate() {
				this.isShowUpdate = false
				this.isUpdateInfo = false;
				this.isUpdateMobile = false;
			},

			showCodePop() {
				this.isShowCodePop = true
				req.saveBehaviorNew(this.recommendCard.id, 1, 18)
			},
			// 拨打电话
			callPhone(val) {
				if (!val) return false
				uni.makePhoneCall({
					phoneNumber: val
				});
			},
			copy(val) {
				this.isShowCodePop = false
				uni.setClipboardData({
					data: val,
					complete() {
						req.msg('复制成功')
					}
				})
			},

			jumpSingleChatRoom() {
				if (this.recommendCard) {
					req.jumpSingleChatRoom(this.recommendCard.userId, this.recommendCard.avatar, this.recommendCard
						.realName);
					req.saveBehaviorNew(this.recommendCard.id, 1, 14)
				}

			},
			toBuy(){
				if(!this.product.linkUrl) return false
				app.globalData.openPage('pages/web/web?url='+encodeURIComponent(this.product.linkUrl));
			}
		}
	};
</script>
<style>
	@import "./detail.css";
</style>