theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

order

Browse Source
This commit is contained in:
ghusermoon
2020-07-21 21:02:28 +08:00
parent 864f43e200
commit c89099f686
18 changed files with 611 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pageB/components/sdetails/tloos.vue
View File

@@ -2,17 +2,16 @@
<view>
<view class="tloos">
<view class="navs">
<image></image>
<image src="/static/image/common/18.png"></image>
店铺
</view>
<view class="navs" style="margin-right:30rpx">
<image></image>
<image src="/static/image/common/19.png"></image>
客服
</view>
<view class="button" style="background:rgba(253,211,96,0.6);">试穿试送</view>
<view class="button" style="background:rgba(253,211,96,1);" @click="buy(2)">加入购物车</view>
<view class="button" style="background:rgba(255,120,15,1);" @click="buy(1)">立即购买</view>
</view>
<u-popup v-model="show" mode="bottom">
<scroll-view scroll-y="true" class="popup">

390
pageB/sdetails/index.vue
View File

@@ -1,6 +1,19 @@
<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 }}
@@ -19,15 +32,15 @@
<view class="group-user" v-if="groupUser.length">
<view class="top">
<view class="title">{{ groupUser.length }}人正在拼团，可直接参与</view>
<view class="view-more">
<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">
<view class="left" @click="showGroupUser=true">
<view class="avatar">
<image v-for="(user, i) in groupUser" :src="user[0].member_avatar" :key="i"></image>
<image v-for="(user, i) in groupUser.slice(0, 3)" :src="user[0].member_avatar" :key="i"></image>
</view>
<view class="all">
<text>查看全部</text>
@@ -35,12 +48,12 @@
</view>
</view>
<view class="right">
<view class="launch-user">
<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)" :key="i">
<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>
@@ -48,6 +61,33 @@
</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="withImmediate('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>
@@ -59,7 +99,23 @@
<!-- 拼团 tool -->
<view class="group-tool" v-if="type==2">
<view class="launch" @click="withImmediate">发起拼团</view>
<view class="involvement">参与拼团</view>
<view class="involvement" @click="showGroupUser=true">参与拼团</view>
</view>
<!-- 秒杀 -->
<view class="spike-tool" v-if="type==3">
<view class="left">
<view>
<image src="/static/image/common/18.png"></image>
<text>店铺</text>
</view>
<view>
<image src="/static/image/common/19.png"></image>
<text>客服</text>
</view>
</view>
<view class="btn" :class="{'cannot': groupbuyInfo.groupbuy_state == 32 || groupbuyInfo.inventory == groupbuyInfo.groupbuy_buy_quantity}">
{{ groupbuyInfo.groupbuy_state == 32 ? '时间已结束' : (groupbuyInfo.inventory > groupbuyInfo.groupbuy_buy_quantity ? '立即秒杀' : '已售空') }}
</view>
</view>
<!-- 普通商品 tool -->
<tloos @buy="buy" @xuanze="xuanze" :id="goodsInfo.goods_commonid" :info="info" v-if="type==1"></tloos>
@@ -78,26 +134,41 @@ export default {
info:{},
glist:[],
id:0,
type: '', // 商品类型
type: '', // 商品类型 商品详情 1普通 2拼团 3秒杀 4优惠券
groupUser: [], // 拼团用户
avatarWidth: '',
showGroupUser: false, // 拼团
showInvolvementUser: false, // 参团
involvemenGroupInfo: [], // 参团的人
groupbuyInfo: {}, // 秒杀详情
spikeTime: '',
timer: '', // 时间定时器
}
},
components:{
navs,
tloos
},
onLoad(option) {
this.id = option.id;
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;
console.log(info);
if (this.type == 3) {
this.groupbuyInfo = this.$store.state.groupbuyInfo;
this.setSpikeTime();
}
// console.log(this.groupbuyInfo);
if(this.type == 2) {
this.groupUser = info.user;
}
this.goodsInfo = info.goods;
this.groupUser = info.user;
// 设置轮播图
let list = [];
info.goods_image[0].forEach(item => {
@@ -109,6 +180,25 @@ export default {
this.list = list;
this.setTitle();
},
setSpikeTime() {
const time = this.groupbuyInfo.groupbuy_endtime;
// console.log(new Date(time*1000));
// console.log(new Date());
this.timer = setInterval(() => {
let spikeTime = time * 1000 - new Date();
//计算出小时数
const leave1 = spikeTime % (24*3600*1000) //计算天数后剩余的毫秒数
const 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)
this.spikeTime = hours + ':' + minutes + ':' + seconds;
// console.log(this.spikeTime);
}, 1000)
},
buy(info){
if(info.type == 2){
this.$u.api.addCart({
@@ -144,13 +234,50 @@ export default {
this.glist = res.data.spec_list;
})
},
withImmediate() {
this.$u.api.withImmediate({
// 如果有pintuangroup_headid为参团不然为开团
withImmediate(type) {
let params = {
pintuan_id: this.id,
}).then(res => {
}
// console.log(this.involvemenGroupInfo);
if(type == 'involvement' && this.involvemenGroupInfo.length) {
Object.assign(params, { pintuangroup_headid: this.involvemenGroupInfo[0].user_id });
Object.assign(params, { pintuangroup_id: this.involvemenGroupInfo[0].pintuangroup_id });
}
// console.log(params);
this.$u.api.withImmediate(params).then(res => {
this.showGroupUser = false;
this.showInvolvementUser = false;
if(res.errCode == 0) {
this.settlementOrder();
} else {
this.$u.toast(res.message);
}
})
},
settlementOrder() {
// ifcart 结算方式 1:购物车 0:直接结算（立即购买/拼团/秒杀）
this.$u.api.settlementOrder({
ifcart: 0,
cart_id: [this.goodsInfo.goods_id + '|' + 1],
pintuan_id: this.involvemenGroupInfo[0].user_id,
pintuangroup_id: this.involvemenGroupInfo[0].pintuangroup_id
}).then(res => {
if(res.errCode == 0) {
this.$store.commit('orderType', 3);
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])
@@ -181,9 +308,69 @@ export default {
}
</script>
<style lang="scss" scoped>
.sdetails{
.sdetails {
padding-bottom: 98rpx;
.info{
position: relative;
.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;
}
}
.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 {
padding: 30rpx;
.title{
flex-wrap: wrap;
@@ -211,7 +398,7 @@ export default {
}
}
}
.hr{
.hr {
width: 100%;
height: 20rpx;
background-color: #ececec;
@@ -315,6 +502,133 @@ export default {
}
}
}
.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;
@@ -359,5 +673,45 @@ export default {
text-align: center;
}
}
.spike-tool {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 98rpx;
display: flex;
z-index: 99;
.left {
width: 190rpx;
display: flex;
align-items: center;
justify-content: space-around;
> view {
text-align: center;
> image {
width: 35rpx;
height: 35rpx;
margin-bottom: 15rpx;
}
> text {
display: block;
font-size: 24rpx;
color: rgba(102,102,102,1);
}
}
}
.btn {
flex: 1;
height: 98rpx;
line-height: 98rpx;
text-align: center;
font-size: 32rpx;
color: rgba(255,255,255,1);
background: rgba(255,120,15,1);
}
.cannot {
background: rgba(221,221,221,1);
}
}
}
</style>