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.platform == 1">
					<text class="grace-text-small grace-gray" v-if="item.goods.freight && item.goods.freight.price">运费 ￥{{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" style="margin-left:30rpx;" v-if="freight_price > 0">运费 ￥{{freight_price}}</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="store_state && (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" @click="openDialog">
								<text class="grace-capsule-icon">地址</text>
								<text class="grace-capsule-text" v-if="fetch.area_id">{{fetch.area_name}}{{fetch.address}}</text>
								<text class="grace-capsule-text" v-if="!fetch.area_id">您还没有收货地址，请点此填写地址</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>
								<picker @change="storeChange" :value="store_index" :range="store_data" v-if="store_state">
									<text class="picker grace-capsule-text grace-text-br" style="border-color:#E76B61; color:#E76B61;">
										{{store_data[store_index]}}
									</text>
								</picker>
								<text class="grace-capsule-text grace-text-br" style="border-color:#E76B61; color:#E76B61;" v-if="!store_state" @click="openDialog">
									暂无自提点，点此更换地址
								</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>
			<graceDialog ref="graceDialog" :isTitle="true" :isCloseBtn="false" :title="`收货地址`" v-on:closeDialog="closeDialog">
				<view class="content2" slot="content">
					<form class="grace-form grace-margin-top">
						<view class="grace-form-item grace-border-b">
							<text class="grace-form-label">您的姓名</text>
							<view class="grace-form-body">
								<input type="text" class="grace-form-input" name="name" v-model="fetch.address_contact" placeholder="请填写联系姓名"></input>
							</view>
						</view>
						<view class="grace-form-item grace-border-b">
							<text class="grace-form-label">联系电话</text>
							<view class="grace-form-body">
								<input type="number" class="grace-form-input" name="mobile" v-model="fetch.address_mobile" placeholder="请填写联系电话"></input>
							</view>
						</view>
						<view class="grace-form-item grace-border-b">
							<text class="grace-form-label">所在地区</text>
							<view class="grace-form-body" @tap="openPicker">
								<input type="text" class="grace-form-input" name="area" :value="fetch.area_name" disabled placeholder="请选择所在地区"></input>
							</view>
						</view>
						<view class="grace-form-item">
							<text class="grace-form-label">详细地址</text>
							<view class="grace-form-body">
								<input type="text" class="grace-form-input" name="address" v-model="fetch.address" placeholder="请填写详细地址"></input>
							</view>
						</view>

					</form>
				</view>
				<view slot="btns" class="grace-space-between">
					<text class="grace-dialog-buttons" @tap="closeDialog">关闭</text>
					<text class="grace-dialog-buttons grace-blue" @tap="setAddress">确认</text>
				</view>
			</graceDialog>
			
			<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>
			<graceAddressPicker :value="address_default" :show="graceAddressPickerShow" @confirm="pickerConfirm" @close="closePicker" cancelTColor="关闭"></graceAddressPicker>
		</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 : [],
				address : '',
				area_name : '',
				store : [],
			},
			mode : -1,
			store_state : false,
			store_data : [],
			store_index : 0,
			store_relation : [],
			freight_price : 0,
			old_freight_price : 0,
			graceAddressPickerShow : false,
			address_default : [],
		}
	},
	created() {
		
	},
	mounted() {
		this.bottom[this.index] = this;
		if (this.item.goods.freight) {
			this.freight_price = this.item.goods.freight.price;
		}
		
		if (this.item.goods.mode == 1 || this.item.goods.mode == 3) {
			this.mode = 1;
		} else if (this.item.goods.mode == 2 || this.item.goods.mode == 3) {
			this.mode = 2;
		}
		
		this.getInfo();
		this.getData(1);
	},
	methods:{
		openPicker : function() {
			this.graceAddressPickerShow = true;
		},
		pickerConfirm : function(e){
			if (e.names[0] == e.names[1]) {
				this.fetch.area_name = e.names[1] + ' ' + e.names[2];
			} else {
				this.fetch.area_name = e.names[0] + ' ' + e.names[1] + ' ' + e.names[2];
			}
			this.fetch.area_name += ' ';
			
			this.fetch.area_id = e.codes[0] + ',' + e.codes[1] + ',' + e.codes[2];
			this.closePicker();
		},
		closePicker : function () {
			this.graceAddressPickerShow = false;
		},
		// 获取地理位置，运费等信息
		getInfo : function() {
			var self = this;
			var data = {};
			data.goods_id = this.item.goods.id;
			data.noloading = 1;
			this.Dever.get(this, 'app/user/?l=api.goods', data, function(t) {
				self.address_default = self.fetch.area_id.split(',');
				self.setStore(t.store);
			});
			/*
			this.Dever.getLocation('wgs84', '', function(t) {
				if (t && t.longitude && t.longitude) {
					
				}
			});
			*/
		},
		setStore : function(store) {
			var data = Object.keys(store);
			if (data.length > 0) {
				var j = 0;
				for (var i in store) {
					this.store_data[j] = store[i].name;
					this.store_relation[j] = i;
					j++;
				}
				this.store_state = true;
			} else {
				this.store_data = [];
				this.store_relation = [];
				this.store_index = 0;
				this.store_state = false;
			}
			
		},
		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);
			}
		},
		storeChange : function(e) {
			this.store_index = e.detail.value;
		},
		//打开属性视图
		buyNow : function() {
			if (this.item.goods.platform == 1) {
				this.attrIsShow = true;
			} else {
				//this.Dever.alert('加入到口袋里');
				var name = this.item.goods.platform_name;
				uni.showModal({
					content: '该商品是'+name+'平台商品，是否立刻去购买？',
					cancelText: '取消',
					confirmText: '去购买',
					success: res => {
						if (res.confirm) {
							if (this.item.goods.platform == 2 || this.item.goods.platform == 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) {
			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;
			data.mode = this.mode;

			if (this.mode == 2) {
				if (this.store_data.length < 0) {
					this.Dever.alert('暂无自提点，请选择快递');
					return;
				}
				var store = this.fetch.store[this.store_relation[this.store_index]].id;
				data.store_id = store;
			}

			//如果想关闭属性
			//this.closeAttr();
			var location = 'dream/view?code='+this.Dever.config.code + '&name=' + this.Dever.config.name;
			data.refer = this.Dever.host + '/' + location;
			var self = this;
			this.Dever.post('app/user/?l=pay.product', data, function(t) {
				self.Dever.pay(t, location, '支付失败');
			});
		},
		// 获取属性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;
			}
			
			if (this.item.goods.freight) {
				var freight_price = 0;
				this.item.goods.freight.first_num = parseInt(this.item.goods.freight.first_num);
				var price = parseFloat(this.item.goods.freight.first_price);
				if (this.buyNum > this.item.goods.freight.first_num) {
					var num = this.buyNum - this.item.goods.freight.first_num;
					price = parseFloat(price + (this.item.goods.freight.next_price*num));
				}
				
				if (this.item.goods.freight.type == 2) {
					freight_price = this.payPrice*(price/100);
					freight_price = freight_price.toFixed(2);
				} else {
					freight_price = price;
				}
				
				if (this.mode == 2) {
					this.old_freight_price = freight_price;
				} else {
					this.freight_price = freight_price;
				}
			} else {
				this.freight_price = 0;
			}
			
			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;
			if (this.mode == 2) {
				//获取当前位置的自提点
				this.old_freight_price = this.freight_price;
				this.freight_price = 0;
			} else {
				this.freight_price = this.old_freight_price;
			}
		},
		openDialog : function() {
			this.$refs.graceDialog.open();
		}, 
		
		closeDialog : function() {
			this.$refs.graceDialog.hide();
		},
		
		setAddress : function() {
			var data = {};
			data.code = this.Dever.config.code;
			data.goods_id = this.item.goods.id;
			data.price = this.payPrice;
			data.num = this.buyNum;
			data.address_contact = this.fetch.address_contact;
			data.address_mobile = this.fetch.address_mobile;
			data.address = this.fetch.address;
			data.area_id = this.fetch.area_id;
			//data.noloading = 1;
			var self = this;
			this.Dever.post('app/user/?l=api.saveAddress', data, function(t) {
				self.closeDialog();
				self.item.goods.freight = t.freight;
				self.setStore(t.store);
				self.getAttrKey();
			});
		}
	},
	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;}
.content1{padding:25rpx; font-size:26rpx; text-align:center; line-height:60rpx;background-color:#F8F8F8; display:block;}
.content2{padding-left:30rpx; padding-right:80rpx; line-height:50rpx; font-size:26rpx;}
/* 图片形式 */
.demo-img{width:580rpx; height:850rpx;}
.grace-dialog-buttons{width:700rpx; line-height:88rpx; height:88rpx; display:block; overflow:hidden; text-align:center; font-size:26rpx; color:#999999;}


.grace-capsule-icon {
	white-space: nowrap;
	line-height: 34rpx;
	text-overflow: ellipsis;
	display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
	-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
	-webkit-line-clamp: 1; /** 显示的行数 **/
}

.grace-capsule-text {
	line-height : 34rpx;
	overflow: hidden;
	text-overflow: ellipsis;
    word-break: break-all;
	display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
	-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
	-webkit-line-clamp: 1; /** 显示的行数 **/
}
</style>