root/zyejMAll-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

拼团页面确认版

Browse Source
This commit is contained in:
77 2024-10-11 18:12:34 +08:00
parent da534c7e55
commit 5345027481
5 changed files with 252 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

444
pages/activity/groupon/list.vue
View File

@ -1,255 +1,227 @@
<!-- 拼团活动列表 -->
<template>
<s-layout title="拼团列表" navbar="normal" :bgStyle="{ color: '#FE832A',backgroundColor: 'rgba(233,51,35)' }">
<!-- <view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]" /> -->
<view class="list-content">
<!-- 参团会员统计 -->
<view class="content-header ss-flex-col ss-col-center ss-row-center">
<view class="content-header-title ss-flex ss-row-center">
<view v-for="(item, index) in state.summaryData.avatars" :key="index" class="picture"
:style="index === 6 ? 'position: relative' : 'position: static'">
<span class="avatar" :style="`background-image: url(${item})`" />
<span v-if="index === 6 && state.summaryData.avatars.length > 3" class="mengceng">
<i>···</i>
</span>
</view>
<text class="pic_count">{{ state.summaryData.userCount || 0 }}人参与</text>
</view>
</view>
<scroll-view class="scroll-box" :style="{ height: pageHeight + 'rpx' }" scroll-y="true"
:scroll-with-animation="false" :enable-back-to-top="true">
<view class="goods-box ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
<s-goods-column class="" size="lg" :data="item" :grouponTag="true"
@click="sheep.$router.go('/pages/goods/groupon', { id: item.id })">
<template v-slot:cart>
<button class="ss-reset-button cart-btn">去拼团</button>
</template>
</s-goods-column>
</view>
<uni-load-more color="white" v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
<s-layout navbar="inner" :bgStyle="{ color: '#FE832A' }">
<view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]" />
<view class="list-content">
<!-- 参团会员统计 -->
<view class="content-header ss-flex-col ss-col-center ss-row-center">
<view class="content-header-title ss-flex ss-row-center">
<view
v-for="(item, index) in state.summaryData.avatars"
:key="index"
class="picture"
:style="index === 6 ? 'position: relative' : 'position: static'"
>
<span class="avatar" :style="`background-image: url(${item})`" />
<span v-if="index === 6 && state.summaryData.avatars.length > 3" class="mengceng">
<i>···</i>
</span>
</view>
<text class="pic_count">{{ state.summaryData.userCount || 0 }}人参与</text>
</view>
</view>
<scroll-view
class="scroll-box"
:style="{ height: pageHeight + 'rpx' }"
scroll-y="true"
:scroll-with-animation="false"
:enable-back-to-top="true"
>
<view class="goods-box ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
<s-goods-column
class=""
size="lg"
:data="item"
:grouponTag="true"
@click="sheep.$router.go('/pages/goods/groupon', { id: item.id })"
>
<template v-slot:cart>
<button class="ss-reset-button cart-btn">去拼团</button>
</template>
</s-goods-column>
</view>
<uni-load-more
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{
contentdown: '上拉加载更多',
}" @tap="loadMore" />
</scroll-view>
</view>
</s-layout>
}"
@tap="loadMore"
/>
</scroll-view>
</view>
</s-layout>
</template>
<script setup>
import {
reactive
} from 'vue';
import {
onLoad,
onReachBottom
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import CombinationApi from '@/sheep/api/promotion/combination';
import { reactive } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import CombinationApi from '@/sheep/api/promotion/combination';
const {
safeAreaInsets,
safeArea
} = sheep.$platform.device;
const sysNavBar = sheep.$platform.navbar;
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const pageHeight =
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sysNavBar - 350;
const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-header.png');
const { safeAreaInsets, safeArea } = sheep.$platform.device;
const sysNavBar = sheep.$platform.navbar;
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const pageHeight =
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sysNavBar - 350;
const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-header.png');
const state = reactive({
pagination: {
list: [],
total: 0,
pageNo: 1,
pageSize: 10,
},
loadStatus: '',
summaryData: {},
});
const state = reactive({
pagination: {
list: [],
total: 0,
pageNo: 1,
pageSize: 10,
},
loadStatus: '',
summaryData: {},
});
// 加载统计数据
const getSummary = async () => {
const {
data
} = await CombinationApi.getCombinationRecordSummary();
state.summaryData = data;
};
// 加载统计数据
const getSummary = async () => {
const { data } = await CombinationApi.getCombinationRecordSummary();
state.summaryData = data;
};
// 加载活动列表
async function getList() {
state.loadStatus = 'loading';
const {
data
} = await CombinationApi.getCombinationActivityPage({
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
});
data.list.forEach((activity) => {
state.pagination.list.push({
...activity,
price: activity.combinationPrice
});
});
state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
}
// 加载活动列表
async function getList() {
state.loadStatus = 'loading';
const { data } = await CombinationApi.getCombinationActivityPage({
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
});
data.list.forEach((activity) => {
state.pagination.list.push({ ...activity, price: activity.combinationPrice });
});
state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
}
// 加载更多
function loadMore() {
if (state.loadStatus === 'noMore') {
return;
}
state.pagination.pageNo++;
getList();
}
// 加载更多
function loadMore() {
if (state.loadStatus === 'noMore') {
return;
}
state.pagination.pageNo++;
getList();
}
// 上拉加载更多
onReachBottom(() => loadMore());
// 上拉加载更多
onReachBottom(() => loadMore());
// 页面初始化
onLoad(() => {
getSummary();
getList();
});
// 页面初始化
onLoad(() => {
getSummary();
getList();
});
</script>
<style lang="scss" scoped>
.page-bg {
width: 100%;
height: 458rpx;
margin-top: -88rpx;
background: url('https://zysc.fjptzykj.com:3000/shangcheng/fea9ad54f32d4705a633874efd534e70e507030ea5a7604b0110fdf7292f1f4d.png');
background-size: 100% 100%;
}
.page-bg {
width: 100%;
height: 458rpx;
margin-top: -88rpx;
background: url('https://zysc.fjptzykj.com:3000/shangcheng/fea9ad54f32d4705a633874efd534e70e507030ea5a7604b0110fdf7292f1f4d.png');
background-size: 100% 100%;
}
.list-content {
position: relative;
z-index: 3;
margin: -190rpx 20rpx 0 20rpx;
// background: #fff;
border-radius: 20rpx 20rpx 0 0;
.content-header {
width: 100%;
border-radius: 20rpx 20rpx 0 0;
height: 100rpx;
background: linear-gradient(180deg, #fff4f7, #ffe4d1);
.content-header-title {
width: 100%;
font-size: 30rpx;
font-weight: 500;
color: #ff2923;
line-height: 30rpx;
position: relative;
.more {
position: absolute;
right: 30rpx;
top: 0;
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 30rpx;
}
.list-content {
position: relative;
z-index: 3;
margin: 0 20rpx 0 20rpx;
// background: #fff;
border-radius: 20rpx 20rpx 0 0;
.picture {
display: inline-table;
}
.content-header {
width: 100%;
border-radius: 20rpx 20rpx 0 0;
height: 50rpx;
margin: 10px 0;
position: relative;
.avatar {
width: 38rpx;
height: 38rpx;
display: inline-table;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 50%;
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
margin-right: -10rpx;
box-shadow: 0 0 0 1px #fe832a;
}
// background: linear-gradient(180deg, #fff4f7, #ffe4d1);
&::after {
content: '';
position: absolute;
right: 15%;
height: 1px;
width: 50px;
background: white;
top: 50%;
transform: translateY(-50%);
}
.pic_count {
margin-left: 30rpx;
font-size: 22rpx;
font-weight: 500;
width: auto;
height: auto;
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
color: #ffffff;
border-radius: 19rpx;
padding: 4rpx 14rpx;
}
&::before {
content: '';
position: absolute;
left: 15%;
height: 1px;
width: 50px;
background: white;
top: 50%;
transform: translateY(-50%);
}
.content-header-title {
width: 100%;
font-size: 30rpx;
font-weight: 500;
color: #ff2923;
line-height: 30rpx;
position: relative;
.more {
position: absolute;
right: 30rpx;
top: 0;
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 30rpx;
}
.picture {
display: inline-table;
}
.avatar {
width: 38rpx;
height: 38rpx;
display: inline-table;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 50%;
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
margin-right: -10rpx;
box-shadow: 0 0 0 1px #fe832a;
}
.pic_count {
margin-left: 30rpx;
font-size: 22rpx;
font-weight: 500;
width: auto;
height: auto;
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
color: #ffffff;
border-radius: 19rpx;
padding: 4rpx 14rpx;
}
.mengceng {
width: 40rpx;
height: 40rpx;
line-height: 36rpx;
background: rgba(51, 51, 51, 0.6);
text-align: center;
border-radius: 50%;
opacity: 1;
position: absolute;
left: -2rpx;
color: #fff;
top: 2rpx;
i {
font-style: normal;
font-size: 20rpx;
}
}
}
}
.scroll-box {
// margin-top: 13px;
height: 900rpx;
.goods-box {
position: relative;
padding: 0 10px;
.cart-btn {
position: absolute;
bottom: 10rpx;
right: 20rpx;
z-index: 11;
height: 50rpx;
line-height: 50rpx;
padding: 0 20rpx;
border-radius: 25rpx;
font-size: 24rpx;
color: #fff;
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
}
}
}
}
.mengceng {
width: 40rpx;
height: 40rpx;
line-height: 36rpx;
background: rgba(51, 51, 51, 0.6);
text-align: center;
border-radius: 50%;
opacity: 1;
position: absolute;
left: -2rpx;
color: #fff;
top: 2rpx;
i {
font-style: normal;
font-size: 20rpx;
}
}
}
}
.scroll-box {
margin-top: 13px;
height: 900rpx;
.goods-box {
position: relative;
padding: 0 10px;
.cart-btn {
position: absolute;
bottom: 10rpx;
right: 20rpx;
z-index: 11;
height: 50rpx;
line-height: 50rpx;
padding: 0 20rpx;
border-radius: 25rpx;
font-size: 24rpx;
color: #fff;
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
}
}
}
}
</style>

54
pages/index/user.vue
View File

@ -3,20 +3,10 @@
<s-layout title="个人中心" tabbar="/pages/index/user" navbar="normal" :bgStyle="template.page"
:navbarStyle="template.navigationBar" onShareAppMessage>
<image class="seckill" src="@/static/images/seckilbg.png"></image>
<s-block class="" v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
<s-block-item style="" :class="item.id == 'UserOrder'? 'ss': ''" :type="item.id" :data="item.property" :styles="item.property.style" />
<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
</s-block>
<view class="new-huiy" @click="
sheep.$router.go('/pages/user/user_vip/index')
">
<image class="seckill" src="@/static/images/seckilbg.png"></image>
<view class="new-button">立即开通</view>
<img class="seckill1" mode="aspectFit"
src="https://zysc.fjptzykj.com:3000/shangcheng/64776e2edc3c2f15295e7c3976ba301e08f9170f99a2e845d8f33bd65179b177.png" />
</view>
</s-layout>
</template>
@ -51,40 +41,13 @@
onPageScroll(() => {});
</script>
<style lang="scss" scoped>
.new-huiy {
width: 100%;
height: 240px;
position: absolute;
top: 0;
.new-button {
background: white;
padding: 8px;
text-align: center;
position: absolute;
border-radius: 20px;
right: 29px;
bottom: 17px;
font-size: 14px;
color: rgba(148, 109, 45, 1);
// z-index: 33;
}
<style>
.new-main{
.seckill1 {
position: absolute;
bottom: 0;
// z-index: 22;
/* left: 50%; */
/* transform: translateX(-50%); */
width: 96%;
height: 72px;
}
}
/* .new-main {} */
.seckill1 {
position: absolute;
top: 117px;
z-index: 22;
left: 50%;
transform: translateX(-50%);
@ -99,11 +62,4 @@
view {
position: relative;
}
::v-deep .ss{
z-index: 99999;
&>view{
margin-top: 94px;
}
}
</style>

42
sheep/components/s-block-item/s-block-item.vue
View File

@ -1,7 +1,7 @@
<template>
<view>
<!-- 基础组件：搜索框 -->
<!-- 基础组件：搜索框 -->
<s-search-block v-if="type === 'SearchBar'" :data="data" :styles="styles" :navbar="false" />
<!-- 基础组件：公告栏 -->
<s-notice-block v-if="type === 'NoticeBar'" :data="data" />
@ -40,9 +40,7 @@
<s-groupon-block v-if="type === 'PromotionCombination'" :data="data" :styles="styles" />
<!-- 营销组件：秒杀 -->
<s-seckill-block v-if="type === 'PromotionSeckill'" :data="data" :styles="styles" />
<!-- 营销组件：积分商城 -->
<s-point-block v-if="type === 'PromotionPoint'" :data="data" :styles="styles" />
<!-- 营销组件： 小程序直播（暂时没有这个功能） -->
<!-- 营销组件：小程序直播（暂时没有这个功能） -->
<s-live-block v-if="type === 'MpLive'" :data="data" :styles="styles" />
<!-- 营销组件：优惠券 -->
<s-coupon-block v-if="type === 'CouponCard'" :data="data" :styles="styles" />
@ -68,7 +66,16 @@
<!-- 用户组件：用户卡片 -->
<s-user-card v-if="type === 'UserCard'" />
<view v-if="type === 'UserOrder'" class="new-huiy"
@click="
sheep.$router.go('/pages/user/user_vip/index')
"
>
<view class="new-button">立即开通</view>
<img class="seckill1" mode="aspectFit"
src="https://zysc.fjptzykj.com:3000/shangcheng/64776e2edc3c2f15295e7c3976ba301e08f9170f99a2e845d8f33bd65179b177.png"
/>
</view>
<!-- 用户组件：用户订单 -->
<s-order-card v-if="type === 'UserOrder'" :data="data" />
<!-- 用户组件：用户资产 -->
@ -124,7 +131,30 @@
:deep(.uni-border-bottom){
height:0;
}
.new-huiy{
width:100%;
height:100px;
.new-button{
background:white;
padding:4px 8px;
text-align:center;
position: absolute;
border-radius: 20px;
right: 29px;
top: 37px;
font-size:14px;
color: rgba(148, 109, 45, 1);
z-index: 33;
}
.seckill1{
position: absolute;
top: -71px;
z-index: 22;
/* left: 50%; */
/* transform: translateX(-50%); */
width: 94%;
}
}
.floxt {

2
sheep/components/s-user-card/s-user-card.vue
View File

@ -1,6 +1,6 @@
<!-- 装修用户组件：用户卡片 -->
<template>
<view class="ss-user-info-wrap ss-p-t-50" style="z-index: 9999;">
<view class="ss-user-info-wrap ss-p-t-50" style="z-index: 9999;margin-top: 23px;">
<view class="ss-flex ss-col-center ss-row-between ">
<view class="left-box ss-flex ss-col-center ss-m-l-36">
<view class="avatar-box ss-m-r-24">

2
sheep/ui/su-navbar/su-navbar.vue
View File

@ -42,7 +42,7 @@
<image class="new-image" src="https://zysc.fjptzykj.com:3000/shangcheng/e0d70e9bac714465b87d22d19e30f3fb008dbcdea21842674b355340d6dedceb.png"></image>
</view> -->
<view v-if="tools === 'search'" class=""
:style="`width:${sheep.$platform.device.windowWidth - sheep.$platform.capsule.width - 37}px;display: flex;align-items: center;`"
:style="`width:${sheep.$platform.device.windowWidth - sheep.$platform.capsule.width - 30}px;display: flex;align-items: center;`"
@click="onSearch">
<slot name="center">
<uni-search-bar class="ss-flex-1 search-box" :radius="20" placeholder="请输入关键词"