对接音视频的部分接口
This commit is contained in:
parent
22461b4063
commit
b8cc9f8686
|
|
@ -2,4 +2,7 @@
|
|||
# VITE_BASE_URL = 'http://192.168.110.50:8083'
|
||||
# 邮储奶茶活动
|
||||
# VITE_BASE_URL = 'http://milk.api.test.86698.cn'
|
||||
VITE_BASE_URL = 'http://milk.test.api.cdlsxd.cn'
|
||||
# VITE_BASE_URL = 'http://milk.test.api.cdlsxd.cn'
|
||||
# 邮储音视频
|
||||
# VITE_BASE_URL = 'http://milk.api.test.86698.cn'
|
||||
VITE_BASE_URL = 'http://192.168.110.128:8081'
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import path from 'path'
|
|||
|
||||
const config = {
|
||||
pages:'./src/pages',
|
||||
pagesInclude:['ycysp/pay.vue']
|
||||
pagesInclude:['ycysp/home.vue','ycysp/pay.vue','ycysp/order.vue','ycysp/orderDetail.vue',]
|
||||
}
|
||||
const { pages, pagesInclude } = config
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
import http from "../utils/http";
|
||||
|
||||
|
||||
export const login = (params) => http({
|
||||
url:'/api/v1/login',
|
||||
method:'POST',
|
||||
noToken:true,
|
||||
...params
|
||||
})
|
||||
|
||||
export const getBrandList = (params) => http({
|
||||
url:'/api/v1/brand',
|
||||
method:'GET',
|
||||
...params
|
||||
})
|
||||
|
||||
export const getProductList = (params) => http({
|
||||
url:'/api/v1/product',
|
||||
method:'GET',
|
||||
...params
|
||||
})
|
||||
|
||||
|
||||
export const createOrder = (params) => http({
|
||||
url:'/api/v1/order',
|
||||
method:'POST',
|
||||
...params
|
||||
})
|
||||
|
|
@ -1,17 +1,53 @@
|
|||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/ycysp/coupon",
|
||||
"type": "page"
|
||||
"path": "pages/ycysp/home",
|
||||
"type": "home",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "音视频专区",
|
||||
"navigationBarBackgroundColor": "#FFF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/ycysp/order",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "我的订单",
|
||||
"navigationBarBackgroundColor": "#FFF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/ycysp/orderDetail",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "订单详情",
|
||||
"navigationBarBackgroundColor": "#FFF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/ycysp/pay",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "支付确认",
|
||||
"navigationBarBackgroundColor": "#FFF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/ycysp/component/coupon-item",
|
||||
"type": "page"
|
||||
},
|
||||
{
|
||||
"path": "pages/ycysp/component/member",
|
||||
"type": "page"
|
||||
},
|
||||
{
|
||||
"path": "pages/ycysp/component/order-item",
|
||||
"type": "page"
|
||||
},
|
||||
{
|
||||
"path": "pages/ycysp/component/recharge-item",
|
||||
"type": "page"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<view class="flex coupon-wrapper">
|
||||
<view class="flex flex-justify-center flex-items-center left">
|
||||
<text>￥</text>
|
||||
<text>10</text>
|
||||
</view>
|
||||
<view class="flex flex-justify-between flex-items-center right">
|
||||
<view class="coupon-info">
|
||||
<view class="coupon-name">芒果全屏会员年卡适用</view>
|
||||
<view class="coupon-time">2024.09.19 -2024.10.31</view>
|
||||
<view class="coupon-time">单日限领取1张</view>
|
||||
</view>
|
||||
<view class="flex flex-justify-center flex-items-center btn">立即领取</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, unref, onMounted} from 'vue';
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.coupon-wrapper{
|
||||
width: 686rpx;
|
||||
height: 178rpx;
|
||||
box-sizing: border-box;
|
||||
background: url('@/static/ycysp/coupon.webp') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.left{
|
||||
width:150rpx;
|
||||
height:100%;
|
||||
color: #0E9BF2;
|
||||
letter-spacing: 0.04em;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
margin-right:20rpx;
|
||||
|
||||
text:first-child{
|
||||
font-size: 26rpx;
|
||||
}
|
||||
text:last-child{
|
||||
font-size: 74rpx;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
flex:1;
|
||||
height:100%;
|
||||
box-sizing: border-box;
|
||||
padding-left:10rpx;
|
||||
padding-right:20rpx;
|
||||
overflow: hidden;
|
||||
.coupon-info{
|
||||
width:calc(100% - 30rpx - 162rpx);
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.coupon-name{
|
||||
width:100%;
|
||||
font-size: 28rpx;
|
||||
color: #1F93DA;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.coupon-time{
|
||||
font-size: 24rpx;
|
||||
color: #78839E;
|
||||
margin-top:6rpx;
|
||||
}
|
||||
.btn{
|
||||
width: 162rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 27rpx;
|
||||
opacity: 1;
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
line-height: 32rpx;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +1,56 @@
|
|||
<template>
|
||||
<view class="wrapper"></view>
|
||||
<view class="wrapper">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"
|
||||
viewBox="0 0 13 13" class="svg" @click="checkedEvent">
|
||||
<g>
|
||||
<ellipse cx="6.5" cy="6.5" rx="6.5" ry="6.5" fill="#FFFFFF" fill-opacity="1" />
|
||||
<path
|
||||
d="M6.85467,0.16026C6.65747,-0.049906,6.33416,-0.0538585,6.13257,0.151333L2.65289,3.69208L0.855769,1.81926C0.669146,1.62458,0.356251,1.63538,0.156706,1.84316C-0.0428302,2.05098,-0.0532221,2.37714,0.133625,2.57177L2.33038,4.86098C2.51696,5.05539,2.82989,5.04459,3.0294,4.83682C3.07511,4.78922,3.10934,4.73525,3.13501,4.67819C3.15477,4.66321,3.17447,4.649,3.19236,4.63059L6.84614,0.91282C7.048,0.707426,7.05164,0.370686,6.85467,0.16026L6.85467,0.16026Z"
|
||||
fill="#FE3B34" fill-opacity="1" class="gou" v-if="detail.isChecked"/>
|
||||
<ellipse cx="6.5" cy="6.5" rx="6.199999988079071" ry="6.199999988079071" fill-opacity="0" stroke-opacity="1"
|
||||
stroke="#FE3B34" fill="none" stroke-width="0.6000000238418579" />
|
||||
</g>
|
||||
</svg>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, unref, onMounted} from 'vue';
|
||||
import { e } from 'unocss';
|
||||
import { ref, reactive, unref, onMounted } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
detail:{
|
||||
type:Object,
|
||||
required:true
|
||||
}
|
||||
})
|
||||
const emits = defineEmits(['checked'])
|
||||
|
||||
const checkedEvent = () => {
|
||||
emits('checked',props.detail.id)
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.wrapper{
|
||||
// width:226rpx;
|
||||
width:100%;
|
||||
height:110rpx;
|
||||
box-sizing: border-box;
|
||||
background: url('@/static/ycysp/cloud.webp') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.wrapper {
|
||||
// width:226rpx;
|
||||
width: 100%;
|
||||
height: 110rpx;
|
||||
box-sizing: border-box;
|
||||
background: url('@/static/ycysp/cloud.webp') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
}
|
||||
.gou{
|
||||
width:14rpx;
|
||||
height:10rpx;
|
||||
transform: translate(5rpx,8rpx);
|
||||
}
|
||||
.svg {
|
||||
position: absolute;
|
||||
right: 6rpx;
|
||||
top: 6rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
<template>
|
||||
<view class="order-item-wrapper flex flex-col box-border" @click="goDetail">
|
||||
<view class="nav-info flex flex-justify-between" >
|
||||
<view>订单编号：{{ detail.order_no }}</view>
|
||||
<view :style="{color:stateColor[detail.state] || ''}">{{ stateConfig[detail.state] }}</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.price }}<text>元</text></view>
|
||||
</view>
|
||||
<view class="flex flex-justify-between num">
|
||||
<view>数量</view>
|
||||
<view>x1</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time">下单时间：{{ detail.create_time }}</view>
|
||||
</view>
|
||||
<view class="btns flex flex-justify-end">
|
||||
<view class="btn del" @click="goDel">删除订单</view>
|
||||
<view class="btn pay" v-if="[1].includes(detail.state)" @click="goPay">立即付款</view>
|
||||
<view class="btn view" v-if="[3].includes(detail.state) && !!detail.voucher_link" @click="goPwd">查看卡券</view>
|
||||
<view class="btn pay" @click="goRefund" v-if="[4].includes(detail.state)">申请退款</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { stateConfig, stateColor } from '../config';
|
||||
const props = defineProps({
|
||||
detail:{
|
||||
type:Object,
|
||||
required: true,
|
||||
default:() => ({})
|
||||
}
|
||||
})
|
||||
const emits = defineEmits(['pay-event','detail-event','pwd-event','del-event'])
|
||||
|
||||
function goPay(e){
|
||||
if(e.stopPropagation) { //W3C阻止冒泡方法
|
||||
e.stopPropagation();
|
||||
}
|
||||
emits('pay-event', props.detail);
|
||||
}
|
||||
|
||||
|
||||
function goDetail(e){
|
||||
emits('detail-event', props.detail);
|
||||
}
|
||||
|
||||
function goPwd(e){
|
||||
if(e.stopPropagation) { //W3C阻止冒泡方法
|
||||
e.stopPropagation();
|
||||
}
|
||||
emits('pwd-event', props.detail);
|
||||
}
|
||||
|
||||
function goDel(e){
|
||||
if(e.stopPropagation) { //W3C阻止冒泡方法
|
||||
e.stopPropagation();
|
||||
}
|
||||
emits('del-event', props.detail);
|
||||
}
|
||||
|
||||
function goRefund(e){
|
||||
if(e.stopPropagation) { //W3C阻止冒泡方法
|
||||
e.stopPropagation();
|
||||
}
|
||||
emits('refund-event', props.detail);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.order-item-wrapper{
|
||||
width: 702rpx;
|
||||
// height: 386rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding:24rpx;
|
||||
margin:24rpx 0 16rpx;
|
||||
}
|
||||
.nav-info{
|
||||
font-size:22rpx;
|
||||
font-weight:400;
|
||||
:first-child{
|
||||
color: #333333;
|
||||
}
|
||||
:last-child{
|
||||
color: #787878;
|
||||
}
|
||||
}
|
||||
.order-info{
|
||||
margin-top:24rpx;
|
||||
.content{
|
||||
margin-bottom:24rpx;
|
||||
font-weight: 400;
|
||||
.pro-img{
|
||||
display: block;
|
||||
width:90rpx;
|
||||
height:90rpx;
|
||||
margin-right:34rpx;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
font-size: 22rpx;
|
||||
color: #6C6C6C;
|
||||
}
|
||||
.info-item{
|
||||
font-weight: bold;
|
||||
margin-bottom:12rpx;
|
||||
}
|
||||
.text-over{
|
||||
max-width:80%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.amount{
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
font-size:24rpx;
|
||||
text:nth-child(1){
|
||||
font-size:20rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
text:nth-child(2){
|
||||
font-size:22rpx;
|
||||
}
|
||||
}
|
||||
.name{
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
font-weight: 700;
|
||||
}
|
||||
.num{
|
||||
font-size: 20rpx;
|
||||
color: #9E9E9E;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.btns{
|
||||
border-top: 1rpx solid #F0E1E1;
|
||||
padding:36rpx 0 12rpx;
|
||||
margin-top:24rpx;
|
||||
.btn{
|
||||
width: 168rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 68rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left:48rpx;
|
||||
}
|
||||
.del{
|
||||
color: #545454;
|
||||
border: 2rpx solid #B9C8C7;
|
||||
}
|
||||
.pay{
|
||||
color: #FFFFFF;
|
||||
background: #EA0000;
|
||||
}
|
||||
.view{
|
||||
background: #FFFFFF;
|
||||
border-radius: 68rpx;
|
||||
border: 2rpx solid #EA0000;
|
||||
color:#EA0000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,16 +1,28 @@
|
|||
<template>
|
||||
<view class="flex flex-col flex-items-center flex-justify-center re-wrapper">
|
||||
<view class="type-name">黄金月卡</view>
|
||||
<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="flex type-amount">
|
||||
<view class="flex flex-col flex-justify-end icon">￥</view>
|
||||
<view class="num">18</view>
|
||||
<view class="num">{{ detail.sell_price }}</view>
|
||||
</view>
|
||||
<view class="type-ori">原价30</view>
|
||||
<view class="type-ori">原价{{ detail.price }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, unref, onMounted} from 'vue';
|
||||
const props = defineProps({
|
||||
detail:{
|
||||
type:Object,
|
||||
required:true
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['selected'])
|
||||
|
||||
const selectEvent = () => {
|
||||
emits('selected',props.detail.id)
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -20,8 +32,12 @@
|
|||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
opacity: 1;
|
||||
background: #DCEFFF;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
border: 1.6rpx solid #ececec;
|
||||
}
|
||||
.is-checked{
|
||||
background: #DCEFFF;
|
||||
border: 1.6rpx solid #2D91FF;
|
||||
}
|
||||
.type-name{
|
||||
|
|
@ -34,21 +50,17 @@
|
|||
}
|
||||
.type-amount{
|
||||
margin-top:6rpx;
|
||||
color: $sub-price-color;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
letter-spacing: 0em;
|
||||
.icon{
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
letter-spacing: 0em;
|
||||
color: #659BEB;
|
||||
margin-bottom:4rpx;
|
||||
}
|
||||
.num{
|
||||
/* 价格 */
|
||||
font-size: 48rpx;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
letter-spacing: 0em;
|
||||
color: #659BEB;
|
||||
}
|
||||
}
|
||||
.type-ori{
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<view class="flex pos-relative wrapper flex-justify-between" :class="{small:['small'].includes(type),large:['large'].includes(type)}">
|
||||
<view class="flex flex-items-center flex-justify-center pos-absolute tips" v-if="['small'].includes(type)">每日限量50张</view>
|
||||
<view class="amount">
|
||||
<view class="amount" :style="{width:['small'].includes(type) ? '120rpx' : '140rpx'}">
|
||||
<view class="icon">￥</view>
|
||||
<view class="number">10</view>
|
||||
<view class="number">100</view>
|
||||
</view>
|
||||
<view class="operation" v-if="['small'].includes(type)">
|
||||
<view class="name">优酷喵喵年卡适用</view>
|
||||
|
|
@ -33,7 +33,6 @@ const props = defineProps({
|
|||
<style scoped lang="scss">
|
||||
.wrapper{
|
||||
height: 136rpx;
|
||||
color: #0E9BF2;
|
||||
}
|
||||
.small{
|
||||
width: 322rpx;
|
||||
|
|
@ -49,7 +48,8 @@ const props = defineProps({
|
|||
.tips{
|
||||
border-radius: 20rpx 0rpx 20rpx 0rpx;
|
||||
opacity: 1;
|
||||
background: #69C5FF;width: 100rpx;
|
||||
background: #69C5FF;
|
||||
width: 100rpx;
|
||||
height: 20rpx;
|
||||
width: 100rpx;
|
||||
font-size: 12rpx;
|
||||
|
|
@ -61,12 +61,11 @@ const props = defineProps({
|
|||
.amount{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// width:120rpx;
|
||||
width:140rpx;
|
||||
height:100%;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.04em;
|
||||
color:$price-color;
|
||||
}
|
||||
.icon{
|
||||
font-size: 18rpx;
|
||||
|
|
@ -94,7 +93,7 @@ const props = defineProps({
|
|||
font-weight: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: 0em;
|
||||
color: #1F93DA;
|
||||
color: $text-color;
|
||||
overflow: hidden; /*文本超出隐藏*/
|
||||
display:-webkit-box; /*盒子模型微弹性伸缩模型*/
|
||||
-webkit-box-orient: vertical;/*伸缩盒子的子元素垂直排列*/
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<view class="page-wrapper">
|
||||
|
||||
<couponItem />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, unref, onMounted} from 'vue';
|
||||
import couponItem from './component/coupon-item.vue';
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,13 @@
|
|||
<route lang="json5" type="home">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '音视频专区',
|
||||
navigationBarBackgroundColor:'#FFF',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<scroll-view class="page-wrapper" scroll-y>
|
||||
<view class="w-full box-border banner-container">
|
||||
|
|
@ -8,7 +18,7 @@
|
|||
/>
|
||||
</view>
|
||||
<!-- //优惠券 -->
|
||||
<view class="ticket-container">
|
||||
<!-- <view class="ticket-container">
|
||||
<view class="title">
|
||||
<view class="title-line"></view>
|
||||
<view class="title-text">领券更划算</view>
|
||||
|
|
@ -19,7 +29,7 @@
|
|||
<ticketRecieve />
|
||||
<ticketRecieve type="large"/>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- //选择充值类型的会员 -->
|
||||
<view class="member-container">
|
||||
<view class="title">
|
||||
|
|
@ -27,8 +37,8 @@
|
|||
</view>
|
||||
<scroll-view scroll-x class="scroll">
|
||||
<view class="swiper">
|
||||
<view v-for="(item,index) in typeArr" class="member-item">
|
||||
<member key="index"/>
|
||||
<view v-for="(item,index) in brandArr" class="member-item">
|
||||
<member :key="item.id" :detail="item" @checked="handleChecked"/>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
|
@ -39,18 +49,17 @@
|
|||
<view class="title-text">充值选项</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="recharge-scroll">
|
||||
|
||||
<view v-for="(item,index) in typeArr" class="recharge-item">
|
||||
<rechargeItem key="index"/>
|
||||
</view>
|
||||
<view v-for="(item,index) in productArr" class="recharge-item">
|
||||
<rechargeItem :key="item.id" :detail="item" @selected="handleSelected"/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- //手机号 -->
|
||||
<view class="input-container">
|
||||
<input type="text" placeholder="请输入手机号码充值" placeholder-class="pcs">
|
||||
<input type="text" placeholder="请输入手机号码充值" placeholder-class="pcs" v-model="account">
|
||||
</view>
|
||||
<!-- 下一步 -->
|
||||
<view class="flex flex-items-center flex-justify-center next-btn">
|
||||
<view class="flex flex-items-center flex-justify-center next-btn" @click="nextEvent">
|
||||
下一步
|
||||
</view>
|
||||
<!-- 描述 -->
|
||||
|
|
@ -69,12 +78,94 @@
|
|||
</template>
|
||||
|
||||
<script setup >
|
||||
import { ref, reactive, unref, onMounted} from 'vue';
|
||||
import ticketRecieve from './component/ticket-recieve.vue';
|
||||
import { ref, reactive, unref, onMounted, nextTick} from 'vue';
|
||||
// import ticketRecieve from './component/ticket-recieve.vue';
|
||||
import member from './component/member.vue';
|
||||
import rechargeItem from './component/recharge-item.vue';
|
||||
import {getBrandList,getProductList} from '@/api/ycysp';
|
||||
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 brandArr = ref([])
|
||||
const productArr = ref([])
|
||||
const account = ref('')
|
||||
|
||||
const typeArr = new Array(8).fill(new Date().getTime())
|
||||
//获取品牌
|
||||
const getBrand = () => {
|
||||
return getBrandList().then(res => {
|
||||
const {list} = res;
|
||||
brandArr.value = list.map((item,index) => ({...item,isChecked:index === 0}))
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
}
|
||||
|
||||
//获取商品
|
||||
const getProduct = () => {
|
||||
const checkedBrand = brandArr.value.find(item => item.isChecked)
|
||||
const params = {brand_id:checkedBrand.id}
|
||||
getProductList({params}).then(res => {
|
||||
const {list} = res;
|
||||
productArr.value = list.map((item,index) => ({...item,isSelected:index === 0}))
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
}
|
||||
|
||||
//选中品牌
|
||||
const handleChecked = (checkedId) => {
|
||||
brandArr.value = brandArr.value.map((item,index) => {
|
||||
const {id,isChecked} = item;
|
||||
if(checkedId === id){
|
||||
return {...item,isChecked:!isChecked}
|
||||
}
|
||||
return {...item,isChecked:false}
|
||||
})
|
||||
getProduct()
|
||||
}
|
||||
|
||||
//选中商品
|
||||
const handleSelected = (selectedId) => {
|
||||
productArr.value = productArr.value.map((item,index) => {
|
||||
const {id,isSelected} = item;
|
||||
if(selectedId === id){
|
||||
return {...item,isSelected:!isSelected}
|
||||
}
|
||||
return {...item,isSelected:false}
|
||||
})
|
||||
}
|
||||
|
||||
//下一步事件
|
||||
const nextEvent = () => {
|
||||
const selectProduct = productArr.value.find(item => item.isSelected)
|
||||
if(!selectProduct){
|
||||
uni.showToast({
|
||||
title: '请选择充值选项',
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
if(!account.value){
|
||||
uni.showToast({
|
||||
title: '请填写充值手机号',
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
if(!reg.test(account.value)){
|
||||
uni.showToast({
|
||||
title: '手机号格式不正确',
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url:`/pages/ycysp/pay?account=${encodeURIComponent(account.value)}&product=${encodeURIComponent(JSON.stringify(selectProduct))}`
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await getBrand()
|
||||
getProduct()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -83,7 +174,8 @@ const typeArr = new Array(8).fill(new Date().getTime())
|
|||
width:100vw;
|
||||
height:100vh;
|
||||
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;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.banner-container{
|
||||
|
|
@ -145,15 +237,15 @@ const typeArr = new Array(8).fill(new Date().getTime())
|
|||
}
|
||||
.scroll{
|
||||
width:100%;
|
||||
height:240rpx;
|
||||
// height:250rpx;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.swiper{
|
||||
width:calc((100vw - 68rpx) / 3 * 4 + 64rpx)
|
||||
// white-space: nowrap;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width:calc((100vw - 68rpx) / 3 * 4 + 64rpx)
|
||||
}
|
||||
.member-item{
|
||||
display: inline-block;
|
||||
margin:0 16rpx 16rpx 0;
|
||||
width:calc((100vw - 68rpx) / 3);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
import md5 from 'js-md5';
|
||||
export default function useCode(){
|
||||
return new Promise((resolve,reject) => {
|
||||
const authCallback = (params) => {
|
||||
console.log('authCallback-use',params);
|
||||
const {code} = params
|
||||
resolve(code)
|
||||
}
|
||||
const getNewAuthorization = () => {
|
||||
let appId = import.meta.env.VITE_YCNC_APPID;
|
||||
let time = Date.now().toString();
|
||||
let secret = import.meta.env.VITE_YCNC_SECRET;
|
||||
let signBefore = appId + time + secret;
|
||||
let sign = md5(signBefore);//普通md5
|
||||
let param = {
|
||||
appId: appId,
|
||||
sign: sign,
|
||||
time: time,
|
||||
tran_code: "157",
|
||||
fn: "authCallback",
|
||||
needBind: ""
|
||||
};
|
||||
console.log('auth-param157-use',param);
|
||||
Fw.device.api.getNewAuthorization(param)
|
||||
};
|
||||
window.authCallback = authCallback;
|
||||
getNewAuthorization()
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import dayjs from "dayjs";
|
||||
import md5 from 'js-md5';
|
||||
const handleParams = (obj) => Object.entries(obj).reduce((total,curr) => {
|
||||
if(!total){
|
||||
total += `${curr[0]}=${curr[1]}`
|
||||
}else{
|
||||
total += `|${curr[0]}=${curr[1]}`
|
||||
}
|
||||
return total
|
||||
},'')
|
||||
|
||||
|
||||
export default function usePay(){
|
||||
const payFunc = (args) => {
|
||||
const {order_no,notify_url,TranAmt,MerName,sign,plain_text} = args;
|
||||
const MercCode = import.meta.env.VITE_YCNC_MERCH_CODE
|
||||
const tranAmt = Number(TranAmt).toFixed(2)
|
||||
// const plainText = handleParams({MercCode,TranAmt:tranAmt,TermSsn:order_no})
|
||||
const Plain = {
|
||||
MercUrl:notify_url,
|
||||
TranAmt:tranAmt,
|
||||
TermSsn:order_no,
|
||||
BackLink:encodeURIComponent(`${window.location.origin}/#/pages/ycnc/orderDetail?order_no=${order_no}&isPayBack=true`),
|
||||
psbcmcc:'LSXD',
|
||||
TxnDt:dayjs(Date.now()).format('YYYY-MM-DD'),
|
||||
MercCode:MercCode,
|
||||
IsIntegral:'1',
|
||||
MerName:MerName,
|
||||
}
|
||||
const params = {
|
||||
Plain:handleParams(Plain),
|
||||
plainText:plain_text,
|
||||
sign:sign,
|
||||
Signature: '',
|
||||
}
|
||||
console.log('handCodePay-plain',Plain);
|
||||
console.log('handCodePay-params',params);
|
||||
Fw.device.api.handCodePay(params);
|
||||
}
|
||||
return {payFunc}
|
||||
}
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
<route lang="json5" type="page">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '我的订单',
|
||||
navigationBarBackgroundColor:'#FFF',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<wd-tabs color="#333" inactiveColor="#888" @click="handleClick">
|
||||
<block v-for="item in tabs" :key="item.state">
|
||||
<wd-tab :title="item.tabName" :name="item.state">
|
||||
<scroll-view scroll-y class="page-wrapper" @scrolltolower="queryNext">
|
||||
<!-- <view class="order-wrapper flex flex-col flex-items-center" v-if="Array.isArray(list[item.state]) && list[item.state].length > 0"> -->
|
||||
<!-- <view v-for="(ele,index) in list[item.state]" :key="`${ele.id}-${item.state}`">
|
||||
<OrderItem :detail="ele" @pay-event="pay" @detail-event="viewDetail" @pwd-event="viewPwd"/>
|
||||
</view> -->
|
||||
<view class="order-wrapper flex flex-col flex-items-center" v-if="Array.isArray(list) && list.length > 0">
|
||||
<view v-for="(ele,index) in list" :key="`${ele.id}-${item.state}`">
|
||||
<OrderItem
|
||||
:detail="ele"
|
||||
@pay-event="pay"
|
||||
@detail-event="viewDetail"
|
||||
@pwd-event="viewPwd"
|
||||
@del-event="removeOrder"
|
||||
@refund-event="refund"
|
||||
/>
|
||||
</view>
|
||||
<view class="no-more" v-if="isLastPage">没有更多了~</view>
|
||||
</view>
|
||||
<view class="no-data" v-else>
|
||||
<image
|
||||
src="/static/ycnc/bg-nodata.png"
|
||||
mode="scaleToFill"
|
||||
class="no-img"
|
||||
/>
|
||||
<text class="no-text">暂无订单，快去下单吧~</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</wd-tab>
|
||||
</block>
|
||||
</wd-tabs>
|
||||
<wd-message-box />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useMessage } from 'wot-design-uni'
|
||||
import OrderItem from './components/order-item';
|
||||
import usePay from './hooks/usePay';
|
||||
import { getOrderList,deleteOrder,refundOrder } from '../../api/ycnc';
|
||||
import { onMounted, ref, unref,reactive,computed } from 'vue';
|
||||
import { tabs } from './config';
|
||||
import {deepClone} from '../../utils/utils'
|
||||
const message = useMessage()
|
||||
const pageSize = 10;
|
||||
const activeName = ref(0);
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const list = ref([]);
|
||||
const replace = ref(false);
|
||||
//页码
|
||||
// const enumPage = tabs.reduce((prev,cur) => {
|
||||
// prev[cur.state] = 1
|
||||
// return prev
|
||||
// },{})
|
||||
// const page = ref(enumPage)
|
||||
// //总数
|
||||
// const enumObj = tabs.reduce((prev,cur) => {
|
||||
// prev[cur.state] = 0
|
||||
// return prev
|
||||
// },{})
|
||||
// const total = reactive(enumObj);
|
||||
//数据列表
|
||||
// const enumOrder = tabs.reduce((prev,cur) => {
|
||||
// prev[cur.state] = []
|
||||
// return prev
|
||||
// },{})
|
||||
// const list = reactive(enumOrder)
|
||||
|
||||
//获取订单列表
|
||||
const queryOrderList = () => {
|
||||
const activeTab = unref(activeName);
|
||||
const params = {
|
||||
page:unref(page),
|
||||
pageSize:pageSize,
|
||||
...(activeTab !== 0 && {state:activeTab})
|
||||
}
|
||||
getOrderList({params}).then(res => {
|
||||
const {count,data} = res
|
||||
total.value = count
|
||||
// Object.assign(list,{[activeTab]:[...list[activeTab],...data]})
|
||||
if(replace.value){
|
||||
const prevPage = page.value - 1;
|
||||
const prevList = list.value.slice(0, prevPage * pageSize);
|
||||
list.value = [...prevList,...data];
|
||||
}else{
|
||||
list.value = [...list.value,...data]
|
||||
}
|
||||
replace.value = false
|
||||
}).catch(err => {
|
||||
total.value = 0;
|
||||
// Object.assign(list,{[activeTab]:[]})
|
||||
list.value = []
|
||||
})
|
||||
}
|
||||
|
||||
function handleClick({index, name}){
|
||||
page.value = 1;
|
||||
total.value = 0;
|
||||
// Object.assign(list,{[name]:[]})
|
||||
list.value = [];
|
||||
activeName.value = name;
|
||||
// name代表状态值
|
||||
queryOrderList()
|
||||
|
||||
}
|
||||
|
||||
function pay(orderData){
|
||||
console.log(orderData);
|
||||
const {order_no,notify_url,price,brand,sign,plain_text} = orderData;
|
||||
const {payFunc} = usePay();
|
||||
payFunc({order_no,notify_url,TranAmt:price,MerName:brand,sign,plain_text})
|
||||
}
|
||||
|
||||
function viewDetail(orderData){
|
||||
const {id,order_no} = orderData;
|
||||
uni.navigateTo({
|
||||
url:`/pages/ycnc/orderDetail?order_id=${id}&order_no=${order_no}`
|
||||
})
|
||||
}
|
||||
|
||||
function viewPwd(orderData){
|
||||
const {voucher_link} = orderData
|
||||
if(voucher_link){
|
||||
console.log('跳转外部链接--->',voucher_link);
|
||||
window.location.href = voucher_link
|
||||
}else{
|
||||
console.error(`${voucher_link}无有效值`);
|
||||
}
|
||||
}
|
||||
|
||||
function removeOrder(orderData){
|
||||
message
|
||||
.confirm({
|
||||
msg: '删除订单后无法恢复，确认继续吗？',
|
||||
title: '提示'
|
||||
})
|
||||
.then(() => {
|
||||
const {id} = orderData
|
||||
const params = {order_id:id}
|
||||
deleteOrder({params}).then(res => {
|
||||
replace.value = true;
|
||||
queryOrderList()
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
console.log('点击了取消按钮')
|
||||
})
|
||||
}
|
||||
|
||||
function refund(orderData){
|
||||
const {id} = orderData
|
||||
if(!id){
|
||||
uni.showToast({
|
||||
icon:'none',
|
||||
title: '无有效的订单id',
|
||||
});
|
||||
return
|
||||
}
|
||||
const params = {order_id:id}
|
||||
refundOrder({params}).then(res => {
|
||||
uni.showToast({
|
||||
icon:'success',
|
||||
title: '退款成功',
|
||||
});
|
||||
replace.value = true;
|
||||
queryOrderList();
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
queryOrderList()
|
||||
})
|
||||
|
||||
const isLastPage = computed(()=>{
|
||||
return unref(page) === Math.ceil(unref(total) / pageSize)
|
||||
})
|
||||
|
||||
function queryNext(){
|
||||
console.log(unref(isLastPage));
|
||||
if(unref(isLastPage)){
|
||||
console.error('已经是最后一页');
|
||||
return false;
|
||||
};
|
||||
page.value = page.value + 1
|
||||
queryOrderList()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.page-wrapper{
|
||||
width:100%;
|
||||
// height: 100%;
|
||||
height: calc(100vh - 42rpx);
|
||||
overflow-y: auto;
|
||||
background: #FAFBFD;
|
||||
box-sizing: border-box;
|
||||
padding-bottom:30rpx
|
||||
}
|
||||
.order-wrapper{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width:100%;
|
||||
}
|
||||
.no-more{
|
||||
font-weight: normal;
|
||||
font-size: 18rpx;
|
||||
color: #999999;
|
||||
height:146rpx;
|
||||
padding: 28rpx 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.no-data{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.no-img{
|
||||
width:446rpx;
|
||||
height: 446rpx;
|
||||
}
|
||||
.no-text{
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
/* 修改标签页下划线颜色*/
|
||||
// :deep(.wd-button.is-primary){
|
||||
// background: #EA0000;
|
||||
// }
|
||||
:deep(.wd-tabs__line) {
|
||||
background: #EA0000;
|
||||
}
|
||||
:deep(.wd-tabs){
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height:100%;
|
||||
}
|
||||
:deep(.wd-tab__body){
|
||||
height:calc(100vh - 42rpx);
|
||||
}
|
||||
:deep(.wd-tabs__container){
|
||||
flex:1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,292 @@
|
|||
<route lang="json5" type="page">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '订单详情',
|
||||
navigationBarBackgroundColor:'#FFF',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="w-full h-full flex flex-col flex-items-center page">
|
||||
<view class="wrapper" v-if="pageType === 1">
|
||||
<view class="pro-info">
|
||||
<view class="title">订单详情</view>
|
||||
<view class="content flex">
|
||||
<image class="pro-img" :src="orderDetail.main_image" />
|
||||
<view class="flex flex-1 flex-col">
|
||||
<view class="flex flex-justify-between name" style="margin-bottom:12rpx">
|
||||
<view class="text-over">{{ orderDetail.product_name }}</view>
|
||||
<view class="amount"><text>￥</text>{{ orderDetail.price }}<text>元</text></view>
|
||||
</view>
|
||||
<view class="flex flex-justify-between num">
|
||||
<view>数量</view>
|
||||
<view>x1</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-info">
|
||||
<view class="info-item">订单编号：{{ orderDetail.order_no }}</view>
|
||||
<view class="info-item" v-if="!!orderDetail.exchange_time && ![9].includes(orderDetail.state)">支付时间：{{
|
||||
orderDetail.exchange_time }}</view>
|
||||
<view class="info-item">下单时间：{{ orderDetail.create_time }}</view>
|
||||
<view class="info-item" style="margin-bottom: 24rpx;">订单金额：{{ orderDetail.price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btns" v-if="pageType === 1">
|
||||
<view class="btn pwd" @click="viewPwd(orderDetail)"
|
||||
v-if="[3].includes(orderDetail.state) && orderDetail.voucher_link">查看卡券</view>
|
||||
<view class="btn pwd" @click="pay(orderDetail)" v-if="[1].includes(orderDetail.state)">立即付款</view>
|
||||
<view class="btn pwd" v-if="[4].includes(orderDetail.state)" @click="goRefund">申请退款</view>
|
||||
<view class="btn back" @click="backIndex">返回首页</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onShow, onHide, onUnload } from '@dcloudio/uni-app';
|
||||
import { onMounted, reactive, ref, unref } from 'vue';
|
||||
import { queryOrderDetail, refundOrder, queryOrderState } from '../../api/ycnc';
|
||||
import { getQueryString } from '../../utils/utils'
|
||||
import usePay from './hooks/usePay';
|
||||
const id = ref('');
|
||||
const orderNo = ref('');
|
||||
const orderDetail = reactive({});
|
||||
const pageType = ref(0)
|
||||
let timer = undefined
|
||||
|
||||
// 用onshow 解决h5页面被缓存的问题
|
||||
onShow(() => {
|
||||
const url = window.location.href
|
||||
console.log('url-->', url);
|
||||
const order_id = getQueryString('order_id')
|
||||
const order_no = getQueryString('order_no')
|
||||
const isPayBack = getQueryString('isPayBack')
|
||||
console.log(order_id, order_no);
|
||||
console.log('isPayBack', isPayBack);
|
||||
if (!order_id && !order_no) return
|
||||
id.value = order_id
|
||||
orderNo.value = order_no;
|
||||
if (isPayBack) {
|
||||
queryEvent()
|
||||
} else {
|
||||
getDetail();
|
||||
}
|
||||
})
|
||||
|
||||
onHide(() => {
|
||||
timer && clearInterval(timer)
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
timer && clearInterval(timer)
|
||||
})
|
||||
|
||||
const backIndex = () => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/ycnc/index`
|
||||
})
|
||||
}
|
||||
|
||||
const timerEvent = () => {
|
||||
timer && clearInterval(timer)
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
});
|
||||
timer = setInterval(()=>{
|
||||
queryEvent()
|
||||
}, 2500)
|
||||
}
|
||||
|
||||
const queryEvent = () => {
|
||||
uni.hideLoading()
|
||||
const params = {
|
||||
order_id: unref(id),
|
||||
order_no: unref(orderNo)
|
||||
}
|
||||
queryOrderState({ params }).then(res => {
|
||||
const { state, voucher_link } = res
|
||||
if([3].includes(state)){
|
||||
if(voucher_link){
|
||||
timer && clearInterval(timer)
|
||||
window.location.replace(voucher_link)
|
||||
}else{
|
||||
timerEvent()
|
||||
}
|
||||
}else if([1,2].includes(state)){
|
||||
timerEvent()
|
||||
}else{
|
||||
timer && clearInterval(timer)
|
||||
getDetail()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const viewPwd = (detailData) => {
|
||||
const { voucher_link } = detailData
|
||||
if (voucher_link) {
|
||||
console.log(`跳转外部链接-->${voucher_link}`);
|
||||
window.location.href = voucher_link
|
||||
} else {
|
||||
console.error(`voucher_link无有效值`);
|
||||
}
|
||||
}
|
||||
|
||||
const goRefund = () => {
|
||||
const { id } = orderDetail
|
||||
if (!id) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '无有效的订单id',
|
||||
});
|
||||
return
|
||||
}
|
||||
const params = { order_id: id }
|
||||
refundOrder({ params }).then(res => {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '退款成功',
|
||||
});
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
|
||||
function pay(orderData) {
|
||||
console.log(orderData);
|
||||
const { order_no, notify_url, price,brand,sign,plain_text } = orderData;
|
||||
const { payFunc } = usePay();
|
||||
payFunc({ order_no, notify_url, TranAmt: price,MerName:brand,sign,plain_text })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// getDetail()
|
||||
})
|
||||
|
||||
const getDetail = () => {
|
||||
const params = {
|
||||
order_id: unref(id),
|
||||
order_no: unref(orderNo)
|
||||
}
|
||||
pageType.value = 1
|
||||
queryOrderDetail({ params }).then(res => {
|
||||
Object.assign(orderDetail, res)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 702rpx;
|
||||
height: 486rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx 24rpx;
|
||||
|
||||
.pro-info {
|
||||
border-bottom: 1rpx solid #F0E1E1;
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-bottom: 24rpx;
|
||||
font-weight: 400;
|
||||
|
||||
.pro-img {
|
||||
display: block;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin-right: 34rpx;
|
||||
}
|
||||
|
||||
.text-over {
|
||||
max-width: 80%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #9E9E9E;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-info {
|
||||
border-bottom: 1rpx solid #F0E1E1;
|
||||
|
||||
.info-item {
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #6C6C6C;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
margin-top: 146rpx;
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
width: 312rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 38rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pwd {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
background: #EA0000;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.back {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #B9C8C7;
|
||||
border: 2rpx solid #B9C8C7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,13 +1,28 @@
|
|||
<route lang="json5" type="page">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '支付确认',
|
||||
navigationBarBackgroundColor:'#FFF',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="flex flex-col flex-items-center flex-justify-between page-wrapper">
|
||||
<view class="info">
|
||||
<view class="title-small">订单详情</view>
|
||||
<view class="flex detail-info">
|
||||
<view class="detail-img"></view>
|
||||
<view class="detail-img">
|
||||
<image
|
||||
:src="_product.main_image"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="detail-other">
|
||||
<view class="flex flex-justify-between name-info">
|
||||
<text>优酷VIP视频月卡</text>
|
||||
<text><text style="font-size:20rpx">￥</text>15元</text>
|
||||
<text>{{ _product.product_name }}</text>
|
||||
<text><text style="font-size:20rpx">￥</text>{{ _product.price}}元</text>
|
||||
</view>
|
||||
<view class="flex flex-justify-between count-info">
|
||||
<text>数量</text>
|
||||
|
|
@ -15,17 +30,57 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="order-info">
|
||||
<view class="order-item">充值账户：152****7226</view>
|
||||
<view class="order-item">充值账户：{{ _account }}</view>
|
||||
<view class="order-item">充值类型：月卡</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;">￥{{ _product.price }}</text></view>
|
||||
<view class="number-item">实际支付：¥{{ _product.sell_price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pay-btn">立即支付</view>
|
||||
<view class="pay-btn" @click="goPay">立即支付</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, unref, onMounted} from 'vue';
|
||||
import { onShow,onLoad} from '@dcloudio/uni-app';
|
||||
import { ref, reactive, unref, onMounted,computed} from 'vue';
|
||||
import {createOrder} from '@/api/ycysp';
|
||||
import usePay from './hooks/usePay';
|
||||
|
||||
const _account = ref('')
|
||||
const _product = ref('')
|
||||
|
||||
onLoad((options) => {
|
||||
const {account,product} = options
|
||||
_account.value = decodeURIComponent(account)
|
||||
_product.value = JSON.parse(decodeURIComponent(product))
|
||||
})
|
||||
|
||||
const discount = computed(() => {
|
||||
if(!_product.value)return 0
|
||||
return (Number(_product.value.price)*100 - Number(_product.value.sell_price)*100) / 100
|
||||
})
|
||||
|
||||
const goPay = () => {
|
||||
const params = {
|
||||
account:unref(_account),
|
||||
product_id:unref(_product).id
|
||||
}
|
||||
createOrder({params}).then(res => {
|
||||
const {order_no,notify_url,sign,plain_text} = res;
|
||||
const {payFunc} = usePay();
|
||||
payFunc({order_no,notify_url,TranAmt:voucherAmount,MerName:config[brandFlag].name,sign,plain_text})
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {})
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -33,41 +88,50 @@ import { ref, reactive, unref, onMounted} from 'vue';
|
|||
width:100vw;
|
||||
height:100vh;
|
||||
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;;
|
||||
padding:33rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.info{
|
||||
width: 702rpx;
|
||||
height: 374rpx;
|
||||
height: 514rpx;
|
||||
border-radius: 24rpx;
|
||||
opacity: 1;
|
||||
background: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
padding:32rpx 24rpx;
|
||||
}
|
||||
.line{
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background: #e1e1f0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.title-small{
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
line-height: 32rpx;
|
||||
letter-spacing: 0px;
|
||||
letter-spacing: 0rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.detail-info{
|
||||
padding:24rpx 0;
|
||||
border-bottom:1rpx solid #E1E1F0;
|
||||
}
|
||||
.detail-img{
|
||||
width:92rpx;
|
||||
height:92rpx;
|
||||
border:1px solid red;
|
||||
margin-right:30rpx;
|
||||
image{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
.detail-other{
|
||||
flex:1;
|
||||
font-weight:400;
|
||||
line-height: 32rpx;
|
||||
letter-spacing: 0px;
|
||||
letter-spacing: 0rpx;
|
||||
.name-info{
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
|
|
@ -79,17 +143,35 @@ import { ref, reactive, unref, onMounted} from 'vue';
|
|||
}
|
||||
}
|
||||
.order-info{
|
||||
border-bottom:1rpx solid #E1E1F0;
|
||||
padding-bottom:24rpx;
|
||||
}
|
||||
.order-item{
|
||||
font-size: 22rpx;
|
||||
font-weight: normal;
|
||||
line-height: 32rpx;
|
||||
letter-spacing: 0px;
|
||||
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;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="13" height="13" viewBox="0 0 13 13"><g><ellipse cx="6.5" cy="6.5" rx="6.5" ry="6.5" fill="#FFFFFF" fill-opacity="1"/><ellipse cx="6.5" cy="6.5" rx="6.199999988079071" ry="6.199999988079071" fill-opacity="0" stroke-opacity="1" stroke="#4A98FB" fill="none" stroke-width="0.6000000238418579"/></g></svg>
|
||||
|
After Width: | Height: | Size: 416 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="7" height="5" viewBox="0 0 7 5"><g><path d="M6.85467,0.16026C6.65747,-0.049906,6.33416,-0.0538585,6.13257,0.151333L2.65289,3.69208L0.855769,1.81926C0.669146,1.62458,0.356251,1.63538,0.156706,1.84316C-0.0428302,2.05098,-0.0532221,2.37714,0.133625,2.57177L2.33038,4.86098C2.51696,5.05539,2.82989,5.04459,3.0294,4.83682C3.07511,4.78922,3.10934,4.73525,3.13501,4.67819C3.15477,4.66321,3.17447,4.649,3.19236,4.63059L6.84614,0.91282C7.048,0.707426,7.05164,0.370686,6.85467,0.16026L6.85467,0.16026Z" fill="#4B99FB" fill-opacity="1"/></g></svg>
|
||||
|
After Width: | Height: | Size: 652 B |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
$price-color:#1F93DA;
|
||||
$sub-price-color:#659BEB;
|
||||
$text-color:#0e9bf2;
|
||||
|
|
@ -4,9 +4,13 @@
|
|||
// Generated by vite-plugin-uni-pages
|
||||
|
||||
interface NavigateToOptions {
|
||||
url: "/pages/ycysp/coupon" |
|
||||
url: "/pages/ycysp/home" |
|
||||
"/pages/ycysp/order" |
|
||||
"/pages/ycysp/orderDetail" |
|
||||
"/pages/ycysp/pay" |
|
||||
"/pages/ycysp/component/coupon-item" |
|
||||
"/pages/ycysp/component/member" |
|
||||
"/pages/ycysp/component/order-item" |
|
||||
"/pages/ycysp/component/recharge-item" |
|
||||
"/pages/ycysp/component/ticket-recieve";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import dayjs from "dayjs";
|
|||
import vitePluginRemoveDir from './vite.plugin'; // 自己写的删除插件
|
||||
|
||||
import getPages from './custom.page'
|
||||
import { preprocessCSS } from 'vite'
|
||||
const {exclude} = getPages();
|
||||
const excludeStaticModule = exclude.filter(item => item.indexOf('.vue') === -1)
|
||||
|
||||
|
|
@ -37,5 +38,13 @@ export default defineConfig(({ command, mode }) => {
|
|||
esbuild: {
|
||||
// drop: ["console", "debugger"], //打包去掉console,debugger
|
||||
},
|
||||
//ycysp css变量配置
|
||||
css:{
|
||||
preprocessorOptions:{
|
||||
scss:{
|
||||
additionalData: `@use "src/styles/variables.scss" as *;`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue