mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 10:57:25 +08:00
refactor: 重构多个组件以支持 Vue 3 语法和功能
- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能 - 优化状态管理和事件处理逻辑，简化代码结构 - 更新样式和布局以适应新组件结构 - 添加新功能和修复已知问题，提升用户体验
This commit is contained in:
Yer11214
@@ -1,302 +1,262 @@
|
||||
<template>
|
||||
<view class="coupon-center">
|
||||
<div class="swiper-box">
|
||||
<div class="swiper-item">
|
||||
<div class="scroll-v" enableBackToTop="true" scroll-y>
|
||||
<u-empty mode="coupon" style='margin-top: 20%;' text="没有优惠券了" v-if="whetherEmpty"></u-empty>
|
||||
<view v-else class="coupon-item" v-for="(item, index) in couponList" :key="index">
|
||||
<view class="left">
|
||||
<view class="wave-line">
|
||||
<view class="wave" v-for="(item, index) in 12" :key="index"></view>
|
||||
</view>
|
||||
<view class="message">
|
||||
<view>
|
||||
<!--判断当前优惠券类型 couponType PRICE || DISCOUNT -->
|
||||
<span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</span>
|
||||
<span v-else>{{ item.price }}元</span>
|
||||
</view>
|
||||
<view>满{{unitPrice(item.consumeThreshold) }}元可用</view>
|
||||
</view>
|
||||
<view class="circle circle-top"></view>
|
||||
<view class="circle circle-bottom"></view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view>
|
||||
<!-- 根据scopeType 判断是否是 平台、品类或店铺 -->
|
||||
<view class="coupon-title wes-3" v-if="item.scopeType">
|
||||
<span v-if="item.scopeType == 'ALL' && item.storeId == '0'">全平台</span>
|
||||
<span v-if="item.scopeType == 'PORTION_GOODS_CATEGORY'">仅限品类</span>
|
||||
<view v-else>{{ item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.endTime">有效期至：{{ item.endTime.split(" ")[0] }}</view>
|
||||
</view>
|
||||
<view class="receive" @click="receive(item)">
|
||||
<text>点击</text><br />
|
||||
<text>领取</text>
|
||||
</view>
|
||||
<view class="bg-quan"> 券 </view>
|
||||
</view>
|
||||
<view class="coupon-list">
|
||||
<u-empty mode="coupon" style='margin-top: 20%;' text="没有优惠券了" v-if="whetherEmpty"></u-empty>
|
||||
<view v-else class="coupon-card" v-for="(item, index) in couponList" :key="index">
|
||||
<view class="coupon-card-left">
|
||||
<text class="coupon-price-symbol">¥</text>
|
||||
<text class="coupon-price-value">{{ item.couponType == 'DISCOUNT' ? item.couponDiscount + '折' : unitPrice(item.price) }}</text>
|
||||
</view>
|
||||
<view class="coupon-divider"></view>
|
||||
<view class="coupon-card-right">
|
||||
<view class="coupon-info">
|
||||
<text class="coupon-card-name">{{ item.storeName == 'platform' ? '全平台' : item.storeName + '店铺' }}使用</text>
|
||||
<text class="coupon-card-desc">满{{unitPrice(item.consumeThreshold) }}元可用</text>
|
||||
<text class="coupon-card-time" v-if="item.endTime">有效期至：{{ item.endTime.split(" ")[0] }}</text>
|
||||
</view>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<view class="coupon-claim-btn" @click="receive(item)">
|
||||
领取
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
receiveCoupons
|
||||
} from "@/api/members.js";
|
||||
import {
|
||||
getAllCoupons
|
||||
} from "@/api/promotions.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loadStatus: "more", //下拉状态
|
||||
whetherEmpty: false, //是否为空
|
||||
couponList: [], // 优惠券列表
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
storeId: "", //店铺 id,
|
||||
couponData: ""
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.storeId = option.storeId;
|
||||
this.getCoupon();
|
||||
},
|
||||
onReachBottom() {
|
||||
<script setup lang="ts">
|
||||
import { receiveCoupons } from '@/api/members.js'
|
||||
import { getAllCoupons } from '@/api/promotions.js'
|
||||
import { useStore } from '@/store'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
import {
|
||||
onLoad,
|
||||
onNavigationBarButtonTap,
|
||||
onPullDownRefresh,
|
||||
onReachBottom,
|
||||
} from '@dcloudio/uni-app'
|
||||
import { getCurrentInstance, ref } from 'vue'
|
||||
|
||||
this.loadMore()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
//下拉刷新
|
||||
this.params.pageNumber = 1;
|
||||
this.couponList = [];
|
||||
this.getCoupon();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取当前优惠券
|
||||
*/
|
||||
getCoupon() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
let submitData = {
|
||||
...this.params
|
||||
};
|
||||
// 判断当前是否有店铺
|
||||
this.storeId ? (submitData = {
|
||||
...this.params,
|
||||
storeId: this.storeId
|
||||
}) : "",
|
||||
getAllCoupons(submitData)
|
||||
.then((res) => {
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
uni.stopPullDownRefresh();
|
||||
if (res.data.code == 200) {
|
||||
// 如果请求成功，展示数据并进行展示
|
||||
this.couponData = res.data.result
|
||||
if (this.couponData.total == 0) {
|
||||
// 当本次请求数据为空展示空信息
|
||||
this.whetherEmpty = true;
|
||||
} else {
|
||||
this.couponList.push(...this.couponData.records);
|
||||
this.loadStatus = "noMore";
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 领取优惠券
|
||||
*/
|
||||
receive(val) {
|
||||
this.$u.throttle(()=>{
|
||||
this.fetchCoupon(val)
|
||||
}, 1500)
|
||||
|
||||
},
|
||||
const store = useStore()
|
||||
const { proxy } = getCurrentInstance()!
|
||||
|
||||
fetchCoupon(val){
|
||||
receiveCoupons(val.id).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
uni.showToast({
|
||||
title: "领取成功",
|
||||
icon: "none",
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
const loadStatus = ref('more')
|
||||
const whetherEmpty = ref(false)
|
||||
const couponList = ref<any[]>([])
|
||||
const params = ref({
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const storeId = ref('')
|
||||
const couponData = ref<any>(null)
|
||||
|
||||
/**
|
||||
* 加载更多
|
||||
*/
|
||||
loadMore() {
|
||||
if (this.couponData.total > this.params.pageNumber * this.params.pageSize) {
|
||||
this.params.pageNumber++;
|
||||
this.getCoupon();
|
||||
}
|
||||
},
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/coupon/couponIntro",
|
||||
});
|
||||
},
|
||||
};
|
||||
onLoad((option) => {
|
||||
storeId.value = option.storeId || ''
|
||||
getCoupon()
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
loadMore()
|
||||
})
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
params.value.pageNumber = 1
|
||||
couponList.value = []
|
||||
getCoupon()
|
||||
})
|
||||
|
||||
onNavigationBarButtonTap(() => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/cart/coupon/couponIntro',
|
||||
})
|
||||
})
|
||||
|
||||
function hideLoadingIfNeeded() {
|
||||
if (store.state.isShowToast) uni.hideLoading()
|
||||
}
|
||||
|
||||
function getCoupon() {
|
||||
uni.showLoading({ title: '加载中' })
|
||||
const submitData = storeId.value
|
||||
? { ...params.value, storeId: storeId.value }
|
||||
: { ...params.value }
|
||||
|
||||
getAllCoupons(submitData)
|
||||
.then((res) => {
|
||||
hideLoadingIfNeeded()
|
||||
uni.stopPullDownRefresh()
|
||||
if (res.data.code == 200) {
|
||||
couponData.value = res.data.result
|
||||
if (couponData.value.total == 0) {
|
||||
whetherEmpty.value = true
|
||||
} else {
|
||||
couponList.value.push(...couponData.value.records)
|
||||
loadStatus.value = 'noMore'
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
hideLoadingIfNeeded()
|
||||
})
|
||||
}
|
||||
|
||||
function receive(val: any) {
|
||||
proxy.$u.throttle(() => {
|
||||
fetchCoupon(val)
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
function fetchCoupon(val: any) {
|
||||
receiveCoupons(val.id).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
uni.showToast({ title: '领取成功', icon: 'none' })
|
||||
} else {
|
||||
uni.showToast({ title: res.data.message, icon: 'none' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
if (couponData.value?.total > params.value.pageNumber * params.value.pageSize) {
|
||||
params.value.pageNumber++
|
||||
getCoupon()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coupon-center {
|
||||
height: 100%;
|
||||
.coupon-center {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
.coupon-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 220rpx;
|
||||
margin: 20rpx;
|
||||
.coupon-list {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.left {
|
||||
height: 100%;
|
||||
width: 260rpx;
|
||||
background-color: $light-color;
|
||||
position: relative;
|
||||
.coupon-card {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
border: 1rpx solid #f0f1f5;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
.message {
|
||||
color: $font-color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 40rpx;
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
view:nth-child(1) {
|
||||
font-weight: bold;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: #f7f8fa;
|
||||
border-radius: 50%;
|
||||
left: 204rpx;
|
||||
z-index: 2;
|
||||
box-shadow: inset 0 0 0 1rpx #eceef2;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
font-size: $font-sm;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
top: -16rpx;
|
||||
}
|
||||
|
||||
.wave-line {
|
||||
height: 220rpx;
|
||||
width: 8rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $light-color;
|
||||
overflow: hidden;
|
||||
&::after {
|
||||
bottom: -16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.wave {
|
||||
width: 8rpx;
|
||||
height: 16rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0 16rpx 16rpx 0;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
.coupon-card-left {
|
||||
width: 220rpx;
|
||||
min-height: 180rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: #ff3b30;
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #fff5f5 0%, #ffecec 100%);
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: $bg-color;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 111;
|
||||
}
|
||||
.coupon-price-symbol {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.circle-top {
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
}
|
||||
.coupon-price-value {
|
||||
font-size: 56rpx;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: -1rpx;
|
||||
}
|
||||
|
||||
.circle-bottom {
|
||||
bottom: -20rpx;
|
||||
right: -20rpx;
|
||||
}
|
||||
}
|
||||
.coupon-divider {
|
||||
position: absolute;
|
||||
left: 220rpx;
|
||||
top: 24rpx;
|
||||
bottom: 24rpx;
|
||||
width: 0;
|
||||
border-left: 2rpx dashed #eceef2;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 450rpx;
|
||||
font-size: $font-sm;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.coupon-card-right {
|
||||
flex: 1;
|
||||
padding: 32rpx 32rpx 32rpx 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
>view:nth-child(1) {
|
||||
color: #666666;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
.coupon-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
>view:nth-child(1) {
|
||||
color: #ff6262;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
.coupon-card-name {
|
||||
font-size: 30rpx;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.receive {
|
||||
color: #ffffff;
|
||||
background-color: $main-color;
|
||||
border-radius: 50%;
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
text-align: center;
|
||||
margin-right: 30rpx;
|
||||
vertical-align: middle;
|
||||
padding-top: 8rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.coupon-card-desc {
|
||||
font-size: 24rpx;
|
||||
color: #8a8f99;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bg-quan {
|
||||
width: 244rpx;
|
||||
height: 244rpx;
|
||||
border: 6rpx solid $main-color;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
color: $main-color;
|
||||
text-align: center;
|
||||
padding-top: 30rpx;
|
||||
font-size: 130rpx;
|
||||
position: absolute;
|
||||
right: -54rpx;
|
||||
bottom: -60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-card-time {
|
||||
font-size: 22rpx;
|
||||
color: #b0b3bf;
|
||||
}
|
||||
|
||||
.coupon-title {
|
||||
width: 260rpx;
|
||||
.coupon-claim-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #ff6b35, #ff4b2b);
|
||||
box-shadow: 0 8rpx 16rpx rgba(255, 75, 43, 0.25);
|
||||
|
||||
}
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,52 +2,46 @@
|
||||
<view class="content">
|
||||
<view class="body">
|
||||
<view class="top-view">
|
||||
<view class="title">{{coupon.title}}</view>
|
||||
<view class="price" v-if="coupon.couponType =='PRICE'"><text>￥</text>{{unitPrice(coupon.price)}}</view>
|
||||
<view class="price" v-if="coupon.couponType =='DISCOUNT'">{{coupon.discount}}折</view>
|
||||
<view class="text">满{{coupon.consumeThreshold}}元可用</view>
|
||||
<view class="bg-quan">
|
||||
券
|
||||
</view>
|
||||
<view class="jiao-1" :class="{'used-color':coupon.used_status!=0}">
|
||||
<text class="text-1">{{coupon.used_status == 0?'新到':coupon.used_status_text}}</text>
|
||||
<view class="title">{{ coupon.title }}</view>
|
||||
<view class="price" v-if="coupon.couponType == 'PRICE'"><text>￥</text>{{ unitPrice(coupon.price) }}</view>
|
||||
<view class="price" v-if="coupon.couponType == 'DISCOUNT'">{{ coupon.discount }}折</view>
|
||||
<view class="text">满{{ coupon.consumeThreshold }}元可用</view>
|
||||
<view class="bg-quan">券</view>
|
||||
<view class="jiao-1" :class="{ 'used-color': coupon.used_status != 0 }">
|
||||
<text class="text-1">{{ coupon.used_status == 0 ? '新到' : coupon.used_status_text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-view">
|
||||
<view class="text">• 使用范围：{{
|
||||
coupon.scopeType == 'ALL' && coupon.storeId == '0'
|
||||
? "全平台"
|
||||
: coupon.scopeType == "PORTION_GOODS"
|
||||
? "部分商品"
|
||||
: coupon.scopeType == "PORTION_GOODS_CATEGORY"
|
||||
? "部分分类商品"
|
||||
: coupon.storeName == 'platform' ? '全平台' :coupon.storeName+''
|
||||
}}使用</view>
|
||||
<view class="text">• 有效期至：{{coupon.endTime}}</view>
|
||||
|
||||
coupon.scopeType == 'ALL' && coupon.storeId == '0'
|
||||
? '全平台'
|
||||
: coupon.scopeType == 'PORTION_GOODS'
|
||||
? '部分商品'
|
||||
: coupon.scopeType == 'PORTION_GOODS_CATEGORY'
|
||||
? '部分分类商品'
|
||||
: coupon.storeName == 'platform' ? '全平台' : coupon.storeName + ''
|
||||
}}使用</view>
|
||||
<view class="text">• 有效期至：{{ coupon.endTime }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
coupon: {}, //优惠券数据
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.coupon = JSON.parse(decodeURIComponent(option.item));
|
||||
},
|
||||
};
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
|
||||
const coupon = ref<Record<string, any>>({})
|
||||
|
||||
onLoad((option) => {
|
||||
coupon.value = JSON.parse(decodeURIComponent(option.item))
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page,
|
||||
.content {
|
||||
// background: $main-color;
|
||||
height: 100%;
|
||||
}
|
||||
.body {
|
||||
|
||||
@@ -59,81 +59,59 @@
|
||||
</view>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useCoupon } from "@/api/trade.js";
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import { useCoupon } from '@/api/trade.js'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lightColor: this.$lightColor,
|
||||
current: 0,
|
||||
list: [
|
||||
{
|
||||
name: "可用优惠券",
|
||||
},
|
||||
{
|
||||
name: "不可用优惠券",
|
||||
},
|
||||
],
|
||||
couponsList: [], //优惠券集合
|
||||
params: {
|
||||
//传参
|
||||
memberCouponStatus: "NEW", //优惠券状态
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
scopeId: "", //商品skuid
|
||||
storeId: "", //店铺id
|
||||
totalPrice: "", //价格
|
||||
},
|
||||
routerVal: "", //上级传参
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.routerVal = options;
|
||||
},
|
||||
watch: {
|
||||
current(val) {
|
||||
console.log(this.$store.state.cantUseCoupons);
|
||||
val == 0
|
||||
? (this.couponsList = this.$store.state.canUseCoupons)
|
||||
: (this.couponsList = this.$store.state.cantUseCoupons);
|
||||
},
|
||||
},
|
||||
const store = useStore()
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
console.log(this.routerVal);
|
||||
},
|
||||
const lightColor = computed(() => store.getters.lightColor)
|
||||
const current = ref(0)
|
||||
const list = [
|
||||
{ name: '可用优惠券' },
|
||||
{ name: '不可用优惠券' },
|
||||
]
|
||||
const couponsList = ref<any[]>([])
|
||||
const routerVal = ref<Record<string, any>>({})
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 从vuex中拿取优惠券信息
|
||||
*/
|
||||
init() {
|
||||
this.couponsList = this.$store.state.canUseCoupons;
|
||||
},
|
||||
/**
|
||||
* 领取优惠券
|
||||
*/
|
||||
clickWay(coupon) {
|
||||
useCoupon({
|
||||
memberCouponId: coupon.id,
|
||||
used: !this.routerVal.selectedCoupon.includes(coupon.id),
|
||||
way: this.routerVal.way,
|
||||
}).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
onLoad((options) => {
|
||||
routerVal.value = options || {}
|
||||
})
|
||||
|
||||
watch(current, (val) => {
|
||||
couponsList.value = val == 0
|
||||
? store.state.canUseCoupons
|
||||
: store.state.cantUseCoupons
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
function init() {
|
||||
couponsList.value = store.state.canUseCoupons
|
||||
}
|
||||
|
||||
function clickWay(coupon: any) {
|
||||
useCoupon({
|
||||
memberCouponId: coupon.id,
|
||||
used: !routerVal.value.selectedCoupon.includes(coupon.id),
|
||||
way: routerVal.value.way,
|
||||
}).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
duration: 2000,
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.desc {
|
||||
|
||||
@@ -1,471 +1,393 @@
|
||||
<template>
|
||||
<view class="b-content">
|
||||
<view class="navbar">
|
||||
<!-- 循环出头部tab栏 -->
|
||||
<view
|
||||
v-for="(item, index) in navList"
|
||||
:key="index"
|
||||
class="nav-item"
|
||||
@click="handleTabClick(index)"
|
||||
><text :class="{ current: tabCurrentIndex === index }">{{
|
||||
item.text
|
||||
}}</text></view
|
||||
>
|
||||
</view>
|
||||
<swiper
|
||||
:current="tabCurrentIndex"
|
||||
class="swiper-box"
|
||||
duration="300"
|
||||
@change="changeTab"
|
||||
>
|
||||
<swiper-item
|
||||
class="tab-content"
|
||||
v-for="(navItem, navIndex) in navList"
|
||||
:key="navIndex"
|
||||
>
|
||||
<scroll-view
|
||||
class="list-scroll-content"
|
||||
scroll-y
|
||||
@scrolltolower="loadData"
|
||||
>
|
||||
<!-- 空白页 -->
|
||||
<u-empty
|
||||
mode="coupon"
|
||||
text="暂无优惠券了"
|
||||
v-if="navItem.whetherEmpty"
|
||||
></u-empty>
|
||||
|
||||
<!-- 数据 -->
|
||||
<view
|
||||
class="coupon-item"
|
||||
:class="{ 'coupon-used': navIndex != 0 }"
|
||||
v-for="(coupon, index) in navItem.dataList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="left">
|
||||
<view class="wave-line">
|
||||
<view
|
||||
class="wave"
|
||||
v-for="(item, index) in 12"
|
||||
:key="index"
|
||||
></view>
|
||||
</view>
|
||||
<view class="message">
|
||||
<view class="price" v-if="coupon.couponType == 'DISCOUNT'"
|
||||
>{{ coupon.discount }}折</view
|
||||
>
|
||||
<view class="price" v-else>{{ coupon.price }}元</view>
|
||||
<view class="sub-price"
|
||||
>满{{unitPrice(coupon.consumeThreshold) }}可用</view
|
||||
>
|
||||
</view>
|
||||
<view class="circle circle-top"></view>
|
||||
<view class="circle circle-bottom"></view>
|
||||
</view>
|
||||
<view class="right" v-if="coupon">
|
||||
<view class="content">
|
||||
<view class="title-1">{{ coupon.title }}</view>
|
||||
<view class="title-2"
|
||||
>使用范围：{{
|
||||
coupon.scopeType == "ALL" && coupon.storeId == "0"
|
||||
? "全平台"
|
||||
: coupon.scopeType == "PORTION_GOODS"
|
||||
? "部分商品"
|
||||
: coupon.scopeType == "PORTION_GOODS_CATEGORY"
|
||||
? "部分分类商品"
|
||||
: coupon.storeName == "platform"
|
||||
? "全平台"
|
||||
: coupon.storeName + ""
|
||||
}}使用</view
|
||||
>
|
||||
<view v-if="coupon.endTime">{{ coupon.endTime }}</view>
|
||||
<view @click="couponDetail(coupon)"
|
||||
>详细说明
|
||||
<u-icon
|
||||
style="float: right; margin-top: 10rpx"
|
||||
name="arrow-right"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jiao-1" v-if="navIndex == 0">
|
||||
<text class="text-1">新到</text>
|
||||
<text class="text-2" v-if="coupon.used_status == 1"
|
||||
>将过期</text
|
||||
>
|
||||
</view>
|
||||
<image
|
||||
class="no-icon"
|
||||
v-if="navIndex == 1"
|
||||
src="@/static/img/used.png"
|
||||
></image>
|
||||
<image
|
||||
class="no-icon"
|
||||
v-if="navIndex == 2"
|
||||
src="@/static/img/overdue.png"
|
||||
></image>
|
||||
<view
|
||||
class="receive"
|
||||
v-if="navIndex == 0"
|
||||
@click="useItNow(coupon)"
|
||||
>
|
||||
<text>立即</text><br />
|
||||
<text>使用</text>
|
||||
</view>
|
||||
<view class="bg-quan"> 券 </view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more :status="navItem.loadStatus"></uni-load-more>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMemberCoupons } from "@/api/members.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabCurrentIndex: 0, //tab栏下标默认为0 未使用
|
||||
navList: [
|
||||
//每个tab存储的信息
|
||||
{
|
||||
text: "未使用",
|
||||
loadStatus: "more",
|
||||
dataList: [],
|
||||
params: {
|
||||
memberCouponStatus: "NEW",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 1,
|
||||
},
|
||||
whetherEmpty: false,
|
||||
},
|
||||
{
|
||||
text: "已使用",
|
||||
loadStatus: "more",
|
||||
dataList: [],
|
||||
params: {
|
||||
memberCouponStatus: "USED",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 2,
|
||||
},
|
||||
whetherEmpty: false,
|
||||
},
|
||||
{
|
||||
text: "已过期",
|
||||
loadStatus: "more",
|
||||
dataList: [],
|
||||
params: {
|
||||
memberCouponStatus: "EXPIRE",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 3,
|
||||
},
|
||||
whetherEmpty: false,
|
||||
},
|
||||
],
|
||||
couponList: [], //优惠券列表
|
||||
};
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.navList[this.tabCurrentIndex].params.pageNumber = 1;
|
||||
this.navList[this.tabCurrentIndex].dataList = [];
|
||||
this.getData();
|
||||
},
|
||||
|
||||
watch: {
|
||||
/**
|
||||
* 监听切换顶部tab栏实现刷新数据
|
||||
*/
|
||||
tabCurrentIndex(val) {
|
||||
if (this.navList[val].dataList.length == 0) this.getData();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 顶部tab点击
|
||||
*/
|
||||
handleTabClick(index) {
|
||||
this.tabCurrentIndex = index;
|
||||
},
|
||||
|
||||
/**
|
||||
* 读取优惠券
|
||||
*/
|
||||
getData() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
let index = this.tabCurrentIndex;
|
||||
getMemberCoupons(this.navList[index].params).then((res) => {
|
||||
uni.stopPullDownRefresh();
|
||||
if (res.data.success) {
|
||||
let data = res.data.result.records;
|
||||
if (data.length == 0) {
|
||||
if (res.data.pageNumber == 1) {
|
||||
this.navList[index].whetherEmpty = true;
|
||||
} else {
|
||||
this.navList[index].loadStatus = "noMore";
|
||||
}
|
||||
} else if (data.length < 10) {
|
||||
this.navList[index].loadStatus = "noMore";
|
||||
this.navList[index].dataList.push(...data);
|
||||
} else {
|
||||
this.navList[index].dataList.push(...data);
|
||||
}
|
||||
}
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换tab
|
||||
*/
|
||||
changeTab(e) {
|
||||
this.tabCurrentIndex = e.target.current;
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载数据
|
||||
*/
|
||||
loadData() {
|
||||
let index = this.tabCurrentIndex;
|
||||
if (this.navList[index].loadStatus != "noMore") {
|
||||
this.navList[index].params.pageNumber++;
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 立即使用优惠券
|
||||
*/
|
||||
useItNow(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/navigation/search/searchPage?promotionsId=${item.couponId}&promotionType=COUPON`,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 优惠券详情
|
||||
*/
|
||||
couponDetail(item) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/cart/coupon/couponDetail?item=" +
|
||||
encodeURIComponent(JSON.stringify(item)),
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
$item-color: #fff;
|
||||
|
||||
.b-content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.list-scroll-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.coupon-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 220rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
.left {
|
||||
height: 100%;
|
||||
width: 260rpx;
|
||||
background-color: $light-color;
|
||||
position: relative;
|
||||
|
||||
.message {
|
||||
color: $font-color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 40rpx;
|
||||
|
||||
view:nth-child(1) {
|
||||
font-weight: bold;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
font-size: $font-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.wave-line {
|
||||
height: 220rpx;
|
||||
width: 8rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $light-color;
|
||||
overflow: hidden;
|
||||
|
||||
.wave {
|
||||
width: 8rpx;
|
||||
height: 16rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0 16rpx 16rpx 0;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: $bg-color;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 111;
|
||||
}
|
||||
|
||||
.circle-top {
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
}
|
||||
|
||||
.circle-bottom {
|
||||
bottom: -20rpx;
|
||||
right: -20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 450rpx;
|
||||
font-size: $font-sm;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.content {
|
||||
color: #666666;
|
||||
margin-left: 20rpx;
|
||||
line-height: 2em;
|
||||
> view:nth-child(1) {
|
||||
color: #ff6262;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.title-1,
|
||||
.title-2,
|
||||
.title-3 {
|
||||
font-size: 25rpx;
|
||||
}
|
||||
}
|
||||
.receive {
|
||||
color: #ffffff;
|
||||
background-color: $main-color;
|
||||
border-radius: 50%;
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
text-align: center;
|
||||
margin-right: 48rpx;
|
||||
vertical-align: middle;
|
||||
padding-top: 8rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.jiao-1 {
|
||||
background-color: #ffc71c;
|
||||
width: 400rpx;
|
||||
transform: rotate(45deg);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
color: #ffffff;
|
||||
right: -130rpx;
|
||||
top: 0;
|
||||
.text-1 {
|
||||
margin-left: 68rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.text-2 {
|
||||
margin-left: 68rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.no-icon {
|
||||
border-radius: 50%;
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
margin-right: 48rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.bg-quan {
|
||||
width: 244rpx;
|
||||
height: 244rpx;
|
||||
border: 6rpx solid $main-color;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
color: $main-color;
|
||||
text-align: center;
|
||||
padding-top: 30rpx;
|
||||
font-size: 130rpx;
|
||||
position: absolute;
|
||||
right: -54rpx;
|
||||
bottom: -60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
height: 80rpx;
|
||||
padding: 0 5px;
|
||||
background: #fff;
|
||||
color: $light-color;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 26rpx;
|
||||
color: $light-color;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text {
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.current {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
left: 108rpx;
|
||||
width: 30rpx;
|
||||
border-bottom: 2px solid $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="b-content">
|
||||
<view class="coupon-tabs">
|
||||
<u-tabs
|
||||
:list="navList"
|
||||
keyName="text"
|
||||
:scrollable="false"
|
||||
:inactiveStyle="{ color: '#333' }"
|
||||
v-model:current="tabCurrentIndex"
|
||||
:lineColor="lightColor"
|
||||
:activeStyle="{ color: lightColor }"
|
||||
></u-tabs>
|
||||
</view>
|
||||
<swiper
|
||||
:current="tabCurrentIndex"
|
||||
class="swiper-box"
|
||||
duration="300"
|
||||
@change="changeTab"
|
||||
>
|
||||
<swiper-item
|
||||
class="tab-content"
|
||||
v-for="(navItem, navIndex) in navList"
|
||||
:key="navIndex"
|
||||
>
|
||||
<scroll-view
|
||||
class="list-scroll-content"
|
||||
scroll-y
|
||||
@scrolltolower="loadData"
|
||||
>
|
||||
<u-empty
|
||||
mode="coupon"
|
||||
text="暂无优惠券了"
|
||||
v-if="navItem.whetherEmpty"
|
||||
></u-empty>
|
||||
|
||||
<view
|
||||
class="coupon-card"
|
||||
:class="{ 'coupon-used': navIndex != 0, 'coupon-expired': navIndex == 2 }"
|
||||
v-for="(coupon, index) in navItem.dataList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="coupon-card-left">
|
||||
<text class="coupon-price-symbol" v-if="coupon.couponType != 'DISCOUNT'">¥</text>
|
||||
<text class="coupon-price-value">{{ coupon.couponType == 'DISCOUNT' ? coupon.discount + '折' : unitPrice(coupon.price) }}</text>
|
||||
</view>
|
||||
<view class="coupon-divider"></view>
|
||||
<view class="coupon-card-right">
|
||||
<view class="coupon-info">
|
||||
<text class="coupon-card-name">{{ coupon.title }}</text>
|
||||
<text class="coupon-card-desc">使用范围：{{
|
||||
coupon.scopeType == "ALL" && coupon.storeId == "0"
|
||||
? "全平台"
|
||||
: coupon.scopeType == "PORTION_GOODS"
|
||||
? "部分商品"
|
||||
: coupon.scopeType == "PORTION_GOODS_CATEGORY"
|
||||
? "部分分类商品"
|
||||
: coupon.storeName == "platform"
|
||||
? "全平台"
|
||||
: coupon.storeName + ""
|
||||
}}使用</text>
|
||||
<text class="coupon-card-time" v-if="coupon.endTime">{{ coupon.endTime }}</text>
|
||||
</view>
|
||||
<view class="coupon-status-btn" v-if="navIndex == 0" @click="useItNow(coupon)">
|
||||
立即使用
|
||||
</view>
|
||||
<view class="coupon-status-btn disabled" v-else-if="navIndex == 1">
|
||||
已使用
|
||||
</view>
|
||||
<view class="coupon-status-btn disabled" v-else>
|
||||
已过期
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more :status="navItem.loadStatus"></uni-load-more>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getMemberCoupons } from '@/api/members.js'
|
||||
import { useStore } from '@/store'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const lightColor = computed(() => store.getters.lightColor)
|
||||
const tabCurrentIndex = ref(0)
|
||||
const navList = ref([
|
||||
{
|
||||
text: '未使用',
|
||||
loadStatus: 'more',
|
||||
dataList: [] as any[],
|
||||
params: {
|
||||
memberCouponStatus: 'NEW',
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 1,
|
||||
},
|
||||
whetherEmpty: false,
|
||||
},
|
||||
{
|
||||
text: '已使用',
|
||||
loadStatus: 'more',
|
||||
dataList: [] as any[],
|
||||
params: {
|
||||
memberCouponStatus: 'USED',
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 2,
|
||||
},
|
||||
whetherEmpty: false,
|
||||
},
|
||||
{
|
||||
text: '已过期',
|
||||
loadStatus: 'more',
|
||||
dataList: [] as any[],
|
||||
params: {
|
||||
memberCouponStatus: 'EXPIRE',
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
status: 3,
|
||||
},
|
||||
whetherEmpty: false,
|
||||
},
|
||||
])
|
||||
|
||||
onShow(() => {
|
||||
navList.value[tabCurrentIndex.value].params.pageNumber = 1
|
||||
navList.value[tabCurrentIndex.value].dataList = []
|
||||
getData()
|
||||
})
|
||||
|
||||
watch(tabCurrentIndex, (val) => {
|
||||
if (navList.value[val].dataList.length == 0) getData()
|
||||
})
|
||||
|
||||
function hideLoadingIfNeeded() {
|
||||
if (store.state.isShowToast) uni.hideLoading()
|
||||
}
|
||||
|
||||
function handleTabClick(index: number) {
|
||||
tabCurrentIndex.value = index
|
||||
}
|
||||
|
||||
function getData() {
|
||||
uni.showLoading({ title: '加载中' })
|
||||
const index = tabCurrentIndex.value
|
||||
getMemberCoupons(navList.value[index].params).then((res) => {
|
||||
uni.stopPullDownRefresh()
|
||||
if (res.data.success) {
|
||||
const data = res.data.result.records
|
||||
if (data.length == 0) {
|
||||
if (res.data.pageNumber == 1) {
|
||||
navList.value[index].whetherEmpty = true
|
||||
} else {
|
||||
navList.value[index].loadStatus = 'noMore'
|
||||
}
|
||||
} else if (data.length < 10) {
|
||||
navList.value[index].loadStatus = 'noMore'
|
||||
navList.value[index].dataList.push(...data)
|
||||
} else {
|
||||
navList.value[index].dataList.push(...data)
|
||||
}
|
||||
}
|
||||
hideLoadingIfNeeded()
|
||||
})
|
||||
}
|
||||
|
||||
function changeTab(e: any) {
|
||||
tabCurrentIndex.value = e.detail.current
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
const index = tabCurrentIndex.value
|
||||
if (navList.value[index].loadStatus != 'noMore') {
|
||||
navList.value[index].params.pageNumber++
|
||||
getData()
|
||||
}
|
||||
}
|
||||
|
||||
function useItNow(item: any) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/navigation/search/searchPage?promotionsId=${item.couponId}&promotionType=COUPON`,
|
||||
})
|
||||
}
|
||||
|
||||
function couponDetail(item: any) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/cart/coupon/couponDetail?item=' + encodeURIComponent(JSON.stringify(item)),
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.b-content {
|
||||
background: #f7f8fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.coupon-tabs {
|
||||
background: #fff;
|
||||
height: 88rpx;
|
||||
box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
:deep(.u-tabs),
|
||||
:deep(.u-tabs__wrapper),
|
||||
:deep(.u-tabs__wrapper__scroll-view-wrapper),
|
||||
:deep(.u-tabs__wrapper__scroll-view),
|
||||
:deep(.u-tabs__wrapper__nav) {
|
||||
background: #fff;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
:deep(.u-tabs__wrapper__nav__item) {
|
||||
min-height: 88rpx;
|
||||
}
|
||||
|
||||
:deep(.u-tabs__wrapper__nav__item__text) {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: calc(100vh - 88rpx - var(--status-bar-height));
|
||||
}
|
||||
|
||||
.list-scroll-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
border: 1rpx solid #f0f1f5;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: #f7f8fa;
|
||||
border-radius: 50%;
|
||||
left: 204rpx;
|
||||
z-index: 2;
|
||||
box-shadow: inset 0 0 0 1rpx #eceef2;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -16rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -16rpx;
|
||||
}
|
||||
|
||||
&.coupon-used {
|
||||
.coupon-card-left {
|
||||
background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
|
||||
color: #999;
|
||||
}
|
||||
.coupon-status-btn {
|
||||
background: #ccc;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.coupon-expired {
|
||||
.coupon-card-left {
|
||||
background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
|
||||
color: #999;
|
||||
}
|
||||
.coupon-status-btn {
|
||||
background: #ccc;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-card-left {
|
||||
width: 220rpx;
|
||||
min-height: 180rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: #ff3b30;
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #fff5f5 0%, #ffecec 100%);
|
||||
}
|
||||
|
||||
.coupon-price-symbol {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.coupon-price-value {
|
||||
font-size: 56rpx;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: -1rpx;
|
||||
}
|
||||
|
||||
.coupon-divider {
|
||||
position: absolute;
|
||||
left: 220rpx;
|
||||
top: 24rpx;
|
||||
bottom: 24rpx;
|
||||
width: 0;
|
||||
border-left: 2rpx dashed #eceef2;
|
||||
}
|
||||
|
||||
.coupon-card-right {
|
||||
flex: 1;
|
||||
padding: 32rpx 32rpx 32rpx 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.coupon-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.coupon-card-name {
|
||||
font-size: 30rpx;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.coupon-card-desc {
|
||||
font-size: 24rpx;
|
||||
color: #8a8f99;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.coupon-card-time {
|
||||
font-size: 22rpx;
|
||||
color: #b0b3bf;
|
||||
}
|
||||
|
||||
.coupon-status-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #ff6b35, #ff4b2b);
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: #ccc;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<view class="error-page">
|
||||
<u-navbar title="支付失败" :border="false" :fixed="true" :placeholder="true" :auto-back="true"></u-navbar>
|
||||
<view class="error-content">
|
||||
<u-icon name="close-circle-fill" color="#f56c6c" size="120"></u-icon>
|
||||
<text class="error-title">支付失败</text>
|
||||
<text class="error-desc">{{ errorMessage || '支付过程中出现错误，请重试' }}</text>
|
||||
<view class="btn-group">
|
||||
<u-button type="primary" text="返回订单" @click="goBack"></u-button>
|
||||
<u-button type="warning" text="去支付" @click="rePay"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
const errorMessage = ref('')
|
||||
const orderSn = ref('')
|
||||
|
||||
onLoad((options: any) => {
|
||||
if (options) {
|
||||
errorMessage.value = options.message || ''
|
||||
orderSn.value = options.orderSn || ''
|
||||
}
|
||||
})
|
||||
|
||||
function goBack() {
|
||||
uni.navigateBack({
|
||||
fail: () => {
|
||||
uni.switchTab({ url: '/pages/tabbar/user/my' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function rePay() {
|
||||
if (orderSn.value) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/cart/payment/payOrder?orderSn=${orderSn.value}`
|
||||
})
|
||||
} else {
|
||||
goBack()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.error-page {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.error-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 200rpx 40rpx;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.error-desc {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-top: 60rpx;
|
||||
width: 100%;
|
||||
|
||||
:deep(.u-button) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -66,410 +66,264 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as API_Trade from "@/api/trade";
|
||||
import {payCallback} from '@/api/members'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//路径传参
|
||||
routerVal: "",
|
||||
//收银台参数
|
||||
cashierParams: "",
|
||||
//支付方式集合
|
||||
payList: "",
|
||||
//支付sn
|
||||
sn: "",
|
||||
//订单类型
|
||||
orderType: "",
|
||||
//支付异常
|
||||
exception: {},
|
||||
//支付表单
|
||||
payForm: {},
|
||||
//支付类型 APP/WECHAT_MP/H5/NATIVE app/微信小程序/h5/二维码
|
||||
paymentType: "",
|
||||
// 支付客户端 APP/NATIVE/JSAPI/H5
|
||||
paymentClient: "",
|
||||
//余额
|
||||
walletValue: 0.0,
|
||||
// 支付倒计时（毫秒）
|
||||
autoCancelTime: 0,
|
||||
|
||||
};
|
||||
},
|
||||
onLoad(val) {
|
||||
this.routerVal = val;
|
||||
<script setup lang="ts">
|
||||
import { ref, getCurrentInstance, onMounted } from 'vue'
|
||||
import { onLoad, onBackPress } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import * as API_Trade from '@/api/trade'
|
||||
import { payCallback } from '@/api/members'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
|
||||
//初始化参数
|
||||
// #ifdef APP-PLUS
|
||||
this.paymentType = "APP";
|
||||
this.paymentClient = "APP";
|
||||
//#endif
|
||||
// #ifdef MP-WEIXIN
|
||||
this.paymentType = "WECHAT_MP";
|
||||
this.paymentClient = "MP";
|
||||
//#endif
|
||||
// #ifdef H5
|
||||
this.paymentType = "H5";
|
||||
//如果是微信浏览器，则使用公众号支付，否则使用h5，
|
||||
// 区别是：h5是通过浏览器外部调用微信app进行支付，而JSAPI则是 在微信浏览器内部，或者小程序 调用微信支付
|
||||
this.paymentClient = this.isWeiXin() ? "JSAPI" : "H5";
|
||||
//#endif
|
||||
const store = useStore()
|
||||
const { proxy } = getCurrentInstance()!
|
||||
|
||||
const routerVal = ref<Record<string, string>>({})
|
||||
const cashierParams = ref<Record<string, any>>({ price: 0 })
|
||||
const payList = ref<string[]>([])
|
||||
const sn = ref('')
|
||||
const orderType = ref('')
|
||||
const paymentType = ref('')
|
||||
const paymentClient = ref('')
|
||||
const walletValue = ref(0)
|
||||
const autoCancelTime = ref(0)
|
||||
|
||||
onLoad((val) => {
|
||||
routerVal.value = val || {}
|
||||
// #ifdef APP-PLUS
|
||||
paymentType.value = 'APP'
|
||||
paymentClient.value = 'APP'
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
paymentType.value = 'WECHAT_MP'
|
||||
paymentClient.value = 'MP'
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
paymentType.value = 'H5'
|
||||
paymentClient.value = isWeiXin() ? 'JSAPI' : 'H5'
|
||||
// #endif
|
||||
})
|
||||
|
||||
//
|
||||
},
|
||||
onBackPress(e) {
|
||||
if (e.from == "backbutton") {
|
||||
if(this.routerVal.recharge_sn){
|
||||
uni.switchTab({
|
||||
url: '/pages/tabbar/user/my'
|
||||
});
|
||||
}
|
||||
else{
|
||||
uni.navigateTo({
|
||||
url: "/pages/order/myOrder?status=0",
|
||||
});
|
||||
}
|
||||
return true; //阻止默认返回行为
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.cashierData();
|
||||
},
|
||||
methods: {
|
||||
onBackPress((e) => {
|
||||
if (e.from == 'backbutton') {
|
||||
if (routerVal.value.recharge_sn) {
|
||||
uni.switchTab({ url: '/pages/tabbar/user/my' })
|
||||
} else {
|
||||
uni.navigateTo({ url: '/pages/order/myOrder?status=0' })
|
||||
}
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
/**
|
||||
* 支付成功后跳转
|
||||
*/
|
||||
callback(paymentMethod){
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/payment/success?paymentMethod=" +
|
||||
paymentMethod +
|
||||
"&payPrice=" +
|
||||
this.cashierParams.price+
|
||||
"&orderType="+this.orderType
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取收银详情
|
||||
*/
|
||||
cashierData() {
|
||||
let parms = {};
|
||||
onMounted(() => {
|
||||
cashierData()
|
||||
})
|
||||
|
||||
if (this.routerVal.recharge_sn) {
|
||||
// 判断当前是否是充值
|
||||
this.sn = this.routerVal.recharge_sn;
|
||||
this.orderType = "RECHARGE";
|
||||
|
||||
} else if (this.routerVal.trade_sn) {
|
||||
this.sn = this.routerVal.trade_sn;
|
||||
this.orderType = "TRADE";
|
||||
} else {
|
||||
this.sn = this.routerVal.order_sn;
|
||||
this.orderType = "ORDER";
|
||||
}
|
||||
parms.sn = this.sn;
|
||||
parms.orderType = this.orderType;
|
||||
parms.clientType = this.paymentType;
|
||||
function hideLoadingIfNeeded() {
|
||||
if (store.state.isShowToast) uni.hideLoading()
|
||||
}
|
||||
|
||||
API_Trade.getCashierData(parms).then((res) => {
|
||||
|
||||
if(res.data.success){
|
||||
this.cashierParams = res.data.result;
|
||||
function callback(paymentMethod: string) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
'/pages/cart/payment/success?paymentMethod=' +
|
||||
paymentMethod +
|
||||
'&payPrice=' +
|
||||
cashierParams.value.price +
|
||||
'&orderType=' +
|
||||
orderType.value,
|
||||
})
|
||||
}
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.payList = res.data.result.support.filter((item) => {
|
||||
return item != "ALIPAY";
|
||||
});
|
||||
// #endif
|
||||
function cashierData() {
|
||||
const parms: Record<string, string> = {}
|
||||
|
||||
|
||||
if(this.routerVal.recharge_sn){
|
||||
this.payList = res.data.result.support.filter((item) => {
|
||||
return item != "WALLET";
|
||||
})
|
||||
}
|
||||
else{
|
||||
this.payList = res.data.result.support;
|
||||
}
|
||||
// #ifdef H5
|
||||
//判断是否微信浏览器
|
||||
var ua = window.navigator.userAgent.toLowerCase();
|
||||
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
|
||||
|
||||
this.payList = res.data.result.support.filter((item) => {
|
||||
return item != "ALIPAY";
|
||||
});
|
||||
// 充值的话仅保留微信支付
|
||||
if(this.orderType == "RECHARGE"){
|
||||
this.payList = res.data.result.support.filter((item) => {
|
||||
return item == "WECHAT";
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
// #endif
|
||||
|
||||
|
||||
|
||||
if (routerVal.value.recharge_sn) {
|
||||
sn.value = routerVal.value.recharge_sn
|
||||
orderType.value = 'RECHARGE'
|
||||
} else if (routerVal.value.trade_sn) {
|
||||
sn.value = routerVal.value.trade_sn
|
||||
orderType.value = 'TRADE'
|
||||
} else {
|
||||
sn.value = routerVal.value.order_sn
|
||||
orderType.value = 'ORDER'
|
||||
}
|
||||
parms.sn = sn.value
|
||||
parms.orderType = orderType.value
|
||||
parms.clientType = paymentType.value
|
||||
|
||||
this.walletValue = res.data.result.walletValue;
|
||||
const cancelAt = Number(res.data.result.autoCancel);
|
||||
this.autoCancelTime = cancelAt > 0 ? Math.max(cancelAt - Date.now(), 0) : 0;
|
||||
}
|
||||
else if(res.data.code == 32000){
|
||||
setTimeout(()=>{
|
||||
uni.redirectTo({
|
||||
url: `/pages/order/myOrder?status=0`
|
||||
});
|
||||
},500)
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
API_Trade.getCashierData(parms).then((res) => {
|
||||
if (res.data.success) {
|
||||
cashierParams.value = res.data.result
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
payList.value = res.data.result.support.filter((item: string) => item != 'ALIPAY')
|
||||
// #endif
|
||||
|
||||
awaitPay(payment){
|
||||
this.$u.throttle(()=>{
|
||||
this.pay(payment)
|
||||
}, 2000)
|
||||
},
|
||||
if (routerVal.value.recharge_sn) {
|
||||
payList.value = res.data.result.support.filter((item: string) => item != 'WALLET')
|
||||
} else {
|
||||
payList.value = res.data.result.support
|
||||
}
|
||||
|
||||
padTime(val) {
|
||||
return String(val ?? 0).padStart(2, '0');
|
||||
},
|
||||
// #ifdef H5
|
||||
const ua = window.navigator.userAgent.toLowerCase()
|
||||
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
|
||||
payList.value = res.data.result.support.filter((item: string) => item != 'ALIPAY')
|
||||
if (orderType.value == 'RECHARGE') {
|
||||
payList.value = res.data.result.support.filter((item: string) => item == 'WECHAT')
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
onPayTimeout() {
|
||||
uni.showToast({
|
||||
title: '支付超时，请重新下单',
|
||||
icon: 'none',
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/myOrder?status=0',
|
||||
});
|
||||
}, 1500);
|
||||
},
|
||||
walletValue.value = res.data.result.walletValue
|
||||
const cancelAt = Number(res.data.result.autoCancel)
|
||||
autoCancelTime.value = cancelAt > 0 ? Math.max(cancelAt - Date.now(), 0) : 0
|
||||
} else if (res.data.code == 32000) {
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({ url: '/pages/order/myOrder?status=0' })
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//订单支付
|
||||
async pay(payment) {
|
||||
|
||||
// 支付编号
|
||||
const sn = this.sn;
|
||||
// 交易类型【交易号|订单号】
|
||||
const orderType = this.orderType;
|
||||
function awaitPay(payment: string) {
|
||||
proxy.$u.throttle(() => {
|
||||
pay(payment)
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
const clientType = this.paymentType;
|
||||
let params = {
|
||||
sn,
|
||||
orderType,
|
||||
clientType,
|
||||
};
|
||||
function padTime(val: number) {
|
||||
return String(val ?? 0).padStart(2, '0')
|
||||
}
|
||||
|
||||
//支付方式 WECHAT/ALIPAY
|
||||
const paymentMethod = payment;
|
||||
// 客户端类型 APP/NATIVE/JSAPI/H5
|
||||
const paymentClient = this.paymentClient;
|
||||
|
||||
uni.showLoading({
|
||||
title: "正在唤起支付...",
|
||||
mask:true
|
||||
});
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
//APP pay
|
||||
// 初始化支付签名
|
||||
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
|
||||
(signXml) => {
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
//如果支付异常
|
||||
if (!signXml.data.success) {
|
||||
uni.showToast({
|
||||
title: signXml.data.message,
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let payForm = signXml.data.result;
|
||||
|
||||
let paymentType = paymentMethod === "WECHAT" ? "wxpay" : "alipay";
|
||||
|
||||
if(paymentMethod === "WALLET"){
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
this.callback(paymentMethod)
|
||||
}
|
||||
else{
|
||||
uni.requestPayment({
|
||||
provider: paymentType,
|
||||
orderInfo: payForm || '',
|
||||
success: (e) => {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
this.callback(paymentMethod)
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(this);
|
||||
this.exception = e;
|
||||
uni.showModal({
|
||||
content: "支付失败,如果您已支付，请勿反复支付",
|
||||
showCancel: false,
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
//APP pay
|
||||
// #endif
|
||||
function onPayTimeout() {
|
||||
uni.showToast({ title: '支付超时，请重新下单', icon: 'none' })
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({ url: '/pages/order/myOrder?status=0' })
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
//#ifdef H5
|
||||
//H5 pay
|
||||
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
|
||||
(res) => {
|
||||
let response = res.data;
|
||||
//如果非支付宝支付才需要进行判定，因为支付宝h5支付是直接输出的，没有返回所谓的消息状态
|
||||
if(paymentMethod !== "ALIPAY"){
|
||||
//如果支付异常
|
||||
if (!response.success) {
|
||||
uni.showToast({
|
||||
title: response.message,
|
||||
duration: 2000,
|
||||
icon:"none"
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (paymentMethod === "ALIPAY") {
|
||||
document.write(response);
|
||||
} else if (paymentMethod === "WECHAT") {
|
||||
if (this.isWeiXin()) {
|
||||
//微信公众号支付
|
||||
WeixinJSBridge.invoke(
|
||||
"getBrandWCPayRequest",
|
||||
response.result,
|
||||
(res) => {
|
||||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||||
// 使用以上方式判断前端返回,微信团队郑重提示：
|
||||
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
this.callback(paymentMethod)
|
||||
|
||||
} else {
|
||||
uni.showModal({
|
||||
content: "支付失败,如果您已支付，请勿反复支付",
|
||||
showCancel: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
} else {
|
||||
window.location.href = JSON.parse(response.result).h5_url;
|
||||
const searchParams = {
|
||||
...params,
|
||||
price:this.cashierParams,
|
||||
}
|
||||
const timer = setInterval(()=>{
|
||||
payCallback(searchParams).then(res=>{
|
||||
if(res.data.result){
|
||||
clearTimeout(timer);
|
||||
uni.navigateTo({
|
||||
url:"/pages/order/myOrder"
|
||||
})
|
||||
}
|
||||
})
|
||||
},3000)
|
||||
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
}
|
||||
} else if (paymentMethod === "WALLET") {
|
||||
uni.showToast({
|
||||
title: response.message,
|
||||
icon: "none",
|
||||
});
|
||||
if (response.success) {
|
||||
this.callback(paymentMethod)
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
//H5pay
|
||||
// #endif
|
||||
function goPayError(message = '支付失败，如果您已支付，请勿反复支付') {
|
||||
const query = [`orderSn=${encodeURIComponent(sn.value)}`, `message=${encodeURIComponent(message)}`]
|
||||
uni.navigateTo({ url: `/pages/cart/payment/error?${query.join('&')}` })
|
||||
}
|
||||
|
||||
//#ifdef MP-WEIXIN
|
||||
//微信小程序
|
||||
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
|
||||
(res) => {
|
||||
let response = res.data.result;
|
||||
//如果支付异常
|
||||
if (!res.data.success) {
|
||||
uni.showModal({
|
||||
content: res.data.message,
|
||||
showCancel: false,
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (paymentMethod === "WECHAT") {
|
||||
uni.requestPayment({
|
||||
provider: "wxpay",
|
||||
appid: response.appid,
|
||||
timeStamp: response.timeStamp,
|
||||
nonceStr: response.nonceStr,
|
||||
package: response.package,
|
||||
signType: response.signType,
|
||||
paySign: response.paySign,
|
||||
success: (e) => {
|
||||
console.log(e);
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
this.callback(paymentMethod)
|
||||
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(e);
|
||||
this.exception = e;
|
||||
uni.showModal({
|
||||
content: "支付失败,如果您已支付，请勿反复支付",
|
||||
showCancel: false,
|
||||
});
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
this.callback(paymentMethod)
|
||||
|
||||
}
|
||||
}
|
||||
);
|
||||
// #endif
|
||||
},
|
||||
isWeiXin() {
|
||||
var ua = window.navigator.userAgent.toLowerCase();
|
||||
if (ua.match(/MicroMessenger/i) == "micromessenger") {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
async function pay(payment: string) {
|
||||
const params = {
|
||||
sn: sn.value,
|
||||
orderType: orderType.value,
|
||||
clientType: paymentType.value,
|
||||
}
|
||||
const paymentMethod = payment
|
||||
const client = paymentClient.value
|
||||
|
||||
uni.showLoading({ title: '正在唤起支付...', mask: true })
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
await API_Trade.initiatePay(paymentMethod, client, params).then((signXml) => {
|
||||
hideLoadingIfNeeded()
|
||||
if (!signXml.data.success) {
|
||||
uni.showToast({ title: signXml.data.message, duration: 2000 })
|
||||
return
|
||||
}
|
||||
const payForm = signXml.data.result
|
||||
const provider = paymentMethod === 'WECHAT' ? 'wxpay' : 'alipay'
|
||||
if (paymentMethod === 'WALLET') {
|
||||
uni.showToast({ icon: 'none', title: '支付成功!' })
|
||||
callback(paymentMethod)
|
||||
} else {
|
||||
uni.requestPayment({
|
||||
provider,
|
||||
orderInfo: payForm || '',
|
||||
success: () => {
|
||||
uni.showToast({ icon: 'none', title: '支付成功!' })
|
||||
callback(paymentMethod)
|
||||
},
|
||||
fail: () => {
|
||||
goPayError()
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
await API_Trade.initiatePay(paymentMethod, client, params).then((res) => {
|
||||
const response = res.data
|
||||
if (paymentMethod !== 'ALIPAY' && !response.success) {
|
||||
uni.showToast({ title: response.message, duration: 2000, icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (paymentMethod === 'ALIPAY') {
|
||||
document.write(response)
|
||||
} else if (paymentMethod === 'WECHAT') {
|
||||
if (isWeiXin()) {
|
||||
WeixinJSBridge.invoke('getBrandWCPayRequest', response.result, (payRes: any) => {
|
||||
if (payRes.err_msg == 'get_brand_wcpay_request:ok') {
|
||||
uni.showToast({ icon: 'none', title: '支付成功!' })
|
||||
callback(paymentMethod)
|
||||
} else {
|
||||
goPayError()
|
||||
}
|
||||
})
|
||||
hideLoadingIfNeeded()
|
||||
} else {
|
||||
window.location.href = JSON.parse(response.result).h5_url
|
||||
const searchParams = { ...params, price: cashierParams.value }
|
||||
const timer = setInterval(() => {
|
||||
payCallback(searchParams).then((cbRes) => {
|
||||
if (cbRes.data.result) {
|
||||
clearInterval(timer)
|
||||
uni.navigateTo({ url: '/pages/order/myOrder' })
|
||||
}
|
||||
})
|
||||
}, 3000)
|
||||
hideLoadingIfNeeded()
|
||||
}
|
||||
} else if (paymentMethod === 'WALLET') {
|
||||
uni.showToast({ title: response.message, icon: 'none' })
|
||||
if (response.success) callback(paymentMethod)
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
await API_Trade.initiatePay(paymentMethod, client, params).then((res) => {
|
||||
const response = res.data.result
|
||||
if (!res.data.success) {
|
||||
uni.showModal({ content: res.data.message, showCancel: false })
|
||||
return
|
||||
}
|
||||
if (paymentMethod === 'WECHAT') {
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
appid: response.appid,
|
||||
timeStamp: response.timeStamp,
|
||||
nonceStr: response.nonceStr,
|
||||
package: response.package,
|
||||
signType: response.signType,
|
||||
paySign: response.paySign,
|
||||
success: () => {
|
||||
uni.showToast({ icon: 'none', title: '支付成功!' })
|
||||
callback(paymentMethod)
|
||||
},
|
||||
fail: () => {
|
||||
goPayError()
|
||||
},
|
||||
})
|
||||
} else {
|
||||
uni.showToast({ icon: 'none', title: '支付成功!' })
|
||||
callback(paymentMethod)
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
|
||||
function isWeiXin() {
|
||||
const ua = window.navigator.userAgent.toLowerCase()
|
||||
return ua.match(/MicroMessenger/i) == 'micromessenger'
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.method_icon {
|
||||
|
||||
@@ -49,7 +49,13 @@
|
||||
|
||||
<!-- 倒计时 -->
|
||||
<div class="count-down" v-if="!isOver && master.toBeGroupedNum">
|
||||
<u-count-down bg-color="#ededed" :hide-zero-day="true" @end="isOver" :timestamp="timeStamp"></u-count-down>
|
||||
<u-count-down
|
||||
v-if="timeStamp > 0"
|
||||
bgColor="#ededed"
|
||||
:time="timeStamp * 1000"
|
||||
format="HH:mm:ss"
|
||||
@finish="onCountDownEnd"
|
||||
></u-count-down>
|
||||
</div>
|
||||
|
||||
<div class="user-list" v-if="data.pintuanMemberVOS">
|
||||
@@ -59,173 +65,184 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<popupGoods :addr="addr" ref="popupGoods" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" v-if="goodsDetail.id " @handleClickSku="getGoodsDetail" />
|
||||
<shares @close="closeShare" :link="'/pages/cart/payment/shareOrderGoods?sn='+this.routers.sn+'&sku='+this.routers.sku+'&goodsId='+this.routers.goodsId" type="pintuan"
|
||||
:thumbnail="data.promotionGoods.thumbnail" :goodsName="data.promotionGoods.goodsName" v-if="shareFlag " />
|
||||
<popupGoods
|
||||
:addr="addr"
|
||||
ref="popupGoodsRef"
|
||||
:buyMask="maskFlag"
|
||||
@closeBuy="closePopupBuy"
|
||||
:goodsDetail="goodsDetail"
|
||||
:goodsSpec="goodsSpec"
|
||||
v-if="goodsDetail.id"
|
||||
@handleClickSku="getGoodsDetail"
|
||||
/>
|
||||
<shares
|
||||
@close="closeShare"
|
||||
:link="shareLink"
|
||||
type="pintuan"
|
||||
:thumbnail="data.promotionGoods.thumbnail"
|
||||
:goodsName="data.promotionGoods.goodsName"
|
||||
v-if="shareFlag"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getGoods } from "@/api/goods.js";
|
||||
import { getPinTuanShare } from "@/api/order";
|
||||
import shares from "@/components/m-share/index";
|
||||
import storage from "@/utils/storage.js";
|
||||
import popupGoods from "@/components/m-buy/goods"; //购物车商品的模块
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import { getGoods } from '@/api/goods.js'
|
||||
import { getPinTuanShare } from '@/api/order'
|
||||
import shares from '@/components/m-share/index'
|
||||
import storage from '@/utils/storage.js'
|
||||
import popupGoods from '@/components/m-buy/goods'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
flag: false, //判断接口是否正常请求
|
||||
addr: {
|
||||
id: "",
|
||||
},
|
||||
maskFlag: false, //商品弹框
|
||||
timeStamp: 0,
|
||||
shareFlag: false,
|
||||
data: "",
|
||||
isMaster: true,
|
||||
selectedGoods: "", //选择的商品规格昵称
|
||||
routers: "", //传参数据
|
||||
goodsDetail: "", //商品详情
|
||||
goodsSpec: "",
|
||||
master: "", // 团长
|
||||
PromotionList: "", //优惠集合
|
||||
isGroup: false, //是否拼团
|
||||
isOver: false, //是否结束活动
|
||||
isBuy: false, //当前用户是是否购买
|
||||
};
|
||||
},
|
||||
components: {
|
||||
shares,
|
||||
popupGoods,
|
||||
},
|
||||
watch: {
|
||||
isGroup(val) {
|
||||
if (val) {
|
||||
let timer = setInterval(() => {
|
||||
this.$refs.popupGoods.buyType = "PINTUAN";
|
||||
clearInterval(timer);
|
||||
}, 100);
|
||||
} else {
|
||||
this.$refs.popupGoods.buyType = "";
|
||||
const store = useStore()
|
||||
|
||||
const popupGoodsRef = ref<any>(null)
|
||||
const flag = ref(false)
|
||||
const addr = ref({ id: '' })
|
||||
const maskFlag = ref(false)
|
||||
const timeStamp = ref(0)
|
||||
const shareFlag = ref(false)
|
||||
const data = ref<any>(null)
|
||||
const isMaster = ref(true)
|
||||
const selectedGoods = ref<any>(null)
|
||||
const routers = ref<Record<string, string>>({})
|
||||
const goodsDetail = ref<any>({})
|
||||
const goodsSpec = ref<any>(null)
|
||||
const master = ref<any>(null)
|
||||
const PromotionList = ref<any>(null)
|
||||
const isGroup = ref(false)
|
||||
const isOver = ref(false)
|
||||
const isBuy = ref(false)
|
||||
|
||||
const shareLink = computed(() => {
|
||||
const { sn, sku, goodsId } = routers.value
|
||||
return `/pages/cart/payment/shareOrderGoods?sn=${sn}&sku=${sku}&goodsId=${goodsId}`
|
||||
})
|
||||
|
||||
watch(isGroup, (val) => {
|
||||
if (val) {
|
||||
const timer = setInterval(() => {
|
||||
if (popupGoodsRef.value) {
|
||||
popupGoodsRef.value.buyType = 'PINTUAN'
|
||||
}
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.routers = options;
|
||||
},
|
||||
mounted() {
|
||||
this.init(this.routers.sn, this.routers.sku);
|
||||
},
|
||||
methods: {
|
||||
closeShare() {
|
||||
this.shareFlag = false;
|
||||
},
|
||||
// 这里的话得先跳到商品详情才能购买商品
|
||||
toBuy() {
|
||||
this.maskFlag = true;
|
||||
this.$refs.popupGoods.parentOrder = {
|
||||
...this.master,
|
||||
orderSn: this.routers.sn,
|
||||
};
|
||||
this.$refs.popupGoods.isMask = true;
|
||||
this.$refs.popupGoods.isClose = true;
|
||||
this.$refs.popupGoods.buyType = "PINTUAN";
|
||||
},
|
||||
// 分享
|
||||
share() {
|
||||
this.shareFlag = true;
|
||||
},
|
||||
closePopupBuy(val) {
|
||||
this.maskFlag = false;
|
||||
},
|
||||
// 实例化本页面
|
||||
async init(sn, sku) {
|
||||
let res = await getPinTuanShare(sn, sku);
|
||||
if (res.data.success && res.data.result.promotionGoods) {
|
||||
this.flag = true;
|
||||
this.data = res.data.result;
|
||||
this.selectedGoods = res.data.result.promotionGoods;
|
||||
let endTime = Date.parse(
|
||||
res.data.result.promotionGoods.endTime.replace(/-/g, "/")
|
||||
);
|
||||
// 获取当前剩余的拼团商品时间
|
||||
let timeStamp = Date.parse(new Date(endTime)) / 1000;
|
||||
clearInterval(timer)
|
||||
}, 100)
|
||||
} else if (popupGoodsRef.value) {
|
||||
popupGoodsRef.value.buyType = ''
|
||||
}
|
||||
})
|
||||
|
||||
// 获取当前时间时间戳
|
||||
let dateTime = Date.parse(new Date()) / 1000;
|
||||
onLoad((options) => {
|
||||
routers.value = options || {}
|
||||
})
|
||||
|
||||
this.timeStamp = parseInt(timeStamp - dateTime);
|
||||
onMounted(() => {
|
||||
init(routers.value.sn, routers.value.sku)
|
||||
})
|
||||
|
||||
this.timeStamp <= 0 ? (this.isOver = true) : (this.isOver = false);
|
||||
function hideLoadingIfNeeded() {
|
||||
if (store.state.isShowToast) uni.hideLoading()
|
||||
}
|
||||
|
||||
// 获取剩余拼团人数
|
||||
this.master =
|
||||
res.data.result.pintuanMemberVOS.length != 0 &&
|
||||
res.data.result.pintuanMemberVOS.filter((item) => {
|
||||
return item.orderSn == "";
|
||||
})[0];
|
||||
function closeShare() {
|
||||
shareFlag.value = false
|
||||
}
|
||||
|
||||
// 获取当前是否是拼团本人
|
||||
if (
|
||||
storage.getUserInfo(this.routers.sku, this.routers.goodsId).id ==
|
||||
this.master.memberId
|
||||
) {
|
||||
this.isMaster = true;
|
||||
} else {
|
||||
this.isMaster = false;
|
||||
// 获取商品详情
|
||||
this.getGoodsDetail({
|
||||
id: this.routers.sku,
|
||||
goodsId: this.routers.goodsId,
|
||||
});
|
||||
function onCountDownEnd() {
|
||||
isOver.value = true
|
||||
}
|
||||
|
||||
function toBuy() {
|
||||
maskFlag.value = true
|
||||
if (!popupGoodsRef.value) return
|
||||
popupGoodsRef.value.parentOrder = {
|
||||
...master.value,
|
||||
orderSn: routers.value.sn,
|
||||
}
|
||||
popupGoodsRef.value.isMask = true
|
||||
popupGoodsRef.value.isClose = true
|
||||
popupGoodsRef.value.buyType = 'PINTUAN'
|
||||
}
|
||||
|
||||
function share() {
|
||||
shareFlag.value = true
|
||||
}
|
||||
|
||||
function closePopupBuy() {
|
||||
maskFlag.value = false
|
||||
}
|
||||
|
||||
async function init(sn: string, sku: string) {
|
||||
const res = await getPinTuanShare(sn, sku)
|
||||
if (res.data.success && res.data.result.promotionGoods) {
|
||||
flag.value = true
|
||||
data.value = res.data.result
|
||||
selectedGoods.value = res.data.result.promotionGoods
|
||||
const endTime = Date.parse(
|
||||
res.data.result.promotionGoods.endTime.replace(/-/g, '/')
|
||||
)
|
||||
const endTimestamp = Date.parse(new Date(endTime) as any) / 1000
|
||||
const dateTime = Date.parse(new Date() as any) / 1000
|
||||
timeStamp.value = parseInt(String(endTimestamp - dateTime))
|
||||
isOver.value = timeStamp.value <= 0
|
||||
|
||||
master.value =
|
||||
res.data.result.pintuanMemberVOS.length != 0 &&
|
||||
res.data.result.pintuanMemberVOS.filter((item: any) => item.orderSn == '')[0]
|
||||
|
||||
if (
|
||||
storage.getUserInfo(routers.value.sku, routers.value.goodsId).id ==
|
||||
master.value.memberId
|
||||
) {
|
||||
isMaster.value = true
|
||||
} else {
|
||||
isMaster.value = false
|
||||
getGoodsDetail({
|
||||
id: routers.value.sku,
|
||||
goodsId: routers.value.goodsId,
|
||||
})
|
||||
}
|
||||
|
||||
if (storage.getUserInfo().id) {
|
||||
const bought = res.data.result.pintuanMemberVOS.filter(
|
||||
(item: any) => item.memberId == storage.getUserInfo().id
|
||||
)
|
||||
isBuy.value = bought.length != 0
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '当前拼团单有误！请联系管理员重试',
|
||||
duration: 2000,
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function getGoodsDetail(val: { id: string; goodsId: string }) {
|
||||
const { id, goodsId } = val
|
||||
uni.showLoading({ title: '加载中', mask: true })
|
||||
getGoods(id, goodsId).then((response) => {
|
||||
goodsDetail.value = response.data.result.data
|
||||
selectedGoods.value = response.data.result.data
|
||||
goodsSpec.value = response.data.result.specs
|
||||
hideLoadingIfNeeded()
|
||||
PromotionList.value = response.data.result.promotionMap
|
||||
if (PromotionList.value) {
|
||||
Object.keys(PromotionList.value).forEach((item) => {
|
||||
if (item.indexOf('PINTUAN') == 0) {
|
||||
isGroup.value = true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取当前商品是否已经购买
|
||||
if (storage.getUserInfo().id) {
|
||||
let isBuy = res.data.result.pintuanMemberVOS.filter((item) => {
|
||||
return item.memberId == storage.getUserInfo().id;
|
||||
});
|
||||
isBuy.length != 0 ? (this.isBuy = true) : (this.isBuy = false);
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "当前拼团单有误！请联系管理员重试",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
},
|
||||
// 获取商品详情
|
||||
getGoodsDetail(val) {
|
||||
let { id, goodsId } = val;
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
});
|
||||
getGoods(id, goodsId).then((response) => {
|
||||
this.goodsDetail = response.data.result.data;
|
||||
this.selectedGoods = response.data.result.data;
|
||||
this.goodsSpec = response.data.result.specs;
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
this.PromotionList = response.data.result.promotionMap;
|
||||
|
||||
// 判断是否拼团活动 如果有则显示拼团活动信息
|
||||
this.PromotionList &&
|
||||
Object.keys(this.PromotionList).forEach((item) => {
|
||||
if (item.indexOf("PINTUAN") == 0) {
|
||||
this.isGroup = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
handleClickHome() {
|
||||
uni.switchTab({
|
||||
url: "/pages/tabbar/home/index",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
function handleClickHome() {
|
||||
uni.switchTab({ url: '/pages/tabbar/home/index' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
￥{{unitPrice(Number(payPrice)) }}
|
||||
</div>
|
||||
<div class="pay-btns">
|
||||
<div v-show="!from" @click="checkOrder">查看{{ this.orderType == "RECHARGE" ? '余额' : '订单' }}</div>
|
||||
<div v-show="!from" @click="checkOrder">查看{{ orderType == "RECHARGE" ? '余额' : '订单' }}</div>
|
||||
<div @click="navigateTo('/pages/tabbar/home/index', 'switch')">回到首页</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -24,73 +24,55 @@
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import goodsRecommend from "@/components/m-goods-recommend";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
paymentMethod: "",
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import goodsRecommend from '@/components/m-goods-recommend'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
|
||||
from: "",
|
||||
payPrice: 0,
|
||||
goodsList: [],
|
||||
activeColor: this.$mainColor,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
goodsRecommend,
|
||||
},
|
||||
onLoad(options) {
|
||||
this.paymentMethod = options.paymentMethod || "";
|
||||
this.from = options.from || "";
|
||||
this.payPrice = options.payPrice || 0;
|
||||
this.orderType = options.orderType;
|
||||
const paymentMethod = ref('')
|
||||
const from = ref('')
|
||||
const payPrice = ref<number | string>(0)
|
||||
const orderType = ref('')
|
||||
|
||||
},
|
||||
methods: {
|
||||
paymentTypeFilter(val) {
|
||||
switch (val) {
|
||||
case "WECHAT":
|
||||
return "微信";
|
||||
case "ALIPAY":
|
||||
return "支付宝";
|
||||
case "WALLET":
|
||||
return "余额支付";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
},
|
||||
checkOrder() {
|
||||
/**
|
||||
* 查看订单
|
||||
* 1.充值跳转到明细里面
|
||||
* 2.支付跳转到订单详情
|
||||
*/
|
||||
if (this.orderType == "RECHARGE") {
|
||||
uni.reLaunch({
|
||||
url: `/pages/mine/deposit/operation`,
|
||||
});
|
||||
} else {
|
||||
this.navigateTo("/pages/order/myOrder?status=0");
|
||||
}
|
||||
},
|
||||
onLoad((options) => {
|
||||
paymentMethod.value = options.paymentMethod || ''
|
||||
from.value = options.from || ''
|
||||
payPrice.value = options.payPrice || 0
|
||||
orderType.value = options.orderType || ''
|
||||
})
|
||||
|
||||
navigateTo(url, type) {
|
||||
if (type === "switch") {
|
||||
uni.switchTab({
|
||||
url,
|
||||
});
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
function paymentTypeFilter(val: string) {
|
||||
switch (val) {
|
||||
case 'WECHAT':
|
||||
return '微信'
|
||||
case 'ALIPAY':
|
||||
return '支付宝'
|
||||
case 'WALLET':
|
||||
return '余额支付'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
function checkOrder() {
|
||||
if (orderType.value == 'RECHARGE') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/mine/deposit/operation',
|
||||
})
|
||||
} else {
|
||||
navigateTo('/pages/order/myOrder?status=0')
|
||||
}
|
||||
}
|
||||
|
||||
function navigateTo(url: string, type?: string) {
|
||||
if (type === 'switch') {
|
||||
uni.switchTab({ url })
|
||||
} else {
|
||||
uni.redirectTo({ url })
|
||||
}
|
||||
}
|
||||
</script><style scoped lang="scss">
|
||||
.subscribe {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user