|
|
@@ -0,0 +1,210 @@
|
|
|
+<template>
|
|
|
+ <view class="invite-page">
|
|
|
+ <view class="tabs">
|
|
|
+ <Tabs :tabs="pageTabs" :itemWidth="'50%'" :padding="0"></Tabs>
|
|
|
+ </view>
|
|
|
+ <view class="info-view">
|
|
|
+ <view class="info-main">
|
|
|
+ <image
|
|
|
+ class="logo"
|
|
|
+ src="https://img.huaml.com/uploads/12358/202005/29/de74c55596d304b85e79154958e8bf57_small.jpeg"
|
|
|
+ alt="商品图"
|
|
|
+ />
|
|
|
+ <view class="content">
|
|
|
+ <view class="name"> 纯彩花艺</view>
|
|
|
+ <view class="mark"> 一级代理</view>
|
|
|
+ </view>
|
|
|
+ <image
|
|
|
+ class="btn"
|
|
|
+ src="/static/images/invite/invite_shop.png"
|
|
|
+ alt="商品图"
|
|
|
+ />
|
|
|
+ <image
|
|
|
+ class="btn"
|
|
|
+ src="/static/images/invite/invite_supplier.png"
|
|
|
+ alt="商品图"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="info-list">
|
|
|
+ <view class="info-item" v-for="(item, index) in infoList" :key="index">
|
|
|
+ <view class="item-value">{{ item.value || "" }}</view>
|
|
|
+ <view class="item-name">{{ item.name || "" }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-title">
|
|
|
+ 花店列表
|
|
|
+ </view>
|
|
|
+ <view class="tabs">
|
|
|
+ <Tabs :tabs="tabs" :itemWidth="'20%'" :padding="0"></Tabs>
|
|
|
+ </view>
|
|
|
+ <scroll-view scroll-y class="invite-list">
|
|
|
+ <InviteItem v-for="(item, index) in inviteList" :info="item" :key="index">
|
|
|
+ </InviteItem>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import Tabs from "@/components/plugin/tabs";
|
|
|
+import InviteItem from "./inviteItem";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Tabs,
|
|
|
+ InviteItem
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageTabs: [
|
|
|
+ {
|
|
|
+ name: "供应商",
|
|
|
+ key: ""
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "零售商",
|
|
|
+ key: "01"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tabs: [
|
|
|
+ {
|
|
|
+ name: "全部",
|
|
|
+ key: ""
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "待审核",
|
|
|
+ key: "01"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "试用中",
|
|
|
+ key: "02"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "已付费",
|
|
|
+ key: "03"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "已到期",
|
|
|
+ key: "04"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ infoList: [
|
|
|
+ {
|
|
|
+ name: "帐户余额(¥)",
|
|
|
+ value: "3092"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "已邀请",
|
|
|
+ value: "32"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "已付费",
|
|
|
+ value: "1387"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "累计收益(¥)",
|
|
|
+ value: "824.27"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ inviteList: [
|
|
|
+ {
|
|
|
+ orderNo: "PD20201217212800156",
|
|
|
+ name: "小许",
|
|
|
+ dateTime: "2020-7-10 21:50",
|
|
|
+ count: "101",
|
|
|
+ status: "02"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ orderNo: "PD20201217212800156",
|
|
|
+ name: "小许",
|
|
|
+ dateTime: "2020-7-10 21:50",
|
|
|
+ count: "101",
|
|
|
+ status: "02"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ orderNo: "PD20201217212800156",
|
|
|
+ name: "小许",
|
|
|
+ dateTime: "2020-7-10 21:50",
|
|
|
+ count: "101",
|
|
|
+ status: "01"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.invite-page {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #f9fbfc;
|
|
|
+ .info-view {
|
|
|
+ padding: 40upx 30upx;
|
|
|
+ background-color: #fff;
|
|
|
+ .info-main {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .logo {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 100upx;
|
|
|
+ height: 100upx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 20upx;
|
|
|
+ .name {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #040404;
|
|
|
+ }
|
|
|
+ .mark {
|
|
|
+ margin-top: 10upx;
|
|
|
+ font-size: 24upx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 231upx;
|
|
|
+ height: 80upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-list {
|
|
|
+ margin-top: 30upx;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ .info-item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .item-name {
|
|
|
+ margin-top: 15upx;
|
|
|
+
|
|
|
+ font-size: 24upx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .item-value {
|
|
|
+ font-size: 30upx;
|
|
|
+ font-family: DIN Alternate;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-title {
|
|
|
+ padding: 30upx;
|
|
|
+ font-size: 24upx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .invite-list {
|
|
|
+ margin-top: 20upx;
|
|
|
+ flex: 1;
|
|
|
+ padding-bottom: 150upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhengxin
