book-hi/pages-mall/pages/goods/detail.vue

<template>
	<view class="page">
		<!-- 商品图片 -->
		<ImgSwiper :list="[goodsDetail.cover]"></ImgSwiper>
		<!-- 商品信息 -->
		<GoodsInfo :data="goodsDetail" :goodsType="goodsType"  :selectedSku="selectedSku"></GoodsInfo>
		<!-- 选择项 -->
		<GoodsSelect :selectedSku="selectedSku" :expressInfo="expressInfo" :selectedAddress="selectedAddress" @openSku="openSkuPopup"></GoodsSelect>

		<!-- 商品详情 -->
		<TitleOperate title="商品详情" :backgroundColor="bgColor" titleSize="32rpx" align="center"></TitleOperate>
		<!-- <view class="details-html" v-html="goodsDetail.html"></view> -->
		<view class="detailsBox">
			<view class="p">
				<text>书名：{{goodsDetail.title||''}}</text>
			</view>
			<view class="p">
				<text>定价：{{goodsDetail.price_market||''}}</text>
			</view>
			<view class="p">
				<text>作者：{{goodsDetail.author||''}}</text>
			</view>
			<view class="p">
				<text>出版社：{{goodsDetail.publish||''}}</text>
			</view>
			<view class="p">
				<text>出版日期：{{goodsDetail.pub_date||''}}{{goodsDetail.pub_time?'-'+goodsDetail.pub_time:''}}</text>
			</view>
			<view class="p">
				<text>ISBN：{{goodsDetail.isbn||''}}</text>
			</view>
		</view>
		
		<!-- 底部操作按钮 -->
		<submitBar :data="goodsDetail" @addShoppingCart="addShoppingCart" @buyNow="buyNow"></submitBar>
		<!-- 选择sku -->
		<GoodsSelectSku ref="GoodsSelectSkuRef" :expressInfo="expressInfo" @addShoppingCart="addShoppingCart" @buyNow="buyNow" @change="changeSku"></GoodsSelectSku>
		
		<!-- <u-skeleton :loading="pageLoading" :animation="true" bgColor="#FFF"></u-skeleton> -->
	</view>
</template>

<script>
import TitleOperate from '@/components/title-operate.vue';
import ImgSwiper from '@/components/img-swiper.vue';
import GoodsInfo from '@/pages-mall/components/goods/goods-info.vue';
import GoodsSelect from '@/pages-mall/components/goods/goods-select.vue';
import submitBar from '@/pages-mall/components/goods/submitBar.vue';
import GoodsSelectSku from '@/pages-mall/components/goods/goods-select-sku.vue';
import CardGoods from '@/pages/mall/components/card.vue';
var _self;
export default {
	components: {
		TitleOperate,
		ImgSwiper,
		GoodsInfo,
		GoodsSelect,
		submitBar,
		GoodsSelectSku,
		CardGoods
	},
	data() {
		return {
			pageLoading:false,
			// 背景色
			bgColor: this.$appTheme.appThemeBgColor,
			// 商品类型，normal、points
			goodsType: 'normal',
			goodsId:null,
			goodsDetail:{},
			// 相关商品
			goodsData: [],
			// 已选择sku
			selectedSku: { difference: '', id: 0 },
			// 已选择地址
			selectedAddress: {},
			// 浏览历史
			browseHistory:[],
		};
	},
	onLoad(ops) {
		_self = this;
		const token = uni.getStorageSync('token');
		if(!token){
			uni.navigateTo({
				url:'/pages/login/index'
			})
			return false;
		}
		if (ops.goodsId){
			this.goodsId = ops.goodsId;
			this.getGoodsDetail();
			if(!this.$store.state.pub.baseConfig.express_type){
				this.getExpressInfo();
			}
		}else{
			uni.navigateBack();
		}
	},
	onShow() {
		uni.$once('addressInfo',function(data){
			console.log(data);
			_self.selectedAddress = data;
		})
	},
	computed: {
		// 运费模板
		expressInfo() {
			return this.$store.state.pub.baseConfig;
		},
	},
	methods: {
		// 足迹
		addBrowHistory(){
			const hist = uni.getStorageSync('browseHistory');
			console.log('browseHistory>>>',hist)
			if(hist){
				let index = hist.findIndex(e=>e.id===this.goodsDetail.id);
				console.log('查到了index>>',index);
				if(index>-1){
					// 之前在缓存中存在了，先删除，在追加到第一位
					hist.splice(index, 1);
				}
			//将 e 重新追加到数组第一位
				this.browseHistory = [].concat(hist);
			}
			/* 
			 author: "刘浪"
			 cate_id: "61"
			 code: "wk-755732"
			 cover: "https://bookyun.oss-cn-qingdao.aliyuncs.com/bookpic/xyg9787569205107.jpg"
			 express_template_id: 0
			 expresstemplate: null
			 id: 2
			 is_collection: 1
			 isbn: "9787569205107"
			 price_selling: "0.01"
			 pub_date: "2017-05"
			 pub_time: "1"
			 publish: "吉林大学出版社"
			 sku: [{id: 28, admin_id: 1, goods_id: 2, stock_total: 100, price_selling: "0.01", need_score: null,…},…]
			 spu: [{id: 10, spu_id: 1, goods_id: 2, name: "品相", item: "良品,一般,次品", createtime: 1711707864,…}]
			 stock_sales: 11221
			 stock_total: "278"
			 tags_type: "hot"
			 title: "医药数理统计"
			 */
			let json = {
				id:this.goodsDetail.id,
				cover:this.goodsDetail.cover,
				title:this.goodsDetail.title,
				publish:this.goodsDetail.publish,
			};
			// 追加到第一位
			this.browseHistory.unshift(json);
			//只保存前100
			this.browseHistory.slice(0, 100);
			uni.setStorageSync('browseHistory', this.browseHistory);
		},
		// 获取运费模板信息
		getExpressInfo(){
			this.$u.api.getBaseInfoAjax().then(({data})=>{
				console.log(data);
				this.$store.commit('pub/commitBaseConfig',data);
			}).catch(()=>{
				
			})
		},
		// 查询商品详情
		getGoodsDetail() {
			this.pageLoading = true;
			this.$u.api.getGoodsDetailAjax(this.goodsId).then(({code,data})=>{
				this.pageLoading = false;
				this.goodsDetail = data;
				// this.selectedSku = this.goodsDetail.sku[1]||this.goodsDetail.sku[0];
				this.$refs.GoodsSelectSkuRef.initSkuFun(this.goodsDetail);
				
				// 进入足迹
				this.addBrowHistory();
			});
		},

		// 打开选择sku的弹窗
		openSkuPopup() {
			console.log(222);
			this.$refs.GoodsSelectSkuRef.open(this.goodsDetail);
		},

		// 切换sku
		changeSku(e) {
			this.selectedSku = e;
		},

		// 加入购物车
		addShoppingCart() {
			this.openSkuPopup();
		},

		// 立即购买
		buyNow() {
			console.log(111);
			this.openSkuPopup();
		}
	}
};
</script>

<style lang="scss" scoped>
	// .page{
	// 	padding-bottom: 130rpx;
	// }
	.details-html {
		background-color: $app-theme-bg-color;
		padding: 0 30rpx 30rpx 30rpx;
		margin-bottom: 100rpx;
	}

	.detailsBox{
		padding: 30rpx;
		background-color: #fff;
		.p{
			line-height: 1.5;
		}
	}
</style>