shicai/pages/product/product.vue

<template>
	<view class="container">
		<!-- 轮播图 -->
		<top-swiper :imgList="imgList"></top-swiper>
		<!-- 标题 -->
		<product-content :goodsObjact="goodsObjact"></product-content>
		<!-- 拼货时间及优惠 -->
		<discounts @clickCoupon="Getcoupon" :Info="goodsObjact.store_info" :showCoupon="true"></discounts>
		<!-- 猜你喜欢 -->
		<guess-like @Addcar='Addcar' @clickNavTo='navToDetailPage' :goodList = 'good_list||[]'></guess-like>
		<!-- 评价 -->
		<estimate @navTo="navTo('/pages/product/reply?id=' + goodsid)" v-if="reply" :reply='reply' :list='list'></estimate>
		<!-- 规格信息 -->
		<fresh-detail :goodsObjact="goodsObjact"></fresh-detail>
		<!-- 图文详情 -->
		<content-text :description="description"></content-text>
		<!-- 底部高度撑开 -->
		<view class="contentBottomHeight"></view>
		<!-- 底部操作菜单 -->
		<product-bottom @buy="buy" :seckillObj="seckillObj"></product-bottom>
		
	</view>
</template>

<script>
import { goodsDetail, cartAdd } from '@/api/product.js';
import { mapState } from 'vuex';
import store from '@/store/index.js';
import { saveUrl } from '@/utils/loginUtils.js';
// #ifdef H5
import { weixindata } from '@/utils/wxAuthorized';
// #endif
// 头部轮播图
import topSwiper from './common/topSwiper.vue';
// 标题
import productContent from './common/productContent.vue';
// 到货时间及优惠
import discounts from './common/discounts.vue';
// 规格信息
import freshDetail from './common/freshDetail.vue';
// 图文详情
import contentText from './common/contentText.vue';
// 底部按钮
import productBottom from './common/productBottom.vue';
// 猜你喜欢
import guessLike from './common/guessLike.vue';
// 评价
import estimate from './common/estimate.vue';
export default {
	components: {
		guessLike,
		topSwiper,
		productContent,
		discounts,
		freshDetail,
		contentText,
		productBottom,
		estimate
	},
	data() {
		return {
			reply: '', //评论
			list: '', //商品详情的数据
			type: 1, //默认支付方式add为
			goodsNumber: 1, //购买数量
			goodsid: '', //商品id
			description: '', //商品描述
			goodsObjact: {
				percent:1
			}, //保存商品数据
			//图片循环
			imgList: [],
			// 对比对象
			actionPrice: 0, //默认选中商品价格
			actionImage: '', //默认选中图片
			good_list: '', //猜你喜欢列表
			goodsNumberMax: 0, //最大可购买数量
			// 倒计时数据保存
			seckillObj: {
				stopTime: 0, //结束时间
				stop: false, //是否结束
				stopTimeH: 0, //小时
				stopTimeM: 0, //分钟
				stopTimeS: 0, //秒钟
				stopTimeD: 0, //天
				upTime: 0 //更新组件内部组件用
			},
			// 拼团数据保存
			pink: {
				id: '', //拼团编号
				uid: '', //用户编号
				people: '', //拼团人数
				price: '', //拼团价格
				stop_time: '', //拼团结束时间
				nickname: '', //团长昵称
				avatar: '', //团长头像
				count: '', //拼团剩余人数
				h: '', //时
				i: '', //分
				s: '' //秒
			},
			userInfo: ''
		};
	},
	filters: {
		parseIntTo(percent) {
			percent = +percent * 100;
			if (percent % 1 === 0) {
				return percent;
			} else {
				percent = percent.toFixed(1);
				return percent;
			}
		}
	},
	async onLoad(options) {
		let obj = this;
		obj.userInfo = uni.getStorageSync('userInfo');
		//保存商品id
		this.goodsid = options.id;
		// 判断有无人邀请
		if (options.spread) {
			// 存储邀请人
			uni.setStorageSync('spread', options.spread);
		}
		saveUrl();
		// 判断是否为秒杀商品
		this.goodsDetail();
		// 注册邀请信息
		// #ifdef H5
		let bool = uni.getStorageSync('weichatBrowser') || '';
		if (bool) {
			weixindata();
		}
		// #endif
	},
	computed: {
		...mapState(['weichatObj', 'baseURL', 'urlFile'])
	},
	// 分享
	onShareAppMessage(options) {
		// 设置菜单中的转发按钮触发转发事件时的转发内容
		let pages = getCurrentPages(); //获取加载的页面
		let currentPage = pages[pages.length - 1]; //获取当前页面的对象
		let url = currentPage.route; //当前页面url
		let item = currentPage.options; //如果要获取url中所带的参数可以查看options
		let shareObj = {
			title: this.goodsObjact.store_name + '   价格：' + this.goodsObjact.price, // 默认是小程序的名称(可以写slogan等)
			path: url + '?id=' + item.id + '&spread=' + this.userInfo.uid, // 默认是当前页面，必须是以‘/’开头的完整路径
			imageUrl: this.goodsObjact.image,
			success: function(res) {
				// 转发成功之后的回调
				if (res.errMsg == 'shareAppMessage:ok') {
				}
			},
			fail: function() {
				// 转发失败之后的回调
				if (res.errMsg == 'shareAppMessage:fail cancel') {
					// 用户取消转发
				} else if (res.errMsg == 'shareAppMessage:fail') {
					// 转发失败，其中 detail message 为详细失败信息
				}
			}
		};

		return shareObj;
	},
	methods: {
		//领取优惠券
		Getcoupon() {
			uni.navigateTo({
				url: '/pages/coupon/getcoupon'
			});
		},
		//详情页
		navToDetailPage(item) {
			let id = item.id;
			uni.navigateTo({
				url: '/pages/product/product?id=' + id
			});
		},
		// 跳转页面
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		//加入购物车
		Addcar(item) {
			let obj = this;
			cartAdd({
				cartNum: '1', //商品数量
				uniqueId: '', //商品标签
				new: 0, //商品是否新增加到购物车1为不加入0为加入
				mer_id: '',
				productId: item.id //商品编号
			})
				.then(function(e) {
					uni.showToast({
						title: '成功加入购物车',
						type: 'top',
						duration: 500,
						icon: 'none'
					});

					obj.goodsDetail();
				})
				.catch(e => {
					console.log(e);
				});
		},
		// 获取普通商品信息
		goodsDetail() {
			let obj = this;
			goodsDetail({}, this.goodsid).then(function({ data }) {
				obj.list = data;
				obj.good_list = data.good_list; //保存猜你喜欢列表
				obj.reply = data.reply; //保存评论列表
				let goods = data.storeInfo;
				obj.goodsObjact = goods;
				if (obj.goodsObjact.description != null) {
					obj.description = obj.goodsObjact.description.replace(/\<img/gi, '<img class="rich-img"');
				} //小程序商品详情图超出屏幕问题
				obj.imgList = goods.slider_image; //保存轮播图
				obj.specList = data.productAttr; //保存分类列表
				obj.productValue = data.productValue; //保存分类查询数据
				obj.actionPrice = goods.price; //保存默认选中商品价格
				obj.actionImage = goods.image_base; //保存默认选中商品图片
				obj.goodsNumberMax = goods.stock; //保存默认选中最大可购买商品数量
				obj.shopId = data.mer_id; //保存商店id
			});
		},
		// 立即购买
		buy(item) {
			let obj = this;
			obj.type = item;
			// 创建传值对象
			let data = {
				cartNum: obj.goodsNumber, //商品数量
				new: 1,
				productId: obj.goodsid
			};
			if(obj.type == 2) {
				data.new = 0;
			}
			cartAdd(data)
				.then(function(e) {
					let da = e.data;
					if (obj.type == 1) {
						// 跳转到支付页
						uni.navigateTo({
							url: '/pages/order/createOrder?id=' + da.cartId
						});
					}
					if (obj.type == 2) {
						uni.showToast({
							title: '成功加入购物车',
							type: 'top',
							duration: 2000,
							icon: 'none'
						});
						obj.goodsDetail();
					}
				})
				.catch(e => {
					console.log(e);
				});
		},
		// 阻止触发上级事件
		stopPrevent() {}
	}
};
</script>

<style lang="scss">
//默认商品底部高度
.goodsBottom {
	height: 160rpx;
}
page {
	background: #f0f0f0;
}
//秒杀、拼团底部高度
.contentBottomHeight {
	height: 110rpx;
}
//默认商品底部高度
.goodsBottom {
	height: 160rpx;
}
/deep/ .iconenter {
	font-size: $font-base + 2rpx;
	color: #888;
}
/deep/ .con_image {
	width: 130rpx;
	height: 130rpx;
	display: inline-block;
	padding: 15rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
/* 商品详情中限制图片大小 */
/deep/ .rich-img {
	width: 100% !important;
	height: auto;
}
</style>