Client-Teapay/src/pages/index/index.vue

<template>
    <div class="Appindex">
        <!-- 顶部 -->
        <view class="head">
            <!-- 搜索框 -->
            <!-- <view class="head_search">
                <text class="iconfont">&#xe661;</text>
                <text class="search_text">请输入搜索关键字</text>
            </view> -->
            <!-- 搜索框-end -->
            <!-- 轮播图 -->
            <swiper-banner :radius="1" imgScale="5:2" :imgArr="BannerImg" :duration="1000" :interval="5000" :circular="true" :autoplay="true" @goList="goList" :indicator-dots="true" indicator-active-color="#12B280" indicator-color="rgba(255, 255, 255, .82)"></swiper-banner>
            <!-- 轮播图-end -->
            <!-- 公告 -->
            <view class="head_notice clearfix">
                <view class="notice_title">
                    <image class="gg_img" src="@/static/img/gg.png"></image>
                </view>
                <swiper class="notice_swiper" vertical autoplay circular :interval="5000" :duration="1000">
                    <swiper-item v-for="(item, index) in not_list" :key="index" @click="toDetail(item.article_id)">
                        <text class="not_list ellipsis1">{{ item.title }}</text>
                        <text class="not_ico iconfont">&#xe62e;</text>
                    </swiper-item>
                </swiper>
            </view>
            <!-- 公告-end -->
            <!-- 金刚区 -->
            <view class="head_area">
                <view class="area_list" v-for="(item, index) in area_list" :key="index" @click="setPageUrl(item)">
                    <image class="area_img" :src="item.url"></image>
                    <view class="area_name">{{ item.name }}</view>
                </view>
            </view>
            <!-- 金刚区-end -->
            <!-- 活动 -->
            <view class="activity" v-if="spc_list.length > 0">
                <image class="act_one_img" :src="spc_list[0].url" @click="setPageUrl({ type: 4 })" mode=""></image>
                <view class="act_other">
                    <image class="act_two_img" :src="spc_list[1].url" @click="setPageUrl({ type: 6 })" mode=""></image>
                    <image class="act_two_img" :src="spc_list[2].url" mode="" @click="goNoticeList"></image>
                </view>
            </view>
            <!-- 活动-end -->
        </view>
        <view class="list_bar">
            <div class="tit">猜你喜欢</div>
            <view class="product-list">
                <view class="product" v-for="(i, s) in productList" :key="s" @click="NavToGoodsDetail(i.id, i.type)">
                    <view class="image-view">
                        <image class="product-image" :src="i.original_img"></image>
                    </view>
                    <view class="content-view">
                        <view :class="['product-title', 'ellipsis1']">{{ i.goods_name }}</view>
                        <view class="product-price">
                            <text class="product-price-original">{{ i.price }}</text>
                            <!-- <text class="product-price-favour">￥{{i.originalPrice}}</text> -->
                            <!-- <text class="product-tip">{{i.tip}}</text> -->
                            <text class="product-text" v-if="[3,4].includes(i.type)">赠<text class="corFE2C15">{{ i.give_cha_bao }}</text>茶宝</text>
                        </view>
                        <view class="product-txt" v-if="i.type == 1">赠送{{ i.give_integral + "批发券" }}</view>
                        <!-- <view class="product-txt">赠送{{ i.give_integral ? i.give_integral + "批发券" : i.give_cha_bao + "茶宝" }}</view> -->
                        <view class="product-txt" v-if="[3,4].includes(i.type)">限时赠送<text class="corFE2C15">{{ i.teac }}</text>TeaC</view>
                        <view class="product-txt fenxiang" v-if="[3,4].includes(i.type)"> 
                            <text class="iconfont">&#xe604;</text>
                            <text class="red">分享约获得 {{ i.first_teac }} TeaC</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="fz_w_text mar_t20 mar_b20">让数字经济赋能美好生活！</view>
        </view>
    </div>
</template>
<script>
let app = getApp();
var appEv = app.$vm.$options;
import swiperBanner from "@/components/swiperBanner"; //轮播
import { post } from "@/request/api.js";
export default {
    name: "Appindex",
    components: {
        swiperBanner, //轮播
    },
    data() {
        return {
            BannerImg: [], // 轮播图列表
            not_list: [], // 公告列表
            // 金刚区
            area_list: [{
                    name: "零售区",
                    url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/menu/cart.png",
                    type: 1,
                },
                {
                    name: "批发区",
                    url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/menu/wholesale.png",
                    type: 2,
                },
                {
                    name: "精品优选",
                    url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/menu/preferred.png",
                    type: 3,
                },
                {
                    name: "茶宝兑换",
                    url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/menu/integral.png",
                    type: 5,
                },
            ],
            spc_list: [{
                    url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/ShuZiTea/ShuZiTeaHT/202210/f70cd8e0-e468-45eb-a9f7-2c42713cd607.jpg",
                },
                {
                    url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/ShuZiTea/ShuZiTeaHT/202210/b13c0186-fdfc-4b87-b466-5c9fc336cc54.jpg",
                },
                {
                    url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/ShuZiTea/ShuZiTeaHT/202210/49886d9c-ce5a-49ca-a281-12910541344f.jpg",
                },
            ], //活动列表
            productList: [], //商品数据
        };
    },
    onLoad(option) {},
    onLaunch() {},
    onShow() {
        this.loadData();
        this.getBanner(); //获取轮播图
        this.getAnnounce(); //获取公告列表
    },
    onHide() {},
    methods: {
        loadData() {
            post("goods/indexGoods").then((res) => {
                if (res.code === 0) {
                    this.productList = res.data.data;
                }
            });
        },
        // 跳转到商品详情页
        NavToGoodsDetail(id, type) {
            this.goto("/pages/product/p_details", { id, type });
        },
        goNoticeList() {
            this.goto("/pages/consultation-list/index");
        },
        // 获取轮播图
        getBanner() {
            post("banner").then((res) => {
                if (res.code === 0) {
                    this.BannerImg = [];
                    res.data.data.forEach((e) => {
                        if (e.image) this.BannerImg.push(e.image);
                    });
                }
            });
        },
        // 获取公告列表
        getAnnounce() {
            let data = {
                is_index: 1
            }
            post("notice", data).then((res) => {
                if (res.code === 0) {
                    this.not_list = res.data.data;
                }
            });
        },
        //跳转公告详情
        toDetail(id) {
            this.goto("/pages/notice/detail", { id });
        },
        // 轮播图跳转
        goList(e) {},
        // 金刚区跳转
        setPageUrl(item) {
            if ([1, 3, 4, 6].includes(item.type)) {
                this.goto("/pages/product/productRetail", { type: item.type });
            } else if (item.type == 2) {
                this.goto("/pages/product/productWholesale", { type: 2 });
            } else if (item.type == 5) {
                this.goto("/pages/product/productTeaBaby", { type: item.type });
            } else {
                appEv.errTips("此功能暂未开放！");
                return false;
            }
        },
    },
    computed: {},
    watch: {},
    onShareAppMessage: function() {
        let userinfo = uni.getStorageSync("userinfo");
        var path = "/pages/index/index?agentId=1";
        if (userinfo.user_id) {
            path = "/pages/index/index?agentId=" + userinfo.user_id;
        }
        var title = `让数字经济赋能美好生活！`;
        return {
            title: title,
            path: path,
        };
    },
};
</script>
<style scoped lang='scss'>
.head {
    padding: 12rpx 28rpx;
}

.head_search {
    width: 100%;
    height: 64rpx;
    line-height: 64rpx;
    background: #f3f5f7;
    border-radius: 32rpx;
    text-align: center;
    font-size: 28rpx;
    color: #bbbbbb;
    margin-bottom: 26rpx;

    .search_text {
        margin-left: 14rpx;
    }
}

.head_notice {
    margin: 30rpx 0;

    .notice_title {
        width: 130rpx;
        height: 40rpx;
        float: left;

        .gg_img {
            width: 100%;
            height: 40rpx;
        }
    }

    .notice_swiper {
        height: 40rpx;
        padding-left: 20rpx;
        font-size: 28rpx;
        float: left;
        box-sizing: border-box;
        width: calc(100% - 130rpx);

        .not_list {
            width: calc(100% - 50rpx);
        }

        .not_ico {
            width: 30rpx;
            font-size: 28rpx;
            color: #999;
        }

        .not_list,
        .not_ico {
            display: inline-block;
            vertical-align: middle;
            height: 40rpx;
            line-height: 40rpx;
        }
    }
}

// 金刚区
.head_area {
    margin: 20rpx 0 20rpx;
    padding: 20rpx 0;
    border-radius: 18rpx;
    box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.08);

    .area_list {
        display: inline-block;
        width: 25%;
        text-align: center;

        .area_img {
            width: 46rpx;
            height: 46rpx;
            margin-bottom: 12rpx;
        }

        .area_name {
            font-size: 24rpx;
            color: #474747;
        }
    }
}

// 金刚区-end

// 活动
.activity {
    .act_one_img {
        display: inline-block;
        width: 300rpx;
        height: 378rpx;
        margin-right: 10rpx;
    }

    .act_other {
        display: inline-block;
        width: calc(100% - 300rpx - 10rpx);
    }

    .act_two_img {
        width: 100%;
        height: 185rpx;
    }
}

// 活动-end

// 商品列表
.list_bar {
    .tit {
        text-align: center;
        font-size: 36rpx;
        color: #121212;
        padding: 40rpx 0 20rpx;
        font-weight: bold;
    }
}

.product-list {
    padding: 0 20rpx;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;

    .product {
        // width: 50%;
        // padding: 20rpx 10rpx;
        display: flex;
        flex-direction: column;

        margin-bottom: 20rpx;
        width: 48.5%;
        padding-bottom: 6px;
        // border: 1px solid #eee;
        border-radius: 5px;
        box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.08);

        &:nth-child(2n) {
            margin-left: 3%;
        }
    }

    .product-image {
        border-radius: 10rpx 10rpx 0 0;
        width: 100%;
        height: 42.3vw;
        object-fit: cover;
    }

    .content-view{
        padding: 0 16rpx;
    }

    .product-title {
        width: 100%;
        overflow: hidden;
        line-height: 1.5;
        font-size: 28rpx;
        color: #121212;
    }

    .product-price {
        color: #121212;
        font-size: 28rpx;
        position: relative;
    }

    .product-price-original {
        color: #18bb88;
        font-size: 32rpx;
        font-weight: bold;
        &:before{
            content:"￥";
            font-size: 20rpx;
        }
    }

    .product-price-favour {
        color: #888888;
        text-decoration: line-through;
        margin-left: 10upx;
    }

    .product-tip {
        position: absolute;
        right: 10upx;
        background-color: #ff3333;
        color: #ffffff;
        padding: 0 10upx;
        border-radius: 5upx;
    }

    .product-unit {
        font-size: 24rpx;
        color: #18bb88;
    }

    .product-txt,.product-text {
        font-size: 22rpx;
        color: #787878;
        .iconfont{
            margin-right: 6rpx;
        }
    }
    .product-text {
        margin-left: 16rpx;
    }
    .red{
        color: #FA2E18;
    }
    .fenxiang{
        font-size: 20rpx;
        background: rgba(250,46,24, 0.08);
        display: inline-block;
        border-radius: 6rpx;
        padding: 0 16rpx;
    }
}
</style>