update

src/pages/accountManagement/index.vue

@@ -1,11 +1,172 @@
 <script setup>
+import DYICON from "../../static/icons/dy.png";
+import KSICON from "../../static/icons/ks.png";
+import SPHICON from "../../static/icons/sph.png";
+import XHSICON from "../../static/icons/xhs.png";
+import TTICON from "../../static/icons/tt.png";
+import EDITICON from "../../static/icons/Edit.png";
+import DELETEICON from "../../static/icons/Delete.png";
+import PLUSICON from "../../static/icons/plus.png";
+import XNav from "../../components/XNav.vue";
+import XNoticeBar from "../../components/XNoticeBar.vue";
+import {showToast, toPage} from "../../utils/uils.js";
+import {onMounted, reactive} from "vue";
+import Api from "../../api/index.js";
 
+const BASE = [
+    {
+        id: 1,
+        name: '抖音',
+        icon: DYICON,
+    },
+    {
+        id: 2,
+        name: '快手',
+        icon: KSICON,
+    },
+    {
+        id: 3,
+        name: '小红书',
+        icon: XHSICON,
+    },
+    {
+        id: 4,
+        name: '视频号',
+        icon: SPHICON,
+    },
+    {
+        id: 5,
+        name: '今日头条',
+        icon: TTICON,
+    },
+];
+const list = reactive([]);
+const dataList = reactive([]);
+const po = reactive({
+    pid: null,
+});
+
+const getData = async () => {
+    const {data} = await Api.system.myAccount(po);
+    dataList.length = 0;
+    dataList.push(...data);
+}
+
+const changeTab = (pid) => {
+    po.pid = pid;
+    getData();
+}
+
+onMounted(() => {
+    Api.system.getPlatform().then(({data}) => {
+        data = data.filter(v => v.id !== 0);
+        list.length = 0;
+        data.forEach(v => {
+            BASE.forEach(k => {
+                if (v.id === k.id) {
+                    list.push({
+                        id: v.id,
+                        name: v.name,
+                        icon: k.icon,
+                    });
+                }
+            })
+        })
+
+        po.pid = list[0].id;
+        getData();
+    })
+})
+
+const deleteItem = async (id) => {
+    const {msg} = await Api.system.delAccount(id);
+    showToast(msg);
+    await getData();
+}
 </script>
 
 <template>
     <!--账号管理-->
+    <x-nav></x-nav>
+    <x-notice-bar status="success" text="提示：左滑查看更多，点击可查看该平台所有的账号"></x-notice-bar>
+
+    <view class="p-[36rpx] bg-[#fff] !flex justify-around items-center">
+        <template v-for="(item, index) in list" :key="item.id">
+            <view class="!flex flex-col items-center" @click="changeTab(item.id)">
+                <image class="!size-[64rpx]" :src="item.icon"></image>
+                <view :class="['test-24r !mt-[10rpx]', po.pid === item.id ? 'cur' : '']">
+                    {{
+                        item.name
+                    }}
+                </view>
+            </view>
+            <view class="!w-[1px] !h-[48rpx] bg-[#E5E6EB]" v-if="index <= list.length - 2"></view>
+        </template>
+    </view>
+
+    <view class="p-[20rpx] !flex flex-col gap-[20rpx]">
+        <view
+            @click="toPage('/pages/addAccount/index')"
+            class="py-[15rpx] bg-[#E8F3FF] text-[var(--primary-color)] !flex justify-center items-center gap-[10rpx] border border-[var(--primary-color)] rounded-[4rpx]">
+            <image :src="PLUSICON" class="!size-[26rpx] !mt-[2rpx]"></image>
+            新增帐号
+        </view>
+
+        <view
+            v-for="(v, index) in dataList"
+            :key="index"
+            class="p-[24rpx] bg-[#fff] rounded-[12rpx]">
+            <view class="!flex items-center justify-between">
+                <view>
+                    <view class="test-28r">{{ v.nickname }}</view>
+                    <view class="text-[#86909C] test-24r">{{ v.account }}</view>
+                </view>
+                <view class="px-[12rpx] py-[7rpx] test-24r success" v-if="v.status === 1">
+                    {{ v.status_text }}
+                </view>
+                <view class="px-[12rpx] py-[7rpx] test-24r warn" v-else-if="v.status === 0 || v.status === 3">
+                    {{ v.status_text }}
+                </view>
+                <view class="px-[12rpx] py-[7rpx] test-24r error" v-else>
+                    {{ v.status_text }}
+                </view>
+            </view>
+            <view class="!w-full !h-[2rpx] bg-[#E5E6EB] !my-[20rpx]"></view>
+            <view class="!flex gap-[16rpx] items-center">
+                <image class="!size-[88rpx] image-bor rounded-[12rpx]" :src="v.homepage" mode="aspectFill"></image>
+                <image class="!size-[88rpx] image-bor rounded-[12rpx]" :src="v.qrcode" mode="aspectFill"></image>
+
+                <!---->
+                <image @click="toPage(`/pages/addAccount/index?id=${v.id}`)"
+                       class="!size-[72rpx] rounded-[50%] overflow-hidden !ml-auto" :src="EDITICON"></image>
+                <image @click="deleteItem(v.id)" class="!size-[72rpx] rounded-[50%] overflow-hidden"
+                       :src="DELETEICON"></image>
+            </view>
+        </view>
+    </view>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.cur {
+    color: var(--primary-color);
+}
 
+.success {
+    background-color: #E8FFEA;
+    color: #00B42A;
+}
+
+.warn {
+    background-color: #FFF7E8;
+    color: #FF7D00;
+}
+
+.error {
+    background-color: #FFECE8;
+    color: #F53F3F;
+}
+
+.image-bor {
+    border: 1px solid rgb(229, 230, 235);
+}
 </style>