From b94a4006e63ff404714ee4886ea516d7bdb97b30 Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Thu, 27 Jun 2024 17:31:39 +0800
Subject: [PATCH] 1

---
 src/views/user/component/detail.vue | 165 +++++++++++++++++++++++++++-
 src/views/user/component/order.vue  |   1 +
 2 files changed, 164 insertions(+), 2 deletions(-)

diff --git a/src/views/user/component/detail.vue b/src/views/user/component/detail.vue
index 547ccde..d209d44 100644
--- a/src/views/user/component/detail.vue
+++ b/src/views/user/component/detail.vue
@@ -216,6 +216,85 @@ const cancelUpdate = () => {
 
 const isDisabled = ref(true);
 
+const activeStore = ref(0);
+const activeStoreList = ref(["基本信息", "用户资产"]);
+
+const isOut = ref(false); // 是否为出库状态
+const productList = ref([]); // 商品列表
+const initProduct = ()=>{
+    
+    productList.value = [
+                {
+                    "id": 574,
+                    "oid": 568,
+                    "product_id": 44,
+                    "cart_info": {
+                        "product_id": 44,
+                        "cart_num": 3,
+                        "price": "56.00",
+                        "cost": "56.00",
+                        "total_price": "189.00",
+                        "deduction_price": 0,
+                        "vip": 0,
+                        "purchase": "162.00",
+                        "pay_price": "168.00",
+                        "store_price": "168.00",
+                        "old_cart_id": 766,
+                        "verify_code": "8-12407",
+                        "name": "陈醋",
+                        "image": "https://lihaiim.oss-cn-chengdu.aliyuncs.com/public/uploads/images/20240615/202406151511024463d0051.jpg"
+                    }
+                },
+                {
+                    "id": 575,
+                    "oid": 568,
+                    "product_id": 45,
+                    "cart_info": {
+                        "product_id": 45,
+                        "cart_num": 2,
+                        "price": "164.00",
+                        "cost": "164.00",
+                        "total_price": "368.00",
+                        "deduction_price": 0,
+                        "vip": 0,
+                        "purchase": "312.00",
+                        "pay_price": "328.00",
+                        "store_price": "328.00",
+                        "old_cart_id": 767,
+                        "verify_code": "8-12407",
+                        "name": "青花椒油",
+                        "image": "https://lihaiim.oss-cn-chengdu.aliyuncs.com/public/uploads/images/20240615/202406151511025ef012582.jpg"
+                    }
+                },
+                {
+                    "id": 576,
+                    "oid": 568,
+                    "product_id": 40,
+                    "cart_info": {
+                        "product_id": 40,
+                        "cart_num": 2,
+                        "price": "2.50",
+                        "cost": "2.50",
+                        "total_price": "5.60",
+                        "deduction_price": 0,
+                        "vip": 0,
+                        "purchase": "48.00",
+                        "pay_price": "5.00",
+                        "store_price": "5.00",
+                        "old_cart_id": 769,
+                        "verify_code": "8-12407",
+                        "name": "草果",
+                        "image": "https://lihaiim.oss-cn-chengdu.aliyuncs.com/public/uploads/images/20240615/20240615150435f2ea41542.jpg"
+                    }
+                }
+            ]
+}
+
+// 出库
+const onOutAll = ()=>{
+    ElMessage.error("未全部出库")
+}
+
 onMounted(() => {
     mitt.on("set-user-detail", (res) => {
         formData.value = res;
@@ -226,6 +305,7 @@ onMounted(() => {
             console.log(formData.value);
         })
         getAddress();
+        initProduct();
     });
 });
 
@@ -236,7 +316,19 @@ onUnmounted(() => {
 
 <template>
     <div class="my-order">
-        <div class="detail" v-if="formData.id">
+        <div class="header-nav">
+            <div v-for="(item, index) in activeStoreList" :key="index" class="nav-item" :class="{
+                'nav-item-active': activeStore == index,
+                'nav-item-radius1': activeStore == index + 1,
+                'nav-item-radius2': activeStore == index - 1,
+            }" @click="activeStore = index">
+                {{ item }}
+            </div>
+            <div class="nav-item" :class="{
+                'nav-item-radius2': activeStore == activeStoreList.length - 1,
+            }" style="flex: 1"></div>
+        </div>
+        <div class="detail" v-if="formData.id && activeStore == 0">
             <div class="table">
                 <div class="table-title">用户信息</div>
                 <div class="table-info">
@@ -366,6 +458,41 @@ onUnmounted(() => {
                 </div>
             </div>
         </div>
+        <div class="detail" v-if="formData.id && activeStore == 1">
+            <div class="table">
+                <el-table :data="productList">
+                    <el-table-column label="商品信息">
+                        <template #default="{ row }">
+                            <div style="display: flex; align-items: center">
+                                <el-image style="height: 3rem; width: 3rem" :src="row.cart_info?.image"></el-image>
+                                <span style="margin-left: 0.5rem">{{ row.cart_info?.name }}</span>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="cart_info.price" label="单价" width="150" />
+                    <el-table-column prop="cart_info.cart_num" v-if="isOut" label="数量" width="250">
+                        <template #default="{ row }">
+                            <div style="display: flex; align-items: center">
+                                <el-input-number v-model="row.cart_info.n_num" step-strictly :min="1" :max="row.cart_info.cart_num" />
+                                <el-button type="primary" style="margin-left: 1rem;" @click="row.cart_info.n_num = row.cart_info.cart_num">全部</el-button>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="cart_info.cart_num" v-else label="数量" width="250" />
+                    <!-- <el-table-column prop="cart_info.pay_price" label="总价" width="150" /> -->
+                </el-table>
+            </div>
+            <div class="footer">
+                <div v-if="!isOut">
+                    <el-button type="warning" size="large" @click="isOut = true">部分出库</el-button>
+                    <el-button type="primary" size="large" @click="onOutAll">全部出库</el-button>
+                </div>
+                <div v-else>
+                    <el-button type="primary" size="large" @click="isOut = false">确认出库</el-button>
+                    <el-button size="large" @click="isOut = false">取消</el-button>
+                </div>
+            </div>
+        </div>
         <div v-else>
             <el-empty></el-empty>
         </div>
@@ -382,8 +509,42 @@ onUnmounted(() => {
     position: relative;
     overflow: hidden;
 
+    .header-nav {
+        display: flex;
+        background: linear-gradient(to bottom,
+                #f5f5f5 50%,
+                #fff 50%);
+
+        /* 创建渐变背景 */
+        .nav-item {
+            height: 4rem;
+            width: 8rem;
+            cursor: pointer;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 1.2rem;
+            background-color: #f5f5f5;
+            border-radius: 1rem 1rem 0 0;
+        }
+
+        .nav-item-active {
+            background-color: #fff;
+            position: relative;
+            transition: 300ms;
+        }
+
+        .nav-item-radius1 {
+            border-radius: 0 0 1rem 0;
+        }
+
+        .nav-item-radius2 {
+            border-radius: 0 0 0 1rem;
+        }
+    }
+
     .detail {
-        height: 100%;
+        height: calc(100% - 4rem);
         box-sizing: border-box;
         position: relative;
 
diff --git a/src/views/user/component/order.vue b/src/views/user/component/order.vue
index 79c9ddc..faed260 100644
--- a/src/views/user/component/order.vue
+++ b/src/views/user/component/order.vue
@@ -108,6 +108,7 @@ onUnmounted(() => {
             <el-select v-model="where.user_ship" @change="getOrderList(true)" placeholder="请选择用户类型" style="flex: 1">
                 <el-option v-for="item in userShip" :key="item.id" :label="item.title" :value="item.id" />
             </el-select>
+            <el-button @click="where.user_ship='';getOrderList(true)" style="margin-left: 1rem;">重置</el-button>
         </div>
         <div class="header-input">
             <el-input v-model="where.mobile" placeholder="搜索手机号/ID" @keydown.enter="getOrderList(true)"