拼团问题修复,增加套餐功能

This commit is contained in:
2025-12-19 15:18:33 +08:00
parent 9ea8a2a7ab
commit cd199c980f
15 changed files with 2517 additions and 682 deletions

View File

@@ -11,10 +11,18 @@ export const getPackage = (data) => {
}
export const getPackageDetail = (id) => {
return request({
url: prveUrl + '/user/package/detail/'+id,
method: 'get',
})
}
export const order = (data) => {
return request({
url: prveUrl + '/user/package/order',
method: 'get',
method: 'post',
data: data
})
}

View File

@@ -1,138 +1,143 @@
export default (params) => {
let url = params.url;
let method = params.method || "get";
let data = params.data || {};
let type = params.type || 1;
let toast = params.toast || true;
let token = uni.cache.get("token") || "";
const shopId = uni.cache.get("shopId") * 1;
const userInfo = uni.cache.get("userInfo") || {};
// #ifdef H5
token = "b61c8b0f1c9d47ad924e33c48b496ce6";
// #endif
let header = {
version: uni.conf.version,
type: uni.getSystemInfoSync().platform,
// #ifdef APP-PLUS
platformType: "APP",
// #endif
// #ifdef H5
platformType: "H5",
// #endif
// #ifdef MP-WEIXIN
platformType: "WX",
// #endif
// #ifdef MP-ALIPAY
platformType: "ALI",
// #endif
token,
id: userInfo.id || "",
shopId: shopId || "",
userId: userInfo.id || "",
};
if (toast) {
uni.showLoading({
title: "加载中",
mask: true,
});
}
return new Promise((resolve, reject) => {
const timeoutDuration = params.timeout || 10000; // 可以通过 params 传入超时时间,默认 10 秒
uni.request({
url: uni.conf.baseUrl + url,
method: method,
header: header,
data: data,
timeout: timeoutDuration,
success(response) {
const res = response.data;
// 根据返回的状态码做出对应的操作
//获取成功
if (res.code == 200) {
uni.hideLoading();
uni.hideToast();
resolve(res.data ? res.data : true);
} else {
switch (res.code) {
case "501":
uni.cache.remove("shopId");
// uni.showToast({
// title: '',
// icon: "none",
// success: () => {
// }
// })
setTimeout(() => {
uni.reLaunch({
url: "/pages/index/index",
});
}, 1000);
break;
case 404:
uni.showToast({
title: "请求地址不存在...",
duration: 2000,
});
break;
default:
// 是否提示
if (toast) {
uni.showToast({
title: (() => {
// 1. 获取原始提示文本(兜底空字符串避免报错)
const originMsg = res.message || res.msg || res.error || "";
// 2. 定义要匹配的前缀
const exceptionPrefix = "Exception:";
// 3. 判断是否包含目标前缀
if (originMsg.includes(exceptionPrefix)) {
// 截取前缀后的内容 → 去除首尾空格 → 限制最大20个字符
return originMsg
.slice(
originMsg.indexOf(exceptionPrefix) +
exceptionPrefix.length
)
.trim()
.slice(0, 20);
} else {
// 不包含则按原逻辑截取前20个字符
return originMsg.slice(0, 20);
}
})(),
icon: "none",
success: () => {
// 修复:去掉多余的 res 参数(避免覆盖外层 res
setTimeout(() => {
reject(false);
}, 1000);
},
});
}
break;
}
}
},
fail(err) {
if (err.errMsg.indexOf("request:fail") !== -1) {
if (err.errMsg.indexOf("timeout") !== -1) {
if (toast) {
uni.showToast({
title: `请求超时,请稍后重试`,
icon: "error",
duration: 2000,
});
}
}
}
reject(err);
},
complete() {
// 不管成功还是失败都会执行
setTimeout((res) => {
uni.hideLoading();
uni.hideToast();
}, 10000);
},
});
}).catch((e) => {});
};
export default async (params) => {
let url = params.url;
let method = params.method || "get";
let data = params.data || {};
let type = params.type || 1;
let toast = params.toast || true;
let token = uni.cache.get("token") || "";
const shopId = uni.cache.get("shopId") * 1;
const userInfo = uni.cache.get("userInfo") || {};
// #ifdef H5
token = "b61c8b0f1c9d47ad924e33c48b496ce6";
// #endif
let header = {
version: uni.conf.version,
type: uni.getSystemInfoSync().platform,
// #ifdef APP-PLUS
platformType: "APP",
// #endif
// #ifdef H5
platformType: "H5",
// #endif
// #ifdef MP-WEIXIN
platformType: "WX",
// #endif
// #ifdef MP-ALIPAY
platformType: "ALI",
// #endif
token,
id: userInfo.id || "",
shopId: shopId || "",
userId: userInfo.id || "",
};
if (toast) {
uni.showLoading({
title: "加载中",
mask: true,
});
}
return new Promise((resolve, reject) => {
const timeoutDuration = params.timeout || 10000; // 可以通过 params 传入超时时间,默认 10 秒
uni.request({
url: uni.conf.baseUrl + url,
method: method,
header: header,
data: data,
timeout: timeoutDuration,
success(response) {
const res = response.data;
// 根据返回的状态码做出对应的操作
//获取成功
if (res.code == 200) {
uni.hideLoading();
uni.hideToast();
resolve(res.data ? res.data : true);
} else {
switch (res.code) {
case "501":
uni.cache.remove("shopId");
// uni.showToast({
// title: '',
// icon: "none",
// success: () => {
// }
// })
setTimeout(() => {
uni.reLaunch({
url: "/pages/index/index",
});
}, 1000);
break;
case 404:
uni.showToast({
title: "请求地址不存在...",
duration: 2000,
});
break;
default:
// 是否提示
if (toast) {
uni.showToast({
title: (() => {
// 1. 获取原始提示文本(兜底空字符串避免报错)
const originMsg = res.message || res.msg ||
res
.error || "";
// 2. 定义要匹配的前缀
const exceptionPrefix = "Exception:";
// 3. 判断是否包含目标前缀
if (originMsg.includes(exceptionPrefix)) {
// 截取前缀后的内容 → 去除首尾空格 → 限制最大20个字符
return originMsg
.slice(
originMsg.indexOf(
exceptionPrefix) +
exceptionPrefix.length
)
.trim()
.slice(0, 20);
} else {
// 不包含则按原逻辑截取前20个字符
return originMsg.slice(0, 20);
}
})(),
icon: "none",
success: () => {
// 修复:去掉多余的 res 参数(避免覆盖外层 res
setTimeout(() => {
reject(false);
}, 1000);
},
});
}
break;
}
}
},
fail(err) {
if (err.errMsg.indexOf("request:fail") !== -1) {
if (err.errMsg.indexOf("timeout") !== -1) {
if (toast) {
uni.showToast({
title: `请求超时,请稍后重试`,
icon: "error",
duration: 2000,
});
}
}
}
reject(err);
},
complete() {
// 不管成功还是失败都会执行
setTimeout((res) => {
uni.hideLoading();
uni.hideToast();
}, 10000);
},
});
}).catch((e) => {});
};

View File

@@ -35,6 +35,9 @@ import { computed } from 'vue'
},
])
const returnClass=computed(()=>{
if(props.status=='已退款'){
return 'gray';
}
const item=list.value.find(v=>props.status.includes(v.name))
return item?item.class:''
})
@@ -62,5 +65,10 @@ import { computed } from 'vue'
color: #FF1C1C;
background: rgba(255, 28, 28, 0.18);
}
&.gray{
color: #bbb;
background-color: #f7f7f7;
border-color: #bbb;
}
}
</style>

View File

@@ -12,8 +12,7 @@
</view>
<view class="u-m-t-16 u-flex u-col-center u-row-between">
<view style="max-width: 326rpx;">
<view class="font-bold" v-if="item.wareJson">{{item.wareJson
.wareName}}</view>
<view class="font-bold u-line-1" v-if="item">{{item.wareName}}</view>
<view class="u-flex u-m-t-10 u-col-center ">
<view class="price">
<text class="u-font-30">¥</text>

View File

@@ -1,7 +1,7 @@
<template>
<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"
<up-navbar bg-color="transparent" :fixed="false" :placeholder="false" :title="title" left-icon-color="#fff"
@leftClick="back('/groupBuying/index/index')" title-color="#fff"></up-navbar>
<view class="u-flex info u-col-center">
</view>
@@ -26,7 +26,7 @@
<text class="">{{item.groupPeopleNum}}人团</text>
</view>
<template v-if="item.id">
<statusVue :status="item.wareGroupStatus=='ing'?'待成团': item.status"></statusVue>
<statusVue :status="item.status"></statusVue>
</template>
<template v-else>
<statusVue v-if="item.wareGroupStatus=='ing'" status="待成团"></statusVue>
@@ -36,7 +36,7 @@
</view>
<view class="u-m-t-16 u-flex u-col-center">
<view style="width: 356rpx;">
<view class="font-bold" v-if="item&&item.wareJson">{{item.wareJson
<view class="font-bold u-line-1" v-if="item&&item.wareJson">{{item.wareJson
.wareName}}</view>
<view class="u-flex u-m-t-10 u-col-center ">
<view class="price">
@@ -57,7 +57,7 @@
</view>
<view class="refund" v-if="item.status=='退款中'">已申请退款需等待商家审核</view>
<view class="shop-box" >
<view class="shop-box">
<view class="u-flex u-row-center u-flex-col u-col-center" v-if="item.status=='待核销'||item.status=='退款中'">
<up-qrcode :val="item.verifyCode" :size="104"></up-qrcode>
<view class="u-flex u-m-t-22 u-m-b-18 u-col-center">
@@ -79,8 +79,8 @@
</view>
</view>
<view class="members">
<view class="list" v-if="item.users&&item.users.length">
<view class="members" v-if="item.status!='已退款'">
<view class="list" v-if="item.users&&item.users.length">
<view class="item" v-for="(user,index) in item.users" :key="index">
<view class="box">
<view class="u-flex relative">
@@ -140,7 +140,8 @@
<view class="color-666">支付时间</view>
<view class="">{{item.payTime}}</view>
</view>
<view class="u-flex u-row-between item" v-if="item.groupEndTime&&item.status=='待核销'">
<view class="u-flex u-row-between item"
v-if="item.groupEndTime&&item.wareGroupStatus=='success'">
<view class="color-666">成团时间</view>
<view class="">{{item.groupEndTime}}</view>
</view>
@@ -182,7 +183,8 @@
<image class="cover" :src="item.goodsImg"></image>
<view class="u-flex u-flex-1 u-row-between u-p-l-16 u-col-center">
<view style="max-width: 340rpx;">
<view class="u-font-32 font-bold" v-if="item && item.wareJson">{{item.wareJson.wareName}}</view>
<view class="u-font-32 font-bold u-line-1" v-if="item && item.wareJson">
{{item.wareJson.wareName}}</view>
<view class="u-m-t-12 color-666 u-line-2">{{item.wareJson.wareDetail}}</view>
</view>
@@ -221,6 +223,10 @@
</template>
<script setup>
import {
Storelogin
} from '@/stores/user.js';
const storelogin = Storelogin();
import {
back
} from '@/utils/uniapp.js'
@@ -291,11 +297,11 @@
...item,
...item.wareJson,
number: number.value,
id:item.wareId||'',
originalPrice:item.wareOriginalPrice,
groupPrice:item.wareGroupPrice,
wareImgs:item.wareJson.wareImgs.join(','),
groupOrderNo: item.groupOrderNo||'',
id: item.wareId || '',
originalPrice: item.wareOriginalPrice,
groupPrice: item.wareGroupPrice,
wareImgs: item.wareJson.wareImgs.join(','),
groupOrderNo: item.groupOrderNo || '',
})
uni.navigateTo({
url: '/groupBuying/confirm-order/confirm-order'
@@ -330,7 +336,7 @@
detailId: '',
})
function init(opt) {
async function init(opt) {
// 获取小程序进入场景和参数
const launchOptions = uni.getLaunchOptionsSync();
console.log(launchOptions);
@@ -341,6 +347,7 @@
console.log(opt)
Object.assign(query, opt)
console.log(query)
await storelogin.actionslogin()
getDetail()
}
const item = reactive({})
@@ -353,19 +360,19 @@
res.goodsImg = wareJson.wareImgs[0];
Object.assign(item, res)
console.log('item', item)
uni.cache.set('shopId',item.shopId)
if(!item.id&& item.wareGroupStatus!='ing'){
uni.cache.set('shopId', item.shopId)
if (!item.id && item.wareGroupStatus != 'ing') {
uni.showModal({
title:'提示',
content:'拼团已结束',
showCancel:false,
title: '提示',
content: '拼团已结束',
showCancel: false,
success() {
uni.redirectTo({
url:'/groupBuying/index/index',
url: '/groupBuying/index/index',
})
}
})
return
return
}
})
}
@@ -453,6 +460,13 @@
query,
})
})
const title=computed(()=>{
if(!item.id&&item.wareGroupStatus=='ing'){
return '拼团特惠'
}
return '订单详情'
})
</script>
<style lang="scss" scoped>
@@ -559,11 +573,13 @@
.list {
display: flex;
flex-wrap: wrap;
}
.item {
width: calc(100% / 3);
display: flex;
margin-bottom: 32rpx;
.add-box {
width: 140rpx;
@@ -583,7 +599,7 @@
}
}
&:nth-of-type(2n) {
&:nth-of-type(3n-1) {
justify-content: center;
}
@@ -682,63 +698,63 @@
font-weight: 700;
margin-bottom: 32rpx;
}
.popup-content {
font-size: 28rpx;
min-height: 300px;
.popup-content-top {
padding: 32rpx 28rpx;
border-bottom: 1px solid #ededed;
}
.goods-info {
padding: 32rpx 28rpx;
border-bottom: 1px solid #ededed;
.cover {
width: 184rpx;
height: 184rpx;
border-radius: 16rpx;
background: #d9d9d9;
&.bg-fff {
background-color: #fff;
}
}
.price {
font-size: 32rpx;
font-weight: 700;
color: #ed5a2e;
line-height: 46rpx;
}
.old-price {
font-size: 32rpx;
color: #999;
text-decoration-line: line-through;
line-height: 48rpx;
}
.limitBuyNum {
color: #666;
line-height: 42rpx;
}
}
.popup-content-bottom {
padding: 20rpx;
border-bottom: 1px solid #ededed;
.price {
color: #ed5a2e;
font-size: 32rpx;
font-weight: 700;
}
}
.btn {
display: flex;
padding: 22rpx 214rpx;

View File

@@ -1,7 +1,11 @@
<template>
<view class="color-333 u-font-28" v-if="item.id">
<view>
<view class="relative">
<up-swiper height="428rpx" :list="coverImgs" @click="prveImg"></up-swiper>
<view class="share-box">
分享
<button class="share" open-type="share">分享</button>
</view>
</view>
<view class="sku">
@@ -40,7 +44,7 @@
<view class="item u-flex" v-for="(item,index) in item.gbOrderList" :key="index">
<up-avatar size="76rpx" :src="item.avatar"></up-avatar>
<view class="u-flex u-flex-1 u-p-l-22 u-col-center u-row-between">
<view>
<view>立即购买购
<view class="color-000 u-line-1" style="max-width: 180rpx;">{{item.nickName}}</view>
<view class="main-color u-m-t-2">{{returnNeedPerpole(item)}}人拼成</view>
</view>
@@ -104,7 +108,7 @@
<view>
<view class="price">¥{{item.groupPrice}}</view>
<view class="old-price">¥{{item.originalPrice}}</view>
<view class="limitBuyNum" v-if="item.limitBuyNum"> 限购{{item.limitBuyNum}} </view>
<view class="limitBuyNum" v-if="item.limitBuyNum&&item.limitBuyNum!=-10086"> 限购{{item.limitBuyNum}} </view>
</view>
</view>
</view>
@@ -139,6 +143,7 @@
watch
} from "vue";
import dayjs from "dayjs";
import {wxShare} from '@/utils/share.js'
import {
getOpenId
} from '@/utils/uniapp.js'
@@ -147,6 +152,11 @@
import {
pay
} from '@/utils/pay.js'
import {
Storelogin
} from '@/stores/user.js';
const storelogin = Storelogin();
const imgs = {
bg: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/9fd6a3ad2b384f6cb4e88ed6b77bd334.png",
};
@@ -326,7 +336,7 @@
const coverImgs = ref([])
function init(opt) {
async function init(opt) {
// 获取小程序进入场景和参数
const launchOptions = uni.getLaunchOptionsSync();
console.log(launchOptions);
@@ -337,6 +347,7 @@
console.log(opt)
Object.assign(query, opt)
console.log(query)
await storelogin.actionslogin()
getDetail()
}
@@ -346,6 +357,7 @@
Object.assign(item, res)
console.log(item)
coverImgs.value = res.wareImgs.split(',')
uni.cache.set('shopId',item.shopId)
})
}
@@ -413,11 +425,11 @@
// #endif
onShareAppMessage(() => {
const query = `wareId=${item.wareId}&shopId=${item.shopId}`
const query = `wareId=${item.id}&shopId=${item.shopId}`
return wxShare({
title: item.wareJson.wareName,
imageUrl: item.goodsImg,
path: '/groupBuying/detail/index' + '?' + query,
title: item.wareName,
imageUrl: coverImgs.value[0],
path: '/groupBuying/goodsDetail/goodsDetail' + '?' + query,
query,
})
})
@@ -663,4 +675,22 @@
}
}
}
.share-box{
top: 0;
position: absolute;
right: 0;
padding: 4rpx 30rpx;
border-radius: 0 0 0 24rpx;
color: #ed5a2e; font-weight: 700;
background: #FFF;
overflow: hidden;
.share{
position: absolute;
left:0;
right: 0;
top:0;
bottom: 0;
opacity: 0;
}
}
</style>

View File

@@ -2,8 +2,8 @@
<view class="min-page bg-f7 u-font-28">
<up-sticky :offsetTop="0" :customNavHeight="0">
<view class="top" :style="topStyle">
<up-navbar bg-color="transparent" :fixed="false" :placeholder="false" title="拼团特惠"
@leftClick="back()" left-icon-color="#fff" title-color="#fff"></up-navbar>
<up-navbar bg-color="transparent" :fixed="false" :placeholder="false" title="拼团特惠" @leftClick="back()"
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 class="u-line-1 u-m-l-20">{{shopInfo.shopName||''}}</view>
@@ -104,6 +104,10 @@
<text class="title ">门店地址</text>
<text class="stitle">{{item.shopAddress}}</text>
</view>
<view class="u-flex u-m-t-32 u-col-center" v-if="item.groupEndTime&&item.wareGroupStatus=='success'">
<text class="title">成团时间</text>
<text class="stitle price">{{item.groupEndTime}}</text>
</view>
<view class="u-flex u-m-t-32 u-col-center" v-if="showTime(item)">
<text class="title">剩余成团时间</text>
<text class="stitle price">{{returnTime(item)}}</text>
@@ -136,7 +140,12 @@
</template>
<script setup>
import {back} from '@/utils/uniapp.js'
import {
APIusershopInfodetail
} from '@/common/api/member.js'
import {
back
} from '@/utils/uniapp.js'
import LookQrcode from "@/components/look-qrcode/look-qrcode.vue";
import {
wxShare
@@ -181,7 +190,7 @@
pin: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/3/4bcce5bdfa074f2a838a0209fac24241.png'
}
const shopInfo = ref(uni.cache.get('shopInfo'))
const shopInfo = ref({})
const steps = ['发起拼团', '邀请好友', '成团优惠']
@@ -404,7 +413,15 @@
})
})
onShow(getData)
onLoad(() => {
APIusershopInfodetail({
shopId: uni.cache.get('shopId')
}).then(res => {
console.log(res);
shopInfo.value = res.shopInfo
uni.cache.set('shopInfo', res.shopInfo)
})
})
let timer = null
let nowTime = ref(Date.now())

View File

@@ -129,7 +129,7 @@
<view style="height: 100px;"></view>
<view class="btns">
<view class="btn" @click="toPinIndex">继续拼团</view>
<button class="btn main" @click="toOrderDetail(item)">查看订单</button>
<button class="btn main" @click="toOrderDetail(item)">查看订单</button>
</view>
</view>
</template>
@@ -165,7 +165,7 @@
</view>
<view class="u-m-t-16 u-flex u-col-center u-row-between">
<view style="max-width: 356rpx;">
<view class="font-bold" v-if="item.wareJson">{{item.wareJson
<view class="font-bold u-line-1" v-if="item.wareJson">{{item.wareJson
.wareName}}</view>
<view class="u-flex u-m-t-10 u-col-center ">
<view class="price">
@@ -227,7 +227,7 @@
</view>
</view>
<view class="u-flex u-row-center" v-if="item.status=='待成团'">
<view class="pin-btn" >邀请好友参团
<view class="pin-btn">邀请好友参团
<button open-type="share" class="share">邀请好友参团</button>
</view>
@@ -325,14 +325,36 @@
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)
})
try {
Api.recordDetail(query).then(res => {
if (!res) {
uni.showModal({
title: '提示',
content :'当前商品已下架或者不存在',
showCancel: false,
success(res) {
uni.redirectTo({
url: '/groupBuying/index/index'
})
}
})
return
}
console.log(res, '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)
})
} catch (err) {
console.log('err', err)
}
}
onLoad(init)
@@ -506,6 +528,7 @@
.item {
width: calc(100% / 3);
display: flex;
margin-bottom: 32rpx;
.add-box {
width: 140rpx;
@@ -525,9 +548,9 @@
}
}
&:nth-of-type(2n) {
justify-content: center;
}
// &:nth-of-type(2n) {
// justify-content: center;
// }
&:nth-of-type(3n) {
justify-content: flex-end;
@@ -601,7 +624,6 @@
border: 2rpx solid #E8AD7B;
background: #E8AD7B;
color: #fff;
margin-top: 32rpx;
position: relative;
.share {
@@ -736,12 +758,14 @@
.list {
display: flex;
flex-wrap: wrap;
}
.item {
width: calc(100% / 3);
display: flex;
.add-box {
width: 140rpx;
height: 140rpx;
@@ -760,7 +784,7 @@
}
}
&:nth-of-type(2n) {
&:nth-of-type(3n-1) {
justify-content: center;
}

View File

@@ -405,11 +405,31 @@
{
"path": "index/index",
"style": {
"navigationBarTitleText": "taocan1tuig1",
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "goodsDetail/goodsDetail",
"style": {
"navigationBarTitleText": "套餐详情"
}
},
{
"path": "order/order",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "order/detail",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
}
]
}
],

File diff suppressed because it is too large Load Diff

View File

@@ -49,6 +49,7 @@ export const Storelogin = defineStore("login", {
rawData: infoRes.rawData,
source: "wechat",
});
console.log('res',res);
if (res) {
this.token = res.token;
this.miniAppOpenId = res.userInfo
@@ -95,6 +96,8 @@ export const Storelogin = defineStore("login", {
},
});
// #endif
resolve(true)
});
},
},

View File

@@ -0,0 +1,877 @@
<template>
<view class="color-333 u-font-28 min-page bg-f7" v-if="item.id">
<view class="relative">
<up-swiper height="428rpx" :list="item.images" @click="prveImg"></up-swiper>
<view class="share-box">
分享
<button class="share" open-type="share">分享</button>
</view>
</view>
<view class="sku">
<view class="u-flex u-col-center">
<text class="price">¥{{item.price}}</text>
<text class="old-price">¥{{item.originPrice}}</text>
</view>
<view>
<view class="u-m-t-16 text" v-if="item.limitBuyNum"> 限购{{item.limitBuyNum}} </view>
<view class="text u-m-t-10">已售{{item.saleNum||0}}</view>
</view>
</view>
<view class="goods">
<view class="goods-name">{{item.packageName}}</view>
<view class="u-m-t-20 color-666">
{{item.description}}
</view>
</view>
<view class="bg-f7" style="height: 32rpx"></view>
<view class="desc">
<view class="u-flex">
<view class="color-666 no-wrap" style="min-width: 180rpx;">可核销门店</view>
<view class="">{{item.shopName}}</view>
</view>
<view class="u-flex u-m-t-16 u-col-baseline">
<view class="color-666 no-wrap" style="min-width: 180rpx;">门店地址</view>
<view class="">{{item.shopAddress}}</view>
</view>
</view>
<template v-if="flase">
<view class="bg-f7" style="height: 32rpx"></view>
<view class="groups">
<view class="color-000 u-m-b-28 u-font-32 font-700">立即拼团</view>
<view class="item u-flex" v-for="(item,index) in item.gbOrderList" :key="index">
<up-avatar size="76rpx" :src="item.avatar"></up-avatar>
<view class="u-flex u-flex-1 u-p-l-22 u-col-center u-row-between">
<view>
<view class="color-000 u-line-1" style="max-width: 180rpx;">{{item.nickName}}</view>
<view class="main-color u-m-t-2">{{returnNeedPerpole(item)}}人拼成</view>
</view>
<view class="u-m-t-22">
<text class="color-666">剩余</text>
<text class="main-color">{{getRemainingHMS(item)}}</text>
</view>
<view class="btn" @click="fastBuy(item)">快速拼成</view>
</view>
</view>
</view>
</template>
<view class="bg-f7" style="height: 24rpx"></view>
<view class="goods-group">
<view class="u-flex u-row-between">
<view class="name">套餐商品</view>
<view class="u-flex color-666" @click="showGroup=!showGroup" style="align-items: baseline;">
<text class="u-m-r-18">{{showGroup?'收起':'展开'}}</text>
<view class="guodu" :class="{rotate:!showGroup}">
<up-icon name="arrow-down" bold></up-icon>
</view>
</view>
</view>
<view class="u-m-t-36" v-if="showGroup">
<view v-for="(item,index) in item.packageContent" :key="index">
<view class="">
<text>{{item.name}}</text>
<text class="u-m-l-30">{{item.packageProducts.length}}{{item.num}}</text>
</view>
<view class="u-m-t-48">
<view class="u-flex u-m-t-32 u-row-between" v-for="(goods,goodsIndex) in item.packageProducts"
:key="goodsIndex">
<text>{{goods.name}}</text>
<view class="u-flex text-right">
<text class="color-666 u-m-r-42">{{goods.num}}</text>
<view style="min-width: 110rpx;">¥{{goods.price}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="desc">
<view class="u-flex u-row-between">
<view class="name">分享说明</view>
<view class="u-flex color-666" @click="showDesc=!showDesc" style="align-items: baseline;">
<text class="u-m-r-18">{{showDesc?'收起':'展开'}}</text>
<view class="guodu" :class="{rotate:!showDesc}">
<up-icon name="arrow-down" bold></up-icon>
</view>
</view>
</view>
<template v-if="showDesc">
<view class="u-m-t-26 text-center table">
<view class="u-flex header color-666">
<view class="u-flex-1 u-p-t-32 u-p-b-32">分享人数</view>
<view class="u-flex-1 u-p-t-32 u-p-b-32">购买价格</view>
</view>
<view class="u-flex row" v-for="(step,index) in item.tieredDiscount" :key="index">
<view class="u-flex-1 u-p-t-32 u-p-b-32">{{step.peopleNum}}</view>
<view class="u-flex-1 u-p-t-32 u-p-b-32">¥{{step.price}}</view>
</view>
</view>
<view class="u-m-t-26" >
<view>
分享期限小时4
</view>
<view class="u-m-t-10">
规定期限内的助力才会被计入
</view>
<view class="u-m-t-40">
如何才是分享成功被分享人只需要点击助力提示助力成功后即可
</view>
</view>
</template>
</view>
<view class="desc">
<view class="u-flex u-row-between">
<view class="name">使用说明</view>
<view class="u-flex color-666" @click="useDescShow=!useDescShow" style="align-items: baseline;">
<text class="u-m-r-18">{{useDescShow?'收起':'展开'}}</text>
<view class="guodu" :class="{rotate:!useDescShow}">
<up-icon name="arrow-down" bold></up-icon>
</view>
</view>
</view>
<template v-if="useDescShow">
<view class="u-m-t-16 color-666">
<view>
1可用时间段04:00 - 16:07
</view>
<view>
2其他使用说明这里是其他使用说明
</view>
</view>
</template>
</view>
<view class="goods-detail" v-if="item.goodsCategory!='优惠券'">
<view class="u-flex u-row-center">
<view class="title">商品详情</view>
</view>
<view class="u-m-t-32">
<image class="w-full" v-for="(item,index) in item.imgs" :key="index" mode="widthFix" :src="item">
</image>
</view>
</view>
<view style="height: 140px"></view>
<view class="fixed-bottom ">
<view v-if="isCanExchange" class="btn" @click="exchangeClick">
{{returnBtmText}}
</view>
<view class="btn gray u-m-t-32" @click="createOrder">
立即助力
</view>
</view>
<!-- 需要支付的弹窗 -->
<up-popup :show="popupData.show" mode="bottom" closeOnClickOverlay @close="popupData.show = false">
<view class="popup-content">
<view class="popup-content-top u-flex u-row-right">
<up-icon name="close" bold="" @click="popupData.show = false"></up-icon>
</view>
<view class="goods-info">
<view class="u-flex">
<image class="cover" :src="coverImgs[0]"></image>
<view class="u-flex u-flex-1 u-row-between u-p-l-16 u-col-center">
<view>
<view class="u-font-32 font-bold">{{item.packageName}}</view>
<view class="u-m-t-12 color-666 u-line-2">{{item.otherDesc}}</view>
</view>
<view>
<view class="price">¥{{item.price}}</view>
<view class="old-price">¥{{item.originPrice}}</view>
<view class="limitBuyNum" v-if="item.limitBuyNum"> 限购{{item.limitBuyNum}} </view>
</view>
</view>
</view>
</view>
<view class="bottom u-flex u-row-between u-col-center">
<view class="u-flex u-col-baseline">
<text class="color-666">合计</text>
<text class=" price">{{totalPrice}}</text>
</view>
<view class="u-flex">
<up-icon name="minus-circle" size="20" color="#666" @click="changeNumber('-')"></up-icon>
<text class="u-m-l-20 u-m-r-20">{{number}}</text>
<up-icon name="plus-circle-fill" size="20" color="#ED5A2E" @click="changeNumber('+')"></up-icon>
</view>
</view>
<view class="u-m-t-42 u-flex u-row-center">
<view class="btn" @click="payExchange">去支付</view>
</view>
</view>
</up-popup>
<!-- 兑换确认弹窗end -->
</view>
</template>
<script setup>
import {
Storelogin
} from '@/stores/user.js';
const storelogin = Storelogin();
import {
computed,
reactive,
watch
} from "vue";
import dayjs from "dayjs";
import {
wxShare
} from '@/utils/share.js'
import {
getOpenId
} from '@/utils/uniapp.js'
import modal from "@/groupBuying/components/modal.vue";
import * as Api from '@/common/api/market/package.js'
import {
pay
} from '@/utils/pay.js'
const imgs = {
bg: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/9fd6a3ad2b384f6cb4e88ed6b77bd334.png",
};
const number = ref(1)
const showGroup = ref(true)
const showDesc = ref(true)
const useDescShow=ref(true)
import {
BigNumber
} from "bignumber.js";
const totalPrice = computed(() => {
if (!item.price) {
return 0;
}
return BigNumber(number.value).times(item.price).toNumber()
})
function changeNumber(step) {
if (step === '-') {
if (number.value == 1) {
return
}
number.value--
return
}
if (step === '+') {
if (item.limitBuyNum == -10086) {
number.value++
return
}
if (number.value >= item.limitBuyNum) {
return uni.showToast({
title: '最多可购买' + item.limitBuyNum + '份',
icon: 'none'
})
}
number.value++
return
}
}
const modalData = reactive({
show: false,
});
function prveImg(index) {
uni.previewImage({
urls: coverImgs.value,
current: index
})
}
const popupData = reactive({
show: false,
item: null
});
function exchangeClick() {
popupData.show = true
}
function fastBuy(item) {
popupData.item = item;
popupData.show = true
}
watch(() => popupData.show, (newval) => {
if (!newval) {
popupData.item = null
}
})
function dingyue() {
return new Promise((revlove, reject) => {
uni.requestSubscribeMessage({
tmplIds: ['JGPAGmqcPEgWB6mvAl0SC5cMqr5H5Qjcim8JCpHAZd0',
'F4OyUhe_ZQ9BR731jlkaN2QXAUaA3HBZuUeVPfraSz0'
],
success(res) {},
complete() {
revlove()
}
})
})
}
async function createOrder(){
Api.order({
packageId:item.id
}).then(res=>{
if(res){
uni.navigateTo({
url:'/userPackage/order/detail?orderId='+res
})
}else{
uni.showToast({
title:'发起助力失败',
icon:'none'
})
}
})
}
async function payExchange() {
uni.setStorageSync('group_buying_order', {
...item,
number: number.value,
groupOrderNo: popupData.item ? popupData.item.groupOrderNo : '',
})
uni.navigateTo({
url: '/groupBuying/confirm-order/confirm-order'
})
return
await dingyue();
uni.showLoading({
title: '支付中……'
})
const openId = await getOpenId()
uni.hideLoading()
if (openId) {
Api.exchange({
paramId: item.id,
shopId: item.shopId,
number: number.value,
groupOrderNo: popupData.item ? popupData.item.groupOrderNo : '',
openId
}).then(orderRes => {
popupData.show = false;
pay(orderRes.payInfo).then(res => {
console.log(res)
if (res) {
uni.redirectTo({
url: '/groupBuying/success/index?detailId=' + orderRes.record
.id
})
} else {
uni.showToast({
title: '开团失败',
icon: 'none'
})
}
})
})
} else {
uni.showToast({
title: '鉴权失败,兑换失败',
icon: 'none'
})
}
}
const item = reactive({
goodsDescription: []
})
const isCanExchange = computed(() => {
if (item.quantity <= 0) {
return false
}
if (item.limitQuota && item.boughtCount >= item.limitQuota) {
return false
}
return true
})
const returnBtmText = computed(() => {
if (isCanExchange.value) {
return '立即购买'
}
if (pointsUser.pointBalance < item.requiredPoints) {
const num = item.requiredPoints - pointsUser.pointBalance
return `积分不足,还差${num}积分`
}
if (item.quantity <= 0) {
return `库存不足`
}
if (item.limitQuota && item.boughtCount >= item.limitQuota) {
return `单人兑换已达上限`
}
})
const query = reactive({
shopId: '',
id: '',
groupOrderNo: ''
})
const coverImgs = ref([])
async function init(opt) {
// 获取小程序进入场景和参数
const launchOptions = uni.getLaunchOptionsSync();
console.log(launchOptions);
// 获取链接上的参数
const launchOptionsQuery = launchOptions.query;
console.log('launchOptionsQuery', launchOptionsQuery);
Object.assign(query, launchOptionsQuery)
console.log(opt)
Object.assign(query, opt)
console.log(query)
await storelogin.actionslogin()
getDetail()
}
function getDetail() {
Api.getPackageDetail(query.id).then(res => {
Object.assign(item, res)
console.log(item)
coverImgs.value = res.images
uni.cache.set('shopId', item.shopId)
})
}
/**
* 计算剩余时间差(毫秒)
* @param {Object} item - 包含groupEndTime的订单/拼团对象
* @returns {number} 剩余时间(毫秒)
*/
function returnRemainingTime(item) {
if (!item?.groupEndTime) return 0; // 容错无结束时间则返回0
return dayjs(item.groupEndTime).valueOf() - dayjs().valueOf();
}
/**
* 将毫秒差格式化为 HH:MM:SS最多72小时
* @param {number} ms - 时间差(毫秒)
* @returns {string} 格式化后的时分秒(如 09:09:09、72:00:00、00:00:00
*/
function formatTimeToHMS(ms) {
// 边界1已过期/无剩余时间 → 显示00:00:00
if (ms <= 0) return '00:00:00';
// 边界2超过72小时 → 按72小时算72*60*60*1000 = 259200000毫秒
const maxMs = 72 * 60 * 60 * 1000;
const validMs = Math.min(ms, maxMs);
// 转换为总秒数(取整,避免小数)
const totalSeconds = Math.floor(validMs / 1000);
// 拆解小时、分钟、秒
const hours = Math.floor(totalSeconds / 3600);
const remainingSeconds = totalSeconds % 3600;
const minutes = Math.floor(remainingSeconds / 60);
const seconds = remainingSeconds % 60;
// 补零(确保两位数,如 9 → 09
const pad = (num) => String(num).padStart(2, '0');
return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
}
let timer = null
let nowTime = ref(Date.now())
timer = setInterval(() => {
nowTime.value = Date.now()
}, 1000)
// 组合使用:获取格式化后的剩余时间
function getRemainingHMS(item) {
nowTime.value
const ms = returnRemainingTime(item);
return formatTimeToHMS(ms);
}
function returnNeedPerpole(data) {
return data.groupPeopleNum - data.currentPeopleNum
}
onLoad(init)
// #ifdef MP-WEIXIN
uni.showShareMenu()
// #endif
onShareAppMessage(() => {
const query = `id=${item.id}&shopId=${item.shopId}`
return wxShare({
title: item.wareName,
imageUrl: coverImgs.value[0],
path: '/groupBuying/goodsDetail/goodsDetail' + '?' + query,
query,
})
})
</script>
<style lang="scss" scoped>
$topHeight: 350rpx;
.top-img {
width: 750rpx;
height: $topHeight;
}
.top {
margin: 14rpx 18rpx;
background-size: cover;
height: $topHeight;
box-sizing: border-box;
padding-left: 70rpx;
padding-top: 95rpx;
.name {
color: #000000;
font-size: 36rpx;
font-weight: 700;
}
.info {
color: #333333;
font-size: 48rpx;
font-weight: 700;
margin-top: 62rpx;
}
}
.sku {
display: flex;
justify-content: space-between;
padding: 20rpx 36rpx;
align-items: center;
background: linear-gradient(90deg, #ff4a63 0%, #fd1f48 100%);
.price {
color: #fff;
font-weight: 700;
font-size: 40rpx;
}
.old-price {
margin-left: 16rpx;
color: #E7E7E7;
opacity: .85;
font-weight: 700;
text-decoration: line-through;
}
.text {
color: #fff;
font-size: 28rpx;
}
}
.goods {
padding: 20rpx 28rpx;
background: #fff;
.goods-name {
font-size: 32rpx;
font-weight: 700;
color: #333;
}
}
.desc {
padding: 32rpx 28rpx;
background-color: #fff;
}
.goods-detail {
padding: 32rpx;
.title {
position: relative;
padding: 0 22rpx;
&::before {
content: "";
display: block;
position: absolute;
right: 100%;
width: 70rpx;
height: 2rpx;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(90deg, #f7f8f9 0%, #c9cbcc 100%);
}
&::after {
left: 100%;
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 70rpx;
height: 2rpx;
background: linear-gradient(90deg, #c9cbcc 0%, #f7f8f9 100%);
}
}
}
.fixed-bottom {
position: fixed;
left: 98rpx;
right: 98rpx;
padding-bottom: 30px;
padding-top: 32rpx;
bottom: 0;
z-index: 10;
.btn {
padding: 22rpx;
border-radius: 200rpx;
font-size: 32rpx;
color: #fff;
width: 556rpx;
text-align: center;
background-color: #E8AD7B;
border: 1px solid transparent;
&.gray {
background: #fff;
color: #E8AD7B;
border-color: #E8AD7B;
}
}
}
.waring {
background-color: rgba(255, 204, 0, 0.09);
padding: 32rpx 24rpx;
color: #ff8d28;
}
.popup-content {
font-size: 28rpx;
min-height: 300px;
.popup-content-top {
padding: 32rpx 28rpx;
border-bottom: 1px solid #ededed;
}
.goods-info {
padding: 32rpx 28rpx;
border-bottom: 1px solid #ededed;
.cover {
width: 184rpx;
height: 184rpx;
border-radius: 16rpx;
background: #d9d9d9;
&.bg-fff {
background-color: #fff;
}
}
.price {
font-size: 32rpx;
font-weight: 700;
color: #ed5a2e;
line-height: 46rpx;
}
.old-price {
font-size: 32rpx;
color: #999;
text-decoration-line: line-through;
line-height: 48rpx;
}
.limitBuyNum {
color: #666;
line-height: 42rpx;
}
}
.bottom {
padding: 20rpx;
border-bottom: 1px solid #ededed;
.price {
color: #ed5a2e;
font-size: 32rpx;
font-weight: 700;
}
}
.btn {
display: flex;
padding: 22rpx 214rpx;
align-items: flex-start;
gap: 20rpx;
border-radius: 66rpx;
background: #e8ad7b;
font-size: 32rpx;
color: #fff;
font-size: 700;
}
}
.w-full {
width: 100%;
}
.groups {
padding: 28rpx 22rpx;
background-color: #fff;
.item {
padding: 28rpx 0;
border-bottom: 2rpx solid #EDEDED;
&:last-child {
border-bottom: none;
}
.main-color {
color: #ed5a2e;
}
.btn {
padding: 8rpx 26rpx;
border-radius: 36rpx;
background: #E8AD7B;
font-weight: 700;
color: #fff;
}
}
}
.share-box {
top: 0;
position: absolute;
right: 0;
padding: 4rpx 30rpx;
border-radius: 0 0 0 24rpx;
color: #ed5a2e;
font-weight: 700;
background: #FFF;
overflow: hidden;
.share {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
}
}
.goods-group {
padding: 32rpx 46rpx;
background-color: #fff;
.name {
font-weight: 700;
font-size: 32rpx;
}
.rotate {
transform: rotate(-90deg);
}
}
.desc {
padding: 32rpx 46rpx;
background-color: #fff;
margin-top: 32rpx;
.name {
font-weight: 700;
font-size: 32rpx;
}
.table {
border: 2rpx solid #EDEDED;
border-radius: 8rpx;
margin: 0 52rpx;
.header {
background: #f8f8f88f;
}
.row {
border-top: 2rpx solid #EDEDED;
&:first-child {
border-top: none;
}
}
}
.rotate {
transform: rotate(-90deg);
}
}
.guodu {
transition: all .3s;
}
</style>

View File

@@ -39,23 +39,20 @@
<view class="item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
<view class="relative img-box">
<up-image width="218rpx" radius="16rpx" height="218rpx" :src="returnCoverImg(item)"></up-image>
<view class="tag">阶梯优惠</view>
<view class="tag" v-if="item.tieredDiscount&&item.tieredDiscount.length">阶梯优惠</view>
</view>
<view class="u-flex-1 u-p-l-16">
<view class="u-line-1 name">这里是商品名称啊啊嗷嗷啊啊</view>
<view class="desc">
<view class="u-flex-1 u-p-l-16" style="max-width: 416rpx;">
<view class="u-line-1 name">{{item.packageName}}</view>
<view class="desc u-line-1 u-m-t-10">
{{item.description}}
</view>
<view class="info">
<view class="left">
<view class="">
<text class="u-font-24">拼团到手</text>
<text class="u-font-32 font-bold"> ¥{{item.groupPrice}}</text>
</view>
<view style="opacity: 0.84;">
<text class="u-font-24">原价</text>
<text class=""> ¥{{item.originalPrice}}</text>
</view>
<view class="sale-number">已售{{item.saleNum||0}}</view>
<view class="info ">
<view class="left u-flex u-col-center">
<text class="u-font-24">最低到手</text>
<text class="u-font-32 font-bold"> ¥{{item.price}}</text>
<text class="color-999 old-price"> ¥{{item.originPrice}}</text>
</view>
<view class="right">
<image class="pin" :src="imgs.pin"></image>
@@ -146,6 +143,10 @@
watch
} from 'vue'
import {
APIusershopInfodetail
} from '@/common/api/member.js'
const canRefundStatus = ['待成团', '待核销']
function canRefund(item) {
@@ -168,7 +169,7 @@
bg: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/dd298d6a503d432f832f3c7c2bb7fb0e.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/3/4bcce5bdfa074f2a838a0209fac24241.png'
pin: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/8eaf3bdd44ce422889e5feeb30bcb2ea.png'
}
const shopInfo = ref(uni.cache.get('shopInfo'))
@@ -245,7 +246,7 @@
size,
shopId
} = query
Api.record({
Api.order({
page,
size,
shopId,
@@ -275,23 +276,22 @@
function toDetail(item) {
uni.navigateTo({
url: '/groupBuying/goodsDetail/goodsDetail?wareId=' + item.id + '&shopId=' + item.shopId
url: '/userPackage/goodsDetail/goodsDetail?id=' + item.id + '&shopId=' + item.shopId
})
}
function toOrderDetail(item) {
uni.navigateTo({
url: '/groupBuying/detail/index?detailId=' + item.id + '&shopId=' + item.shopId
url: '/userPackage/detail/index?detailId=' + item.id + '&shopId=' + item.shopId
})
}
function returnCoverImg(item) {
if (!item.wareImgs) {
if (!item.images) {
return ''
}
const arr = item.wareImgs.split(',')
return arr[0]
return item.images[0]
}
function refresh() {
@@ -393,6 +393,17 @@
query,
})
})
onLoad(() => {
APIusershopInfodetail({
shopId: uni.cache.get('shopId')
}).then(res => {
console.log(res);
shopInfo.value = res.shopInfo
uni.cache.set('shopInfo', res.shopInfo)
})
})
onShow(getData)
@@ -477,10 +488,11 @@
.img-box {
position: relative;
.tag {
position: absolute;
left:0;
top:0;
left: 0;
top: 0;
padding: 8rpx 18rpx;
border-radius: 16rpx 0;
background: #4C2828;
@@ -488,11 +500,20 @@
font-size: 700;
}
}
.name{
font-size: 32rpx;font-weight: 700; color: #333333;
.name {
font-size: 32rpx;
font-weight: 700;
color: #333333;
}
.desc{
.desc {
color: #666;
}
.sale-number {
margin-top: 16rpx;
color: #999;
}
.numbers {
@@ -520,19 +541,22 @@
}
.info {
background-image: url(https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/604c3f917daa41af9239145196c6d3f3.png);
width: 410rpx;
height: 102rpx;
background: linear-gradient(270deg, #FFF7F4 44.8%, #ffffff00 89.37%);
width: 452rpx;
height: 92rpx;
border-radius: 12rpx;
background-size: cover;
transform: translateY(-10rpx);
display: flex;
.left {
width: 306rpx;
color: #fff;
padding: 16rpx 22rpx;
color: #eb532a;
}
.old-price{
text-decoration: line-through;
}
.right {
padding-left: 16rpx;
margin-top: 30rpx;

View File

@@ -0,0 +1,770 @@
<template>
<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="title" left-icon-color="#fff"
@leftClick="back('/groupBuying/index/index')" title-color="#fff"></up-navbar>
<view class="u-flex info u-col-center">
</view>
</view>
<view class="bottom">
<view class="time" v-if="item.status=='待成团'||item.wareGroupStatus=='ing'">
<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>
<template v-if="item.id">
<statusVue :status="item.status"></statusVue>
</template>
<template v-else>
<statusVue v-if="item.wareGroupStatus=='ing'" status="待成团"></statusVue>
<view v-else></view>
</template>
</view>
<view class="u-m-t-16 u-flex u-col-center">
<view style="width: 356rpx;">
<view class="font-bold u-line-1" v-if="item&&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.wareGroupPrice}} </text>
</view>
<view class="old-price u-m-l-32">
<text>¥</text>
<text>{{item.wareOriginalPrice}} </text>
</view>
</view>
</view>
<view class="u-p-l-16 color-333 no-wrap" v-if="item.id">
数量{{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" v-if="item.status=='待核销'||item.status=='退款中'">
<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" v-if="item.status!='已退款'">
<view class="list" v-if="item.users&&item.users.length">
<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="item.status=='待成团'">
<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" v-if="item.wareGroupStatus=='ing'&&!item.id">
<view class="pin-btn" @click="fastBuy">立即参与拼团</view>
</view>
</view>
<template v-if="item.id">
<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="">¥{{item.payAmount}}</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 class="u-flex u-row-between item"
v-if="item.groupEndTime&&item.wareGroupStatus=='success'">
<view class="color-666">成团时间</view>
<view class="">{{item.groupEndTime}}</view>
</view>
<view class="u-flex u-row-between item" v-if="item.verifyTime">
<view class="color-666">核销时间</view>
<view class="">{{item.verifyTime}}</view>
</view>
</view>
</view>
</template>
</view>
<view style="height: 100px;"></view>
<view class="btns" v-if="item.id">
<template v-if="item.status=='待成团'">
<view class="btn" @click="refund(item)" v-if="canRefund(item)">申请退款</view>
<button open-type="share" class="btn main" @click="share(item)">邀请好友</button>
</template>
<template v-if="item.status=='待核销'">
<view class="btn" @click="refund(item)" v-if="canRefund(item)">申请退款</view>
</template>
<template v-if="item.status=='退款中'">
<view class="btn" @click="cancelRefund(item)">取消退款</view>
</template>
</view>
<!-- 需要支付的弹窗 -->
<up-popup :show="popupData.show" mode="bottom" closeOnClickOverlay @close="popupData.show = false">
<view class="popup-content">
<view class="popup-content-top u-flex u-row-right">
<up-icon name="close" bold="" @click="popupData.show = false"></up-icon>
</view>
<view class="goods-info" v-if="item&&item.wareJson">
<view class="u-flex">
<image class="cover" :src="item.goodsImg"></image>
<view class="u-flex u-flex-1 u-row-between u-p-l-16 u-col-center">
<view style="max-width: 340rpx;">
<view class="u-font-32 font-bold u-line-1" v-if="item && item.wareJson">
{{item.wareJson.wareName}}</view>
<view class="u-m-t-12 color-666 u-line-2">{{item.wareJson.wareDetail}}</view>
</view>
<view>
<view class="price">¥{{item.wareGroupPrice}}</view>
<view class="old-price">¥{{item.wareOriginalPrice}}</view>
<view class="limitBuyNum" v-if="item.wareJson.limitBuyNum">
限购{{item.wareJson.limitBuyNum}} </view>
</view>
</view>
</view>
</view>
<view class="popup-content-bottom u-flex u-row-between u-col-center">
<view class="u-flex u-col-baseline">
<text class="color-666">合计</text>
<text class=" price">{{totalPrice}}</text>
</view>
<view class="u-flex">
<up-icon name="minus-circle" size="20" color="#666" @click="changeNumber('-')"></up-icon>
<text class="u-m-l-20 u-m-r-20">{{number}}</text>
<up-icon name="plus-circle-fill" size="20" color="#ED5A2E" @click="changeNumber('+')"></up-icon>
</view>
</view>
<view class="u-m-t-42 u-flex u-row-center">
<view class="btn" @click="payExchange">去支付</view>
</view>
</view>
</up-popup>
<!-- 兑换确认弹窗end -->
</view>
</template>
<script setup>
import {
Storelogin
} from '@/stores/user.js';
const storelogin = Storelogin();
import {
back
} from '@/utils/uniapp.js'
import statusVue from '@/groupBuying/components/status.vue'
import * as Api from '@/common/api/market/package.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'
}
const popupData = reactive({
show: false,
item: null
});
const number = ref(1)
import {
BigNumber
} from "bignumber.js";
const totalPrice = computed(() => {
if (!item.wareGroupPrice) {
return 0;
}
return BigNumber(number.value).times(item.wareGroupPrice).toNumber()
})
function changeNumber(step) {
if (step === '-') {
if (number.value == 1) {
return
}
number.value--
return
}
if (step === '+') {
if (item.wareJson.limitBuyNum == -10086) {
number.value++
return
}
if (number.value >= item.wareJson.limitBuyNum) {
return uni.showToast({
title: '最多可购买' + item.wareJson.limitBuyNum + '份',
icon: 'none'
})
}
number.value++
return
}
}
function fastBuy() {
popupData.show = true
}
async function payExchange() {
uni.setStorageSync('group_buying_order', {
...item,
...item.wareJson,
number: number.value,
id: item.wareId || '',
originalPrice: item.wareOriginalPrice,
groupPrice: item.wareGroupPrice,
wareImgs: item.wareJson.wareImgs.join(','),
groupOrderNo: item.groupOrderNo || '',
})
uni.navigateTo({
url: '/groupBuying/confirm-order/confirm-order'
})
}
const canRefundStatus = ['待成团', '待核销']
function canRefund(item) {
if (canRefundStatus.includes(item.status)) {
return true
}
return false
}
const topStyle = {
backgroundImage: 'url(' + imgs.bg + ')'
}
const showOrder = ref(true)
function copyText(text) {
uni.setClipboardData({
data: text,
success() {}
})
}
const query = reactive({
shopId: '',
detailId: '',
})
async function init(opt) {
// 获取小程序进入场景和参数
const launchOptions = uni.getLaunchOptionsSync();
console.log(launchOptions);
// 获取链接上的参数
const launchOptionsQuery = launchOptions.query;
console.log('launchOptionsQuery', launchOptionsQuery);
Object.assign(query, launchOptionsQuery)
console.log(opt)
Object.assign(query, opt)
console.log(query)
await storelogin.actionslogin()
getDetail()
}
const item = reactive({})
function getDetail() {
Api.orderDetail(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)
uni.cache.set('shopId', item.shopId)
if (!item.id && item.wareGroupStatus != 'ing') {
uni.showModal({
title: '提示',
content: '拼团已结束',
showCancel: false,
success() {
uni.redirectTo({
url: '/groupBuying/index/index',
})
}
})
return
}
})
}
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)
}
})
}
}
})
}
function cancelRefund(item) {
uni.showModal({
title: '提示',
content: '是否取消退款?',
showCancel: true,
success(res) {
if (res.confirm) {
Api.cancelRefund({
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')
console.log(shareItem)
const query = `groupOrderNo=${shareItem.groupOrderNo}&shopId=${shareItem.shopId}`
return wxShare({
title: shareItem.wareJson.wareName,
imageUrl: shareItem.goodsImg,
path: '/groupBuying/detail/index' + '?' + query,
query,
})
})
const title=computed(()=>{
if(!item.id&&item.wareGroupStatus=='ing'){
return '拼团特惠'
}
return '订单详情'
})
</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 {
margin: 0 28rpx;
transform: translateY(-160rpx);
border-radius: 16rpx;
overflow: hidden;
.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;
.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-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;
flex-wrap: wrap;
}
.item {
width: calc(100% / 3);
display: flex;
margin-bottom: 32rpx;
.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(3n-1) {
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;
}
.popup-content {
font-size: 28rpx;
min-height: 300px;
.popup-content-top {
padding: 32rpx 28rpx;
border-bottom: 1px solid #ededed;
}
.goods-info {
padding: 32rpx 28rpx;
border-bottom: 1px solid #ededed;
.cover {
width: 184rpx;
height: 184rpx;
border-radius: 16rpx;
background: #d9d9d9;
&.bg-fff {
background-color: #fff;
}
}
.price {
font-size: 32rpx;
font-weight: 700;
color: #ed5a2e;
line-height: 46rpx;
}
.old-price {
font-size: 32rpx;
color: #999;
text-decoration-line: line-through;
line-height: 48rpx;
}
.limitBuyNum {
color: #666;
line-height: 42rpx;
}
}
.popup-content-bottom {
padding: 20rpx;
border-bottom: 1px solid #ededed;
.price {
color: #ed5a2e;
font-size: 32rpx;
font-weight: 700;
}
}
.btn {
display: flex;
padding: 22rpx 214rpx;
align-items: flex-start;
gap: 20rpx;
border-radius: 66rpx;
background: #e8ad7b;
font-size: 32rpx;
color: #fff;
font-size: 700;
}
}
</style>

View File

@@ -0,0 +1,13 @@
<template>
<view>
</view>
</template>
<script setup>
</script>
<style>
</style>