Skip to content

G
group-buy-ui
Commit a750b82c authored by Xuguangxing's avatar Xuguangxing
Browse files
Options

feat: 小图详情页完成

parent 6d273608
Expand all Show whitespace changes
Inline Side-by-side
Showing with 17935 additions and 57 deletions
package-lock.json
View file @ a750b82c
This diff is collapsed.
src/components/avatorGroup.vue
View file @ a750b82c
......@@ -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;
......
src/components/swipeCustomerInfo.vue
View file @ a750b82c
......@@ -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();
}
}
......
src/router/groupBuy.js
View file @ a750b82c
......@@ -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',
......
src/views/goodsDetail/components/groupDescInfo.vue
View file @ a750b82c
......@@ -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>
......
src/views/goodsDetail/index.vue
View file @ a750b82c
......@@ -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"
......@@ -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 = [];
......
src/views/goodsDetail/smallPic.less 0 → 100644
View file @ a750b82c
// @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;
}
}
}
src/views/goodsDetail/smallPic.vue 0 → 100644
View file @ a750b82c
<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>
yarn.lock
View file @ a750b82c
......@@ -4881,6 +4881,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"
......@@ -9261,7 +9266,7 @@
"videojs-flash" "^2.1.0"
"videojs-hotkeys" "^0.2.20"
"vue@>= 2.6.11", "vue@2.6.11":
"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