1083 lines
26 KiB
Vue
1083 lines
26 KiB
Vue
<template>
|
||
<view class="min-page bg-f7 color-333 u-font-28 relative" x>
|
||
<view class="top" :style="topStyle">
|
||
<up-navbar
|
||
bg-color="transparent"
|
||
:fixed="false"
|
||
:placeholder="false"
|
||
:title="title"
|
||
left-icon-color="#fff"
|
||
@leftClick="back('/userPackage/index/index')"
|
||
title-color="#fff"
|
||
></up-navbar>
|
||
<view class="u-flex info u-col-center"></view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="time u-flex u-row-center" v-if="item.status == '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" @click="toDetail(item.packageInfo)">
|
||
<view class="img-box">
|
||
<up-image width="174rpx" height="174rpx" radius="14rpx" :src="item.goodsImg"></up-image>
|
||
<view class="tag" v-if="item.packageInfo && item.packageInfo.tieredDiscount.length">阶梯优惠</view>
|
||
</view>
|
||
<view class="u-flex-1 u-p-l-16 u-flex u-col-center u-row-between">
|
||
<view v-if="item && item.packageInfo" style="max-width: 326rpx">
|
||
<view class="font-bold u-font-32 u-line-2">{{ item.packageInfo.packageName }}</view>
|
||
|
||
<view class="u-m-t-10 color-666 u-line-1">{{ item.packageInfo.description }}</view>
|
||
</view>
|
||
<view>
|
||
<template v-if="item.id && item.isMyself">
|
||
<statusVue :status="item.status"></statusVue>
|
||
</template>
|
||
<template v-if="item.id && !item.isMyself && item.canHelp">
|
||
<statusVue :status="item.status"></statusVue>
|
||
</template>
|
||
|
||
<!-- 阶梯 -->
|
||
<view v-if="isHasDiscount(item.packageInfo)" class="u-m-t-16">
|
||
<template v-if="item.status == 'ing' || item.status == 'timeout'">
|
||
<view class="main-color">当前到手</view>
|
||
<view class="font-bold price main-color">
|
||
<text class="u-font-26">¥</text>
|
||
<text class="u-font-40">{{ nowPrice }}</text>
|
||
</view>
|
||
<view class="main-color old-price" v-if="item.packageInfo">¥{{ item.packageInfo.originPrice }}</view>
|
||
</template>
|
||
<template v-else>
|
||
<template v-if="item.finalPrice">
|
||
<view class="font-bold price main-color">
|
||
<text class="u-font-26">¥</text>
|
||
<text class="u-font-40">{{ item.finalPrice }}</text>
|
||
</view>
|
||
<view class="main-color old-price" v-if="item.packageInfo">¥{{ item.packageInfo.originPrice }}</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="font-bold price main-color" v-if="item.packageInfo">
|
||
<text class="u-font-26">¥</text>
|
||
<text class="u-font-40">{{ item.packageInfo.price }}</text>
|
||
</view>
|
||
<view class="main-color old-price" v-if="item.packageInfo">¥{{ item.packageInfo.originPrice }}</view>
|
||
</template>
|
||
</template>
|
||
</view>
|
||
<template v-else>
|
||
<view class="font-bold price main-color" v-if="item.finalPrice">
|
||
<text class="u-font-26">¥</text>
|
||
<text class="u-font-40">{{ item.finalPrice }}</text>
|
||
</view>
|
||
<view class="main-color old-price" v-if="item.packageInfo">¥{{ item.packageInfo.originPrice }}</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-if="item.status">
|
||
<view class="refund" v-if="item.status == 'refunding' && item.isMyself">已申请退款，需等待商家审核</view>
|
||
<view class="refund" v-else-if="returnTime === '00:00:00' && !item.isMyself">当前订单已失效</view>
|
||
<view class="refund" v-else-if="item.status != 'ing' && !item.isMyself">当前订单已失效</view>
|
||
</template>
|
||
|
||
<view class="shop-box">
|
||
<view class="u-flex u-row-center u-flex-col u-col-center" v-if="(item.status == 'wait_verify' || item.status == 'refunding') && item.isMyself">
|
||
<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="/userPackage/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="desc" v-if="isHasDiscount(item.packageInfo)">
|
||
<view class="u-flex u-row-between" v-if="item.isMyself">
|
||
<view class="name">已成功分享{{ item.shareNum || 0 }}人</view>
|
||
|
||
<view
|
||
class="u-flex color-666"
|
||
style="align-items: baseline"
|
||
v-if="item.status == 'ing'"
|
||
@click="
|
||
uni.navigateTo({
|
||
url: '/userPackage/members/members?recordId=' + item.id
|
||
})
|
||
"
|
||
>
|
||
<text>查看全部</text>
|
||
<up-icon name="arrow-right"></up-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="u-flex u-row-between" v-if="!item.isMyself && item.status == 'ing'">
|
||
<view class="name">已成功分享{{ item.shareNum || 0 }}人</view>
|
||
|
||
<view
|
||
class="u-flex color-666"
|
||
style="align-items: baseline"
|
||
v-if="item.status == 'ing'"
|
||
@click="
|
||
uni.navigateTo({
|
||
url: '/userPackage/members/members?recordId=' + item.id
|
||
})
|
||
"
|
||
>
|
||
<text>查看全部</text>
|
||
<up-icon name="arrow-right"></up-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<template v-if="item.status == 'ing' && item.isMyself">
|
||
<view class="u-m-t-32 progress-box">
|
||
<view class="progress" :style="{ width: progressPercent + '%' }"></view>
|
||
</view>
|
||
<view class="u-m-t-12 u-flex u-row-between">
|
||
<text class="color-666">已分享{{ item.shareNum || 0 }}人</text>
|
||
<view class="share-text" v-if="maxNum * 1 && minPrice * 1">
|
||
<text v-if="progressPercent < 100">分享{{ maxNum }}人，</text>
|
||
<text class="font-bold u-font-32">{{ minPrice }}元</text>
|
||
<text>即可购买</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="u-flex u-row-between u-m-t-24">
|
||
<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" v-if="item.packageInfo">
|
||
<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.packageInfo.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 v-if="item.packageInfo">分享期限（小时）：{{ item.packageInfo.expireHours }}</view>
|
||
<view class="u-m-t-10">规定期限内的助力才会被计入</view>
|
||
<view class="u-m-t-40">如何才是分享成功？被分享人只需要点击《助力》，提示助力成功后即可</view>
|
||
</view>
|
||
</template>
|
||
</template>
|
||
|
||
<template v-if="!item.isMyself">
|
||
<view class="u-flex u-row-between u-m-t-24">
|
||
<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" v-if="item.packageInfo">
|
||
<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.packageInfo.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 v-if="item.packageInfo">分享期限（小时）：{{ item.packageInfo.expireHours }}</view>
|
||
<view class="u-m-t-10">规定期限内的助力才会被计入</view>
|
||
<view class="u-m-t-40">如何才是分享成功？被分享人只需要点击《助力》，提示助力成功后即可</view>
|
||
</view>
|
||
</template>
|
||
</template>
|
||
</view>
|
||
|
||
<template v-if="isShowOrder(item)">
|
||
<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" v-if="item.finalPrice">
|
||
<view class="color-666">实付金额</view>
|
||
<view class="">¥{{ item.finalPrice }}</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.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 && item.id">
|
||
<template v-if="item.isMyself">
|
||
<template v-if="item.status == 'ing'">
|
||
<view class="btn" @click="cancel(item)">取消活动</view>
|
||
<!-- <view class="btn" @click="fastBuy(item)">立即购买</view> -->
|
||
<view class="btn" @click="payExchange(item)">立即购买</view>
|
||
|
||
<button class="btn main" open-type="share" @click.stop="share(item)">分享</button>
|
||
</template>
|
||
|
||
<template v-if="item.status == 'timeout'">
|
||
<view class="btn" @click="cancel(item)">取消活动</view>
|
||
<view class="btn" @click="payExchange(item)">立即购买</view>
|
||
</template>
|
||
|
||
<template v-if="item.status == 'wait_verify'">
|
||
<view class="btn" @click.stop="refund(item)">申请退款</view>
|
||
</template>
|
||
<template v-if="item.status == 'refunding'">
|
||
<button class="btn main" @click.stop="cancelRefund(item)">取消退款</button>
|
||
</template>
|
||
</template>
|
||
|
||
<template v-else-if="item.status == 'ing' && returnTime != '00:00:00' && item.canHelp">
|
||
<button class="btn main" @click.stop="help(item)">立即助力</button>
|
||
</template>
|
||
|
||
<view class="btn" v-if="!item.isMyself && !item.canHelp && item.status == 'ing'">已经助力过了</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" v-if="item && item.packageInfo">
|
||
<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.packageInfo">
|
||
{{ item.packageInfo.packageName }}
|
||
</view>
|
||
|
||
<view class="u-m-t-12 color-666 u-line-2">{{ item.packageInfo.wareDetail }}</view>
|
||
</view>
|
||
<view>
|
||
<view class="price">¥{{ nowPrice }}</view>
|
||
<view class="old-price">¥{{ item.packageInfo.originPrice }}</view>
|
||
<view class="limitBuyNum" v-if="item.packageInfo.limitBuyNum">限购{{ item.packageInfo.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 { shareMixin, handleMixinOnLoad, returnQuery } from '@/utils/share.js';
|
||
import { Storelogin } from '@/stores/user.js';
|
||
const storelogin = Storelogin();
|
||
import { back } from '@/utils/uniapp.js';
|
||
import statusVue from '@/userPackage/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 item = reactive({
|
||
status: ''
|
||
});
|
||
|
||
// 判断是否有阶梯优惠
|
||
function isHasDiscount(item) {
|
||
if (!item) {
|
||
return false;
|
||
}
|
||
return item.tieredDiscount && item.tieredDiscount.length;
|
||
}
|
||
|
||
const canShowOrderStatus = ['wait_verify', 'finish', 'refunding', 'refund'];
|
||
|
||
function isShowOrder(item) {
|
||
if (!item.status) {
|
||
return false;
|
||
}
|
||
return item.isMyself && canShowOrderStatus.includes(item.status);
|
||
}
|
||
|
||
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 showOrder = ref(true);
|
||
const showDesc = ref(true);
|
||
|
||
const number = ref(1);
|
||
|
||
import { BigNumber } from 'bignumber.js';
|
||
|
||
function toDetail(item) {
|
||
uni.navigateTo({
|
||
url: '/userPackage/goodsDetail/goodsDetail?id=' + item.id + '&shopId=' + item.shopId
|
||
});
|
||
}
|
||
|
||
function changeNumber(step) {
|
||
if (step === '-') {
|
||
if (number.value == 1) {
|
||
return;
|
||
}
|
||
number.value--;
|
||
return;
|
||
}
|
||
if (step === '+') {
|
||
if (item.packageInfo.limitBuyNum == -10086) {
|
||
number.value++;
|
||
return;
|
||
}
|
||
if (number.value >= item.packageInfo.limitBuyNum) {
|
||
return uni.showToast({
|
||
title: '最多可购买' + item.packageInfo.limitBuyNum + '份',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
number.value++;
|
||
return;
|
||
}
|
||
}
|
||
|
||
function fastBuy() {
|
||
popupData.show = true;
|
||
}
|
||
|
||
function help(item) {
|
||
Api.help({
|
||
orderId: item.id
|
||
}).then((res) => {
|
||
if (res) {
|
||
uni.showToast({
|
||
title: '助力成功'
|
||
});
|
||
setTimeout(() => {
|
||
getDetail();
|
||
}, 1000);
|
||
}
|
||
});
|
||
}
|
||
|
||
async function payExchange() {
|
||
uni.setStorageSync('group_buying_order', {
|
||
...item,
|
||
...item.packageInfo,
|
||
shopAddress: item.shopAddress,
|
||
shopName: item.shopName,
|
||
number: number.value,
|
||
price: nowPrice.value,
|
||
paramId: item.id
|
||
});
|
||
uni.navigateTo({
|
||
url: '/userPackage/confirm-order/confirm-order'
|
||
});
|
||
}
|
||
|
||
const canRefundStatus = ['待成团', '待核销'];
|
||
|
||
function canRefund(item) {
|
||
if (canRefundStatus.includes(item.status)) {
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
const topStyle = {
|
||
backgroundImage: 'url(' + imgs.bg + ')'
|
||
};
|
||
|
||
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);
|
||
if (query.shopId) {
|
||
uni.cache.set('shopId', query.shopId);
|
||
}
|
||
}
|
||
|
||
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 getDetail() {
|
||
Api.orderDetail(query).then((res) => {
|
||
if (!res) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '记录不存在',
|
||
showCancel: false,
|
||
success() {
|
||
uni.redirectTo({
|
||
url: '/userPackage/index/index'
|
||
});
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
res.packageInfo = res.packageInfo;
|
||
res.goodsImg = res.packageInfo.images[0];
|
||
Object.assign(item, res);
|
||
console.log('item', item);
|
||
uni.cache.set('shopId', item.shopId);
|
||
});
|
||
}
|
||
|
||
onShareAppMessage(async () => {
|
||
let query = await returnQuery();
|
||
const options = {
|
||
title: item.packageInfo.packageName,
|
||
imageUrl: item.goodsImg,
|
||
path: '/userPackage/order/detail' + '?' + query,
|
||
query
|
||
};
|
||
console.log('onShareAppMessage===', options);
|
||
return options;
|
||
});
|
||
|
||
onLoad(async (opt) => {
|
||
init(opt);
|
||
await handleMixinOnLoad(opt);
|
||
});
|
||
|
||
onShow(async () => {
|
||
await storelogin.actionslogin();
|
||
getDetail();
|
||
});
|
||
|
||
let timer = null;
|
||
let nowTime = ref(Date.now());
|
||
timer = setInterval(() => {
|
||
nowTime.value = Date.now();
|
||
}, 1000);
|
||
|
||
const returnTime = computed(() => {
|
||
nowTime.value;
|
||
return getRemainingHMS(item, 'expireTime');
|
||
});
|
||
|
||
function returnNum(index) {
|
||
return returnTime.value.split(':')[index];
|
||
}
|
||
|
||
function cancel(item) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '是否取消活动？',
|
||
showCancel: true,
|
||
success(res) {
|
||
if (res.confirm) {
|
||
Api.cancel({
|
||
orderId: item.id
|
||
}).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 = `orderId=${shareItem.id}&shopId=${shareItem.shopId}`;
|
||
// return wxShare({
|
||
// title: shareItem.packageInfo.packageName,
|
||
// imageUrl: shareItem.goodsImg,
|
||
// path: '/userPackage/order/detail' + '?' + query,
|
||
// query
|
||
// });
|
||
// });
|
||
|
||
const title = computed(() => {
|
||
if (!item.isMyself) {
|
||
return '助力好友';
|
||
}
|
||
return '订单详情';
|
||
});
|
||
|
||
const nowStep = computed(() => {
|
||
let nowStepItem = null;
|
||
if (!item.packageInfo) {
|
||
return nowStepItem;
|
||
}
|
||
if (!item.packageInfo.tieredDiscount.length) {
|
||
return nowStepItem;
|
||
}
|
||
for (let i in item.packageInfo.tieredDiscount) {
|
||
const nowItem = item.packageInfo.tieredDiscount[i];
|
||
const nextItem = item.packageInfo.tieredDiscount[i + 1];
|
||
if (!nextItem) {
|
||
if (item.shareNum >= nowItem.peopleNum) {
|
||
nowStepItem = nowItem;
|
||
}
|
||
} else {
|
||
if (item.shareNum >= nowItem.peopleNum && item.shareNum < nextItem.peopleNum) {
|
||
nowStepItem = nowItem;
|
||
}
|
||
}
|
||
}
|
||
return nowStepItem;
|
||
});
|
||
|
||
const progressPercent = computed(() => {
|
||
if (!item.packageInfo) {
|
||
return 0;
|
||
}
|
||
if (!item.packageInfo.tieredDiscount.length) {
|
||
return 0;
|
||
}
|
||
if (!nowStep.value) {
|
||
return 0;
|
||
}
|
||
const index = item.packageInfo.tieredDiscount.findIndex((v) => v.peopleNum == nowStep.value.peopleNum);
|
||
if (index != -1) {
|
||
const percent = ((index + 1) / item.packageInfo.tieredDiscount.length) * 100;
|
||
return percent >= 100 ? 100 : percent;
|
||
} else {
|
||
return 0;
|
||
}
|
||
});
|
||
const nowPrice = computed(() => {
|
||
if (!item.packageInfo) {
|
||
return 0;
|
||
}
|
||
if (!item.packageInfo.tieredDiscount.length) {
|
||
return 0;
|
||
}
|
||
return nowStep.value ? nowStep.value.price : item.packageInfo.price;
|
||
});
|
||
|
||
const totalPrice = computed(() => {
|
||
if (!item.packageInfo || !item.packageInfo.price) {
|
||
return 0;
|
||
}
|
||
return BigNumber(number.value).times(nowPrice.value).toNumber();
|
||
});
|
||
|
||
const maxNum = computed(() => {
|
||
if (!item.packageInfo || item.packageInfo.tieredDiscount <= 0) {
|
||
return 0;
|
||
}
|
||
return item.packageInfo.tieredDiscount[item.packageInfo.tieredDiscount.length - 1].peopleNum;
|
||
});
|
||
const minPrice = computed(() => {
|
||
if (!item.packageInfo || item.packageInfo.tieredDiscount <= 0) {
|
||
return 0;
|
||
}
|
||
return item.packageInfo.tieredDiscount[item.packageInfo.tieredDiscount.length - 1].price;
|
||
});
|
||
</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;
|
||
|
||
.main-color {
|
||
color: #eb532a;
|
||
}
|
||
|
||
.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: #999;
|
||
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: 28rpx;
|
||
right: 28rpx;
|
||
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 0.3s;
|
||
}
|
||
|
||
.pin-btn {
|
||
padding: 22rpx 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;
|
||
text-align: center;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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);
|
||
}
|
||
}
|
||
|
||
.progress-box {
|
||
background: rgba(255, 209, 191, 0.52);
|
||
$height: 10rpx;
|
||
height: $height;
|
||
border-radius: $height;
|
||
overflow: hidden;
|
||
|
||
.progress {
|
||
height: $height;
|
||
background: #eb532a;
|
||
transition: all 0.3s;
|
||
border-radius: $height;
|
||
}
|
||
}
|
||
|
||
.img-box {
|
||
position: relative;
|
||
|
||
.tag {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
padding: 8rpx 18rpx;
|
||
border-radius: 16rpx 0;
|
||
background: #4c2828;
|
||
color: #faeac6;
|
||
font-size: 700;
|
||
}
|
||
}
|
||
|
||
.share-text {
|
||
color: #ed5a2e;
|
||
}
|
||
</style>
|