szugift-fe/sourcecode/h5app/vue/src/views/index.vue

<template>
    <div>
        <guide style="z-index: 3" v-if="hasPresent === false"/>
        <van-swipe :autoplay="3000" style="margin: 10px 10px;" :initial-swipe="1">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" style="width: 100%"/>
            </van-swipe-item>
        </van-swipe>
        <van-notice-bar
                text="上传礼物需要被审核，请经常来看看审核是否通过，截止时间是24号21:00，25号0点开始将陆续放出配对结果"
                left-icon="//img.yzcdn.cn/vant/volume.png"
        />

        <van-row type="flex" justify="space-between" align="center" style="margin: 0 10px 0 15px">
            <van-col>
                <p><strong>我的礼物</strong></p>
            </van-col>
            <van-col>
                <van-button round type="primary" size="small" @click="toShare">邀请好友赢大奖</van-button>
            </van-col>
        </van-row>

        <ul style="background-color: #fff6e3">
            <li
                    is="index-present"
                    v-for="(present, index) in presents"
                    :key="present.id"
                    :present-img="present.imgUrl"
                    :present-name="present.name"
                    :present-desc="present.desc"
                    :publish-time="present.time"
                    :status="present.status"
                    @to-detail="toDetail(index)"
            ></li>
        </ul>
        <div style="margin: 20px 10px 0;">
            <p style="text-align: left; margin-left: 5px"><strong>简单四步，轻松互赠圣诞礼物</strong></p>
            <div
                    class="dec"
                    v-for="(pic, index) in dec_icons"
                    :key="index"
                    @click="Desc(index)"
            >
                <img :src="pic"/>
                <p>{{dec_words[index]}}</p>
            </div>
        </div>
        <div style="margin: 20px 10px 80px; font-size: 15px">
            <p style="margin-bottom: 0">Tips:</p>
            <p style="margin-top: 5px">我们十分重视您的礼物<br/> 如果使用中遇到疑惑 <br/> 欢迎您随时微信联系 177-8875-2557 </p>
        </div>
        <add-present-button :can_add="button_active"/>
    </div>
</template>

<script>
    import IndexPresent from "../components/IndexPresent";
    import {
        Button, Row, Col,
        Swipe, SwipeItem,
        NoticeBar, Toast, Dialog
    } from "vant";
    import AddPresentButton from "../components/addPresentButton";
    import {BasicFunction} from '../connector/basic-service';
    import Guide from "../components/guide";

    export default {
        name: "index",
        components: {
            Guide,
            AddPresentButton,
            IndexPresent,
            [Button.name]: Button,
            [Row.name]: Row, [Col.name]: Col,
            [Swipe.name]: Swipe, [SwipeItem.name]: SwipeItem,
            [NoticeBar.name]: NoticeBar
        },
        data() {
            return {
                images: [
                    "http://pjczv6ygf.bkt.clouddn.com/banner/banner1.jpg",
                    "http://pjczv6ygf.bkt.clouddn.com/banner/banner2.jpg",
                    "http://pjczv6ygf.bkt.clouddn.com/banner/banner3.jpg"
                ],
                active: 0,
                button_active: false,
                presents: {},
                hasPresent: true,
                dec_icons: [
                    "http://pjczv6ygf.bkt.clouddn.com/dec-icon/1.png",
                    "http://pjczv6ygf.bkt.clouddn.com/dec-icon/2.png",
                    "http://pjczv6ygf.bkt.clouddn.com/dec-icon/3.png",
                    "http://pjczv6ygf.bkt.clouddn.com/dec-icon/4.png",
                ],
                dec_words: [
                    '填写资料',
                    '上传礼物',
                    '获得匹配',
                    '线下交换'
                ],
                userStatus: 100
            }
        },
        methods: {
            toShare() {
                Toast.loading({
                    mask: true,
                    message: '加载中...',
                    duration: 1000
                });
                this.$router.push('share')
            },
            toDetail(i) {
                if (this.userStatus === 500) {
                    Dialog.confirm({
                        message: '您的校卡审核未通过！请前往【我的】页面重新上传校卡，否则将不会为您审核礼物哦',
                        confirmButtonText: '查看校卡信息',
                        cancelButtonText: '查看礼物'
                    }).then(() => {

                        Toast.loading({
                            mask: true,
                            message: '加载中...',
                            duration: 500
                        });
                        this.$router.push('me');
                    }).catch(() => {
                        Toast.loading({
                            mask: true,
                            message: '加载中...',
                            duration: 1000
                        });
                        let present = this.presents[i];
                        this.$router.push({
                            path: 'giftDetail', query: {present: present}
                        });
                    });
                } else {
                    Toast.loading({
                        mask: true,
                        message: '加载中...',
                        duration: 1000
                    });
                    let present = this.presents[i];
                    this.$router.push({
                        path: 'giftDetail', query: {present: present}
                    });
                }
            },
            Desc(i) {
                switch (i) {
                    case 0:
                        Toast.loading({
                            mask: true,
                            message: '加载中...',
                            duration: 500
                        });
                        this.$router.push('me');
                        break;
                    case 1:
                        Toast.loading({
                            mask: true,
                            message: '加载中...',
                            duration: 500
                        });
                        if (this.button_active) this.$router.push('verify');
                        else Dialog.alert({
                            message: '只能上传一个礼物哦'
                        }).then(() => {
                        });
                        break;
                    case 2:
                        Dialog.alert({
                            title: '获得匹配',
                            message: '获得匹配后，请返回此页面，点击礼物查看匹配'
                        }).then(() => {
                        });
                        break;
                    case 3:
                        Dialog.alert({
                            title: '线下交换',
                            message: '请联系匹配到的同学进行线下交换，我们将提供该同学的微信号'
                        }).then(() => {
                        });
                }
            }
        },
        created: function () {
            // return get_present_data()
            if (localStorage.getItem('frontend-userid') === null) {
                this.$router.push('login');
                return;
            }
            let userid = localStorage.getItem('frontend-userid');
            // console.log(userid);

            let presentList = [];
            let b_a = true;
            let h_p = false;
            let that = this;
            BasicFunction.get_data("smartIdentity/list?userId=" + userid, function (res) {
                // if(res.model === undefined || res.model.length === 0) {
                //     Toast.fail('无法获取用户信息，请退出重试');
                //     return;
                // }
                try {
                    let identity = res.model.list[0];
                    if (res.ret === '10000') {
                        that.userStatus = identity.userReviewStatus;
                        BasicFunction.get_data("smartGoods/list?isDel=0&ownerId=" + userid, function (response) {
                            // console.log("------ Data Rcvd in Index --------");
                            // console.log(response);
                            if (response.ret === "10000") {
                                let list = response.model.list;
                                if (list.length !== 0) h_p = true;
                                that.hasPresent = h_p;
                                list.forEach(gift => {
                                    let temp = {};
                                    temp.id = gift.goodid;
                                    temp.imgUrl = 'http://gift.fogice.com' + gift.img;
                                    temp.name = gift.name;
                                    if (gift.description.length > 45) {
                                        temp.desc = gift.description.substring(0, 30);
                                        temp.desc += "..."
                                    }
                                    else temp.desc = gift.description;
                                    temp.desc_long = gift.description;
                                    temp.time = gift.createTime.substring(0, 9);
                                    temp.status = gift.sort;
                                    if (gift.sort !== 4) b_a = false; // 限制上传1个礼物
                                    temp.gender = gift.goodFirstKind;
                                    temp.tags = gift.goodSecondKind;
                                    presentList.push(temp);
                                });
                                that.button_active = b_a;
                            } else Toast.fail('获取礼物列表失败');
                        }, {});
                    } else Toast.fail('获取信息失败');
                } catch (e) {
                    console.warn(e);
                    Toast.fail('无法获取用户信息，请退出重试' + e);
                }
            }, {});


            // console.log("presents:");
            // console.log(presentList);
            this.presents = presentList;
        },
        mounted: function () {
            document.getElementsByName("index_icon")[0].click(); // 保证导航栏正确
        }
    }

</script>

<style scoped>
    .dec {
        float: left;
        width: 25%;
        margin-bottom: 10px;
    }

    .dec img {
        width: 50%;
        background-color: white;
        border-radius: 50%;
        padding: 5px;
        margin-bottom: 0;
    }

    .dec p {
        font-size: 80%;
        margin-top: 2px;
        color: #9e9e9e;
    }
</style>