huazhiyu/pages/qianggou/productDetails.vue

<template>
  <view class="page" @click="isMore = false">
   
    <!-- banner，标题 -->
    <view class="banner-title">
      <!-- banner -->
      <view class="banner">
        <swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000"
                duration="500">
          <swiper-item v-for="(item, index) in swiperList" :key="index">
            <image :src="item.url" mode="aspectFill"></image>
            
          </swiper-item>
        </swiper>
      </view>
      <!-- 价格 -->
      <view class="price-info">
        <view class="price">
          <text class="min">￥</text>
          <text class="max">{{detailsObj.price}}</text>
        </view>
		<view class="person">
			藏品归属人：{{detailsObj.owner?detailsObj.owner.nickname:'-'}}
		</view>
      </view>
			
     
    </view>
   
   <!-- 标题 -->
   <view class="goods-title">
     <text>{{detailsObj.name}}</text>
   </view>
   
   
    <!-- 商品介绍 -->
    <view class="products-introduction" ref="products" style="text-align: center;" >
      <view class="title">
        <text>图文详情</text>
      </view>
      <view class="parseContent">
      	<u-parse :content="detailsObj.content"></u-parse>
      </view>
    </view>
    <!-- 底部 -->
    <view class="page-footer" @click="buyHandle">
       立即抢购
    </view>
	  
  </view>
</template>

<script>
import {getgoodsDetail} from '@/common/api.js'
export default {
  data() {
    return {
      swiperList: [],
	  detailsObj:{
		  content:"",
		  createtime:null,
		  goods_form:null,
		  goods_type:null,
		  id:null,
		  image:null,
		  name:null,
		  off_time:null,
		  on_time:null,
		  owner_id:null,
		  price:null,
		  status:null,
		  updatetime:null,
		  warehouse_id:null,
	  },
    };
  },
	onLoad(params) {
		this.getDetailsHandle(params.id)
	},
	
	methods: {
	  getDetailsHandle(id){
		  getgoodsDetail({id:id}).then(res=>{
			  this.swiperList.push({
			    url: res.data.image
			  })
			  this.detailsObj = Object.assign({},this.detailsObj,res.data)
		  })
	  },
	  buyHandle(){
		  uni.setStorageSync('qgPro',this.detailsObj)
		  uni.navigateTo({
		  	url:'/pages/ConfirmOrder/ConfirmOrder'
		  })
	  },
	 
  }
};
</script>

<style scoped lang="scss">
.page {
	// position: absolute;
	width: 100%;
	// height: 100%;
	background: #f6f6f6;
	overflow-x: hidden;
	padding-bottom: 120rpx;
	// overflow-y: auto;
}


/* banner 标题 */
.banner-title{
	background-color: #FFFFFF;
	padding-bottom: 20rpx;
}
/* banner */
.banner{
	width: 100%;
	height: 750rpx;
	.screen-swiper{
		width: 100%;
		height: 100%;
	}
}
/* 价格 */
.price-info{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 4%;
	margin-top:20rpx;
	.price{
		display: flex;
		align-items: center;
		.min{
			color: $base;
			font-size: 28rpx;
			font-weight: bold;
		}
		.max{
			color: $base;
			font-size: 48rpx;
			font-weight: bold;
		}
	}
	.person{
		font-size:24rpx;
		color:#aaaaaa;
	}
}


/* 标题 */
.goods-title{
	padding: 20rpx 4%;
	background-color: #fff;
	margin-top:20rpx;
	text{
		font-size: 28rpx;
		color: #212121;
	}
}

/* 商品介绍 */
.products-introduction{
	// padding: 0 4% 100rpx;
	margin-top:20rpx;
	.title{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 80rpx;
		background: #fff;
		margin-bottom:20rpx;
		text{
			font-size: 28rpx;
			color: #212121;
			margin: 0 20rpx;
		}
	}
	.title:before{
		content: "";
		width: 100rpx;
		height: 2rpx;
		background-color: #c0c0c0;
	}
	.title:after{
		content: "";
		width: 100rpx;
		height: 2rpx;
		background-color: #c0c0c0;
	}
	.parseContent{
		width: 100%;
		background-color: #fff;
		padding:50rpx 20rpx;
	}
}
/* 底部 */
.page-footer{
	position: fixed;
	left: 0;
	bottom: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 48rpx);
	height: 80rpx;
	background-color: #9f751F;
	margin:0 24rpx;
	border-radius: 10rpx;
	color:#fff;
	.footer-fn{
		display: flex;
		align-items: center;
		width: 40%;
		height: 100%;
		.list{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 50%;
			height: 100%;
			text{
				font-size: 24rpx;
				color: #555555;
			}
			.iconfont{
				font-size: 42rpx;
				color: #212121;
			}
		}
	}
	.footer-buy{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 60%;
		height: 100%;
		.cart-add{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 48%;
			height: 70rpx;
			background: #4d9a5e;
			border-radius: 70rpx;
			text{
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
		.buy-at{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 48%;
			height: 70rpx;
			background: #4d9a5e;
			border-radius: 70rpx;
			text{
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}
}
</style>