Commit 60556034 authored by beisir's avatar beisir

Merge branch 'feat/group-buy' of git.quantgroup.cn:ui/group-buy-ui into feat/group-buy

parents 57a031df 86b3e1d5
This diff is collapsed.
......@@ -53,6 +53,7 @@ export default {
</script>
<style lang="less" scoped>
.avator-group {
position: relative;
padding: 0 38 - @padding-sd;
box-sizing: border-box;
margin-bottom: @padding-md;
......@@ -60,6 +61,7 @@ export default {
display: flex;
flex-wrap: wrap;
justify-content: center;
background: @white;
.avator-item {
flex-shrink: 0;
position: relative;
......
......@@ -61,7 +61,7 @@ export default {
}
// 其余情况先裁剪到最大4位
name = name.slice(0, 4);
if (name.length == 4) return name.slice(0, 2) + '**';
if (name.length == 4) return name.slice(0, 1) + '**';
if (name.length == 3) return name.slice(0, 1) + '**';
if (name.length == 2) return name.slice(0, 1) + '*';
if (name.length == 1) return name.slice(0, 1);
......@@ -75,6 +75,7 @@ export default {
</script>
<style scoped lang="less">
.swipe-customer-info-container {
// width: 100%;
box-sizing: border-box;
display: inline-flex;
align-items: center;
......@@ -95,7 +96,7 @@ export default {
}
&-info {
flex-shrink: 0;
padding-right: @padding-unit - 2;
padding-right: @padding-x;
.text-12();
}
}
......
......@@ -7,9 +7,9 @@
const protocol = window.location.protocol;
const qiniuHost = protocol + '//kdspstatic.q-gp.com/';
const shenceHost = 'https://bn.xyqb.com/sa?project=default'; // 测试地址
const talosHost = 'https://talos-tob.liangkebang.net';
const faceHost = 'https://auth-tob.liangkebang.net';
const kdspHost = 'https://kdsp-api-tob.liangkebang.net';
const talosHost = 'https://talos-vcc2.liangkebang.net';
const faceHost = 'https://auth-vcc2.liangkebang.net';
const kdspHost = 'https://kdsp-api-vcc2.liangkebang.net';
const VCC_CHANNEL = '';
const TERMINAL = 'H5';
const VERSION = '7.9.00';
......
......@@ -5,6 +5,12 @@ module.exports = [
component: () => import('../views/goodsDetail/index.vue'),
meta: { title: '组团0元购' }
},
{
path: '/groupBuy/skuInfoSmallPic',
name: 'groupBuySkuInfoSmallPic',
component: () => import('../views/goodsDetail/smallPic.vue'),
meta: { title: '组团0元购' }
},
{
path: '/groupBuy/list',
name: 'groupBuyList',
......
<template>
<div class="goods-bottom">
<cr-button plain type="primary" shape="circle" :disabled="disabled">自己做团长</cr-button>
<cr-button shape="circle" :disabled="disabled" type="primary" block @click="buy">
立即参团
</cr-button>
<template v-if="status == 1">
<cr-button class="mutiplie" plain type="primary" shape="circle" :disabled="disabled"
>自己做团长</cr-button
>
<cr-button
class="mutiplie"
shape="circle"
:disabled="disabled"
type="primary"
block
@click="buy"
>
立即参团
</cr-button>
</template>
<template v-if="status == 2">
<cr-button shape="circle" :disabled="disabled" type="primary" block @click="buy">
立即开团
</cr-button>
</template>
</div>
</template>
<script>
......@@ -31,16 +47,15 @@ export default {
goodsId: {
type: String,
default: ''
},
status: {
type: Number,
default: 2
}
},
methods: {
buy() {
this.$emit('buy');
},
goHome() {
setTimeout(() => {
this.$router.push({ name: 'home' });
}, 500);
}
}
};
......@@ -60,8 +75,10 @@ export default {
box-sizing: border-box;
z-index: 2;
button {
width: 50%;
margin: 0 10px;
flex: 1;
&.mutiplie {
margin: 0 @padding-xs;
}
}
}
</style>
......@@ -12,7 +12,7 @@
<p>成团条件:还需邀请2名新人</p>
<cr-image src="@/assets/images/flag.png" width="13px" />
</div>
<div class="button-area">
<div v-if="showButtonGroup" ref="buttonArea" class="button-area">
<cr-button block shape="circle" type="primary">邀请好友</cr-button>
<cr-button plain block shape="circle" type="primary">查看其他商品</cr-button>
</div>
......@@ -23,6 +23,39 @@ import countDown from '@/components/countDown';
export default {
components: {
countDown
},
props: {
showButtonGroup: {
type: Boolean,
default: false
}
},
data() {
return {
observer: null
};
},
mounted() {
this.$nextTick(() => {
if (this.$refs.buttonArea) {
this.observer = new IntersectionObserver(entries => {
entries.forEach(item => {
if (item.intersectionRatio == 0) {
this.$emit('changeButtonVisible', true);
} else {
this.$emit('changeButtonVisible', false);
}
});
});
this.observer.USE_MUTATION_OBSERVER = false;
this.observer.observe(this.$refs.buttonArea);
}
});
},
beforeDestroy() {
if (this.$refs.buttonArea) {
this.observer.unobserve(this.$refs.buttonArea);
}
}
};
</script>
......
......@@ -67,15 +67,10 @@
/>
<rules />
</div>
<span
v-if="skuDetailList.length || detailImgList.length"
id="goodDetail"
class="goods-divider"
>宝贝详情</span
>
<div v-if="skuDetailList.length" class="goods-detail">
<span v-if="detailImgList.length" id="goodDetail" class="goods-divider">宝贝详情</span>
<!-- <div v-if="skuDetailList.length" class="goods-detail">
<detail-info-area :sku-detail-list="skuDetailList" :sku-detail-atts="skuDetailAtts" />
</div>
</div> -->
<div class="goods-detail-imgs">
<cr-image
v-for="(item, index) in detailImgList"
......@@ -163,9 +158,9 @@
</div>
</div>
<span v-else class="goods-area-none">暂未添加地址哦~</span>
<div class="goods-area-button" @click="addAddress">
<button class="goods-bottom-buy btn-absolute">添加新地址</button>
</div>
<!-- <div class="goods-area-button" @click="addAddress"> -->
<!-- <button class="goods-bottom-buy btn-absolute">添加新地址</button> -->
<!-- </div> -->
</div>
</cr-popup>
<bottom-nav type="shoppingCar" :disabled="false" @buy="goVccOrDetail" />
......@@ -174,7 +169,6 @@
<script>
import goods from '@/api/groupBuy';
import goodsCell from './components/goodsCell';
import detailInfoArea from './components/detailInfo.vue';
import Img2Thumb from '@/filters/img2Thumb.filter';
import bottomNav from './components/bottomNav';
import swipeCustomerInfo from '@/components/swipeCustomerInfo';
......@@ -187,7 +181,6 @@ export default {
// eslint-disable-next-line vue/name-property-casing
name: 'goodDetail',
components: {
detailInfoArea,
goodsCell,
bottomNav,
swipeCustomerInfo,
......@@ -218,7 +211,6 @@ export default {
skuNum: 1,
skuId: ''
},
skuDetailAtts: [],
addressList: [],
selectedAddress: {},
specList: [],
......@@ -233,17 +225,6 @@ export default {
};
},
computed: {
skuDetailList() {
let arr = [];
this.skuDetailAtts &&
this.skuDetailAtts.forEach(item => {
arr = arr.concat(item.groupAtts);
});
if (arr <= 5) {
return arr;
}
return arr.slice(0, 5);
},
minCount() {
return this.detailInfo.stock ? 1 : 0;
}
......@@ -304,7 +285,6 @@ export default {
this.detailInfo.activityLimitCount = 0;
this.$toast('库存不足!');
}
this.skuDetailAtts = res.skuDetailAtts;
this.selectedAddress = res.receiverInfo || {};
this.specList = res.skuAtts || [];
let li = [];
......@@ -332,18 +312,19 @@ export default {
if (addressInfo) {
this.addressList = (addressInfo && addressInfo.addrReceiverList) || [];
this.show = true;
} else {
this.addAddress();
}
// else {
// this.addAddress();
// }
},
addAddress() {
if (!this.hasLogin) {
this.$router.push({ name: 'login' });
return;
}
this.show = false;
this.$router.push({ name: 'addressManage' });
},
// addAddress() {
// if (!this.hasLogin) {
// this.$router.push({ name: 'login' });
// return;
// }
// this.show = false;
// this.$router.push({ name: 'addressManage' });
// },
toOrder() {
if (!this.hasLogin) {
this.$router.push({ name: 'login' });
......
// @import "../../style/var.less";
@border-radius: @border-radius-md + 2;
@font-face {
font-family: "din";
src: url("../../style/DIN.ttf") format("truetype");
}
@{deep} .cr-button--default {
color: inherit;
}
.btn-absolute{
position: absolute;
bottom: 16px;
}
.goods-bottom-buy {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
width: 335px;
height: 40px;
.text-14();
font-weight: bold;
border-radius: @padding-lg;
color: @white;
background-image: @gradient-red;
&.disabled {
opacity: 0.7;
}
}
.goods-popup{
height: auto !important;
}
// 弹出框头部
.popup-head{
border-radius: 20px 20px 0 0;
.popup-title {
.text-16();
font-weight: @font-weight-bold;
color: @black;
text-align: center;
padding: 10px 0
}
}
.goods {
&-red-bg{ // 用于小图详情页
width: 100%;
height: 270px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: -1;
&::after{
position: absolute;
left: -5%;
top: 0;
z-index: -1;
content: '';
width: 110%;
height: 270px;
border-radius: 0 0 10% 10%; //左上角,右上角,右下角,左下角
background-image: linear-gradient(269deg, #FF5D00 12%, #FF1900 86%);
}
}
&-group-buy-head-content{
height: 64px;
width: 100%;
padding: 0 @padding-sm;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
&-desc{
flex: 1;
flex-shrink: 0;
.text-17();
color:@white;
}
&-swipe{
flex-shrink: 0;
}
}
&-container {
position: relative;
box-sizing: border-box;
font-size: 16px;
padding: 0 @padding-sd 60px;
&-lose {
&-container {
background: #fff;
padding: 45px 15px;
text-align: center;
img {
width: 150px;
}
}
}
}
// 头像组、团购规则等
&-product-info{
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
background: @white;
border-radius: @border-radius;
height: 132px;
margin-bottom: @padding-sm;
padding: @padding-sm @padding-xs;
box-sizing: border-box;
&-img{
width: 108px;
height: 108px;
margin-right: @padding-x;
flex-shrink: 0;
}
&-desc{
flex: 1;
display: flex;
flex-direction: column;
&-title{
width: 100%;
.text-14();
word-break:break-all;
color: @font-color-dark;
text-align: left;
word-wrap:break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
&-progress{
margin-top: @padding-unit;
width: 163px;
}
&-num{
margin-top: @padding-unit;
.text-10();
color: @gray-4;
}
&-price{
margin-top: @padding-xs;
&-group{
color: #F70D0D;
.text-14();
font-weight: @font-weight-bold;
.actualPrice{
font-size: 20px;
}
}
&-market{
.text-10();
color: @gray-4;
}
}
}
}
&-group-info{
margin:0 0 @padding-sd;
padding: @padding-unit * 6 @padding-sm @padding-sm;
background: @white;
border-radius: @border-radius;
position: relative;
&-status {
width: 80px;
height: 80px;
position: absolute;
right: -3px;
top: -20px;
z-index: 2;
}
}
&-divider {
display:flex;
align-items:center;
justify-content: center;
margin: 15px 0;
width: 100%;
font-size: 12px;
color: #999;
text-align: center;
&:before, &:after{
display: inline-block;
content: '';
width: 50px;
height: 0;
border-top: 1px solid #D8D8D8;
margin-right: 5px;
}
&:after{
margin-left: 5px;
margin-right: 0;
}
}
}
<template>
<div class="goods" style="height: 100%">
<!-- 主体 -->
<div class="goods-container">
<div class="goods-red-bg" />
<div class="goods-group-buy-head-content">
<div class="goods-group-buy-head-content-desc">新人拼团,今日疯抢中</div>
<div class="goods-group-buy-head-content-swipe">
<swipe-customer-info v-model="showInfo" direction="right" />
</div>
</div>
<div class="goods-product-info">
<div class="goods-product-info-img">
<cr-image width="108px" :src="imgList[0]" />
</div>
<div class="goods-product-info-desc">
<div class="goods-product-info-desc-part1">
<div class="goods-product-info-desc-title">
{{ detailInfo.skuName || name.goodsName }}
</div>
<div class="goods-product-info-desc-progress">
<cr-progress
class="group-item-progress"
stroke-width="5"
color="#EC1500"
track-color="#F7F8F9"
:show-pivot="false"
:percentage="50"
/>
</div>
<div class="goods-product-info-desc-num">已拼3999团</div>
</div>
<div class="goods-product-info-desc-price">
<div class="goods-product-info-desc-price-group">
成团价 ¥<span class="actualPrice">0</span>
</div>
<div class="goods-product-info-desc-price-market">
售价¥3389
</div>
</div>
</div>
</div>
<div class="goods-group-info">
<div class="goods-group-info-status">
<cr-image width="80" src="../../assets/images/success.png" />
</div>
<avatorGroup />
<group-desc-info :show-button-group="true" @changeButtonVisible="changeButtonVisible" />
<successInfo />
<cr-divider
hairline
:style="{
borderColor: '#ECECEC'
}"
/>
<rules />
</div>
<span v-if="detailImgList.length" id="goodDetail" class="goods-divider">宝贝详情</span>
<div class="goods-detail-imgs">
<cr-image
v-for="(item, index) in detailImgList"
:key="index"
lazy-load
width=""
height=""
style="width: 100%; height: auto; display: block"
:src="item"
/>
</div>
</div>
<bottom-nav v-if="showButtonNav" type="shoppingCar" :disabled="false" @buy="goVccOrDetail" />
</div>
</template>
<script>
import goods from '@/api/groupBuy';
import bottomNav from './components/bottomNav';
import swipeCustomerInfo from '@/components/swipeCustomerInfo';
import avatorGroup from '@/components/avatorGroup';
import successInfo from '@/components/groupBuySuccessInfo';
import rules from '@/components/rules';
import groupDescInfo from './components/groupDescInfo';
export default {
// eslint-disable-next-line vue/name-property-casing
name: 'goodDetail',
components: {
bottomNav,
swipeCustomerInfo,
avatorGroup,
successInfo,
rules,
groupDescInfo
},
data() {
return {
endTime: 1631203200000,
showInfo: false,
// 以下是原有的data
detailParam: {
skuNo: '',
receiverId: '',
count: 1
},
detailInfo: {},
imgList: [],
detailImgList: [], // 商品详情图像展示
hasLogin: false,
name: {},
showButtonNav: false // 是否显示底部按钮
};
},
created() {
this.hasLogin = window.localStorage.getItem('vccToken') != 'null' ? true : false;
this.detailParam = { ...this.$route.query };
this.name = this.$route.params;
this.imgList = [this.name.goodsimg];
this.init(this.detailParam);
},
mounted() {
// todo 曝光埋点
setTimeout(() => {
this.showInfo = true;
}, 3000);
setTimeout(() => {
this.showInfo = false;
}, 5000);
},
methods: {
changeButtonVisible(res) {
this.showButtonNav = res;
},
// ka渠道逻辑
goVccOrDetail() {
if (!this.hasLogin) {
this.$router.push({ name: 'login' });
return;
}
},
async init(detailParam) {
const [res] = await goods.detailInfo(detailParam);
this.imgList = res.imageList || [];
this.detailInfo = res;
try {
const detailImages = await goods.getDetailPic(this.detailInfo.detailUrl);
// const imgReg = new RegExp('(?<=src=").[^"]*', 'g');
// this.detailImgList = (detailImages || '').match(imgReg);
let imgReg = /<img.*?(?:>|\/>)/gi;
// eslint-disable-next-line no-useless-escape
let srcReg = /src=[\'"]?([^\'"]*)[\'"]?/i;
let arr = (detailImages || '').match(imgReg);
let srcArr = [];
for (let i = 0; i < arr.length; i++) {
let src = arr[i].match(srcReg)[1].replace('http://', 'https://');
srcArr.push(src);
}
this.detailImgList = srcArr;
} catch (error) {
console.error(error);
}
}
}
};
</script>
<style lang="less" src="./smallPic.less" scoped></style>
......@@ -927,7 +927,7 @@
"vue-lazyload" "^1.3.3"
"vue-video-player" "^5.0.2"
"@qg/js-bridge@^1.1.9":
"@qg/js-bridge@^1.1.11", "@qg/js-bridge@^1.1.9":
"integrity" "sha512-WVvkSUg2zcc2nblzYGxM/bVo+VDcANy/dw7vcbxLoW1Jega9Jm2d5FGSb7uS6m4746waghUUqcAWNJZ0Q5yeqA=="
"resolved" "http://npmprivate.quantgroups.com/@qg%2fjs-bridge/-/js-bridge-1.1.11.tgz"
"version" "1.1.11"
......@@ -957,6 +957,15 @@
"@qg/js-bridge" "^1.2.0-beta2"
"axios" "^0.19.2"
"@qg/ui-track-web@0.0.3":
"integrity" "sha512-eVo3fXcp3eRGG5YznmfZQa8ih03nJtmNJYCS9VCt3Q8x/mpK3iaqk7Be6+ntUUeCfVSre7uq7fXGwUEfj1ieUw=="
"resolved" "http://npmprivate.quantgroups.com/@qg%2fui-track-web/-/ui-track-web-0.0.3.tgz"
"version" "0.0.3"
dependencies:
"@qg/js-bridge" "^1.1.11"
"sa-sdk-javascript" "^1.18.2"
"vue" "^2.6.14"
"@qg/webpack-cos-cdn-upload-plugin@0.0.4":
"integrity" "sha512-ekReJxjD+/R+Rgsatb6qRsJHYyQmS525NfTYjRQTZM/4IEdhfG+068xI9837jpCo8DvjllaaypB6m4Qol5s0gw=="
"resolved" "http://npmprivate.quantgroups.com/@qg%2fwebpack-cos-cdn-upload-plugin/-/webpack-cos-cdn-upload-plugin-0.0.4.tgz"
......@@ -2865,6 +2874,11 @@
"randombytes" "^2.0.0"
"randomfill" "^1.0.3"
"crypto-js@^3.1.9-1":
"integrity" "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q=="
"resolved" "http://npmprivate.quantgroups.com/crypto-js/-/crypto-js-3.3.0.tgz"
"version" "3.3.0"
"css-color-names@^0.0.4", "css-color-names@0.0.4":
"integrity" "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA="
"resolved" "http://npmprivate.quantgroups.com/css-color-names/-/css-color-names-0.0.4.tgz"
......@@ -4881,6 +4895,11 @@
"default-gateway" "^4.2.0"
"ipaddr.js" "^1.9.0"
"intersection-observer@^0.12.0":
"integrity" "sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ=="
"resolved" "http://npmprivate.quantgroups.com/intersection-observer/-/intersection-observer-0.12.0.tgz"
"version" "0.12.0"
"invariant@^2.2.2", "invariant@^2.2.4":
"integrity" "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA=="
"resolved" "http://npmprivate.quantgroups.com/invariant/-/invariant-2.2.4.tgz"
......@@ -7760,10 +7779,10 @@
dependencies:
"tslib" "^1.9.0"
"sa-sdk-javascript@^1.15.16":
"integrity" "sha512-UIFJBYk8EEcMAg6kSeUdjYAnl3IEXA8DDk/7xqS1aU4bZV3+iUXo2hT1rzGPsSWanVvcDZ/uSGUNZqojsfZaGA=="
"resolved" "http://npmprivate.quantgroups.com/sa-sdk-javascript/-/sa-sdk-javascript-1.15.16.tgz"
"version" "1.15.16"
"sa-sdk-javascript@^1.15.16", "sa-sdk-javascript@^1.18.2":
"integrity" "sha1-mLW7PyfL2jmwcCTb3G/Bes6H0n8="
"resolved" "http://npmprivate.quantgroups.com/sa-sdk-javascript/-/sa-sdk-javascript-1.18.17.tgz"
"version" "1.18.17"
"safe-buffer@^5.0.1", "safe-buffer@^5.1.0", "safe-buffer@^5.1.1", "safe-buffer@^5.1.2", "safe-buffer@~5.1.0", "safe-buffer@~5.1.1", "safe-buffer@5.1.2":
"integrity" "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
......@@ -9261,7 +9280,12 @@
"videojs-flash" "^2.1.0"
"videojs-hotkeys" "^0.2.20"
"vue@>= 2.6.11", "vue@2.6.11":
"vue@^2.6.14":
"integrity" "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
"resolved" "http://npmprivate.quantgroups.com/vue/-/vue-2.6.14.tgz"
"version" "2.6.14"
"vue@2.6.11":
"integrity" "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
"resolved" "http://npmprivate.quantgroups.com/vue/-/vue-2.6.11.tgz"
"version" "2.6.11"
......
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