uniapp-shikongwang/pages/goodsDetail/index.vue

<template>
	<view>
		<!-- 商品图片轮播 -->
		<swiper :current="current" :indicator-dots="true" :circular="true" class="swiper-box">
			<swiper-item v-for="item in goods_detail.banners" :key="item.id">
				<image :src="item.cover" style="width: 100%; height: 100%;"></image>
				<!-- <image :src="item.cover" mode="aspectFit"></image> -->
			</swiper-item>
		</swiper>
		<!-- 商品主要信息 -->
		<view class="head-info">
			<view class="lf-font-40">{{ goods_detail.name }}</view>
			<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20">
				<view class="lf-flex price">
					<view>¥{{ goods_detail.specs[0].selling_price }}</view>
					<view>¥{{ goods_detail.specs[0].original_price }}</view>
					<view v-if="goods_detail.specs[0].cost">{{ goods_detail.specs[0].cost }}</view>
				</view>
				<view>
					<view class="lf-color-gray">{{ goods_detail.specs[0].sold_stock_text }}</view>
					<view class="lf-color-primary">{{ goods_detail.specs[0].stock_text }}</view>
				</view>
			</view>
			<view class="label-box" v-if="goods_detail.tags && goods_detail.tags.length">
				<view class="label-item" v-for="(item, index) in goods_detail.tags" :key="index">{{ item }}</view>
			</view>
		</view>
		<!-- 地址信息 -->
		<view class="address-box">
			<view class="lf-font-32 lf-font-bold">适用门店</view>
			<view class="lf-m-t-20 lf-row-between">
				<view class="lf-flex">
					<image class="lf-fle shop-img" :src="goods_detail.store.cover"></image>
					<view class="lf-font-32 lf-m-l-20" style="max-width: 512rpx;">{{ goods_detail.store.name }}</view>
				</view>
				<view @click="makePhoneCall(goods_detail.store.tel)">
					<u-icon name="phone" color="#3A62FF" size="46"></u-icon>
				</view>
			</view>
			<view class="lf-flex lf-m-t-20" @click="openMap">
				<u-icon name="map-fill" size="60"></u-icon>
				<view class="lf-m-l-20 lf-font-32">{{ goods_detail.store.address }}</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="goods-detail">
			<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
			<image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index"></image>
		</view>
		<!-- 修饰专用 -->
		<view class="extra"></view>
		<!-- 吸底操作按钮 -->
		<view class="lf-row-between fixed-bottom">
			<view class="lf-flex lf-p-t-10 lf-p-b-10">
				<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/index/index', {type: 'switch'})">
					<u-icon name="home" size="50"></u-icon>
					<view class="lf-m-t-1">首页</view>
				</view>
				<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/contactService/index')">
					<u-icon name="server-fill" size="50"></u-icon>
					<view class="lf-m-t-1">客服</view>
				</view>
				<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
					<u-icon name="heart-fill" size="50" color="#FF0000" v-if="is_collect"></u-icon>
					<u-icon name="heart" size="50" v-else></u-icon>
					<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
				</view>
				<button class="lf-flex-column lf-row-center icon-item" open-type="share">
					<u-icon name="share" size="50"></u-icon>
					<view class="lf-m-t-1">分享</view>
				</button>
			</view>
			<button class="btn" @click="toAddOrder">立即抢购</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				current: 0, // 轮播下标
				goods_id: 0,
				goods_detail: {},
				is_collect: 0 // 1为当前收藏商品了，0为否
			}
		},
		onLoad(options){
			this.goods_id = options.id;
			this.getGoodsDetail();
		},
		methods: {
			getGoodsDetail(){
				this.$http(this.API.API_GOODS_DETAIL, {goods_id: this.goods_id}).then(res => {
					console.log("res", res);
					this.goods_detail = res.data;
					this.is_collect = Boolean(res.data.user.is_collect);
				})
			},
			// 切换商品收藏
			switchCollect(){
				this.$http(this.API.API_COLLECT_DEAL, {goods_id: this.goods_id}).then(res => {
					console.log("res", res);
					this.is_collect = Boolean(res.data.user.is_collect);
				})
			},
			// 拨打电话
			makePhoneCall(phoneStr){
				uni.makePhoneCall({
					phoneNumber: String(phoneStr)
				})
			},
			// 打开地图
			openMap(){
				return;
				uni.openLocation({
				  longitude: 108.36637,
				  latitude: 22.817746,
				  scale: 18
			   })
			},
			// 跳转到确认下单页面
			toAddOrder(){
				let goods_id = this.goods_detail.id;
				let goods_specs_id = this.goods_detail.specs[0].id
				this.$url('/pages/order/confirm-order?goods_id='+ goods_id +'&goods_specs_id='+ goods_specs_id);
			}
		},
		onShareAppMessage(){
			let goods = this.goods_detail;
			let title = goods.name;
			let imageUrl = goods.cover;
			let path = '/pages/route/index';
			
			return {
				title,
				path,
				imageUrl
			}
		}
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
		overflow-x: hidden;
	}
</style>
<style lang="scss" scoped="scoped">
	.swiper-box{
		width: 750rpx;
		height: 520rpx;
		background-color: #FFFFFF;
	}
	
	.head-info{
		width: 750rpx;
		height: auto;
		box-sizing: border-box;
		padding: 0 32rpx;
		padding-top: 20rpx;
		background-color: #FFFFFF;
		.price>view:nth-of-type(1){
			color: #FF0000;
			font-size: 40rpx;
			margin-right: 22rpx;
		}
		.price>view:nth-of-type(2){
			text-decoration: line-through;
			color: #777777;
			margin-right: 22rpx;
		}
		.price>view:nth-of-type(3){
			width: max-content;
			padding: 0 18rpx;
			height: 46rpx;
			background-color: #FE9903;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
		}
		.label-box{
			min-height: 130rpx;
			width: 100%;
			border-top: 1rpx solid #E5E5E5;
			display: flex;
			flex-wrap: wrap;
			padding: 30rpx 0 10rpx 0;
			.label-item{
				width: 156rpx;
				height: 70rpx;
				border-radius: 10rpx;
				border: 2rpx solid #FE9903;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #FE9903;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}
	
	.address-box{
		width: 750rpx;
		height: auto;
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding: 32rpx;
		margin-top: 20rpx;
		.shop-img{
			width: 60rpx;
			height: 60rpx;
			border-radius: 10rpx;
			background-color: #EEEEEE;
		}
	}
	
	.goods-detail{
		width: 750rpx;
		height: auto;
		background-color: #FFFFFF;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		.goods-img{
			width: 100%;
		}
	}
	
	.extra{
		width: 100%;
		height: 120rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}
	
	.fixed-bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		width: 100%;
		height: auto;
		padding: 0 32rpx;
		border-top: 1rpx solid #e5e5e5;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.icon-item{
			padding: 0 14rpx;
			margin-right: 16rpx;
			background-color: transparent;
			margin: 0;
			line-height: initial;
			font-size: 28rpx;
			font-weight: inherit;
			&:first-child{
				padding-left: 0;
			}
		}
		.btn{
			margin: 0;
			padding: 0;
			width: 208rpx;
			height: 80rpx;
			background-color: #FE9903;
			color: #FFFFFF;
			line-height: 80rpx;
			font-size: 32rpx;
			border-radius: 42rpx;
		}
	}
</style>