Commit 511f11b9 authored by beisir's avatar beisir

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

parents 670569df 332a40ab
src/assets/images/leaderBorder.png

1.09 KB | W: | H:

src/assets/images/leaderBorder.png

1.2 KB | W: | H:

src/assets/images/leaderBorder.png
src/assets/images/leaderBorder.png
src/assets/images/leaderBorder.png
src/assets/images/leaderBorder.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
src="@/assets/images/leader-name.png" src="@/assets/images/leader-name.png"
/> />
</div> </div>
<div class="border" />
</template> </template>
<div v-if="item.userTag && item.userTag.toLowerCase() == 'new'" class="is-new"> <div v-if="item.userTag && item.userTag.toLowerCase() == 'new'" class="is-new">
<cr-image width="25px" src="@/assets/images/new-user.png" /> <cr-image width="25px" src="@/assets/images/new-user.png" />
...@@ -49,6 +50,7 @@ ...@@ -49,6 +50,7 @@
src="@/assets/images/leader-name.png" src="@/assets/images/leader-name.png"
/> />
</div> </div>
<div class="border" />
</template> </template>
<div class="content" :class="{ avator: avators.length == 0 && n == 1 }">?</div> <div class="content" :class="{ avator: avators.length == 0 && n == 1 }">?</div>
</div> </div>
...@@ -164,28 +166,44 @@ export default { ...@@ -164,28 +166,44 @@ export default {
border-radius: 50%; border-radius: 50%;
} }
} }
.avator { .border {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background: url('../assets/images/leaderBorder.png'); background: url('../assets/images/leaderBorder.png');
background-size: cover;
z-index: 2;
width: 44px;
height: 100%;
}
.avator {
// background: url('../assets/images/leaderBorder.png');
// border: px solid rgba(255, 212, 0, 0.24); // border: px solid rgba(255, 212, 0, 0.24);
width: 44px;
height: 44px;
position: relative;
background-size: cover; background-size: cover;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/deep/ img { /deep/ img {
width: 37px; width: 44px;
height: 37px; height: 44px;
} }
} }
.is-new { .is-new {
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 3;
right: -@padding-unit; right: -@padding-unit;
} }
.is-leader { .is-leader {
position: absolute; position: absolute;
right: 4px; right: 4px;
top: -9px; top: -9px;
z-index: 3;
.crown { .crown {
width: 22px; width: 22px;
height: 20px; height: 20px;
...@@ -197,6 +215,7 @@ export default { ...@@ -197,6 +215,7 @@ export default {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: -6px; bottom: -6px;
z-index: 3;
transform: translateX(-50%); transform: translateX(-50%);
&-icon { &-icon {
width: 100%; width: 100%;
...@@ -226,7 +245,19 @@ export default { ...@@ -226,7 +245,19 @@ export default {
} }
.placeholder.leader { .placeholder.leader {
position: relative; position: relative;
.border {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background: url('../assets/images/leaderBorder.png');
background-size: cover;
z-index: 2;
width: 44px;
height: 100%;
}
.is-new { .is-new {
z-index: 3;
position: absolute; position: absolute;
top: 0; top: 0;
right: -@padding-unit + 2; right: -@padding-unit + 2;
...@@ -235,12 +266,14 @@ export default { ...@@ -235,12 +266,14 @@ export default {
position: absolute; position: absolute;
right: 4px; right: 4px;
top: -9px; top: -9px;
z-index: 3;
.crown { .crown {
width: 22px; width: 22px;
height: 20px; height: 20px;
} }
} }
.leader-name { .leader-name {
z-index: 3;
width: 35px; width: 35px;
height: 17px; height: 17px;
position: absolute; position: absolute;
...@@ -257,7 +290,7 @@ export default { ...@@ -257,7 +290,7 @@ export default {
} }
} }
.avator { .avator {
background: #ffe1e1 url('../assets/images/leaderBorder.png'); // background: #ffe1e1 url('../assets/images/leaderBorder.png');
// border: px solid rgba(255, 212, 0, 0.24); // border: px solid rgba(255, 212, 0, 0.24);
background-size: cover; background-size: cover;
box-sizing: border-box; box-sizing: border-box;
...@@ -266,8 +299,8 @@ export default { ...@@ -266,8 +299,8 @@ export default {
justify-content: center; justify-content: center;
border: 0; border: 0;
/deep/ img { /deep/ img {
width: 37px; width: 44px;
height: 37px; height: 44px;
} }
} }
} }
......
...@@ -101,8 +101,8 @@ ...@@ -101,8 +101,8 @@
class="skuPrice" class="skuPrice"
style="width: 653px;font-size: 34px;padding-left: 32px;margin-right: 10px;" style="width: 653px;font-size: 34px;padding-left: 32px;margin-right: 10px;"
> >
<span class="groupPriceContainer">团价 ¥</span> <span class="groupPriceContainer">团价 ¥</span>
<span class="groupPrice" style="font-size: 64px;margin-right: 15px;">¥0</span> <span class="groupPrice" style="font-size: 64px;margin-right: 15px;">0</span>
<span class="salePrice" style="line-height: 134px;font-size: 34px;" <span class="salePrice" style="line-height: 134px;font-size: 34px;"
>售价¥{{ sharePicData.activityPrice }}</span >售价¥{{ sharePicData.activityPrice }}</span
> >
...@@ -190,6 +190,7 @@ export default { ...@@ -190,6 +190,7 @@ export default {
const [res] = await qiNiuApi.getQiniuToken(); const [res] = await qiNiuApi.getQiniuToken();
const token = res.token; const token = res.token;
let skuName = ''; let skuName = '';
// 将每个字符套入行内标签,用于解决canvas fillText的不换行问题
const originSkuName = sharePicData.skuName || ''; const originSkuName = sharePicData.skuName || '';
for (let i = 0; i < originSkuName.length; i++) { for (let i = 0; i < originSkuName.length; i++) {
skuName += `<span>${originSkuName[i]}</span>`; skuName += `<span>${originSkuName[i]}</span>`;
...@@ -363,11 +364,11 @@ body { ...@@ -363,11 +364,11 @@ body {
} }
.skuImg .skuInfo { .skuImg .skuInfo {
position: absolute; position: absolute;
bottom: 0; bottom: -1px;
left: 0; left: 0;
display: flex; display: flex;
width: 100%; width: 100%;
background-image: url('https://img.lkbang.net/activity/share/default/skuInfoBg.png'); background-image: #fff url('https://img.lkbang.net/activity/share/default/skuInfoBg.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
...@@ -387,6 +388,7 @@ body { ...@@ -387,6 +388,7 @@ body {
// font-weight: lighter; // font-weight: lighter;
// } // }
.skuImg .skuInfo .skuSuccess { .skuImg .skuInfo .skuSuccess {
height: 100%;
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
......
...@@ -13,6 +13,8 @@ ...@@ -13,6 +13,8 @@
v-model="address.receiverPhoneNo" v-model="address.receiverPhoneNo"
class="address-input" class="address-input"
name="手机号码" name="手机号码"
type="tel"
max-length="11"
label="手机号码" label="手机号码"
placeholder="请输入收货人手机号码" placeholder="请输入收货人手机号码"
/> />
...@@ -124,7 +126,7 @@ export default { ...@@ -124,7 +126,7 @@ export default {
this.$toast('请填写收货人姓名'); this.$toast('请填写收货人姓名');
return; return;
} }
if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.receiverPhoneNo)) { if (!/^[1][0-9]{10}$/.test(data.receiverPhoneNo)) {
this.$toast('请输入正确的手机号码'); this.$toast('请输入正确的手机号码');
return; return;
} }
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
:disabled="disabled" :disabled="disabled"
type="primary" type="primary"
block block
@click="createOrJoin(1)" @click="createOrJoin(2)"
> >
立即开团 立即开团
</cr-button> </cr-button>
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<div class="goods-carousel"> <div class="goods-carousel">
<cr-swipe class="goods-swiper" @change="onChange"> <cr-swipe class="goods-swiper" @change="onChange">
<cr-swipe-item v-for="(item, index) in imgList" :key="index" class="goods-carousel-item"> <cr-swipe-item v-for="(item, index) in imgList" :key="index" class="goods-carousel-item">
<img :src="item | Img2Thumb" style="width: 100%" /> <img :src="item" style="width: 100%" />
</cr-swipe-item> </cr-swipe-item>
<template #indicator> <template #indicator>
<div class="custom-indicator">{{ swiperCurrent + 1 }}/{{ imgList.length }}</div> <div class="custom-indicator">{{ swiperCurrent + 1 }}/{{ imgList.length }}</div>
......
...@@ -17,17 +17,7 @@ ...@@ -17,17 +17,7 @@
努力返回支付结果中,请留心查看! 努力返回支付结果中,请留心查看!
</p> </p>
<div :class="['actions', !isOrder && 'no-order']"> <div :class="['actions', !isOrder && 'no-order']">
<cr-button <cr-button type="primary" class="btn-primary" @click="navigateBack">返回</cr-button>
class="actions__back"
:plain="true"
type="primary"
shape="circle"
@click="goHome('正在支付')"
>{{ returnUrl ? '返回秒杀' : '返回首页' }}</cr-button
>
<cr-button v-if="isOrder" shape="circle" type="primary" @click="goOrderDetail('正在支付')"
>查看订单</cr-button
>
</div> </div>
</div> </div>
</template> </template>
...@@ -78,6 +68,9 @@ export default { ...@@ -78,6 +68,9 @@ export default {
clearInterval(this.timer); clearInterval(this.timer);
}, },
methods: { methods: {
navigateBack() {
this.$router.go(-1);
},
getQuery() { getQuery() {
this.returnUrl = cookies.get('returnUrl') || ''; this.returnUrl = cookies.get('returnUrl') || '';
if (localStorage.get('hideOrder')) { if (localStorage.get('hideOrder')) {
......
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