Skip to content

G
group-buy-ui
Commit 87a7a6ab authored by beisir's avatar beisir
Browse files
Options

feat:提交头像列表

parents 6703e3ae 34fe5d2f
Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 57 deletions
src/App.vue
View file @ 87a7a6ab
......@@ -2,6 +2,7 @@
<div id="app">
<cr-nav-bar v-if="header" :title="title" left-text="" @click-left="backFun" />
<div class="app">
<!-- <Weapp v-if="isWeixinBrowser" jump-url="/pages/user/login" /> -->
<keep-alive>
<router-view v-if="$route.meta.keepLive" />
</keep-alive>
......@@ -19,6 +20,7 @@ import { mapState } from 'vuex';
import NetError from '@/components/NetError';
import { isApp, isWxMp, isWechat } from '@/service/validation.service';
import store from '@/store';
// import Weapp from '@/components/weapp';
import goodsShare from '@/components/groupShare';
import qs from 'qs';
export default {
......@@ -54,7 +56,7 @@ export default {
bool: !isApp && !isWxMp && !isWechat ? true : false,
pointer: this
});
// store.dispatch('change_is_weixin_browser', !isApp && !isWxMp && isWechat ? true : false);
store.dispatch('change_is_weixin_browser', !isApp && !isWxMp && isWechat ? true : false);
}
},
created() {
......
src/api/groupBuy.js
View file @ 87a7a6ab
......@@ -59,7 +59,9 @@ export default {
return http.get(`${talosHost}/api/kdsp/playBill/getMakePicData?${qsString}`);
},
getGroupShareInfo(orderNo) {
return http.get(`${talosHost}/api/kdsp/groupShareInfo?orderNo=${orderNo}`);
return http.get(`${talosHost}/api/kdsp/groupShareInfo?orderNo=${orderNo}`, {
hideLoading: true
});
},
getPlayBillUrl(m) {
return http.get(`http://192.168.25.122/api/kdsp/playBill/getPlayBillUrl?m=${m}`);
......
src/components/avatorGroup.vue
View file @ 87a7a6ab
......@@ -13,17 +13,19 @@
height=""
:src="item.avatar"
/>
<div v-if="item.userTag && item.userTag == '团长'" class="is-leader">
<cr-image class="crown" width="" height="" src="@/assets/images/leaderIcon.png" />
</div>
<div v-if="item.userTag && item.userTag == '团长'" class="leader-name">
<cr-image
class="leader-name-icon"
height=""
width=""
src="@/assets/images/leader-name.png"
/>
</div>
<template v-if="item.userTag && item.userTag == '团长'">
<div class="is-leader">
<cr-image class="crown" width="" height="" src="@/assets/images/leaderIcon.png" />
</div>
<div class="leader-name">
<cr-image
class="leader-name-icon"
height=""
width=""
src="@/assets/images/leader-name.png"
/>
</div>
</template>
<div v-if="item.userTag && item.userTag.toLowerCase() == 'new'" class="is-new">
<cr-image width="25px" src="@/assets/images/new-user.png" />
</div>
......@@ -32,9 +34,23 @@
v-for="n in placeholderNum"
:key="`placeholder-${n}`"
class="placeholder"
:class="{ leader: avators.length == 0 }"
:style="widthStyle"
>
<div class="content">?</div>
<template v-if="avators.length == 0 && n == 1">
<div class="is-leader">
<cr-image class="crown" width="" height="" src="@/assets/images/leaderIcon.png" />
</div>
<div class="leader-name">
<cr-image
class="leader-name-icon"
height=""
width=""
src="@/assets/images/leader-name.png"
/>
</div>
</template>
<div class="content" :class="{ avator: avators.length == 0 && n == 1 }">?</div>
</div>
<div v-if="groupHC >= 10" class="more" :style="widthStyle" @click="showMoreAvator">
<div class="content" />
......@@ -193,6 +209,48 @@ export default {
/deep/ .cr-dialog--message {
padding-top: 0;
}
.placeholder.leader {
position: relative;
.is-leader {
position: absolute;
right: 4px;
top: -9px;
.crown {
width: 22px;
height: 20px;
}
}
.leader-name {
width: 35px;
height: 17px;
position: absolute;
left: 50%;
bottom: -6px;
transform: translateX(-50%);
&-icon {
width: 100%;
height: 100%;
img {
width: 35px;
height: 17px;
}
}
}
.avator {
background: #ffe1e1 url('../assets/images/leaderBorder.png');
// border: px solid rgba(255, 212, 0, 0.24);
background-size: cover;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border: 0;
/deep/ img {
width: 37px;
height: 37px;
}
}
}
.placeholder,
.more {
display: flex;
......
src/components/groupShare.vue
View file @ 87a7a6ab
......@@ -85,6 +85,7 @@ export default {
if (isWxMp) {
this.shareOpenWechat();
}
this.$store.dispatch('change_loading', false);
},
handleShareInfo(shareInfo) {
// 处理是否已经有 海报地址，如果有，小程序弹出地步框，App直接弹出分享
......@@ -98,6 +99,7 @@ export default {
// 直接调用app分享方法
this.appShareEventChange();
}
this.$store.dispatch('change_loading', false);
return;
// 如果传递的数据有海报则不处理
}
......
src/components/sharePic.vue
View file @ 87a7a6ab
......@@ -74,13 +74,18 @@
style="width: 94px;height: 94px;margin: 0 21px;font-size: 34px;"
/>
</div>
<div class="groupProcess" style="width: 750px;height: 123px;padding-top: 50px;">
<div class="groupProcess" style="width: 920px;height: 123px;padding-top: 50px;">
<div class="desc" style="border-radius: 36.5px;font-size: 34px;">
还差 <span style="margin: 0 10px;">{{ sharePicData.needGuys }}人</span> 成团，<template
v-if="endTime != ''"
><template v-if="avatorList.length == 0">活动</template
><template v-else>参团</template>截止时间 {{ endTime }}</template
>
<template v-if="avatorList.length == 0">
开团0元拿商品，
</template>
<template v-else>
还差 <span style="margin: 0 10px;">{{ sharePicData.needGuys }}人</span> 成团，
</template>
<template v-if="endTime != ''">
<template v-if="avatorList.length == 0">活动</template>
<template v-else>参团</template>截止时间 {{ endTime }}
</template>
</div>
</div>
</div>
......@@ -171,9 +176,12 @@ export default {
},
async createAndUploadPic(sharePicData) {
this.sharePicData = sharePicData;
let endTime = sharePicData.endTime ? sharePicData.endTime.split(' ')[0] : '';
if (endTime) {
this.endTime = `${new Date(endTime).getMonth() + 1}月${new Date(endTime).getDate()}日`;
const endTimeYMD = sharePicData.endTime ? sharePicData.endTime.split(' ')[0] : '';
const endTimeHMS = sharePicData.endTime ? sharePicData.endTime.split(' ')[1] : '';
if (endTimeYMD) {
this.endTime = `${new Date(endTimeYMD).getMonth() + 1}月${new Date(
endTimeYMD
).getDate()}日 ${endTimeHMS}`;
}
this.handleAvator(sharePicData);
const _this = this;
......@@ -196,6 +204,7 @@ export default {
const observer = {
error(err) {
console.log(err);
_this.$store.dispatch('change_loading', false);
},
complete({ hash }) {
const fileLink = config.qiniuHost + hash;
......
src/views/goodsDetail/components/bottomNav.vue
View file @ 87a7a6ab
<template>
<div class="goods-bottom">
<template v-if="status == 1">
<template v-if="groupId">
<template v-if="!groupId">
<cr-button
shape="circle"
:disabled="disabled"
type="primary"
block
@click="createOrJoin(1)"
>
立即开团
</cr-button>
</template>
<template v-else>
<cr-button
class="mutiplie"
plain
......@@ -11,33 +22,42 @@
@click="createOrJoin(2)"
>自己做团长</cr-button
>
<!-- canJoinGroupBuyAgain -> 是否可以参团 groupBuyStatus 1->拼团中 -->
<cr-button
v-if="info.canJoinGroupBuyAgain && info.groupBuyStatus == 1"
class="mutiplie"
shape="circle"
:disabled="disabled"
type="primary"
block
@click="createOrJoin(0)"
@click="createOrJoin(3)"
>
立即参团
</cr-button>
</template>
<template v-else>
<cr-button
shape="circle"
:disabled="disabled"
type="primary"
block
@click="createOrJoin(1)"
>
立即开团
</cr-button>
</template>
</template>
<template v-else>
<cr-button shape="circle" :disabled="disabled" type="primary" block @click="shareTo">
<cr-button
v-if="info.groupBuyStatus == 1 || info.groupBuyStatus == 0"
shape="circle"
:disabled="disabled"
type="primary"
block
@click="shareTo"
>
邀请好友
</cr-button>
<cr-button
v-else
shape="circle"
plain
:disabled="disabled"
type="primary"
block
@click="toList"
>
查看其他商品
</cr-button>
</template>
</div>
</template>
......@@ -74,13 +94,19 @@ export default {
};
},
methods: {
toList() {
const { activityId } = this.$route.query || '';
if (activityId) {
this.$router.push({ name: 'groupBuyList', query: { activityId } });
}
},
shareTo() {
// 邀请好友
this.$emit('share');
},
createOrJoin(mark) {
// 参团
// mark 1-> 开团 0-> 参团 2->自己做团长
// mark 1-> 开团 3-> 参团 2->自己做团长
this.$emit('buy', mark);
}
}
......
src/views/goodsDetail/components/groupDescInfo.vue
View file @ 87a7a6ab
......@@ -73,12 +73,10 @@ export default {
if (this.$refs.buttonArea) {
this.observer = new IntersectionObserver(entries => {
entries.forEach(item => {
if (this.groupInfo.groupBuyStatus == 1) {
if (item.intersectionRatio == 0) {
this.$emit('changeButtonVisible', true);
} else {
this.$emit('changeButtonVisible', false);
}
if (item.intersectionRatio == 0) {
this.$emit('changeButtonVisible', true);
} else {
this.$emit('changeButtonVisible', false);
}
});
});
......
src/views/goodsDetail/index.vue
View file @ 87a7a6ab
......@@ -185,6 +185,7 @@
type="shoppingCar"
:disabled="false"
:group-id="groupId"
:info="detailInfo.groupBuyInfo || {}"
@buy="goVccOrDetail"
/>
</div>
......@@ -314,7 +315,7 @@ export default {
activityPrice: this.detailInfo.activityPrice, // y
skuNo: this.detailParam.skuNo,
peoplePhotoList: avatorList,
endTime: this.detailInfo.endTime || ''
endTime: this.detailInfo?.groupBuyInfo.currentGroupEndTime || this.detailInfo?.endTime || ''
};
EventBus.$emit('goods_share_info', {
shareInfo: sharePicData,
......@@ -326,8 +327,13 @@ export default {
},
// ka渠道逻辑
goVccOrDetail(res) {
if (!res) {
this.currentPopupType = '';
this.currentPopupName = '';
return;
}
const buttonNameMap = {
0: '立即参团',
3: '立即参团',
1: '立即开团',
2: '自己做团长'
};
......@@ -373,20 +379,17 @@ export default {
},
async init(detailParam) {
const [res] = await goods.detailInfo(detailParam);
// canJoinGroupBuyAgain groupStatus
try {
if (res.groupBuyInfo?.groupId) {
localStorage.set('groupBuyGroupId', res.groupBuyInfo.groupId || ''); // 设置groupBuyGroupId，用于下单
this.groupId = +res.groupBuyInfo.groupId || 0;
}
if (res.groupBuyInfo?.joinGroup) {
const query = { ...this.$route.query };
return this.$router.replace({ name: 'groupBuySkuInfoSmallPic', query });
}
this.imgList = res.imageUrl || [];
this.detailInfo = res;
this.setStartStatus(res);
this.showPage = true;
try {
this.detailInfo.contentDetailUrl = this.detailInfo.contentDetailUrl.replace(
'http://',
'https://'
);
const detailImages = await goods.getDetailPic(this.detailInfo.contentDetailUrl);
// const imgReg = new RegExp('(?<=src=").[^"]*', 'g');
// this.detailImgList = (detailImages || '').match(imgReg);
......
src/views/goodsDetail/smallPic.less
View file @ 87a7a6ab
......@@ -78,6 +78,7 @@
box-sizing: border-box;
font-size: 16px;
padding: 0 @padding-sd 60px;
overflow: hidden;
}
// 头像组、团购规则等
&-product-info{
......
src/views/goodsDetail/smallPic.vue
View file @ 87a7a6ab
......@@ -190,7 +190,7 @@ export default {
activityPrice: this.detailInfo.activityPrice, // y
skuNo: this.detailParam.skuNo,
peoplePhotoList: avatorList,
endTime: this.detailInfo.endTime || ''
endTime: this.detailInfo?.groupBuyInfo.currentGroupEndTime || this.detailInfo?.endTime || ''
};
EventBus.$emit('goods_share_info', {
shareInfo: sharePicData,
......
src/views/test/share-test.vue
View file @ 87a7a6ab
......@@ -15,8 +15,8 @@ export default {
title: 'aaaa',
desc: 'bbbb',
link: `https://www.baidu.com`, // 页面地址
imgUrl: 'http://kdspstatic.q-gp.com/FnPUaThQoK23qZjhXTG9C8XopI4y', // 图片地址
posterUrl: 'http://kdspstatic.q-gp.com/FnPUaThQoK23qZjhXTG9C8XopI4y' // 海报地址
imgUrl: 'https://kdspstatic.q-gp.com/FnPUaThQoK23qZjhXTG9C8XopI4y', // 图片地址
posterUrl: 'https://kdspstatic.q-gp.com/FnPUaThQoK23qZjhXTG9C8XopI4y' // 海报地址
}
}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment