dreamland/pages/dream/view/product.vue

<template name="product">
	<gracePage headerBG="#FFFFFF" footerBg="#FFFFFF" :customHeader="false">
		<view slot="gBody" style="padding-bottom:120rpx;">
			<!-- 轮播图 -->
			<swiper class="grace-swiper"  autoplay="true" indicator-dots 
			indicator-color="rgba(255, 255, 255, 1)" indicator-active-color="#3688FF" 
			style="height:399rpx" interval="5000">
				<swiper-item class="grace-swiper-item" v-for="(v, k) in item.goods.pic" :key="k">
					<image :src="v" mode="widthFix" class="grace-swiper-image"></image>
				</swiper-item>
			</swiper>
			<!-- 商品标题 分享按钮 -->
			<view class="grace-product-padding grace-space-between grace-flex-vcenter">
				<text class="grace-product-title grace-bold">{{item.goods.name}}</text>
			</view>
			<!-- 价格 -->
			<view class="grace-product-padding">
				<view class="grace-nowrap grace-flex-vcenter">
					<text class="grace-product-price">￥{{item.goods.price.min.price}}</text>
					<text class="grace-text grace-gray grace-line-through" style="margin-left:30rpx;">￥{{item.goods.price.min.s_price}}</text>
				</view>
				<view class="grace-space-between grace-flex-vcenter">
					<text class="grace-text-small grace-gray" v-if="item.goods.freight">运费 ￥{{item.goods.freight.price}}</text>
					<text class="grace-text-small grace-gray">已售 {{item.goods.sell_num}} 件</text>
				</view>
			</view>
			<view class="grace-common-line"></view>
			<!-- 底部信息切换导航 -->
			<view class="grace-product-padding">
				<graceNavBar :items="navItems" lineHeight="80rpx" :isCenter="true" 
				:currentIndex="active" :size="200" activeLineBg="#FF7900" textAlign="center"
				activeColor="#FF7900" activeLineWidth="200rpx" activeLineHeight="2rpx" 
				:margin="10" @change="navChange"></graceNavBar>
			</view>
			<!-- 详情 请根据项目情况自行改进 可以使用 富文本-->
			<view class="grace-product-padding" :hidden="active == 1">
				<dever-content :item="item.goods.content_array" :pics="item.goods.content_pic" :skeleton="false"></dever-content>
			</view>
			<!-- 评论区 -->
			<view class="grace-comments grace-product-padding" :hidden="active == 0">
				<view class="grace-comments-items" v-for="(item, index) in commentContents" :key="index">
					<image  :src="item.face" class="grace-comments-face"></image>
					<view class="grace-comments-body">
						<view class="grace-comments-header">
							<text class="grace-comments-header-text">{{item.name}}</text>
							<text class="grace-comments-info-text">{{item.date}}</text>
						</view>
						<text class="grace-comments-content">{{item.content}}</text>
						<view class="grace-comments-imgs" v-if="item.imgs">
							<view class="grace-comments-image" v-for="(img, indexImg) in item.imgs" :key="indexImg">
								<image :src="img" mode="widthFix" class="grace-comments-img" @click.stop="showImgs(index, indexImg)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 属性选择 -->
			<graceBottomDialog :show="attrIsShow" @closeDialog="closeAttr">
				<form @submit="attrSubmit" style="box-sizing:border-box; padding:10rpx 25rpx;" class="grace-form" slot="content">
					<!-- 关闭按钮 -->
					<view class="grace-nowrap grace-flex-end">
						<text class="grace-icons icon-close" @tap="closeAttr"></text>
					</view>
					<!-- 头部商品信息 -->
					<view class="grace-product-attr-info">
						<image class= "grace-product-attr-info-image"  mode="widthFix" 
						:src="item.goods.pic_cover"></image>
						<view class="grace-product-attr-info-body">
							<text class="grace-product-attr-info-title">{{item.goods.name}}</text>
							<view class="grace-nowrap grace-flex-vcenter">
								<text class="grace-product-price">￥{{payPrice}}</text>
								<text class="grace-text grace-gray" style="margin-left:30rpx;">库存：{{kuNum}}件</text>
							</view>
						</view>
					</view>
					<!-- 属性列表区 -->
					<scroll-view style="height:700rpx;" scroll-y>
						<block v-for="(v, k) in item.goods.sell_attr" :key="k">
							<view class="grace-title grace-margin-top">{{v.name}}</view>
							<view><graceSelectTags selectedColor="#FF0036" :items="v.option_sku" type="radio" @change="change"></graceSelectTags></view>
						</block>
						<view class="grace-margin-top"><text class="grace-title">购买数量</text></view>
						<view style="margin-bottom: 40rpx;">
							<graceNumberBox :value="buyNum" v-on:change="buyNumChange"></graceNumberBox>
						</view>
					</scroll-view>
					<view class="grace-product-attr-btn">
						<button type="warn" style="background-color:#FF0036;" class="grace-button grace-border-radius" formType="submit">立即购买</button>
					</view>
				</form>
			</graceBottomDialog>
		</view>
		<!-- 底部 -->
		<view class="grace-space-between grace-flex-vcenter grace-bg-white" slot="gFooter">
			<view class="page-buy" @tap="buyNow">买</view>
		</view>
		
	</gracePage>
</template>

<script>
import deverContent from '@/lib/dever/components/content.vue';
import gracePage from "@/lib/graceUI/components/gracePage.vue";
import graceNavBar from "@/lib/graceUI/components/graceNavBar.vue";
import graceBottomDialog from '@/lib/graceUI/components/graceBottomDialog.vue';
import graceNumberBox from '@/lib/graceUI/components/graceNumberBox.vue';
import graceSelectTags from '@/lib/graceUI/components/graceSelectTags.vue';
export default {
	name: "product",
	props: {
		control : {
			type : Object,
			value : null
		},
		item : {
			type    : Object,
			value	: null
		},
	},
	data() {
		return {
			// 切换导航
			navItems : ['商品详情', '相关评论'],
			active:0,
			// 模拟评论数据 (实际项目来自api请求)
			commentContents : [
				{
					"content":"故国三千里，深宫二十年。一声何满子，双泪落君前。",
					"name":"graceUI - 小码",
					"face":"https://graceui.oss-cn-beijing.aliyuncs.com/faces/1.png",
					"date":"08/10 08:00"
				},
				{
					"content":"而今渐行渐远，渐觉虽悔难追。漫寄消寄息，终久奚为。也拟重论缱绻，争奈翻覆思维。纵再会，只恐恩情，难似当时。",
					"name":"路过繁华",
					"face":"https://graceui.oss-cn-beijing.aliyuncs.com/faces/2.png",
					"date":"02/10 18:00"
				},
				{
					"content":"图片回复，点击图片可以预览......",
					"name":"林夕阳",
					"imgs" : [
						"https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/4.png",
						"https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/3.png",
						"https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/1.png",
					],
					"face":"https://graceui.oss-cn-beijing.aliyuncs.com/faces/2.png",
					"date":"08/12 09:00"
				}
			],
			// 购买选择属性层展示
			attrIsShow : false,
			attr : '',
			attrKey : '',
			skuId : 0,
			attrSelect : {},
			payPrice : 0,
			buyNum : 1,
			kuNum : 9999,
		}
	},
	onLoad:function () {},
	methods:{
		// 分享
		share: function(){uni.showToast({title:'请自行完善分享代码', icon: "none"});},
		// 导航切换
		navChange : function(e){
			this.active = e;
		},
		// 评论图片展示
		showImgs : function(commentsIndex, imgIndex){
			console.log(commentsIndex, imgIndex);
			uni.previewImage({
				urls:this.commentContents[commentsIndex].imgs,
				current:this.commentContents[commentsIndex].imgs[imgIndex]
			})
		},
		//打开属性视图
		buyNow : function() {
			this.attrIsShow = true;
		},
		// 关闭属性
		closeAttr : function() { 
			this.attrIsShow = false;
		},
		// 属性选择
		change : function (e) {
			var temp = e.split('-');
			this.attrSelect[temp[0]] = e;
			this.getAttrKey();
		},
		// 购买数量变化
		buyNumChange : function (e) {
			this.buyNum = e[0];
			this.getAttrKey();
		},
		// 属性提交
		attrSubmit : function(e) {
			//后续操作
			uni.showToast({
				title:"属性已经收集,请观察控制台",
				icon:"none"
			});
			var data = {};
			data.goods = this.item.goods.id;
			data.price = this.payPrice;
			data.num = this.buyNum;
			data.sku = this.skuId;
			console.log(data);
			//如果想关闭属性
			//this.closeAttr();
		},
		// 获取属性key
		getAttrKey : function() {
			var key = [];
			for (var i in this.attrSelect) {
				key.push(this.attrSelect[i]);
			}
			this.attrKey = key.join('_');
			
			if (this.item.goods.price.list[this.attrKey]) {
				this.payPrice = parseFloat(this.item.goods.price.list[this.attrKey].price) * this.buyNum;
				this.kuNum = this.item.goods.price.list[this.attrKey].num;
				this.skuId = this.item.goods.price.list[this.attrKey].id;
			}
		},
		// 返回首页
		gohome : function(){
			uni.switchTab({
				url:'../index/index'
			});
		}
	},
	components:{deverContent, gracePage, graceNavBar, graceBottomDialog, graceSelectTags, graceNumberBox}
}
</script>

<style>
.grace-common-line{height:16rpx;}
.grace-product-padding{padding:20rpx 25rpx;}
.grace-product-title{line-height:44rpx; font-size:28rpx;}
.grace-product-share{width:80rpx; height:80rpx; text-align:center; font-size:40rpx; color:#FF7900; line-height:80rpx; flex-shrink:0; margin-left:12px;}
.grace-product-share:after{width:0; height:0;}
.grace-product-price{color:#FF7900; line-height:60rpx; font-size:30rpx; font-weight:bold;}
.grace-product-info-img{width:100%;}
.grace-product-attr-info{overflow:hidden; display:flex; justify-content:space-between;  border-bottom:1px solid #F1F1F3; padding-bottom:26rpx;}
.grace-product-attr-info-image{width:120rpx; height:auto; margin-right:10px; flex-shrink:0;}
.grace-product-attr-info-body{width:700rpx;}
.grace-product-attr-info-title{width:100%; font-size:28rpx; color:#333333; display:block;}
.grace-product-attr-info-stone{width:100%; font-size:20rpx; margin-top:8rpx; color:#666666; display:block;}
.icon-close{font-size:30rpx; line-height:80rpx; color:#888888;}
/* 调整宫格大小 */
.grace-grids-items{padding:6rpx 0; width:120rpx;}
.grace-grids-icon{height:50rpx; line-height:50rpx; font-size:40rpx; color:#6B7375;}
.grace-grids-text{line-height:28rpx; font-size:20rpx; margin-top:2px; color:#6B7375;}
.grace-footer-active{color:#FF0036;}

.page-buy {
  position: fixed;
  right: 120rpx;
  bottom: 30rpx;
  width: 80rpx;
  height: 80rpx;
  background: rgb(229, 93, 82);
  border-radius: 80rpx;
  color: #fff;
  font-size: 30rpx;
  line-height: 80rpx;
  text-align: center;
  z-index: 2000;
}
</style>