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

提交一次ycysp

This commit is contained in:
xiaogang 2024-11-18 18:35:34 +08:00
parent b8cc9f8686
commit 62d12e4362
18 changed files with 777 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -4,5 +4,5 @@
# VITE_BASE_URL = 'http://milk.api.test.86698.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'
VITE_BASE_URL = 'http://192.168.110.128:8000/ycav'
# VITE_BASE_URL = 'https://gateway.dev.cdlsxd.cn/ycav'

11
.env.production
View File

@ -2,9 +2,14 @@
# VITE_BASE_URL = 'http://192.168.110.50:8083'
# 邮储奶茶活动(测试环境)
VITE_BASE_URL = 'http://milk.test.api.cdlsxd.cn'
# VITE_BASE_URL = 'http://milk.test.api.cdlsxd.cn'
# VITE_YCNC_MERCH_CODE = '100310100018908'
VITE_YCNC_MERCH_CODE = '100610100019042'
# VITE_YCNC_MERCH_CODE = '100610100019042'
# 邮储奶茶活动(正式环境)
# VITE_BASE_URL = 'https://milk.api.cdlsxd.cn'
# VITE_YCNC_MERCH_CODE = '100510102303326'
# VITE_YCNC_MERCH_CODE = '100510102303326'
# 邮储音视频活动(测试环境)
VITE_BASE_URL = 'https://gateway.dev.cdlsxd.cn/ycav'
VITE_YCNC_MERCH_CODE = '100610100019042'

20
src/api/ycysp.js
View File

@ -2,27 +2,39 @@ import http from "../utils/http";
export const login = (params) => http({
url:'/api/v1/login',
url:'/v1/login',
method:'POST',
noToken:true,
...params
})
export const getBrandList = (params) => http({
url:'/api/v1/brand',
url:'/v1/brand',
method:'GET',
...params
})
export const getProductList = (params) => http({
url:'/api/v1/product',
url:'/v1/product',
method:'GET',
...params
})
export const createOrder = (params) => http({
url:'/api/v1/order',
url:'/v1/order',
method:'POST',
...params
})
export const getOrderList = (params) => http({
url:'/v1/order/list',
method:'GET',
...params
})
export const refundOrder = (params) => http({
url:'/v1/order/refund',
method:'POST',
...params
})

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

@ -1,22 +1,22 @@
<template>
<view class="wrapper">
<view class="wrapper" :style="{backgroundImage:`url(${detail.brand_logo})`}">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"
viewBox="0 0 13 13" class="svg" @click="checkedEvent">
<g>
<ellipse cx="6.5" cy="6.5" rx="6.5" ry="6.5" fill="#FFFFFF" fill-opacity="1" />
<path
d="M6.85467,0.16026C6.65747,-0.049906,6.33416,-0.0538585,6.13257,0.151333L2.65289,3.69208L0.855769,1.81926C0.669146,1.62458,0.356251,1.63538,0.156706,1.84316C-0.0428302,2.05098,-0.0532221,2.37714,0.133625,2.57177L2.33038,4.86098C2.51696,5.05539,2.82989,5.04459,3.0294,4.83682C3.07511,4.78922,3.10934,4.73525,3.13501,4.67819C3.15477,4.66321,3.17447,4.649,3.19236,4.63059L6.84614,0.91282C7.048,0.707426,7.05164,0.370686,6.85467,0.16026L6.85467,0.16026Z"
fill="#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" />
d="M6.85467,0.16026C6.65747,-0.049906,6.33416,-0.0538585,6.13257,0.151333L2.65289,3.69208L0.855769,1.81926C0.669146,1.62458,0.356251,1.63538,0.156706,1.84316C-0.0428302,2.05098,-0.0532221,2.37714,0.133625,2.57177L2.33038,4.86098C2.51696,5.05539,2.82989,5.04459,3.0294,4.83682C3.07511,4.78922,3.10934,4.73525,3.13501,4.67819C3.15477,4.66321,3.17447,4.649,3.19236,4.63059L6.84614,0.91282C7.048,0.707426,7.05164,0.370686,6.85467,0.16026L6.85467,0.16026Z"
:fill="checkedColor[detail.id]" fill-opacity="1" class="gou" v-if="detail.isChecked"/>
<ellipse cx="6.5" cy="6.5" rx="6.2" ry="6.2" fill-opacity="0" stroke-opacity="1"
:stroke="checkedColor[detail.id]" fill="none" stroke-width="0.6" />
</g>
</svg>
</view>
</template>
<script setup lang="ts">
import { e } from 'unocss';
import { ref, reactive, unref, onMounted } from 'vue';
import {checkedColor} from '../config'
const props = defineProps({
detail:{
@ -37,20 +37,21 @@ const checkedEvent = () => {
width: 100%;
height: 110rpx;
box-sizing: border-box;
background: url('@/static/ycysp/cloud.webp') no-repeat;
// background: url('@/static/ycysp/cloud.webp') no-repeat;
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}
.gou{
width:14rpx;
height:10rpx;
transform: translate(5rpx,8rpx);
transform: translate(6rpx,8rpx);
}
.svg {
position: absolute;
right: 6rpx;
top: 6rpx;
width: 26rpx;
height: 26rpx;
right: 8rpx;
top: 8rpx;
width: 27rpx;
height: 27rpx;
}
</style>

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

@ -2,7 +2,7 @@
<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 :style="{color:stateColor[detail.status] || ''}">{{ stateConfig[detail.status] }}</view>
</view>
<view class="order-info">
<view class="content flex">
@ -13,7 +13,11 @@
<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 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>
@ -21,18 +25,28 @@
</view>
</view>
</view>
<view class="time">下单时间：{{ detail.create_time }}</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="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 class="line"></view>
<view class="bottoms">
<!-- <view class="pay-des" v-if="[1].includes(detail.status)">
<view class="count-item">共 1 件，应付总额：<text style="text-decoration: line-through;">￥{{ detail.order_amount }}</text></view>
<view class="number-item">实际支付：¥{{ detail.wait_amount }}</view>
</view> -->
<view class="btns">
<!-- <view class="btn del" @click="goDel">删除订单</view> -->
<view class="btn pay" v-if="[1].includes(detail.status)" @click="goPay">立即付款</view>
<view class="btn pay" @click="goRefund" v-if="[4].includes(detail.status)">申请退款</view>
</view>
</view>
</view>
</template>
<script setup>
import { computed} from 'vue';
import { stateConfig, stateColor } from '../config';
const props = defineProps({
detail:{
@ -50,6 +64,16 @@
emits('pay-event', props.detail);
}
const discount = computed(() => {
if(!Object.keys(props.detail).length)return 0
return (Number(props.detail.order_amount)*100 - Number(props.detail.wait_amount)*100) / 100
})
function maskPhoneNumber(phoneNumber) {
return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}
function goDetail(e){
emits('detail-event', props.detail);
@ -143,11 +167,27 @@
font-size: 20rpx;
color: #9E9E9E;
font-weight: 400;
margin-bottom:10rpx;
}
}
.count-item{
font-size: 22rpx;
color: #878787;
text-align: right;
margin-top:8rpx;
}
.number-item{
font-size: 24rpx;
color: #2E92FF;
text-align: right;
margin-top:16rpx;
}
.bottoms{
padding:10rpx 0 12rpx;
}
.btns{
border-top: 1rpx solid #F0E1E1;
padding:36rpx 0 12rpx;
display: flex;
justify-content: flex-end;
margin-top:24rpx;
.btn{
width: 168rpx;
@ -166,7 +206,7 @@
}
.pay{
color: #FFFFFF;
background: #EA0000;
background: linear-gradient(270deg, #2C91FF 0%, #9AD2FF 100%);
}
.view{
background: #FFFFFF;
@ -175,4 +215,11 @@
color:#EA0000;
}
}
.line{
margin-top:24rpx;
width: 662rpx;
height: 1rpx;
background-color: #E1E1F0;
transform: scaleY(0.5);
}
</style>

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

@ -41,12 +41,15 @@
border: 1.6rpx solid #2D91FF;
}
.type-name{
/* 选项框标题 */
width:80%;
font-size: 26rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
color: #070B1B;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
.type-amount{
margin-top:6rpx;

47
src/pages/ycysp/config.js Normal file
View File

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

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

@ -56,7 +56,7 @@
</view>
<!-- //手机号 -->
<view class="input-container">
<input type="text" placeholder="请输入手机号码充值" placeholder-class="pcs" v-model="account">
<input type="text" placeholder="请输入手机号/QQ号充值" placeholder-class="pcs" v-model="account">
</view>
<!-- 下一步 -->
<view class="flex flex-items-center flex-justify-center next-btn" @click="nextEvent">
@ -73,7 +73,7 @@
</view>
<view style="height:40rpx;"></view>
<!-- 我的订单 -->
<view class="flex flex-justify-center flex-items-center order-btn">我的<br/>订单</view>
<view class="flex flex-justify-center flex-items-center order-btn" @click="toOrder">我的<br/>订单</view>
</scroll-view>
</template>
@ -82,11 +82,16 @@ 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';
import {getBrandList,getProductList,login} from '@/api/ycysp';
import {generateUUID} from '@/utils/utils';
import {createOrder} from '@/api/ycysp';
import useCode from './hooks/useCode';
const reg = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;
const _reg = /^[1-9][0-9]{4,}$/;
const brandArr = ref([])
const productArr = ref([])
const account = ref('')
const authCode = ref('')
//获取品牌
const getBrand = () => {
@ -145,26 +150,53 @@ const nextEvent = () => {
}
if(!account.value){
uni.showToast({
title: '请填写充值手机号',
title: '请填写充值手机号或QQ号',
icon: 'none'
});
return
}
if(!reg.test(account.value)){
if(!reg.test(account.value) && !_reg.test(account.value)){
uni.showToast({
title: '手机号格式不正确',
title: '充值账号格式不正确',
icon: 'none'
});
return
}
addOrder(selectProduct.id)
}
const addOrder = (id) => {
const params = {
account:unref(account),
product_id:id
}
createOrder({params}).then(res => {
const {order_no,notify_url,sign,plain_text} = res;
uni.navigateTo({
url:`/pages/ycysp/pay?order_no=${order_no}`
})
}).catch(err => {
console.error(err);
})
}
const toOrder = () => {
uni.navigateTo({
url:`/pages/ycysp/pay?account=${encodeURIComponent(account.value)}&product=${encodeURIComponent(JSON.stringify(selectProduct))}`
url:`/pages/ycysp/order`
})
}
onMounted(async () => {
await getBrand()
getProduct()
const token = window.localStorage.getItem('token') || '';
if(!token){
// const code = await useCode();
// authCode.value = code
authCode.value = generateUUID()
const {token} = await login({params:{code:unref(authCode)}});
window.localStorage.setItem('token',token);
}
})
</script>
@ -211,20 +243,16 @@ onMounted(async () => {
}
.title-text{
font-size: 36rpx;
font-weight: normal;
line-height: normal;
font-weight: 400;
letter-spacing: 0.04em;
font-family: PingFang SC;
color: #212F3B;
margin-left:14rpx;
}
.title-more{
position: absolute;
right:0;
font-family: PingFang SC;
font-size: 26rpx;
font-weight: normal;
line-height: normal;
letter-spacing: 0.04em;
color: #666E7E;
}
@ -243,7 +271,7 @@ onMounted(async () => {
.swiper{
display: flex;
flex-wrap: wrap;
max-width:calc((100vw - 68rpx) / 3 * 4 + 64rpx)
width:calc((100vw - 68rpx) / 3 * 4 + 64rpx)
}
.member-item{
margin:0 16rpx 16rpx 0;
@ -277,6 +305,7 @@ onMounted(async () => {
padding:0 40rpx;
box-sizing: border-box;
input{
width: 100%;
font-size: 32rpx;
font-weight: normal;
line-height: normal;
@ -332,7 +361,7 @@ onMounted(async () => {
.order-btn{
position: fixed;
right: 20rpx;
top:100rpx;
bottom:100rpx;
width: 96rpx;
height: 96rpx;
font-size: 24rpx;

4
src/pages/ycysp/hooks/usePay.js
View File

@ -1,5 +1,6 @@
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]}`
@ -15,12 +16,11 @@ export default function usePay(){
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`),
BackLink:encodeURIComponent(`${window.location.origin}/#/pages/ycysp/orderDetail?order_no=${order_no}&isPayBack=true`),
psbcmcc:'LSXD',
TxnDt:dayjs(Date.now()).format('YYYY-MM-DD'),
MercCode:MercCode,

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

@ -10,15 +10,11 @@
<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">
<block v-for="item in tabs" :key="item.status">
<wd-tab :title="item.tabName" :name="item.status">
<scroll-view scroll-y class="page-wrapper" @scrolltolower="queryNext">
<!-- <view class="order-wrapper flex flex-col flex-items-center" v-if="Array.isArray(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}`">
<view class="order-wrapper flex flex-col flex-items-center" v-if="Array.isArray(listData) && listData.length > 0">
<view v-for="(ele,index) in listData" :key="`${ele.id}-${item.status}`">
<OrderItem
:detail="ele"
@pay-event="pay"
@ -32,7 +28,7 @@
</view>
<view class="no-data" v-else>
<image
src="/static/ycnc/bg-nodata.png"
src="/static/ycysp/bg-nodata.png"
mode="scaleToFill"
class="no-img"
/>
@ -47,70 +43,49 @@
<script setup>
import { useMessage } from 'wot-design-uni'
import OrderItem from './components/order-item';
import OrderItem from './component/order-item';
import usePay from './hooks/usePay';
import { getOrderList,deleteOrder,refundOrder } from '../../api/ycnc';
import { getOrderList,refundOrder } from '../../api/ycysp';
import { onMounted, ref, unref,reactive,computed } from 'vue';
import { tabs } from './config';
import {deepClone} from '../../utils/utils'
const message = useMessage()
const pageSize = 10;
const activeName = ref(0);
const total = ref(0);
const totalData = ref(0);
const page = ref(1);
const list = ref([]);
const listData = 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})
page_size:pageSize,
...(activeTab !== 0 && {status:activeTab})
}
getOrderList({params}).then(res => {
const {count,data} = res
total.value = count
// Object.assign(list,{[activeTab]:[...list[activeTab],...data]})
const {total,list} = res
totalData.value = total
if(replace.value){
const prevPage = page.value - 1;
const prevList = list.value.slice(0, prevPage * pageSize);
list.value = [...prevList,...data];
const prevList = listData.value.slice(0, prevPage * pageSize);
listData.value = [...prevList,...list];
}else{
list.value = [...list.value,...data]
listData.value = [...listData.value,...list]
}
replace.value = false
}).catch(err => {
total.value = 0;
// Object.assign(list,{[activeTab]:[]})
list.value = []
totalData.value = 0;
listData.value = []
})
}
function handleClick({index, name}){
page.value = 1;
total.value = 0;
// Object.assign(list,{[name]:[]})
list.value = [];
totalData.value = 0;
listData.value = [];
activeName.value = name;
// name代表状态值
queryOrderList()
@ -119,7 +94,7 @@
function pay(orderData){
console.log(orderData);
const {order_no,notify_url,price,brand,sign,plain_text} = 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})
}
@ -127,7 +102,7 @@
function viewDetail(orderData){
const {id,order_no} = orderData;
uni.navigateTo({
url:`/pages/ycnc/orderDetail?order_id=${id}&order_no=${order_no}`
url:`/pages/ycysp/orderDetail?order_id=${id}&order_no=${order_no}`
})
}
@ -189,7 +164,7 @@
})
const isLastPage = computed(()=>{
return unref(page) === Math.ceil(unref(total) / pageSize)
return unref(page) === Math.ceil(unref(totalData) / pageSize)
})
function queryNext(){
@ -250,7 +225,7 @@
// background: #EA0000;
// }
:deep(.wd-tabs__line) {
background: #EA0000;
background: linear-gradient( 180deg, #99D1FF 0%, #3194FF 100%);
}
:deep(.wd-tabs){
display: flex;

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

@ -10,7 +10,7 @@
<template>
<view class="w-full h-full flex flex-col flex-items-center page">
<view class="wrapper" v-if="pageType === 1">
<view class="wrapper">
<view class="pro-info">
<view class="title">订单详情</view>
<view class="content flex">
@ -18,7 +18,11 @@
<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 class="amount"><text>￥</text>{{ orderDetail.order_amount }}<text>元</text></view>
</view>
<view class="flex num">
<view>充值账号：</view>
<view>{{ maskPhoneNumber(orderDetail.account) }}</view>
</view>
<view class="flex flex-justify-between num">
<view>数量</view>
@ -27,19 +31,24 @@
</view>
</view>
</view>
<view class="line"></view>
<view class="order-info">
<view class="info-item">订单编号：{{ orderDetail.order_no }}</view>
<view class="info-item" v-if="!!orderDetail.exchange_time && ![9].includes(orderDetail.state)">支付时间：{{
<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.price }}</view>
<view class="info-item" style="margin-bottom: 24rpx;">订单金额：{{ orderDetail.order_amount }}</view>
<!-- <view class="info-item" style="margin-bottom: 24rpx;">优惠金额：{{ orderDetail.order_amount}}</view> -->
<view class="flex flex-justify-between info-item" style="margin-bottom: 24rpx;" v-if="[3,4,8].includes(orderDetail.status)">
<view>充值状态：</view>
<view :style="{color:stateColor[orderDetail.status] || ''}">{{ stateConfig[orderDetail.status] }}</view>
</view>
</view>
<view class="line"></view>
</view>
<view class="btns" v-if="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="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>
@ -48,14 +57,13 @@
<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 { getOrderList, refundOrder} from '@/api/ycysp';
import { getQueryString } from '@/utils/utils';
import { stateConfig, stateColor } from './config';
import usePay from './hooks/usePay';
const id = ref('');
const orderNo = ref('');
const orderDetail = reactive({});
const pageType = ref(0)
let timer = undefined
// 用onshow 解决h5页面被缓存的问题
onShow(() => {
@ -65,63 +73,16 @@ onShow(() => {
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();
}
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()
}
url: `/pages/ycysp/home`
})
}
@ -155,25 +116,24 @@ const goRefund = () => {
})
}
function maskPhoneNumber(phoneNumber) {
return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}
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)
id: unref(id),
order_no: unref(orderNo),
}
pageType.value = 1
queryOrderDetail({ params }).then(res => {
Object.assign(orderDetail, res)
getOrderList({ params }).then(res => {
const {total,list} = res
Object.assign(orderDetail, res.list[0])
})
}
</script>
@ -182,10 +142,17 @@ const getDetail = () => {
.page {
background-color: #fafafa;
}
.line{
width: 662rpx;
height: 1rpx;
background-color: #E1E1F0;
transform: scaleY(0.5);
}
.wrapper {
width: 702rpx;
height: 486rpx;
// height: 542rpx;
min-height: 442rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin-top: 24rpx;
@ -193,7 +160,7 @@ const getDetail = () => {
padding: 32rpx 24rpx;
.pro-info {
border-bottom: 1rpx solid #F0E1E1;
// border-bottom: 1rpx solid #F0E1E1;
.title {
font-weight: 500;
@ -244,13 +211,13 @@ const getDetail = () => {
font-weight: 400;
font-size: 24rpx;
color: #9E9E9E;
margin-bottom:10rpx;
}
}
}
.order-info {
border-bottom: 1rpx solid #F0E1E1;
// border-bottom: 1rpx solid #F0E1E1;
.info-item {
font-weight: 400;
font-size: 22rpx;
@ -278,7 +245,7 @@ const getDetail = () => {
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
background: #EA0000;
background: linear-gradient(270deg, #2C91FF 0%, #9AD2FF 100%);
margin-right: 10rpx;
}

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

@ -15,14 +15,14 @@
<view class="flex detail-info">
<view class="detail-img">
<image
:src="_product.main_image"
:src="orderDetail.main_image"
mode="scaleToFill"
/>
</view>
<view class="detail-other">
<view class="flex flex-justify-between name-info">
<text>{{ _product.product_name }}</text>
<text><text style="font-size:20rpx">￥</text>{{ _product.price}}元</text>
<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>
@ -32,15 +32,15 @@
</view>
<view class="line"></view>
<view class="order-info">
<view class="order-item">充值账户：{{ _account }}</view>
<view class="order-item">充值类型：月卡</view>
<view class="order-item">优惠金额：{{ discount }}</view>
<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;">￥{{ _product.price }}</text></view>
<view class="number-item">实际支付：¥{{ _product.sell_price }}</view>
</view>
<!-- <view class="order-info">
<view class="count-item">共 1 件，应付总额：<text style="text-decoration: line-through;">￥{{ detail.order_amount }}</text></view>
<view class="number-item">实际支付：¥{{ detail.order_amount }}</view>
</view> -->
</view>
<view class="pay-btn" @click="goPay">立即支付</view>
</view>
@ -49,38 +49,46 @@
<script setup>
import { onShow,onLoad} from '@dcloudio/uni-app';
import { ref, reactive, unref, onMounted,computed} from 'vue';
import {createOrder} from '@/api/ycysp';
import {createOrder,getOrderList} from '@/api/ycysp';
import usePay from './hooks/usePay';
const orderDetail = reactive({});
const _account = ref('')
const _product = ref('')
const _order_no = ref('')
onLoad((options) => {
const {account,product} = options
_account.value = decodeURIComponent(account)
_product.value = JSON.parse(decodeURIComponent(product))
const {order_no} = options
_order_no.value = order_no
})
const discount = computed(() => {
if(!_product.value)return 0
return (Number(_product.value.price)*100 - Number(_product.value.sell_price)*100) / 100
if(!unref(_product))return 0
return (Number(unref(_product).price)*100 - Number(unref(_product).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);
})
function maskPhoneNumber(phoneNumber) {
return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}
onMounted(() => {})
const goPay = () => {
const {payFunc} = usePay();
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})
}
onMounted(() => {
getDetail()
})
const getDetail = () => {
const params = {
order_no: unref(_order_no),
}
getOrderList({ params }).then(res => {
const {total,list} = res
Object.assign(orderDetail, res.list[0])
})
}
</script>
<style scoped lang="scss">
@ -95,7 +103,8 @@ onMounted(() => {})
}
.info{
width: 702rpx;
height: 514rpx;
// height: 514rpx;
height: 374rpx;
border-radius: 24rpx;
opacity: 1;
background: #FFFFFF;

454
src/static/ycysp/YT_Client_api.js Normal file
View File

@ -0,0 +1,454 @@
/**
* @author 何杰
* @date 2016-08-01 12:00:00
* @address www.yitong.com.cn
* @mail hj@yitong.com.cn
* @desc: 屹通客户端组件api
*/
var Fw = {}; Fw.device = {};
Fw.device.Device = function () {
var userAgent = navigator.userAgent;
//ios 事件队列
var eventQueue = [];
return {
//是否iOS设备
is_ios: userAgent.indexOf('iPhone') > -1 || userAgent.indexOf('iPad') > -1,
//是否Android设备
is_android: userAgent.indexOf('Android') > -1,
/**
* ios
* 注册事件
* @param code 事件编码
* @param options 参数
*/
addEvent : function(code, options) {
if (options && code) {
eventQueue.push(JSON.stringify({
code : code,
name : options
}));
}
},
/**
* ios
* 原生调用，从队列中获取事件
* @returns {string}
*/
getEvent : function() {
return eventQueue.length > 0 ? eventQueue.shift() : '0';
}
};
}();
/**
* 供第三方调用API
*/
Fw.device.api = function () {
var device = Fw.device.Device;
return {
/**
* @brief 获取经纬度
*/
handCodeGetLocation : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
var option = {};
option.callBack = fn;
device.is_ios && device.addEvent("51",JSON.stringify(option));
device.is_android && GetInfoJs.getLocation(JSON.stringify(option));
},
/**
* @brief 获取用户信息
*/
getUserInfo : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
var option = {};
option.callback = fn;
device.is_ios && device.addEvent("getUserInfo",JSON.stringify(option));
device.is_android && GetInfoJs.getUserInfo(JSON.stringify(option));
},
/**
* @brief
*/
getCustNo : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("getCustNo",fn);
device.is_android && GetInfoJs.getCustNo(fn);
},
initTitle : function (option) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("initTitle",JSON.stringify(option));
device.is_android && GetInfoJs.initTitle(JSON.stringify(option));
},
setBackFun : function (option) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("goBack",JSON.stringify(option));
device.is_android && GetInfoJs.goBack(JSON.stringify(option));
},
setRightButton : function (option) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("setRightButton",JSON.stringify(option));
device.is_android && GetInfoJs.setRightButton(JSON.stringify(option));
},
getBackFun : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("getBackFun",fn);
device.is_android && GetInfoJs.getBackFun(option);
},
startRecordVoice : function (option) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("startRecordVoice",JSON.stringify(option));
device.is_android && GetInfoJs.startRecordVoice();
},
stopRecordVoice : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("stopRecordVoice",fn);
device.is_android && GetInfoJs.stopRecordVoice(fn);
},
getPhoneNo : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("getPhoneNo",fn);
device.is_android && GetInfoJs.getPhoneNo(fn);
},
/**
*扫一扫
*/
openScanPage : function (option) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("goToQrCode",JSON.stringify(option));
device.is_android && GetInfoJs.openScanPage();
},
/**
*付款码
*/
openPaymentCode : function (option) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("gotoPaymentCode",JSON.stringify(option));
device.is_android && GetInfoJs.openPaymentCode(JSON.stringify(option));
},
/**
* 拨打电话
*/
gotoSystemPhone : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("gotoSystemPhone",fn);
device.is_android && GetInfoJs.gotoSystemPhone(fn);
},
/**
* 关闭当前页面
*/
goBack : function (option) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("getBackFun",JSON.stringify(option));
device.is_android && GetInfoJs.goBack();
},
/**
* 调用物理返回键
*/
nativeBack : function () {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
option = {};
// device.is_ios && device.addEvent("getBackFun",JSON.stringify(option));
device.is_android && GetInfoJs.nativeBack();
},
/**
* 地图导航
*/
openMap : function (option) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("openMap",JSON.stringify(option));
device.is_android && GetInfoJs.openMap(JSON.stringify(option));
},
/**
* 登录
*/
gotoLoginCallback : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("goToLoginView",JSON.stringify(fn));
device.is_android && GetInfoJs.gotoLoginCallback(JSON.stringify(fn));
},
loginStatus : function (option) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("loginStatus",JSON.stringify(option));
device.is_android && GetInfoJs.loginStatus(JSON.stringify(option));
},
checkRecordVoicePermission : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
// device.is_ios && device.addEvent("getBackFun",JSON.stringify(option));
device.is_android && GetInfoJs.checkRecordVoicePermission(fn);
},
openMenu : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
// device.is_ios && device.addEvent("getBackFun",JSON.stringify(option));
device.is_android && GetInfoJs.gotoCommonlyUsedMenu(fn);
},
/**
* @brief 分享
*/
handCodeShare : function (param,fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
var option = {};
option.fn = fn;
option.param = param;
device.is_ios && device.addEvent("41",JSON.stringify(param));
device.is_android && GetInfoJs.showShare(JSON.stringify(option));
},
/**
* @brief 拍照、相册
*/
handCodeGetPhotos : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
var option = {};
option.fn = fn;
device.is_ios && device.addEvent("41",JSON.stringify(param));
device.is_android && GetInfoJs.takePhotos(JSON.stringify(option));
},
/**
* @brief 拍照
*/
openCamera : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
var option = {};
option.fn = fn;
// device.is_ios && device.addEvent("41",JSON.stringify(param));
device.is_android && GetInfoJs.openCamera(JSON.stringify(option));
},
/**
* @brief 相册
*/
photoAlbum : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
var option = {};
option.fn = fn;
// device.is_ios && device.addEvent("41",JSON.stringify(param));
device.is_android && GetInfoJs.photoAlbum(JSON.stringify(option));
},
/**
* @brief 复制到粘贴板
*/
pasteStringToSystem : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("pasteStringToSystem",fn);
device.is_android && GetInfoJs.pasteStringToSystem(fn);
},
queryAppFamily : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
//TODO ios粘贴方法
device.is_android && GetInfoJs.queryAppFamily(fn);
},
getHeaderImg : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
//TODO ios粘贴方法
device.is_android && GetInfoJs.getHeaderImg(fn);
},
getSystemVersion : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("getEquipmentInfo",fn);
device.is_android && GetInfoJs.getSystemVersion(fn);
},
/**
* @brief 跳转VUE
*/
goVUEPage : function (param,fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
var option = {};
option.fn = fn;
option.param = param;
device.is_ios && device.addEvent("goToAresPage",JSON.stringify(param));
device.is_android && GetInfoJs.showShare(JSON.stringify(option));
},
/**
甘肃宁波观影
*/
checkDiscountLevel : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
var option = {};
option.fn = "callbackCheckDiscountLevel";
option.shopid = "1100529310001000001";
option.sign = "bd91222d6fcff0de67dd28583926ae92"
device.is_ios && device.addEvent("checkDiscountLevel",JSON.stringify(option));
device.is_android && GetInfoJs.checkDiscountLevel(fn);
},
/**
宁波活动
*/
checkBFMLevel : function (fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
var option = {};
option.fn = "callbackCheckBFMLevel";
option.shopid = "1100529310001000009";
device.is_ios && device.addEvent("checkBFMLevel",JSON.stringify(option));
device.is_android && GetInfoJs.checkBFMLevel(option);
},
uploadThirdCertifyEvents : function (param ,fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
var option = {};
option.fn = "callBackUploadThirdCertifyEvents";
option.param = param;
device.is_ios && device.addEvent("uploadThirdCertifyEvents",JSON.stringify(param));
device.is_android && GetInfoJs.uploadThirdCertifyEvents(option);
},
checkUserChangeOrNoAndLoginStatus : function (param,fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
var option = {};
option.fn = fn;
option.param = param;
device.is_ios && device.addEvent("checkUserChangeOrNoAndLoginStatus",JSON.stringify(param));
device.is_android && GetInfoJs.checkUserChangeOrNoAndLoginStatus(JSON.stringify(option));
},
handCodePay : function (param,fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
var option = {};
option.fn = fn;
option.param = param;
device.is_ios && device.addEvent("HandCodePay",JSON.stringify(param));
device.is_android && GetInfoJs.go2Pay(JSON.stringify(param));
},
publicActivityEvents : function (param,fn) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
var option = {};
option.fn = fn;
option.param = param;
device.is_ios && device.addEvent("publicActivityEvents",JSON.stringify(option));
device.is_android && GetInfoJs.publicActivityEvents(JSON.stringify(option));
},
getNewAuthorization : function (param) {
if(!device.is_ios && !device.is_android){
alert("请在ios/android设备上使用！");
return;
}
device.is_ios && device.addEvent("getNewAuthorization",JSON.stringify(param));
device.is_android && GetInfoJs.getNewAuthorization(JSON.stringify(param));
}
}
}();

BIN
src/static/ycysp/bg-nodata.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/static/ycysp/qqyy.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

6
src/utils/http.js
View File

@ -11,8 +11,10 @@ function http(options) {
uni.request({
...options,
header: {
// 'content-type': 'application/json',
'content-type': 'application/x-www-form-urlencoded',
//邮储音视频
'content-type': 'application/json',
//邮储奶茶
// 'content-type': 'application/x-www-form-urlencoded',
},
responseType: 'json',
success: async (res) => {

14
src/utils/utils.js
View File

@ -25,4 +25,18 @@ export const isIOS = () => userAgent.indexOf('iPhone') > -1 || userAgent.indexOf
}
});
return targetObj;
}
/**
* @description 生成唯一 uuid
* @returns {String}
*/
export function generateUUID() {
let uuid = "";
for (let i = 0; i < 32; i++) {
let random = (Math.random() * 16) | 0;
if (i === 8 || i === 12 || i === 16 || i === 20) uuid += "-";
uuid += (i === 12 ? 4 : i === 16 ? (random & 3) | 8 : random).toString(16);
}
return uuid;
}

1
vite.config.js
View File

@ -17,6 +17,7 @@ const timeStringNow = dayjs().format("MM-DD HH-mm-ss")
export default defineConfig(({ command, mode }) => {
const { UNI_PLATFORM } = process.env // 得到 mp-weixin, h5, app 等
return {
base:'/ycvideoh5/', //ycysp
plugins: [
UniPages({
exclude: ['**/components/**/**.*',...exclude],