retailStore/pages/index/detailPage/index.vue

<template>
	<view class="content">
		<!-- <image class="logo" :src="detailObj.picture" mode='aspectFill'></image> -->
		<view class="page-section-spacing" style="width: 100%;">
		 	<swiper class="swiper" 
		 		indicator-dots="true" 
		 		duration="1500"	>
				<swiper-item>
							<video :src="detailObj.video" id="myVideo" controls='true' ></video>
				</swiper-item>
		 		<swiper-item v-for="(item , index) in detailObj.picture" :key="index">
		 			<image :src="item" mode="aspectFill" style="width: 100%;height: 100%;"></image>
		 		</swiper-item>
		 	</swiper>
		 </view>
		<view class="detail-title" @longpress="copyTitle">
			<text class="detail-font">{{detailObj.desc || '-'}}</text>
		    <text class="price-style">￥{{detailObj.money || '-'}}</text> 
		<!-- 	<button type="default" class="copy-title-btn" @click="copyTitle">复制标题</button> -->
		</view>
		
	<view class="share-box">
		<u-parse :content="shareContent"></u-parse>
		<button type="default" @click.stop='showShareModal'>分享</button>
	</view> 
	
	<!-- <view class="share-box" style="height: 200upx;margin-top: 2%;" @longpress="copyCode">
		<view>长按复制框内整段文字，打开 [手淘] 即可购买</view>
		<view style="text-align: center;">{{shareCode}}</view>
		<view style="text-align: center;">复制店铺名[{{shareCode || '-'}}],打开[Tao宝]</view>
		<view style="text-align: center;">搜索进入</view>
		<button type="default" @click="copyCode">一键复制</button>
	</view> -->
	
	<view class="share-box-new"  @longpress="copyCode">
		<view class="left-box">
			<image :src="storeImg" mode="aspectFill"></image>
			<view>{{shareCode || '-'}}</view>
		</view>
	<!-- 	<view style="margin-right: 3%;">
			<button type="default" class="copy-content-btn" @click="copyCode">一键复制</button>
		</view> -->
	</view>
		
		<view class="product-title">产品详情</view>
	    <view class="rich-text-box" style="padding: 10px;">
			<u-parse :content="detailObj.content"></u-parse>
		</view>
		<!-- <image class="logo-footer" src="/static/detail-bg2.png"></image> -->
    	<uni-popup ref="popup" type="bottom">
			<view class="uni-share">
				<view class="uni-share-content">
					<button class="uni-share-content-box" open-type="share">
						<view class="uni-share-content-image"><image src="/static/userSetIcon.png" class="image" /></view>
						<view class="uni-share-content-text">分享给好友</view>
					</button>
					<button class="uni-share-content-box" @click="goPostShare">
						<view class="uni-share-content-image"><image src="/static/share-icon1.png" class="image" /></view>
						<view class="uni-share-content-text">海报分享</view>
					</button>
						<button class="uni-share-content-box" @click="goRuleList">
						<view class="uni-share-content-image"><image src="/static/note.png" class="image" /></view>
						<view class="uni-share-content-text">分享规则</view>
					</button>
				</view>
				<view class="uni-share-btn" @click="cancelModal()">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var md5 = require("../../../common/md5.js");
	import uParse from '@/components/gaoyia-parse/parse.vue'
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	export default {
		components: {
			uParse,
			uniPopup
		},
		data() {
			return {
				title: 'Hello',
				homeSlide: [
					{
						img:'https://f.xazhima.com/userfiles/upload/indexpic/202005251006524535.jpg'
					},
					{
						img:'https://f.xazhima.com/userfiles/upload/indexpic/202005251007104506.jpg'
					},
				], // 定义值接收轮播图数据
				detailObj:{},
				shareContent:'',
				shareCode:'',
				storeImg:'',
				isAuthPhone:getApp().globalData.user_phone,
			}
		},
		onLoad(option) {
			this.getDetailInfo(option.detailId);
		},
		onShow() {
		},
		onShareAppMessage() {
			  return {
			      title: '分销小助手',
			      path:'/pages/index/index?scene=' + getApp().globalData.user_id
			    }
		},
		methods: {
			getDetailInfo(dId){
				 uni.showLoading({
					title: '加载中',
				});
				let that = this;
				uni.request({
					url: getApp().globalData.shareUrl, //需要设置为全局
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						method: 'getProductsInfo',
						timestamp: getApp().globalData.globalTimestamp, //Date.now()
						id: dId,
						sign: md5('getProductsInfo' + getApp().globalData.globalTimestamp)
					},
					success: res => {
						if (res.data.code === 200) {
							uni.hideLoading();
							that.detailObj = res.data.msg;
							that.shareContent = getApp().globalData.shareContent;
							that.shareCode = getApp().globalData.shareTaobaoCode;
							that.storeImg = getApp().globalData.shareStoreImg;
							console.log(that.shareContent)
						}
					}
				});
			},
			 showShareModal(){
					if(this.isAuthPhone){
						this.$refs.popup.open();
					}else {
						uni.navigateTo({
							url: '../../auth/index',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
			      },
			cancelModal(){
				 // 需要在 popup 组件，指定 ref 为 popup
				 this.$refs.popup.close();
			},
			goPostShare() {
				this.$refs.popup.close()
				uni.navigateTo({
					url: '/pages/index/postShare/index'
				})
			 },
			goRuleList(){
			 		uni.navigateTo({
			 		url: '/pages/index/ruleList/index',
			 		success: res => {},
			 		fail: () => {},
			 		complete: () => {}
			 	});
			 },
		    copyCode(){
				let that = this;
				uni.setClipboardData({
					data:that.shareCode,
					success() {
						uni.showToast({
							icon:'none',
							title:'复制成功'
						})
					}
				})
			},
			copyTitle(){
				let that = this;
				uni.setClipboardData({
					data:that.detailObj.desc,
					success() {
						uni.showToast({
							icon:'none',
							title:'复制成功'
						})
					}
				})
			}
		}
	}
</script>

<style>
	@import url("../../../components/gaoyia-parse/parse.css");
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200px;
		width: 100%;
	}
    .logo-footer {
		height: 500px;
		width: 100%;
	}
	.detail-title {
		padding: 5px;
		margin-bottom: 2%;
		width: 100%;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		/* align-items: center; */
		background: #fff;
		font-size: 30rpx;
		position: relative;
	}
	.detail-font {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		font-size: 14px;
		margin-left: 5%;
	}
	
	.price-style {
		/* margin-right: 75%; */
		margin-left: 4.5%;
        color: red; 
	}
	.share-box-new {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100upx;
		background: #fff;
		font-size: 28rpx;
		padding: 5px;
		margin-top: 2%;
	}
	.left-box {
		margin-left: 3%;
		display: flex;
		align-items: center;
		width: 70%;
	}
	.share-box-new image {
		width: 80upx;
		height:80upx;
		border-radius: 50%;
		margin-right: 1%;
	}
	.share-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80%;
		min-height: 300upx;
		border: 1px dashed red;
		background: #fff;
		font-size: 28rpx;
		padding: 5px;
	}
	.share-box button {
		width: 300rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-top: 2%;
		background-color: #27BCEF;
		color: #fff;
	}
	.copy-title-btn{
		position: absolute;
		width: 180rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #27BCEF!important;
		color: #fff!important;
		font-size: 28rpx;
		right: 10px;
		top: 45px;
	}
	.copy-content-btn {
		width: 140rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #27BCEF!important;
		color: #fff!important;
		font-size: 26rpx;
		padding-left: 1%;
		padding-right: 1%;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
	.product-title {
		margin-top: 2%;
		margin-bottom: 2%;
		font-size: 32rpx;
	}
	
	.rich-text-box {
		font-size: 30rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	/* //分享模态框 */
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
		/* justify-content: center */
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
		border: none;
		background: transparent;
		padding-left: 0;
		padding-right: 0;
	
	}
	  .uni-share-content-box::after{
		  border: none;
	  }
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #999;
		padding-top: 5px;
		// padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		color: #666;
		font-size: 30rpx;
	}
	.swiper{
		height: 400upx;
	}
	
	.swiper-item image{
		width: 100%;
		height: 400upx;
	}
	#myVideo {
		width: 100%;
		height: 400rpx;
	/* 	height: 360rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx; */
	}
</style>