deming/pageB/sdetails/index.vue

<template>
    <view class="sdetails">
        <u-swiper :list="list" height="500" border-radius="0" mode="dot"></u-swiper>
        <view class="info">
            <view class="title u-line-2">
                <text>{{ goodsInfo.store_name }}</text>{{ goodsInfo.goods_name }}
            </view>
            <view class="pic">
                <text>￥{{ goodsInfo.goods_price }}</text>
                <s>￥{{ goodsInfo.goods_marketprice }}</s>
            </view>
        </view>
        <view class="hr"></view>
		<!-- <navs :value="领券"></navs> -->
        <navs :value="'产品规格'"></navs>
		<navs :value="'产品颜色'"></navs>
		<navs :value="'选择尺码'"></navs>
		<view class="hr"></view>
		<view class="group-user" v-if="groupUser.length">
			<view class="top">
				<view class="title">{{ groupUser.length }}人正在拼团，可直接参与</view>
				<view class="view-more">
					<text>查看全部</text>
					<image src="/static/image/common/1.png"></image>
				</view>
			</view>
			<view class="bottom">
				<view class="left">
					<view class="avatar">
						<image v-for="(user, i) in groupUser" :src="user[0].member_avatar" :key="i"></image>
					</view>
					<view class="all">
						<text>查看全部</text>
						<image src="/static/image/common/1.png"></image>
					</view>
				</view>
				<view class="right">
					<view class="launch-user">
						<image :src="groupUser[0][0].member_avatar"></image>
						<text class="u-line-1">{{ groupUser[0][0].member_nickname }}</text>
					</view>
					<view class="involvement-user">
						<view class="item" v-for="(user, i) in groupUser.slice(1)" :key="i">
							<image :src="user[0].member_avatar"></image>
							<text class="u-line-1">{{ user[0].member_nickname }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
        <view class="xiangqing">
            <view class="heng"></view>
            <view class="title">商品详情</view>
            <view class="heng"></view>
        </view>
		<view class="rich">
			<rich-text :nodes="goodsInfo.mobile_body"></rich-text>
		</view>
		<!-- 拼团 tool -->
		<view class="group-tool" v-if="type==2">
			<view class="launch" @click="withImmediate">发起拼团</view>
			<view class="involvement">参与拼团</view>
		</view>
		<!-- 普通商品 tool -->
        <tloos @buy="buy" @xuanze="xuanze" :id="goodsInfo.goods_commonid" :info="info" v-if="type==1"></tloos>
        <u-toast ref="uToast" />
    </view>
</template>
<script>
import navs from "../components/sdetails/navs"
import tloos from "../components/sdetails/tloos"
export default {
    name:"sdetails",
    data() {
        return {
            list: [],　// 轮播图列表
            goodsInfo: {},
            info:{},
            glist:[],
			id:0,
			type: '', // 商品类型
			groupUser: [], // 拼团用户
			avatarWidth: '',
        }
	},
    components:{
        navs,
        tloos
    },
	onLoad(option) {
		this.id = option.id;
		this.init();
	},
	methods: {
		init() {
			this.type = this.$store.getters.getGoodsType;
			const info = this.$store.getters.getGoodsInfo;
			console.log(info);
			this.goodsInfo = info.goods;
			this.groupUser = info.user;
			// 设置轮播图
			let list = [];
			info.goods_image[0].forEach(item => {
				let temp = {
					image: item
				}
				list.push(temp);
			})
			this.list = list;
			this.setTitle();
		},
        buy(info){
            if(info.type == 2){
                this.$u.api.addCart({
                    goods_id: this.id,
                    quantity: info.value,
                }).then(res => {
                    this.$refs.uToast.show({
                        title: res.errCode[1],
                        type: res.errCode == 0 ? 'success' : 'warning',
                    })
                })
            }
        },
		getGoodsDetails(id) {
            this.id = id;
			this.$u.api.getGoodsDetails({ id: id }).then((res)=>{
				if (res.errCode == 0) {
					this.goodsInfo = res.data.goods;
					let list = [];
					res.data.goods_image[0].forEach(item => {
						let temp = {
							image: item
						}
						list.push(temp);
					})
					this.list = list;
					// console.log(this.goodsInfo.mobile_body);
				}
            })
            this.$u.api.goodsInfo({id}).then((res)=>{
                // console.log(res)
                this.info = res.data.goods;
                this.glist = res.data.spec_list;
            })
		},
		withImmediate() {
			this.$u.api.withImmediate({
				pintuan_id: this.id,
			}).then(res => {

			})
		},
        xuanze(id){
            // console.log(id)
            this.getGoodsDetails(this.glist[id])
		},
		setTitle() {
			let title = '';
			switch (this.type) {
				case 1:
					
					break;
				case 2:
					title = '拼团商品详情';
					break;
				case 1:
					
					break;
				case 1:
					
					break;
				default:
					break;
			}
			uni.setNavigationBarTitle({
				title: title
			});
		},
	},
}
</script>
<style lang="scss" scoped>
.sdetails{
	padding-bottom: 98rpx;
    .info{
        padding: 30rpx;
        .title{
            flex-wrap: wrap;
			margin-bottom: 30rpx;
            >text{
                padding: 13rpx;
                font-size: 24rpx;
                color:#fff;
                margin-right: 13rpx;
                background-color: #FF780F;
                display: inline-block;
                border-radius: 25rpx;
            }
        }
        .pic{
            >text{
                font-size: 32rpx;
                color: #FF3131;
            }
            >s{
                font-size: 26rpx;
                color: #999;
                display: inline-block;
                margin-left: 30rpx;
            }
        }
    }
    .hr{
        width: 100%;
        height: 20rpx;
        background-color: #ececec;
    }
	.group-user {
		padding: 30rpx;
		.top {
			margin-bottom: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title {
				font-size: 30rpx;
				color: rgba(51,51,51,1);
			}
			.view-more {
				font-size: 24rpx;
				color: rgba(153,153,153,1);
				> image {
					margin-left: 10rpx;
					width: 8rpx;
					height: 16rpx;
				}
			}
		}
		.bottom {
			display: flex;
			align-items: center;
			font-size: 22rpx;
			color: rgba(153,153,153,1);
			.left {
				margin-right: 40rpx;
				.avatar {
					width: 120rpx;
					height: 60rpx;
					margin-bottom: 16rpx;
					position: relative;
					@mixin avatar($left, $index) {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						position: absolute;
						top: 0;
						left: $left;
						z-index: $index;
					}
					> image {
						&:first-child {
							background-color: aliceblue;
							@include avatar($left: 0rpx, $index: 7);
						}
						&:nth-child(2) {
							background-color: aquamarine;
							@include avatar($left: 30rpx, $index: 8);
						}
						&:nth-child(3) {
							background-color: antiquewhite;
							@include avatar($left: 60rpx, $index: 9);
						}
					}
				}
				.all {
					> image {
						margin-left: 10rpx;
						width: 8rpx;
						height: 16rpx;
					}
				}
			}
			.right {
				display: flex;
				image {
					background-color: aquamarine;
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 15rpx;
					border-radius: 50%;
				}
				.launch-user {
					margin-right: 40rpx;
					text-align: center;
					> text {
						width: 98rpx;
						display: block;
					}
				}
				.involvement-user {
					display: flex;
					align-items: center;
					.item {
						text-align: center;
						> text {
							display: block;
							width: 72rpx;
						}
						&:not(:last-child) {
							margin-right: 30rpx;
						}
					}
				}
			}
		}
	}
    .xiangqing{
        display: flex;
        height: 85rpx;
        background-color: #ececec;
        align-items: center;
        justify-content: center;
        .heng{
            width: 79rpx;
            height: 2rpx;
            background-color: #a9a9a9;

        }
        font-size: 28rpx;
        color: #999;
        .title{
            margin: 0 20rpx;
        }
    }
	.rich {
		width: 100%;
	}
	.group-tool {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 98rpx;
		display: flex;
		font-size: 32rpx;
		color: rgba(255,255,255,1);
		z-index: 99;
		.launch {
			flex: 1;
			background: rgba(253,211,96,1);
			line-height: 98rpx;
			text-align: center;
		}
		.involvement {
			flex: 1;
			background: rgba(255,120,15,1);
			line-height: 98rpx;
			text-align: center;
		}
	}
}
</style>