CZKJ.YOUXUAN/src/pages/user/index.vue

<template>
    <div class="page " :class="{ page_red: theme === 1 }">
        <nav-bar :title="' '" :themeBg="true"></nav-bar>
        <div class="user">
            <div class="user__content">
                <div class="user__left">
                    <div
                        class="user__img"
                        @click="jumpHandle('/pages/user/setting')"
                    >
                        <my-image
                            :src="
                                userInfo.avatarUrl ||
                                '/static/user/portrait.jpg'
                            "
                        ></my-image>
                    </div>
                    <div class="user__info">
                        <div
                            class="user__name"
                            @click="jumpHandle('/pages/user/setting')"
                        >
                            {{ userInfo.nickName || "点击头像登录" }}
                        </div>
                        <div
                            class="code-box"
                            @click="jumpHandle('/pages/user/vip-code')"
                        >
                            <my-image
                                v-if="userInfo.nickName"
                                class="vip-code"
                                src="/static/user/qr-code.png"
                            ></my-image>
                            <span class="text">会员码</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="order">
            <div class="order__top">
                <div class="order__title">我的订单</div>
                <div
                    class="order__right"
                    @click="jumpHandle('/pages/order/index')"
                >
                    <span class="order__all">全部订单</span>
                    <i class="iconfont iconarrow order__arrows"></i>
                </div>
            </div>
            <ul class="order__list">
                <!-- <li
                    class="order__item"
                    @click="
                        jumpHandle({
                            path: '/pages/order/index',
                            query: { index: 0 },
                        })
                    "
                >
                    <i class="iconfont iconquanbu order__icon"></i>

                    <div class="order__text">全部</div>
                </li> -->
                <li
                    class="order__item"
                    @click="
                        jumpHandle({
                            path: '/pages/order/index',
                            query: { index: 1 },
                        })
                    "
                >
                    <!-- <i class="iconfont iconweibiaoti2fuzhi04 order__icon"></i> -->
                    <my-image
                        v-if="theme === 2"
                        class="order__icon"
                        :src="'/static/user/icon1.png'"
                    ></my-image>
                    <my-image
                        v-if="theme === 1"
                        class="order__icon"
                        :src="'/static/user/icon1_red.png'"
                    ></my-image>
                    <div class="order__text">待支付</div>
                    <div
                        class="order__num"
                        v-if="info.orderCountInfo.unpaidOrderCount"
                    >
                        {{ info.orderCountInfo.unpaidOrderCount }}
                    </div>
                </li>
                <li
                    class="order__item"
                    @click="
                        jumpHandle({
                            path: '/pages/order/index',
                            query: { index: 2 },
                        })
                    "
                >
                    <!-- <i class="iconfont iconicon-test order__icon"></i> -->
                    <my-image
                        v-if="theme === 2"
                        class="order__icon"
                        :src="'/static/user/icon2.png'"
                    ></my-image>
                    <my-image
                        v-if="theme === 1"
                        class="order__icon"
                        :src="'/static/user/icon2_red.png'"
                    ></my-image>
                    <div class="order__text">拣货中</div>
                    <div
                        class="order__num"
                        v-if="info.orderCountInfo.waitShippedOrderCount"
                    >
                        {{ info.orderCountInfo.waitShippedOrderCount }}
                    </div>
                </li>
                <li
                    class="order__item"
                    @click="
                        jumpHandle({
                            path: '/pages/order/index',
                            query: { index: 3 },
                        })
                    "
                >
                    <!-- <i class="iconfont icondaishouhuo order__icon"></i> -->
                    <my-image
                        v-if="theme === 2"
                        class="order__icon"
                        :src="'/static/user/icon3.png'"
                    ></my-image>
                    <my-image
                        v-if="theme === 1"
                        class="order__icon"
                        :src="'/static/user/icon3_red.png'"
                    ></my-image>
                    <div class="order__text">配送中</div>
                    <div
                        class="order__num"
                        v-if="info.orderCountInfo.waitReceivedOrderCount"
                    >
                        {{ info.orderCountInfo.waitReceivedOrderCount }}
                    </div>
                </li>
                <li
                    class="order__item"
                    @click="
                        jumpHandle({
                            path: '/pages/order/index',
                            query: { index: 4 },
                        })
                    "
                >
                    <!-- <i class="iconfont icontrues order__icon"></i> -->
                    <my-image
                        v-if="theme === 2"
                        class="order__icon"
                        :src="'/static/user/icon4.png'"
                    ></my-image>
                    <my-image
                        v-if="theme === 1"
                        class="order__icon"
                        :src="'/static/user/icon4_red.png'"
                    ></my-image>
                    <div class="order__text">待提/收货</div>
                </li>
                <li
                    class="order__item"
                    @click="
                        jumpHandle({
                            path: '/pages/order/index',
                            query: { index: 5 },
                        })
                    "
                >
                    <!-- <i class="iconfont iconshouhoutuikuan order__icon"></i> -->
                    <my-image
                        v-if="theme === 2"
                        class="order__icon"
                        :src="'/static/user/icon5.png'"
                    ></my-image>
                    <my-image
                        v-if="theme === 1"
                        class="order__icon"
                        :src="'/static/user/icon5_red.png'"
                    ></my-image>
                    <div class="order__text">已完成</div>
                </li>
                <li
                    class="order__item"
                    @click="
                        jumpHandle({
                            path: '/pages/order/index',
                            query: { index: 6 },
                        })
                    "
                >
                    <!-- <i class="iconfont iconshouhoutuikuan order__icon"></i> -->
                    <my-image
                        v-if="theme === 2"
                        class="order__icon"
                        :src="'/static/user/icon6.png'"
                    ></my-image>
                    <my-image
                        v-if="theme === 1"
                        class="order__icon"
                        :src="'/static/user/icon5_red.png'"
                    ></my-image>
                    <div class="order__text">售后</div>
                </li>
            </ul>
        </div>
        <div class="tool">
            <div class="tool__title">我的工具</div>
            <ul class="tool__list">
                <li
                    class="tool__item"
                    @click="jumpHandle('/pages/coupon/index')"
                >
                    <my-image
                        class="tool__icon"
                        :src="'/static/user/tool1.png'"
                    >
                        <div
                            class="tool__num"
                            v-if="
                                info.coupoonInfo && info.coupoonInfo.couponCount
                            "
                        >
                            {{ info.coupoonInfo.couponCount }}
                        </div>
                    </my-image>
                    <!-- <i
                        class="iconfont iconyouhuiquan tool__icon"
                        style="color: #ec7173"
                    > -->

                    <div class="tool__text">优惠券</div>
                </li>
                <li class="tool__item">
                    <my-image
                        class="tool__icon"
                        :src="'/static/user/tool2.png'"
                    ></my-image>
                    <button class="button" @click="kefuTel">
                        <div class="tool__text">联系客服</div>
                    </button>
                </li>
                <li class="tool__item" @click="setAddress">
                    <my-image
                        class="tool__icon"
                        :src="'/static/user/tool4.png'"
                    ></my-image>
                    <!-- <i
                        class="iconfont icondizhi tool__icon"
                        style="color: #fe866b"
                    ></i> -->
                    <div class="tool__text">收货地址</div>
                </li>
                <li
                    class="tool__item"
                    @click="jumpHandle('/pages/integral/index')"
                >
                    <my-image
                        class="tool__icon"
                        :src="'/static/user/tool3.png'"
                    ></my-image>
                    <!-- <i
                        class="iconfont iconlianxikefu tool__icon"
                        style="color: #66bbfc"
                    ></i> -->
                    <div class="tool__text">我的积分</div>
                </li>
            </ul>
        </div>

        <div class="web-support">
            <p class="text">0.0.987</p>
            <!-- <div class="num" @click="makeCall">400-629-6782</div> -->
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import NavBar from "../../components/layout/nav-bar";

export default {
    name: "",
    components: { MyImage, NavBar },
    // 数据
    data() {
        return {
            info: "",
            layout: [],
            vipCodeImg: "",
        };
    },
    onLoad() {
        this.fn.shareMenu();
    },
    async onShow() {
        const self = this;

        await self.fn.init();
        self.fn.updateUserInfo();
    },

    // 函数
    methods: {
        // 获取信息
        getInfo() {
            const self = this;

            // self.api.get("/My/GetMy").then((res) => {
            //     self.info = res.data;
            // });
        },

        // 未登录跳转处理
        jumpHandle(option) {
            const self = this;

            if (self.user.login) {
                self.router.push(option);
            } else {
                self.router.push("/pages/login/index");
            }
        },

        // 设置收货地址
        setAddress() {
            const self = this;
            self.router.push("/pages/address/index");
            // uni.getSetting({
            //     success(res) {
            //         if (res.authSetting["scope.address"] === false) {
            //             self.fn
            //                 .showModal({
            //                     title: "设置地址",
            //                     content:
            //                         "需要打开小程序的设置重新授权获取你的收货地址",
            //                     confirmText: "去设置",
            //                 })
            //                 .then((res) => {
            //                     if (res.confirm) {
            //                         uni.openSetting();
            //                     }
            //                 });
            //         } else {
            //             uni.chooseAddress();
            //         }
            //     },
            // });
        },

        // 跳转到推广页面
        jumpGeneralize() {
            const self = this;

            if (self.user.login) {
                if (self.user.vip && self.user.vipStatus) {
                    self.router.push({
                        path: "/pages/generalize/index",
                    });
                } else {
                    self.router.push({
                        path: "/pages/generalize/open",
                    });
                }
            } else {
                self.router.push("/pages/login/index");
            }
        },

        makeCall() {
            uni.makePhoneCall({
                phoneNumber: "4006296782",
            });
        },

        kefuTel() {
            if (this.activeShop.managerTelephone) {
                uni.makePhoneCall({
                    phoneNumber: this.activeShop.managerTelephone,
                });
            }else{
                this.fn.showToast('当前店铺未设置客服手机号');
            }
        },
    },
    onShareAppMessage() {
        let url = `/pages/goods/index?uid=${this.user.user.id}&shopId=${this.activeShop.id}`;
        if (this.activeShop.store) {
            url += `&storeId=${this.activeShop.store.id}`;
        }
        return {
            title: this.activeShop.name || "",
            path: url,
            imageUrl: this.activeShop.shopBanner || this.activeShop.logo,
        };
    },

    // 数据计算
    computed: {
        tabList() {
            return this.$store.state.common.tabList;
        },
        activeShop() {
            return this.$store.state.common.activeShop;
        },
        // 是否开启积分抵扣
        enablePoints() {
            return this.$store.state.common.enablePoints;
        },
        // 判断主题  1:红色  2：绿色
        theme() {
            return this.$store.state.common.theme;
        },
        customConfig() {
            return this.$store.state.common.customConfig;
        },
        cashCouponName() {
            return this.$store.state.common.cashCouponName || "";
        },
        writeOffCashCouponName() {
            return this.$store.state.common.writeOffCashCouponName || "";
        },
        user() {
            return this.$store.state.user;
        },
        userInfo() {
            return this.$store.state.user.userInfo || "";
        },
        writeOffUser() {
            return this.$store.state.user.writeOffUser || "";
        },
        distribution() {
            return this.$store.state.common.distribution;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.page {
    background-color: #f6f6f6;
}
.user {
    height: px(300);
    padding: px(15) px(30) 0;
    background-color: #27a34f;

    &__content {
        display: flex;
        justify-content: space-between;
    }

    &__left {
        display: flex;
        align-items: center;
        width: 100%;
    }

    &__img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(170);
        height: px(170);
        border-radius: 50%;
        border: solid px(2) #fff;

        /deep/ img {
            width: px(160);
            height: px(160);
            border-radius: 50%;
        }
    }

    &__name {
        @include omits(1);
        margin-left: px(30);
        font-size: px(48);
        color: #fff;
    }
    &__info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.order {
    width: px(1020);
    overflow: hidden;
    margin: px(30) auto 0;
    border-radius: px(15);
    background-color: #fff;

    &__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: px(120);
        padding: 0 px(30);
        border-bottom: solid px(3) #ececec;
    }

    &__title {
        font-size: px(44);
        color: #333;
    }

    &__right {
        display: flex;
        align-items: center;
    }

    &__all {
        font-size: px(36);
        color: #999;
    }

    &__arrows {
        // margin-left: px(30);
        font-size: px(34);
        color: #999;
    }

    &__list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: px(220);
    }

    &__item {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    &__icon {
        font-size: px(60);
        color: #666;
        /deep/ img {
            width: px(60);
            height: px(60);
            object-fit: contain !important;
        }
    }

    &__text {
        margin-top: px(20);
        font-size: px(36);
        color: #333;
    }

    &__num {
        position: absolute;
        top: px(10);
        right: px(20);
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: px(42);
        height: px(42);
        transform: translate(50%, -50%);
        padding: 0 px(15);
        font-size: px(30);
        color: #fff;
        border-radius: px(21);
        background-color: #27a34f;
    }
}

.tool {
    width: px(1020);
    margin: px(30) auto px(30);
    background-color: #fff;
    border-radius: px(15);

    &__title {
        display: flex;
        align-items: center;
        height: px(120);
        padding: 0 px(30);
        font-size: px(44);
        color: #333;
        border-bottom: solid px(3) #ececec;
    }

    &__list {
        display: flex;
        flex-wrap: wrap;
        padding: px(20) px(40);
    }

    &__item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 25%;
        height: px(220);
        position: relative;
    }

    &__num {
        position: absolute;
        top: px(0);
        right: px(0);
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: px(42);
        height: px(42);
        transform: translate(50%, -50%);
        padding: 0 px(15);
        font-size: px(30);
        color: #fff;
        border-radius: px(21);
        background-color: #f00;
    }

    &__icon {
        font-size: px(60);
        position: relative;
        /deep/ img {
            width: px(80);
            height: px(80);
            object-fit: contain !important;
        }
    }

    &__text {
        margin-top: px(20);
        font-size: px(36);
        color: #333;
    }
}
.vv {
    text-align: center;
    padding: px(20);
    color: #999;
    font-size: px(34);
}

.page_red {
    .user {
        background-color: #27a34f;
    }
}
.vip-code {
    width: px(60);
    height: px(60);
    /deep/ img {
        width: px(60);
        height: px(60);
    }
}

.code-box {
    margin-left: px(60);
    display: flex;
    align-items: center;
    padding: px(10);
    .text {
        margin-left: px(14);
        font-size: px(32);
        color: #fff;
    }
}
</style>