团购秒杀
This commit is contained in:
74
src/components/official-account-dialog.vue
Normal file
74
src/components/official-account-dialog.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
|
||||
<uni-popup type='bottom' ref='popupRef'>
|
||||
<view class='popup-content c-flex-column'>
|
||||
<view class='c-flex-row'>
|
||||
<text>关注公众号</text>
|
||||
<image :src='assetsUrl("ic_close.png")' @click.stop='close' />
|
||||
</view>
|
||||
|
||||
<image class='qrcode' :src='assetsUrl("official_account_qrcode.png")' show-menu-by-longpress />
|
||||
<text class='tips'>长按关注会员中心公众号\n
|
||||
获得更多优惠和服务信息
|
||||
</text>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
const popupRef = ref();
|
||||
const show = () => {
|
||||
popupRef.value.open();
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
popupRef.value.close();
|
||||
};
|
||||
|
||||
defineExpose({ show });
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.popup-content {
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
padding: 38rpx;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
view:nth-of-type(1) {
|
||||
image {
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
align-self: flex-end;
|
||||
position: absolute;
|
||||
right: 38rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
width: 377rpx;
|
||||
height: 377rpx;
|
||||
margin-top: 50rpx;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
align-self: center;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -48,6 +48,16 @@
|
||||
"navigationBarTitleText": "注册有礼"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "groupbuy/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "团购秒杀",
|
||||
"backgroundColor": "#F32B2B",
|
||||
"backgroundColorTop": "#F32B2B",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarBackgroundColor": "#F32B2B"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "webview/index",
|
||||
"navigationBarTitleText": "网页"
|
||||
|
||||
@@ -1,11 +1,168 @@
|
||||
<template>
|
||||
<view class='content'>
|
||||
<view class='tab c-flex-row'>
|
||||
<text class='tab-item' :class='{"tab-item-active":tabIndex==0}' @click.stop='tabIndex=0'>团购中</text>
|
||||
<text class='tab-item' :class='{"tab-item-active":tabIndex==1}' @click.stop='tabIndex=1'>即将开始</text>
|
||||
</view>
|
||||
|
||||
<scroll-view class='scroll-view'>
|
||||
<view class='c-flex-column' v-for='(item, index) in 10' :key='index'>
|
||||
<view class='item c-flex-row'>
|
||||
<image class='goods-image' :src='assetsUrl("test_bg.png")' />
|
||||
<view class='c-flex-column' style='flex: 1'>
|
||||
<view class='goods-name'>女童夏装套装洋气装短袖阔腿裤短…</view>
|
||||
<view class='middle-view c-flex-row'>
|
||||
<text>原价：￥56</text>
|
||||
<view class='decline c-flex-row'>
|
||||
<image :src='assetsUrl("ic_decline.png")' />
|
||||
<text>直降￥15</text>
|
||||
</view>
|
||||
<text>即将恢复</text>
|
||||
</view>
|
||||
<view class='bottom-price c-flex-row' :class='{"bottom-price-disabled":tabIndex==1}'>
|
||||
<text>41</text>
|
||||
<text>团购</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='divider' style='margin: 0 30rpx' />
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
const tabIndex = ref(0);
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.content {
|
||||
background: #F32B2B;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
|
||||
.tab {
|
||||
height: 92rpx;
|
||||
|
||||
.tab-item:nth-of-type(1) {
|
||||
border-radius: 30rpx 0 0 0;
|
||||
}
|
||||
|
||||
.tab-item:nth-of-type(2) {
|
||||
border-radius: 0 30rpx 0 0;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #999999;
|
||||
background: #F2F2F2;
|
||||
}
|
||||
|
||||
.tab-item-active {
|
||||
@extend .tab-item;
|
||||
background: #FFFFFF;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
background: #FFFFFF;
|
||||
.item {
|
||||
padding: 40rpx 30rpx;
|
||||
background: #FFFFFF;
|
||||
position: relative;
|
||||
|
||||
.goods-image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
-webkit-line-clamp: 1;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.middle-view {
|
||||
justify-content: space-between;
|
||||
margin-top: 16rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.decline {
|
||||
image {
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #AD6021;
|
||||
}
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #AD6021;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-price {
|
||||
display: flex;
|
||||
width: 390rpx;
|
||||
height: 83rpx;
|
||||
margin-top: 20rpx;
|
||||
align-self: flex-end;
|
||||
background-image: url("../../../static/images/bg_groupbuy_price.png");
|
||||
background-size: 100% 100%;
|
||||
color: #FFFFFF;
|
||||
justify-content: space-between;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #FFFFFF;
|
||||
margin-left: 40rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(1):before {
|
||||
content: "秒杀价 ¥ ";
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-price-disabled {
|
||||
background-image: url("../../../static/images/bg_groupbuy_price_disabled.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -84,7 +84,7 @@ const submenuList = [
|
||||
{
|
||||
title: '团购秒杀',
|
||||
icon: assetsUrl('ic_groupbuy.png'),
|
||||
path: '/pages/order/order'
|
||||
path: '/pages/common/groupbuy/index'
|
||||
},
|
||||
{
|
||||
title: '入群有礼',
|
||||
@@ -95,7 +95,6 @@ const submenuList = [
|
||||
|
||||
onLoad(async (e) => {
|
||||
const data = await getCompanyInfo('1471673498334113794');
|
||||
console.log(data);
|
||||
bannerList.value = data.bannerinx?.map((res: { src: string }) => res.src);
|
||||
recommendBannerList.value = data.bannerhot?.map((res: { src: string }) => res.src);
|
||||
});
|
||||
|
||||
@@ -8,9 +8,8 @@
|
||||
|
||||
<view class='top-row'>
|
||||
<image :src='userInfo.image' />
|
||||
|
||||
<view class='u-flex-column'>
|
||||
<text>{{ userInfo.nickName}}</text>
|
||||
<text>{{ userInfo.nickName }}</text>
|
||||
<text>{{ userInfo.telephone }}</text>
|
||||
</view>
|
||||
|
||||
@@ -18,15 +17,15 @@
|
||||
</view>
|
||||
|
||||
<view class='bottom-row'>
|
||||
<view @click.stop='goPath("/pages/mine/subs/integral/index")'>
|
||||
<view @click.stop='gotoPath("/pages/mine/subs/integral/index")'>
|
||||
<text>{{ userInfo.integration }}</text>
|
||||
<text>积分</text>
|
||||
</view>
|
||||
<view @click.stop='goPath("/pages/mine/subs/recharge/index")'>
|
||||
<view @click.stop='gotoPath("/pages/mine/subs/recharge/index")'>
|
||||
<text>{{ userInfo.balance }}</text>
|
||||
<text>余额</text>
|
||||
</view>
|
||||
<view @click.stop='goPath("/pages/mine/subs/coupon/coupon-list")'>
|
||||
<view @click.stop='gotoPath("/pages/mine/subs/coupon/coupon-list")'>
|
||||
<text>3</text>
|
||||
<text>优惠券</text>
|
||||
</view>
|
||||
@@ -36,14 +35,14 @@
|
||||
<view class='integral-add-view'>
|
||||
<text>将会员卡放入微信卡包，及时了解积分变动</text>
|
||||
<text>去添加</text>
|
||||
<image :src=' assetsUrl("ic_arrow_right_yellow.png")' />
|
||||
<image :src='assetsUrl("ic_arrow_right_yellow.png")' />
|
||||
</view>
|
||||
|
||||
<text class='title-view'>
|
||||
我的订单
|
||||
</text>
|
||||
<view class='card-order-view'>
|
||||
<view v-for='(item,index) in orderActionList' :key='index' @click.stop='goPath(item.path)'>
|
||||
<view v-for='(item,index) in orderActionList' :key='index' @click.stop='gotoPath(item.path)'>
|
||||
<image :src='item.icon' />
|
||||
<text>{{ item.title }}</text>
|
||||
<text v-if='item.amount>0'>{{ item.amount }}</text>
|
||||
@@ -55,18 +54,23 @@
|
||||
</text>
|
||||
|
||||
<view class='card-service-view'>
|
||||
<view v-for='(item,index) in serviceList' :key='index' @click.stop='goPath(item.path)'>
|
||||
<view v-for='(item,index) in serviceList' :key='index' @click.stop='gotoPath(item.path)'>
|
||||
<image :src='item.icon' />
|
||||
<text>{{ item.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<official-account-dialog ref='officialAccountDialogRef' />
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { useUserStore } from '@/store';
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
import { goPath } from '@/utils';
|
||||
import OfficialAccountDialog from '@/components/official-account-dialog.vue';
|
||||
|
||||
const officialAccountDialogRef = ref();
|
||||
|
||||
const orderActionList = ref([{
|
||||
title: '进行中',
|
||||
@@ -99,7 +103,7 @@ const serviceList = [
|
||||
{
|
||||
title: '关注公众号',
|
||||
icon: assetsUrl('ic_member_service_follow.png'),
|
||||
path: ''
|
||||
path: 'follow_official_account'
|
||||
},
|
||||
{
|
||||
title: '收货地址',
|
||||
@@ -123,6 +127,18 @@ title.value = import.meta.env.VITE_APP_TITLE;
|
||||
const store = useUserStore();
|
||||
const { userInfo } = storeToRefs(store);
|
||||
|
||||
const gotoPath = (path: string) => {
|
||||
if(path === 'follow_official_account') {
|
||||
showOfficialAccountDialog();
|
||||
} else {
|
||||
goPath(path);
|
||||
}
|
||||
};
|
||||
|
||||
const showOfficialAccountDialog = () => {
|
||||
officialAccountDialogRef.value.show();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
79
src/pages/mine/subs/components/official-account-dialog.vue
Normal file
79
src/pages/mine/subs/components/official-account-dialog.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
|
||||
<uni-popup type='bottom' ref='popupRef' :mask-click='false' @touchmove.stop.prevent=''>
|
||||
<view class='popup-content c-flex-column'>
|
||||
<view class='c-flex-row'>
|
||||
<text>关注公众号</text>
|
||||
<image :src='assetsUrl("ic_close.png")' @click.stop='close()' />
|
||||
</view>
|
||||
|
||||
<image class='qrcode' :src='assetsUrl("test_bg.png")' />
|
||||
|
||||
<text class='tips'>长按关注会员中心公众号
|
||||
获得更多优惠和服务信息
|
||||
</text>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
const popupRef = ref();
|
||||
const show = () => {
|
||||
popupRef.value.open();
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
popupRef.value.close();
|
||||
};
|
||||
|
||||
defineExpose({ show });
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.popup-content {
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
padding: 38rpx 45rpx 140rpx 45rpx;
|
||||
|
||||
view:nth-of-type(1) {
|
||||
display: flex;
|
||||
margin-bottom: 70rpx;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
width: 377rpx;
|
||||
height: 377rpx;
|
||||
margin-top: 50rpx;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 104rpx;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
BIN
src/static/images/bg_groupbuy_price.png
Normal file
BIN
src/static/images/bg_groupbuy_price.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/static/images/bg_groupbuy_price_disabled.png
Normal file
BIN
src/static/images/bg_groupbuy_price_disabled.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/static/images/ic_decline.png
Normal file
BIN
src/static/images/ic_decline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/static/images/official_account_qrcode.png
Normal file
BIN
src/static/images/official_account_qrcode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Reference in New Issue
Block a user