Compare commits
3 Commits
| Author | SHA1 | Date |
|---|---|---|
 xiaogang
|
2b82ab702d | |
|
xiaogang
|
7ff654ab22 | |
|
xiaogang
|
2d92c6594c |
|
|
@ -1,5 +1,5 @@
|
||||||
NODE_ENV = 'development'
|
NODE_ENV = 'development'
|
||||||
# 邮储奶茶活动
|
# 邮储奶茶活动
|
||||||
VITE_BASE_URL = 'http://milk.test.api.cdlsxd.cn'
|
VITE_BASE_URL = 'http://milk.h5.test.86698.cn'
|
||||||
# 邮储音视频
|
# 邮储音视频
|
||||||
# VITE_BASE_URL = 'https://gateway.dev.cdlsxd.cn/ycav'
|
# VITE_BASE_URL = 'https://gateway.dev.cdlsxd.cn/ycav'
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
|
|
||||||
NODE_ENV = 'production'
|
NODE_ENV = 'production'
|
||||||
# 邮储奶茶活动(正式环境)
|
# 邮储奶茶活动(正式环境)
|
||||||
VITE_BASE_URL = 'https://milk.api.cdlsxd.cn'
|
VITE_BASE_URL = 'https://tea.cdlsxd.cn'
|
||||||
VITE_YCNC_MERCH_CODE = '100510102303326'
|
VITE_YCNC_MERCH_CODE = '100510102303326'
|
||||||
|
|
||||||
# 邮储音视频活动(生产环境)
|
# 邮储音视频活动(生产环境)
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
NODE_ENV = 'test'
|
NODE_ENV = 'test'
|
||||||
|
|
||||||
# 邮储奶茶活动(测试环境)
|
# 邮储奶茶活动(测试环境)
|
||||||
VITE_BASE_URL = 'http://milk.test.api.cdlsxd.cn'
|
# VITE_BASE_URL = 'http://milk.h5.test.86698.cn'
|
||||||
|
VITE_BASE_URL = ''
|
||||||
VITE_YCNC_MERCH_CODE = '100310100018908'
|
VITE_YCNC_MERCH_CODE = '100310100018908'
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,16 +16,15 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="app"><!--app-html--></div>
|
<div id="app"><!--app-html--></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
<script src="./static/YT_Client_api.js"></script>
|
<!-- <script>
|
||||||
<script>
|
|
||||||
document.addEventListener('touchmove', function(e) {
|
document.addEventListener('touchmove', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}, {passive: false})
|
}, {passive: false})
|
||||||
</script>
|
</script> -->
|
||||||
<!-- <script src="https://fastly.jsdelivr.net/npm/eruda"></script>
|
<script src="https://fastly.jsdelivr.net/npm/eruda"></script>
|
||||||
<script>
|
<script>
|
||||||
eruda.init()
|
eruda.init()
|
||||||
</script> -->
|
</script>
|
||||||
<script>
|
<script>
|
||||||
// var clickCount = 0
|
// var clickCount = 0
|
||||||
// var timer = null
|
// var timer = null
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
"type": "home",
|
"type": "home",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationStyle": "custom",
|
"navigationStyle": "custom",
|
||||||
"navigationBarTitleText": "奶茶活动",
|
"navigationBarTitleText": "奶茶专区",
|
||||||
"navigationBarBackgroundColor": "#FFF"
|
"navigationBarBackgroundColor": "#FFF"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<template>
|
||||||
|
<wd-navbar :title="title" custom-style="background-color: transparent !important;" left-arrow></wd-navbar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, unref, onMounted} from 'vue';
|
||||||
|
const props = defineProps({
|
||||||
|
title:{
|
||||||
|
type:String,
|
||||||
|
default:''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -1,216 +1,188 @@
|
||||||
<route lang="json5" type="page">
|
<route lang="json5" type="page">
|
||||||
{
|
{
|
||||||
style: {
|
style: {
|
||||||
navigationStyle: 'custom',
|
navigationStyle: "custom",
|
||||||
navigationBarTitleText: '商品详情',
|
navigationBarTitleText: "商品详情",
|
||||||
navigationBarBackgroundColor:'#FFF',
|
navigationBarBackgroundColor: "#FFF",
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</route>
|
</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="w-full h-full flex flex-col">
|
<view class="w-full h-full flex flex-col">
|
||||||
<scroll-view scroll-y class="w-full h-full overflow-y-auto flex-1">
|
<scroll-view scroll-y class="w-full h-full overflow-y-auto flex-1">
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<image class="banner" :src="detailObj.main_image" @click="testEvent"></image>
|
<image class="banner" :src="detailObj.main_image"></image>
|
||||||
<view class="detail flex flex-col flex-justify-between">
|
<view class="detail flex flex-col flex-justify-between">
|
||||||
<view class="proname">{{ detailObj.name }}</view>
|
<view class="proname">{{ detailObj.name }}</view>
|
||||||
<view class="num">
|
<view class="num">
|
||||||
<text class="price">￥{{ detailObj.price }}</text>
|
<text class="price">￥{{ detailObj.price }}</text>
|
||||||
<text class="ori">{{ detailObj.show_price }}</text>
|
<text class="ori">{{ detailObj.show_price }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="desc" v-html="detailObj.description">
|
<view class="desc" v-html="detailObj.description"> </view>
|
||||||
|
<!-- <view class="desc">
|
||||||
</view>
|
|
||||||
<!-- <view class="desc">
|
|
||||||
<div class="big">购买须知</div>
|
<div class="big">购买须知</div>
|
||||||
<div class="small">【有效期】</div>
|
<div class="small">【有效期】</div>
|
||||||
<p class="prog">
|
<p class="prog">
|
||||||
代金券到账后，10天有效，逾期视为自动放弃，不退不补。
|
代金券到账后，10天有效，逾期视为自动放弃，不退不补。
|
||||||
</p>
|
</p>
|
||||||
</view> -->
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
<view class="pay-container">
|
<view class="pay-container">
|
||||||
<view class="pay-btn" @click="toPay">
|
<view class="pay-btn" @click="toPay"> 立即支付 </view>
|
||||||
立即支付
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, reactive, ref, unref } from 'vue';
|
import { onMounted, reactive, ref, unref } from "vue";
|
||||||
import { onLoad } from '@dcloudio/uni-app';
|
import { onLoad } from "@dcloudio/uni-app";
|
||||||
import { queryDetail, goPay, login } from '../../api/ycnc';
|
import { queryDetail, goPay, login } from "../../api/ycnc";
|
||||||
import usePay from './hooks/usePay';
|
import { getQueryString } from "../../utils/utils";
|
||||||
import useCode from './hooks/useCode';
|
|
||||||
|
|
||||||
const id = ref('')
|
const id = ref("");
|
||||||
const authCode = ref('');
|
|
||||||
|
|
||||||
const detailObj = reactive({})
|
const detailObj = reactive({});
|
||||||
|
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
const {product_id} = options;
|
const { product_id } = options;
|
||||||
id.value = product_id
|
id.value = product_id;
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const token = getQueryString("token") || uni.getStorageSync("token");
|
||||||
|
uni.setStorageSync("token", token);
|
||||||
|
getDetail();
|
||||||
|
});
|
||||||
|
|
||||||
|
const getDetail = () => {
|
||||||
|
const params = {
|
||||||
|
product_id: unref(id),
|
||||||
|
};
|
||||||
|
queryDetail({ params }).then((res) => {
|
||||||
|
Object.assign(detailObj, res);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const toPay = async () => {
|
||||||
|
const tempBackUrl = getQueryString("backUrl");
|
||||||
|
const backUrl = tempBackUrl
|
||||||
|
? encodeURIComponent(tempBackUrl)
|
||||||
|
: uni.getStorageSync("backUrl");
|
||||||
|
const params = {
|
||||||
|
product_id: unref(id),
|
||||||
|
backUrl: backUrl,
|
||||||
|
};
|
||||||
|
goPay({ params })
|
||||||
|
.then((res) => {
|
||||||
|
const { order_no, notify_url, sign, plain_text, pay_url } = res;
|
||||||
|
window.location.replace(pay_url);
|
||||||
})
|
})
|
||||||
|
.catch((err) => {
|
||||||
onMounted(() => {
|
console.log(err);
|
||||||
getDetail()
|
});
|
||||||
})
|
};
|
||||||
|
|
||||||
const getDetail = () => {
|
|
||||||
const params = {
|
|
||||||
product_id:unref(id)
|
|
||||||
}
|
|
||||||
queryDetail({params}).then(res => {
|
|
||||||
Object.assign(detailObj,res)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const toPay = async () => {
|
|
||||||
const token = window.localStorage.getItem('token') || '';
|
|
||||||
if(!token){
|
|
||||||
const code = await useCode();
|
|
||||||
authCode.value = code
|
|
||||||
const {token} = await login({params:{code:unref(authCode)}});
|
|
||||||
window.localStorage.setItem('token',token);
|
|
||||||
}
|
|
||||||
const params = {
|
|
||||||
product_id:unref(id)
|
|
||||||
}
|
|
||||||
goPay({params}).then(res => {
|
|
||||||
const {order_no,notify_url,sign,plain_text} = res;
|
|
||||||
const {payFunc} = usePay();
|
|
||||||
payFunc({order_no,notify_url,TranAmt:detailObj.price,MerName:detailObj.brand,sign,plain_text})
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
var clickCount = 0
|
|
||||||
var timer = null
|
|
||||||
const testEvent = () => {
|
|
||||||
if (clickCount < 6) {
|
|
||||||
clickCount++
|
|
||||||
console.log(`Clicked ${clickCount} times`)
|
|
||||||
|
|
||||||
// 如果是第一次点击，则开始计时
|
|
||||||
if (clickCount === 1) {
|
|
||||||
timer = setTimeout(() => {
|
|
||||||
clickCount = 0 // 重置点击计数
|
|
||||||
}, 2000)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果点击次数达到6次，则清除计时器并重置状态
|
|
||||||
if (clickCount >= 6) {
|
|
||||||
clearTimeout(timer)
|
|
||||||
clickCount = 0 // 重置点击计数
|
|
||||||
window.location.href = 'https://22233.cn/AAALM4HwLrAfdSCx'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
<style lang="scss" scoped>
|
||||||
.banner{
|
.banner {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height:600rpx;
|
height: 600rpx;
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.detail{
|
.detail {
|
||||||
width: 694rpx;
|
width: 694rpx;
|
||||||
// height: 138rpx;
|
// height: 138rpx;
|
||||||
border-bottom: 2rpx solid rgba(0,0,0,0.04);
|
border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding:25rpx 0;
|
padding: 25rpx 0;
|
||||||
.proname{
|
.proname {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
margin-bottom:16rpx;
|
margin-bottom: 16rpx;
|
||||||
}
|
}
|
||||||
.price{
|
.price {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #EA0000;
|
color: #ea0000;
|
||||||
margin-right:18rpx;
|
margin-right: 18rpx;
|
||||||
}
|
}
|
||||||
.ori{
|
.ori {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #A5A5A5;
|
color: #a5a5a5;
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.desc{
|
.desc {
|
||||||
width: 694rpx;
|
width: 694rpx;
|
||||||
margin:0 auto;
|
margin: 0 auto;
|
||||||
padding-top:44rpx;
|
padding-top: 44rpx;
|
||||||
padding-bottom:24rpx;
|
padding-bottom: 24rpx;
|
||||||
//旧版
|
//旧版
|
||||||
&:deep(.big-title) {
|
&:deep(.big-title) {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
color: #3D3D3D;
|
color: #3d3d3d;
|
||||||
margin-bottom:16rpx;
|
margin-bottom: 16rpx;
|
||||||
}
|
}
|
||||||
&:deep(.small-area) {
|
&:deep(.small-area) {
|
||||||
margin-bottom:16rpx;
|
margin-bottom: 16rpx;
|
||||||
}
|
}
|
||||||
&:deep(.small-title){
|
&:deep(.small-title) {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 32rpx;
|
|
||||||
color: #333333;
|
|
||||||
margin-bottom:16rpx;
|
|
||||||
}
|
|
||||||
&:deep(.small-content){
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #4D4D4D;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
//新版
|
|
||||||
&:deep(.big){
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 40rpx;
|
|
||||||
color: #3D3D3D;
|
|
||||||
margin-bottom:16rpx;
|
|
||||||
}
|
|
||||||
&:deep(.small){
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #333333;
|
|
||||||
margin-bottom:16rpx;
|
|
||||||
}
|
|
||||||
&:deep(.prog){
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #4D4D4D;
|
|
||||||
margin-bottom:16rpx;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.pay-container{
|
|
||||||
width:100%;
|
|
||||||
height:138rpx;
|
|
||||||
border-top:1px solid rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
.pay-btn{
|
|
||||||
width: 600rpx;
|
|
||||||
height: 88rpx;
|
|
||||||
background: #EA0000;
|
|
||||||
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #FFFFFF;
|
color: #333333;
|
||||||
margin:25rpx auto;
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
&:deep(.small-content) {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #4d4d4d;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
//新版
|
||||||
|
&:deep(.big) {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #3d3d3d;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
&:deep(.small) {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
&:deep(.prog) {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #4d4d4d;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
.pay-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 138rpx;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.pay-btn {
|
||||||
|
width: 600rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
background: #ea0000;
|
||||||
|
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
margin: 25rpx auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,145 +1,281 @@
|
||||||
<route lang="json5" type="home">
|
<route lang="json5" type="home">
|
||||||
{
|
{
|
||||||
style: {
|
style: {
|
||||||
navigationStyle: 'custom',
|
navigationStyle: "custom",
|
||||||
navigationBarTitleText: '奶茶活动',
|
navigationBarTitleText: "奶茶专区",
|
||||||
navigationBarBackgroundColor:'#FFF',
|
navigationBarBackgroundColor: "#FFF",
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</route>
|
</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<scroll-view scroll-y class="page-wrapper">
|
<scroll-view scroll-y class="page-wrapper">
|
||||||
<view class="nav-btn" @click="toOrder">我的订单</view>
|
<view class="nav-btn" @click="toOrder">我的订单</view>
|
||||||
<!-- <view style="opacity: 0;width: 100%;height:200rpx;position:absolute;top:230rpx" @click="test"></view> -->
|
<view class="wrapper flex flex-col flex-items-center box-border">
|
||||||
<view class="wrapper flex flex-col flex-items-center box-border">
|
<view v-for="(item, key) in productList" :key="key">
|
||||||
<view v-for="(item,key) in productList" :key="key">
|
<brand :products="item" :brandName="key" />
|
||||||
<brand :products="item" :brandName="key"/>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</scroll-view>
|
||||||
</scroll-view>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import brand from './components/brand';
|
import brand from "./components/brand";
|
||||||
import { getProductList, goPay, login } from '../../api/ycnc'
|
import { getProductList, goPay, login } from "../../api/ycnc";
|
||||||
import { onMounted, ref, provide, unref } from 'vue';
|
import { onMounted, ref, provide, unref } from "vue";
|
||||||
// import { getQueryString , isIOS, isAndroid } from '../../utils/utils';
|
import { getQueryString, getQueryPa
|
||||||
import useCode from './hooks/useCode';
|
|
||||||
import usePay from './hooks/usePay';
|
|
||||||
import config from './config';
|
|
||||||
const productList = ref([]);
|
|
||||||
const authCode = ref('');
|
|
||||||
|
|
||||||
const handleBuy = (productData) => {
|
|
||||||
pay(productData)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const goDetail = (productData) => {
|
|
||||||
const {ProductId} = productData
|
|
||||||
uni.navigateTo({
|
|
||||||
url:`/pages/ycnc/detail?product_id=${ProductId}`
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const pay = (productData) => {
|
|
||||||
const {ProductId,voucherAmount,brandFlag} = productData
|
|
||||||
console.log('商品数据',productData);
|
|
||||||
const params = {
|
|
||||||
product_id:ProductId
|
|
||||||
}
|
|
||||||
goPay({params}).then(res => {
|
|
||||||
const {order_no,notify_url,sign,plain_text} = res;
|
|
||||||
const {payFunc} = usePay();
|
|
||||||
payFunc({order_no,notify_url,TranAmt:voucherAmount,MerName:config[brandFlag].name,sign,plain_text})
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
provide('custom-events',{
|
|
||||||
handleBuy,
|
|
||||||
goDetail
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
rams } from "../../utils/utils";
|
||||||
|
import config from "./config";
|
||||||
|
const productList = ref([]);
|
||||||
|
|
||||||
|
const handleBuy = (productData) => {
|
||||||
|
pay(productData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const goDetail = (productData) => {
|
||||||
|
const { ProductId } = productData;
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/ycnc/detail?product_id=${ProductId}`,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const pay = (productData) => {
|
||||||
|
const { ProductId, voucherAmount, brandFlag } = productData;
|
||||||
|
const backUrl = encodeURIComponent(getQueryString("backUrl"));
|
||||||
|
const params = {
|
||||||
|
product_id: ProductId,
|
||||||
|
backUrl: backUrl,
|
||||||
|
};
|
||||||
|
goPay({ params })
|
||||||
|
.then((res) => {
|
||||||
|
const { order_no, notify_url, sign, plain_text, pay_url } = res;
|
||||||
|
window.location.replace(pay_url);
|
||||||
})
|
})
|
||||||
|
.catch((err) => {
|
||||||
const toOrder = () => {
|
console.log(err);
|
||||||
uni.navigateTo({
|
|
||||||
url:'/pages/ycnc/order'
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(async ()=>{
|
|
||||||
queryProducts();
|
|
||||||
const token = window.localStorage.getItem('token') || '';
|
|
||||||
if(!token){
|
|
||||||
const code = await useCode();
|
|
||||||
authCode.value = code
|
|
||||||
const {token} = await login({params:{code:unref(authCode)}});
|
|
||||||
window.localStorage.setItem('token',token);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
};
|
||||||
|
|
||||||
function handleData(arg,args){
|
provide("custom-events", {
|
||||||
return arg.reduce((total,current) =>{
|
handleBuy,
|
||||||
const flag = current.brandFlag;
|
goDetail,
|
||||||
const flagData = args.filter(item => item.brandFlag === flag)
|
});
|
||||||
if(Array.isArray(total[flag])){
|
|
||||||
total[flag].push(...flagData)
|
const toOrder = () => {
|
||||||
}else{
|
uni.navigateTo({
|
||||||
total[flag] = [...flagData]
|
url: "/pages/ycnc/order",
|
||||||
}
|
});
|
||||||
return total
|
};
|
||||||
},{})
|
|
||||||
}
|
// function utf8ToBase64(str) {
|
||||||
|
// return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
|
||||||
//查询品牌，商品接口
|
// return String.fromCharCode('0x' + p1);
|
||||||
const queryProducts = () => {
|
// }));
|
||||||
const params = {GID:'4894651'}
|
// }
|
||||||
getProductList({params}).then(res => {
|
|
||||||
const {milkList,
|
onMounted(async () => {
|
||||||
milkVoucherList} = res
|
queryProducts();
|
||||||
const sortMilkList = milkList.sort((a,b)=>{
|
console.log(
|
||||||
const orderA = config[a.brandFlag] ? config[a.brandFlag].order : Infinity;
|
"url中所有查询参数---》》》",
|
||||||
const orderB = config[b.brandFlag] ? config[b.brandFlag].order : Infinity;
|
getQueryParams(window.location.href)
|
||||||
return orderA - orderB
|
);
|
||||||
})
|
const token = getQueryString("token");
|
||||||
productList.value = handleData(sortMilkList,milkVoucherList);
|
const backUrl = getQueryString("backUrl");
|
||||||
}).catch(err=>{
|
uni.setStorageSync("token", token);
|
||||||
console.log(err);
|
uni.setStorageSync("backUrl", encodeURIComponent(backUrl));
|
||||||
})
|
});
|
||||||
|
|
||||||
|
function handleData(arg, args) {
|
||||||
|
return arg.reduce((total, current) => {
|
||||||
|
const flag = current.brandFlag;
|
||||||
|
const flagData = args.filter((item) => item.brandFlag === flag);
|
||||||
|
if (Array.isArray(total[flag])) {
|
||||||
|
total[flag].push(...flagData);
|
||||||
|
} else {
|
||||||
|
total[flag] = [...flagData];
|
||||||
}
|
}
|
||||||
|
return total;
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
|
|
||||||
|
//查询品牌，商品接口
|
||||||
|
const queryProducts = () => {
|
||||||
|
const params = { GID: "4894651" };
|
||||||
|
getProductList({ params })
|
||||||
|
.then((res) => {
|
||||||
|
const { milkList, milkVoucherList } = res;
|
||||||
|
const sortMilkList = milkList.sort((a, b) => {
|
||||||
|
const orderA = config[a.brandFlag]
|
||||||
|
? config[a.brandFlag].order
|
||||||
|
: Infinity;
|
||||||
|
const orderB = config[b.brandFlag]
|
||||||
|
? config[b.brandFlag].order
|
||||||
|
: Infinity;
|
||||||
|
return orderA - orderB;
|
||||||
|
});
|
||||||
|
productList.value = handleData(sortMilkList, milkVoucherList);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='scss'>
|
<style lang="scss">
|
||||||
.page-wrapper{
|
.page-wrapper {
|
||||||
// width: 100vw;
|
width: 100%;
|
||||||
// height: 100vh;
|
height: 100%;
|
||||||
width:100%;
|
overflow-y: auto;
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
}
|
||||||
.nav-btn{
|
.nav-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top:42rpx;
|
top: 42rpx;
|
||||||
width: 42rpx;
|
width: 42rpx;
|
||||||
height: 132rpx;
|
height: 132rpx;
|
||||||
background: #FFFFFF;
|
background: #ffffff;
|
||||||
border-radius: 16rpx 0rpx 0rpx 16rpx;
|
border-radius: 16rpx 0rpx 0rpx 16rpx;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
color: #4BB8FF;
|
color: #4bb8ff;
|
||||||
writing-mode: vertical-lr;
|
writing-mode: vertical-lr;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.wrapper{
|
.wrapper {
|
||||||
width:100%;
|
width: 100%;
|
||||||
min-height:100vh;
|
min-height: 100vh;
|
||||||
background: url('/static/ycnc/bg.png') no-repeat;
|
background: url("/static/ycnc/bg.png") no-repeat;
|
||||||
background-size:cover;
|
background-size: cover;
|
||||||
padding-top:730rpx;
|
padding-top: 730rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,279 +1,267 @@
|
||||||
<route lang="json5" type="page">
|
<route lang="json5" type="page">
|
||||||
{
|
{
|
||||||
style: {
|
style: {
|
||||||
navigationStyle: 'custom',
|
navigationStyle: "custom",
|
||||||
navigationBarTitleText: '我的订单',
|
navigationBarTitleText: "我的订单",
|
||||||
navigationBarBackgroundColor:'#FFF',
|
navigationBarBackgroundColor: "#FFF",
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</route>
|
</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<wd-tabs color="#333" inactiveColor="#888" @click="handleClick">
|
<wd-tabs color="#333" inactiveColor="#888" @click="handleClick">
|
||||||
<block v-for="item in tabs" :key="item.state">
|
<block v-for="item in tabs" :key="item.state">
|
||||||
<wd-tab :title="item.tabName" :name="item.state">
|
<wd-tab :title="item.tabName" :name="item.state">
|
||||||
<scroll-view scroll-y class="page-wrapper" @scrolltolower="queryNext">
|
<scroll-view scroll-y class="page-wrapper" @scrolltolower="queryNext">
|
||||||
<!-- <view class="order-wrapper flex flex-col flex-items-center" v-if="Array.isArray(list[item.state]) && list[item.state].length > 0"> -->
|
<!-- <view class="order-wrapper flex flex-col flex-items-center" v-if="Array.isArray(list[item.state]) && list[item.state].length > 0"> -->
|
||||||
<!-- <view v-for="(ele,index) in list[item.state]" :key="`${ele.id}-${item.state}`">
|
<!-- <view v-for="(ele,index) in list[item.state]" :key="`${ele.id}-${item.state}`">
|
||||||
<OrderItem :detail="ele" @pay-event="pay" @detail-event="viewDetail" @pwd-event="viewPwd"/>
|
<OrderItem :detail="ele" @pay-event="pay" @detail-event="viewDetail" @pwd-event="viewPwd"/>
|
||||||
</view> -->
|
</view> -->
|
||||||
<view class="order-wrapper flex flex-col flex-items-center" v-if="Array.isArray(list) && list.length > 0">
|
<view
|
||||||
<view v-for="(ele,index) in list" :key="`${ele.id}-${item.state}`">
|
class="order-wrapper flex flex-col flex-items-center"
|
||||||
<OrderItem
|
v-if="Array.isArray(list) && list.length > 0"
|
||||||
:detail="ele"
|
>
|
||||||
@pay-event="pay"
|
<view v-for="(ele, index) in list" :key="`${ele.id}-${item.state}`">
|
||||||
@detail-event="viewDetail"
|
<OrderItem
|
||||||
@pwd-event="viewPwd"
|
:detail="ele"
|
||||||
@del-event="removeOrder"
|
@pay-event="pay"
|
||||||
@refund-event="refund"
|
@detail-event="viewDetail"
|
||||||
/>
|
@pwd-event="viewPwd"
|
||||||
</view>
|
@del-event="removeOrder"
|
||||||
<view class="no-more" v-if="isLastPage">没有更多了~</view>
|
@refund-event="refund"
|
||||||
</view>
|
/>
|
||||||
<view class="no-data" v-else>
|
</view>
|
||||||
<image
|
<view class="no-more" v-if="isLastPage">没有更多了~</view>
|
||||||
src="/static/ycnc/bg-nodata.png"
|
</view>
|
||||||
mode="scaleToFill"
|
<view class="no-data" v-else>
|
||||||
class="no-img"
|
<image
|
||||||
/>
|
src="/static/ycnc/bg-nodata.png"
|
||||||
<text class="no-text">暂无订单，快去下单吧~</text>
|
mode="scaleToFill"
|
||||||
</view>
|
class="no-img"
|
||||||
</scroll-view>
|
/>
|
||||||
</wd-tab>
|
<text class="no-text">暂无订单，快去下单吧~</text>
|
||||||
</block>
|
</view>
|
||||||
</wd-tabs>
|
</scroll-view>
|
||||||
<wd-message-box />
|
</wd-tab>
|
||||||
|
</block>
|
||||||
|
</wd-tabs>
|
||||||
|
<wd-message-box />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { useMessage } from 'wot-design-uni'
|
import { useMessage } from "wot-design-uni";
|
||||||
import OrderItem from './components/order-item';
|
import OrderItem from "./components/order-item";
|
||||||
import usePay from './hooks/usePay';
|
import {
|
||||||
import { getOrderList,deleteOrder,refundOrder,queryOrderDetail } from '../../api/ycnc';
|
getOrderList,
|
||||||
import { onMounted, ref, unref,reactive,computed } from 'vue';
|
deleteOrder,
|
||||||
import { tabs } from './config';
|
refundOrder,
|
||||||
import {deepClone} from '../../utils/utils'
|
queryOrderDetail,
|
||||||
const message = useMessage()
|
} from "../../api/ycnc";
|
||||||
const pageSize = 10;
|
import { onMounted, ref, unref, reactive, computed } from "vue";
|
||||||
const activeName = ref(0);
|
import { tabs } from "./config";
|
||||||
const total = ref(0);
|
import { deepClone, getQueryString } from "../../utils/utils";
|
||||||
const page = ref(1);
|
const message = useMessage();
|
||||||
const list = ref([]);
|
const pageSize = 10;
|
||||||
const replace = ref(false);
|
const activeName = ref(0);
|
||||||
//页码
|
const total = ref(0);
|
||||||
// const enumPage = tabs.reduce((prev,cur) => {
|
const page = ref(1);
|
||||||
// prev[cur.state] = 1
|
const list = ref([]);
|
||||||
// return prev
|
const replace = ref(false);
|
||||||
// },{})
|
|
||||||
// const page = ref(enumPage)
|
|
||||||
// //总数
|
|
||||||
// const enumObj = tabs.reduce((prev,cur) => {
|
|
||||||
// prev[cur.state] = 0
|
|
||||||
// return prev
|
|
||||||
// },{})
|
|
||||||
// const total = reactive(enumObj);
|
|
||||||
//数据列表
|
|
||||||
// const enumOrder = tabs.reduce((prev,cur) => {
|
|
||||||
// prev[cur.state] = []
|
|
||||||
// return prev
|
|
||||||
// },{})
|
|
||||||
// const list = reactive(enumOrder)
|
|
||||||
|
|
||||||
//获取订单列表
|
//获取订单列表
|
||||||
const queryOrderList = () => {
|
const queryOrderList = () => {
|
||||||
const activeTab = unref(activeName);
|
const activeTab = unref(activeName);
|
||||||
const params = {
|
const tempBackUrl = getQueryString("backUrl");
|
||||||
page:unref(page),
|
const backUrl = tempBackUrl
|
||||||
pageSize:pageSize,
|
? encodeURIComponent(tempBackUrl)
|
||||||
...(activeTab !== 0 && {state:activeTab})
|
: uni.getStorageSync("backUrl");
|
||||||
}
|
const params = {
|
||||||
getOrderList({params}).then(res => {
|
page: unref(page),
|
||||||
const {count,data} = res
|
pageSize: pageSize,
|
||||||
total.value = count
|
backUrl: backUrl,
|
||||||
// Object.assign(list,{[activeTab]:[...list[activeTab],...data]})
|
...(activeTab !== 0 && { state: activeTab }),
|
||||||
if(replace.value){
|
};
|
||||||
const prevPage = page.value - 1;
|
getOrderList({ params })
|
||||||
const prevList = list.value.slice(0, prevPage * pageSize);
|
.then((res) => {
|
||||||
list.value = [...prevList,...data];
|
const { count, data } = res;
|
||||||
}else{
|
total.value = count;
|
||||||
list.value = [...list.value,...data]
|
if (replace.value) {
|
||||||
}
|
const prevPage = page.value - 1;
|
||||||
replace.value = false
|
const prevList = list.value.slice(0, prevPage * pageSize);
|
||||||
}).catch(err => {
|
list.value = [...prevList, ...data];
|
||||||
total.value = 0;
|
} else {
|
||||||
// Object.assign(list,{[activeTab]:[]})
|
list.value = [...list.value, ...data];
|
||||||
list.value = []
|
}
|
||||||
})
|
replace.value = false;
|
||||||
}
|
|
||||||
|
|
||||||
function handleClick({index, name}){
|
|
||||||
page.value = 1;
|
|
||||||
total.value = 0;
|
|
||||||
// Object.assign(list,{[name]:[]})
|
|
||||||
list.value = [];
|
|
||||||
activeName.value = name;
|
|
||||||
// name代表状态值
|
|
||||||
queryOrderList()
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
async function pay(orderData){
|
|
||||||
console.log(orderData);
|
|
||||||
const {order_no,notify_url,price,brand,sign,plain_text,id} = orderData;
|
|
||||||
// const params = {
|
|
||||||
// order_id:id,
|
|
||||||
// order_no: order_no
|
|
||||||
// }
|
|
||||||
// const res = await queryOrderDetail({params})
|
|
||||||
// if(res.third_status === '03'){
|
|
||||||
// uni.showToast({
|
|
||||||
// title: '当前订单已支付成功，无需再支付~',
|
|
||||||
// icon: 'none'
|
|
||||||
// });
|
|
||||||
// replace.value = true;
|
|
||||||
// queryOrderList()
|
|
||||||
// return
|
|
||||||
// }
|
|
||||||
const {payFunc} = usePay();
|
|
||||||
payFunc({order_no,notify_url,TranAmt:price,MerName:brand,sign,plain_text})
|
|
||||||
}
|
|
||||||
|
|
||||||
function viewDetail(orderData){
|
|
||||||
const {id,order_no} = orderData;
|
|
||||||
uni.navigateTo({
|
|
||||||
url:`/pages/ycnc/orderDetail?order_id=${id}&order_no=${order_no}`
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function viewPwd(orderData){
|
|
||||||
const {voucher_link} = orderData
|
|
||||||
if(voucher_link){
|
|
||||||
console.log('跳转外部链接--->',voucher_link);
|
|
||||||
window.location.href = voucher_link
|
|
||||||
}else{
|
|
||||||
console.error(`${voucher_link}无有效值`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeOrder(orderData){
|
|
||||||
message
|
|
||||||
.confirm({
|
|
||||||
msg: '删除订单后无法恢复，确认继续吗？',
|
|
||||||
title: '提示'
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
const {id} = orderData
|
|
||||||
const params = {order_id:id}
|
|
||||||
deleteOrder({params}).then(res => {
|
|
||||||
replace.value = true;
|
|
||||||
queryOrderList()
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err);
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
console.log('点击了取消按钮')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function refund(orderData){
|
|
||||||
const {id} = orderData
|
|
||||||
if(!id){
|
|
||||||
uni.showToast({
|
|
||||||
icon:'none',
|
|
||||||
title: '无有效的订单id',
|
|
||||||
});
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const params = {order_id:id}
|
|
||||||
refundOrder({params}).then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
icon:'success',
|
|
||||||
title: '退款成功',
|
|
||||||
});
|
|
||||||
replace.value = true;
|
|
||||||
queryOrderList();
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(()=>{
|
|
||||||
queryOrderList()
|
|
||||||
})
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
total.value = 0;
|
||||||
|
list.value = [];
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const isLastPage = computed(()=>{
|
function handleClick({ index, name }) {
|
||||||
return unref(page) === Math.ceil(unref(total) / pageSize)
|
page.value = 1;
|
||||||
|
total.value = 0;
|
||||||
|
list.value = [];
|
||||||
|
activeName.value = name;
|
||||||
|
// name代表状态值
|
||||||
|
queryOrderList();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function pay(orderData) {
|
||||||
|
console.log(orderData);
|
||||||
|
const { order_no, notify_url, price, brand, sign, plain_text, id, pay_url } =
|
||||||
|
orderData;
|
||||||
|
window.location.replace(pay_url);
|
||||||
|
}
|
||||||
|
|
||||||
|
function viewDetail(orderData) {
|
||||||
|
const { id, order_no } = orderData;
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/ycnc/orderDetail?order_id=${id}&order_no=${order_no}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function viewPwd(orderData) {
|
||||||
|
const { voucher_link } = orderData;
|
||||||
|
if (voucher_link) {
|
||||||
|
console.log("跳转外部链接--->", voucher_link);
|
||||||
|
window.location.href = voucher_link;
|
||||||
|
} else {
|
||||||
|
console.error(`${voucher_link}无有效值`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeOrder(orderData) {
|
||||||
|
message
|
||||||
|
.confirm({
|
||||||
|
msg: "删除订单后无法恢复，确认继续吗？",
|
||||||
|
title: "提示",
|
||||||
})
|
})
|
||||||
|
.then(() => {
|
||||||
|
const { id } = orderData;
|
||||||
|
const params = { order_id: id };
|
||||||
|
deleteOrder({ params })
|
||||||
|
.then((res) => {
|
||||||
|
replace.value = true;
|
||||||
|
queryOrderList();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
console.log("点击了取消按钮");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function queryNext(){
|
function refund(orderData) {
|
||||||
if(unref(isLastPage)){
|
const { id } = orderData;
|
||||||
console.error('已经是最后一页');
|
if (!id) {
|
||||||
return false;
|
uni.showToast({
|
||||||
};
|
icon: "none",
|
||||||
page.value = page.value + 1
|
title: "无有效的订单id",
|
||||||
queryOrderList()
|
});
|
||||||
}
|
return;
|
||||||
|
}
|
||||||
|
const params = { order_id: id };
|
||||||
|
refundOrder({ params })
|
||||||
|
.then((res) => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: "success",
|
||||||
|
title: "退款成功",
|
||||||
|
});
|
||||||
|
replace.value = true;
|
||||||
|
queryOrderList();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const token = getQueryString("token") || uni.getStorageSync("token");
|
||||||
|
const _tempBackUrl = getQueryString("backUrl");
|
||||||
|
uni.setStorageSync("token", token);
|
||||||
|
if (_tempBackUrl) {
|
||||||
|
uni.setStorageSync("backUrl", encodeURIComponent(_tempBackUrl));
|
||||||
|
}
|
||||||
|
queryOrderList();
|
||||||
|
});
|
||||||
|
|
||||||
|
const isLastPage = computed(() => {
|
||||||
|
return unref(page) === Math.ceil(unref(total) / pageSize);
|
||||||
|
});
|
||||||
|
|
||||||
|
function queryNext() {
|
||||||
|
if (unref(isLastPage)) {
|
||||||
|
console.error("已经是最后一页");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
page.value = page.value + 1;
|
||||||
|
queryOrderList();
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
<style lang="scss" scoped>
|
||||||
.page-wrapper{
|
.page-wrapper {
|
||||||
width:100%;
|
width: 100%;
|
||||||
// height: 100%;
|
// height: 100%;
|
||||||
height: calc(100vh - 42rpx);
|
height: calc(100vh - 42rpx);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background: #FAFBFD;
|
background: #fafbfd;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-bottom:30rpx
|
padding-bottom: 30rpx;
|
||||||
}
|
}
|
||||||
.order-wrapper{
|
.order-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width:100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.no-more{
|
.no-more {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 18rpx;
|
||||||
|
color: #999999;
|
||||||
|
height: 146rpx;
|
||||||
|
padding: 28rpx 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.no-data {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
.no-img {
|
||||||
|
width: 446rpx;
|
||||||
|
height: 446rpx;
|
||||||
|
}
|
||||||
|
.no-text {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 18rpx;
|
font-size: 24rpx;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
height:146rpx;
|
}
|
||||||
padding: 28rpx 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.no-data{
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
.no-img{
|
|
||||||
width:446rpx;
|
|
||||||
height: 446rpx;
|
|
||||||
}
|
|
||||||
.no-text{
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
/* 修改标签页下划线颜色*/
|
/* 修改标签页下划线颜色*/
|
||||||
// :deep(.wd-button.is-primary){
|
// :deep(.wd-button.is-primary){
|
||||||
// background: #EA0000;
|
// background: #EA0000;
|
||||||
// }
|
// }
|
||||||
:deep(.wd-tabs__line) {
|
:deep(.wd-tabs__line) {
|
||||||
background: #EA0000;
|
background: #ea0000;
|
||||||
}
|
}
|
||||||
:deep(.wd-tabs){
|
:deep(.wd-tabs) {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height:100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
:deep(.wd-tab__body){
|
:deep(.wd-tab__body) {
|
||||||
height:calc(100vh - 42rpx);
|
height: calc(100vh - 42rpx);
|
||||||
}
|
}
|
||||||
:deep(.wd-tabs__container){
|
:deep(.wd-tabs__container) {
|
||||||
flex:1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,311 +1,320 @@
|
||||||
<route lang="json5" type="page">
|
<route lang="json5" type="page">
|
||||||
{
|
{
|
||||||
style: {
|
style: {
|
||||||
navigationStyle: 'custom',
|
navigationStyle: "custom",
|
||||||
navigationBarTitleText: '订单详情',
|
navigationBarTitleText: "订单详情",
|
||||||
navigationBarBackgroundColor:'#FFF',
|
navigationBarBackgroundColor: "#FFF",
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</route>
|
</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="w-full h-full flex flex-col flex-items-center page">
|
<view class="w-full h-full flex flex-col flex-items-center page">
|
||||||
<view class="wrapper" v-if="pageType === 1">
|
<view class="wrapper" v-if="pageType === 1">
|
||||||
<view class="pro-info">
|
<view class="pro-info">
|
||||||
<view class="title">订单详情</view>
|
<view class="title">订单详情</view>
|
||||||
<view class="content flex">
|
<view class="content flex">
|
||||||
<image class="pro-img" :src="orderDetail.main_image" />
|
<image class="pro-img" :src="orderDetail.main_image" />
|
||||||
<view class="flex flex-1 flex-col">
|
<view class="flex flex-1 flex-col">
|
||||||
<view class="flex flex-justify-between name" style="margin-bottom:12rpx">
|
<view
|
||||||
<view class="text-over">{{ orderDetail.product_name }}</view>
|
class="flex flex-justify-between name"
|
||||||
<view class="amount"><text>￥</text>{{ orderDetail.price }}<text>元</text></view>
|
style="margin-bottom: 12rpx"
|
||||||
</view>
|
>
|
||||||
<view class="flex flex-justify-between num">
|
<view class="text-over">{{ orderDetail.product_name }}</view>
|
||||||
<view>数量</view>
|
<view class="amount"
|
||||||
<view>x1</view>
|
><text>￥</text>{{ orderDetail.price }}<text>元</text></view
|
||||||
</view>
|
>
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="order-info">
|
<view class="flex flex-justify-between num">
|
||||||
<view class="info-item">订单编号：{{ orderDetail.order_no }}</view>
|
<view>数量</view>
|
||||||
<view class="info-item" v-if="!!orderDetail.exchange_time && ![9].includes(orderDetail.state)">支付时间：{{
|
<view>x1</view>
|
||||||
orderDetail.exchange_time }}</view>
|
|
||||||
<view class="info-item">下单时间：{{ orderDetail.create_time }}</view>
|
|
||||||
<view class="info-item" style="margin-bottom: 24rpx;">订单金额：{{ orderDetail.price }}</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="btns" v-if="pageType === 1">
|
</view>
|
||||||
<view class="btn pwd" @click="viewPwd(orderDetail)"
|
<view class="order-info">
|
||||||
v-if="[3].includes(orderDetail.state) && orderDetail.voucher_link">查看卡券</view>
|
<view class="info-item">订单编号：{{ orderDetail.order_no }}</view>
|
||||||
<view class="btn pwd" @click="pay(orderDetail)" v-if="[1].includes(orderDetail.state)">立即付款</view>
|
<view
|
||||||
<view class="btn pwd" v-if="[4].includes(orderDetail.state)" @click="goRefund">申请退款</view>
|
class="info-item"
|
||||||
<view class="btn back" @click="backIndex">返回首页</view>
|
v-if="!!orderDetail.exchange_time && ![9].includes(orderDetail.state)"
|
||||||
</view>
|
>支付时间：{{ orderDetail.exchange_time }}</view
|
||||||
|
>
|
||||||
|
<view class="info-item">下单时间：{{ orderDetail.create_time }}</view>
|
||||||
|
<view class="info-item" style="margin-bottom: 24rpx"
|
||||||
|
>订单金额：{{ orderDetail.price }}</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="btns" v-if="pageType === 1">
|
||||||
|
<view
|
||||||
|
class="btn pwd"
|
||||||
|
@click="viewPwd(orderDetail)"
|
||||||
|
v-if="[3].includes(orderDetail.state) && orderDetail.voucher_link"
|
||||||
|
>查看卡券</view
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="btn pwd"
|
||||||
|
@click="pay(orderDetail)"
|
||||||
|
v-if="[1].includes(orderDetail.state)"
|
||||||
|
>立即付款</view
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="btn pwd"
|
||||||
|
v-if="[4].includes(orderDetail.state)"
|
||||||
|
@click="goRefund"
|
||||||
|
>申请退款</view
|
||||||
|
>
|
||||||
|
<view class="btn back" @click="backIndex">返回首页</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onShow, onHide, onUnload } from '@dcloudio/uni-app';
|
import { onShow, onHide, onUnload } from "@dcloudio/uni-app";
|
||||||
import { onMounted, reactive, ref, unref } from 'vue';
|
import { onMounted, reactive, ref, unref } from "vue";
|
||||||
import { queryOrderDetail, refundOrder, queryOrderState,login } from '../../api/ycnc';
|
import {
|
||||||
import { getQueryString } from '../../utils/utils'
|
queryOrderDetail,
|
||||||
import usePay from './hooks/usePay';
|
refundOrder,
|
||||||
import useCode from './hooks/useCode';
|
queryOrderState,
|
||||||
const authCode = ref('');
|
login,
|
||||||
const id = ref('');
|
} from "../../api/ycnc";
|
||||||
const orderNo = ref('');
|
import { getQueryString } from "../../utils/utils";
|
||||||
|
|
||||||
|
const id = ref("");
|
||||||
|
const orderNo = ref("");
|
||||||
const orderDetail = reactive({});
|
const orderDetail = reactive({});
|
||||||
const pageType = ref(0)
|
const pageType = ref(0);
|
||||||
let timer = undefined
|
let timer = undefined;
|
||||||
|
|
||||||
// 用onshow 解决h5页面被缓存的问题
|
// 用onshow 解决h5页面被缓存的问题
|
||||||
onShow(async () => {
|
onShow(async () => {
|
||||||
const token = window.localStorage.getItem('token') || '';
|
const token = getQueryString("token") || uni.getStorageSync("token");
|
||||||
if(!token){
|
uni.setStorageSync("token", token);
|
||||||
const code = await useCode();
|
const order_id = getQueryString("order_id");
|
||||||
authCode.value = code
|
const order_no = getQueryString("order_no");
|
||||||
const {token} = await login({params:{code:unref(authCode)}});
|
const isPayBack = getQueryString("isPayBack");
|
||||||
window.localStorage.setItem('token',token);
|
if (!order_id && !order_no) return;
|
||||||
}
|
id.value = order_id;
|
||||||
const order_id = getQueryString('order_id')
|
orderNo.value = order_no;
|
||||||
const order_no = getQueryString('order_no')
|
if (isPayBack) {
|
||||||
const isPayBack = getQueryString('isPayBack')
|
queryEvent();
|
||||||
if (!order_id && !order_no) return
|
} else {
|
||||||
id.value = order_id
|
getDetail();
|
||||||
orderNo.value = order_no;
|
}
|
||||||
if (isPayBack) {
|
});
|
||||||
queryEvent()
|
|
||||||
} else {
|
|
||||||
getDetail();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
onHide(() => {
|
onHide(() => {
|
||||||
timer && clearInterval(timer)
|
timer && clearInterval(timer);
|
||||||
})
|
});
|
||||||
|
|
||||||
onUnload(() => {
|
onUnload(() => {
|
||||||
timer && clearInterval(timer)
|
timer && clearInterval(timer);
|
||||||
})
|
});
|
||||||
|
|
||||||
const backIndex = () => {
|
const backIndex = () => {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/ycnc/index`
|
url: `/pages/ycnc/index`,
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
const timerEvent = () => {
|
const timerEvent = () => {
|
||||||
timer && clearInterval(timer)
|
timer && clearInterval(timer);
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: "加载中",
|
title: "加载中",
|
||||||
mask: true,
|
mask: true,
|
||||||
});
|
});
|
||||||
timer = setInterval(()=>{
|
timer = setInterval(() => {
|
||||||
queryEvent()
|
queryEvent();
|
||||||
}, 2500)
|
}, 2500);
|
||||||
}
|
};
|
||||||
|
|
||||||
const queryEvent = () => {
|
const queryEvent = () => {
|
||||||
uni.hideLoading()
|
uni.hideLoading();
|
||||||
const params = {
|
const params = {
|
||||||
order_id: unref(id),
|
order_id: unref(id),
|
||||||
order_no: unref(orderNo)
|
order_no: unref(orderNo),
|
||||||
|
};
|
||||||
|
queryOrderState({ params }).then((res) => {
|
||||||
|
const { state, voucher_link } = res;
|
||||||
|
if ([3].includes(state)) {
|
||||||
|
if (voucher_link) {
|
||||||
|
timer && clearInterval(timer);
|
||||||
|
window.location.replace(voucher_link);
|
||||||
|
} else {
|
||||||
|
timerEvent();
|
||||||
|
}
|
||||||
|
} else if ([1, 2].includes(state)) {
|
||||||
|
timerEvent();
|
||||||
|
} else {
|
||||||
|
timer && clearInterval(timer);
|
||||||
|
getDetail();
|
||||||
}
|
}
|
||||||
queryOrderState({ params }).then(res => {
|
});
|
||||||
const { state, voucher_link } = res
|
};
|
||||||
if([3].includes(state)){
|
|
||||||
if(voucher_link){
|
|
||||||
timer && clearInterval(timer)
|
|
||||||
window.location.replace(voucher_link)
|
|
||||||
}else{
|
|
||||||
timerEvent()
|
|
||||||
}
|
|
||||||
}else if([1,2].includes(state)){
|
|
||||||
timerEvent()
|
|
||||||
}else{
|
|
||||||
timer && clearInterval(timer)
|
|
||||||
getDetail()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const viewPwd = (detailData) => {
|
const viewPwd = (detailData) => {
|
||||||
const { voucher_link } = detailData
|
const { voucher_link } = detailData;
|
||||||
if (voucher_link) {
|
if (voucher_link) {
|
||||||
console.log(`跳转外部链接-->${voucher_link}`);
|
window.location.href = voucher_link;
|
||||||
window.location.href = voucher_link
|
} else {
|
||||||
} else {
|
console.error(`voucher_link无有效值`);
|
||||||
console.error(`voucher_link无有效值`);
|
}
|
||||||
}
|
};
|
||||||
}
|
|
||||||
|
|
||||||
const goRefund = () => {
|
const goRefund = () => {
|
||||||
const { id } = orderDetail
|
const { id } = orderDetail;
|
||||||
if (!id) {
|
if (!id) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
icon: 'none',
|
icon: "none",
|
||||||
title: '无有效的订单id',
|
title: "无有效的订单id",
|
||||||
});
|
});
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
const params = { order_id: id }
|
const params = { order_id: id };
|
||||||
refundOrder({ params }).then(res => {
|
refundOrder({ params })
|
||||||
uni.showToast({
|
.then((res) => {
|
||||||
icon: 'success',
|
uni.showToast({
|
||||||
title: '退款成功',
|
icon: "success",
|
||||||
});
|
title: "退款成功",
|
||||||
getDetail();
|
});
|
||||||
}).catch(err => {
|
getDetail();
|
||||||
console.log(err);
|
|
||||||
})
|
})
|
||||||
}
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
async function pay(orderData) {
|
async function pay(orderData) {
|
||||||
console.log(orderData);
|
console.log(orderData);
|
||||||
const { order_no, notify_url, price,brand,sign,plain_text,id } = orderData;
|
const { order_no, notify_url, price, brand, sign, plain_text, id, pay_url } =
|
||||||
// const params = {
|
orderData;
|
||||||
// order_id:id,
|
window.location.replace(pay_url);
|
||||||
// order_no: order_no
|
|
||||||
// }
|
|
||||||
// const res = await queryOrderDetail({params})
|
|
||||||
// if(res.third_status === '03'){
|
|
||||||
// uni.showToast({
|
|
||||||
// title: '当前订单已支付成功，无需再支付~',
|
|
||||||
// icon: 'none'
|
|
||||||
// });
|
|
||||||
// getDetail()
|
|
||||||
// return
|
|
||||||
// }
|
|
||||||
const { payFunc } = usePay();
|
|
||||||
payFunc({ order_no, notify_url, TranAmt: price,MerName:brand,sign,plain_text })
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// getDetail()
|
|
||||||
})
|
|
||||||
|
|
||||||
const getDetail = () => {
|
const getDetail = () => {
|
||||||
const params = {
|
const tempBackUrl = getQueryString('backUrl')
|
||||||
order_id: unref(id),
|
const backUrl = tempBackUrl ? encodeURIComponent(tempBackUrl) : uni.getStorageSync('backUrl')
|
||||||
order_no: unref(orderNo)
|
const params = {
|
||||||
}
|
order_id: unref(id),
|
||||||
pageType.value = 1
|
order_no: unref(orderNo),
|
||||||
queryOrderDetail({ params }).then(res => {
|
backUrl:backUrl,
|
||||||
Object.assign(orderDetail, res)
|
};
|
||||||
})
|
pageType.value = 1;
|
||||||
}
|
queryOrderDetail({ params }).then((res) => {
|
||||||
|
Object.assign(orderDetail, res);
|
||||||
|
});
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.page {
|
.page {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
width: 702rpx;
|
width: 702rpx;
|
||||||
height: 486rpx;
|
height: 486rpx;
|
||||||
background: #FFFFFF;
|
background: #ffffff;
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
margin-top: 24rpx;
|
margin-top: 24rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 32rpx 24rpx;
|
padding: 32rpx 24rpx;
|
||||||
|
|
||||||
.pro-info {
|
.pro-info {
|
||||||
border-bottom: 1rpx solid #F0E1E1;
|
border-bottom: 1rpx solid #f0e1e1;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
margin-bottom: 28rpx;
|
margin-bottom: 28rpx;
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
margin-bottom: 24rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
.pro-img {
|
|
||||||
display: block;
|
|
||||||
width: 90rpx;
|
|
||||||
height: 90rpx;
|
|
||||||
margin-right: 34rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-over {
|
|
||||||
max-width: 80%;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #333333;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.amount {
|
|
||||||
color: #333333;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
|
|
||||||
text:nth-child(1) {
|
|
||||||
font-size: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
text:nth-child(2) {
|
|
||||||
font-size: 22rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.num {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #9E9E9E;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-info {
|
.content {
|
||||||
border-bottom: 1rpx solid #F0E1E1;
|
margin-bottom: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
.info-item {
|
.pro-img {
|
||||||
font-weight: 400;
|
display: block;
|
||||||
font-size: 22rpx;
|
width: 90rpx;
|
||||||
color: #6C6C6C;
|
height: 90rpx;
|
||||||
margin-top: 24rpx;
|
margin-right: 34rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-over {
|
||||||
|
max-width: 80%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount {
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
text:nth-child(1) {
|
||||||
|
font-size: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
text:nth-child(2) {
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.num {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #9e9e9e;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-info {
|
||||||
|
border-bottom: 1rpx solid #f0e1e1;
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #6c6c6c;
|
||||||
|
margin-top: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btns {
|
.btns {
|
||||||
margin-top: 146rpx;
|
margin-top: 146rpx;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 312rpx;
|
||||||
|
height: 76rpx;
|
||||||
|
border-radius: 38rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
.pwd {
|
||||||
width: 312rpx;
|
font-weight: 500;
|
||||||
height: 76rpx;
|
font-size: 32rpx;
|
||||||
border-radius: 38rpx;
|
color: #ffffff;
|
||||||
display: flex;
|
background: #ea0000;
|
||||||
flex-direction: column;
|
margin-right: 10rpx;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pwd {
|
.back {
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #FFFFFF;
|
color: #b9c8c7;
|
||||||
background: #EA0000;
|
border: 2rpx solid #b9c8c7;
|
||||||
margin-right: 10rpx;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.back {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #B9C8C7;
|
|
||||||
border: 2rpx solid #B9C8C7;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,31 @@
|
||||||
//获取url后面拼接的参数
|
//获取url后面拼接的参数
|
||||||
export const getQueryString = (name) => {
|
export const getQueryString = (paramName) => {
|
||||||
let urlStr = window.location.href.split('?')[1]
|
// let urlStr = window.location.href.split('?')[1]
|
||||||
const urlSearchParams = new URLSearchParams(urlStr)
|
// const urlSearchParams = new URLSearchParams(urlStr)
|
||||||
const result = Object.fromEntries(urlSearchParams.entries())
|
// const result = Object.fromEntries(urlSearchParams.entries())
|
||||||
return name ? result[name] : result
|
// return paramName ? result[paramName] : result
|
||||||
|
|
||||||
|
// 如果未传入 URL，则使用当前页面的 URL
|
||||||
|
const targetUrl = window.location.href;
|
||||||
|
// 解析 URL 中的查询字符串部分
|
||||||
|
const queryString = targetUrl.split('?')[1];
|
||||||
|
|
||||||
|
// 如果没有查询字符串，直接返回空对象或 null
|
||||||
|
if (!queryString) return paramName ? null : {};
|
||||||
|
|
||||||
|
// 处理查询字符串中的每个参数
|
||||||
|
const params = queryString.split('&').reduce((acc, pair) => {
|
||||||
|
const [key, value] = pair.split('=').map(decodeURIComponent);
|
||||||
|
if (acc[key] !== undefined) {
|
||||||
|
acc[key] = Array.isArray(acc[key]) ? [...acc[key], value] : [acc[key], value];
|
||||||
|
} else {
|
||||||
|
acc[key] = value;
|
||||||
|
}
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
// 如果指定了参数名，则返回对应值，否则返回整个参数对象
|
||||||
|
return paramName ? params[paramName] || null : params;
|
||||||
}
|
}
|
||||||
|
|
||||||
//是否iOS设备
|
//是否iOS设备
|
||||||
|
|
@ -39,4 +61,57 @@ export function generateUUID() {
|
||||||
uuid += (i === 12 ? 4 : i === 16 ? (random & 3) | 8 : random).toString(16);
|
uuid += (i === 12 ? 4 : i === 16 ? (random & 3) | 8 : random).toString(16);
|
||||||
}
|
}
|
||||||
return uuid;
|
return uuid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getQueryParams(url) {
|
||||||
|
// 若未传入URL，则使用当前页面URL
|
||||||
|
const targetUrl = url || window.location.href;
|
||||||
|
// 用于存储查询参数的对象
|
||||||
|
const queryParams = {};
|
||||||
|
// 查找URL中问号的位置
|
||||||
|
const queryStart = targetUrl.indexOf('?');
|
||||||
|
|
||||||
|
// 如果URL中不存在问号，说明没有查询参数
|
||||||
|
if (queryStart === -1) {
|
||||||
|
return queryParams;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提取查询字符串部分（不包含问号）
|
||||||
|
const queryString = targetUrl.substring(queryStart + 1);
|
||||||
|
// 查找查询字符串中哈希符号的位置
|
||||||
|
const hashIndex = queryString.indexOf('#');
|
||||||
|
// 移除哈希符号及其后面的内容
|
||||||
|
const cleanQuery = hashIndex !== -1 ? queryString.substring(0, hashIndex) : queryString;
|
||||||
|
|
||||||
|
// 如果查询字符串为空，直接返回空对象
|
||||||
|
if (!cleanQuery) {
|
||||||
|
return queryParams;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按"&"分割查询字符串为参数数组
|
||||||
|
const params = cleanQuery.split('&');
|
||||||
|
|
||||||
|
// 遍历参数数组
|
||||||
|
for (const param of params) {
|
||||||
|
// 按"="分割每个参数为键值对
|
||||||
|
const [key, value] = param.split('=');
|
||||||
|
|
||||||
|
if (key) {
|
||||||
|
// 对键和值进行URL解码
|
||||||
|
const decodedKey = decodeURIComponent(key);
|
||||||
|
const decodedValue = value !== undefined ? decodeURIComponent(value) : '';
|
||||||
|
|
||||||
|
// 处理重复参数名的情况，将其值存储为数组
|
||||||
|
if (queryParams.hasOwnProperty(decodedKey)) {
|
||||||
|
if (!Array.isArray(queryParams[decodedKey])) {
|
||||||
|
queryParams[decodedKey] = [queryParams[decodedKey]];
|
||||||
|
}
|
||||||
|
queryParams[decodedKey].push(decodedValue);
|
||||||
|
} else {
|
||||||
|
queryParams[decodedKey] = decodedValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return queryParams;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue