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

index.html

@@ -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

pages.config.js

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

src/api/ycnc.js

@@ -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
+})
+
+

src/pages.json

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

src/pages/ycnc/components/order-item.vue

@@ -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="btns flex flex-justify-end">
-            <!-- <view class="btn del" v-if="[1,2].includes(detail.state)">删除订单</view> -->
+            <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">

src/pages/ycnc/config.js

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

src/pages/ycnc/detail.vue

@@ -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;
+    &:deep(.big){
-    //     font-size: 40rpx;
+        font-weight: bold;
-    //     color: #3D3D3D;
+        font-size: 40rpx;
-    //     margin-bottom:16rpx;
+        color: #3D3D3D;
-    // }
+        margin-bottom:16rpx;
-    // .small{
+    }
-    //     font-weight: 400;
+    &:deep(.small){
-    //     font-size: 32rpx;
+        font-weight: 400;
-    //     color: #333333;
+        font-size: 32rpx;
-    //     margin-bottom:16rpx;
+        color: #333333;
-    // }
+        margin-bottom:16rpx;
-    // .prog{
+    }
-    //     font-weight: 400;
+    &:deep(.prog){
-    //     font-size: 28rpx;
+        font-weight: 400;
-    //     color: #4D4D4D;
+        font-size: 28rpx;
-    //     margin-bottom:16rpx;
+        color: #4D4D4D;
-    // }
+        margin-bottom:16rpx;
+        line-height: 1.6;
+    }
 }
 .pay-container{
     width:100%;

src/pages/ycnc/index.vue

@@ -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>

src/pages/ycnc/order.vue

@@ -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 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 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) => {
+    // const enumOrder = tabs.reduce((prev,cur) => {
-        prev[cur.state] = []
+    //     prev[cur.state] = []
-        return prev
+    //     return prev
-    },{})
+    // },{})
-    const list = reactive(enumOrder)
+    // 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);
 }

src/pages/ycnc/orderDetail.vue

@@ -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;

src/utils/http.js

@@ -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)

src/utils/utils.js

@@ -11,3 +11,18 @@ export const isIOS = () => userAgent.indexOf('iPhone') > -1 || userAgent.indexOf
 
  //是否Android设备
  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;
+  }