deming/pageB/sdetails/index1.vue
2020-07-24 19:48:57 +08:00

723 lines
18 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="sdetails">
<u-swiper :list="list" height="500" border-radius="0" mode="dot"></u-swiper>
<view class="spike-view" v-if="type == 3">
<view class="left">
<view class="price">
<view class="now-price">¥{{ groupbuyInfo.groupbuy_price }}</view>
<view class="origin-price">¥{{ groupbuyInfo.goods_price }}</view>
</view>
<view class="num">剩余数量{{ groupbuyInfo.inventory - groupbuyInfo.groupbuy_buy_quantity }}件</view>
</view>
<view class="right">
<view class="title">秒杀倒计时</view>
<view class="time">{{ spikeTime }}</view>
</view>
</view>
<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> -->
<!-- <navs v-for="(value, index) in goodsInfo.spec_name" :value="value" :key="index"></navs> -->
<view class="comment">
<view class="title">
<view class="left">商品评价1234</view>
<view class="right" @click="viewComment">
<text>查看全部</text>
<image src="/static/image/common/1.png"></image>
</view>
</view>
<comment :reply="false"></comment>
</view>
<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" @click="showGroupUser=true">
<text>查看全部</text>
<image src="/static/image/common/1.png"></image>
</view>
</view>
<view class="bottom">
<view class="left" @click="showGroupUser=true">
<view class="avatar">
<image v-for="(user, i) in user_suc" :src="user[0].member_avatar" :key="i"></image>
</view>
<view class="all" @click="showGroupUser=true">
<text>查看全部</text>
<image src="/static/image/common/1.png"></image>
</view>
</view>
<view class="right">
<view class="launch-user" @click="showGroupUser=true">
<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, 5)" :key="i" @click="showGroupUser=true">
<image :src="user[0].member_avatar"></image>
<text class="u-line-1">{{ user[0].member_nickname }}</text>
</view>
</view>
</view>
</view>
</view>
<u-popup v-model="showGroupUser" mode="center">
<view class="launch-container">
<view class="title u-line-1">正在拼团</view>
<scroll-view class="launch-view">
<view class="launch-user">
<view class="item" v-for="(user, i) in groupUser" :src="user[0].member_avatar" :key="i" @click="involvemenGroup(user)">
<image class="avatar" :src="user[0].member_avatar"></image>
<view class="name u-line-1">{{ user[0].member_nickname }}</view>
</view>
</view>
</scroll-view>
<image class="close" src="/static/image/common/17.png" @click="showGroupUser=false"></image>
</view>
</u-popup>
<u-popup v-model="showInvolvementUser" mode="center">
<view class="involvement-container" v-if="involvemenGroupInfo.length">
<view class="title u-line-1">参与{{ involvemenGroupInfo[0].member_nickname }}的拼团</view>
<view class="involvement-view">
<view class="item" v-for="(user, i) in involvemenGroupInfo" :key="i">
<image class="avatar" :src="user.member_avatar"></image>
<view class="name u-line-1">{{ user.member_nickname }}</view>
</view>
</view>
<view class="involvement-btn" @click="settlementOrder({ type: 'involvement' })">参与拼团</view>
<image class="close" src="/static/image/common/17.png" @click="showInvolvementUser=false"></image>
</view>
</u-popup>
<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>
<tloos @buy="buy" @xuanze="xuanze" :id="goodsInfo.goods_commonid" :info="goodsInfo" :type="type" v-if="type"></tloos>
<u-toast ref="uToast" />
</view>
</template>
<script>
/*
* 详情是请求完存在 store 的,在这里从 store 取值
**/
import comment from "@/components/comment/index";
import navs from "../components/sdetails/navs";
import tloos from "../components/sdetails/tloos";
export default {
name: "sdetails",
data() {
return {
list: [], // 轮播图列表
goodsInfo: {},
info: {},
glist: [],
id: 0, // 商品id
type: '', // 商品类型 商品详情 1普通 2拼团 3秒杀 4优惠券
groupUser: [], // 拼团用户
user_suc: [], // 拼团成功用户
avatarWidth: '',
pintuan_id: '', // 拼团id
showGroupUser: false, // 拼团
showInvolvementUser: false, // 参团
involvemenGroupInfo: [], // 参团的人
groupbuyInfo: {}, // 秒杀详情
spikeTime: '',
timer: '', // 秒杀时间定时器
}
},
components: {
comment,
navs,
tloos,
},
onLoad() {
this.init();
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
init() {
this.id = this.$store.state.goods_id;
this.type = this.$store.getters.getGoodsType;
const info = this.$store.getters.getGoodsInfo;
// 拼团商品
if(this.type == 2) {
this.user_suc = info.user_suc;
this.groupUser = info.user;
this.pintuan_id = info.pintuan_id;
}
// 秒杀商品
if (this.type == 3) {
this.groupbuyInfo = this.$store.state.groupbuyInfo;
this.setSpikeTime();
}
// console.log(this.groupbuyInfo);
this.goodsInfo = info.goods;
// 设置轮播图
let list = [];
info.goods_image[0].forEach(item => {
let temp = {
image: item
}
list.push(temp);
})
this.list = list;
this.setTitle();
},
spikeGoods() {
this.settlementOrder()
},
setSpikeTime() {
const time = this.groupbuyInfo.groupbuy_endtime;
this.timer = setInterval(() => {
let spikeTime = time * 1000 - new Date().getTime();
// 计算天数
const days = Math.floor(spikeTime/(24*3600*1000));
//计算出小时数
const leave1 = spikeTime % (24*3600*1000) // 计算天数后剩余的毫秒数
let hours = Math.floor(leave1/(3600*1000));
//计算相差分钟数
const leave2 = leave1 % (3600*1000) // 计算小时数后剩余的毫秒数
const minutes = Math.floor(leave2 / (60*1000))
//计算相差秒数
const leave3 = leave2 % (60*1000) // 计算分钟数后剩余的毫秒数
const seconds = Math.round(leave3 / 1000)
// 把天数算在小时里
hours = days * 24 + hours;
this.spikeTime = hours + ':' + minutes + ':' + seconds;
// console.log(this.spikeTime);
}, 1000)
},
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.message,
type: res.errCode == 0 ? 'success' : 'warning',
})
})
} else if (info.type == 1) { // 支付
this.settlementOrder({num: info.value});
}
},
getGoodsDetails() {
switch (this.type) {
case 1:
break;
case 2:
break;
case 3:
break;
case 4:
break;
default:
break;
}
},
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;
this.info = res.data.goods;
this.glist = res.data.spec_list;
// console.log(this.goodsInfo.mobile_body);
}
})
this.$u.api.getGoodsDetails({ id: this.info.goods_id }).then(res => {
if (res.errCode == 0) {
const goods = {
goods: res.data,
type: 1,
}
this.$store.commit('setGoodsDetails', goods);
this.$store.commit('setGoodsId', this.info.goods_id);
this.$u.route({
url: 'pageB/sdetails/index',
})
// console.log(this.goodsInfo.mobile_body);
}
})
},
/*
* @description 下单 订单步骤1展示结算数据
* @params {Number} type 拼团或者开团
* @params {Number} num 数量
* @params {Number} ifcart 结算方式 1:购物车 0:直接结算(立即购买/拼团/秒杀)
**/
settlementOrder({type, num = 1, ifcart = 0} = {}) {
let params = {
ifcart: ifcart,
cart_id: [this.goodsInfo.goods_id + '|' + num],
}
if(this.type == 2) {
if(type == 'involvement') {
Object.assign(params, {
pintuan_id: this.pintuan_id,
pintuangroup_id: this.involvemenGroupInfo[0].pintuangroup_id
})
} else {
const userId = uni.getStorageSync('user_info').member.member_id;
this.$store.commit('setGroupHeadId', userId);
Object.assign(params, {
pintuan_id: this.pintuan_id,
})
}
}
this.$u.api.settlementOrder(params).then(res => {
if(res.errCode == 0) {
this.$store.commit('setOrderType', this.type);
this.$store.commit('updateOrderInfo', res.data)
this.$u.route({
url: '/pageC/cart/ConfirmOrder'
})
}
})
},
// 参团
involvemenGroup(user) {
this.involvemenGroupInfo = user;
this.showGroupUser = false;
this.showInvolvementUser = true;
// console.log(this.involvemenGroupInfo);
},
xuanze(id){
console.log(id)
// this.getGoodsDetails(this.glist[id])
},
// 设置页面标题
setTitle() {
let title = '';
switch (this.type) {
case 1:
title = '商品详情';
break;
case 2:
title = '拼团商品详情';
break;
case 3:
title = '秒杀商品详情';
break;
case 1:
break;
default:
break;
}
uni.setNavigationBarTitle({
title: title
});
},
viewComment() {
this.$u.route({
url: 'pageB/comment/index',
})
}
},
}
</script>
<style lang="scss" scoped>
.sdetails {
padding-bottom: 98rpx;
position: relative;
background-color: #EEEBEE;
.spike-view {
position: absolute;
top: 396rpx;
left: 0;
width: 100%;
height: 104rpx;
background: rgba(255,120,15,1);
opacity: 0.96;
color:rgba(255,255,255,1);
display: flex;
align-items: center;
.left {
height: 104rpx;
flex: 1;
padding-left: 30rpx;
display: flex;
flex-direction: column;
justify-content: center;
.price {
margin-bottom: 22rpx;
display: flex;
align-items: center;
.now-price {
font-size: 32rpx;
font-weight: bold;
margin-right: 16rpx;
}
.origin-price {
font-size: 26rpx;
text-decoration: line-through;
}
}
.num {
font-size: 22rpx;
font-weight: 500;
}
}
.right {
height: 104rpx;
width: 232rpx;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&::before {
position: absolute;
left: 0;
content: "";
width: 2rpx;
height: 104rpx;
background:rgba(255,255,255,1);
}
font-size: 26rpx;
font-weight: 500;
.title {
margin-bottom: 18rpx;
}
}
}
.info {
background:rgba(255,255,255,1);
padding: 30rpx;
margin-bottom: 20rpx;
.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;
}
}
}
.comment {
margin-top: 20rpx;
background:rgba(255,255,255,1);
padding: 30rpx;
.title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
.left {
font-size: 30rpx;
color: rgba(51,51,51,1);
}
.right {
font-size: 24rpx;
color: rgba(153,153,153,1);
> image {
width: 8rpx;
height: 16rpx;
margin-left: 10rpx;
}
}
}
}
.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;
}
}
}
}
}
}
.launch-container {
width: 558rpx;
height: 655rpx;
background: rgba(255,255,255,1);
border-radius: 20rpx;
position: relative;
overflow: hidden;
.title {
text-align: center;
padding: 40rpx 0;
font-size: 32rpx;
color: rgba(51,51,51,1);
position: relative;
&::after {
content: '';
position: absolute;
width: 558rpx;
height: 2rpx;
background: rgba(234,234,234,1);
bottom: 0;
left: 0;
}
}
.launch-view {
height: 500rpx;
box-sizing: border-box;
padding: 30rpx 50rpx;
.launch-user {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
.item {
width: 96rpx;
height: 96rpx;
text-align: center;
margin-bottom: 30rpx;
.avatar {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-bottom: 15rpx;
}
.name {
font-size: 22rpx;
color: rgba(153,153,153,1);
}
&:not(:nth-child(3n)) {
margin-right: 80rpx;
}
}
}
}
.close {
position: absolute;
width: 47rpx;
height: 47rpx;
top: 10rpx;
right: 20rpx;
border-radius: 50%;
}
}
.involvement-container {
width: 558rpx;
height: 486rpx;
background: rgba(255,255,255,1);
border-radius: 20rpx;
position: relative;
overflow: hidden;
.title {
text-align: center;
padding: 40rpx 0;
font-size: 32rpx;
color: rgba(51,51,51,1);
position: relative;
&::after {
content: '';
position: absolute;
width: 558rpx;
height: 2rpx;
background: rgba(234,234,234,1);
bottom: 0;
left: 0;
}
}
.involvement-view {
display: flex;
justify-content: center;
margin: 40rpx 0 70rpx;
.item {
width: 100rpx;
text-align: center;
margin-right: 10rpx;
.avatar {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-bottom: 15rpx;
}
.name {
font-size: 22rpx;
color: rgba(153,153,153,1);
}
}
}
.involvement-btn {
width: 400rpx;
height: 88rpx;
background: rgba(255,120,15,1);
border-radius: 44rpx;
font-size: 30rpx;
color:rgba(255,255,255,1);
text-align: center;
line-height: 88rpx;
margin: 0 auto;
}
.close {
position: absolute;
width: 47rpx;
height: 47rpx;
top: 10rpx;
right: 20rpx;
border-radius: 50%;
}
}
.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%;
}
}
</style>