shop4.3.57/components/page-component/goods/bd-detail.vue

<template>
    <view class="bd-detail">
        <view class="detail" v-if="newDetail">
            <!-- <image src="/static/image/icon/goods-detail.png"></image> -->
			<view class="detail-title">
				<view class="detail-text" :class="{'active':tab==1}" @click="tab=1">图文详情</view>
				<view class="detail-text" :class="{'active':tab==2}" @click="tab=2">详细参数</view>
				<view class="detail-text" :class="{'active':tab==3}" @click="tab=3">售后保障</view>
			</view>
            <app-rich-text v-if="tab==1"
                :content="newDetail"
            ></app-rich-text>
			<view class="contrast" v-if="tab==2">
				<view class="list" v-for="(item,index) of contrastList.list" :key="index" v-if="contrastList.list">
					<view class="contrast_title" v-if="item.length>0">{{item[0].title}}</view>  
					<view class="contrast_item" v-for="(value,key) of item" :key="key">
						<view class="contrast_key" :class="'contrast_key'+(ind+1)" v-for="(ite,ind) of value.text" :key="ind">
							{{ite}}
						</view> 
					</view>
				</view> 
			</view> 
			<app-rich-text v-if="tab==3"
			    :content="newAfterDetail"
			></app-rich-text>
        </view>
    </view>
</template>

<script>
import appRichText from "../../basic-component/app-rich/parse";

export default {
    name: "bd-detail",

    components: {
        'app-rich-text': appRichText,
    },
	data(){
		return{
			tab:1,
			contrastList:null
		}
	},
    props: {
		goodsId:{
			default:null
		},
        detail: {
            type: String,
            default() {
                return '';
            }
        },
		after_detail: {
            type: String,
            default() {
                return '';
            }
        }
    },
	watch:{
		goodsId:{
			handler(newName, oldName) {
				this.$request({
				    url: this.$api.poster.goods_contrast,
				    data: {
				        goods_id: this.goodsId
				    }
				}).then(response => {
					if(response.code == 0){
						this.formatData(response.data)
					}
				})
			}, 
			immediate: true
		}
	},
    created() {
        this.$store.dispatch('gConfig/setImageWidth', 48);
    }, 
	methods:{
		getParams(){ 
			this.$request({
			    url: this.$api.poster.goods_contrast,
			    data: {
			        goods_id: params
			    }
			}).then(response => {
				if(response.code == 0){ 
					this.formatData(response.data)
				}
			})
		},
		formatData(data){
			let _this = this
			let list = []
			let info = []
			console.log(data)
			//商品信息
			data.forEach((items,indexs)=>{
				let obj = {}
				obj.guarantee_pic = items.goods.guarantee_pic
				obj.id = items.goods.id
				obj.name = items.goods.name
				obj.price = items.goods.price
				info.push(obj)
			})
			console.log(288)
			console.log(info)
			//参数信息
			data.forEach((items,indexs)=>{
				if(indexs==0){ 
					data[indexs].params.forEach((item,index)=>{
						let line = []
						data[indexs].params[index].params.forEach((ite,inde)=>{ 
							let text = [] 
							let title = ''
							text.push(data[indexs].params[index].params[inde].name)  
							text.push(data[indexs].params[index].params[inde].value)
							data.forEach((it,i)=>{
								if(i!=0){
									text.push(data[i].params[index].params[inde].value)
								}
							})
							title = data[indexs].params[index].name  
							line.push({
								title:title,
								text:text
							}) 
						})
						list.push(line)
					}) 
				} 
			}) 
			this.contrastList = {}
			this.contrastList.list = list
			this.contrastList.info = info 
			console.log(128)
			console.log(this.contrastList)
		},
	},
    computed: {
        newDetail() {
            let detail = '正在加载数据，模拟网络延迟2秒😝';
            if (this.detail) {
                detail = this.detail;
            }
            return detail;
        },
		newAfterDetail() {
		    let after_detail = '正在加载数据，模拟网络延迟2秒😝';
		    if (this.after_detail) {
		        after_detail = this.after_detail;
		    }
		    return after_detail;
		},
    }
}
</script>

<style scoped lang="scss">

.bd-detail {
    width: 702upx;
    padding: 20upx 0;
    background-color: #ffffff;
    border-radius: 15upx;
    margin: 24upx 24upx 0 24upx;
    image {
        width: 100%;
        height: #{80rpx};
        display: block;
    }
	.detail-title{ 
		display:flex; 
		padding-bottom:8px;
		.detail-text{
			justify-content: space-between;
			width:50%;
			text-align: center;
			line-height:31px;
			display: block; 
			text-align: center;
			font-size:14px;
		}
		.active{
			color:rgb(242,28,28);
		}
	}
}
.list{  
	background:#fff;border:0.5px solid #f7f7f7; 
	.contrast_title {
		line-height:38px;height:40px;box-sizing:border-box;text-align:center;padding:0 8px;font-weight:600;
		font-size:12px;color:#2d2d32;border:0.5px solid #f7f7f7;
	}
	.contrast_item {
		display:flex; 
		.contrast_key{
			font-size:12px;
			width:80px;
			height:auto;
			box-sizing:border-box;
			text-align:center;
			padding:10px 8px;
			line-height:20px;
			min-height:40px;
			border:0.5px solid #f7f7f7;  
			display:flex;
			text-align:center;
			align-items: center; 
			overflow:hidden;
			flex-wrap: wrap; 
			.pic{
				width:100%;height:100px;
				text-align:center;
				float:left;
				image{
					width:100px;
					height:100px;
				}
			}
			
			.name{
				margin-top:10px;
				width:100%;
				float:left; 
				font-size:12px;
				line-height: 14px;
				max-height: 28px;
				height:28px;
				overflow: hidden;
			}
			.price{
				width:100%;
				float:left;
				color:#f21c1c;
				font-size:12px;
			}
			.buy{
				display: block;
				width: 90px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				border-radius: 3px;
				margin: 5px auto 8px;
				color:#fff;
				background:#f21c1c;
			}
			.cancel{
				width:100%;
				float:left;
				color: #3caaff;
			}
			.unable{
				color:#aaa;
			}
		}   
		.contrast_key2,.contrast_key3,.contrast_key4,.contrast_key5{justify-content: space-around;width:calc(100% - 80px);text-align:center;} 
		
	} 
}
</style>