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

邮储奶茶新增删除订单和退款功能

This commit is contained in:
xiaogang 2024-07-31 17:37:15 +08:00
parent 29b06bcb91
commit 8817bad96c
12 changed files with 178 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -17,6 +17,11 @@
<div id="app"><!--app-html--></div>
<script src="/static/ycnc/YT_Client_api.js"></script>
<script type="module" src="/src/main.js"></script>
<script>
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, {passive: false})
</script>
<script>
var clickCount = 0
var timer = null

1
pages.config.js
View File

@ -7,6 +7,7 @@ export default defineUniPages({
navigationStyle: 'default',
navigationBarTextStyle: 'black',
navigationBarTitleText: '首页',
enablePullDownRefresh:false
},
easycom: {
autoscan: true,

13
src/api/ycnc.js
View File

@ -38,3 +38,16 @@ export const queryOrderDetail = (params) => http({
...params
})
export const deleteOrder = (params) => http({
url:'/api/v1/auth/order/delete',
method:'POST',
...params
})
export const refundOrder = (params) => http({
url:'/api/v1/auth/order/refund',
method:'POST',
...params
})

3
src/pages.json
View File

@ -40,7 +40,8 @@
"globalStyle": {
"navigationStyle": "default",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "首页"
"navigationBarTitleText": "首页",
"enablePullDownRefresh": false
},
"easycom": {
"autoscan": true,

24
src/pages/ycnc/components/order-item.vue
View File

@ -23,10 +23,11 @@
</view>
<view class="time">下单时间：{{ detail.create_time }}</view>
</view>
<view class="btns flex flex-justify-end" v-if="[1,3].includes(detail.state)">
<!-- <view class="btn del" v-if="[1,2].includes(detail.state)">删除订单</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)" @click="goPwd">查看卡密</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="[3].includes(detail.state) && !detail.voucher_link">申请退款</view>
</view>
</view>
</template>
@ -40,7 +41,8 @@
default:() => ({})
}
})
const emits = defineEmits(['pay-event','detail-event','pwd-event'])
const emits = defineEmits(['pay-event','detail-event','pwd-event','del-event'])
function goPay(e){
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
@ -59,6 +61,20 @@
}
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">

3
src/pages/ycnc/config.js
View File

@ -69,6 +69,9 @@ export const tabs = [{
},{
tabName:'已完成',
state:3,
},{
tabName:"已退款",
state:7
}]
export default config

39
src/pages/ycnc/detail.vue
View File

@ -121,6 +121,7 @@
margin:0 auto;
padding-top:44rpx;
padding-bottom:24rpx;
//旧版
&:deep(.big-title) {
font-weight: bold;
font-size: 40rpx;
@ -142,24 +143,26 @@
color: #4D4D4D;
line-height: 1.6;
}
// .big{
// font-weight: bold;
// font-size: 40rpx;
// color: #3D3D3D;
// margin-bottom:16rpx;
// }
// .small{
// font-weight: 400;
// font-size: 32rpx;
// color: #333333;
// margin-bottom:16rpx;
// }
// .prog{
// font-weight: 400;
// font-size: 28rpx;
// color: #4D4D4D;
// margin-bottom:16rpx;
// }
//新版
&:deep(.big){
font-weight: bold;
font-size: 40rpx;
color: #3D3D3D;
margin-bottom:16rpx;
}
&:deep(.small){
font-weight: 400;
font-size: 32rpx;
color: #333333;
margin-bottom:16rpx;
}
&:deep(.prog){
font-weight: 400;
font-size: 28rpx;
color: #4D4D4D;
margin-bottom:16rpx;
line-height: 1.6;
}
}
.pay-container{
width:100%;

2
src/pages/ycnc/index.vue
View File

@ -137,6 +137,6 @@
min-height:100vh;
background: url('/static/ycnc/bg.png') no-repeat;
background-size:cover;
padding-top:750rpx;
padding-top:730rpx;
}
</style>

95
src/pages/ycnc/order.vue
View File

@ -13,9 +13,18 @@
<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}`">
<!-- <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="(orderData) => removeOrder(orderData,index)"
@refund-event="refund"/>
</view>
<view class="no-more" v-if="isLastPage">没有更多了~</view>
</view>
@ -31,19 +40,24 @@
</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, goPay } from '../../api/ycnc';
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 list = ref([]);
const replace = ref(false);
//页码
// const enumPage = tabs.reduce((prev,cur) => {
// prev[cur.state] = 1
@ -57,11 +71,11 @@
// },{})
// const total = reactive(enumObj);
//数据列表
const enumOrder = tabs.reduce((prev,cur) => {
prev[cur.state] = []
return prev
},{})
const list = reactive(enumOrder)
// const enumOrder = tabs.reduce((prev,cur) => {
// prev[cur.state] = []
// return prev
// },{})
// const list = reactive(enumOrder)
//获取订单列表
const queryOrderList = () => {
@ -74,17 +88,27 @@
getOrderList({params}).then(res => {
const {count,data} = res
total.value = count
Object.assign(list,{[activeTab]:[...list[activeTab],...data]})
// 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]:[]})
// Object.assign(list,{[activeTab]:[]})
list.value = []
})
}
function handleClick({index, name}){
page.value = 1;
total.value = 0;
Object.assign(list,{[name]:[]})
// Object.assign(list,{[name]:[]})
list.value = [];
activeName.value = name;
// name代表状态值
queryOrderList()
@ -115,6 +139,42 @@
}
}
function removeOrder(orderData,index){
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
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()
})
@ -136,10 +196,9 @@
<style lang='scss' scoped>
.page-wrapper{
// width: 100vw;
// height: 100vh;
width:100%;
height: 100%;
// height: 100%;
height: calc(100vh - 42rpx);
overflow-y: auto;
background: #FAFBFD;
box-sizing: border-box;
@ -178,6 +237,9 @@
}
}
/* 修改标签页下划线颜色*/
// :deep(.wd-button.is-primary){
// background: #EA0000;
// }
:deep(.wd-tabs__line) {
background: #EA0000;
}
@ -186,9 +248,6 @@
flex-direction: column;
height:100%;
}
:deep(.wd-tab){
// height: 100%;
}
:deep(.wd-tab__body){
height:calc(100vh - 42rpx);
}

18
src/pages/ycnc/orderDetail.vue
View File

@ -39,8 +39,9 @@
</view>
</view>
<view class="btns">
<view class="btn pwd" @click="viewPwd(orderDetail)" v-if="[3].includes(orderDetail.state)">查看卡密</view>
<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="[3].includes(orderDetail.state) && !orderDetail.voucher_link" @click="goRefund">申请退款</view>
<view class="btn back" @click="backIndex">返回首页</view>
</view>
</view>
@ -49,7 +50,7 @@
<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { onMounted, reactive, ref, unref } from 'vue';
import { queryOrderDetail} from '../../api/ycnc';
import { queryOrderDetail,refundOrder} from '../../api/ycnc';
import usePay from './hooks/usePay';
const id = ref('');
const orderNo = ref('');
@ -78,6 +79,19 @@
}
}
const goRefund = (detailData) => {
const {id} = detailData
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} = orderData;

6
src/utils/http.js
View File

@ -20,7 +20,7 @@ function http(options) {
uni.hideLoading().then(() => {
uni.showToast({
title: "api错误" + res.errMsg,
icon: 'none'
icon: 'error'
});
})
reject()
@ -41,7 +41,7 @@ function http(options) {
uni.hideLoading().then(() => {
uni.showToast({
title: res.data.message,
icon: 'none'
icon: 'error'
});
})
reject(res.data.message)
@ -53,7 +53,7 @@ function http(options) {
uni.hideLoading().then(() => {
uni.showToast({
title: err,
icon: 'none'
icon: 'error'
});
})
reject(err)

17
src/utils/utils.js
View File

@ -10,4 +10,19 @@ export const getQueryString = (name) => {
export const isIOS = () => userAgent.indexOf('iPhone') > -1 || userAgent.indexOf('iPad') > -1;
//是否Android设备
export const isAndroid = () => userAgent.indexOf('Android') > -1;
export const isAndroid = () => userAgent.indexOf('Android') > -1;
export const deepClone = (source) => {
if (!source && typeof source !== "object") {
return source;
}
const targetObj = source.constructor === Array ? [] : {};
Object.keys(source).forEach((keys) => {
if (source[keys] && typeof source[keys] === "object") {
(targetObj)[keys] = deepClone(source[keys]);
} else {
(targetObj)[keys] = source[keys];
}
});
return targetObj;
}