363 lines
8.3 KiB
Vue
363 lines
8.3 KiB
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> |