From b014eba0062ee4f1bb03b663624d80f1ce35af8b Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Tue, 2 Apr 2024 18:18:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                   |   4 +-
 src/api/store.js                   |  45 +++++++++-
 src/layout/index.vue               |  71 ++++++++--------
 src/layout/myAside.vue             |  15 +++-
 src/router/index.js                |   7 +-
 src/utils/axios.js                 |  26 ++++++
 src/views/home/component/order.vue |  61 ++++++++++----
 src/views/home/component/pay.vue   | 128 ++++++++++++++++++++++-------
 src/views/home/index.vue           |  28 ++++++-
 src/views/order/index.vue          |  79 ++++++++++++++++++
 10 files changed, 377 insertions(+), 87 deletions(-)
 create mode 100644 src/views/order/index.vue

diff --git a/.env.development b/.env.development
index a4cdf13..e856970 100644
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1,2 @@
-# VITE_BASE_URL = 'http://192.168.1.24:8324'
-VITE_BASE_URL = 'https://crmeb-test.shop.lihaink.cn'
\ No newline at end of file
+VITE_BASE_URL = 'http://192.168.1.16:8324'
+# VITE_BASE_URL = 'https://crmeb-test.shop.lihaink.cn'
\ No newline at end of file
diff --git a/src/api/store.js b/src/api/store.js
index a4ac42b..316713a 100644
--- a/src/api/store.js
+++ b/src/api/store.js
@@ -15,12 +15,55 @@ export function cartCreateApi(data) {
 }
 
 /**
-  * @description 购物车
+  * @description 购物列表
   */
 export function cartListApi(data) {
   return request.get(`user/cart/lst`, { params: data })
 }
 
+/**
+  * @description 购物数量加减
+  */
+export function cartChangeApi(id, data) {
+  return request.post(`user/cart/change/${id}`, data)
+}
+
+
+/**
+  * @description 结算
+  */
+export function orderCheckApi(data) {
+  return request.post(`v2/order/check`, data)
+}
+
+/**
+  * @description 删除商品
+  */
+export function cartDeleteApi(data) {
+  return request.post(`user/cart/delete`, data)
+}
+
+/**
+  * @description 支付
+  */
+export function orderCreateApi(data) {
+  return request.post(`v2/order/create`, data)
+}
+
+/**
+  * @description 订单状态
+  */
+export function orderStatusApi(id) {
+  return request.get(`micropay_query`, { params: { order_id: id } })
+}
+
+/**
+  * @description 订单列表
+  */
+export function orderListApi(data) {
+  return request.get(`/order/list`, { params: data })
+}
+
 // /**
 //   * @description 购物车数量
 //   */
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 0e46510..386052f 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,47 +1,48 @@
 <script setup>
-import myHeader from "./myHeader.vue"
-import myAside from "./myAside.vue"
+import myHeader from "./myHeader.vue";
+import myAside from "./myAside.vue";
 </script>
 
-
 <template>
-    <div class="common-layout">
+  <div class="common-layout">
+    <el-container>
+      <el-header>
+        <myHeader></myHeader>
+      </el-header>
       <el-container>
-        <el-header>
-            <myHeader></myHeader>
-        </el-header>
-        <el-container>
-          <el-aside width="100px">
-            <myAside></myAside>
-          </el-aside>
-          <el-main>
+        <el-aside width="100px">
+          <myAside></myAside>
+        </el-aside>
+        <el-main>
+          <transition name="el-zoom-in-top">
             <router-view class="my-main"></router-view>
-          </el-main>
-        </el-container>
+          </transition>
+        </el-main>
       </el-container>
-    </div>
+    </el-container>
+  </div>
 </template>
 
 <style scoped lang="scss">
-.common-layout{
-    width: 100vw;
-    height: 100vh;
-    background-color: #001529;
-    .el-header{
-        color: #fff;
-    }
-    .el-aside{
-        color: #fff;
-    }
-    .el-main{
-        background-color: #f5f5f5;
-        width: calc(100vw - 100px);
-        min-height: calc(100vh - 60px);
-        border-radius: 2rem 0 0 0;
-        .my-main{
-            height: 100%;
-            width: 100%;
-        }
+.common-layout {
+  width: 100vw;
+  height: 100vh;
+  background-color: #001529;
+  .el-header {
+    color: #fff;
+  }
+  .el-aside {
+    color: #fff;
+  }
+  .el-main {
+    background-color: #f5f5f5;
+    width: calc(100vw - 100px);
+    min-height: calc(100vh - 60px);
+    border-radius: 2rem 0 0 0;
+    .my-main {
+      height: 100%;
+      width: 100%;
     }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layout/myAside.vue b/src/layout/myAside.vue
index 7c46fff..053e9d1 100644
--- a/src/layout/myAside.vue
+++ b/src/layout/myAside.vue
@@ -1,14 +1,26 @@
 <script setup>
+import { useRoute, useRouter } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+const navTo = (name) => {
+    router.push({ name })
+}
 
 </script>
 
 
 <template>
     <div class="my-card">
-        <div class="list-item active">
+        <div class="list-item" :class="{'active': route.name=='home'}" @click="navTo('home')">
             <el-icon size="30"><Sell /></el-icon>
             <div>收银</div>
         </div>
+        <div class="list-item" :class="{'active': route.name=='order'}" @click="navTo('order')">
+            <el-icon size="30"><DataLine /></el-icon>
+            <div>订单</div>
+        </div>
     </div>
 </template>
 
@@ -31,6 +43,7 @@
 
         &.active {
             background-color: #1890ff;
+            transition: 300ms;
         }
     }
 }
diff --git a/src/router/index.js b/src/router/index.js
index d5fd278..86ac836 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -14,7 +14,12 @@ const routes = [
             path: '/home',
             name: 'home',
             component: () => import('@/views/home/index.vue'),
-        }
+        },
+        {
+          path: '/order',
+          name: 'order',
+          component: () => import('@/views/order/index.vue'),
+      }
     ]
   },
   {
diff --git a/src/utils/axios.js b/src/utils/axios.js
index ba6cfca..b589d29 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -1,4 +1,7 @@
 import axios from "axios";
+import { ElMessage } from "element-plus";
+import { useRouter } from "vue-router";
+import { useUserStore } from "../store/user";
 
 const request = axios.create({
     baseURL: import.meta.env.VITE_BASE_URL + '/api',
@@ -27,11 +30,34 @@ request.interceptors.request.use(
 request.interceptors.response.use(
     response => {
         // 对响应数据做些什么，例如解析数据、统一处理错误等
+        if (response.data.status === 401 || response.data.status === 4000) {   
+            const router = useRouter();
+            ElMessage({
+                message: response.data.message,
+                type: 'error',
+            })
+            setTimeout(() => {
+                const userStore = useUserStore();
+                userStore.setUserInfo({});
+                userStore.setToken('');
+                router.push('/login');
+            }, 1000);
+        }
+        if (response.data.status === 400) {   
+            ElMessage({
+                message: response.data.message,
+                type: 'error',
+            })
+        }
         return response.data;
     },
     error => {
         // 处理响应错误
         console.error(error);
+        ElMessage({
+            message: error,
+            type: 'error',
+        })
         return Promise.reject(error);
     }
 );
diff --git a/src/views/home/component/order.vue b/src/views/home/component/order.vue
index bc2db2a..5cfd9a1 100644
--- a/src/views/home/component/order.vue
+++ b/src/views/home/component/order.vue
@@ -1,24 +1,48 @@
 <script setup>
 import { ref } from 'vue';
-import { cartListApi } from "@/api/store.js";
+import { cartListApi, cartDeleteApi, cartChangeApi } from "@/api/store.js";
 
 const list = ref([])
+const allPrice = ref(0) //商品总价
 
 const clearAll = ()=>{
-    list.value = []
+    let cart_id = [];
+    list.value.map(item=>{
+        cart_id.push(item.cart_id);
+    })
+    if(cart_id.length==0) return;
+    deleteShop(cart_id);    
 }
 
-const deleteOne = (index)=>{
-    list.value.splice(index,1)
+const deleteOne = (cart_id)=>{
+    list.value = list.value.filter(item=>item.cart_id!=cart_id);
+    deleteShop([cart_id]);
 }
 
-const getList = (item)=>{
+const deleteShop = (arr)=>{
+    cartDeleteApi({
+        cart_id: arr
+    }).then(res=>{
+        console.log(res);
+        getList();
+    })
+}
+
+const getList = ()=>{
+    allPrice.value = 0;
     cartListApi({
         source: 300
     }).then(res=>{
-        list.value = res.data.list
+        if(res.data?.list?.length>0) {
+            list.value = res.data.list[0].list;
+            list.value.forEach(item=>{
+                allPrice.value += item.productAttr.price * item.cart_num
+            })
+        }
+        else list.value = []
     })
 }
+getList();
 
 const emit = defineEmits(['goPay'])
 
@@ -26,8 +50,17 @@ const goPay = ()=>{
     emit('goPay')
 }
 
+const changeCartNum = (val)=>{
+    cartChangeApi(val.cart_id, {
+        cart_num: val.cart_num
+    }).then(res=>{
+
+    })
+}
+
 defineExpose({
-    getList
+    getList,
+    list
 })
 
 </script>
@@ -36,22 +69,22 @@ defineExpose({
 <template>
     <div class="my-order">
         <div class="header-nav">
-            <div class="nav-item">已选购 <span>{{ 0 }}</span> 件</div>
+            <div class="nav-item">已选购 <span>{{ list.length }}</span> 件</div>
             <div class="nav-item-clear" @click="clearAll"><el-icon><Delete /></el-icon>清空</div>
         </div>
         <div class="order-list">
             <el-empty v-if="list.length==0" description="请点击右侧添加商品" />
             <div v-else class="order-item" v-for="(item, index) in list" :key="index">
-                <el-image class="order-item-img" src="https://multi-store.crmeb.net/uploads/attach/2024/03/01/8149b6d6bfc22ad622ec478528310c43.jpg"></el-image>
+                <el-image class="order-item-img" :src="(item.productAttr && item.productAttr.image) || item.product.image"></el-image>
                 <div class="order-item-info">
                     <div class="order-item-title">
-                        <div class="title">很不错的商品名称很不错的商品名称很不错的商品名称很不错的商品名称</div>
-                        <div class="delete" @click="deleteOne">删除</div>
+                        <div class="title">{{ item.spu.store_name }}</div>
+                        <div class="delete" @click="deleteOne(item.cart_id)">删除</div>
                     </div>
                     <div class="order-item-sku">设备规格</div>
                     <div class="order-item-price">
-                        <div>¥<span>100</span></div>
-                        <div><el-input-number v-model="item.num" :min="1" :step="1" /></div>
+                        <div>¥<span>{{ item.productAttr.price }}</span></div>
+                        <div><el-input-number v-model="item.cart_num" step-strictly :min="1" :step="1" @change="changeCartNum(item)"/></div>
                     </div>
                 </div>
             </div>
@@ -59,7 +92,7 @@ defineExpose({
         <div class="order-footer">
             <div class="order-total">
                 <div class="price">
-                    <div class="total-item">实付: <span>¥<span style="font-size: 1.4rem;">{{ 10000.65 }}</span></span></div>
+                    <div class="total-item">实付: <span>¥<span style="font-size: 1.4rem;">{{ allPrice.toFixed(2) }}</span></span></div>
                     <div class="total-item">优惠: <span>¥<span>{{ 0 }}</span></span></div>
                 </div>
                 <div class="update-price"><el-button class="btn" type="primary">改价</el-button></div>
diff --git a/src/views/home/component/pay.vue b/src/views/home/component/pay.vue
index 0c5448a..a4a3d1c 100644
--- a/src/views/home/component/pay.vue
+++ b/src/views/home/component/pay.vue
@@ -1,35 +1,8 @@
-<template>
-  <el-drawer :size="800" v-model="drawer" direction="rtl" @open="open">
-    <template #header>
-      <h4>选择支付方式</h4>
-    </template>
-    <template #default>
-      <div class="dra-body">
-        <div class="header">
-            <div class="left" :class="{'active': active==1}" @click="active=1">微信</div>
-            <div class="right" :class="{'active': active==2}" @click="active=2">现金收款</div>
-        </div>
-        <div style="color: #999;padding: 2rem 0 0.3rem 0;">应收金额(元): </div>
-        <div style="color: #f5222d;padding-bottom: 2rem;">¥<span style="font-size: 1.6rem;">{{ '0.00' }}</span></div>
-        <div class="card1" v-if="active==1">
-            <el-input ref="codeRef" v-model="input" autofocus class="code-input" placeholder="请点击输入框聚焦扫码或输入编码号" />
-            <div class="tips"></div>
-        </div>
-        <div class="card2" v-else>
-            <el-input ref="codeRef" v-model="input" autofocus class="code-input" placeholder="请点击输入框输入金额" />
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <div style="width: 100%;display: flex;justify-content: center;">
-        <el-button class="cancel-btn" @click="cancelClick">取消收款</el-button>
-      </div>
-    </template>
-  </el-drawer>
-</template>
 
 <script setup>
 import { ref, watch, nextTick } from "vue";
+import { orderCreateApi, orderStatusApi } from "@/api/store.js";
+import { ElMessage} from 'element-plus';
 
 const drawer = ref(false);
 const active = ref(1);
@@ -37,22 +10,119 @@ const input = ref("");
 const codeRef = ref("");
 
 const cancelClick = () => {
+  codeRef.value.blur();
   drawer.value = false;
 };
 
 const open = ()=>{
     nextTick(()=>{
         setTimeout(()=>{
+            loading.value = false;
+            input.value = "";
             codeRef.value.focus();
         },300)
     })
 }
 
+const form = ref({});
+const cart_id = ref([]);
+const setForm = (e) => {
+    form.value = e.data;
+    cart_id.value = e.cart_id;
+    console.log(e, cart_id.value);
+}
+
+const emit = defineEmits(['paySuccess']);
+
+// 支付
+const handleEnter = ()=>{
+    loading.value = true;
+    codeRef.value.blur();
+    orderCreateApi({
+        address_id: "",
+        key: form.value.key,
+        cart_id: cart_id.value,
+        pay_type: 'micropay',
+        auth_code: input.value,
+        source: 300
+    }).then(res=>{
+        if(res.data.status=='success'){
+            drawer.value = false;
+            ElMessage({
+                message: '支付成功',
+                type: 'success',
+            })
+            loading.value = false;
+            input.value = "";
+            emit('paySuccess');
+        }else {
+            getOrderStatus(res.data.result.order_id)
+        }
+    })
+}
+
+const getOrderStatus = (id)=>{
+    orderStatusApi(id).then(res=>{
+        if(res.data.paid==1){
+            ElMessage({
+                message: '支付成功',
+                type: 'success',
+            })
+            loading.value = false;
+        }else {
+            ElMessage({
+                message: '支付失败',
+                type: 'error',
+            })
+            loading.value = false;
+        }
+    }).catch(err=>{
+        setTimeout(()=>{
+            getOrderStatus(id);
+        }, 5000)
+    })
+}
+
+const loading = ref(false);
+
 defineExpose({
   drawer,
+  setForm
 });
 </script>
 
+<template>
+    <el-drawer :size="800" v-model="drawer" direction="rtl" @open="open">
+      <template #header>
+        <h4>选择支付方式</h4>
+      </template>
+      <template #default>
+        <div class="dra-body">
+          <div class="header">
+              <div class="left" :class="{'active': active==1}" @click="active=1">微信</div>
+              <div class="right" :class="{'active': active==2}" @click="active=2">现金收款</div>
+          </div>
+          <div style="color: #999;padding: 2rem 0 0.3rem 0;">应收金额(元): </div>
+          <div style="color: #f5222d;padding-bottom: 2rem;">¥<span style="font-size: 1.6rem;">{{ form.total_price }}</span></div>
+          <div v-loading="loading" element-loading-text="支付中" class="card1" v-if="active==1">
+              <el-input ref="codeRef" v-model="input" autofocus class="code-input" placeholder="请点击输入框聚焦扫码或输入编码号" @keyup.enter="handleEnter"/>
+              <div class="tips"></div>
+          </div>
+          <div class="card2" v-else>
+            <div>现金收款正在开发中</div>
+              <!-- <el-input ref="codeRef" v-model="input" autofocus class="code-input" placeholder="请点击输入框输入金额" /> -->
+          </div>
+        </div>
+      </template>
+      <template #footer>
+        <div style="width: 100%;display: flex;justify-content: center;">
+          <el-button class="cancel-btn" @click="cancelClick">取消收款</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </template>
+  
+
 <style lang="scss" scoped>
 .dra-body {
   width: 100%;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 5825383..e0e3a36 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -5,7 +5,7 @@ import padding from "./component/padding.vue";
 import pupop from "./component/pupop.vue";
 import pay from "./component/pay.vue";
 import { ref, nextTick } from "vue";
-import { storeListApi, cartCreateApi } from "@/api/store.js";
+import { storeListApi, cartCreateApi, orderCheckApi } from "@/api/store.js";
 import { useUserStore } from "@/store/user.js";
 
 const pupopRef = ref(null);
@@ -56,17 +56,37 @@ const changeItem = (item, change = "") => {
     // sale_type: 1
   };
   cartCreateApi(q).then((res) => {
-    console.log(res);
-    orderRef.value.getList(item);
+    orderRef.value.getList();
+  });
+};
+
+// 结算
+const checkOut = () => {
+  let cart_id = orderRef.value.list.map((item) => item.cart_id);
+  orderCheckApi({
+    takes: [],
+    use_coupon: {},
+    use_integral: false,
+    cart_id: cart_id,
+  }).then((res) => {
+    payRef.value.setForm({
+      data: res.data,
+      cart_id: cart_id,
+    });
   });
 };
 
 getStoreList();
 
 const goPay = () => {
+  checkOut();
   payRef.value.drawer = true;
 };
 
+const paySuccess = ()=>{
+  orderRef.value.getList();
+}
+
 nextTick(() => {
   // pupopRef.value.show(true);
 });
@@ -84,7 +104,7 @@ nextTick(() => {
       @changeItem="changeItem"
     />
     <pupop ref="pupopRef" />
-    <pay ref="payRef" />
+    <pay ref="payRef" @paySuccess="paySuccess"/>
   </div>
 </template>
 
diff --git a/src/views/order/index.vue b/src/views/order/index.vue
new file mode 100644
index 0000000..cdece31
--- /dev/null
+++ b/src/views/order/index.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { ref } from 'vue'
+import { orderListApi } from "@/api/store.js"
+
+const orderList = ref([])
+
+const where = ref({
+    page: 1,
+    limit: 20,
+    status: -2
+})
+
+const loading = ref(false)
+const total = ref(0)
+
+const getOrderList = () => {
+    loading.value = true;
+    orderListApi(where.value).then((res) => {
+        orderList.value = res.data.list;
+        total.value = res.data.count;
+        loading.value = false;
+    })
+}
+
+getOrderList()
+
+</script>
+
+<template>
+  <div v-loading="loading" element-loading-text="加载中" class="my-order">
+    <el-table :data="orderList" stripe style="width: 100%">
+        <el-table-column prop="group_order_id" label="ID" width="100" />
+        <el-table-column prop="order_sn" label="订单号" min-width="250" />
+        <el-table-column prop="total_price" label="订单金额" />
+        <el-table-column prop="paid" label="支付状态">
+            <template #default="scope">
+                <span v-if="scope.row.paid==1">已支付</span>
+                <span v-else>未支付</span>
+            </template>
+        </el-table-column>
+        <el-table-column prop="pay_time" label="支付时间" />
+    </el-table>
+    <el-pagination
+        :page-size="where.limit"
+        layout="prev, pager, next"
+        :total="total"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-order {
+  background-color: #fff;
+  border-radius: 1.2rem;
+  box-sizing: border-box;
+  padding: 1rem;
+}
+/* 修改滚动条的样式 */
+::-webkit-scrollbar {
+  width: 5px; /* 设置滚动条的宽度 */
+}
+
+/* 设置滚动条的轨道样式 */
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1; /* 设置轨道的背景色 */
+  margin: 20px 0;
+}
+
+/* 设置滚动条的滑块样式 */
+::-webkit-scrollbar-thumb {
+  background-color: #ccc; /* 设置滑块的背景色 */
+  border-radius: 5px; /* 设置滑块的圆角 */
+}
+
+/* 设置滚动条鼠标悬停时的滑块样式 */
+::-webkit-scrollbar-thumb:hover {
+  background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
+}
+</style>