Compare commits
4 Commits
Author | SHA1 | Date |
---|---|---|
|
f15cabc538 | |
|
2b82ab702d | |
|
7ff654ab22 | |
|
2d92c6594c |
|
@ -1,4 +1,5 @@
|
|||
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'
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
|
||||
NODE_ENV = 'production'
|
||||
# 邮储奶茶活动(正式环境)
|
||||
VITE_BASE_URL = 'https://milk.api.cdlsxd.cn'
|
||||
VITE_BASE_URL = 'https://tea.cdlsxd.cn'
|
||||
VITE_YCNC_MERCH_CODE = '100510102303326'
|
||||
|
||||
|
||||
# 邮储音视频活动(生产环境)
|
||||
# VITE_BASE_URL = 'https://mv.h5.cdlsxd.cn'
|
||||
# VITE_YCNC_MERCH_CODE = '100510102303326'
|
||||
|
|
10
.env.test
|
@ -1,5 +1,11 @@
|
|||
NODE_ENV = 'test'
|
||||
|
||||
# 邮储奶茶活动(测试环境)
|
||||
VITE_BASE_URL = 'http://milk.test.api.cdlsxd.cn'
|
||||
VITE_YCNC_MERCH_CODE = '100310100018908'
|
||||
# VITE_BASE_URL = 'http://milk.h5.test.86698.cn'
|
||||
VITE_BASE_URL = ''
|
||||
VITE_YCNC_MERCH_CODE = '100310100018908'
|
||||
|
||||
|
||||
# 邮储音视频活动(测试环境)
|
||||
# VITE_BASE_URL = 'https://gateway.dev.cdlsxd.cn'
|
||||
# VITE_YCNC_MERCH_CODE = '100310100018908'
|
|
@ -4,6 +4,7 @@ import path from 'path'
|
|||
|
||||
const config = {
|
||||
pages:'./src/pages',
|
||||
// pagesInclude:['ycysp/home.vue','ycysp/pay.vue','ycysp/order.vue','ycysp/orderDetail.vue',]
|
||||
pagesInclude:['ycnc']
|
||||
}
|
||||
const { pages, pagesInclude } = config
|
||||
|
|
|
@ -16,16 +16,15 @@
|
|||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
<script src="./static/YT_Client_api.js"></script>
|
||||
<script>
|
||||
<!-- <script>
|
||||
document.addEventListener('touchmove', function(e) {
|
||||
e.preventDefault();
|
||||
}, {passive: false})
|
||||
</script>
|
||||
<!-- <script src="https://fastly.jsdelivr.net/npm/eruda"></script>
|
||||
</script> -->
|
||||
<script src="https://fastly.jsdelivr.net/npm/eruda"></script>
|
||||
<script>
|
||||
eruda.init()
|
||||
</script> -->
|
||||
</script>
|
||||
<script>
|
||||
// var clickCount = 0
|
||||
// var timer = null
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
"type": "home",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "奶茶活动",
|
||||
"navigationBarTitleText": "奶茶专区",
|
||||
"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,186 @@
|
|||
<route lang="json5" type="page">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '商品详情',
|
||||
navigationBarBackgroundColor:'#FFF',
|
||||
},
|
||||
}
|
||||
{
|
||||
style: {
|
||||
navigationStyle: "custom",
|
||||
navigationBarTitleText: "商品详情",
|
||||
navigationBarBackgroundColor: "#FFF",
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="w-full h-full flex flex-col">
|
||||
<scroll-view scroll-y class="w-full h-full overflow-y-auto flex-1">
|
||||
<view class="container">
|
||||
<image class="banner" :src="detailObj.main_image" @click="testEvent"></image>
|
||||
<view class="detail flex flex-col flex-justify-between">
|
||||
<view class="proname">{{ detailObj.name }}</view>
|
||||
<view class="num">
|
||||
<text class="price">¥{{ detailObj.price }}</text>
|
||||
<text class="ori">{{ detailObj.show_price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="desc" v-html="detailObj.description">
|
||||
|
||||
</view>
|
||||
<!-- <view class="desc">
|
||||
<view class="w-full h-full flex flex-col">
|
||||
<scroll-view scroll-y class="w-full h-full overflow-y-auto flex-1">
|
||||
<view class="container">
|
||||
<image class="banner" :src="detailObj.main_image"></image>
|
||||
<view class="detail flex flex-col flex-justify-between">
|
||||
<view class="proname">{{ detailObj.name }}</view>
|
||||
<view class="num">
|
||||
<text class="price">¥{{ detailObj.price }}</text>
|
||||
<text class="ori">{{ detailObj.show_price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="desc" v-html="detailObj.description"> </view>
|
||||
<!-- <view class="desc">
|
||||
<div class="big">购买须知</div>
|
||||
<div class="small">【有效期】</div>
|
||||
<p class="prog">
|
||||
代金券到账后,10天有效,逾期视为自动放弃,不退不补。
|
||||
</p>
|
||||
</view> -->
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="pay-container">
|
||||
<view class="pay-btn" @click="toPay">
|
||||
立即支付
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="pay-container">
|
||||
<view class="pay-btn" @click="toPay"> 立即支付 </view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, unref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { queryDetail, goPay, login } from '../../api/ycnc';
|
||||
import usePay from './hooks/usePay';
|
||||
import useCode from './hooks/useCode';
|
||||
import { onMounted, reactive, ref, unref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { queryDetail, goPay, login } from "../../api/ycnc";
|
||||
import { getQueryString } from "../../utils/utils";
|
||||
|
||||
const id = ref('')
|
||||
const authCode = ref('');
|
||||
const id = ref("");
|
||||
|
||||
const detailObj = reactive({})
|
||||
const detailObj = reactive({});
|
||||
|
||||
onLoad((options) => {
|
||||
const {product_id} = options;
|
||||
id.value = product_id
|
||||
onLoad((options) => {
|
||||
const { product_id } = options;
|
||||
id.value = product_id;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const token = getQueryString("token");
|
||||
const backUrl = getQueryString('backUrl')
|
||||
token && uni.setStorageSync("token", token);
|
||||
backUrl && uni.setStorageSync("backUrl", encodeURIComponent(backUrl));
|
||||
getDetail();
|
||||
});
|
||||
|
||||
const getDetail = () => {
|
||||
const params = {
|
||||
product_id: unref(id),
|
||||
};
|
||||
queryDetail({ params }).then((res) => {
|
||||
Object.assign(detailObj, res);
|
||||
});
|
||||
};
|
||||
|
||||
const toPay = async () => {
|
||||
const params = {
|
||||
product_id: unref(id),
|
||||
backUrl: uni.getStorageSync("backUrl"),
|
||||
};
|
||||
goPay({ params })
|
||||
.then((res) => {
|
||||
const { order_no, notify_url, sign, plain_text, pay_url } = res;
|
||||
window.location.replace(pay_url);
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.banner{
|
||||
width: 100%;
|
||||
height:600rpx;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
<style lang="scss" scoped>
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.detail{
|
||||
width: 694rpx;
|
||||
// height: 138rpx;
|
||||
border-bottom: 2rpx solid rgba(0,0,0,0.04);
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
padding:25rpx 0;
|
||||
.proname{
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
.price{
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
color: #EA0000;
|
||||
margin-right:18rpx;
|
||||
}
|
||||
.ori{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #A5A5A5;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.detail {
|
||||
width: 694rpx;
|
||||
// height: 138rpx;
|
||||
border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
padding: 25rpx 0;
|
||||
.proname {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.price {
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
color: #ea0000;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
.ori {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #a5a5a5;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
.desc{
|
||||
width: 694rpx;
|
||||
margin:0 auto;
|
||||
padding-top:44rpx;
|
||||
padding-bottom:24rpx;
|
||||
//旧版
|
||||
&:deep(.big-title) {
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #3D3D3D;
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
&:deep(.small-area) {
|
||||
margin-bottom:16rpx;
|
||||
}
|
||||
&:deep(.small-title){
|
||||
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;
|
||||
.desc {
|
||||
width: 694rpx;
|
||||
margin: 0 auto;
|
||||
padding-top: 44rpx;
|
||||
padding-bottom: 24rpx;
|
||||
//旧版
|
||||
&:deep(.big-title) {
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #3d3d3d;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
&:deep(.small-area) {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
&:deep(.small-title) {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
margin:25rpx auto;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</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,151 @@
|
|||
<route lang="json5" type="home">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '奶茶活动',
|
||||
navigationBarBackgroundColor:'#FFF',
|
||||
},
|
||||
}
|
||||
{
|
||||
style: {
|
||||
navigationStyle: "custom",
|
||||
navigationBarTitleText: "奶茶专区",
|
||||
navigationBarBackgroundColor: "#FFF",
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<scroll-view scroll-y class="page-wrapper">
|
||||
<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 v-for="(item,key) in productList" :key="key">
|
||||
<brand :products="item" :brandName="key"/>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view scroll-y class="page-wrapper">
|
||||
<view class="nav-btn" @click="toOrder">我的订单</view>
|
||||
<view class="wrapper flex flex-col flex-items-center box-border">
|
||||
<view v-for="(item, key) in productList" :key="key">
|
||||
<brand :products="item" :brandName="key" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import brand from './components/brand';
|
||||
import { getProductList, goPay, login } from '../../api/ycnc'
|
||||
import { onMounted, ref, provide, unref } from 'vue';
|
||||
// import { getQueryString , isIOS, isAndroid } from '../../utils/utils';
|
||||
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)
|
||||
}
|
||||
import brand from "./components/brand";
|
||||
import { getProductList, goPay, login } from "../../api/ycnc";
|
||||
import { onMounted, ref, provide, unref } from "vue";
|
||||
import { getQueryString, getQueryParams } from "../../utils/utils";
|
||||
import config from "./config";
|
||||
const productList = ref([]);
|
||||
|
||||
const goDetail = (productData) => {
|
||||
const {ProductId} = productData
|
||||
uni.navigateTo({
|
||||
url:`/pages/ycnc/detail?product_id=${ProductId}`
|
||||
})
|
||||
}
|
||||
const handleBuy = (productData) => {
|
||||
pay(productData);
|
||||
};
|
||||
|
||||
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);
|
||||
})
|
||||
}
|
||||
const goDetail = (productData) => {
|
||||
const { ProductId } = productData;
|
||||
uni.navigateTo({
|
||||
url: `/pages/ycnc/detail?product_id=${ProductId}`,
|
||||
});
|
||||
};
|
||||
|
||||
provide('custom-events',{
|
||||
handleBuy,
|
||||
goDetail
|
||||
const pay = (productData) => {
|
||||
const { ProductId, voucherAmount, brandFlag } = productData;
|
||||
const params = {
|
||||
product_id: ProductId,
|
||||
backUrl: uni.getStorageSync('backUrl'),
|
||||
};
|
||||
goPay({ params })
|
||||
.then((res) => {
|
||||
const { order_no, notify_url, sign, plain_text, pay_url } = res;
|
||||
window.location.replace(pay_url);
|
||||
})
|
||||
|
||||
const toOrder = () => {
|
||||
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);
|
||||
}
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
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);
|
||||
})
|
||||
provide("custom-events", {
|
||||
handleBuy,
|
||||
goDetail,
|
||||
});
|
||||
|
||||
const toOrder = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/ycnc/order",
|
||||
});
|
||||
};
|
||||
|
||||
// function utf8ToBase64(str) {
|
||||
// return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
|
||||
// return String.fromCharCode('0x' + p1);
|
||||
// }));
|
||||
// }
|
||||
|
||||
onMounted(async () => {
|
||||
queryProducts();
|
||||
console.log(
|
||||
"url中所有查询参数---》》》",
|
||||
getQueryParams(window.location.href)
|
||||
);
|
||||
const token = getQueryString("token");
|
||||
const backUrl = getQueryString("backUrl");
|
||||
token && uni.setStorageSync("token", token);
|
||||
backUrl && 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>
|
||||
|
||||
<style lang='scss'>
|
||||
.page-wrapper{
|
||||
// width: 100vw;
|
||||
// height: 100vh;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
<style lang="scss">
|
||||
.page-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.nav-btn{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top:42rpx;
|
||||
width: 42rpx;
|
||||
height: 132rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx 0rpx 0rpx 16rpx;
|
||||
font-weight: normal;
|
||||
font-size: 22rpx;
|
||||
color: #4BB8FF;
|
||||
writing-mode: vertical-lr;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.nav-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 42rpx;
|
||||
width: 42rpx;
|
||||
height: 132rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx 0rpx 0rpx 16rpx;
|
||||
font-weight: normal;
|
||||
font-size: 22rpx;
|
||||
color: #4bb8ff;
|
||||
writing-mode: vertical-lr;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.wrapper{
|
||||
width:100%;
|
||||
min-height:100vh;
|
||||
background: url('/static/ycnc/bg.png') no-repeat;
|
||||
background-size:cover;
|
||||
padding-top:730rpx;
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: url("/static/ycnc/bg.png") no-repeat;
|
||||
background-size: cover;
|
||||
padding-top: 730rpx;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
@ -1,279 +1,257 @@
|
|||
<route lang="json5" type="page">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '我的订单',
|
||||
navigationBarBackgroundColor:'#FFF',
|
||||
},
|
||||
}
|
||||
{
|
||||
style: {
|
||||
navigationStyle: "custom",
|
||||
navigationBarTitleText: "我的订单",
|
||||
navigationBarBackgroundColor: "#FFF",
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<wd-tabs color="#333" inactiveColor="#888" @click="handleClick">
|
||||
<block v-for="item in tabs" :key="item.state">
|
||||
<wd-tab :title="item.tabName" :name="item.state">
|
||||
<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 v-for="(ele,index) in list[item.state]" :key="`${ele.id}-${item.state}`">
|
||||
<wd-tabs color="#333" inactiveColor="#888" @click="handleClick">
|
||||
<block v-for="item in tabs" :key="item.state">
|
||||
<wd-tab :title="item.tabName" :name="item.state">
|
||||
<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 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"/>
|
||||
</view> -->
|
||||
<view class="order-wrapper flex flex-col flex-items-center" v-if="Array.isArray(list) && list.length > 0">
|
||||
<view v-for="(ele,index) in list" :key="`${ele.id}-${item.state}`">
|
||||
<OrderItem
|
||||
:detail="ele"
|
||||
@pay-event="pay"
|
||||
@detail-event="viewDetail"
|
||||
@pwd-event="viewPwd"
|
||||
@del-event="removeOrder"
|
||||
@refund-event="refund"
|
||||
/>
|
||||
</view>
|
||||
<view class="no-more" v-if="isLastPage">没有更多了~</view>
|
||||
</view>
|
||||
<view class="no-data" v-else>
|
||||
<image
|
||||
src="/static/ycnc/bg-nodata.png"
|
||||
mode="scaleToFill"
|
||||
class="no-img"
|
||||
/>
|
||||
<text class="no-text">暂无订单,快去下单吧~</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</wd-tab>
|
||||
</block>
|
||||
</wd-tabs>
|
||||
<wd-message-box />
|
||||
<view
|
||||
class="order-wrapper flex flex-col flex-items-center"
|
||||
v-if="Array.isArray(list) && list.length > 0"
|
||||
>
|
||||
<view v-for="(ele, index) in list" :key="`${ele.id}-${item.state}`">
|
||||
<OrderItem
|
||||
:detail="ele"
|
||||
@pay-event="pay"
|
||||
@detail-event="viewDetail"
|
||||
@pwd-event="viewPwd"
|
||||
@del-event="removeOrder"
|
||||
@refund-event="refund"
|
||||
/>
|
||||
</view>
|
||||
<view class="no-more" v-if="isLastPage">没有更多了~</view>
|
||||
</view>
|
||||
<view class="no-data" v-else>
|
||||
<image
|
||||
src="/static/ycnc/bg-nodata.png"
|
||||
mode="scaleToFill"
|
||||
class="no-img"
|
||||
/>
|
||||
<text class="no-text">暂无订单,快去下单吧~</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</wd-tab>
|
||||
</block>
|
||||
</wd-tabs>
|
||||
<wd-message-box />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useMessage } from 'wot-design-uni'
|
||||
import OrderItem from './components/order-item';
|
||||
import usePay from './hooks/usePay';
|
||||
import { getOrderList,deleteOrder,refundOrder,queryOrderDetail } from '../../api/ycnc';
|
||||
import { onMounted, ref, unref,reactive,computed } from 'vue';
|
||||
import { tabs } from './config';
|
||||
import {deepClone} from '../../utils/utils'
|
||||
const message = useMessage()
|
||||
const pageSize = 10;
|
||||
const activeName = ref(0);
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const list = ref([]);
|
||||
const replace = ref(false);
|
||||
//页码
|
||||
// const enumPage = tabs.reduce((prev,cur) => {
|
||||
// prev[cur.state] = 1
|
||||
// return prev
|
||||
// },{})
|
||||
// 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)
|
||||
import { useMessage } from "wot-design-uni";
|
||||
import OrderItem from "./components/order-item";
|
||||
import {
|
||||
getOrderList,
|
||||
deleteOrder,
|
||||
refundOrder,
|
||||
queryOrderDetail,
|
||||
} from "../../api/ycnc";
|
||||
import { onMounted, ref, unref, reactive, computed } from "vue";
|
||||
import { tabs } from "./config";
|
||||
import { deepClone, getQueryString } from "../../utils/utils";
|
||||
const message = useMessage();
|
||||
const pageSize = 10;
|
||||
const activeName = ref(0);
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const list = ref([]);
|
||||
const replace = ref(false);
|
||||
|
||||
//获取订单列表
|
||||
const queryOrderList = () => {
|
||||
const activeTab = unref(activeName);
|
||||
const params = {
|
||||
page:unref(page),
|
||||
pageSize:pageSize,
|
||||
...(activeTab !== 0 && {state:activeTab})
|
||||
}
|
||||
getOrderList({params}).then(res => {
|
||||
const {count,data} = res
|
||||
total.value = count
|
||||
// Object.assign(list,{[activeTab]:[...list[activeTab],...data]})
|
||||
if(replace.value){
|
||||
const prevPage = page.value - 1;
|
||||
const prevList = list.value.slice(0, prevPage * pageSize);
|
||||
list.value = [...prevList,...data];
|
||||
}else{
|
||||
list.value = [...list.value,...data]
|
||||
}
|
||||
replace.value = false
|
||||
}).catch(err => {
|
||||
total.value = 0;
|
||||
// Object.assign(list,{[activeTab]:[]})
|
||||
list.value = []
|
||||
})
|
||||
}
|
||||
|
||||
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()
|
||||
//获取订单列表
|
||||
const queryOrderList = () => {
|
||||
const activeTab = unref(activeName);
|
||||
const params = {
|
||||
page: unref(page),
|
||||
pageSize: pageSize,
|
||||
backUrl: uni.getStorageSync("backUrl"),
|
||||
...(activeTab !== 0 && { state: activeTab }),
|
||||
};
|
||||
getOrderList({ params })
|
||||
.then((res) => {
|
||||
const { count, data } = res;
|
||||
total.value = count;
|
||||
if (replace.value) {
|
||||
const prevPage = page.value - 1;
|
||||
const prevList = list.value.slice(0, prevPage * pageSize);
|
||||
list.value = [...prevList, ...data];
|
||||
} else {
|
||||
list.value = [...list.value, ...data];
|
||||
}
|
||||
replace.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
total.value = 0;
|
||||
list.value = [];
|
||||
});
|
||||
};
|
||||
|
||||
const isLastPage = computed(()=>{
|
||||
return unref(page) === Math.ceil(unref(total) / pageSize)
|
||||
function handleClick({ index, name }) {
|
||||
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(){
|
||||
if(unref(isLastPage)){
|
||||
console.error('已经是最后一页');
|
||||
return false;
|
||||
};
|
||||
page.value = page.value + 1
|
||||
queryOrderList()
|
||||
}
|
||||
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();
|
||||
});
|
||||
|
||||
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>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.page-wrapper{
|
||||
width:100%;
|
||||
// height: 100%;
|
||||
height: calc(100vh - 42rpx);
|
||||
overflow-y: auto;
|
||||
background: #FAFBFD;
|
||||
box-sizing: border-box;
|
||||
padding-bottom:30rpx
|
||||
<style lang="scss" scoped>
|
||||
.page-wrapper {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
height: calc(100vh - 42rpx);
|
||||
overflow-y: auto;
|
||||
background: #fafbfd;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
.order-wrapper{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width:100%;
|
||||
.order-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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-size: 18rpx;
|
||||
font-size: 24rpx;
|
||||
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){
|
||||
// background: #EA0000;
|
||||
// }
|
||||
:deep(.wd-tabs__line) {
|
||||
background: #EA0000;
|
||||
background: #ea0000;
|
||||
}
|
||||
:deep(.wd-tabs){
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height:100%;
|
||||
:deep(.wd-tabs) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
:deep(.wd-tab__body){
|
||||
height:calc(100vh - 42rpx);
|
||||
:deep(.wd-tab__body) {
|
||||
height: calc(100vh - 42rpx);
|
||||
}
|
||||
:deep(.wd-tabs__container){
|
||||
flex:1;
|
||||
:deep(.wd-tabs__container) {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
@ -1,311 +1,319 @@
|
|||
<route lang="json5" type="page">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '订单详情',
|
||||
navigationBarBackgroundColor:'#FFF',
|
||||
},
|
||||
}
|
||||
{
|
||||
style: {
|
||||
navigationStyle: "custom",
|
||||
navigationBarTitleText: "订单详情",
|
||||
navigationBarBackgroundColor: "#FFF",
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="w-full h-full flex flex-col flex-items-center page">
|
||||
<view class="wrapper" v-if="pageType === 1">
|
||||
<view class="pro-info">
|
||||
<view class="title">订单详情</view>
|
||||
<view class="content flex">
|
||||
<image class="pro-img" :src="orderDetail.main_image" />
|
||||
<view class="flex flex-1 flex-col">
|
||||
<view class="flex flex-justify-between name" style="margin-bottom:12rpx">
|
||||
<view class="text-over">{{ orderDetail.product_name }}</view>
|
||||
<view class="amount"><text>¥</text>{{ orderDetail.price }}<text>元</text></view>
|
||||
</view>
|
||||
<view class="flex flex-justify-between num">
|
||||
<view>数量</view>
|
||||
<view>x1</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="w-full h-full flex flex-col flex-items-center page">
|
||||
<view class="wrapper" v-if="pageType === 1">
|
||||
<view class="pro-info">
|
||||
<view class="title">订单详情</view>
|
||||
<view class="content flex">
|
||||
<image class="pro-img" :src="orderDetail.main_image" />
|
||||
<view class="flex flex-1 flex-col">
|
||||
<view
|
||||
class="flex flex-justify-between name"
|
||||
style="margin-bottom: 12rpx"
|
||||
>
|
||||
<view class="text-over">{{ orderDetail.product_name }}</view>
|
||||
<view class="amount"
|
||||
><text>¥</text>{{ orderDetail.price }}<text>元</text></view
|
||||
>
|
||||
</view>
|
||||
<view class="order-info">
|
||||
<view class="info-item">订单编号:{{ orderDetail.order_no }}</view>
|
||||
<view class="info-item" v-if="!!orderDetail.exchange_time && ![9].includes(orderDetail.state)">支付时间:{{
|
||||
orderDetail.exchange_time }}</view>
|
||||
<view class="info-item">下单时间:{{ orderDetail.create_time }}</view>
|
||||
<view class="info-item" style="margin-bottom: 24rpx;">订单金额:{{ orderDetail.price }}</view>
|
||||
<view class="flex flex-justify-between num">
|
||||
<view>数量</view>
|
||||
<view>x1</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>
|
||||
<view class="order-info">
|
||||
<view class="info-item">订单编号:{{ orderDetail.order_no }}</view>
|
||||
<view
|
||||
class="info-item"
|
||||
v-if="!!orderDetail.exchange_time && ![9].includes(orderDetail.state)"
|
||||
>支付时间:{{ 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 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>
|
||||
|
||||
<script setup>
|
||||
import { onShow, onHide, onUnload } from '@dcloudio/uni-app';
|
||||
import { onMounted, reactive, ref, unref } from 'vue';
|
||||
import { queryOrderDetail, refundOrder, queryOrderState,login } from '../../api/ycnc';
|
||||
import { getQueryString } from '../../utils/utils'
|
||||
import usePay from './hooks/usePay';
|
||||
import useCode from './hooks/useCode';
|
||||
const authCode = ref('');
|
||||
const id = ref('');
|
||||
const orderNo = ref('');
|
||||
import { onShow, onHide, onUnload } from "@dcloudio/uni-app";
|
||||
import { onMounted, reactive, ref, unref } from "vue";
|
||||
import {
|
||||
queryOrderDetail,
|
||||
refundOrder,
|
||||
queryOrderState,
|
||||
login,
|
||||
} from "../../api/ycnc";
|
||||
import { getQueryString } from "../../utils/utils";
|
||||
|
||||
const id = ref("");
|
||||
const orderNo = ref("");
|
||||
const orderDetail = reactive({});
|
||||
const pageType = ref(0)
|
||||
let timer = undefined
|
||||
const pageType = ref(0);
|
||||
let timer = undefined;
|
||||
|
||||
// 用onshow 解决h5页面被缓存的问题
|
||||
onShow(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 order_id = getQueryString('order_id')
|
||||
const order_no = getQueryString('order_no')
|
||||
const isPayBack = getQueryString('isPayBack')
|
||||
if (!order_id && !order_no) return
|
||||
id.value = order_id
|
||||
orderNo.value = order_no;
|
||||
if (isPayBack) {
|
||||
queryEvent()
|
||||
} else {
|
||||
getDetail();
|
||||
}
|
||||
})
|
||||
const order_id = getQueryString("order_id");
|
||||
const order_no = getQueryString("order_no");
|
||||
const isPayBack = getQueryString("isPayBack");
|
||||
if (!order_id && !order_no) return;
|
||||
id.value = order_id;
|
||||
orderNo.value = order_no;
|
||||
if (isPayBack) {
|
||||
queryEvent();
|
||||
} else {
|
||||
getDetail();
|
||||
}
|
||||
});
|
||||
|
||||
onHide(() => {
|
||||
timer && clearInterval(timer)
|
||||
})
|
||||
timer && clearInterval(timer);
|
||||
});
|
||||
|
||||
onUnload(() => {
|
||||
timer && clearInterval(timer)
|
||||
})
|
||||
timer && clearInterval(timer);
|
||||
});
|
||||
|
||||
const backIndex = () => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/ycnc/index`
|
||||
})
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/ycnc/index`,
|
||||
});
|
||||
};
|
||||
|
||||
const timerEvent = () => {
|
||||
timer && clearInterval(timer)
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
});
|
||||
timer = setInterval(()=>{
|
||||
queryEvent()
|
||||
}, 2500)
|
||||
}
|
||||
timer && clearInterval(timer);
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
});
|
||||
timer = setInterval(() => {
|
||||
queryEvent();
|
||||
}, 2500);
|
||||
};
|
||||
|
||||
const queryEvent = () => {
|
||||
uni.hideLoading()
|
||||
const params = {
|
||||
order_id: unref(id),
|
||||
order_no: unref(orderNo)
|
||||
uni.hideLoading();
|
||||
const backUrl = uni.getStorageSync('backUrl')
|
||||
const params = {
|
||||
order_id: unref(id),
|
||||
order_no: unref(orderNo),
|
||||
backUrl:backUrl,
|
||||
};
|
||||
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 { voucher_link } = detailData
|
||||
if (voucher_link) {
|
||||
console.log(`跳转外部链接-->${voucher_link}`);
|
||||
window.location.href = voucher_link
|
||||
} else {
|
||||
console.error(`voucher_link无有效值`);
|
||||
}
|
||||
}
|
||||
const { voucher_link } = detailData;
|
||||
if (voucher_link) {
|
||||
window.location.href = voucher_link;
|
||||
} else {
|
||||
console.error(`voucher_link无有效值`);
|
||||
}
|
||||
};
|
||||
|
||||
const goRefund = () => {
|
||||
const { id } = orderDetail
|
||||
if (!id) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '无有效的订单id',
|
||||
});
|
||||
return
|
||||
}
|
||||
const params = { order_id: id }
|
||||
refundOrder({ params }).then(res => {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '退款成功',
|
||||
});
|
||||
getDetail();
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
const { id } = orderDetail;
|
||||
if (!id) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "无有效的订单id",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const params = { order_id: id };
|
||||
refundOrder({ params })
|
||||
.then((res) => {
|
||||
uni.showToast({
|
||||
icon: "success",
|
||||
title: "退款成功",
|
||||
});
|
||||
getDetail();
|
||||
})
|
||||
}
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
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'
|
||||
// });
|
||||
// getDetail()
|
||||
// return
|
||||
// }
|
||||
const { payFunc } = usePay();
|
||||
payFunc({ order_no, notify_url, TranAmt: price,MerName:brand,sign,plain_text })
|
||||
console.log(orderData);
|
||||
const { order_no, notify_url, price, brand, sign, plain_text, id, pay_url } =
|
||||
orderData;
|
||||
window.location.replace(pay_url);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// getDetail()
|
||||
})
|
||||
|
||||
const getDetail = () => {
|
||||
const params = {
|
||||
order_id: unref(id),
|
||||
order_no: unref(orderNo)
|
||||
}
|
||||
pageType.value = 1
|
||||
queryOrderDetail({ params }).then(res => {
|
||||
Object.assign(orderDetail, res)
|
||||
})
|
||||
}
|
||||
const backUrl = uni.getStorageSync('backUrl')
|
||||
const params = {
|
||||
order_id: unref(id),
|
||||
order_no: unref(orderNo),
|
||||
backUrl:backUrl,
|
||||
};
|
||||
pageType.value = 1;
|
||||
queryOrderDetail({ params }).then((res) => {
|
||||
Object.assign(orderDetail, res);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
background-color: #fafafa;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 702rpx;
|
||||
height: 486rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx 24rpx;
|
||||
width: 702rpx;
|
||||
height: 486rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx 24rpx;
|
||||
|
||||
.pro-info {
|
||||
border-bottom: 1rpx solid #F0E1E1;
|
||||
.pro-info {
|
||||
border-bottom: 1rpx solid #f0e1e1;
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
border-bottom: 1rpx solid #F0E1E1;
|
||||
.content {
|
||||
margin-bottom: 24rpx;
|
||||
font-weight: 400;
|
||||
|
||||
.info-item {
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #6C6C6C;
|
||||
margin-top: 24rpx;
|
||||
.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 {
|
||||
border-bottom: 1rpx solid #f0e1e1;
|
||||
|
||||
.info-item {
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #6c6c6c;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
margin-top: 146rpx;
|
||||
margin-top: 146rpx;
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
width: 312rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 38rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 312rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 38rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pwd {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
background: #ea0000;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.pwd {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
background: #EA0000;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.back {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #B9C8C7;
|
||||
border: 2rpx solid #B9C8C7;
|
||||
}
|
||||
.back {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #b9c8c7;
|
||||
border: 2rpx solid #b9c8c7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<view class="flex coupon-wrapper">
|
||||
<view class="flex flex-justify-center flex-items-center left">
|
||||
<text>¥</text>
|
||||
<text>10</text>
|
||||
</view>
|
||||
<view class="flex flex-justify-between flex-items-center right">
|
||||
<view class="coupon-info">
|
||||
<view class="coupon-name">芒果全屏会员年卡适用</view>
|
||||
<view class="coupon-time">2024.09.19 -2024.10.31</view>
|
||||
<view class="coupon-time">单日限领取1张</view>
|
||||
</view>
|
||||
<view class="flex flex-justify-center flex-items-center btn"
|
||||
>立即领取</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, unref, onMounted } from "vue";
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.coupon-wrapper {
|
||||
width: 686rpx;
|
||||
height: 178rpx;
|
||||
box-sizing: border-box;
|
||||
background: url("@/static/ycysp/coupon.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.left {
|
||||
width: 150rpx;
|
||||
height: 100%;
|
||||
color: #0e9bf2;
|
||||
letter-spacing: 0.04em;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
margin-right: 20rpx;
|
||||
|
||||
text:first-child {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
text:last-child {
|
||||
font-size: 74rpx;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10rpx;
|
||||
padding-right: 20rpx;
|
||||
overflow: hidden;
|
||||
.coupon-info {
|
||||
width: calc(100% - 30rpx - 162rpx);
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.coupon-name {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #1f93da;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.coupon-time {
|
||||
font-size: 24rpx;
|
||||
color: #78839e;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
.btn {
|
||||
width: 162rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 27rpx;
|
||||
opacity: 1;
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
line-height: 32rpx;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<view
|
||||
class="wrapper"
|
||||
:style="{ backgroundImage: `url(${detail.brand_logo})` }"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
viewBox="0 0 13 13"
|
||||
class="svg"
|
||||
@click="checkedEvent"
|
||||
>
|
||||
<g>
|
||||
<ellipse
|
||||
cx="6.5"
|
||||
cy="6.5"
|
||||
rx="6.5"
|
||||
ry="6.5"
|
||||
fill="#FFFFFF"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
<path
|
||||
d="M6.85467,0.16026C6.65747,-0.049906,6.33416,-0.0538585,6.13257,0.151333L2.65289,3.69208L0.855769,1.81926C0.669146,1.62458,0.356251,1.63538,0.156706,1.84316C-0.0428302,2.05098,-0.0532221,2.37714,0.133625,2.57177L2.33038,4.86098C2.51696,5.05539,2.82989,5.04459,3.0294,4.83682C3.07511,4.78922,3.10934,4.73525,3.13501,4.67819C3.15477,4.66321,3.17447,4.649,3.19236,4.63059L6.84614,0.91282C7.048,0.707426,7.05164,0.370686,6.85467,0.16026L6.85467,0.16026Z"
|
||||
:fill="checkedColor[detail.id]"
|
||||
fill-opacity="1"
|
||||
class="gou"
|
||||
v-if="detail.isChecked"
|
||||
/>
|
||||
<ellipse
|
||||
cx="6.5"
|
||||
cy="6.5"
|
||||
rx="6.2"
|
||||
ry="6.2"
|
||||
fill-opacity="0"
|
||||
stroke-opacity="1"
|
||||
:stroke="checkedColor[detail.id]"
|
||||
fill="none"
|
||||
stroke-width="0.6"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, unref, onMounted } from "vue";
|
||||
import { checkedColor } from "../config";
|
||||
|
||||
const props = defineProps({
|
||||
detail: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(["checked"]);
|
||||
|
||||
const checkedEvent = () => {
|
||||
emits("checked", props.detail.id);
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
// width:226rpx;
|
||||
width: 100%;
|
||||
height: 110rpx;
|
||||
box-sizing: border-box;
|
||||
// background: url('@/static/ycysp/cloud.webp') no-repeat;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
}
|
||||
.gou {
|
||||
width: 14rpx;
|
||||
height: 10rpx;
|
||||
transform: translate(6rpx, 8rpx);
|
||||
}
|
||||
.svg {
|
||||
position: absolute;
|
||||
right: 8rpx;
|
||||
top: 8rpx;
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,236 @@
|
|||
<template>
|
||||
<view class="order-item-wrapper flex flex-col box-border" @click="goDetail">
|
||||
<view class="nav-info flex flex-justify-between">
|
||||
<view>订单编号:{{ detail.order_no }}</view>
|
||||
<view :style="{ color: stateColor[detail.status] || '' }">{{
|
||||
stateConfig[detail.status]
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="order-info">
|
||||
<view class="content flex">
|
||||
<image :src="detail.main_image" class="pro-img" />
|
||||
<view class="flex flex-1 flex-col">
|
||||
<view class="flex flex-justify-between name info-item">
|
||||
<view class="text-over">{{ detail.product_name }}</view>
|
||||
<view class="amount"
|
||||
><text>¥</text>{{ detail.order_amount }}<text>元</text></view
|
||||
>
|
||||
</view>
|
||||
<view class="flex num">
|
||||
<view>充值账号:</view>
|
||||
<view>{{ maskPhoneNumber(detail.account) }}</view>
|
||||
</view>
|
||||
<view class="flex flex-justify-between num">
|
||||
<view>数量</view>
|
||||
<view>x1</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex flex-justify-between time">
|
||||
<view>下单时间:{{ detail.create_time }}</view>
|
||||
<!-- <view v-if="[1].includes(detail.status)">优惠金额:¥{{ discount }}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="bottoms">
|
||||
<!-- <view class="pay-des" v-if="[1].includes(detail.status)">
|
||||
<view class="count-item">共 1 件,应付总额:<text style="text-decoration: line-through;">¥{{ detail.order_amount }}</text></view>
|
||||
<view class="number-item">实际支付:¥{{ detail.wait_amount }}</view>
|
||||
</view> -->
|
||||
<view class="btns">
|
||||
<!-- <view class="btn del" @click="goDel">删除订单</view> -->
|
||||
<view class="btn pay" v-if="[1].includes(detail.status)" @click="goPay"
|
||||
>立即付款</view
|
||||
>
|
||||
<view
|
||||
class="btn pay"
|
||||
@click="goRefund"
|
||||
v-if="[4].includes(detail.status)"
|
||||
>申请退款</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { stateConfig, stateColor } from "../config";
|
||||
const props = defineProps({
|
||||
detail: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const emits = defineEmits([
|
||||
"pay-event",
|
||||
"detail-event",
|
||||
"pwd-event",
|
||||
"del-event",
|
||||
]);
|
||||
|
||||
function goPay(e) {
|
||||
if (e.stopPropagation) {
|
||||
//W3C阻止冒泡方法
|
||||
e.stopPropagation();
|
||||
}
|
||||
emits("pay-event", props.detail);
|
||||
}
|
||||
|
||||
const discount = computed(() => {
|
||||
if (!Object.keys(props.detail).length) return 0;
|
||||
return (
|
||||
(Number(props.detail.order_amount) * 100 -
|
||||
Number(props.detail.wait_amount) * 100) /
|
||||
100
|
||||
);
|
||||
});
|
||||
|
||||
function maskPhoneNumber(phoneNumber) {
|
||||
return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
|
||||
}
|
||||
|
||||
function goDetail(e) {
|
||||
emits("detail-event", props.detail);
|
||||
}
|
||||
|
||||
function goDel(e) {
|
||||
if (e.stopPropagation) {
|
||||
//W3C阻止冒泡方法
|
||||
e.stopPropagation();
|
||||
}
|
||||
emits("del-event", props.detail);
|
||||
}
|
||||
|
||||
function goRefund(e) {
|
||||
if (e.stopPropagation) {
|
||||
//W3C阻止冒泡方法
|
||||
e.stopPropagation();
|
||||
}
|
||||
emits("refund-event", props.detail);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.order-item-wrapper {
|
||||
width: 702rpx;
|
||||
// height: 386rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
margin: 24rpx 0 16rpx;
|
||||
}
|
||||
.nav-info {
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
:first-child {
|
||||
color: #333333;
|
||||
}
|
||||
:last-child {
|
||||
color: #787878;
|
||||
}
|
||||
}
|
||||
.order-info {
|
||||
margin-top: 24rpx;
|
||||
.content {
|
||||
margin-bottom: 24rpx;
|
||||
font-weight: 400;
|
||||
.pro-img {
|
||||
display: block;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin-right: 34rpx;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
font-size: 22rpx;
|
||||
color: #6c6c6c;
|
||||
}
|
||||
.info-item {
|
||||
font-weight: bold;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.text-over {
|
||||
max-width: 80%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.amount {
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
text:nth-child(1) {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
text:nth-child(2) {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
font-weight: 700;
|
||||
}
|
||||
.num {
|
||||
font-size: 20rpx;
|
||||
color: #9e9e9e;
|
||||
font-weight: 400;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
.count-item {
|
||||
font-size: 22rpx;
|
||||
color: #878787;
|
||||
text-align: right;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.number-item {
|
||||
font-size: 24rpx;
|
||||
color: #2e92ff;
|
||||
text-align: right;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.bottoms {
|
||||
padding: 10rpx 0 12rpx;
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 24rpx;
|
||||
.btn {
|
||||
width: 168rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 68rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 48rpx;
|
||||
}
|
||||
.del {
|
||||
color: #545454;
|
||||
border: 2rpx solid #b9c8c7;
|
||||
}
|
||||
.pay {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(270deg, #2c91ff 0%, #9ad2ff 100%);
|
||||
}
|
||||
.view {
|
||||
background: #ffffff;
|
||||
border-radius: 68rpx;
|
||||
border: 2rpx solid #ea0000;
|
||||
color: #ea0000;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
margin-top: 24rpx;
|
||||
width: 662rpx;
|
||||
height: 1rpx;
|
||||
background-color: #e1e1f0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<view
|
||||
class="flex flex-col flex-items-center flex-justify-center re-wrapper"
|
||||
:class="{ 'is-checked': detail.isSelected }"
|
||||
@click="selectEvent"
|
||||
>
|
||||
<view class="type-name">{{ detail.product_type }}</view>
|
||||
<view class="flex type-amount">
|
||||
<view class="flex flex-col flex-justify-end icon">¥</view>
|
||||
<view class="num">{{ detail.sell_price }}</view>
|
||||
</view>
|
||||
<view class="type-ori">原价{{ detail.price }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, unref, onMounted } from "vue";
|
||||
const props = defineProps({
|
||||
detail: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(["selected"]);
|
||||
|
||||
const selectEvent = () => {
|
||||
emits("selected", props.detail.id);
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.re-wrapper {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
opacity: 1;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #ececec;
|
||||
}
|
||||
.is-checked {
|
||||
background: #dcefff;
|
||||
border: 1.6rpx solid #2d91ff;
|
||||
}
|
||||
.type-name {
|
||||
width: 80%;
|
||||
font-size: 26rpx;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
color: #070b1b;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
.type-amount {
|
||||
margin-top: 6rpx;
|
||||
color: $sub-price-color;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
.icon {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 8rpx;
|
||||
margin-right:4rpx;
|
||||
}
|
||||
.num {
|
||||
/* 价格 */
|
||||
font-size: 48rpx;
|
||||
}
|
||||
}
|
||||
.type-ori {
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
text-decoration: line-through;
|
||||
color: #a4c4fa;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,167 @@
|
|||
<template>
|
||||
<view
|
||||
class="flex pos-relative wrapper flex-justify-between"
|
||||
:class="{
|
||||
small: ['small'].includes(type),
|
||||
large: ['large'].includes(type),
|
||||
}"
|
||||
>
|
||||
<view
|
||||
class="flex flex-items-center flex-justify-center pos-absolute tips"
|
||||
v-if="['small'].includes(type)"
|
||||
>每日限量50张</view
|
||||
>
|
||||
<view
|
||||
class="amount"
|
||||
:style="{ width: ['small'].includes(type) ? '120rpx' : '140rpx' }"
|
||||
>
|
||||
<view class="icon">¥</view>
|
||||
<view class="number">100</view>
|
||||
</view>
|
||||
<view class="operation" v-if="['small'].includes(type)">
|
||||
<view class="name">优酷喵喵年卡适用</view>
|
||||
<view class="flex flex-items-center flex-justify-center btn"
|
||||
>立即领取</view
|
||||
>
|
||||
</view>
|
||||
<view class="operation-large" v-else>
|
||||
<view class="name-tips">
|
||||
<view class="name-large">芒果全屏会员年卡适用</view>
|
||||
<view class="tips-large">每日限量50张</view>
|
||||
</view>
|
||||
<view class="flex flex-items-center flex-justify-center btn-large"
|
||||
>立即领取</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, unref, onMounted } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: "small",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
height: 136rpx;
|
||||
}
|
||||
.small {
|
||||
width: 322rpx;
|
||||
background: url("@/static/ycysp/ticket-small.webp") no-repeat;
|
||||
margin-bottom: 18rpx;
|
||||
background-size: cover;
|
||||
}
|
||||
.large {
|
||||
width: 662rpx;
|
||||
background: url("@/static/ycysp/ticket-large.webp") no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.tips {
|
||||
border-radius: 20rpx 0rpx 20rpx 0rpx;
|
||||
opacity: 1;
|
||||
background: #69c5ff;
|
||||
width: 100rpx;
|
||||
height: 20rpx;
|
||||
width: 100rpx;
|
||||
font-size: 12rpx;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.04em;
|
||||
color: #ffffff;
|
||||
}
|
||||
.amount {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.04em;
|
||||
color: $price-color;
|
||||
}
|
||||
.icon {
|
||||
font-size: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.number {
|
||||
font-size: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.operation {
|
||||
width: 180rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15rpx;
|
||||
}
|
||||
.name {
|
||||
width: 100%;
|
||||
font-size: 22rpx;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: 0em;
|
||||
color: $text-color;
|
||||
overflow: hidden; /*文本超出隐藏*/
|
||||
display: -webkit-box; /*盒子模型微弹性伸缩模型*/
|
||||
-webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
|
||||
-webkit-line-clamp: 2; /*文本显示3行*/
|
||||
}
|
||||
.btn {
|
||||
margin-top: 10rpx;
|
||||
width: 134rpx;
|
||||
height: 34rpx;
|
||||
background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
|
||||
border-radius: 38rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: normal;
|
||||
line-height: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.operation-large {
|
||||
width: 500rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 24rpx 0 10rpx;
|
||||
}
|
||||
.name-tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.name-large {
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.04em;
|
||||
color: #1f93da;
|
||||
}
|
||||
.tips-large {
|
||||
font-size: 20rpx;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.04em;
|
||||
color: #8ca1d1;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
.btn-large {
|
||||
width: 162rpx;
|
||||
height: 64rpx;
|
||||
background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
|
||||
border-radius: 68rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
line-height: 64rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,84 @@
|
|||
const config = {
|
||||
1:{
|
||||
name:'优酷',
|
||||
},
|
||||
2:{
|
||||
name:'腾讯',
|
||||
},
|
||||
3:{
|
||||
name:'网易云',
|
||||
},
|
||||
4:{
|
||||
name:'芒果TV',
|
||||
},
|
||||
5:{
|
||||
name:'QQ音乐',
|
||||
},
|
||||
6:{
|
||||
name:'喜马拉雅',
|
||||
},
|
||||
7:{
|
||||
name:'哔哩哔哩',
|
||||
},
|
||||
8:{
|
||||
name:'爱奇艺',
|
||||
},
|
||||
}
|
||||
|
||||
export const stateConfig = {
|
||||
1: "待支付",
|
||||
2: "已支付",
|
||||
3: "充值中",
|
||||
4: "充值失败",
|
||||
5: "退款中",
|
||||
6: "退款失败",
|
||||
7: "退款成功",
|
||||
8: "充值成功",
|
||||
9: "订单作废",
|
||||
10:'支付失败'
|
||||
};
|
||||
|
||||
export const stateColor = {
|
||||
2: "#FF911A",
|
||||
3: "#FF8400",
|
||||
4: "#FF0000",
|
||||
7: "#EA722D",
|
||||
8: "#FF0000",
|
||||
10: "#FF0000"
|
||||
};
|
||||
|
||||
export const checkedColor = {
|
||||
1: "#4A98FB",
|
||||
2: "#4A98FB",
|
||||
3: "#FE3B34",
|
||||
4: "#FF8103",
|
||||
5: "#17BE73",
|
||||
6: "#F82801",
|
||||
7: "#FE306E",
|
||||
8: "#61D93F",
|
||||
};
|
||||
|
||||
export const tabs = [
|
||||
{
|
||||
tabName: "全部订单",
|
||||
status: 0,
|
||||
},
|
||||
{
|
||||
tabName: "待付款",
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
tabName: "处理中",
|
||||
status: 2,
|
||||
},
|
||||
{
|
||||
tabName: "已完成",
|
||||
status: 8,
|
||||
},
|
||||
{
|
||||
tabName: "已退款",
|
||||
status: 7,
|
||||
},
|
||||
];
|
||||
|
||||
export default config
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<view class="page-wrapper">
|
||||
<couponItem />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, unref, onMounted} from 'vue';
|
||||
import couponItem from './components/coupon-item.vue';
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.page-wrapper{
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,454 @@
|
|||
<route lang="json5" type="home">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: "custom",
|
||||
navigationBarTitleText: "音视频专区",
|
||||
navigationBarBackgroundColor: "#FFF",
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<scroll-view class="page-wrapper" scroll-y>
|
||||
<view class="w-full box-border banner-container">
|
||||
<image
|
||||
src="@/static/ycysp/banner.webp"
|
||||
mode="scaleToFill"
|
||||
class="w-full h-full"
|
||||
/>
|
||||
</view>
|
||||
<!-- //优惠券 -->
|
||||
<!-- <view class="ticket-container">
|
||||
<view class="title">
|
||||
<view class="title-line"></view>
|
||||
<view class="title-text">领券更划算</view>
|
||||
<view class="title-more">我的优惠券</view>
|
||||
</view>
|
||||
<view class="flex flex-wrap flex-justify-between">
|
||||
<ticketRecieve />
|
||||
<ticketRecieve />
|
||||
<ticketRecieve type="large"/>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- //选择充值类型的会员 -->
|
||||
<view class="member-container">
|
||||
<view class="title">
|
||||
<view class="title-text">选择影音会员</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="scroll" :scroll-left="scrollLeft" scroll-with-animation>
|
||||
<view class="swiper">
|
||||
<view v-for="(item, index) in brandArr" class="member-item">
|
||||
<member :key="item.id" :detail="item" @checked="handleChecked" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- //充值选项 -->
|
||||
<view class="recharge-container">
|
||||
<view class="title">
|
||||
<view class="title-text">充值选项</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="recharge-scroll">
|
||||
<view v-for="(item, index) in productArr" class="recharge-item">
|
||||
<rechargeItem
|
||||
:key="item.id"
|
||||
:detail="item"
|
||||
@selected="handleSelected"
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- //手机号 -->
|
||||
<view class="input-container">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="请输入手机号充值"
|
||||
placeholder-class="pcs"
|
||||
v-model="account"
|
||||
/>
|
||||
</view>
|
||||
<!-- 下一步 -->
|
||||
<view
|
||||
class="flex flex-items-center flex-justify-center next-btn"
|
||||
@click="nextEvent"
|
||||
>
|
||||
下一步
|
||||
</view>
|
||||
<!-- 描述 -->
|
||||
<view class="description">
|
||||
<view class="small-title">产品介绍</view>
|
||||
<view class="small-text"
|
||||
>1、充值后可登录官方APP<text class="small-red"
|
||||
>查看会员状态及有效期,</text
|
||||
>过期不可使用。</view
|
||||
>
|
||||
<view class="small-text"
|
||||
>2、<text class="small-red"
|
||||
>充值前请您确认充值信息是否正确,一旦提交无法取消或更改。</text
|
||||
>如因账号信息输入错误导致充值至他人账户,仍视为充值成功,无法补券。</view
|
||||
>
|
||||
<view class="small-text"
|
||||
>3、此权益中包含的优酷黄金会员、芒果视频会员可在手机、电脑、平板上使用,不支持电视端,不支持投屏。<text
|
||||
class="small-red"
|
||||
>QQ音乐支持QQ号或手机号,</text
|
||||
>其余会员账号均为手机号。</view
|
||||
>
|
||||
<view class="small-text"
|
||||
>4、本产品仅适用于中国大陆地区用户,暂不支持开通中国港澳台、海外地区服务。</view
|
||||
>
|
||||
<view class="small-text"
|
||||
>5、如有疑问请联系成都蓝色兄弟网络科技有限公司,<text class="small-red"
|
||||
>客服电话400-623-9566</text
|
||||
>(服务时间09:00-18:00)。
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 40rpx"></view>
|
||||
<!-- 我的订单 -->
|
||||
<view
|
||||
class="flex flex-justify-center flex-items-center order-btn"
|
||||
@click="toOrder"
|
||||
>我的<br />订单</view
|
||||
>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, unref, onMounted } from "vue";
|
||||
import {onLoad} from "@dcloudio/uni-app";
|
||||
// import ticketRecieve from './components/ticket-recieve.vue';
|
||||
import member from "./components/member.vue";
|
||||
import rechargeItem from "./components/recharge-item.vue";
|
||||
import { getBrandList, getProductList, login } from "@/api/ycysp";
|
||||
import { generateUUID,getQueryString } from "@/utils/utils";
|
||||
import { createOrder } from "@/api/ycysp";
|
||||
import useCode from "./hooks/useCode";
|
||||
// const reg =
|
||||
// /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;
|
||||
// const _reg = /^[1-9][0-9]{4,}$/;
|
||||
const brandArr = ref([]);
|
||||
const productArr = ref([]);
|
||||
const account = ref("");
|
||||
const authCode = ref("");
|
||||
const scrollLeft = ref(0);
|
||||
|
||||
//获取品牌
|
||||
const getBrand = () => {
|
||||
return getBrandList()
|
||||
.then((res) => {
|
||||
const { list } = res;
|
||||
const is_anchor_brand_id = getQueryString('brand_id')
|
||||
brandArr.value = list.map((item, index) => ({
|
||||
...item,
|
||||
isChecked: is_anchor_brand_id ? item.id === Number(is_anchor_brand_id) : index === 0,
|
||||
}));
|
||||
setTimeout(()=>{
|
||||
scrollLeft.value = 60
|
||||
},500)
|
||||
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
};
|
||||
|
||||
//获取商品
|
||||
const getProduct = () => {
|
||||
const checkedBrand = brandArr.value.find((item) => item.isChecked);
|
||||
const params = { brand_id: checkedBrand.id };
|
||||
getProductList({ params })
|
||||
.then((res) => {
|
||||
const { list } = res;
|
||||
const is_anchor_product_id = getQueryString('product_id')
|
||||
productArr.value = list.map((item, index) => ({
|
||||
...item,
|
||||
isSelected: is_anchor_product_id ? item.id === Number(is_anchor_product_id) : index === 0,
|
||||
}));
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
};
|
||||
|
||||
//选中品牌
|
||||
const handleChecked = (checkedId) => {
|
||||
brandArr.value = brandArr.value.map((item, index) => {
|
||||
const { id, isChecked } = item;
|
||||
if (checkedId === id) {
|
||||
return { ...item, isChecked: !isChecked };
|
||||
}
|
||||
return { ...item, isChecked: false };
|
||||
});
|
||||
getProduct();
|
||||
};
|
||||
|
||||
//选中商品
|
||||
const handleSelected = (selectedId) => {
|
||||
productArr.value = productArr.value.map((item, index) => {
|
||||
const { id, isSelected } = item;
|
||||
if (selectedId === id) {
|
||||
return { ...item, isSelected: !isSelected };
|
||||
}
|
||||
return { ...item, isSelected: false };
|
||||
});
|
||||
};
|
||||
|
||||
//下一步事件
|
||||
const nextEvent = () => {
|
||||
const selectProduct = productArr.value.find((item) => item.isSelected);
|
||||
if (!selectProduct) {
|
||||
uni.showToast({
|
||||
title: "请选择充值选项",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!account.value) {
|
||||
uni.showToast({
|
||||
title: "请填写充值手机号",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
// if (!reg.test(account.value)) {
|
||||
// uni.showToast({
|
||||
// title: "充值账号格式不正确,应为手机号",
|
||||
// icon: "none",
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
addOrder(selectProduct.id);
|
||||
};
|
||||
|
||||
const addOrder = (id) => {
|
||||
const params = {
|
||||
account: unref(account),
|
||||
product_id: id,
|
||||
};
|
||||
createOrder({ params })
|
||||
.then((res) => {
|
||||
const { order_no, notify_url, sign, plain_text } = res;
|
||||
uni.navigateTo({
|
||||
url: `/pages/ycysp/pay?order_no=${order_no}`,
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
};
|
||||
|
||||
const toOrder = () => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/ycysp/order`,
|
||||
});
|
||||
};
|
||||
|
||||
onLoad((options) => {
|
||||
const {brand_id,product_id} = options;
|
||||
console.log(options)
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await getBrand();
|
||||
getProduct();
|
||||
const token = window.localStorage.getItem("token") || "";
|
||||
if (!token) {
|
||||
const code = await useCode();
|
||||
authCode.value = code
|
||||
// authCode.value = generateUUID();
|
||||
const { token } = await login({ params: { code: unref(authCode) } });
|
||||
window.localStorage.setItem("token", token);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
opacity: 1;
|
||||
// background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
|
||||
background: #ffffff;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
height: 338rpx;
|
||||
padding: 32rpx 20rpx 0;
|
||||
background: url("@/static/ycysp/banner-bg.webp") no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.ticket-container {
|
||||
width: 710rpx;
|
||||
height: 416rpx;
|
||||
border-radius: 28rpx;
|
||||
opacity: 1;
|
||||
background: #ffffff;
|
||||
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
|
||||
margin: 40rpx auto 0;
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-bottom: 2rpx;
|
||||
|
||||
.title-line {
|
||||
width: 10rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 0rpx 6rpx 6rpx 0rpx;
|
||||
opacity: 1;
|
||||
background: linear-gradient(180deg, #95ceff 0%, #439fff 100%);
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #212f3b;
|
||||
margin-left: 14rpx;
|
||||
font-family: PingFang SC-Bold;
|
||||
}
|
||||
|
||||
.title-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 26rpx;
|
||||
font-weight: normal;
|
||||
color: #666e7e;
|
||||
}
|
||||
}
|
||||
|
||||
.member-container {
|
||||
width: 100%;
|
||||
padding-left: 20rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 40rpx auto 0;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
width: 100%;
|
||||
// height:250rpx;
|
||||
overflow-x: auto;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: calc((100vw - 68rpx) / 3 * 4 + 64rpx);
|
||||
}
|
||||
|
||||
.member-item {
|
||||
margin: 16rpx 16rpx 0 0;
|
||||
width: calc((100vw - 68rpx) / 3);
|
||||
}
|
||||
|
||||
.recharge-container {
|
||||
width: 100%;
|
||||
margin: 40rpx auto 0;
|
||||
padding-left: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.recharge-scroll {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.recharge-item {
|
||||
display: inline-flex;
|
||||
margin: 20rpx 16rpx 0 0;
|
||||
// width: calc((100vw - 68rpx) / 3.5);
|
||||
width: 204rpx;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
width: 710rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 84rpx;
|
||||
opacity: 1;
|
||||
background: #eef7ff;
|
||||
margin: 36rpx auto 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
input {
|
||||
width: 100%;
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
color: #8dbff6;
|
||||
}
|
||||
}
|
||||
|
||||
.pcs {
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
color: #8dbff6;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
width: 710rpx;
|
||||
height: 88rpx;
|
||||
padding: 12rpx 28rpx;
|
||||
margin: 20rpx auto 0;
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: 0em;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(270deg, #3194ff 0%, #96cfff 100%);
|
||||
box-sizing: border-box;
|
||||
border-radius: 392rpx;
|
||||
}
|
||||
|
||||
.description {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.small-title {
|
||||
/* 标题二 */
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
line-height: 32rpx;
|
||||
letter-spacing: 0px;
|
||||
color: #0f0f0f;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
line-height: 44rpx;
|
||||
color: #383838;
|
||||
}
|
||||
|
||||
.small-red {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
position: fixed;
|
||||
right: 20rpx;
|
||||
bottom: 100rpx;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
line-height: 32rpx;
|
||||
letter-spacing: 0px;
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
background: rgba(45, 145, 255, 0.6);
|
||||
border-radius: 96rpx;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,29 @@
|
|||
import md5 from "js-md5";
|
||||
export default function useCode() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const authCallback = (params) => {
|
||||
console.log("authCallback-use", params);
|
||||
const { code } = params;
|
||||
resolve(code);
|
||||
};
|
||||
const getNewAuthorization = () => {
|
||||
let appId = import.meta.env.VITE_YCNC_APPID;
|
||||
let time = Date.now().toString();
|
||||
let secret = import.meta.env.VITE_YCNC_SECRET;
|
||||
let signBefore = appId + time + secret;
|
||||
let sign = md5(signBefore); //普通md5
|
||||
let param = {
|
||||
appId: appId,
|
||||
sign: sign,
|
||||
time: time,
|
||||
tran_code: "157",
|
||||
fn: "authCallback",
|
||||
needBind: "",
|
||||
};
|
||||
console.log("auth-param157-use", param);
|
||||
Fw.device.api.getNewAuthorization(param);
|
||||
};
|
||||
window.authCallback = authCallback;
|
||||
getNewAuthorization();
|
||||
});
|
||||
}
|
|
@ -0,0 +1,45 @@
|
|||
import dayjs from "dayjs";
|
||||
import md5 from "js-md5";
|
||||
|
||||
const handleParams = (obj) =>
|
||||
Object.entries(obj).reduce((total, curr) => {
|
||||
if (!total) {
|
||||
total += `${curr[0]}=${curr[1]}`;
|
||||
} else {
|
||||
total += `|${curr[0]}=${curr[1]}`;
|
||||
}
|
||||
return total;
|
||||
}, "");
|
||||
|
||||
export default function usePay() {
|
||||
const payFunc = (args) => {
|
||||
const { order_no, notify_url, TranAmt, MerName, sign, plain_text } = args;
|
||||
const MercCode = import.meta.env.VITE_YCNC_MERCH_CODE;
|
||||
const tranAmt = Number(TranAmt).toFixed(2);
|
||||
const Plain = {
|
||||
MercUrl: notify_url,
|
||||
TranAmt: tranAmt,
|
||||
TermSsn: order_no,
|
||||
BackLink: encodeURIComponent(
|
||||
`${window.location.origin}${
|
||||
window.location.pathname || ""
|
||||
}/#/pages/ycysp/orderDetail?order_no=${order_no}&isPayBack=true`
|
||||
),
|
||||
psbcmcc: "LSXD",
|
||||
TxnDt: dayjs(Date.now()).format("YYYY-MM-DD"),
|
||||
MercCode: MercCode,
|
||||
IsIntegral: "1",
|
||||
MerName: MerName,
|
||||
};
|
||||
const params = {
|
||||
Plain: handleParams(Plain),
|
||||
plainText: plain_text,
|
||||
sign: sign,
|
||||
Signature: "",
|
||||
};
|
||||
console.log("CodePay-plain", Plain);
|
||||
console.log("CodePay-params", params);
|
||||
Fw.device.api.handCodePay(params);
|
||||
};
|
||||
return { payFunc };
|
||||
}
|
|
@ -0,0 +1,251 @@
|
|||
<route lang="json5" type="page">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: "custom",
|
||||
navigationBarTitleText: "我的订单",
|
||||
navigationBarBackgroundColor: "#FFF",
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<wd-tabs color="#333" inactiveColor="#888" @click="handleClick">
|
||||
<block v-for="item in tabs" :key="item.status">
|
||||
<wd-tab :title="item.tabName" :name="item.status">
|
||||
<scroll-view scroll-y class="page-wrapper" @scrolltolower="queryNext">
|
||||
<view
|
||||
class="order-wrapper flex flex-col flex-items-center"
|
||||
v-if="Array.isArray(listData) && listData.length > 0"
|
||||
>
|
||||
<view
|
||||
v-for="(ele, index) in listData"
|
||||
:key="`${ele.id}-${item.status}`"
|
||||
>
|
||||
<OrderItem
|
||||
:detail="ele"
|
||||
@pay-event="pay"
|
||||
@detail-event="viewDetail"
|
||||
@del-event="removeOrder"
|
||||
@refund-event="refund"
|
||||
/>
|
||||
</view>
|
||||
<view class="no-more" v-if="isLastPage">没有更多了~</view>
|
||||
</view>
|
||||
<view class="no-data" v-else>
|
||||
<image
|
||||
src="/static/ycysp/bg-nodata.png"
|
||||
mode="scaleToFill"
|
||||
class="no-img"
|
||||
/>
|
||||
<text class="no-text">暂无订单,快去下单吧~</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</wd-tab>
|
||||
</block>
|
||||
</wd-tabs>
|
||||
<wd-message-box />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useMessage } from "wot-design-uni";
|
||||
import OrderItem from "./components/order-item";
|
||||
import usePay from "./hooks/usePay";
|
||||
import { getOrderList, refundOrder } from "../../api/ycysp";
|
||||
import { onMounted, ref, unref, reactive, computed } from "vue";
|
||||
import { tabs } from "./config";
|
||||
import { deepClone } from "../../utils/utils";
|
||||
const message = useMessage();
|
||||
const pageSize = 10;
|
||||
const activeName = ref(0);
|
||||
const totalData = ref(0);
|
||||
const page = ref(1);
|
||||
const listData = ref([]);
|
||||
const replace = ref(false);
|
||||
|
||||
//获取订单列表
|
||||
const queryOrderList = () => {
|
||||
const activeTab = unref(activeName);
|
||||
const params = {
|
||||
page: unref(page),
|
||||
page_size: pageSize,
|
||||
...(activeTab !== 0 && { status: activeTab }),
|
||||
};
|
||||
getOrderList({ params })
|
||||
.then((res) => {
|
||||
const { total, list } = res;
|
||||
totalData.value = total;
|
||||
if (replace.value) {
|
||||
const prevPage = page.value - 1;
|
||||
const prevList = listData.value.slice(0, prevPage * pageSize);
|
||||
listData.value = [...prevList, ...list];
|
||||
} else {
|
||||
listData.value = [...listData.value, ...list];
|
||||
}
|
||||
replace.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
totalData.value = 0;
|
||||
listData.value = [];
|
||||
});
|
||||
};
|
||||
|
||||
function handleClick({ index, name }) {
|
||||
page.value = 1;
|
||||
totalData.value = 0;
|
||||
listData.value = [];
|
||||
activeName.value = name;
|
||||
// name代表状态值
|
||||
queryOrderList();
|
||||
}
|
||||
|
||||
function pay(orderData) {
|
||||
console.log(orderData);
|
||||
const { order_no, notify_url, sign, plain_text } =
|
||||
orderData.pay_info;
|
||||
const price = orderData.order_amount
|
||||
const MerName = orderData.brandName
|
||||
const { payFunc } = usePay();
|
||||
payFunc({
|
||||
order_no,
|
||||
notify_url,
|
||||
TranAmt: price,
|
||||
MerName: MerName,
|
||||
sign,
|
||||
plain_text,
|
||||
});
|
||||
}
|
||||
|
||||
function viewDetail(orderData) {
|
||||
const { id, order_no } = orderData;
|
||||
uni.navigateTo({
|
||||
url: `/pages/ycysp/orderDetail?order_id=${id}&order_no=${order_no}`,
|
||||
});
|
||||
}
|
||||
|
||||
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 = { id: id };
|
||||
refundOrder({ params })
|
||||
.then((res) => {
|
||||
uni.showToast({
|
||||
icon: "success",
|
||||
title: "退款成功",
|
||||
});
|
||||
replace.value = true;
|
||||
queryOrderList();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
queryOrderList();
|
||||
});
|
||||
|
||||
const isLastPage = computed(() => {
|
||||
return unref(page) === Math.ceil(unref(totalData) / pageSize);
|
||||
});
|
||||
|
||||
function queryNext() {
|
||||
console.log(unref(isLastPage));
|
||||
if (unref(isLastPage)) {
|
||||
console.error("已经是最后一页");
|
||||
return false;
|
||||
}
|
||||
page.value = page.value + 1;
|
||||
queryOrderList();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-wrapper {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
height: calc(100vh - 42rpx);
|
||||
overflow-y: auto;
|
||||
background: #fafbfd;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
.order-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.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-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
/* 修改标签页下划线颜色*/
|
||||
// :deep(.wd-button.is-primary){
|
||||
// background: #EA0000;
|
||||
// }
|
||||
:deep(.wd-tabs__line) {
|
||||
background: linear-gradient(180deg, #99d1ff 0%, #3194ff 100%);
|
||||
}
|
||||
:deep(.wd-tabs) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
:deep(.wd-tab__body) {
|
||||
height: calc(100vh - 42rpx);
|
||||
}
|
||||
:deep(.wd-tabs__container) {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,325 @@
|
|||
<route lang="json5" type="page">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: "custom",
|
||||
navigationBarTitleText: "订单详情",
|
||||
navigationBarBackgroundColor: "#FFF",
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="w-full h-full flex flex-col flex-items-center page">
|
||||
<view class="wait" v-if="isWaiting">
|
||||
<wd-loading :size="40"/>
|
||||
<text class="wait-text">订单查询中...</text>
|
||||
</view>
|
||||
<view class="wrapper" v-if="!isWaiting">
|
||||
<view class="pro-info">
|
||||
<view class="title">订单详情</view>
|
||||
<view class="content flex">
|
||||
<image class="pro-img" :src="orderDetail.main_image" />
|
||||
<view class="flex flex-1 flex-col">
|
||||
<view
|
||||
class="flex flex-justify-between name"
|
||||
style="margin-bottom: 12rpx"
|
||||
>
|
||||
<view class="text-over">{{ orderDetail.product_name }}</view>
|
||||
<view class="amount"
|
||||
><text>¥</text>{{ orderDetail.order_amount
|
||||
}}<text>元</text></view
|
||||
>
|
||||
</view>
|
||||
<view class="flex num">
|
||||
<view>充值账号:</view>
|
||||
<view>{{ orderDetail.account ? maskPhoneNumber(orderDetail.account) : '' }}</view>
|
||||
</view>
|
||||
<view class="flex flex-justify-between num">
|
||||
<view>数量</view>
|
||||
<view>x1</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="order-info">
|
||||
<view class="info-item">订单编号:{{ orderDetail.order_no }}</view>
|
||||
<view
|
||||
class="info-item"
|
||||
v-if="
|
||||
!!orderDetail.exchange_time && ![9].includes(orderDetail.status)
|
||||
"
|
||||
>支付时间:{{ orderDetail.exchange_time }}</view
|
||||
>
|
||||
<view class="info-item">下单时间:{{ orderDetail.create_time }}</view>
|
||||
<view class="info-item" style="margin-bottom: 24rpx"
|
||||
>订单金额:{{ orderDetail.order_amount }}</view
|
||||
>
|
||||
<!-- <view class="info-item" style="margin-bottom: 24rpx;">优惠金额:{{ orderDetail.order_amount}}</view> -->
|
||||
<view
|
||||
class="flex flex-justify-between info-item"
|
||||
style="margin-bottom: 24rpx"
|
||||
v-if="[3, 4, 8].includes(orderDetail.status)"
|
||||
>
|
||||
<view>充值状态:</view>
|
||||
<view :style="{ color: stateColor[orderDetail.status] || '' }">{{
|
||||
stateConfig[orderDetail.status]
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
<view class="btns" v-if="!isWaiting">
|
||||
<view
|
||||
class="btn pwd"
|
||||
@click="pay(orderDetail)"
|
||||
v-if="[1].includes(orderDetail.status)"
|
||||
>立即付款</view
|
||||
>
|
||||
<view
|
||||
class="btn pwd"
|
||||
v-if="[4].includes(orderDetail.status)"
|
||||
@click="goRefund"
|
||||
>申请退款</view
|
||||
>
|
||||
<view class="btn back" @click="backIndex">返回首页</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onShow, onHide, onUnload } from "@dcloudio/uni-app";
|
||||
import { onMounted, reactive, ref, unref } from "vue";
|
||||
import { getOrderList, refundOrder,login } from "@/api/ycysp";
|
||||
import { getQueryString } from "@/utils/utils";
|
||||
import { stateConfig, stateColor } from "./config";
|
||||
import usePay from "./hooks/usePay";
|
||||
import useCode from "./hooks/useCode";
|
||||
|
||||
const id = ref("");
|
||||
const orderNo = ref("");
|
||||
const orderDetail = reactive({});
|
||||
const isWaiting = ref(false)
|
||||
|
||||
// 用onshow 解决h5页面被缓存的问题
|
||||
onShow(async () => {
|
||||
const isPayBack = getQueryString("isPayBack");
|
||||
if(isPayBack){
|
||||
isWaiting.value = true
|
||||
await sleep(3000)
|
||||
isWaiting.value = false
|
||||
}
|
||||
const order_id = getQueryString("order_id");
|
||||
const order_no = getQueryString("order_no");
|
||||
if (!order_id && !order_no) return;
|
||||
id.value = order_id;
|
||||
orderNo.value = order_no;
|
||||
getDetail();
|
||||
});
|
||||
|
||||
const backIndex = () => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/ycysp/home`,
|
||||
});
|
||||
};
|
||||
|
||||
function sleep(ms) {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(resolve, ms);
|
||||
});
|
||||
}
|
||||
|
||||
const goRefund = () => {
|
||||
const { id } = orderDetail;
|
||||
if (!id) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "无有效的订单id",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const params = { id: id };
|
||||
refundOrder({ params })
|
||||
.then((res) => {
|
||||
uni.showToast({
|
||||
icon: "success",
|
||||
title: "退款成功",
|
||||
});
|
||||
getDetail();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
function maskPhoneNumber(phoneNumber) {
|
||||
return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
|
||||
}
|
||||
|
||||
function pay(orderData) {
|
||||
const { order_no, notify_url,sign, plain_text } = orderData.pay_info;
|
||||
const price = orderData.order_amount
|
||||
const MerName = orderData.brandName
|
||||
const { payFunc } = usePay();
|
||||
payFunc({
|
||||
order_no,
|
||||
notify_url,
|
||||
TranAmt: price,
|
||||
MerName: MerName,
|
||||
sign,
|
||||
plain_text,
|
||||
});
|
||||
}
|
||||
|
||||
const getDetail = async () => {
|
||||
const token = window.localStorage.getItem('token') || '';
|
||||
if(!token){
|
||||
const code = await useCode();
|
||||
const {token} = await login({params:{code:code}});
|
||||
window.localStorage.setItem('token',token);
|
||||
}
|
||||
const params = {
|
||||
id: unref(id),
|
||||
order_no: unref(orderNo),
|
||||
};
|
||||
getOrderList({ params }).then((res) => {
|
||||
const { total, list } = res;
|
||||
Object.assign(orderDetail, res.list[0]);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wait{
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.wait-text{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-top:20rpx;
|
||||
}
|
||||
}
|
||||
.page {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.line {
|
||||
width: 662rpx;
|
||||
height: 1rpx;
|
||||
background-color: #e1e1f0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 702rpx;
|
||||
// height: 542rpx;
|
||||
min-height: 442rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx 24rpx;
|
||||
|
||||
.pro-info {
|
||||
// border-bottom: 1rpx solid #F0E1E1;
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
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;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-info {
|
||||
// border-bottom: 1rpx solid #F0E1E1;
|
||||
.info-item {
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #6c6c6c;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
margin-top: 146rpx;
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
width: 312rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 38rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pwd {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(270deg, #2c91ff 0%, #9ad2ff 100%);
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.back {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #b9c8c7;
|
||||
border: 2rpx solid #b9c8c7;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,217 @@
|
|||
<route lang="json5" type="page">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: "custom",
|
||||
navigationBarTitleText: "支付确认",
|
||||
navigationBarBackgroundColor: "#FFF",
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view
|
||||
class="flex flex-col flex-items-center flex-justify-between page-wrapper"
|
||||
>
|
||||
<view class="info">
|
||||
<view class="title-small">订单详情</view>
|
||||
<view class="flex detail-info">
|
||||
<view class="detail-img">
|
||||
<image :src="orderDetail.main_image" mode="scaleToFill" />
|
||||
</view>
|
||||
<view class="detail-other">
|
||||
<view class="flex flex-justify-between name-info">
|
||||
<text>{{ orderDetail.product_name }}</text>
|
||||
<text
|
||||
><text style="font-size: 20rpx">¥</text
|
||||
>{{ orderDetail.order_amount }}元</text
|
||||
>
|
||||
</view>
|
||||
<view class="flex flex-justify-between count-info">
|
||||
<text>数量</text>
|
||||
<text>x1</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="order-info">
|
||||
<view class="order-item"
|
||||
>充值账户:{{ orderDetail.account ? maskPhoneNumber(orderDetail.account) : '' }}</view
|
||||
>
|
||||
<view class="order-item">充值类型:{{ orderDetail.product_type }}</view>
|
||||
<!-- <view class="order-item">优惠金额:{{ discount }}</view> -->
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<!-- <view class="order-info">
|
||||
<view class="count-item">共 1 件,应付总额:<text style="text-decoration: line-through;">¥{{ detail.order_amount }}</text></view>
|
||||
<view class="number-item">实际支付:¥{{ detail.order_amount }}</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="pay-btn" @click="goPay">立即支付</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onShow, onLoad } from "@dcloudio/uni-app";
|
||||
import { ref, reactive, unref, onMounted, computed } from "vue";
|
||||
import { createOrder, getOrderList } from "@/api/ycysp";
|
||||
import usePay from "./hooks/usePay";
|
||||
import config from './config';
|
||||
const orderDetail = reactive({});
|
||||
|
||||
const _order_no = ref("");
|
||||
|
||||
onLoad((options) => {
|
||||
const { order_no } = options;
|
||||
_order_no.value = order_no;
|
||||
});
|
||||
|
||||
const discount = computed(() => {
|
||||
if (!unref(_product)) return 0;
|
||||
return (
|
||||
(Number(unref(_product).price) * 100 -
|
||||
Number(unref(_product).sell_price) * 100) /
|
||||
100
|
||||
);
|
||||
});
|
||||
|
||||
function maskPhoneNumber(phoneNumber) {
|
||||
return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
|
||||
}
|
||||
|
||||
const goPay = () => {
|
||||
const { payFunc } = usePay();
|
||||
const { order_no, notify_url, sign, plain_text } = orderDetail.pay_info;
|
||||
payFunc({
|
||||
order_no,
|
||||
notify_url,
|
||||
TranAmt: orderDetail.order_amount,
|
||||
MerName: orderDetail.brandName,
|
||||
sign,
|
||||
plain_text,
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDetail();
|
||||
});
|
||||
|
||||
const getDetail = () => {
|
||||
const params = {
|
||||
order_no: unref(_order_no),
|
||||
};
|
||||
getOrderList({ params }).then((res) => {
|
||||
const { total, list } = res;
|
||||
Object.assign(orderDetail, res.list[0]);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.page-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
opacity: 1;
|
||||
// background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
|
||||
background: #fafbfd;
|
||||
padding: 33rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.info {
|
||||
width: 702rpx;
|
||||
// height: 514rpx;
|
||||
height: 374rpx;
|
||||
border-radius: 24rpx;
|
||||
opacity: 1;
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx 24rpx;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background: #e1e1f0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.title-small {
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
line-height: 32rpx;
|
||||
letter-spacing: 0rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.detail-info {
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
.detail-img {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
margin-right: 30rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.detail-other {
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
line-height: 32rpx;
|
||||
letter-spacing: 0rpx;
|
||||
.name-info {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.count-info {
|
||||
font-size: 20rpx;
|
||||
color: #9e9e9e;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
.order-info {
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
.order-item {
|
||||
font-size: 22rpx;
|
||||
font-weight: normal;
|
||||
line-height: 32rpx;
|
||||
letter-spacing: 0rpx;
|
||||
color: #6c6c6c;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.bottom {
|
||||
font-weight: 400;
|
||||
line-height: 32rpx;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.count-item {
|
||||
font-size: 22rpx;
|
||||
color: #878787;
|
||||
text-align: right;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.number-item {
|
||||
font-size: 24rpx;
|
||||
color: #2e92ff;
|
||||
text-align: right;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.pay-btn {
|
||||
width: 710rpx;
|
||||
height: 88rpx;
|
||||
/* 自动布局 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12rpx 28rpx;
|
||||
border-radius: 392rpx;
|
||||
opacity: 1;
|
||||
background: linear-gradient(270deg, #2c91ff 0%, #9ad2ff 100%);
|
||||
box-sizing: border-box;
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: 0em;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 10 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="13" height="13" viewBox="0 0 13 13"><g><ellipse cx="6.5" cy="6.5" rx="6.5" ry="6.5" fill="#FFFFFF" fill-opacity="1"/><ellipse cx="6.5" cy="6.5" rx="6.199999988079071" ry="6.199999988079071" fill-opacity="0" stroke-opacity="1" stroke="#4A98FB" fill="none" stroke-width="0.6000000238418579"/></g></svg>
|
After Width: | Height: | Size: 416 B |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 2.0 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="7" height="5" viewBox="0 0 7 5"><g><path d="M6.85467,0.16026C6.65747,-0.049906,6.33416,-0.0538585,6.13257,0.151333L2.65289,3.69208L0.855769,1.81926C0.669146,1.62458,0.356251,1.63538,0.156706,1.84316C-0.0428302,2.05098,-0.0532221,2.37714,0.133625,2.57177L2.33038,4.86098C2.51696,5.05539,2.82989,5.04459,3.0294,4.83682C3.07511,4.78922,3.10934,4.73525,3.13501,4.67819C3.15477,4.66321,3.17447,4.649,3.19236,4.63059L6.84614,0.91282C7.048,0.707426,7.05164,0.370686,6.85467,0.16026L6.85467,0.16026Z" fill="#4B99FB" fill-opacity="1"/></g></svg>
|
After Width: | Height: | Size: 652 B |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 9.9 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 8.8 KiB |
After Width: | Height: | Size: 9.2 KiB |
|
@ -2,7 +2,12 @@
|
|||
import useCode from "../pages/ycnc/hooks/useCode";
|
||||
import {login} from '../api/ycnc'
|
||||
|
||||
//邮储银行(音视频)专用的
|
||||
// import useCode from "../pages/ycysp/hooks/useCode";
|
||||
// import {login} from '../api/ycysp'
|
||||
|
||||
//邮储音视频baseURL专用
|
||||
const baseURL = '/ycav'
|
||||
|
||||
function http(options) {
|
||||
uni.showLoading({
|
||||
|
@ -10,11 +15,14 @@ function http(options) {
|
|||
mask: true,
|
||||
});
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
//邮储音视频添加前缀
|
||||
// const newOptions = {...options,url:baseURL + options.url}
|
||||
uni.request({
|
||||
// ...newOptions,
|
||||
...options,
|
||||
header: {
|
||||
|
||||
//邮储音视频
|
||||
// 'content-type': 'application/json',
|
||||
//邮储奶茶
|
||||
'content-type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
|
@ -39,6 +47,10 @@ function http(options) {
|
|||
const params = {code:authCode};
|
||||
const {token} = await login({params});
|
||||
window.localStorage.setItem('token',token);
|
||||
//邮储音视频专用的
|
||||
// http(newOptions).then(_res => {
|
||||
// resolve(_res)
|
||||
// })
|
||||
//邮储奶茶
|
||||
http(options).then(_res => {
|
||||
resolve(_res)
|
||||
|
|
|
@ -1,9 +1,31 @@
|
|||
//获取url后面拼接的参数
|
||||
export const getQueryString = (name) => {
|
||||
let urlStr = window.location.href.split('?')[1]
|
||||
const urlSearchParams = new URLSearchParams(urlStr)
|
||||
const result = Object.fromEntries(urlSearchParams.entries())
|
||||
return name ? result[name] : result
|
||||
export const getQueryString = (paramName) => {
|
||||
// let urlStr = window.location.href.split('?')[1]
|
||||
// const urlSearchParams = new URLSearchParams(urlStr)
|
||||
// const result = Object.fromEntries(urlSearchParams.entries())
|
||||
// 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设备
|
||||
|
@ -39,4 +61,57 @@ export function generateUUID() {
|
|||
uuid += (i === 12 ? 4 : i === 16 ? (random & 3) | 8 : random).toString(16);
|
||||
}
|
||||
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;
|
||||
}
|
|
@ -30,7 +30,7 @@ export default defineConfig(({ command, mode }) => {
|
|||
zipPack({
|
||||
inDir: `dist/build/${UNI_PLATFORM}`, // 输入的文件夹,就是要打包的文件夹
|
||||
outDir: `dist/build`, // 打包好的 zip 文件放到哪个文件夹下
|
||||
outFileName: `${UNI_PLATFORM}-${timeStringNow}.zip`, //文件名不能包含\/:*?"<>|
|
||||
outFileName: `${UNI_PLATFORM}-${mode}-${timeStringNow}.zip`, //文件名不能包含\/:*?"<>|
|
||||
pathPrefix: ''
|
||||
}),
|
||||
],
|
||||
|
|