1124 lines
26 KiB
Vue
1124 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 {
|
||
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)
|
||
})
|
||
}
|
||
onLoad(init)
|
||
|
||
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:0;
|
||
}
|
||
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 .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> |