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" style="height:auto"></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" v-if="item.goods.type == 1">
					<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="(v, k) in fetch.info" :key="k">
					<image  :src="v.user.avatar" class="grace-comments-face"></image>
					<view class="grace-comments-body">
						<view class="grace-comments-header">
							<text class="grace-comments-header-text">{{v.user.username}}</text>
							<text class="grace-comments-info-text">{{v.cdate_string}}</text>
						</view>
						<text class="grace-comments-content">{{v.content}}</text>
						<view class="grace-comments-imgs" v-if="v.pic">
							<view class="grace-comments-image" v-for="(v1, k1) in v.pic" :key="k1">
								<image :src="v1" mode="widthFix" class="grace-comments-img" @click="Dever.viewPic(v.pic, v1)" style="height:auto"></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" style="height:auto"></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>
					
					<view v-if="item.goods.mode > 0">
						<view class="grace-form-item grace-border-b">
							<text class="grace-form-label">配送方式</text>
							<view class="grace-form-body" style="padding:20rpx 0;">
								<radio-group name="danxuan" @change="setMode">
									<label class="grace-check-item-v" v-if="item.goods.mode == 1 || item.goods.mode == 3"><radio value="1" checked></radio><text style="margin-left:10rpx;">快递</text></label>
									<label class="grace-check-item-v" v-if="item.goods.mode == 2 || item.goods.mode == 3"><radio value="2"></radio><text style="margin-left:10rpx;">自提</text></label>
								</radio-group>
							</view>
						</view>
										
						<view class="grace-wrap" style="margin-top: 20rpx;">
							<view class="grace-capsule margin" v-if="(item.goods.mode == 1 || item.goods.mode == 3) && mode == 1">
								<text class="grace-capsule-icon">地址</text>
								<text class="grace-capsule-text">河北省三河市燕郊开发区理想新城一期南区36号楼</text>
							</view>
							<view class="grace-capsule margin" v-if="(item.goods.mode == 2 || item.goods.mode == 3) && mode == 2">
								<text class="grace-capsule-icon grace-icon-br" style="background:#E76B61;">自提</text>
								<text class="grace-capsule-text grace-text-br" style="border-color:#E76B61; color:#E76B61;">河北省三河市燕郊开发区理想新城一期南区</text>
							</view>
						</view>
					</view>
					<!-- 属性列表区 -->
					<scroll-view style="height:700rpx;" scroll-y>
						<block v-for="(v, k) in item.goods.sell_attr" :key="k" v-if="item.goods.price_type == 2">
							<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 :minNum="1" :maxNum="kuNum" :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>
			<y-Fab :bottom="20" :right="140" v-if="!attrIsShow" @click="buyNow" bgColor="#e55d52" text="购买"></y-Fab>
			<y-Fab :bottom="20" :right="260" v-if="!attrIsShow" @click="showModal" bgColor="#0fa5e5" text="评价"></y-Fab>
			<block v-if="index == -1">
				<y-Fab :bottom="20" :right="20" v-if="!attrIsShow" @click="back" text="返回"></y-Fab>
			</block>
			<view v-if="showComment">
				<dever-publish :title="title" :is_upload="true" @hideModal="hideModal" @getRefresh="getRefresh" :type="key" :type_id="item.goods.id" :api="api"></dever-publish>
			</view>
		</view>
		<!-- 底部 -->
		
	</gracePage>
</template>

<script>
import deverContent from '@/lib/dever/components/content.vue';
import deverPublish from '@/lib/dever/components/publish.vue';
import copyText from "@/lib/clipboard.thorui.js"; 
export default {
	name: "product",
	props: {
		control : {
			type : Object,
			value : null
		},
		bottom : {
			type : Object,
			value : null
		},
		item : {
			type    : Object,
			value	: null
		},
		index : 0
	},
	data() {
		return {
			title : '发表新评价',
			api : 'app/community/?l=api.addComment',
			key : 'content/product',
			// 切换导航
			navItems : ['商品详情', '最新评价'],
			active:0,
			// 购买选择属性层展示
			attrIsShow : false,
			attr : '',
			attrKey : '',
			skuId : 0,
			attrSelect : {},
			payPrice : 0,
			buyNum : 1,
			kuNum : 9999,
			showComment : false,
			fetch : {
				info : [],
			},
			mode : 1,
		}
	},
	created() {
		
	},
	mounted() {
		this.bottom[this.index] = this;
		this.getData(1);
	},
	methods:{
		getData : function(page) {
			if (this.active == 0) {
				return;
			}
			this.Dever.page([page, 'info'], this, 'app/community/?l=api.comment', {type:this.key,type_id:this.item.goods.id,user:true});
		},
		// 导航切换
		navChange : function(e){
			this.active = e;
			if (e == 1) {
				this.getData(1);
			}
		},
		//打开属性视图
		buyNow : function() {
			if (this.item.goods.type == 1) {
				this.attrIsShow = true;
			} else {
				//this.Dever.alert('加入到口袋里');
				var name = this.item.goods.type_name;
				uni.showModal({
					content: '该商品是'+name+'平台商品，是否立刻去购买？',
					cancelText: '取消',
					confirmText: '去购买',
					success: res => {
						if (res.confirm) {
							if (this.item.goods.type == 2 || this.item.goods.type == 4) {
								this.copy(this.item.goods.code);
								this.Dever.alert('已复制，请打开' + name + 'APP即可购买该商品');
							} else {
								this.Dever.location(this.item.goods.link);
							}
						}
					}
				});
			}
		},
		copy : function(value) {
			var self = this;
			copyText.getClipboardData(value, function(res) {
			});
		},
		back : function() {
			uni.navigateBack();
		},
		// 关闭属性
		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_id = this.item.goods.id;
			data.price = this.payPrice;
			data.num = this.buyNum;
			data.sku = this.skuId;
			data.code = this.Dever.config.code;
			console.log(data);
			//如果想关闭属性
			//this.closeAttr();
			this.Dever.post('app/user/?l=pay.product', data, function(t) {
				console.info(t);
			});
		},
		// 获取属性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_type == 1) {
				this.kuNum = parseInt(this.item.goods.num);
				this.skuId = 0;
				this.payPrice = parseFloat(this.item.goods.price.min.price) * this.buyNum;
			} else if (this.item.goods.price_type == 2 && this.item.goods.price.list[this.attrKey]) {
				this.kuNum = parseInt(this.item.goods.price.list[this.attrKey].num);
				this.skuId = this.item.goods.price.list[this.attrKey].id;
				this.payPrice = parseFloat(this.item.goods.price.list[this.attrKey].price) * this.buyNum;
			}
			
			return true;
		},
		showModal : function() {
			this.showComment = true;
		},
		hideModal : function() {
			this.showComment = false;
		},
		getRefresh : function(cate_id, type, type_id, content) {
			this.getData(1);
			this.hideModal();
		},
		setMode : function(e) {
			this.mode = e.detail.value;
		}
	},
	components:{deverContent, deverPublish, copyText}
}
</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;
}
.block1{line-height:80rpx; display:block; width:100%; text-align:center; font-size:28rpx;}
.block2{line-height:66rpx; display:block; width:100%; text-align:center; font-size:28rpx;}
.margin{margin:10rpx 10rpx 0 0;}
.grace-border-b{border-color:#F8F8F8;}
.grace-check-item-v{width:100%; padding:15rpx 15rpx;}
</style>