zsw-farm-bxg/pages/activity/DargainGoodsDetails/index.vue

<template>
	<view class="product-con">
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true" >
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
			</cu-custom>
		</view>
		
		<!-- 商品轮播 -->
		<product-con-swiper :imgUrls="imgUrls"></product-con-swiper>
		
		<view class="tui-pro-detail">
			<view class="activity-info-box">
				<view class="tui-right__box">
					<view class="acea-row row-middle row-center">
						<view class="iconfont icon-kanjia"></view>
						<text>砍价活动</text>
					</view>
					<view class="count-down-box" v-if="goodsDetail.stopTime">
						<count-down :isSecond="false" :datatime="goodsDetail.stopTime" :styleAllStyle="styleAllStyle" :timeTxtStyle="timeTxtStyle"></count-down>
					</view>
				</view>
			</view>
				
			<view class="tui-pro-price">
				<text class="tui-price">¥{{goodsDetail.minPrice}}</text>
				<view class="tui-original-price">¥{{goodsDetail.price}}</view>
			</view>
			
			<view class="tui-pro-title">{{ goodsDetail.title }}</view>
			<view class="tui-pro-info">{{ goodsDetail.info }}</view>
			<view class="tui-sale-info">
				<view class="tips acea-row">
					<view class="tip">甄选品牌</view>
				</view>
				<view>库存：{{ goodsDetail.stock }}{{ goodsDetail.unitName }}</view>
			</view>
		</view>
		
		<view class="safeguard-info acea-row" v-if="tempName || goodsDetail.config">
			<view class="safeguard-item" v-if="tempName">
				<image class="img" src="@/static/images/by.png" mode=""></image>
				<view class="line1">{{tempName}}</view>
			</view>
			<view class="safeguard-item" v-for="(item,index) in goodsDetail.config" :key="index">
				<image class="img" :src="item.configuration" mode=""></image>
				<view class="line1">{{item.content}}</view>
			</view>
			<!-- <view class="safeguard-item">
				<image class="img" src="@/static/images/fxt.png" mode=""></image>
				<view>7天无理由</view>
			</view>
			<view class="line"></view>
			<view class="safeguard-item">
				<image class="img" src="@/static/images/bj.png" mode=""></image>
				<view>30天保价</view>
			</view> -->
		</view>
		
		<!-- 用户评价 -->
		<!-- <view class="userEvaluation" v-if="replyCount">
		  <view class="title acea-row row-between-wrapper" @click="goEvaluateList(storeInfo.productId)">
		    <view class="acea-row row-middle"><text>评价</text><text class="replyCount">{{ replyCount }}</text></view>
		    <view @click="goEvaluateList(id)" class="praise acea-row row-middle">
		      <view>好评率{{ replyChance }}%</view>
		      <view class="jiantou-right"></view>
		    </view>
		  </view>
		  <user-evaluation :reply="reply"></user-evaluation>
		</view> -->
		
		<view class="product-intro">
		  <!-- <view class="title">商品展示</view> -->
			<view class="conter">
				<mp-html id="article" :setTitle="false" :lazy-load="true" :copy-link="false" :tag-style="tagStyle"
					:content="goodsDetail.description" @linktap="linktap" />
			</view>
		  <!-- <view class="conter" v-html="goodsDetail.description"></view> -->
		</view>
		
		<view :style="addBottom?'height: 162rpx;':'height: 122rpx;'"></view>
		<!--底部操作栏-->
		<view class="tui-operation acea-row row-between" :style="addBottom?'height: 162rpx;':'height: 122rpx;'">
		  <view class="tui-operation-left acea-row row-between">
		    <!-- #ifdef MP-WEIXIN -->
					<button class="tui-operation-item" open-type="contact" hover-class="tui-opcity" :hover-stay-time="150">
						<image src="@/static/images/service-icon.png" mode=""></image>
						<view class="tui-operation-text">客服</view>
					</button>
		    <!-- #endif -->
				
				<view @click="goShoppingCart" class="tui-operation-item">
					<image src="@/static/images/cart-icon.png" mode=""></image>
				  <view class="tui-operation-text">购物车</view>
				</view>
				
				<!-- <view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="setCollect">
					<image v-if="userCollect" src="@/static/images/star-light.png" mode=""></image>
					<image v-else src="@/static/images/star.png" mode=""></image>
				  <view class="tui-operation-text">{{userCollect?'已收藏':'收藏'}}</view>
				</view> -->
		  </view>
		
		  <view class="tui-operation-right acea-row">
				<view class="btn other-col" @click="openAlone">原价购买</view>
				<view class="btn" @click="goDargain">发起砍价</view>
		  </view>
		</view>
		
		<!-- 词条弹框 -->
		<view class="entry-mask" v-show="showEntry" @touchmove.stop.prevent @click="closeEntry">
			<view class="entry-box">
				<scroll-view scroll-y="true" style="height: 310rpx;">
				<view class="entry">
					{{entryInfo.entryInfo}}
				</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import ProductConSwiper from '@/components/ProductConSwiper';
	import CountDown from '@/components/CountDown';
	import { getBargainDetail } from '@/api/activity';
	import { getEntry } from '@/api/store'
	import { handleQrCode } from '@/utils/index'
	export default {
		components: {
			ProductConSwiper,
			CountDown,
		},
		data() {
			return {
				addBottom: this.addBottom,
				goodsDetail: {
					minPrice: 0,
					price: 0,
					stock: '',
					unitName: '',
				},
				bargainId: 0,
				bargainUid: 0,
				imgUrls: [],
				tempName: '',
				styleAllStyle: 'width:30rpx;height:24rpx;background:#F5F6F8;border-radius:8rpx;font-size:20rpx;color:#3A3A3C;line-height:24rpx;',
				timeTxtStyle: 'font-size:20rpx;color:#F5F6F8;line-height:24rpx;padding:0rpx 4rpx;',
				entryInfo: {},
				showEntry: false,
				tagStyle: {
					a: 'color:#0A59F7;text-decoration:underline;',
					img: 'padding:0;margin:0;font-size:0;display:block;'
				},
				subType:true
			};
		},
		onLoad() {
			let url = handleQrCode()
			// bargainId 砍价商品id
			// bargainUid 发起砍价人
			if (url) {
			  // 通过二维码进来
			  this.bargainId = url.bargainId
			  // this.bargainUid = url.partake
			} else {
			  // 正常途径进来
			  this.bargainId = this.$yroute.query.id
			  // this.bargainUid = this.$yroute.query.partake
			}
			// if (this.bargainUid == 0 || !this.bargainUid) {
			//   // url未携带用户uid，填上登录用户uid，跳转
			//   this.bargainUid = this.userInfo.uid
			// }
			this.getBargainDetail();
		},
		methods: {
			// 获取产品详情
			getBargainDetail() {
			  uni.showLoading({
			    title: '加载中',
			    mask: true,
			  })
			  getBargainDetail(this.bargainId).then(res => {
					uni.hideLoading()
					this.goodsDetail = res.data.bargain;
					this.imgUrls.push(this.goodsDetail.image);
					// console.log(this.goodsDetail);
					this.goodsDetail.description = this.goodsDetail.description.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"');
					this.goodsDetail.rule = this.goodsDetail.rule.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"');
					this.tempName = res.data.tempName;
				}).catch(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000,
					})
				})
			},
			goShoppingCart() {
				uni.setStorageSync('pathToCart', '/pages/activity/DargainGoodsDetails/index?id='+ this.bargainId +'&partake=0');
			  this.$yrouter.switchTab('/pages/shop/ShoppingCart/index');
			},
			// 单独购买
			openAlone() {
			  this.$yrouter.push({
			    path: '/pages/shop/GoodsCon/index',
			    query: {
			      id: this.goodsDetail.productId,
			    },
			  })
			},
			goDargain() {
				let isParticipation=JSON.parse(this.$yroute.query.isParticipation) 
				if(this.subType && !isParticipation) {
					let tmplIds = ['iUviwf1eQoQ2BGXdCQx7ki_EAj_4e4v1eLI5IeUbT_0'];
					uni.requestSubscribeMessage({
						tmplIds,
						success:res=> {
							this.subType=false
							this.$yrouter.push({
							  path: "/pages/activity/DargainDetails/index",
							  query: { id: this.bargainId, partake: 0 }
							});
						},
						fail(err) {
							console.log("requestSubscribeMessage err",  err)
						}
						
					})
				}else{
					this.$yrouter.push({
					  path: "/pages/activity/DargainDetails/index",
					  query: { id: this.bargainId, partake: 0 }
					});
				}
				
			},
			linktap(e) {
				// console.log('description', e.innerText);
				if (e.innerText == this.entryInfo.entryName) {
					this.showEntry = true;
					return;
				}
				getEntry({
					name: e.innerText
				}).then(res => {
					this.entryInfo = res.data;
					this.showEntry = true;
				})
			},
			closeEntry() {
				this.showEntry = false;
			},
		}
	}
</script>

<style lang="less" scoped>
	.header {
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}
		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.tui-pro-detail {
		margin: 8rpx 32rpx 20rpx;
		width: 686rpx;
		// height: 230rpx;	
		background: #F5F6F8;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		padding: 24rpx;
		
		position: relative;
	}
	
	.activity-info-box {
		position: absolute;
		top: 0rpx;
		right: 24rpx;
		width: 220rpx;
		height: 74rpx;
		overflow: hidden;
		.tui-right__box {
			padding-top: 8rpx;
			width: 188rpx;
			height: 74rpx;
			background: #2DB5AE;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			position: relative;
			z-index: 1;
			margin: 0rpx 16rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 26rpx;
			.iconfont.icon-kanjia {
				font-size: 26rpx;
				font-weight: 500;
				line-height: 26rpx;
				margin-right: 6rpx;
			}
			.count-down-box {
				padding-top: 6rpx;
				padding-left: 10rpx;
			}
		}
		.tui-right__box::after {
			width: 32rpx;
			height: 32rpx;
			content: "";
			position: absolute;
			top: 0;
			left: -32rpx;
			border-radius: 16rpx;
			box-shadow: 16rpx -16rpx 0rpx #2DB5AE;
		}
		.tui-right__box::before {
			width: 32rpx;
			height: 32rpx;
			content: "";
			position: absolute;
			top: 0;
			right: -32rpx;
			border-radius: 16rpx;
			box-shadow: -16rpx -16rpx 0rpx #2DB5AE;
		}
	}
	
	.tui-pro-price {
		font-size: 48rpx;
		font-family: Futura;
		font-weight: 600;
		color: #3A3A3C;
		line-height: 64rpx;
	  display: flex;
		.tui-original-price {
			padding-top: 18rpx;
		  font-size: 30rpx;
		  font-family: Futura;
		  font-weight: 600;
		  color: #999999;
		  line-height: 40rpx;
			padding-left: 16rpx;
		  text-decoration: line-through;
		}
	}
	
	.tui-pro-title {
	  font-size: 34rpx;
	  font-family: SourceHanSansSCVF;
	  font-weight: 600;
	  color: #3A3A3C;
	  line-height: 50rpx;
	}
	.tui-pro-info {
		font-size: 20rpx;
		font-family: SourceHanSansSCVF;
		font-weight: 600;
		color: #999999;
		line-height: 28rpx;
	}
	
	.tui-sale-info {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding-top: 16rpx;
		font-size: 20rpx;
		font-family: SourceHanSansSCVF;
		font-weight: 500;
		color: #999999;
		line-height: 28rpx;
		.tips {
			padding-top: 4rpx;
			.tip {
				width: 80rpx;
				height: 26rpx;
				background: #2DB5AE;
				border-radius: 6rpx;
				margin-right: 4rpx;
				font-size: 16rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 26rpx;
				text-align: center;
				margin-right: 20rpx;
			}
		}
	}
	
	.safeguard-info {
		width: 686rpx;
		height: 120rpx;
		background: #F5F6F8;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		padding: 18rpx 0rpx;
		margin: 0rpx 32rpx 20rpx;
		.safeguard-item {
			flex: 1;
			// width: 226rpx;
			height: 84rpx;
			border-right: 2rpx solid #979797;
			font-size: 20rpx;
			font-family: SourceHanSansSCVF;
			font-weight: 600;
			color: #999999;
			line-height: 28rpx;
			text-align: center;
			.img {
				width: 46rpx;
				height: 46rpx;
				margin-top: 2rpx;
			}
		}
		.safeguard-item:last-child {
			border-right: 0;
		}
		// .line {
		// 	width: 2rpx;
		// 	height: 84rpx;
		// 	background-color: #979797;
		// }
	}
	
	.tui-operation {
	  width: 100%;
	  position: fixed;
	  z-index: 100;
	  bottom: 0;
	  left: 0;
		background: #F1F1F1;
		box-shadow: 0rpx -4rpx 38rpx 0rpx rgba(0,0,0,0.2);
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		.tui-operation-left {
			padding: 12rpx 28rpx;
			width: 220rpx;
			// width: 330rpx;
			.tui-operation-item {
				width: 60rpx;
			  display: flex;
			  align-items: center;
			  flex-direction: column;
			  background: none;
			  padding: 0;
				margin: 0;
			  border: 0;
				
				image {
					width: 50rpx;
					height: 50rpx;
				}
			  &:after {
			    display: none;
			  }
			  .tui-operation-text {
			    font-size: 20rpx;
			    font-family: PingFang SC;
			    font-weight: 500;
			    color: #3A3A3C;
			    line-height: 22rpx;
			  }
			}
		}
		.tui-operation-right {
		  padding-top: 18rpx;
			padding-right: 18rpx;
			.btn {
				width: 186rpx;
				height: 66rpx;
				background: #2DB5AE;
				border-radius: 16rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 66rpx;
				text-align: center;
				margin-right: 14rpx;
			}
			.other-col {
				background: #98DAD7;
			}
		}
	}
	
</style>