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-17 18:08:27 +08:00
parent 2fc5a428ff
commit 744f56468f
17 changed files with 2200 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

670
groupBuying/detail/index.vue
View File

@@ -1,59 +1,261 @@
<template>
<view class="min-page bg-f7 u-font-28">
<view class="min-page bg-f7 color-333 u-font-28 relative">
<view class="top" :style="topStyle">
<up-navbar bg-color="transparent" :fixed="false" :placeholder="false" title="订单详情" left-icon-color="#fff"
title-color="#fff"></up-navbar>
<view class="u-flex info u-col-center">
<image :src="imgs.map" class="map"></image>
</view>
</view>
<view class="bottom">
<view class="time">
<text class="color-666">剩余成团时间：</text>
<view class="u-font-32">
<text class="number">{{returnNum(0)}}</text>
<text class="gap">：</text>
<text class="number">{{returnNum(1)}}</text>
<text class="gap">：</text>
<text class="number">{{returnNum(2)}}</text>
</view>
</view>
<view class="goods u-flex u-col-center">
<up-image width="158rpx" height="158rpx" radius="14rpx" :src="item.goodsImg"></up-image>
<view class=" u-flex-1 u-p-l-16">
<view class="u-flex u-col-center u-row-between">
<view class="u-flex tuan-members">
<image :src="imgs.pin" class="pin" mode=""></image>
<text class="">{{item.groupPeopleNum}}人团</text>
</view>
<statusVue></statusVue>
</view>
<view class="u-m-t-16 u-flex u-col-center">
<view style="width: 356rpx;">
<view class="font-bold" v-if="item.wareJson">{{item.wareJson
.wareName}}</view>
<view class="u-flex u-m-t-10 u-col-center ">
<view class="price">
<text class="u-font-30">¥</text>
<text class="u-font-48 font-bold">{{item.payAmount}} </text>
</view>
<view class="old-price u-m-l-32">
<text>¥</text>
<text>{{item.payAmount}} </text>
</view>
</view>
</view>
<view class="u-p-l-16 color-333">
数量：{{item.num}}
</view>
</view>
</view>
</view>
<view class="refund" v-if="item.status=='待退款'">已申请退款，需等待商家审核</view>
<view class="shop-box">
<view class="u-flex u-row-center u-flex-col u-col-center">
<up-qrcode :val="item.verifyCode" :size="104"></up-qrcode>
<view class="u-flex u-m-t-22 u-m-b-18 u-col-center">
<text>{{item.verifyCode}}</text>
<image @click="copyText(item.verifyCode)" class="copy" src="/groupBuying/static/image/copy.png">
</image>
</view>
</view>
<view class="shop ">
<view class="u-flex">
<text style="min-width: 180rpx;" class="color-666">可核销门店：</text>
<text>{{item.shopName}}</text>
</view>
<view class="u-m-t-32 u-flex">
<text style="min-width: 180rpx;" class="color-666">门店地址：</text>
<text>{{item.shopAddress}}</text>
</view>
</view>
</view>
<view class="members">
<view class="list">
<view class="item" v-for="(user,index) in item.users" :key="index">
<view class="box">
<view class="u-flex relative">
<up-avatar size="140rpx" :src="user.userAvatar"></up-avatar>
<view class="u-flex u-row-center absolute">
<text class="tuanzhang" v-if="index==0">团长</text>
</view>
</view>
<view class="u-line-1 u-m-t-16 color-000 text-center">{{user.userName}}</view>
</view>
</view>
<view class="item">
<view class="box">
<view class="u-flex relative">
<view class="add-box u-flex u-row-center">
<up-icon color="#D9D9D9" name="plus"></up-icon>
<button open-type="share" class="share" @click="share(item)">分享</button>
</view>
</view>
<view class="u-line-1 u-m-t-16 color-000 text-center">等待参团</view>
</view>
</view>
</view>
<view class="u-flex u-row-center">
<view class="pin-btn">立即参与拼团</view>
</view>
</view>
<view class="order">
<view class="u-flex u-row-between">
<view class="font-bold u-font-32">订单信息</view>
<view class="u-flex color-666" @click="showOrder=!showOrder" style="align-items: baseline;">
<text class="u-m-r-18">{{showOrder?'收起':'展开'}}</text>
<view class="guodu" :class="{rotate:!showOrder}">
<up-icon name="arrow-down" bold></up-icon>
</view>
</view>
</view>
<view class="u-m-t-16" v-if="showOrder">
<view class="u-flex u-row-between item">
<view class="color-666">商品总额</view>
<view class="">¥99.99</view>
</view>
<view class="u-flex u-row-between item">
<view class="color-666">实付金额</view>
<view class="">¥{{item.payAmount}}</view>
</view>
<view class="u-flex u-row-between item">
<view class="color-666">订单号</view>
<view class="">{{item.orderNo}}</view>
</view>
<view class="u-flex u-row-between item">
<view class="color-666">支付时间</view>
<view class="">{{item.payTime}}</view>
</view>
</view>
</view>
</view>
<view style="height: 100px;"></view>
<view class="btns">
<view class="btn" @click="refund(item)">申请退款</view>
<button open-type="share" class="btn main" @click="share(item)">邀请好友</button>
</view>
</view>
</template>
<script setup>
import statusVue from '@/groupBuying/components/status.vue'
import * as Api from '@/common/api/order/gbOrder.js'
import {
wxShare
} from '@/utils/share.js'
import {
computed,
reactive
} from 'vue';
} from 'vue'
import {
getRemainingHMS
} from '@/utils/countdown.js'
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'
pin: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/3947892924dd481782331513aff00eb3.png'
}
const steps = ['发起拼团', '邀请好友', '成团优惠']
const topStyle = {
backgroundImage: 'url(' + imgs.bg + ')'
}
const tabs = reactive({
list: ['正在进行中', '我的拼团'],
sel: 1
const showOrder = ref(true)
function copyText(text) {
uni.setClipboardData({
data: text,
success() {}
})
}
const query = reactive({
shopId: '',
detailId: '',
})
const orders = reactive({
list: [{
name: '全部',
value: ''
},
{
name: '待成团',
value: ''
},
{
name: '待核销',
value: ''
},
{
name: '已核销',
value: ''
},
{
name: '退款',
value: ''
},
],
sel: 0
function init(opt) {
console.log(opt)
Object.assign(query, opt)
getDetail()
}
const item = reactive({})
function getDetail() {
Api.recordDetail(query).then(res => {
const wareJson = JSON.parse(res.wareJson)
wareJson.wareImgs = wareJson.wareImgs.split(',').filter(v => v)
res.wareJson = wareJson;
res.goodsImg = wareJson.wareImgs[0];
Object.assign(item, res)
console.log('item', item)
})
}
onLoad(init)
let timer = null
let nowTime = ref(Date.now())
timer = setInterval(() => {
nowTime.value = Date.now()
}, 1000)
const returnTime = computed(() => {
nowTime.value
return getRemainingHMS(item)
})
function returnNum(index) {
return returnTime.value.split(':')[index]
}
function refund(item) {
uni.showModal({
title: '提示',
content: '是否申请退款？',
showCancel: true,
success(res) {
if (res.confirm) {
Api.applyRefund({
recordId: item.id,
orderNo: item.orderNo,
}).then(res => {
if (res) {
uni.showToast({
title: '申请成功'
})
setTimeout(() => {
getDetail()
}, 1000)
}
})
}
}
})
}
let shareItem = null
function share(item) {
shareItem = item
}
onShareAppMessage(() => {
console.log('onShareAppMessage')
return wxShare({
title: shareItem.wareJson.wareName,
imageUrl: shareItem.goodsImg,
query: `detailId=${shareItem.id}&shopId=${shareItem.shopId}`,
type: 2,
})
})
</script>
@@ -69,243 +271,217 @@
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%);
.bottom {
margin: 0 28rpx;
transform: translateY(-160rpx);
.step {
.time {
padding: 18rpx 24rpx;
background: #FFF4E2;
display: flex;
}
align-items: center;
border-radius: 16rpx 16rpx 0 0;
.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;
}
.tabs {
display: flex;
justify-content: space-between;
font-size: 24rpx;
color: #999;
padding: 32rpx 88rpx;
.tabs {
transition: all .3s linear;
}
.active {
color: #ED5A2E;
font-size: 32rpx;
font-weight: 700;
font-weight: 700;
}
}
.translateY20 {
transform: translateY(-20rpx);
}
.orderStatus {
padding: 26rpx 28rpx;
justify-content: space-between;
.orderState {
color: #999;
transition: all .3s linear;
&.active {
color: #000;
font-size: 32rpx;
font-weight: 700;
}
}
}
.orders {
padding: 0 26rpx 36rpx;
.item {
padding: 32rpx 24rpx;
border-radius: 16rpx;
background: #FFF;
margin-bottom: 32rpx;
.numbers {
background-color: #ED5A2E;
padding: 16rpx 30rpx;
border-radius: 12rpx;
font-size: 32rpx;
.number {
padding: 6rpx;
border-radius: 16rpx;
background: #ED5A2E;
color: #fff;
font-weight: 700;
line-height: 36rpx;
font-size: 32rpx;
margin-left: 18rpx;
margin-right: 18rpx;
}
.status {
padding: 8rpx 18rpx;
border-radius: 8rpx;
border: 2rpx solid transparent;
.gap {
font-size: 32rpx;
}
}
&.success {
border-color: rgba(123, 209, 54, 1);
color: rgba(123, 209, 54, 1);
background: rgba(123, 209, 54, 0.12);
}
.goods {
background-color: #fff;
padding: 22rpx 24rpx 0;
border-radius: 0 0 16rpx 16rpx;
&.error {
border-color: #FF1C1C;
color: #FF1C1C;
background: rgba(255, 28, 28, 0.18);
}
.pin {
width: 60rpx;
height: 38rpx;
}
.tuan-members {
padding: 0 16rpx 0 0;
border-radius: 0 6rpx 6rpx 0;
background: #4C2828;
color: #f5d9ad;
font-weight: 700;
}
.price {
color: #ED5A2E;
font-weight: 700;
line-height: 36rpx;
font-size: 40rpx;
color: #ed5a2e;
}
.info {
padding: 16rpx 34rpx;
flex-direction: column;
align-items: flex-start;
border-radius: 8rpx;
background: #F8F8F8;
.title {
min-width: 208rpx;
padding-right: 8rpx;
box-sizing: border-box;
}
.stitle {
color: #666;
&.price {
font-size: 32rpx;
color: #ed5a2e;
font-weight: 700;
}
}
.old-price {
color: #666666;
}
}
.btns {
margin-top: 28rpx;
.u-font-48 {
font-size: 48rpx;
}
.shop-box {
background: #fff;
padding: 32rpx 30rpx 28rpx 30rpx;
border-radius: 0 0 16rpx 16rpx;
}
.copy {
width: 22rpx;
height: 22rpx;
margin-left: 22rpx;
}
.shop {
border-radius: 8rpx;
background: #F8F8F8;
padding: 16rpx 34rpx;
}
.relative {
position: relative;
}
.members {
padding: 26rpx 24rpx;
border-radius: 16rpx;
margin-top: 32rpx;
background-color: #fff;
.list {
display: flex;
justify-content: flex-end;
gap: 34rpx;
}
.btn {
padding: 8rpx 14rpx;
border-radius: 10rpx;
border: 2rpx solid #D9D9D9;
background: #FFF;
.item {
width: calc(100% / 3);
display: flex;
&.black {
border-color: #343030;
background-color: #343030;
color: #fff;
.add-box {
width: 140rpx;
height: 140rpx;
border: 2rpx dashed #D9D9D9;
border-radius: 50%;
overflow: hidden;
position: relative;
.share {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
}
}
&:nth-of-type(2n) {
justify-content: center;
}
&:nth-of-type(3n) {
justify-content: flex-end;
}
.box {
display: flex;
flex-direction: column;
}
.absolute {
bottom: 0;
display: flex;
justify-content: center;
left: 0;
right: 0;
}
.tuanzhang {
padding: 8rpx 18rpx;
border-radius: 20rpx;
background: #ED5A2E;
color: #fff;
bottom: 0;
}
}
}
.order {
padding: 32rpx 28rpx;
border-radius: 16rpx;
margin-top: 32rpx;
background-color: #fff;
.item {
padding: 16rpx 0;
}
}
}
.btns {
position: fixed;
left: 87rpx;
right: 87rpx;
bottom: 0;
padding-bottom: 60rpx;
display: flex;
gap: 40rpx;
.btn {
flex: 1;
padding: 16rpx 28rpx;
border-radius: 200rpx;
text-align: center;
font-size: 32rpx;
line-height: 1;
margin: 0;
justify-content: center;
border: 2rpx solid #E8AD7B;
background: #FFF;
color: #E8AD7B;
&.main {
background-color: #E8AD7B;
color: #fff;
}
}
}
.guodu {
transition: all .3s;
}
.pin-btn {
padding: 14rpx 60rpx;
border-radius: 200rpx;
text-align: center;
font-size: 32rpx;
justify-content: center;
border: 2rpx solid #E8AD7B;
background: #E8AD7B;
color: #fff;
margin-top: 32rpx;
}
.rotate {
transform: rotate(-90deg);
}
.refund {
padding: 18rpx 164rpx;
border-radius: 0 0 16rpx 16rpx;
background: #FFF4E2;
font-weight: 700;
margin-bottom: 32rpx;
}
</style>