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

497
groupBuying/success/index.vue Normal file
View File

@@ -0,0 +1,497 @@
<template>
<view class="min-page bg-f7 color-333 u-font-28 relative">
<view class="bottom">
<view class="u-p-32 u-flex u-row-center u-col-center u-flex-col bg-fff">
<image :src="imgs.success" mode="" class="success"></image>
<view class="u-font-36 font-bold u-m-t-16">拼团成功</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 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>
</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="shop-box" v-if="false">
<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>
<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" v-if="false">
<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>
</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 style="height: 100px;"></view>
<view class="btns">
<view class="btn" @click="uni.navigateBack()">继续拼团</view>
<button open-type="share" class="btn main" @click="toOrderDetail(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'
import {
getRemainingHMS
} from '@/utils/countdown.js'
const imgs = {
bg: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/d21f2dfd7bec44618f2d5e4b88372b08.png',
pin: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/3947892924dd481782331513aff00eb3.png',
success: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/3/6a75acd0c0db4bfe9937854b2b2df3f0.png'
}
const topStyle = {
backgroundImage: 'url(' + imgs.bg + ')'
}
const showOrder = ref(true)
function copyText(text) {
uni.setClipboardData({
data: text,
success() {}
})
}
const query = reactive({
shopId: '',
detailId: '',
})
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)
}
})
}
}
})
}
onShareAppMessage(() => {
console.log('onShareAppMessage')
return wxShare({
title: shareItem.wareJson.wareName,
imageUrl: shareItem.goodsImg,
query: `detailId=${shareItem.id}&shopId=${shareItem.shopId}`,
})
})
function toOrderDetail(item) {
uni.navigateTo({
url: '/groupBuying/detail/index?detailId=' + item.id + '&shopId=' + item.shopId
})
}
</script>
<style lang="scss" scoped>
.top {
height: 422rpx;
background-size: cover;
.info {
padding: 32rpx 30rpx 0 30rpx;
color: #fff;
font-size: 32rpx;
font-weight: 700;
}
}
.bottom {
background-color: #fff;
padding: 0 28rpx;
.time {
padding: 18rpx 24rpx;
background: #FFF4E2;
display: flex;
align-items: center;
border-radius: 16rpx 16rpx 0 0;
.number {
padding: 6rpx;
border-radius: 16rpx;
background: #ED5A2E;
color: #fff;
font-size: 32rpx;
margin-left: 18rpx;
margin-right: 18rpx;
}
.gap {
font-size: 32rpx;
}
}
.goods {
background-color: #fff;
padding: 22rpx 24rpx 0;
border-radius: 0 0 16rpx 16rpx;
margin-top: 32rpx;
.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;
}
.old-price {
color: #666666;
text-decoration-line: line-through;
}
}
.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;
}
.item {
width: calc(100% / 3);
display: flex;
.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;
}
}
}
}
.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);
}
.order {
padding: 32rpx 28rpx;
border-radius: 16rpx;
margin: 14rpx 30rpx 30rpx 30rpx;
background-color: #fff;
.item {
padding: 16rpx 0;
}
}
.refund {
padding: 18rpx 164rpx;
border-radius: 0 0 16rpx 16rpx;
background: #FFF4E2;
font-weight: 700;
margin-bottom: 32rpx;
}
.success {
width: 102rpx;
height: 102rpx;
}
.bg-fff {
background-color: #fff;
}
</style>