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

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

@ -1,84 +1,85 @@
<template> <template>
<view class="flex coupon-wrapper"> <view class="flex coupon-wrapper">
<view class="flex flex-justify-center flex-items-center left"> <view class="flex flex-justify-center flex-items-center left">
<text>￥</text> <text>￥</text>
<text>10</text> <text>10</text>
</view> </view>
<view class="flex flex-justify-between flex-items-center right"> <view class="flex flex-justify-between flex-items-center right">
<view class="coupon-info"> <view class="coupon-info">
<view class="coupon-name">芒果全屏会员年卡适用</view> <view class="coupon-name">芒果全屏会员年卡适用</view>
<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;
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; line-height: normal;
margin-right:20rpx; letter-spacing: 0.04em;
}
text:first-child{ .coupon-name {
font-size: 26rpx; width: 100%;
} font-size: 28rpx;
text:last-child{ color: #1f93da;
font-size: 74rpx;
}
}
.right{
flex:1;
height:100%;
box-sizing: border-box;
padding-left:10rpx;
padding-right:20rpx;
overflow: hidden; overflow: hidden;
.coupon-info{ white-space: nowrap;
width:calc(100% - 30rpx - 162rpx); text-overflow: ellipsis;
font-weight: normal; }
line-height: normal; .coupon-time {
letter-spacing: 0.04em; font-size: 24rpx;
} color: #78839e;
.coupon-name{ margin-top: 6rpx;
width:100%; }
font-size: 28rpx; .btn {
color: #1F93DA; width: 162rpx;
overflow: hidden; height: 64rpx;
white-space: nowrap; border-radius: 27rpx;
text-overflow: ellipsis; opacity: 1;
} font-size: 28rpx;
.coupon-time{ font-weight: normal;
font-size: 24rpx; line-height: 32rpx;
color: #78839E; color: #ffffff;
margin-top:6rpx; background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
} }
.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> </style>

77
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 {
@ -42,10 +71,10 @@ const checkedEvent = () => {
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
} }
.gou{ .gou {
width:14rpx; width: 14rpx;
height:10rpx; height: 10rpx;
transform: translate(6rpx,8rpx); transform: translate(6rpx, 8rpx);
} }
.svg { .svg {
position: absolute; position: absolute;
@ -54,4 +83,4 @@ const checkedEvent = () => {
width: 27rpx; width: 27rpx;
height: 27rpx; height: 27rpx;
} }
</style> </style>

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

@ -1,225 +1,244 @@
<template> <template>
<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 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="order-info"> </view>
<view class="content flex"> <view class="flex flex-justify-between time">
<image <view>下单时间：{{ detail.create_time }}</view>
:src="detail.main_image" <!-- <view v-if="[1].includes(detail.status)">优惠金额：¥{{ discount }}</view> -->
class="pro-img" </view>
/> </view>
<view class="flex flex-1 flex-col"> <view class="line"></view>
<view class="flex flex-justify-between name info-item"> <view class="bottoms">
<view class="text-over">{{ detail.product_name }}</view> <!-- <view class="pay-des" v-if="[1].includes(detail.status)">
<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="count-item">共 1 件，应付总额：<text style="text-decoration: line-through;">￥{{ detail.order_amount }}</text></view>
<view class="number-item">实际支付：¥{{ detail.wait_amount }}</view> <view class="number-item">实际支付：¥{{ detail.wait_amount }}</view>
</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> >
</view> <view
class="btn pay"
@click="goRefund"
v-if="[4].includes(detail.status)"
>申请退款</view
>
</view>
</view> </view>
</template> </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){ <script setup>
if(e.stopPropagation) { //W3C阻止冒泡方法 import { computed } from "vue";
e.stopPropagation(); import { stateConfig, stateColor } from "../config";
} const props = defineProps({
emits('pay-event', props.detail); detail: {
} type: Object,
required: true,
default: () => ({}),
},
});
const emits = defineEmits([
"pay-event",
"detail-event",
"pwd-event",
"del-event",
]);
const discount = computed(() => { function goPay(e) {
if(!Object.keys(props.detail).length)return 0 if (e.stopPropagation) {
return (Number(props.detail.order_amount)*100 - Number(props.detail.wait_amount)*100) / 100 //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) { 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) {
emits("detail-event", props.detail);
}
function goDetail(e){ function goPwd(e) {
emits('detail-event', props.detail); if (e.stopPropagation) {
} //W3C阻止冒泡方法
e.stopPropagation();
}
emits("pwd-event", props.detail);
}
function goPwd(e){ function goDel(e) {
if(e.stopPropagation) { //W3C阻止冒泡方法 if (e.stopPropagation) {
e.stopPropagation(); //W3C阻止冒泡方法
} e.stopPropagation();
emits('pwd-event', props.detail); }
} emits("del-event", props.detail);
}
function goDel(e){ function goRefund(e) {
if(e.stopPropagation) { //W3C阻止冒泡方法 if (e.stopPropagation) {
e.stopPropagation(); //W3C阻止冒泡方法
} e.stopPropagation();
emits('del-event', props.detail); }
} emits("refund-event", props.detail);
}
function goRefund(e){
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
}
emits('refund-event', props.detail);
}
</script> </script>
<style lang="scss"> <style lang="scss">
.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;
} }
.nav-info{ .nav-info {
font-size:22rpx; font-size: 22rpx;
font-weight:400; font-weight: 400;
:first-child{ :first-child {
color: #333333; 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;
} }
:last-child{ }
color: #787878; .time {
}
}
.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; font-size: 22rpx;
color: #878787; color: #6c6c6c;
text-align: right; }
margin-top:8rpx; .info-item {
} font-weight: bold;
.number-item{ 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; font-size: 24rpx;
color: #2E92FF; text:nth-child(1) {
text-align: right; font-size: 20rpx;
margin-top:16rpx; 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;
}
} }
.bottoms{ .count-item {
padding:10rpx 0 12rpx; font-size: 22rpx;
color: #878787;
text-align: right;
margin-top: 8rpx;
} }
.btns{ .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; display: flex;
justify-content: flex-end; align-items: center;
margin-top:24rpx; justify-content: center;
.btn{ margin-left: 48rpx;
width: 168rpx; }
height: 64rpx; .del {
border-radius: 68rpx; color: #545454;
font-weight: 400; border: 2rpx solid #b9c8c7;
font-size: 28rpx; }
display: flex; .pay {
align-items: center; color: #ffffff;
justify-content: center; background: linear-gradient(270deg, #2c91ff 0%, #9ad2ff 100%);
margin-left:48rpx; }
} .view {
.del{ background: #ffffff;
color: #545454; border-radius: 68rpx;
border: 2rpx solid #B9C8C7; border: 2rpx solid #ea0000;
} color: #ea0000;
.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> .line {
margin-top: 24rpx;
width: 662rpx;
height: 1rpx;
background-color: #e1e1f0;
transform: scaleY(0.5);
}
</style>

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

@ -1,78 +1,81 @@
<template> <template>
<view class="flex flex-col flex-items-center flex-justify-center re-wrapper" :class="{'is-checked':detail.isSelected}" @click="selectEvent"> <view
<view class="type-name">{{ detail.product_name }}</view> class="flex flex-col flex-items-center flex-justify-center re-wrapper"
<view class="flex type-amount"> :class="{ 'is-checked': detail.isSelected }"
<view class="flex flex-col flex-justify-end icon">￥</view> @click="selectEvent"
<view class="num">{{ detail.sell_price }}</view> >
</view> <view class="type-name">{{ detail.product_name }}</view>
<view class="type-ori">原价{{ detail.price }}</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>
</template> <view class="type-ori">原价{{ detail.price }}</view>
</view>
<script setup lang="ts"> </template>
import { ref, reactive, unref, onMounted} from 'vue';
const props = defineProps({
detail:{
type:Object,
required:true
}
})
const emits = defineEmits(['selected']) <script setup lang="ts">
import { ref, reactive, unref, onMounted } from "vue";
const props = defineProps({
detail: {
type: Object,
required: true,
},
});
const selectEvent = () => { const emits = defineEmits(["selected"]);
emits('selected',props.detail.id)
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: 1.6rpx 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;
letter-spacing: 0em;
.icon {
font-size: 28rpx;
margin-bottom: 4rpx;
} }
.num {
</script> /* 价格 */
<style scoped lang="scss"> font-size: 48rpx;
.re-wrapper{
width:100%;
height:200rpx;
box-sizing: border-box;
border-radius: 10rpx;
opacity: 1;
background: #fff;
box-sizing: border-box;
border: 1.6rpx solid #ececec;
} }
.is-checked{ }
background: #DCEFFF; .type-ori {
border: 1.6rpx solid #2D91FF; font-size: 24rpx;
} font-weight: normal;
.type-name{ line-height: normal;
width:80%; letter-spacing: 0em;
font-size: 26rpx; text-decoration: line-through;
font-weight: normal; color: #a4c4fa;
line-height: normal; margin-top: 6rpx;
color: #070B1B; }
text-overflow: ellipsis; </style>
overflow: hidden;
white-space: nowrap;
text-align: center;
}
.type-amount{
margin-top:6rpx;
color: $sub-price-color;
font-weight: 600;
line-height: normal;
letter-spacing: 0em;
.icon{
font-size: 28rpx;
margin-bottom:4rpx;
}
.num{
/* 价格 */
font-size: 48rpx;
}
}
.type-ori{
font-size: 24rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
text-decoration: line-through;
color: #A4C4FA;
margin-top:6rpx;
}
</style>

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

@ -1,151 +1,167 @@
<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="{
<view class="icon">￥</view> small: ['small'].includes(type),
<view class="number">100</view> 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>
<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 {
height: 136rpx; height: 136rpx;
} }
.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;
font-size: 12rpx; font-size: 12rpx;
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;
justify-content: center; justify-content: center;
height:100%; height: 100%;
font-weight: bold; font-weight: bold;
line-height: normal; line-height: normal;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color:$price-color; color: $price-color;
} }
.icon{ .icon {
font-size: 18rpx; font-size: 18rpx;
display: flex; display: flex;
align-items: center; align-items: center;
margin-top:20rpx; margin-top: 20rpx;
} }
.number{ .number {
font-size: 48rpx; font-size: 48rpx;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.operation{ .operation {
width:180rpx; width: 180rpx;
height:100%; height: 100%;
display:flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
padding:0 15rpx; padding: 0 15rpx;
} }
.name{ .name {
width:100%; width: 100%;
font-size: 22rpx; font-size: 22rpx;
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;
letter-spacing: 0em; letter-spacing: 0em;
color: $text-color; color: $text-color;
overflow: hidden; /*文本超出隐藏*/ overflow: hidden; /*文本超出隐藏*/
display:-webkit-box; /*盒子模型微弹性伸缩模型*/ display: -webkit-box; /*盒子模型微弹性伸缩模型*/
-webkit-box-orient: vertical;/*伸缩盒子的子元素垂直排列*/ -webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
-webkit-line-clamp: 2; /*文本显示3行*/ -webkit-line-clamp: 2; /*文本显示3行*/
} }
.btn{ .btn {
margin-top:10rpx; margin-top: 10rpx;
width: 134rpx; width: 134rpx;
height: 34rpx; height: 34rpx;
background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%); background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
border-radius:38rpx; border-radius: 38rpx;
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;
height:100%; height: 100%;
display:flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
padding:0 24rpx 0 10rpx; padding: 0 24rpx 0 10rpx;
} }
.name-tips{ .name-tips {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.name-large{ .name-large {
font-size: 28rpx; font-size: 28rpx;
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 {
width: 162rpx; width: 162rpx;
height: 64rpx; height: 64rpx;
background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%); background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
border-radius:68rpx; border-radius: 68rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: normal; font-weight: normal;
line-height: 64rpx; line-height: 64rpx;
color: #FFFFFF; color: #ffffff;
} }
</style> </style>

88
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:'全部订单', {
status:0, tabName: "全部订单",
},{ status: 0,
tabName:'待付款', },
status:1, {
},{ tabName: "待付款",
tabName:'处理中', status: 1,
status:2, },
},{ {
tabName:'已完成', tabName: "处理中",
status:8, status: 2,
},{ },
tabName:"已退款", {
status:7 tabName: "已完成",
}] status: 8,
},
{
tabName: "已退款",
status: 7,
},
];

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

@ -1,11 +1,11 @@
<route lang="json5" type="home"> <route lang="json5" type="home">
{ {
style: { style: {
navigationStyle: 'custom', navigationStyle: "custom",
navigationBarTitleText: '音视频专区', navigationBarTitleText: "音视频专区",
navigationBarBackgroundColor:'#FFF', navigationBarBackgroundColor: "#FFF",
}, },
} }
</route> </route>
<template> <template>
@ -37,8 +37,8 @@
</view> </view>
<scroll-view scroll-x class="scroll"> <scroll-view scroll-x class="scroll">
<view class="swiper"> <view class="swiper">
<view v-for="(item,index) in brandArr" class="member-item"> <view v-for="(item, index) in brandArr" class="member-item">
<member :key="item.id" :detail="item" @checked="handleChecked"/> <member :key="item.id" :detail="item" @checked="handleChecked" />
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
@ -49,278 +49,342 @@
<view class="title-text">充值选项</view> <view class="title-text">充值选项</view>
</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
</view> type="text"
<!-- 下一步 --> placeholder="请输入手机号/QQ号充值"
<view class="flex flex-items-center flex-justify-center next-btn" @click="nextEvent"> placeholder-class="pcs"
下一步 v-model="account"
</view> />
<!-- 描述 --> </view>
<view class="description"> <!-- 下一步 -->
<view class="small-title">产品介绍</view> <view
<view class="small-text">1、充值后可登录官方APP<text class="small-red">查看会员状态及有效期，</text>过期不可使用。</view> class="flex flex-items-center flex-justify-center next-btn"
<view class="small-text">2、<text class="small-red">充值前请您确认充值信息是否正确，一旦提交无法取消或更改。</text>如因账号信息输入错误导致充值至他人账户，仍视为充值成功，无法补券。</view> @click="nextEvent"
<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 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-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()
const {list} = res; .then((res) => {
brandArr.value = list.map((item,index) => ({...item,isChecked:index === 0})) const { list } = res;
}).catch(err => { brandArr.value = list.map((item, index) => ({
console.error(err); ...item,
}) 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 })
const {list} = res; .then((res) => {
productArr.value = list.map((item,index) => ({...item,isSelected:index === 0})) const { list } = res;
}).catch(err => { productArr.value = list.map((item, index) => ({
console.error(err); ...item,
}) 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} return { ...item, isChecked: false };
}) });
getProduct() 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 })
const {order_no,notify_url,sign,plain_text} = res; .then((res) => {
uni.navigateTo({ const { order_no, notify_url, sign, plain_text } = res;
url:`/pages/ycysp/pay?order_no=${order_no}` uni.navigateTo({
}) url: `/pages/ycysp/pay?order_no=${order_no}`,
}).catch(err => { });
console.error(err);
}) })
} .catch((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">
.page-wrapper{ .page-wrapper {
width:100vw; width: 100vw;
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{
height:338rpx; .banner-container {
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{
width:100%; .title {
height:50rpx; width: 100%;
height: 50rpx;
display: flex; display: flex;
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{
width:100%; .member-container {
padding-left:20rpx; width: 100%;
padding-left: 20rpx;
box-sizing: border-box; box-sizing: border-box;
margin:40rpx auto 0; margin: 40rpx auto 0;
} }
.scroll{
width:100%; .scroll {
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{
margin:0 16rpx 16rpx 0; .member-item {
width:calc((100vw - 68rpx) / 3); margin: 0 16rpx 16rpx 0;
width: calc((100vw - 68rpx) / 3);
} }
.recharge-container{
width:100%; .recharge-container {
margin:40rpx auto 0; width: 100%;
padding-left:20rpx; margin: 40rpx auto 0;
padding-left: 20rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.recharge-scroll{
width:100%; .recharge-scroll {
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;
padding: 12rpx 28rpx; padding: 12rpx 28rpx;
@ -329,48 +393,53 @@ 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{
width:100%; .description {
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{
color: #FF0000 .small-red {
color: #ff0000;
} }
.order-btn{
.order-btn {
position: fixed; position: fixed;
right: 20rpx; right: 20rpx;
bottom:100rpx; bottom: 100rpx;
width: 96rpx; width: 96rpx;
height: 96rpx; height: 96rpx;
font-size: 24rpx; font-size: 24rpx;
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;
} }
</style> </style>

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

@ -1,241 +1,260 @@
<route lang="json5" type="page"> <route lang="json5" type="page">
{ {
style: { style: {
navigationStyle: 'custom', navigationStyle: "custom",
navigationBarTitleText: '我的订单', navigationBarTitleText: "我的订单",
navigationBarBackgroundColor:'#FFF', navigationBarBackgroundColor: "#FFF",
}, },
} }
</route> </route>
<template> <template>
<wd-tabs color="#333" inactiveColor="#888" @click="handleClick"> <wd-tabs color="#333" inactiveColor="#888" @click="handleClick">
<block v-for="item in tabs" :key="item.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"
<OrderItem v-if="Array.isArray(listData) && listData.length > 0"
:detail="ele" >
@pay-event="pay" <view
@detail-event="viewDetail" v-for="(ele, index) in listData"
@pwd-event="viewPwd" :key="`${ele.id}-${item.status}`"
@del-event="removeOrder" >
@refund-event="refund" <OrderItem
/> :detail="ele"
</view> @pay-event="pay"
<view class="no-more" v-if="isLastPage">没有更多了~</view> @detail-event="viewDetail"
</view> @pwd-event="viewPwd"
<view class="no-data" v-else> @del-event="removeOrder"
<image @refund-event="refund"
src="/static/ycysp/bg-nodata.png" />
mode="scaleToFill" </view>
class="no-img" <view class="no-more" v-if="isLastPage">没有更多了~</view>
/> </view>
<text class="no-text">暂无订单，快去下单吧~</text> <view class="no-data" v-else>
</view> <image
</scroll-view> src="/static/ycysp/bg-nodata.png"
</wd-tab> mode="scaleToFill"
</block> class="no-img"
</wd-tabs> />
<wd-message-box /> <text class="no-text">暂无订单，快去下单吧~</text>
</view>
</scroll-view>
</wd-tab>
</block>
</wd-tabs>
<wd-message-box />
</template> </template>
<script setup> <script setup>
import { useMessage } from 'wot-design-uni' import { useMessage } from "wot-design-uni";
import OrderItem from './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);
const page = ref(1); const page = ref(1);
const listData = ref([]); const listData = ref([]);
const replace = ref(false); 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; const queryOrderList = () => {
totalData.value = 0; const activeTab = unref(activeName);
listData.value = []; const params = {
activeName.value = name; page: unref(page),
// name代表状态值 page_size: pageSize,
queryOrderList() ...(activeTab !== 0 && { status: activeTab }),
};
} getOrderList({ params })
.then((res) => {
function pay(orderData){ const { total, list } = res;
console.log(orderData); totalData.value = total;
const {order_no,notify_url,price,brand,sign,plain_text} = orderData.pay_info if (replace.value) {
const {payFunc} = usePay(); const prevPage = page.value - 1;
payFunc({order_no,notify_url,TranAmt:price,MerName:brand,sign,plain_text}) const prevList = listData.value.slice(0, prevPage * pageSize);
} listData.value = [...prevList, ...list];
} else {
function viewDetail(orderData){ listData.value = [...listData.value, ...list];
const {id,order_no} = orderData; }
uni.navigateTo({ replace.value = false;
url:`/pages/ycysp/orderDetail?order_id=${id}&order_no=${order_no}`
})
}
function viewPwd(orderData){
const {voucher_link} = orderData
if(voucher_link){
console.log('跳转外部链接--->',voucher_link);
window.location.href = voucher_link
}else{
console.error(`${voucher_link}无有效值`);
}
}
function removeOrder(orderData){
message
.confirm({
msg: '删除订单后无法恢复，确认继续吗？',
title: '提示'
})
.then(() => {
const {id} = orderData
const params = {order_id:id}
deleteOrder({params}).then(res => {
replace.value = true;
queryOrderList()
}).catch(err => {
console.log(err);
})
})
.catch(() => {
console.log('点击了取消按钮')
})
}
function refund(orderData){
const {id} = orderData
if(!id){
uni.showToast({
icon:'none',
title: '无有效的订单id',
});
return
}
const params = {order_id:id}
refundOrder({params}).then(res => {
uni.showToast({
icon:'success',
title: '退款成功',
});
replace.value = true;
queryOrderList();
}).catch(err => {
console.log(err);
})
}
onMounted(()=>{
queryOrderList()
}) })
.catch((err) => {
totalData.value = 0;
listData.value = [];
});
};
const isLastPage = computed(()=>{ function handleClick({ index, name }) {
return unref(page) === Math.ceil(unref(totalData) / pageSize) page.value = 1;
totalData.value = 0;
listData.value = [];
activeName.value = name;
// name代表状态值
queryOrderList();
}
function pay(orderData) {
console.log(orderData);
const { order_no, notify_url, price, brand, sign, plain_text } =
orderData.pay_info;
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/ycysp/orderDetail?order_id=${id}&order_no=${order_no}`,
});
}
function viewPwd(orderData) {
const { voucher_link } = orderData;
if (voucher_link) {
console.log("跳转外部链接--->", voucher_link);
window.location.href = voucher_link;
} else {
console.error(`${voucher_link}无有效值`);
}
}
function removeOrder(orderData) {
message
.confirm({
msg: "删除订单后无法恢复，确认继续吗？",
title: "提示",
}) })
.then(() => {
const { id } = orderData;
const params = { order_id: id };
deleteOrder({ params })
.then((res) => {
replace.value = true;
queryOrderList();
})
.catch((err) => {
console.log(err);
});
})
.catch(() => {
console.log("点击了取消按钮");
});
}
function queryNext(){ function refund(orderData) {
console.log(unref(isLastPage)); const { id } = orderData;
if(unref(isLastPage)){ if (!id) {
console.error('已经是最后一页'); uni.showToast({
return false; icon: "none",
}; title: "无有效的订单id",
page.value = page.value + 1 });
queryOrderList() return;
} }
const params = { order_id: id };
refundOrder({ params })
.then((res) => {
uni.showToast({
icon: "success",
title: "退款成功",
});
replace.value = true;
queryOrderList();
})
.catch((err) => {
console.log(err);
});
}
onMounted(() => {
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> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.page-wrapper{ .page-wrapper {
width:100%; width: 100%;
// height: 100%; // height: 100%;
height: calc(100vh - 42rpx); height: calc(100vh - 42rpx);
overflow-y: auto; overflow-y: auto;
background: #FAFBFD; background: #fafbfd;
box-sizing: border-box; box-sizing: border-box;
padding-bottom:30rpx padding-bottom: 30rpx;
} }
.order-wrapper{ .order-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width:100%; width: 100%;
} }
.no-more{ .no-more {
font-weight: normal;
font-size: 18rpx;
color: #999999;
height: 146rpx;
padding: 28rpx 0;
display: flex;
align-items: flex-end;
justify-content: center;
box-sizing: border-box;
}
.no-data {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.no-img {
width: 446rpx;
height: 446rpx;
}
.no-text {
font-weight: normal; font-weight: normal;
font-size: 18rpx; font-size: 24rpx;
color: #999999; color: #999999;
height:146rpx; }
padding: 28rpx 0;
display: flex;
align-items: flex-end;
justify-content: center;
box-sizing: border-box;
}
.no-data{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.no-img{
width:446rpx;
height: 446rpx;
}
.no-text{
font-weight: normal;
font-size: 24rpx;
color: #999999;
}
} }
/* 修改标签页下划线颜色*/ /* 修改标签页下划线颜色*/
// :deep(.wd-button.is-primary){ // :deep(.wd-button.is-primary){
// background: #EA0000; // background: #EA0000;
// } // }
:deep(.wd-tabs__line) { :deep(.wd-tabs__line) {
background: 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;
flex-direction: column; flex-direction: column;
height:100%; height: 100%;
} }
:deep(.wd-tab__body){ :deep(.wd-tab__body) {
height:calc(100vh - 42rpx); height: calc(100vh - 42rpx);
} }
:deep(.wd-tabs__container){ :deep(.wd-tabs__container) {
flex:1; flex: 1;
} }
</style> </style>

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

@ -1,259 +1,296 @@
<route lang="json5" type="page"> <route lang="json5" type="page">
{ {
style: { style: {
navigationStyle: 'custom', navigationStyle: "custom",
navigationBarTitleText: '订单详情', navigationBarTitleText: "订单详情",
navigationBarBackgroundColor:'#FFF', navigationBarBackgroundColor: "#FFF",
}, },
} }
</route> </route>
<template> <template>
<view class="w-full h-full flex flex-col flex-items-center page"> <view class="w-full h-full flex flex-col flex-items-center page">
<view class="wrapper"> <view class="wrapper">
<view class="pro-info"> <view class="pro-info">
<view class="title">订单详情</view> <view class="title">订单详情</view>
<view class="content flex"> <view class="content flex">
<image class="pro-img" :src="orderDetail.main_image" /> <image class="pro-img" :src="orderDetail.main_image" />
<view class="flex flex-1 flex-col"> <view class="flex flex-1 flex-col">
<view class="flex flex-justify-between name" style="margin-bottom:12rpx"> <view
<view class="text-over">{{ orderDetail.product_name }}</view> class="flex flex-justify-between name"
<view class="amount"><text>￥</text>{{ orderDetail.order_amount }}<text>元</text></view> style="margin-bottom: 12rpx"
</view> >
<view class="flex num"> <view class="text-over">{{ orderDetail.product_name }}</view>
<view>充值账号：</view> <view class="amount"
<view>{{ maskPhoneNumber(orderDetail.account) }}</view> ><text>￥</text>{{ orderDetail.order_amount
</view> }}<text>元</text></view
<view class="flex flex-justify-between num"> >
<view>数量</view>
<view>x1</view>
</view>
</view>
</view>
</view> </view>
<view class="line"></view> <view class="flex num">
<view class="order-info"> <view>充值账号：</view>
<view class="info-item">订单编号：{{ orderDetail.order_no }}</view> <view>{{ maskPhoneNumber(orderDetail.account) }}</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>
<view class="line"></view> <view class="flex flex-justify-between num">
<view>数量</view>
<view>x1</view>
</view>
</view>
</view> </view>
<view class="btns"> </view>
<view class="btn pwd" @click="pay(orderDetail)" v-if="[1].includes(orderDetail.status)">立即付款</view> <view class="line"></view>
<view class="btn pwd" v-if="[4].includes(orderDetail.status)" @click="goRefund">申请退款</view> <view class="order-info">
<view class="btn back" @click="backIndex">返回首页</view> <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>
<view class="line"></view>
</view> </view>
<view class="btns">
<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> </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 })
uni.showToast({ .then((res) => {
icon: 'success', uni.showToast({
title: '退款成功', icon: "success",
}); 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>
.page { .page {
background-color: #fafafa; background-color: #fafafa;
} }
.line{ .line {
width: 662rpx; width: 662rpx;
height: 1rpx; height: 1rpx;
background-color: #E1E1F0; background-color: #e1e1f0;
transform: scaleY(0.5); transform: scaleY(0.5);
} }
.wrapper { .wrapper {
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;
padding: 32rpx 24rpx; padding: 32rpx 24rpx;
.pro-info { .pro-info {
// border-bottom: 1rpx solid #F0E1E1; // border-bottom: 1rpx solid #F0E1E1;
.title { .title {
font-weight: 500; font-weight: 500;
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
margin-bottom: 28rpx; margin-bottom: 28rpx;
}
.content {
margin-bottom: 24rpx;
font-weight: 400;
.pro-img {
display: block;
width: 90rpx;
height: 90rpx;
margin-right: 34rpx;
}
.text-over {
max-width: 80%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.name {
font-size: 24rpx;
color: #333333;
font-weight: 700;
}
.amount {
color: #333333;
font-weight: 400;
font-size: 24rpx;
text:nth-child(1) {
font-size: 20rpx;
}
text:nth-child(2) {
font-size: 22rpx;
}
}
.num {
font-weight: 400;
font-size: 24rpx;
color: #9E9E9E;
margin-bottom:10rpx;
}
}
} }
.order-info { .content {
// border-bottom: 1rpx solid #F0E1E1; margin-bottom: 24rpx;
.info-item { font-weight: 400;
font-weight: 400;
font-size: 22rpx; .pro-img {
color: #6C6C6C; display: block;
margin-top: 24rpx; 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 { .btns {
margin-top: 146rpx; margin-top: 146rpx;
display: flex;
.btn {
width: 312rpx;
height: 76rpx;
border-radius: 38rpx;
display: flex; display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.btn { .pwd {
width: 312rpx; font-weight: 500;
height: 76rpx; font-size: 32rpx;
border-radius: 38rpx; color: #ffffff;
display: flex; background: linear-gradient(270deg, #2c91ff 0%, #9ad2ff 100%);
flex-direction: column; margin-right: 10rpx;
align-items: center; }
justify-content: center;
}
.pwd { .back {
font-weight: 500; font-weight: 400;
font-size: 32rpx; font-size: 32rpx;
color: #FFFFFF; color: #b9c8c7;
background: linear-gradient(270deg, #2C91FF 0%, #9AD2FF 100%); border: 2rpx solid #b9c8c7;
margin-right: 10rpx; }
}
.back {
font-weight: 400;
font-size: 32rpx;
color: #B9C8C7;
border: 2rpx solid #B9C8C7;
}
} }
</style> </style>

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

@ -1,43 +1,47 @@
<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 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>
<view class="line"></view> <view class="detail-other">
<view class="order-info"> <view class="flex flex-justify-between name-info">
<view class="order-item">充值账户：{{ maskPhoneNumber(orderDetail.account) }}</view> <text>{{ orderDetail.product_name }}</text>
<view class="order-item">充值类型：{{ orderDetail.product_type}}</view> <text
<!-- <view class="order-item">优惠金额：{{ discount }}</view> --> ><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>
<!-- <view class="order-info"> <view class="line"></view>
<view class="order-info">
<view class="order-item"
>充值账户：{{ 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="count-item">共 1 件，应付总额：<text style="text-decoration: line-through;">￥{{ detail.order_amount }}</text></view>
<view class="number-item">实际支付：¥{{ detail.order_amount }}</view> <view class="number-item">实际支付：¥{{ detail.order_amount }}</view>
</view> --> </view> -->
@ -47,157 +51,166 @@
</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 {
width:100vw; width: 100vw;
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;
} }
.info{ .info {
width: 702rpx; width: 702rpx;
// height: 514rpx; // height: 514rpx;
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;
} }
.line{ .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%; width: 100%;
height: 1rpx; height: 100%;
background: #e1e1f0; }
transform: scaleY(0.5);
} }
.title-small{ .detail-other {
font-size: 28rpx; flex: 1;
font-weight: normal; font-weight: 400;
line-height: 32rpx; line-height: 32rpx;
letter-spacing: 0rpx; letter-spacing: 0rpx;
color: #333333; .name-info {
}
.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; font-size: 24rpx;
color: #2E92FF; color: #333333;
text-align: right; }
margin-top:16rpx; .count-info {
font-size: 20rpx;
color: #9e9e9e;
margin-top: 12rpx;
}
} }
.pay-btn{ .order-info {
width: 710rpx; padding-bottom: 24rpx;
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> .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>