From 9a6eeff200c268ba84fcacac818892237ab6ea05 Mon Sep 17 00:00:00 2001
From: asd <374367073@qq.com>
Date: Thu, 15 Oct 2020 20:12:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=92=B1=E5=8C=85=20=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E6=88=90=E5=8A=9Fid?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts              |  50 ++++++++-
 src/views/mine/Addaccount.vue |  35 ++++--
 src/views/mine/Cashout.vue    |  56 ++++++++--
 src/views/mine/Wallet.vue     | 201 +++++++++++++++++++---------------
 4 files changed, 232 insertions(+), 110 deletions(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index 5d21b42..fd571eb 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -82,6 +82,7 @@ interface Wallect {
 export async function getwallect(){
     const res = await get<Array<Wallect>>('wallect')
     console.log(res)
+    return res.data
 }
 
 /**
@@ -285,8 +286,9 @@ interface SaleInfo{
  * @param data 
  */
 export async function saleinfo(data?:any){
-    const res= await get<SaleInfo>('account',data)
+    const res= await get<Array<SaleInfo>>('account',data)
     console.log(res)
+    return res.data
 }
 
 /**
@@ -298,6 +300,52 @@ export async function cashout(data?:any){
         message.success("新增成功")
     }
 }
+/**
+ * 账户详情
+ */
+interface AccountInfo{
+    wallectid:number,
+    typeid:number,
+    type:number,
+    account:number,
+    mname:string,
+    bankcode:string,
+    bankname:string
+}
+export async function getaccountinfo(data?: any){
+    const res=await get<AccountInfo>('wallect/'+data)
+    console.log(res,2333)
+    return {
+        accountid:res.data.wallectid,
+        type:res.data.type,
+        account:res.data.account,
+        mname:res.data.mname,
+        bankcode:res.data.bankcode,
+        bankname:res.data.bankname
+    }
+}
+
+/**
+ * 账户编辑
+ */
+export async function editaccount(data?:any){
+    const res=await put<Liveaddrule>('wallect/'+data);
+    if(res.code==0){
+        message.success("修改成功")
+    }
+}
+/**
+ * 删除账户
+ */
+export async function deleteaccount(data:any) {
+    
+    const res = await del<Liveaddrule>('wallect/'+data);
+    if(res.code==0){
+        message.success("删除成功")
+    }
+   
+    console.log(res)
+}
 /**
  * 发送验证码 
  * @param phone 手机号 
diff --git a/src/views/mine/Addaccount.vue b/src/views/mine/Addaccount.vue
index 2765896..124a1ac 100644
--- a/src/views/mine/Addaccount.vue
+++ b/src/views/mine/Addaccount.vue
@@ -17,14 +17,14 @@
         <div v-if="ifchina">
           <a-radio-group
             name="radioGroup"
-            v-model="paytype"
             class="accountlist"
             @change="onChange"
-            :default-value="4"
+            v-model:value="accountinfo.type"
+
           >
             <a-radio :value="4">
               <img src="@/static/images/bank.png" alt="" class="icon icon1" />
-              <span>银行卡</span>
+              <span>银行卡zzz</span>
             </a-radio>
             <a-radio :value="2">
               <img src="@/static/images/walletzfb.png" alt="" class="icon" />
@@ -59,7 +59,7 @@
           </a-radio-group>
         </div>
       </div>
-      <div class="cashoutmoney" v-if="paytype == 4 && ifchina">
+      <div class="cashoutmoney" v-if="accountinfo.type == 4 && ifchina">
          <a-form >
           <div>
             <div class="infoitem">
@@ -85,7 +85,7 @@
           </div>
          </a-form>
       </div>
-      <div class="cashoutmoney" v-if="paytype == 2 && ifchina">
+      <div class="cashoutmoney" v-if="accountinfo.type == 2 && ifchina">
         <div>
           <div class="infoitem">
             <span class="label label1">帐号</span>
@@ -97,7 +97,7 @@
           </div>
         </div>
       </div>
-      <div class="cashoutmoney" v-if="paytype == 1 && ifchina">
+      <div class="cashoutmoney" v-if="accountinfo.type == 1 && ifchina">
         <div class="label label1">扫码绑定</div>
         <div class="ewmbox">
           <img src="@/static/images/erweima.png" alt="" class="ewmpic" />
@@ -152,9 +152,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRaw } from "vue";
+import { defineComponent, onMounted, ref, toRaw } from "vue";
 import NavBottom from "@/components/NavBottom.vue";
-import { accountadd } from '@/api';
+import { accountadd, editaccount, getaccountinfo } from '@/api';
+import { useRoute } from 'vue-router';
 export default defineComponent({
   name: "Cashout",
   components: {
@@ -188,9 +189,25 @@ export default defineComponent({
     };
     function sub(){
       console.log(toRaw(accountinfo.value),11)
-      accountadd(toRaw(accountinfo.value))
+      // cosnole.log(useRoute().query.id)
+      if(toRaw(accountinfo.value).accountid){
+        console.log(300)
+        editaccount(toRaw(accountinfo.value).accountid)
+      }else{
+        console.log(111)
+        accountadd(toRaw(accountinfo.value))
+      }
+      
     }
     const ifchina = ref(true);
+
+    onMounted(async () => {
+      if(useRoute().query.id){
+        accountinfo.value=await getaccountinfo(useRoute().query.id)
+        // console.log(await getaccountinfo(useRoute().query.id),233)
+      }
+      //  useRoute().query.id
+    })
     return {
       money,
       onChange,
diff --git a/src/views/mine/Cashout.vue b/src/views/mine/Cashout.vue
index eef296a..05e92c6 100644
--- a/src/views/mine/Cashout.vue
+++ b/src/views/mine/Cashout.vue
@@ -18,23 +18,43 @@
         <div class="chooseitem">
           <div class="label">选择账户</div>
           <!-- <a-radio></a-radio> -->
-         {{payinfo.type}}
+         <!-- {{payinfo.type}} -->
           <a-radio-group v-model:value="payinfo.type" @change="onChange">
             <div class="accountlist">
-              <a-radio :value="4">
+              <a-radio  v-for="(i,j) in accountlist" :key="j" :value="j">
                 <div class="accountitem">
-                  <div class="hostinfo">
+                  <div class="hostinfo" v-if="i.type==4">
                     <div>
                       <img src="@/static/images/bank.png" alt="" class="icon" />
                       <span class="accounttype">银行卡</span>
                     </div>
+                  </div>
+                    <div class="hostinfo" v-if="i.type==2">
+                    <div>
+                      <img
+                        src="@/static/images/walletzfb.png"
+                        alt=""
+                        class="icon icon1"
+                      />
+                      <span class="accounttype">支付宝</span>
+                    </div>
+                  </div>
+                   <div class="hostinfo" v-if="i.type==1">
+                    <div>
+                      <img
+                        src="@/static/images/walletweixin.png"
+                        alt=""
+                        class="icon icon1"
+                      />
+                      <span class="accounttype">微信</span>
+                    </div>
                   </div>
                   <div class="zhanghao">账号：6217 **** **** **** 175</div>
                 </div>
               </a-radio>
               
               
-              <a-radio :value="2">
+              <!-- <a-radio :value="2">
                 <div class="accountitem">
                   <div class="hostinfo">
                     <div>
@@ -63,7 +83,7 @@
                   </div>
                   <div class="zhanghao">账号：6217 **** **** **** 175</div>
                 </div>
-              </a-radio>
+              </a-radio> -->
             </div>
             </a-radio-group>
           
@@ -86,9 +106,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRaw } from "vue";
+import { defineComponent, onMounted, ref, toRaw } from "vue";
 import NavBottom from "@/components/NavBottom.vue";
-import { cashout } from '@/api';
+import { cashout, getwallect } from '@/api';
 export default defineComponent({
   name: "Cashout",
   components: {
@@ -97,29 +117,37 @@ export default defineComponent({
   setup() {
     const money = ref(0);
     const payinfo=ref<any>({
-      type:4,
+      type:0,
       money:0,
       account	:"",
       mname:"",
       bankcode:"",
       bankname:"",
-      international:0
+      international:0,
+      typeid:0
 
     })
     const moneychange: (e: number) => void = (e: number) => {
       console.log(e);
     };
     const yue=ref<number>(105)
+    const accountlist =ref<Array<any>>([])
+
+    onMounted(async () => {
+      accountlist.value=await  getwallect();
+    });
     function onChange(e: any) {
       console.log(e.target.value);
       payinfo.value.type=e.target.value
+      payinfo.value.typeid=toRaw(accountlist.value)[e.target.value].wallectid
+      // payinfo.value.type=toRaw(accountlist.value)[e.target.value].wallectid
     }
     function all(){
       payinfo.value.money=yue.value
     }
     function sub(){
       console.log(toRaw(payinfo.value))
-      cashout(toRaw(payinfo.value))
+      // cashout(toRaw(payinfo.value))
       
     }
     return {
@@ -129,7 +157,8 @@ export default defineComponent({
       onChange,
       all,
       yue,
-      sub
+      sub,
+      accountlist
     };
   },
 });
@@ -214,8 +243,12 @@ export default defineComponent({
       .chooseitem {
         display: flex;
         margin-bottom: 34px;
+        .label{
+          width:150px;
+        }
         .accountlist {
           display: flex;
+          flex-wrap: wrap;
           .accountitem {
             // width: 200px;
             padding-bottom: 16px;
@@ -225,6 +258,7 @@ export default defineComponent({
             border-radius: 17px;
             margin-left: 17px;
             margin-right: 46px;
+            margin-bottom: 17px;
             .hostinfo {
               display: flex;
               padding-top: 17px;
diff --git a/src/views/mine/Wallet.vue b/src/views/mine/Wallet.vue
index e52dac6..e77abbc 100644
--- a/src/views/mine/Wallet.vue
+++ b/src/views/mine/Wallet.vue
@@ -16,7 +16,7 @@
         </div>
         <div class="line"></div>
         <div class="accounts">
-          <div class="left">
+          <div class="left" @click="listchange(1)">
             <img src="@/static/images/account.png" alt="" class="pic" />
             <div class="texts">
               <div>绑定用户</div>
@@ -24,7 +24,7 @@
             </div>
           </div>
           <div class="linecolumn"></div>
-          <div class="left">
+          <div class="left" @click="listchange(2)">
             <img src="@/static/images/money.png" alt="" class="pic" />
             <div class="texts">
               <div>账户余额</div>
@@ -43,23 +43,40 @@
         <div>添加新的账户</div>
       </div>
     </div>
-    <div class="accountlist" v-if="ifchina && !ifmingxi">
-      <div class="accountitem">
+
+    <div class="accountlist" v-if="ifchina && listindex==1">
+      <div class="accountitem" v-for="(i,j) in accountlist" :key="j">
         <div class="hostinfo">
-          <div>
+          <div v-if="i.type==4">
             <img src="@/static/images/bank.png" alt="" class="icon" />
             <span class="accounttype">银行卡</span>
           </div>
-
+           <div v-if="i.type==2">
+            <img
+              src="@/static/images/walletzfb.png"
+              alt=""
+              class="icon icon1"
+            />
+            <span class="accounttype">支付宝</span>
+          </div>
+             <div v-if="i.type==1">
+            <img
+              src="@/static/images/walletweixin.png"
+              alt=""
+              class="icon icon1"
+            />
+            <span class="accounttype">微信</span>
+          </div>
           <div class="btns">
-            <div class="btn">修改</div>
-            <div class="btn1">删除</div>
+            <div class="btn"  @click="navto(1,i.wallectid)">修改</div>
+            <div class="btn1" @click="del(i.wallectid)">删除</div>
           </div>
         </div>
-        <div class="zhanghao">账号：6217 **** **** **** 175</div>
+         <div class="zhanghao" v-if="i.type==4">账号 <span>{{i.bankcode}}</span></div>
+        <div class="zhanghao" v-else>账号 <span>{{i.account}}</span></div>
       </div>
 
-      <div class="accountitem">
+      <!-- <div class="accountitem">
         <div class="hostinfo">
           <div>
             <img
@@ -76,9 +93,9 @@
           </div>
         </div>
         <div class="zhanghao">账号：6217 **** **** **** 175</div>
-      </div>
+      </div> -->
 
-      <div class="accountitem">
+      <!-- <div class="accountitem">
         <div class="hostinfo">
           <div>
             <img
@@ -95,10 +112,10 @@
           </div>
         </div>
         <div class="zhanghao">账号：6217 **** **** **** 175</div>
-      </div>
+      </div> -->
     </div>
-    <div class="accountlist" v-if="!ifchina && !ifmingxi">
-      <div class="accountitem">
+    <div class="accountlist" v-if="!ifchina && listindex==1">
+      <!-- <div class="accountitem">
         <div class="hostinfo">
           <div>
             <img src="@/static/images/foreignbank.png" alt="" class="icon" />
@@ -111,41 +128,47 @@
           </div>
         </div>
         <div class="zhanghao">账号：6217 **** **** **** 175</div>
-      </div>
+      </div> -->
 
-      <div class="accountitem">
+      <div class="accountitem" v-for="(i,j) in accountlist" :key="j">
         <div class="hostinfo">
-          <div>
+          <div v-if="i.type==4">
+            <img src="@/static/images/foreignbank.png" alt="" class="icon" />
+            <span class="accounttype">银行卡</span>
+          </div>
+
+          <div v-else>
             <img src="@/static/images/paypi.png" alt="" class="icon icon1" />
             <span class="accounttype">paypal</span>
           </div>
 
           <div class="btns">
-            <div class="btn">修改</div>
-            <div class="btn1">删除</div>
+              <div class="btn"  @click="navto(1,i.wallectid)">修改</div>
+            <div class="btn1" @click="del(i.wallectid)">删除</div>
           </div>
         </div>
-        <div class="zhanghao">账号：6217 **** **** **** 175</div>
+         <div class="zhanghao" v-if="i.type==4">账号 <span>{{i.bankcode}}</span></div>
+        <div class="zhanghao" v-else>账号 <span>{{i.account}}</span></div>
       </div>
     </div>
-    <div class="mingxilist">
+    <div class="mingxilist" v-if="ifchina && listindex==2">
       <div class="mingxitop">
         <div class="tabs">
           <span class="tabtitle">明细查询</span>
 
-          <div :class="tabindex == 4 ? 'on' : ''" @click="tabchange(4)">
+          <div :class="tabindex == 0 ? 'on' : ''" @click="tabchange(0)">
             全部
           </div>
-          <div :class="tabindex == 0 ? 'on' : ''" @click="tabchange(0)">
+          <div :class="tabindex == 1 ? 'on' : ''" @click="tabchange(1)">
             收入
           </div>
-          <div :class="tabindex == 1 ? 'on' : ''" @click="tabchange(1)">
+          <div :class="tabindex == 2 ? 'on' : ''" @click="tabchange(2)">
             支出
           </div>
         </div>
         <a-range-picker @change="onChange" class="choosedate"  :placeholder="['请选择开始日期', '请选择结束日期']"/>
       </div>
-
+ 
       <div>
         <table class="table">
           <thead>
@@ -157,55 +180,14 @@
             </tr>
           </thead>
           <tbody>
-            <tr>
-              <td>2020-08-13 13:54</td>
-              <td>直播收入</td>
-              <td class="moneyadd">+￥320</td>
-              <td>查看详情</td>
-            </tr>
-            <tr>
-              <td>2020-08-13 13:54</td>
-              <td>直播收入</td>
-              <td class="moneyreverse">+￥320</td>
-              <td>查看详情</td>
-            </tr>
-
-            <tr>
-              <td>2020-08-13 13:54</td>
-              <td>直播收入</td>
-              <td class="moneyadd">+￥320</td>
-              <td>查看详情</td>
-            </tr>
-            <tr>
-              <td>2020-08-13 13:54</td>
-              <td>直播收入</td>
-              <td class="moneyadd">+￥320</td>
-              <td>查看详情</td>
-            </tr>
-            <tr>
-              <td>2020-08-13 13:54</td>
-              <td>直播收入</td>
-              <td class="moneyadd">+￥320</td>
-              <td>查看详情</td>
-            </tr>
-            <tr>
-              <td>2020-08-13 13:54</td>
-              <td>直播收入</td>
-              <td class="moneyadd">+￥320</td>
-              <td>查看详情</td>
-            </tr>
-            <tr>
-              <td>2020-08-13 13:54</td>
-              <td>直播收入</td>
-              <td class="moneyadd">+￥320</td>
-              <td>查看详情</td>
-            </tr>
-            <tr>
-              <td>2020-08-13 13:54</td>
-              <td>直播收入</td>
-              <td class="moneyadd">+￥320</td>
+            <tr v-for="(i,j) in salelist" :key="j">
+              <td>{{i.created_at}}</td>
+              <td>{{i.typename}}</td>
+              <td class="moneyadd moneyreverse" v-if="i.type==2">-￥{{i.money}}</td>
+              <td class="moneyadd " v-else>+￥{{i.money}}</td>
               <td>查看详情</td>
             </tr>
+         
           </tbody>
         </table>
       </div>
@@ -215,42 +197,70 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from "vue";
+import { defineComponent, onMounted, ref, toRaw } from "vue";
 import NavBottom from "@/components/NavBottom.vue";
 import router from "@/router";
-import { getwallect, saleinfo } from "@/api";
+import { deleteaccount, getwallect, saleinfo } from "@/api";
 export default defineComponent({
   name: "Wallet",
   components: {
     NavBottom,
   },
   setup() {
-    const ifchina = false;
-    const ifmingxi = true;
-    getwallect();
+    const ifchina = true;
+    const ifmingxi = false;
+    const salelist=ref<Array<any>>([])
+    const accountlist =ref<Array<any>>([])
+    const listindex=ref<number>(1)
+    const state=ref<number>(0)
+    const dates=ref<Array<string>>(["",""])
       onMounted(async () => {
 
-      const res = await saleinfo();
-
+      salelist.value = await saleinfo();
+      accountlist.value=await  getwallect();
     });
-    const tabindex = ref(4);
-    function tabchange(e: number): void {
+    const tabindex = ref(0);
+    async function tabchange(e: number): Promise<void> {
       tabindex.value = e;
+      state.value=e
+      salelist.value=await saleinfo({status:e,bdate:dates.value[0],edate:dates.value[1]});
       // console.log(videolist)
     }
-    function navto(index: number) {
+    function listchange(e: number){
+      listindex.value=e
+    }
+    async function onChange(e: any,dateString:string){
+      console.log(dateString)
+      dates.value[0]=dateString[0]
+      dates.value[1]=dateString[1]
+      salelist.value=await saleinfo({bdate:dateString[0],edate:dateString[1],status:state.value});
+    }
+    async function del(e: number){
+      deleteaccount(e)
+    }
+    function navto(index: number,id?:number) {
       let url = "";
       switch (index) {
         case 1:
-          url = "/mine/addaccount";
+          
+          url = "/mine/addaccount"
+          console.log(url)
           break;
         case 2:
           url = "/mine/cashout";
           break;
       }
-      router.push({
-        path: url,
-      });
+      if(id){
+        router.push({
+          path: url,
+          query:{id:id}
+        });
+      }else{
+        router.push({
+          path: url
+        });
+      }
+   
     }
     return {
       ifchina,
@@ -258,6 +268,13 @@ export default defineComponent({
       navto,
       tabindex,
       tabchange,
+      salelist,
+      accountlist,
+      listchange,
+      listindex,
+      onChange,
+      dates,
+      del
     };
   },
 });
@@ -424,12 +441,15 @@ export default defineComponent({
   .accountlist {
     margin-top: 17px;
     display: flex;
+    width:1170px;
+    flex-wrap: wrap;
     .accountitem {
       width: 372px;
       height: 226px;
       background: white;
       border-radius: 17px;
       margin-left: 17px;
+      margin-bottom: 17px;
       .hostinfo {
         display: flex;
         justify-content: space-around;
@@ -478,13 +498,16 @@ export default defineComponent({
         font-size: 11px;
         margin-top: 119px;
         margin-left: 34px;
+        >span{
+          margin-left:15px
+        }
       }
     }
   }
 
   .mingxilist {
     width: 1150px;
-    height: 533px;
+    max-height: 533px;
     background: white;
     border-radius: 18px;
     margin-top: 18px;
@@ -512,7 +535,7 @@ export default defineComponent({
   }
   .table {
     width: 1150px;
-    height: 365px;
+    max-height: 365px;
     text-align: center;
     color: #343434;
     font-size: 12px;