wuchao
/
uniapp-h5
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

格式化一次代码

This commit is contained in:
xiaogang 2024-11-18 18:38:58 +08:00
parent 62d12e4362
commit 3be41e0711
10 changed files with 1510 additions and 1298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/ycysp/component/coupon-item.vue
View File

@ -10,27 +10,28 @@
<view class="coupon-time">2024.09.19 -2024.10.31</view> <view class="coupon-time">2024.09.19 -2024.10.31</view>
<view class="coupon-time">单日限领取1张</view> <view class="coupon-time">单日限领取1张</view>
</view> </view>
<view class="flex flex-justify-center flex-items-center btn">立即领取</view> <view class="flex flex-justify-center flex-items-center btn"
>立即领取</view
>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref, reactive, unref, onMounted} from 'vue'; import { ref, reactive, unref, onMounted } from "vue";
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.coupon-wrapper { .coupon-wrapper {
width: 686rpx; width: 686rpx;
height: 178rpx; height: 178rpx;
box-sizing: border-box; box-sizing: border-box;
background: url('@/static/ycysp/coupon.webp') no-repeat; background: url("@/static/ycysp/coupon.webp") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.left { .left {
width: 150rpx; width: 150rpx;
height: 100%; height: 100%;
color: #0E9BF2; color: #0e9bf2;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-weight: bold; font-weight: bold;
line-height: normal; line-height: normal;
@ -59,14 +60,14 @@ import { ref, reactive, unref, onMounted} from 'vue';
.coupon-name { .coupon-name {
width: 100%; width: 100%;
font-size: 28rpx; font-size: 28rpx;
color: #1F93DA; color: #1f93da;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.coupon-time { .coupon-time {
font-size: 24rpx; font-size: 24rpx;
color: #78839E; color: #78839e;
margin-top: 6rpx; margin-top: 6rpx;
} }
.btn { .btn {
@ -77,7 +78,7 @@ import { ref, reactive, unref, onMounted} from 'vue';
font-size: 28rpx; font-size: 28rpx;
font-weight: normal; font-weight: normal;
line-height: 32rpx; line-height: 32rpx;
color: #FFFFFF; color: #ffffff;
background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%); background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
} }
} }

61
src/pages/ycysp/component/member.vue
View File

@ -1,35 +1,64 @@
<template> <template>
<view class="wrapper" :style="{backgroundImage:`url(${detail.brand_logo})`}"> <view
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" class="wrapper"
viewBox="0 0 13 13" class="svg" @click="checkedEvent"> :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> <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.5"
ry="6.5"
fill="#FFFFFF"
fill-opacity="1"
/>
<path <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" 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"/> :fill="checkedColor[detail.id]"
<ellipse cx="6.5" cy="6.5" rx="6.2" ry="6.2" fill-opacity="0" stroke-opacity="1" fill-opacity="1"
:stroke="checkedColor[detail.id]" fill="none" stroke-width="0.6" /> 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> </g>
</svg> </svg>
</view> </view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, unref, onMounted } from 'vue'; import { ref, reactive, unref, onMounted } from "vue";
import {checkedColor} from '../config' import { checkedColor } from "../config";
const props = defineProps({ const props = defineProps({
detail: { detail: {
type: Object, type: Object,
required:true required: true,
} },
}) });
const emits = defineEmits(['checked']) const emits = defineEmits(["checked"]);
const checkedEvent = () => { const checkedEvent = () => {
emits('checked',props.detail.id) emits("checked", props.detail.id);
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.wrapper { .wrapper {

99
src/pages/ycysp/component/order-item.vue
View File

@ -2,18 +2,19 @@
<view class="order-item-wrapper flex flex-col box-border" @click="goDetail"> <view class="order-item-wrapper flex flex-col box-border" @click="goDetail">
<view class="nav-info flex flex-justify-between"> <view class="nav-info flex flex-justify-between">
<view>订单编号：{{ detail.order_no }}</view> <view>订单编号：{{ detail.order_no }}</view>
<view :style="{color:stateColor[detail.status] || ''}">{{ stateConfig[detail.status] }}</view> <view :style="{ color: stateColor[detail.status] || '' }">{{
stateConfig[detail.status]
}}</view>
</view> </view>
<view class="order-info"> <view class="order-info">
<view class="content flex"> <view class="content flex">
<image <image :src="detail.main_image" class="pro-img" />
:src="detail.main_image"
class="pro-img"
/>
<view class="flex flex-1 flex-col"> <view class="flex flex-1 flex-col">
<view class="flex flex-justify-between name info-item"> <view class="flex flex-justify-between name info-item">
<view class="text-over">{{ detail.product_name }}</view> <view class="text-over">{{ detail.product_name }}</view>
<view class="amount"><text>￥</text>{{ detail.order_amount }}<text>元</text></view> <view class="amount"
><text>￥</text>{{ detail.order_amount }}<text>元</text></view
>
</view> </view>
<view class="flex num"> <view class="flex num">
<view>充值账号：</view> <view>充值账号：</view>
@ -38,66 +39,84 @@
</view> --> </view> -->
<view class="btns"> <view class="btns">
<!-- <view class="btn del" @click="goDel">删除订单</view> --> <!-- <view class="btn del" @click="goDel">删除订单</view> -->
<view class="btn pay" v-if="[1].includes(detail.status)" @click="goPay">立即付款</view> <view class="btn pay" v-if="[1].includes(detail.status)" @click="goPay"
<view class="btn pay" @click="goRefund" v-if="[4].includes(detail.status)">申请退款</view> >立即付款</view
>
<view
class="btn pay"
@click="goRefund"
v-if="[4].includes(detail.status)"
>申请退款</view
>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { computed} from 'vue'; import { computed } from "vue";
import { stateConfig, stateColor } from '../config'; import { stateConfig, stateColor } from "../config";
const props = defineProps({ const props = defineProps({
detail: { detail: {
type: Object, type: Object,
required: true, required: true,
default:() => ({}) default: () => ({}),
} },
}) });
const emits = defineEmits(['pay-event','detail-event','pwd-event','del-event']) const emits = defineEmits([
"pay-event",
"detail-event",
"pwd-event",
"del-event",
]);
function goPay(e) { function goPay(e) {
if(e.stopPropagation) { //W3C阻止冒泡方法 if (e.stopPropagation) {
//W3C阻止冒泡方法
e.stopPropagation(); e.stopPropagation();
} }
emits('pay-event', props.detail); emits("pay-event", props.detail);
} }
const discount = computed(() => { const discount = computed(() => {
if(!Object.keys(props.detail).length)return 0 if (!Object.keys(props.detail).length) return 0;
return (Number(props.detail.order_amount)*100 - Number(props.detail.wait_amount)*100) / 100 return (
}) (Number(props.detail.order_amount) * 100 -
Number(props.detail.wait_amount) * 100) /
100
);
});
function maskPhoneNumber(phoneNumber) { function maskPhoneNumber(phoneNumber) {
return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
} }
function goDetail(e) { function goDetail(e) {
emits('detail-event', props.detail); emits("detail-event", props.detail);
} }
function goPwd(e) { function goPwd(e) {
if(e.stopPropagation) { //W3C阻止冒泡方法 if (e.stopPropagation) {
//W3C阻止冒泡方法
e.stopPropagation(); e.stopPropagation();
} }
emits('pwd-event', props.detail); emits("pwd-event", props.detail);
} }
function goDel(e) { function goDel(e) {
if(e.stopPropagation) { //W3C阻止冒泡方法 if (e.stopPropagation) {
//W3C阻止冒泡方法
e.stopPropagation(); e.stopPropagation();
} }
emits('del-event', props.detail); emits("del-event", props.detail);
} }
function goRefund(e) { function goRefund(e) {
if(e.stopPropagation) { //W3C阻止冒泡方法 if (e.stopPropagation) {
//W3C阻止冒泡方法
e.stopPropagation(); e.stopPropagation();
} }
emits('refund-event', props.detail); emits("refund-event", props.detail);
} }
</script> </script>
@ -105,7 +124,7 @@
.order-item-wrapper { .order-item-wrapper {
width: 702rpx; width: 702rpx;
// height: 386rpx; // height: 386rpx;
background: #FFFFFF; background: #ffffff;
border-radius: 24rpx; border-radius: 24rpx;
padding: 24rpx; padding: 24rpx;
margin: 24rpx 0 16rpx; margin: 24rpx 0 16rpx;
@ -134,7 +153,7 @@
} }
.time { .time {
font-size: 22rpx; font-size: 22rpx;
color: #6C6C6C; color: #6c6c6c;
} }
.info-item { .info-item {
font-weight: bold; font-weight: bold;
@ -165,7 +184,7 @@
} }
.num { .num {
font-size: 20rpx; font-size: 20rpx;
color: #9E9E9E; color: #9e9e9e;
font-weight: 400; font-weight: 400;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
@ -178,7 +197,7 @@
} }
.number-item { .number-item {
font-size: 24rpx; font-size: 24rpx;
color: #2E92FF; color: #2e92ff;
text-align: right; text-align: right;
margin-top: 16rpx; margin-top: 16rpx;
} }
@ -202,24 +221,24 @@
} }
.del { .del {
color: #545454; color: #545454;
border: 2rpx solid #B9C8C7; border: 2rpx solid #b9c8c7;
} }
.pay { .pay {
color: #FFFFFF; color: #ffffff;
background: linear-gradient(270deg, #2C91FF 0%, #9AD2FF 100%); background: linear-gradient(270deg, #2c91ff 0%, #9ad2ff 100%);
} }
.view { .view {
background: #FFFFFF; background: #ffffff;
border-radius: 68rpx; border-radius: 68rpx;
border: 2rpx solid #EA0000; border: 2rpx solid #ea0000;
color:#EA0000; color: #ea0000;
} }
} }
.line { .line {
margin-top: 24rpx; margin-top: 24rpx;
width: 662rpx; width: 662rpx;
height: 1rpx; height: 1rpx;
background-color: #E1E1F0; background-color: #e1e1f0;
transform: scaleY(0.5); transform: scaleY(0.5);
} }
</style> </style>

29
src/pages/ycysp/component/recharge-item.vue
View File

@ -1,5 +1,9 @@
<template> <template>
<view class="flex flex-col flex-items-center flex-justify-center re-wrapper" :class="{'is-checked':detail.isSelected}" @click="selectEvent"> <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_name }}</view> <view class="type-name">{{ detail.product_name }}</view>
<view class="flex type-amount"> <view class="flex type-amount">
<view class="flex flex-col flex-justify-end icon">￥</view> <view class="flex flex-col flex-justify-end icon">￥</view>
@ -10,20 +14,19 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, unref, onMounted} from 'vue'; import { ref, reactive, unref, onMounted } from "vue";
const props = defineProps({ const props = defineProps({
detail: { detail: {
type: Object, type: Object,
required:true required: true,
} },
}) });
const emits = defineEmits(['selected']) const emits = defineEmits(["selected"]);
const selectEvent = () => { const selectEvent = () => {
emits('selected',props.detail.id) emits("selected", props.detail.id);
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.re-wrapper { .re-wrapper {
@ -37,15 +40,15 @@
border: 1.6rpx solid #ececec; border: 1.6rpx solid #ececec;
} }
.is-checked { .is-checked {
background: #DCEFFF; background: #dcefff;
border: 1.6rpx solid #2D91FF; border: 1.6rpx solid #2d91ff;
} }
.type-name { .type-name {
width: 80%; width: 80%;
font-size: 26rpx; font-size: 26rpx;
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;
color: #070B1B; color: #070b1b;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -72,7 +75,7 @@
line-height: normal; line-height: normal;
letter-spacing: 0em; letter-spacing: 0em;
text-decoration: line-through; text-decoration: line-through;
color: #A4C4FA; color: #a4c4fa;
margin-top: 6rpx; margin-top: 6rpx;
} }
</style> </style>

52
src/pages/ycysp/component/ticket-recieve.vue
View File

@ -1,34 +1,50 @@
<template> <template>
<view class="flex pos-relative wrapper flex-justify-between" :class="{small:['small'].includes(type),large:['large'].includes(type)}"> <view
<view class="flex flex-items-center flex-justify-center pos-absolute tips" v-if="['small'].includes(type)">每日限量50张</view> class="flex pos-relative wrapper flex-justify-between"
<view class="amount" :style="{width:['small'].includes(type) ? '120rpx' : '140rpx'}"> :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="icon">￥</view>
<view class="number">100</view> <view class="number">100</view>
</view> </view>
<view class="operation" v-if="['small'].includes(type)"> <view class="operation" v-if="['small'].includes(type)">
<view class="name">优酷喵喵年卡适用</view> <view class="name">优酷喵喵年卡适用</view>
<view class="flex flex-items-center flex-justify-center btn">立即领取</view> <view class="flex flex-items-center flex-justify-center btn"
>立即领取</view
>
</view> </view>
<view class="operation-large" v-else> <view class="operation-large" v-else>
<view class="name-tips"> <view class="name-tips">
<view class="name-large">芒果全屏会员年卡适用</view> <view class="name-large">芒果全屏会员年卡适用</view>
<view class="tips-large">每日限量50张</view> <view class="tips-large">每日限量50张</view>
</view> </view>
<view class="flex flex-items-center flex-justify-center btn-large">立即领取</view> <view class="flex flex-items-center flex-justify-center btn-large"
>立即领取</view
>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref, reactive, unref, onMounted} from 'vue'; import { ref, reactive, unref, onMounted } from "vue";
const props = defineProps({ const props = defineProps({
type: { type: {
type: String, type: String,
default:'small' default: "small",
} },
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.wrapper { .wrapper {
@ -36,19 +52,19 @@ const props = defineProps({
} }
.small { .small {
width: 322rpx; width: 322rpx;
background: url('@/static/ycysp/ticket-small.webp') no-repeat; background: url("@/static/ycysp/ticket-small.webp") no-repeat;
margin-bottom: 18rpx; margin-bottom: 18rpx;
background-size: cover; background-size: cover;
} }
.large { .large {
width: 662rpx; width: 662rpx;
background: url('@/static/ycysp/ticket-large.webp') no-repeat; background: url("@/static/ycysp/ticket-large.webp") no-repeat;
background-size: cover; background-size: cover;
} }
.tips { .tips {
border-radius: 20rpx 0rpx 20rpx 0rpx; border-radius: 20rpx 0rpx 20rpx 0rpx;
opacity: 1; opacity: 1;
background: #69C5FF; background: #69c5ff;
width: 100rpx; width: 100rpx;
height: 20rpx; height: 20rpx;
width: 100rpx; width: 100rpx;
@ -56,7 +72,7 @@ const props = defineProps({
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: #FFFFFF; color: #ffffff;
} }
.amount { .amount {
display: flex; display: flex;
@ -108,7 +124,7 @@ const props = defineProps({
font-size: 20rpx; font-size: 20rpx;
font-weight: normal; font-weight: normal;
line-height: 24rpx; line-height: 24rpx;
color: #FFFFFF; color: #ffffff;
} }
.operation-large { .operation-large {
width: 500rpx; width: 500rpx;
@ -128,14 +144,14 @@ const props = defineProps({
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: #1F93DA; color: #1f93da;
} }
.tips-large { .tips-large {
font-size: 20rpx; font-size: 20rpx;
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: #8CA1D1; color: #8ca1d1;
margin-top: 4rpx; margin-top: 4rpx;
} }
.btn-large { .btn-large {
@ -146,6 +162,6 @@ const props = defineProps({
font-size: 28rpx; font-size: 28rpx;
font-weight: normal; font-weight: normal;
line-height: 64rpx; line-height: 64rpx;
color: #FFFFFF; color: #ffffff;
} }
</style> </style>

78
src/pages/ycysp/config.js
View File

@ -1,47 +1,53 @@
export const stateConfig = { export const stateConfig = {
1: '待支付', 1: "待支付",
2: '已支付', 2: "已支付",
3: '充值中', 3: "充值中",
4: '充值失败', 4: "充值失败",
5: '退款中', 5: "退款中",
6: '退款失败', 6: "退款失败",
7: '退款成功', 7: "退款成功",
8: '充值成功' , 8: "充值成功",
9: '订单作废' 9: "订单作废",
} };
export const stateColor = { export const stateColor = {
2: '#FF911A', 2: "#FF911A",
3: '#FF8400', 3: "#FF8400",
4: '#FF0000', 4: "#FF0000",
7: '#EA722D', 7: "#EA722D",
8: '#FF0000 ', 8: "#FF0000 ",
} };
export const checkedColor = { export const checkedColor = {
1:'#4A98FB', 1: "#4A98FB",
2:'#4A98FB', 2: "#4A98FB",
3:'#FE3B34', 3: "#FE3B34",
4:'#FF8103', 4: "#FF8103",
5:'#17BE73', 5: "#17BE73",
6:'#F82801', 6: "#F82801",
7:'#FE306E', 7: "#FE306E",
8:'#61D93F', 8: "#61D93F",
} };
export const tabs = [{ export const tabs = [
tabName:'全部订单', {
tabName: "全部订单",
status: 0, status: 0,
},{ },
tabName:'待付款', {
tabName: "待付款",
status: 1, status: 1,
},{ },
tabName:'处理中', {
tabName: "处理中",
status: 2, status: 2,
},{ },
tabName:'已完成', {
tabName: "已完成",
status: 8, status: 8,
},{ },
{
tabName: "已退款", tabName: "已退款",
status:7 status: 7,
}] },
];

251
src/pages/ycysp/home.vue
View File

@ -1,9 +1,9 @@
<route lang="json5" type="home"> <route lang="json5" type="home">
{ {
style: { style: {
navigationStyle: 'custom', navigationStyle: "custom",
navigationBarTitleText: '音视频专区', navigationBarTitleText: "音视频专区",
navigationBarBackgroundColor:'#FFF', navigationBarBackgroundColor: "#FFF",
}, },
} }
</route> </route>
@ -50,155 +50,202 @@
</view> </view>
<scroll-view scroll-x class="recharge-scroll"> <scroll-view scroll-x class="recharge-scroll">
<view v-for="(item, index) in productArr" class="recharge-item"> <view v-for="(item, index) in productArr" class="recharge-item">
<rechargeItem :key="item.id" :detail="item" @selected="handleSelected"/> <rechargeItem
:key="item.id"
:detail="item"
@selected="handleSelected"
/>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<!-- //手机号 --> <!-- //手机号 -->
<view class="input-container"> <view class="input-container">
<input type="text" placeholder="请输入手机号/QQ号充值" placeholder-class="pcs" v-model="account"> <input
type="text"
placeholder="请输入手机号/QQ号充值"
placeholder-class="pcs"
v-model="account"
/>
</view> </view>
<!-- 下一步 --> <!-- 下一步 -->
<view class="flex flex-items-center flex-justify-center next-btn" @click="nextEvent"> <view
class="flex flex-items-center flex-justify-center next-btn"
@click="nextEvent"
>
下一步 下一步
</view> </view>
<!-- 描述 --> <!-- 描述 -->
<view class="description"> <view class="description">
<view class="small-title">产品介绍</view> <view class="small-title">产品介绍</view>
<view class="small-text">1、充值后可登录官方APP<text class="small-red">查看会员状态及有效期，</text>过期不可使用。</view> <view class="small-text"
<view class="small-text">2、<text class="small-red">充值前请您确认充值信息是否正确，一旦提交无法取消或更改。</text>如因账号信息输入错误导致充值至他人账户，仍视为充值成功，无法补券。</view> >1、充值后可登录官方APP<text class="small-red"
<view class="small-text">3、此权益中包含的优酷/腾讯黄金会员、芒果视频会员可在手机、电脑、平板上使用，不支持电视端，不支持投屏。<text class="small-red">腾讯视频、QQ音乐支持QQ号或手机号，</text>其余会员账号均为手机号。</view> >查看会员状态及有效期，</text
<view class="small-text">4、本产品仅适用于中国大陆地区用户，暂不支持开通中国港澳台、海外地区服务。</view> >过期不可使用。</view
<view class="small-text">5、如有疑问请联系成都蓝色兄弟网络科技有限公司，<text class="small-red">客服电话400-118-1216</text>（服务时间09:00-18:00）。</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-118-1216</text
>（服务时间09:00-18:00）。
</view> </view>
<view style="height:40rpx;"></view> </view>
<view style="height: 40rpx"></view>
<!-- 我的订单 --> <!-- 我的订单 -->
<view class="flex flex-justify-center flex-items-center order-btn" @click="toOrder">我的<br/>订单</view> <view
class="flex flex-justify-center flex-items-center order-btn"
@click="toOrder"
>我的<br />订单</view
>
</scroll-view> </scroll-view>
</template> </template>
<script setup> <script setup>
import { ref, reactive, unref, onMounted, nextTick} from 'vue'; import { ref, reactive, unref, onMounted, nextTick } from "vue";
// import ticketRecieve from './component/ticket-recieve.vue'; // import ticketRecieve from './component/ticket-recieve.vue';
import member from './component/member.vue'; import member from "./component/member.vue";
import rechargeItem from './component/recharge-item.vue'; import rechargeItem from "./component/recharge-item.vue";
import {getBrandList,getProductList,login} from '@/api/ycysp'; import { getBrandList, getProductList, login } from "@/api/ycysp";
import {generateUUID} from '@/utils/utils'; import { generateUUID } from "@/utils/utils";
import {createOrder} from '@/api/ycysp'; import { createOrder } from "@/api/ycysp";
import useCode from './hooks/useCode'; 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 =
/^(((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 _reg = /^[1-9][0-9]{4,}$/;
const brandArr = ref([]) const brandArr = ref([]);
const productArr = ref([]) const productArr = ref([]);
const account = ref('') const account = ref("");
const authCode = ref('') const authCode = ref("");
//获取品牌 //获取品牌
const getBrand = () => { const getBrand = () => {
return getBrandList().then(res => { return getBrandList()
.then((res) => {
const { list } = res; const { list } = res;
brandArr.value = list.map((item,index) => ({...item,isChecked:index === 0})) brandArr.value = list.map((item, index) => ({
}).catch(err => { ...item,
console.error(err); isChecked: index === 0,
}));
}) })
} .catch((err) => {
console.error(err);
});
};
//获取商品 //获取商品
const getProduct = () => { const getProduct = () => {
const checkedBrand = brandArr.value.find(item => item.isChecked) const checkedBrand = brandArr.value.find((item) => item.isChecked);
const params = {brand_id:checkedBrand.id} const params = { brand_id: checkedBrand.id };
getProductList({params}).then(res => { getProductList({ params })
.then((res) => {
const { list } = res; const { list } = res;
productArr.value = list.map((item,index) => ({...item,isSelected:index === 0})) productArr.value = list.map((item, index) => ({
}).catch(err => { ...item,
console.error(err); isSelected: index === 0,
}));
}) })
} .catch((err) => {
console.error(err);
});
};
//选中品牌 //选中品牌
const handleChecked = (checkedId) => { const handleChecked = (checkedId) => {
brandArr.value = brandArr.value.map((item, index) => { brandArr.value = brandArr.value.map((item, index) => {
const { id, isChecked } = item; const { id, isChecked } = item;
if (checkedId === id) { if (checkedId === id) {
return {...item,isChecked:!isChecked} return { ...item, isChecked: !isChecked };
}
return {...item,isChecked:false}
})
getProduct()
} }
return { ...item, isChecked: false };
});
getProduct();
};
//选中商品 //选中商品
const handleSelected = (selectedId) => { const handleSelected = (selectedId) => {
productArr.value = productArr.value.map((item, index) => { productArr.value = productArr.value.map((item, index) => {
const { id, isSelected } = item; const { id, isSelected } = item;
if (selectedId === id) { if (selectedId === id) {
return {...item,isSelected:!isSelected} return { ...item, isSelected: !isSelected };
}
return {...item,isSelected:false}
})
} }
return { ...item, isSelected: false };
});
};
//下一步事件 //下一步事件
const nextEvent = () => { const nextEvent = () => {
const selectProduct = productArr.value.find(item => item.isSelected) const selectProduct = productArr.value.find((item) => item.isSelected);
if (!selectProduct) { if (!selectProduct) {
uni.showToast({ uni.showToast({
title: '请选择充值选项', title: "请选择充值选项",
icon: 'none' icon: "none",
}); });
return return;
} }
if (!account.value) { if (!account.value) {
uni.showToast({ uni.showToast({
title: '请填写充值手机号或QQ号', title: "请填写充值手机号或QQ号",
icon: 'none' icon: "none",
}); });
return return;
} }
if (!reg.test(account.value) && !_reg.test(account.value)) { if (!reg.test(account.value) && !_reg.test(account.value)) {
uni.showToast({ uni.showToast({
title: '充值账号格式不正确', title: "充值账号格式不正确",
icon: 'none' icon: "none",
}); });
return return;
}
addOrder(selectProduct.id)
} }
addOrder(selectProduct.id);
};
const addOrder = (id) => { const addOrder = (id) => {
const params = { const params = {
account: unref(account), account: unref(account),
product_id:id product_id: id,
} };
createOrder({params}).then(res => { createOrder({ params })
.then((res) => {
const { order_no, notify_url, sign, plain_text } = res; const { order_no, notify_url, sign, plain_text } = res;
uni.navigateTo({ uni.navigateTo({
url:`/pages/ycysp/pay?order_no=${order_no}` url: `/pages/ycysp/pay?order_no=${order_no}`,
});
}) })
}).catch(err => { .catch((err) => {
console.error(err); console.error(err);
}) });
} };
const toOrder = () => { const toOrder = () => {
uni.navigateTo({ uni.navigateTo({
url:`/pages/ycysp/order` url: `/pages/ycysp/order`,
}) });
} };
onMounted(async () => { onMounted(async () => {
await getBrand() await getBrand();
getProduct() getProduct();
const token = window.localStorage.getItem('token') || ''; const token = window.localStorage.getItem("token") || "";
if (!token) { if (!token) {
// const code = await useCode(); // const code = await useCode();
// authCode.value = code // authCode.value = code
authCode.value = generateUUID() authCode.value = generateUUID();
const { token } = await login({ params: { code: unref(authCode) } }); const { token } = await login({ params: { code: unref(authCode) } });
window.localStorage.setItem('token',token); window.localStorage.setItem("token", token);
} }
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -207,26 +254,29 @@ onMounted(async () => {
height: 100vh; height: 100vh;
opacity: 1; opacity: 1;
// background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%); // background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
background: #FFFFFF; background: #ffffff;
overflow-y: auto; overflow-y: auto;
} }
.banner-container { .banner-container {
height: 338rpx; height: 338rpx;
padding: 36rpx 20rpx 0 4rpx; padding: 36rpx 20rpx 0 4rpx;
background: url('@/static/ycysp/banner-bg.webp') no-repeat; background: url("@/static/ycysp/banner-bg.webp") no-repeat;
background-size: 100% auto; background-size: 100% auto;
} }
.ticket-container { .ticket-container {
width: 710rpx; width: 710rpx;
height: 416rpx; height: 416rpx;
border-radius: 28rpx; border-radius: 28rpx;
opacity: 1; opacity: 1;
background: #FFFFFF; background: #ffffff;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04); box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
margin: 40rpx auto 0; margin: 40rpx auto 0;
box-sizing: border-box; box-sizing: border-box;
padding: 24rpx; padding: 24rpx;
} }
.title { .title {
width: 100%; width: 100%;
height: 50rpx; height: 50rpx;
@ -234,92 +284,106 @@ onMounted(async () => {
align-items: center; align-items: center;
position: relative; position: relative;
margin-bottom: 20rpx; margin-bottom: 20rpx;
.title-line { .title-line {
width: 10rpx; width: 10rpx;
height: 34rpx; height: 34rpx;
border-radius: 0rpx 6rpx 6rpx 0rpx; border-radius: 0rpx 6rpx 6rpx 0rpx;
opacity: 1; opacity: 1;
background: linear-gradient(180deg, #95CEFF 0%, #439FFF 100%); background: linear-gradient(180deg, #95ceff 0%, #439fff 100%);
} }
.title-text { .title-text {
font-size: 36rpx; font-size: 36rpx;
font-weight: 400; font-weight: 400;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: #212F3B; color: #212f3b;
margin-left: 14rpx; margin-left: 14rpx;
} }
.title-more { .title-more {
position: absolute; position: absolute;
right: 0; right: 0;
font-size: 26rpx; font-size: 26rpx;
font-weight: normal; font-weight: normal;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: #666E7E; color: #666e7e;
} }
} }
.member-container { .member-container {
width: 100%; width: 100%;
padding-left: 20rpx; padding-left: 20rpx;
box-sizing: border-box; box-sizing: border-box;
margin: 40rpx auto 0; margin: 40rpx auto 0;
} }
.scroll { .scroll {
width: 100%; width: 100%;
// height:250rpx; // height:250rpx;
overflow-x: auto; overflow-x: auto;
} }
.swiper { .swiper {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width:calc((100vw - 68rpx) / 3 * 4 + 64rpx) width: calc((100vw - 68rpx) / 3 * 4 + 64rpx);
} }
.member-item { .member-item {
margin: 0 16rpx 16rpx 0; margin: 0 16rpx 16rpx 0;
width: calc((100vw - 68rpx) / 3); width: calc((100vw - 68rpx) / 3);
} }
.recharge-container { .recharge-container {
width: 100%; width: 100%;
margin: 40rpx auto 0; margin: 40rpx auto 0;
padding-left: 20rpx; padding-left: 20rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.recharge-scroll { .recharge-scroll {
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
} }
.recharge-item { .recharge-item {
display: inline-block; display: inline-block;
margin: 0 16rpx 16rpx 0; margin: 0 16rpx 16rpx 0;
width: calc((100vw - 20rpx) / 3.5); width: calc((100vw - 20rpx) / 3.5);
} }
.input-container { .input-container {
width: 710rpx; width: 710rpx;
height: 88rpx; height: 88rpx;
border-radius: 84rpx; border-radius: 84rpx;
opacity: 1; opacity: 1;
background: #EEF7FF; background: #eef7ff;
margin: 40rpx auto 0; margin: 40rpx auto 0;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 40rpx; padding: 0 40rpx;
box-sizing: border-box; box-sizing: border-box;
input { input {
width: 100%; width: 100%;
font-size: 32rpx; font-size: 32rpx;
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;
letter-spacing: 0em; letter-spacing: 0em;
color: #8DBFF6; color: #8dbff6;
} }
} }
.pcs { .pcs {
font-size: 32rpx; font-size: 32rpx;
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;
letter-spacing: 0em; letter-spacing: 0em;
color: #8DBFF6; color: #8dbff6;
} }
.next-btn { .next-btn {
width: 710rpx; width: 710rpx;
height: 88rpx; height: 88rpx;
@ -329,35 +393,40 @@ onMounted(async () => {
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;
letter-spacing: 0em; letter-spacing: 0em;
color: #FFFFFF; color: #ffffff;
background: linear-gradient(270deg, #3194FF 0%, #96CFFF 100%); background: linear-gradient(270deg, #3194ff 0%, #96cfff 100%);
box-sizing: border-box; box-sizing: border-box;
border-radius: 392rpx; border-radius: 392rpx;
} }
.description { .description {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20rpx; padding: 0 20rpx;
margin-top: 40rpx; margin-top: 40rpx;
} }
.small-title { .small-title {
/* 标题二 */ /* 标题二 */
font-size: 28rpx; font-size: 28rpx;
font-weight: normal; font-weight: normal;
line-height: 32rpx; line-height: 32rpx;
letter-spacing: 0px; letter-spacing: 0px;
color: #0F0F0F; color: #0f0f0f;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.small-text { .small-text {
font-size: 24rpx; font-size: 24rpx;
font-weight: normal; font-weight: normal;
line-height: 44rpx; line-height: 44rpx;
color: #383838 color: #383838;
} }
.small-red { .small-red {
color: #FF0000 color: #ff0000;
} }
.order-btn { .order-btn {
position: fixed; position: fixed;
right: 20rpx; right: 20rpx;
@ -368,7 +437,7 @@ onMounted(async () => {
font-weight: normal; font-weight: normal;
line-height: 32rpx; line-height: 32rpx;
letter-spacing: 0px; letter-spacing: 0px;
color: #FFFFFF; color: #ffffff;
opacity: 1; opacity: 1;
background: rgba(45, 145, 255, 0.6); background: rgba(45, 145, 255, 0.6);
border-radius: 96rpx; border-radius: 96rpx;

149
src/pages/ycysp/order.vue
View File

@ -1,9 +1,9 @@
<route lang="json5" type="page"> <route lang="json5" type="page">
{ {
style: { style: {
navigationStyle: 'custom', navigationStyle: "custom",
navigationBarTitleText: '我的订单', navigationBarTitleText: "我的订单",
navigationBarBackgroundColor:'#FFF', navigationBarBackgroundColor: "#FFF",
}, },
} }
</route> </route>
@ -13,8 +13,14 @@
<block v-for="item in tabs" :key="item.status"> <block v-for="item in tabs" :key="item.status">
<wd-tab :title="item.tabName" :name="item.status"> <wd-tab :title="item.tabName" :name="item.status">
<scroll-view scroll-y class="page-wrapper" @scrolltolower="queryNext"> <scroll-view scroll-y class="page-wrapper" @scrolltolower="queryNext">
<view class="order-wrapper flex flex-col flex-items-center" v-if="Array.isArray(listData) && listData.length > 0"> <view
<view v-for="(ele,index) in listData" :key="`${ele.id}-${item.status}`"> 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 <OrderItem
:detail="ele" :detail="ele"
@pay-event="pay" @pay-event="pay"
@ -42,14 +48,14 @@
</template> </template>
<script setup> <script setup>
import { useMessage } from 'wot-design-uni' import { useMessage } from "wot-design-uni";
import OrderItem from './component/order-item'; import OrderItem from "./component/order-item";
import usePay from './hooks/usePay'; import usePay from "./hooks/usePay";
import { getOrderList,refundOrder } from '../../api/ycysp'; import { getOrderList, refundOrder } from "../../api/ycysp";
import { onMounted, ref, unref,reactive,computed } from 'vue'; import { onMounted, ref, unref, reactive, computed } from "vue";
import { tabs } from './config'; import { tabs } from "./config";
import {deepClone} from '../../utils/utils' import { deepClone } from "../../utils/utils";
const message = useMessage() const message = useMessage();
const pageSize = 10; const pageSize = 10;
const activeName = ref(0); const activeName = ref(0);
const totalData = ref(0); const totalData = ref(0);
@ -63,24 +69,26 @@
const params = { const params = {
page: unref(page), page: unref(page),
page_size: pageSize, page_size: pageSize,
...(activeTab !== 0 && {status:activeTab}) ...(activeTab !== 0 && { status: activeTab }),
} };
getOrderList({params}).then(res => { getOrderList({ params })
const {total,list} = res .then((res) => {
totalData.value = total const { total, list } = res;
totalData.value = total;
if (replace.value) { if (replace.value) {
const prevPage = page.value - 1; const prevPage = page.value - 1;
const prevList = listData.value.slice(0, prevPage * pageSize); const prevList = listData.value.slice(0, prevPage * pageSize);
listData.value = [...prevList, ...list]; listData.value = [...prevList, ...list];
} else { } else {
listData.value = [...listData.value,...list] listData.value = [...listData.value, ...list];
} }
replace.value = false replace.value = false;
}).catch(err => {
totalData.value = 0;
listData.value = []
}) })
} .catch((err) => {
totalData.value = 0;
listData.value = [];
});
};
function handleClick({ index, name }) { function handleClick({ index, name }) {
page.value = 1; page.value = 1;
@ -88,29 +96,36 @@
listData.value = []; listData.value = [];
activeName.value = name; activeName.value = name;
// name代表状态值 // name代表状态值
queryOrderList() queryOrderList();
} }
function pay(orderData) { function pay(orderData) {
console.log(orderData); console.log(orderData);
const {order_no,notify_url,price,brand,sign,plain_text} = orderData.pay_info const { order_no, notify_url, price, brand, sign, plain_text } =
orderData.pay_info;
const { payFunc } = usePay(); const { payFunc } = usePay();
payFunc({order_no,notify_url,TranAmt:price,MerName:brand,sign,plain_text}) payFunc({
order_no,
notify_url,
TranAmt: price,
MerName: brand,
sign,
plain_text,
});
} }
function viewDetail(orderData) { function viewDetail(orderData) {
const { id, order_no } = orderData; const { id, order_no } = orderData;
uni.navigateTo({ uni.navigateTo({
url:`/pages/ycysp/orderDetail?order_id=${id}&order_no=${order_no}` url: `/pages/ycysp/orderDetail?order_id=${id}&order_no=${order_no}`,
}) });
} }
function viewPwd(orderData) { function viewPwd(orderData) {
const {voucher_link} = orderData const { voucher_link } = orderData;
if (voucher_link) { if (voucher_link) {
console.log('跳转外部链接--->',voucher_link); console.log("跳转外部链接--->", voucher_link);
window.location.href = voucher_link window.location.href = voucher_link;
} else { } else {
console.error(`${voucher_link}无有效值`); console.error(`${voucher_link}无有效值`);
} }
@ -119,74 +134,78 @@
function removeOrder(orderData) { function removeOrder(orderData) {
message message
.confirm({ .confirm({
msg: '删除订单后无法恢复，确认继续吗？', msg: "删除订单后无法恢复，确认继续吗？",
title: '提示' title: "提示",
}) })
.then(() => { .then(() => {
const {id} = orderData const { id } = orderData;
const params = {order_id:id} const params = { order_id: id };
deleteOrder({params}).then(res => { deleteOrder({ params })
.then((res) => {
replace.value = true; replace.value = true;
queryOrderList() queryOrderList();
}).catch(err => {
console.log(err);
}) })
.catch((err) => {
console.log(err);
});
}) })
.catch(() => { .catch(() => {
console.log('点击了取消按钮') console.log("点击了取消按钮");
}) });
} }
function refund(orderData) { function refund(orderData) {
const {id} = orderData const { id } = orderData;
if (!id) { if (!id) {
uni.showToast({ uni.showToast({
icon:'none', icon: "none",
title: '无有效的订单id', title: "无有效的订单id",
}); });
return return;
} }
const params = {order_id:id} const params = { order_id: id };
refundOrder({params}).then(res => { refundOrder({ params })
.then((res) => {
uni.showToast({ uni.showToast({
icon:'success', icon: "success",
title: '退款成功', title: "退款成功",
}); });
replace.value = true; replace.value = true;
queryOrderList(); queryOrderList();
}).catch(err => {
console.log(err);
}) })
.catch((err) => {
console.log(err);
});
} }
onMounted(() => { onMounted(() => {
queryOrderList() queryOrderList();
}) });
const isLastPage = computed(() => { const isLastPage = computed(() => {
return unref(page) === Math.ceil(unref(totalData) / pageSize) return unref(page) === Math.ceil(unref(totalData) / pageSize);
}) });
function queryNext() { function queryNext() {
console.log(unref(isLastPage)); console.log(unref(isLastPage));
if (unref(isLastPage)) { if (unref(isLastPage)) {
console.error('已经是最后一页'); console.error("已经是最后一页");
return false; return false;
}; }
page.value = page.value + 1 page.value = page.value + 1;
queryOrderList() queryOrderList();
} }
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.page-wrapper { .page-wrapper {
width: 100%; width: 100%;
// height: 100%; // height: 100%;
height: calc(100vh - 42rpx); height: calc(100vh - 42rpx);
overflow-y: auto; overflow-y: auto;
background: #FAFBFD; background: #fafbfd;
box-sizing: border-box; box-sizing: border-box;
padding-bottom:30rpx padding-bottom: 30rpx;
} }
.order-wrapper { .order-wrapper {
display: flex; display: flex;
@ -225,7 +244,7 @@
// background: #EA0000; // background: #EA0000;
// } // }
:deep(.wd-tabs__line) { :deep(.wd-tabs__line) {
background: linear-gradient( 180deg, #99D1FF 0%, #3194FF 100%); background: linear-gradient(180deg, #99d1ff 0%, #3194ff 100%);
} }
:deep(.wd-tabs) { :deep(.wd-tabs) {
display: flex; display: flex;

161
src/pages/ycysp/orderDetail.vue
View File

@ -1,9 +1,9 @@
<route lang="json5" type="page"> <route lang="json5" type="page">
{ {
style: { style: {
navigationStyle: 'custom', navigationStyle: "custom",
navigationBarTitleText: '订单详情', navigationBarTitleText: "订单详情",
navigationBarBackgroundColor:'#FFF', navigationBarBackgroundColor: "#FFF",
}, },
} }
</route> </route>
@ -16,9 +16,15 @@
<view class="content flex"> <view class="content flex">
<image class="pro-img" :src="orderDetail.main_image" /> <image class="pro-img" :src="orderDetail.main_image" />
<view class="flex flex-1 flex-col"> <view class="flex flex-1 flex-col">
<view class="flex flex-justify-between name" style="margin-bottom:12rpx"> <view
class="flex flex-justify-between name"
style="margin-bottom: 12rpx"
>
<view class="text-over">{{ orderDetail.product_name }}</view> <view class="text-over">{{ orderDetail.product_name }}</view>
<view class="amount"><text>￥</text>{{ orderDetail.order_amount }}<text>元</text></view> <view class="amount"
><text>￥</text>{{ orderDetail.order_amount
}}<text>元</text></view
>
</view> </view>
<view class="flex num"> <view class="flex num">
<view>充值账号：</view> <view>充值账号：</view>
@ -34,108 +40,139 @@
<view class="line"></view> <view class="line"></view>
<view class="order-info"> <view class="order-info">
<view class="info-item">订单编号：{{ orderDetail.order_no }}</view> <view class="info-item">订单编号：{{ orderDetail.order_no }}</view>
<view class="info-item" v-if="!!orderDetail.exchange_time && ![9].includes(orderDetail.status)">支付时间：{{ <view
orderDetail.exchange_time }}</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">下单时间：{{ 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="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
class="flex flex-justify-between info-item"
style="margin-bottom: 24rpx"
v-if="[3, 4, 8].includes(orderDetail.status)"
>
<view>充值状态：</view> <view>充值状态：</view>
<view :style="{color:stateColor[orderDetail.status] || ''}">{{ stateConfig[orderDetail.status] }}</view> <view :style="{ color: stateColor[orderDetail.status] || '' }">{{
stateConfig[orderDetail.status]
}}</view>
</view> </view>
</view> </view>
<view class="line"></view> <view class="line"></view>
</view> </view>
<view class="btns"> <view class="btns">
<view class="btn pwd" @click="pay(orderDetail)" v-if="[1].includes(orderDetail.status)">立即付款</view> <view
<view class="btn pwd" v-if="[4].includes(orderDetail.status)" @click="goRefund">申请退款</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 class="btn back" @click="backIndex">返回首页</view>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { onShow, onHide, onUnload } from '@dcloudio/uni-app'; import { onShow, onHide, onUnload } from "@dcloudio/uni-app";
import { onMounted, reactive, ref, unref } from 'vue'; import { onMounted, reactive, ref, unref } from "vue";
import { getOrderList, refundOrder} from '@/api/ycysp'; import { getOrderList, refundOrder } from "@/api/ycysp";
import { getQueryString } from '@/utils/utils'; import { getQueryString } from "@/utils/utils";
import { stateConfig, stateColor } from './config'; import { stateConfig, stateColor } from "./config";
import usePay from './hooks/usePay'; import usePay from "./hooks/usePay";
const id = ref(''); const id = ref("");
const orderNo = ref(''); const orderNo = ref("");
const orderDetail = reactive({}); const orderDetail = reactive({});
// 用onshow 解决h5页面被缓存的问题 // 用onshow 解决h5页面被缓存的问题
onShow(() => { onShow(() => {
const url = window.location.href const url = window.location.href;
console.log('url-->', url); console.log("url-->", url);
const order_id = getQueryString('order_id') const order_id = getQueryString("order_id");
const order_no = getQueryString('order_no') const order_no = getQueryString("order_no");
const isPayBack = getQueryString('isPayBack') const isPayBack = getQueryString("isPayBack");
console.log(order_id, order_no); console.log(order_id, order_no);
if (!order_id && !order_no) return if (!order_id && !order_no) return;
id.value = order_id id.value = order_id;
orderNo.value = order_no; orderNo.value = order_no;
getDetail(); getDetail();
}) });
const backIndex = () => { const backIndex = () => {
uni.navigateTo({ uni.navigateTo({
url: `/pages/ycysp/home` url: `/pages/ycysp/home`,
}) });
} };
const viewPwd = (detailData) => { const viewPwd = (detailData) => {
const { voucher_link } = detailData const { voucher_link } = detailData;
if (voucher_link) { if (voucher_link) {
console.log(`跳转外部链接-->${voucher_link}`); console.log(`跳转外部链接-->${voucher_link}`);
window.location.href = voucher_link window.location.href = voucher_link;
} else { } else {
console.error(`voucher_link无有效值`); console.error(`voucher_link无有效值`);
} }
} };
const goRefund = () => { const goRefund = () => {
const { id } = orderDetail const { id } = orderDetail;
if (!id) { if (!id) {
uni.showToast({ uni.showToast({
icon: 'none', icon: "none",
title: '无有效的订单id', title: "无有效的订单id",
}); });
return return;
} }
const params = { order_id: id } const params = { order_id: id };
refundOrder({ params }).then(res => { refundOrder({ params })
.then((res) => {
uni.showToast({ uni.showToast({
icon: 'success', icon: "success",
title: '退款成功', title: "退款成功",
}); });
}).catch(err => {
console.log(err);
}) })
} .catch((err) => {
console.log(err);
});
};
function maskPhoneNumber(phoneNumber) { function maskPhoneNumber(phoneNumber) {
return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
} }
function pay(orderData) { function pay(orderData) {
const { order_no, notify_url, price, brand, sign, plain_text } = orderData; const { order_no, notify_url, price, brand, sign, plain_text } = orderData;
const { payFunc } = usePay(); const { payFunc } = usePay();
payFunc({ order_no, notify_url, TranAmt: price,MerName:brand,sign,plain_text }) payFunc({
order_no,
notify_url,
TranAmt: price,
MerName: brand,
sign,
plain_text,
});
} }
const getDetail = () => { const getDetail = () => {
const params = { const params = {
id: unref(id), id: unref(id),
order_no: unref(orderNo), order_no: unref(orderNo),
} };
getOrderList({ params }).then(res => { getOrderList({ params }).then((res) => {
const {total,list} = res const { total, list } = res;
Object.assign(orderDetail, res.list[0]) Object.assign(orderDetail, res.list[0]);
}) });
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -145,7 +182,7 @@ const getDetail = () => {
.line { .line {
width: 662rpx; width: 662rpx;
height: 1rpx; height: 1rpx;
background-color: #E1E1F0; background-color: #e1e1f0;
transform: scaleY(0.5); transform: scaleY(0.5);
} }
@ -153,7 +190,7 @@ const getDetail = () => {
width: 702rpx; width: 702rpx;
// height: 542rpx; // height: 542rpx;
min-height: 442rpx; min-height: 442rpx;
background: #FFFFFF; background: #ffffff;
border-radius: 24rpx; border-radius: 24rpx;
margin-top: 24rpx; margin-top: 24rpx;
box-sizing: border-box; box-sizing: border-box;
@ -210,7 +247,7 @@ const getDetail = () => {
.num { .num {
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
color: #9E9E9E; color: #9e9e9e;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
} }
@ -221,7 +258,7 @@ const getDetail = () => {
.info-item { .info-item {
font-weight: 400; font-weight: 400;
font-size: 22rpx; font-size: 22rpx;
color: #6C6C6C; color: #6c6c6c;
margin-top: 24rpx; margin-top: 24rpx;
} }
} }
@ -244,16 +281,16 @@ const getDetail = () => {
.pwd { .pwd {
font-weight: 500; font-weight: 500;
font-size: 32rpx; font-size: 32rpx;
color: #FFFFFF; color: #ffffff;
background: linear-gradient(270deg, #2C91FF 0%, #9AD2FF 100%); background: linear-gradient(270deg, #2c91ff 0%, #9ad2ff 100%);
margin-right: 10rpx; margin-right: 10rpx;
} }
.back { .back {
font-weight: 400; font-weight: 400;
font-size: 32rpx; font-size: 32rpx;
color: #B9C8C7; color: #b9c8c7;
border: 2rpx solid #B9C8C7; border: 2rpx solid #b9c8c7;
} }
} }
</style> </style>

95
src/pages/ycysp/pay.vue
View File

@ -1,28 +1,30 @@
<route lang="json5" type="page"> <route lang="json5" type="page">
{ {
style: { style: {
navigationStyle: 'custom', navigationStyle: "custom",
navigationBarTitleText: '支付确认', navigationBarTitleText: "支付确认",
navigationBarBackgroundColor:'#FFF', navigationBarBackgroundColor: "#FFF",
}, },
} }
</route> </route>
<template> <template>
<view class="flex flex-col flex-items-center flex-justify-between page-wrapper"> <view
class="flex flex-col flex-items-center flex-justify-between page-wrapper"
>
<view class="info"> <view class="info">
<view class="title-small">订单详情</view> <view class="title-small">订单详情</view>
<view class="flex detail-info"> <view class="flex detail-info">
<view class="detail-img"> <view class="detail-img">
<image <image :src="orderDetail.main_image" mode="scaleToFill" />
:src="orderDetail.main_image"
mode="scaleToFill"
/>
</view> </view>
<view class="detail-other"> <view class="detail-other">
<view class="flex flex-justify-between name-info"> <view class="flex flex-justify-between name-info">
<text>{{ orderDetail.product_name }}</text> <text>{{ orderDetail.product_name }}</text>
<text><text style="font-size:20rpx">￥</text>{{ orderDetail.order_amount}}元</text> <text
><text style="font-size: 20rpx">￥</text
>{{ orderDetail.order_amount }}元</text
>
</view> </view>
<view class="flex flex-justify-between count-info"> <view class="flex flex-justify-between count-info">
<text>数量</text> <text>数量</text>
@ -32,7 +34,9 @@
</view> </view>
<view class="line"></view> <view class="line"></view>
<view class="order-info"> <view class="order-info">
<view class="order-item">充值账户：{{ maskPhoneNumber(orderDetail.account) }}</view> <view class="order-item"
>充值账户：{{ maskPhoneNumber(orderDetail.account) }}</view
>
<view class="order-item">充值类型：{{ orderDetail.product_type }}</view> <view class="order-item">充值类型：{{ orderDetail.product_type }}</view>
<!-- <view class="order-item">优惠金额：{{ discount }}</view> --> <!-- <view class="order-item">优惠金额：{{ discount }}</view> -->
</view> </view>
@ -47,49 +51,58 @@
</template> </template>
<script setup> <script setup>
import { onShow,onLoad} from '@dcloudio/uni-app'; import { onShow, onLoad } from "@dcloudio/uni-app";
import { ref, reactive, unref, onMounted,computed} from 'vue'; import { ref, reactive, unref, onMounted, computed } from "vue";
import {createOrder,getOrderList} from '@/api/ycysp'; import { createOrder, getOrderList } from "@/api/ycysp";
import usePay from './hooks/usePay'; import usePay from "./hooks/usePay";
const orderDetail = reactive({}); const orderDetail = reactive({});
const _order_no = ref('') const _order_no = ref("");
onLoad((options) => { onLoad((options) => {
const {order_no} = options const { order_no } = options;
_order_no.value = order_no _order_no.value = order_no;
}) });
const discount = computed(() => { const discount = computed(() => {
if(!unref(_product))return 0 if (!unref(_product)) return 0;
return (Number(unref(_product).price)*100 - Number(unref(_product).sell_price)*100) / 100 return (
}) (Number(unref(_product).price) * 100 -
Number(unref(_product).sell_price) * 100) /
100
);
});
function maskPhoneNumber(phoneNumber) { function maskPhoneNumber(phoneNumber) {
return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
} }
const goPay = () => { const goPay = () => {
const { payFunc } = usePay(); const { payFunc } = usePay();
const { order_no, notify_url, sign, plain_text } = orderDetail.pay_info; const { order_no, notify_url, sign, plain_text } = orderDetail.pay_info;
payFunc({order_no,notify_url,TranAmt:voucherAmount,MerName:config[brandFlag].name,sign,plain_text}) payFunc({
} order_no,
notify_url,
TranAmt: voucherAmount,
MerName: config[brandFlag].name,
sign,
plain_text,
});
};
onMounted(() => { onMounted(() => {
getDetail() getDetail();
}) });
const getDetail = () => { const getDetail = () => {
const params = { const params = {
order_no: unref(_order_no), order_no: unref(_order_no),
} };
getOrderList({ params }).then(res => { getOrderList({ params }).then((res) => {
const {total,list} = res const { total, list } = res;
Object.assign(orderDetail, res.list[0]) Object.assign(orderDetail, res.list[0]);
}) });
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.page-wrapper { .page-wrapper {
@ -97,7 +110,7 @@ const getDetail = () => {
height: 100vh; height: 100vh;
opacity: 1; opacity: 1;
// background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%); // background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
background: #FAFBFD;; background: #fafbfd;
padding: 33rpx 0; padding: 33rpx 0;
box-sizing: border-box; box-sizing: border-box;
} }
@ -107,7 +120,7 @@ const getDetail = () => {
height: 374rpx; height: 374rpx;
border-radius: 24rpx; border-radius: 24rpx;
opacity: 1; opacity: 1;
background: #FFFFFF; background: #ffffff;
box-sizing: border-box; box-sizing: border-box;
padding: 32rpx 24rpx; padding: 32rpx 24rpx;
} }
@ -147,7 +160,7 @@ const getDetail = () => {
} }
.count-info { .count-info {
font-size: 20rpx; font-size: 20rpx;
color: #9E9E9E; color: #9e9e9e;
margin-top: 12rpx; margin-top: 12rpx;
} }
} }
@ -159,7 +172,7 @@ const getDetail = () => {
font-weight: normal; font-weight: normal;
line-height: 32rpx; line-height: 32rpx;
letter-spacing: 0rpx; letter-spacing: 0rpx;
color: #6C6C6C; color: #6c6c6c;
margin-top: 24rpx; margin-top: 24rpx;
} }
.bottom { .bottom {
@ -177,7 +190,7 @@ const getDetail = () => {
} }
.number-item { .number-item {
font-size: 24rpx; font-size: 24rpx;
color: #2E92FF; color: #2e92ff;
text-align: right; text-align: right;
margin-top: 16rpx; margin-top: 16rpx;
} }
@ -192,12 +205,12 @@ const getDetail = () => {
padding: 12rpx 28rpx; padding: 12rpx 28rpx;
border-radius: 392rpx; border-radius: 392rpx;
opacity: 1; opacity: 1;
background: linear-gradient(270deg, #2C91FF 0%, #9AD2FF 100%); background: linear-gradient(270deg, #2c91ff 0%, #9ad2ff 100%);
box-sizing: border-box; box-sizing: border-box;
font-size: 32rpx; font-size: 32rpx;
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;
letter-spacing: 0em; letter-spacing: 0em;
color: #FFFFFF; color: #ffffff;
} }
</style> </style>