czg_team/cashier_wx
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加拼团分包首页

Browse Source
This commit is contained in:
YeMingfei666
2025-12-15 15:48:05 +08:00
parent 5007c96116
commit 75f16170dd
3 changed files with 410 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
groupBuying/index/index.vue Normal file
View File

@@ -0,0 +1,197 @@
<template>
<view class="min-page bg-f7 u-font-28">
<up-navbar bg-color="transparent" :placeholder="false" title="拼团特惠" left-icon-color="#fff"
title-color="#fff"></up-navbar>
<view class="top" :style="topStyle">
<view class="u-flex info u-col-center">
<image :src="imgs.map" class="map"></image>
<view class="u-line-1 u-m-l-20">这里是店铺名称</view>
</view>
</view>
<view class="steps">
<view class="step" v-for="(item,index) in steps" :key="index">
<text class="index">{{index+1}}</text>
<text class="text">{{item}}</text>
<template v-if="index<steps.length-1">
<text class="icon">
{{'>'}}
</text>
<text class="icon icon1">
{{'>'}}
</text>
</template>
</view>
<view class="step"></view>
<view class="step"></view>
</view>
<up-sticky>
<view class="filters"></view>
</up-sticky>
<view class="lists">
<view class="item" v-for="(item,index) in 10" :key="index">
<up-image width="218rpx" radius="16rpx" height="218rpx"></up-image>
<view class="u-flex-1 u-p-l-16">
<view class="u-flex u-col-center">
<text class="numbers">3人团</text>
<text class="u-line-1 font-bold u-m-l-18 name">这里是商品名称啊啊嗷嗷啊啊</text>
</view>
<view class="members">已团：9999</view>
<view class="info">
<view class="left">
<view class="">
<text class="u-font-24">拼团到手</text>
<text class="u-font-32 font-bold"> ¥333</text>
</view>
<view style="opacity: 0.84;">
<text class="u-font-24">原价</text>
<text class=""> ¥333</text>
</view>
</view>
<view class="right">
<image class="pin" :src="imgs.pin"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
const imgs = {
bg: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/d21f2dfd7bec44618f2d5e4b88372b08.png',
bg1: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/604c3f917daa41af9239145196c6d3f3.png',
map: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/0a293f6e1a6a4e7b956379a5b6701104.png',
pin:'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/a9a4f8f59a6d4a46abf91141df3531fb.png'
}
const steps = ['发起拼团', '邀请好友', '成团优惠']
const topStyle = {
backgroundImage: 'url(' + imgs.bg + ')'
}
</script>
<style lang="scss" scoped>
.top {
height: 422rpx;
background-size: cover;
.info {
padding: 190rpx 30rpx 0 30rpx;
color: #fff;
font-size: 32rpx;
font-weight: 700;
}
.map {
width: 48rpx;
height: 48rpx;
}
}
.steps {
display: flex;
padding: 20rpx 20rpx;
gap: 20rpx;
border-radius: 14rpx 14rpx 0 0;
background: linear-gradient(90deg, #FFF5E6 0%, #FFD2CA 100%);
transform: translateY(-20rpx);
.step {
display: flex;
}
.index {
border-radius: 60rpx;
color: #fff;
width: 44rpx;
height: 44rpx;
line-height: 44rpx;
text-align: center;
background: #E55626;
}
.text {
color: #5A352F;
margin-left: 10rpx;
margin-right: 22rpx;
white-space: nowrap;
}
.icon {
color: rgba(90, 53, 47, 0.42);
}
.icon1 {
color: #5A352F;
}
}
.lists {
padding: 18rpx 10rpx;
.item {
display: flex;
padding: 32rpx 16rpx;
border-radius: 32rpx;
background: #FFF;
margin-bottom: 14rpx;
.numbers {
background: #4C2828;
padding: 8rpx 18rpx;
border-radius: 10rpx;
font-weight: 700;
color: #FAEAC6;
white-space: nowrap;
}
.name {
max-width: 334rpx;
}
.members {
margin-top: 26rpx;
background: #FDF1CB;
padding: 4rpx 18rpx;
border-radius: 10rpx 10rpx 10rpx 0;
width: fit-content;
font-size: 24rpx;
font-weight: 700;
color: #ED5A2E;
}
.info {
background-image: url(https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/604c3f917daa41af9239145196c6d3f3.png);
width: 410rpx;
height: 102rpx;
background-size: cover;
transform: translateY(-10rpx);
display: flex;
.left {
width: 306rpx;
color: #fff;
padding: 16rpx 22rpx;
}
.right{
padding-left: 16rpx;
margin-top: 30rpx;
.pin{
width: 76rpx;
height: 54rpx;
}
}
}
}
}
.filters{
padding: 16rpx 28rpx;
border-radius: 6rpx 6rpx 16rpx 16rpx;
background: #FFF;
}
</style>

188
groupBuying/my/my.vue Normal file
View File

@@ -0,0 +1,188 @@
<template>
<view class="min-page bg-f7 u-font-28">
<up-navbar bg-color="transparent" :placeholder="false" title="拼团特惠" left-icon-color="#fff"
title-color="#fff"></up-navbar>
<view class="top" :style="topStyle">
<view class="u-flex info u-col-center">
<image :src="imgs.map" class="map"></image>
<view class="u-line-1 u-m-l-20">这里是店铺名称</view>
</view>
</view>
<view class="steps">
<view class="step" v-for="(item,index) in steps" :key="index">
<text class="index">{{index+1}}</text>
<text class="text">{{item}}</text>
<template v-if="index<steps.length-1">
<text class="icon">
{{'>'}}
</text>
<text class="icon icon1">
{{'>'}}
</text>
</template>
</view>
<view class="step"></view>
<view class="step"></view>
</view>
<view class="lists">
<view class="item" v-for="(item,index) in 10" :key="index">
<up-image width="218rpx" radius="16rpx" height="218rpx"></up-image>
<view class="u-flex-1 u-p-l-16">
<view class="u-flex u-col-center">
<text class="numbers">3人团</text>
<text class="u-line-1 font-bold u-m-l-18 name">这里是商品名称啊啊嗷嗷啊啊</text>
</view>
<view class="members">已团：9999</view>
<view class="info">
<view class="left">
<view class="">
<text class="u-font-24">拼团到手</text>
<text class="u-font-32 font-bold"> ¥333</text>
</view>
<view style="opacity: 0.84;">
<text class="u-font-24">原价</text>
<text class=""> ¥333</text>
</view>
</view>
<view class="right">
<image class="pin" :src="imgs.pin"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
const imgs = {
bg: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/d21f2dfd7bec44618f2d5e4b88372b08.png',
bg1: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/604c3f917daa41af9239145196c6d3f3.png',
map: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/0a293f6e1a6a4e7b956379a5b6701104.png',
pin:'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/a9a4f8f59a6d4a46abf91141df3531fb.png'
}
const steps = ['发起拼团', '邀请好友', '成团优惠']
const topStyle = {
backgroundImage: 'url(' + imgs.bg + ')'
}
</script>
<style lang="scss" scoped>
.top {
height: 422rpx;
background-size: cover;
.info {
padding: 190rpx 30rpx 0 30rpx;
color: #fff;
font-size: 32rpx;
font-weight: 700;
}
.map {
width: 48rpx;
height: 48rpx;
}
}
.steps {
display: flex;
padding: 20rpx 20rpx;
gap: 20rpx;
border-radius: 14rpx 14rpx 0 0;
background: linear-gradient(90deg, #FFF5E6 0%, #FFD2CA 100%);
transform: translateY(-20rpx);
.step {
display: flex;
}
.index {
border-radius: 60rpx;
color: #fff;
width: 44rpx;
height: 44rpx;
line-height: 44rpx;
text-align: center;
background: #E55626;
}
.text {
color: #5A352F;
margin-left: 10rpx;
margin-right: 22rpx;
white-space: nowrap;
}
.icon {
color: rgba(90, 53, 47, 0.42);
}
.icon1 {
color: #5A352F;
}
}
.lists {
padding: 18rpx 10rpx;
.item {
display: flex;
padding: 32rpx 16rpx;
border-radius: 32rpx;
background: #FFF;
margin-bottom: 14rpx;
.numbers {
background: #4C2828;
padding: 8rpx 18rpx;
border-radius: 10rpx;
font-weight: 700;
color: #FAEAC6;
white-space: nowrap;
}
.name {
max-width: 334rpx;
}
.members {
margin-top: 26rpx;
background: #FDF1CB;
padding: 4rpx 18rpx;
border-radius: 10rpx 10rpx 10rpx 0;
width: fit-content;
font-size: 24rpx;
font-weight: 700;
color: #ED5A2E;
}
.info {
background-image: url(https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/604c3f917daa41af9239145196c6d3f3.png);
width: 410rpx;
height: 102rpx;
background-size: cover;
transform: translateY(-10rpx);
display: flex;
.left {
width: 306rpx;
color: #fff;
padding: 16rpx 22rpx;
}
.right{
padding-left: 16rpx;
margin-top: 30rpx;
.pin{
width: 76rpx;
height: 54rpx;
}
}
}
}
}
</style>