hxj-adrioid/pages/program/program.vue

<template>
	<view>
		<view class="swiper_cent" style="position: relative;">
			<view style="position: absolute; z-index: 999;">
				<uni-nav-bar left-icon="back" backgroundColor="transparent" :border="false" color="#555555" @clickLeft="back" :statusBar="true"></uni-nav-bar>
			</view>
			
		<swiper style="height: 900rpx;" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="1000" @change="swiperChange" :circular="true">
			
			<swiper-item v-for="(item,index) in goodsdetais.banner_imgs" :key="index" @click="goPage(item.url)">
				<image :src="item.banner_imgs" style="width: 100%;height: 900rpx;" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="swiper_zhishi">
			<view :class="swiperKey===i?'view_active':''" v-for="(item1,i) in goodsdetais.banner_imgs" :key="i"></view>
		</view>
		</view>
		<view class="suit">
			<view class="suititle">
				<text class="suitname">套装内商品</text>
				<view class="suitimg">
					<image src="../../static/image/programioc.png" mode="aspectFill"></image>
				</view>
				<text class="suiteng">IN SET GOODS</text>	
			</view>
			<view class="suitsall">
				<view class="suitgoods" v-for="(i,index) in goodsdetais.compositionGoods" :key="index" @click="goGoods(i.goods.id)">
					<image :src="i.goods.cover_pic" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="magcard">
			<view class="cardtitle">
				<view class="titleone">
					<text class="suitname">{{goodsdetais.name}}</text>
					<text class="nametag">{{goodsdetais.tag}}</text>
					<view style="overflow: visible;">
						<text class="coutall">已售{{goodsdetais.sale_num}}</text>
					</view>
					
				</view>
				<view class="titlewo">
					<text class="qing">{{exampleHouse_name}}  </text>
					<text class="qing" style="padding-left: 10rpx;padding-right: 0;">{{goodsdetais.estate_name?goodsdetais.estate_name:''}}</text>
					<text class="daprice">{{goodsdetais.actual_price}}元</text>	
				</view>
				<view class="pricecop"><text>券后价</text></view>
				<view class="price">
					<text style="font-size: 18rpx;padding-right: 8rpx;font-weight: 600;">¥ </text>
					<text style="font-size: 46rpx;font-weight: 800;">{{goodsdetais.discount_amount}}</text>
					<text style="font-size: 18rpx;padding-left: 12rpx;">元</text>
				</view>
			</view>
		</view>
		<view class="total">
			<view class="opentotal">
				<view class="you">
					<text class="">套装内商品</text>
					<view class="zhan" >
						<text class="">数量</text>
						<view class="openbutton" v-show="!opensuit">
							
						</view>
					</view>
				</view>
				<view class="gan" :style="{'margin-right':!opensuit?'90rpx':'0'}"></view>
			</view>
			<view class="opentotal" v-for="(item,index) in goodsdetais.compositionGoods" :key="index" v-show="!opensuit?index<2:gotoal.length-1">
				<view class="you">
					<text class="" style="width: 450rpx;">{{item.goods.name}}</text>
					<view class="zhan">
						<text class="">x1</text>
						<view class="openbutton" v-if="index==1&&!opensuit&&vesuit" @click="opemSuit()">
							<text>展开</text>
							<uni-icons type="bottom" size="15" color="#A18353;"></uni-icons>	
						</view>
						
						<view class="openbutton" v-else v-show="!opensuit"></view>
					</view>
				</view>
				<view class="gan" :style="{'margin-right':!opensuit?'90rpx':'0'}"></view>
			</view>
		
		</view>
		<!-- <view class="webview">
			<view v-html="goodsdetais.details" class="detailsd"></view>
		</view> -->
		<view style="margin-top: 20rpx;">
			<bd-detail :detail="goodsdetais.details" ></bd-detail>
		</view>
		<view class="addshop" @click="open">
			<uni-icons type="cart-filled" size="40" color="#fff"></uni-icons>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="icode">
				<text style="font-size: 28rpx;">扫描二维码，去微信商城购买</text>
				<view class="codeimg">
					<image src="/static/image/hxj.jpg" mode="aspectFill"></image>
				</view>
			</view>
		</uni-popup>
		
		<!-- <view class="canshu">
			<view class="canshutitle">
				<text style="font-size: 24rpx;font-weight: 500;">Product parameters</text>
				<text style="font-size: 46rpx;font-weight: 800;">产品参数</text>
			</view>
			<view class="td-form">
					<uni-table border :stripe="false" emptyText="暂无更多数据" >
			
						
						<uni-tr v-for="(item,index) in 5" :key="index">
							<uni-td width="90" align="center"  color="#303030" bold="bold">产品名称</uni-td>
							<uni-td color="#666666" bold="500">休闲沙发</uni-td>
						</uni-tr>
					
					</uni-table>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	let _this
	import bdDetail from "@/components/goods/bd-detail.vue"
	export default {
		components: {
			bdDetail,
		},
		data() {
			return {
				id:'',
				content:[
					
				],
				goodsdetais:[],
				exampleHouse_name:'',
				opensuit:false,
				vesuit:false,
				webview:'/static/image/zu.png',
				swiperKey: 0, //轮播位置
				gotoal:[
					{
						"name":"ins风高档皮质沙发",
						"total":"x1"
					},
					{
						"name":"ins风高档吊灯",
						"total":"x1"
					},
					{
						"name":"ins风高档吊灯",
						"total":"x1"
					},
				],
				
			}
		},
		onLoad(option) {
			_this=this
			"id" in option?this.id=JSON.parse(option.id):''
			if(this.gotoal.length>2){
				this.vesuit=true
			}
			this.getGoods()
		},
		methods: {
			 open() {
			            this.$refs.popup.open()
			        },
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			opemSuit(){
				this.opensuit=true
			},
			swiperChange(e) {
				this.swiperKey = e.detail.current
			},
			goGoods(id){
				uni.navigateTo({
					url: "/pages/goods-details/goods-details?id="+id
				})
			},
			goPage(url) {
				
				uni.navigateTo({
					url: url
				})
			},
			getGoods(){
				uni.showLoading({
					title:"加载中"
				})
				_this.$post('plugin/composition/api/index/info',{
					data:{
						composition_id:_this.id
					},
					success(res){
						
						if(res.code==1){
							_this.$toast(res.msg)
						}else{
							_this.goodsdetais=res.data
							_this.exampleHouse_name=res.data.exampleHouse.name
							uni.hideLoading()
						}
					},
					error(err) {
						_this.$toast(err)
					}
				},'POST')
			}
		}
	}
</script>

<style lang="scss">
	.icode{
		width: 600rpx;
		height: 600rpx;
		background-color: #fff;
		border-radius: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.codeimg{
			margin-top: 10rpx;
			width: 450rpx;
			height: 450rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.addshop{
		position: fixed;
		bottom: 80rpx;
		z-index: 999;
		right: 70rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color:  #AE8445;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.detailsd{
		p{
			font-size: 20rpx;
		}
	}
	.webview{
		margin-top: 10rpx;
		width: 100%;
		height: 100%;
		
		image{
			width: 100%;
			height: 100%;
		}
	}
	page{
		font-family: PingFang-SC-Heavy;
	}
.swiper_cent {
		position: relative;

		.swiper_zhishi {
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: center;
			position: absolute;
			bottom: 39rpx;

			view {
				width: 81rpx;
				height: 4rpx;
				background: #c8c8c8;
			}

			.view_active {
				background: #f4f4f4;
			}
		}
	}
	.suit{
		padding: 50rpx 0rpx 60rpx 40rpx;
		.suititle{
			display: flex;
			align-items: center;
			// .suitname{
			// font-size: 35rpx;
			// font-weight: 500;
			// display: block;
			// }
			.suitimg{
				width: 15rpx;
				height: 15rpx;
				margin: 0 20rpx;
				margin-bottom: 35rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			.suiteng{
				display: block;
				font-size: 25rpx;
				color: #999999;
				// margin-top: 6rpx;
			}
		}
	}
	.suitsall{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		// display: inline-block;
		overflow-x: auto;
		overflow-y: hidden;
		// overflow: hidden;
		.suitgoods{
			flex-shrink: 0;
			margin-top: 30rpx;
			margin-right: 25rpx;
			width: 168rpx;
			height: 168rpx;
			border-radius: 25rpx;
			display: inline-block;
			image{
				width: 100%;
				height: 100%;
				border-radius: 25rpx;
			}
		}
	}
	.suitname{
	font-size: 30rpx;
	font-weight: bold;
	display: block;
	}
	.magcard{
		padding: 60rpx 40rpx 30rpx 40rpx;
		background-color: #F6F6F6;
		border-radius: 60rpx 0 0 0;
		.cardtitle{
			
			.titleone{
				display: flex;
				align-items: center;
				height: 40rpx;
				overflow: visible;
				.nametag{
				display: block;
				margin-left: 14rpx;
				font-size: 20rpx;
				padding: 5rpx 10rpx;
				background-color: #040404;
				color: #FFFFFF;
				box-sizing: border-box;
				// border-radius: 5rpx;
				}
				.coutall{
					color: #AE8445;
					display: block;
					overflow: visible;
					margin-left: 14rpx;
					font-size: 22rpx;
					padding: 5rpx 10rpx;
					border-radius: 5rpx;
					width: 130rpx;
					text-align: center;
					border: 1rpx solid #AE8445;
				}
			}
			.titlewo{
				font-size: 22rpx;
				color: #999999;
				padding-top: 15rpx;
				.qing{
					
				}
				.daprice{
					text-decoration: line-through;
					padding-left: 30rpx;
				}
				
			}
			.pricecop{
				color: #AE8445;
				padding-top: 25rpx;
				font-size: 22rpx;
			}
			.price{
				display: block;
				color: #AE8445;
				padding-top: 18rpx;
			}
		}
		
	}
	.total{
		padding: 25rpx 50rpx;
		.opentotal{
			font-size: 25rpx;
			
			.you{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 18rpx 0;
				.zhan{
					display: flex;
				}
				.openbutton{
						width: 120rpx;
						text-align: right;
						color: #A18353;
				}
			}
			.gan{
				margin-left: 62rpx;
				// margin-right: 90rpx;
				padding: 5rpx 0;
				border-bottom: 1rpx solid #EFEFEF;
				
			}
		}
	}
	.canshu{
		text-align: center;
		
		.canshutitle{
			color: #222222;
			display: flex;
			flex-direction: column;
			margin: 45rpx 0;
		}
		.td-form{
			padding:0 40rpx;
			box-sizing: border-box;
			padding-bottom: 80rpx;
		}
	}
</style>