订单对接

src/api/order.js

@@ -18,6 +18,23 @@ export function getOrderDetail(data) {
   });
 }
 
+// 删除订单 data：orderNumber
+export function deleteOrderApi(data) {
+  return request({
+    url: '/sgyrdd/sgyOrder/del/' + data,
+    method: 'POST',
+  });
+}
+
+// 取消订单 data：orderNumber
+export function cancelOrderApi(data) {
+  return request({
+    url: '/sgyrdd/sgyOrder/cancel',
+    method: 'GET',
+    data,
+  });
+}
+
 // 商品详情接口
 export function getProdDetail(data) {
   return request({

src/pages/order/components/OrderList/index.vue

@@ -12,7 +12,7 @@
       <view class="info" @click="handleDetail(item.orderNumber)">
         <image mode="aspectFill" :src="fileDomain + item.orderItems[0].pic" />
         <view class="info-box">
-          <view class="text">下单时间：{{ item.createTime }}</view>
+          <view class="text">下单时间：{{ item.createTime.slice(0, 16) }}</view>
           <view class="text">预约时间：{{ item.receiverTime }}</view>
           <view class="text">数量：{{ item.orderItems[0].prodCount }}</view>
           <view class="text">实付：￥{{ item.actualTotal }}</view>
@@ -20,14 +20,22 @@
       </view>
 
       <view class="btn">
-        <view class="btn-info" v-if="item.status == 5 || item.status == 6">删除</view>
-        <view class="btn-info" v-if="item.status == 3" @click="handleDetail(item.orderNumber)">
+        <view
+          class="btn-info"
+          v-if="item.status == 5 || item.status == 6"
+          @tap="handleDelete(item.orderNumber)"
+        >
+          删除
+        </view>
+        <view class="btn-info" v-if="item.status == 3" @tap="handleDetail(item.orderNumber)">
           查看预约
         </view>
-        <view class="btn-info" v-if="item.status == 1">取消订单</view>
-        <view class="btn-info">联系商家</view>
+        <view class="btn-info" @tap="handleCancel(item.orderNumber)" v-if="item.status == 1">
+          取消订单
+        </view>
+        <view class="btn-info" v-if="item.status == 4" @tap="handleRemark(item)">评价</view>
+        <view class="btn-info" @tap="callShopPhone(item.shopTel)">联系商家</view>
         <view class="btn-error" v-if="item.status == 7">售后详情</view>
-
         <view class="btn-error" v-if="item.status == 2 || item.status == 3 || item.status == 4">
           申请退款
         </view>
@@ -42,7 +50,7 @@
 </template>
 
 <script setup>
-import { getOrderList } from '@/api/order';
+import { getOrderList, deleteOrderApi, cancelOrderApi } from '@/api/order';
 const fileDomain = import.meta.env.VITE_APP_IMG_URL;
 const emits = defineEmits(['refresh']);
 const state = ref('loading');
@@ -73,13 +81,13 @@ const getList = async () => {
     if (res.data.records.length > 0) {
       dataList.value.push(...res.data.records);
       total.value = res.data.total;
-      console.log(total.value);
     } else {
       state.value = 'finished';
     }
   } else {
     state.value = 'error';
   }
+  state.value = 'finished';
 };
 getList();
 
@@ -108,6 +116,78 @@ const handleRefresh = (e) => {
   getList();
 };
 
+/**
+ * 拨打商家电话
+ * @param {*} phoneNumber
+ */
+function callShopPhone(phoneNumber) {
+  xma.makePhoneCall({
+    phoneNumber, // 仅为示例
+  });
+}
+
+/**
+ * 删除订单
+ * @param {*} ordrerNumber
+ */
+const handleDelete = (ordrerNumber) => {
+  uni.showModal({
+    title: '提示',
+    content: '确定要删除订单吗？',
+    success: async (res) => {
+      if (res.confirm) {
+        const res = await deleteOrderApi(ordrerNumber);
+        if (res.code === 0) {
+          uni.showToast({
+            title: '删除成功',
+            icon: 'success',
+          });
+          handleRefresh(catalog.status);
+        } else {
+          uni.showToast({
+            title: '删除失败',
+            icon: 'error',
+          });
+        }
+      }
+    },
+  });
+};
+
+/**
+ * 取消订单
+ * @param {*} ordrerNumber
+ */
+const handleCancel = (ordrerNumber) => {
+  uni.showModal({
+    title: '提示',
+    content: '确定要取消订单吗？',
+    success: async (res) => {
+      if (res.confirm) {
+        const res = await cancelOrderApi({ ordrerNumber });
+        if (res.code === 0) {
+          uni.showToast({
+            title: '取消成功',
+            icon: 'success',
+          });
+          handleRefresh(catalog.status);
+        } else {
+          uni.showToast({
+            title: '取消失败',
+            icon: 'error',
+          });
+        }
+      }
+    },
+  });
+};
+
+const handleRemark = (item) => {
+  uni.navigateTo({
+    url: `/pages/order/remark?orderNumber=${item.orderNumber}&shopName=${item.shopName}`,
+  });
+};
+
 defineExpose({
   refresh: handleRefresh,
 });

src/pages/order/components/Payment/index.vue

+<template>
+  <wd-popup
+    v-model="show"
+    position="bottom"
+    :safe-area-inset-bottom="true"
+    custom-style="border-radius: 16rpx 16rpx 0 0"
+    @close="showPayment = false"
+    lockScroll
+  >
+    <view class="pay-card">
+      <view class="header">
+        <view class="title">立即支付</view>
+        <wd-icon name="close" size="20" color="#999"></wd-icon>
+      </view>
+      <radio-group style="width: 100%" @change="radioChange">
+        <view class="pay-item">
+          <view class="icon">
+            <image src="@/static/shop/wx-icon.png"></image>
+            微信
+          </view>
+          <radio class="radio" color="#F12A2A" value="'wx'" :checked="'wx' == selectType" />
+        </view>
+        <view class="pay-item">
+          <view class="icon">
+            <image src="@/static/shop/yzf-icon.png"></image>
+            翼支付
+          </view>
+          <radio class="radio" color="#F12A2A" value="'yzf'" :checked="'yzf' == selectType" />
+        </view>
+      </radio-group>
+      <view class="footer">
+        <wd-button type="error">危险按钮</wd-button>
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<script setup>
+const selectType = ref('wx');
+const show = ref(true);
+
+function radioChange(evt) {
+  const { value } = evt.detail;
+  selectType.value = value;
+}
+
+const open = () => {
+  show.value = true;
+};
+const close = () => {
+  show.value = false;
+};
+defineExpose({
+  open,
+  close,
+});
+</script>
+
+<style lang="scss" scoped>
+.pay-card {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  padding: 30rpx 20rpx;
+  box-sizing: border-box;
+  margin: 0 auto;
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #e7e7e7;
+    padding-bottom: 30rpx;
+
+    .title {
+      font-size: 32rpx;
+      color: #333;
+    }
+  }
+
+  radio-group {
+    padding: 30rpx 0;
+  }
+
+  .pay-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+
+    .icon {
+      display: flex;
+      align-items: center;
+      font-size: 28rpx;
+      color: #333333;
+      gap: 10rpx;
+
+      image {
+        width: 45rpx;
+        height: 45rpx;
+        margin-right: 12rpx;
+      }
+    }
+
+    .radio {
+      margin-left: auto;
+    }
+  }
+
+  .pay-item:nth-child(2) {
+    margin-top: 40rpx;
+  }
+
+  .footer {
+    width: 100%;
+    margin-top: 30rpx;
+
+    &:deep(.wd-button.is-medium.is-round) {
+      width: 100%;
+    }
+  }
+}
+</style>

src/pages/order/detail.vue

@@ -47,11 +47,11 @@
         <view class="rectangle-with-semicircles"></view>
         <view class="qrcode line">
           <!-- 二维码 -->
-          <view class="qr-box">
+          <view class="qr-box" v-if="qrcode">
             <image :src="qrcode" class="qr"></image>
           </view>
           <view class="info-box">
-            <view class="between">
+            <view class="between" v-if="orderDetail.status == 2 || orderDetail.status == 3">
               <view class="column">
                 <text class="title">券码信息（1张可用）</text>
                 <text class="text">{{ orderDetail.receiverTime }} 到期</text>
@@ -59,6 +59,10 @@
               <view class="btn">申请退款</view>
             </view>
             <view class="between">
+              <view class="column">
+                <text class="title1" v-if="orderDetail.status != 2 || orderDetail.status != 3">
+                  券码信息
+                </text>
                 <text
                   :class="
                     orderDetail.status == 5 || orderDetail.status == 6 || orderDetail.status == 7
@@ -68,6 +72,8 @@
                 >
                   {{ orderDetail.orderNumber.slice(6) }}
                 </text>
+              </view>
+
               <text class="text">{{ orderStatusList[orderDetail.status] }}</text>
             </view>
           </view>
@@ -167,7 +173,7 @@
               <text class="colon">：</text>
               <view class="copybox">
                 <text class="text">{{ orderDetail.orderNumber }}</text>
-                <view class="copy">复制</view>
+                <view class="copy" @tap="copyTextToClipboard(orderDetail.orderNumber)">复制</view>
               </view>
             </view>
             <view class="row">
@@ -175,7 +181,7 @@
               <text class="colon">：</text>
               <text class="text">{{ maskPhoneNumber(orderDetail.receiverMobile) }}</text>
             </view>
-            <view class="row">
+            <view class="row" v-if="orderDetail.payTime">
               <text class="name">付款时间</text>
               <text class="colon">：</text>
               <text class="text">{{ orderDetail.payTime }}</text>
@@ -255,23 +261,28 @@ const orderStatusList = ref({
 const orderNumber = ref('');
 onLoad((options) => {
   orderNumber.value = options.orderNumber;
-  console.log(orderNumber.value);
   getDetail();
 });
 
-// 获取订单详情
+/**
+ * 获取订单详情
+ */
 const orderDetail = ref();
 const getDetail = async () => {
   const res = await getOrderDetail({ orderNumber: orderNumber.value });
   if (res.code === 0) {
     orderDetail.value = res.data;
+    if (orderDetail.value.orderStatus === 2 || orderDetail.value.orderStatus === 3) {
       codeDetail(orderDetail.value.orderNumber);
+    }
     getProductDetail(orderDetail.value.orderItems[0].prodId);
     getShopMailDetail(orderDetail.value.shopId);
   }
 };
 
-// 生成二维码
+/**
+ * 生成二维码
+ */
 const qrcode = ref('');
 const codeDetail = (item) => {
   const data = {
@@ -283,7 +294,9 @@ const codeDetail = (item) => {
   });
 };
 
-// 获取商品详情
+/**
+ * 获取商品详情
+ */
 const prodDetail = ref();
 const getProductDetail = async (id) => {
   const res = await getProdDetail({ prodId: id });
@@ -292,7 +305,9 @@ const getProductDetail = async (id) => {
   }
 };
 
-// 获取商铺信息
+/**
+ * 获取商铺信息
+ */
 const shopDetail = ref();
 const getShopMailDetail = async (id) => {
   const res = await getShopDetail({ shopId: id });
@@ -311,7 +326,7 @@ function getLocationFn() {
     success: function (res) {
       const myLatitude = currentLatitudeAndLongitude.value.latitude;
       const myLongitude = currentLatitudeAndLongitude.value.longitude;
-      const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude);
+      const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude, 1);
       shopDetail.value.distance = distance;
     },
     fail: function (err) {
@@ -329,6 +344,24 @@ function callShopPhone(phoneNumber) {
     phoneNumber, // 仅为示例
   });
 }
+
+/**
+ * 复制到剪切板
+ * @param {*} text
+ */
+function copyTextToClipboard(text) {
+  xma.setClipboardData({
+    data: text,
+    success: function () {
+      // 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
+      xma.showToast({
+        title: '复制成功',
+        icon: 'success',
+        duration: 2000,
+      });
+    },
+  });
+}
 </script>
 
 <style scoped lang="scss">
@@ -514,6 +547,11 @@ page {
         font-weight: bold;
       }
 
+      .title1 {
+        font-size: 32rpx;
+        line-height: 32rpx;
+      }
+
       .text {
         font-size: 24rpx;
         line-height: 24rpx;

src/pages/order/order.vue

@@ -9,12 +9,14 @@
       </wd-tabs>
       <OrderList ref="OrderListRef"></OrderList>
     </view>
+    <Payment ref="PaymentRef"></Payment>
   </view>
 </template>
 
 <script setup>
 import Header from './components/Header/index.vue';
 import OrderList from './components/OrderList/index.vue';
+import Payment from './components/Payment/index.vue';
 
 const tabs = ref([
   {