pages/alarm_list/industry/industry.vue

@@ -1,12 +1,24 @@
<template>
    <scroll-view id="articleBox" :style="{ height: swiperHeight + 'px' }" class="article-content" scroll-y
        style="width: 100%; margin-top: 15rpx;">
        <view v-for="(i, index) in data" class="advisory-model">
            <u-cell-group :title="i.company">
                <u-cell-item icon="order" @click="goDetail(index)" :title="i.policy" :label="i.time.substring(0,11)"></u-cell-item>
            </u-cell-group>
    <view>
        <view>
            <view class="search-block" style="height: 35px">
                <view class="search-ico-wapper">
                    <image src="../../../static/images/search/search.png" class="search-ico" mode=""></image>
                </view>
                <input type="text" v-on:input="getKeyword" v-model="keyword" placeholder="搜索" class="search-text"
                    maxlength="10" focus />
            </view>
        </view>
    </scroll-view>
        <scroll-view id="articleBox" :style="{ height: swiperHeight + 'px' }" class="article-content" scroll-y
            style="width: 100%; margin-top: 15rpx;">
            <view v-for="(i, index) in data" class="advisory-model">
                <u-cell-group :title="i.company">
                    <u-cell-item icon="order" @click="goDetail(index)" :title="i.policy"
                        :label="i.time.substring(0,11)"></u-cell-item>
                </u-cell-group>
            </view>
        </scroll-view>
    </view>
</template>

<script>
@@ -15,6 +27,7 @@
            return {
                data: [],
                swiperHeight: 0,
                keyword: '',
            }
        },
        onLoad() {
@@ -24,7 +37,7 @@
        methods: {
            goDetail(index) {
                uni.navigateTo({
                    url:'./industry_detail?data='+ this.data[index].id
                    url: './industry_detail?data=' + this.data[index].id
                })
            },
            onReady() {
@@ -52,25 +65,87 @@
            getData() {
                var that = this;
                uni.request({
                    url: that.$store.state.piAPI + '/policy/page',
                    url: that.$store.state.piAPI + 'policy/page',
                    method: 'GET',
                    success: (res) => {
                        that.data = res.data.data.records;
                    }
                });
            },
            //on input 通过 keyword 关键字查询
            getKeyword() {
                this.getIndutry();
            },
            getIndutry() {
                var that = this;
                uni.request({
                    url: that.$store.state.piAPI + 'policy/page',
                    method: 'GET',
                    data: {
                        policy: this.keyword,
                    },
                    success: (res) => {
                        that.data = res.data.data.records;
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    /* 搜索框 */
    .search-ico,
    .search-ico-1 {
        width: 40upx;
        height: 40upx;
    }

    .search-block {
        width: 94%;
        margin: 0 auto;
        // background-color: #007AFF;
        display: flex;
        flex-direction: row;
        position: relative;
        top: 0.55rem;

        .search-ico-wapper {
            background-color: #F1F1F1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0upx 0upx 0upx 15upx;
            border-bottom-left-radius: 7px;
            border-top-left-radius: 7px;
        }

        .search-text {
            font-size: 14px;
            background-color: #F1F1F1;
            height: 70upx;
            width: 100%;
            padding-left: 0.5rem;
        }

        .search-ico-wapper1 {
            background-color: #F1F1F1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0upx 15upx 0upx 0upx;
            border-bottom-right-radius: 7px;
            border-top-right-radius: 7px;
        }
    }

    .u-cell_title {
        width: 250rpx;
        float: left;
        letter-spacing: 1px;
         white-space: nowrap;
        white-space: nowrap;
        overflow: hidden;
         text-overflow:ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;

 pages/alarm_list/organ/organ.vue

@@ -1,18 +1,31 @@
<template>
    <scroll-view id="articleBox" :style="{ height: swiperHeight + 'px' }" class="article-content" scroll-y
        style="width: 100%; margin-top: 15rpx;">
        <view v-for="(i, index) in data" class="advisory-model">
            <u-cell-group>
                <u-cell-item :arrow='false' icon="man-add" @click="goDetail(index)" :title="i.organization"
                    :label="i.time.substring(0,11)" :value="i.type=='0'?'审核中':i.type=='1'?'通过':i.type=='2'?'未通过':'未通过'">
                    <u-icon v-if="i.type == '0'" class="sh" slot="right-icon" size="32" name="clock"></u-icon>
                    <u-icon v-if="i.type == '1'" class="tg" slot="right-icon" size="32" name="checkmark-circle"></u-icon>
                    <u-icon v-if="i.type == '2'" class="bh" slot="right-icon" size="32" name="close-circle"></u-icon>
                </u-cell-item>
            </u-cell-group>
    <view>
        <view>
            <view class="search-block" style="height: 35px">
                <view class="search-ico-wapper">
                    <image src="../../../static/images/search/search.png" class="search-ico" mode=""></image>
                </view>
                <input type="text" v-on:input="getKeyword" v-model="keyword" placeholder="搜索" class="search-text"
                    maxlength="10" focus />
            </view>
        </view>

    </scroll-view>
        <scroll-view id="articleBox" :style="{ height: swiperHeight + 'px' }" class="article-content" scroll-y
            style="width: 100%; margin-top: 15rpx;">
            <view v-for="(i, index) in data" class="advisory-model">
                <u-cell-group>
                    <u-cell-item :arrow='false' icon="man-add" @click="goDetail(index)" :title="i.organization"
                        :label="i.time.substring(0,11)"
                        :value="i.type=='0'?'审核中':i.type=='1'?'通过':i.type=='2'?'未通过':'未通过'">
                        <u-icon v-if="i.type == '0'" class="sh" slot="right-icon" size="32" name="clock"></u-icon>
                        <u-icon v-if="i.type == '1'" class="tg" slot="right-icon" size="32" name="checkmark-circle">
                        </u-icon>
                        <u-icon v-if="i.type == '2'" class="bh" slot="right-icon" size="32" name="close-circle">
                        </u-icon>
                    </u-cell-item>
                </u-cell-group>
            </view>
        </scroll-view>
    </view>
</template>

<script>
@@ -21,6 +34,7 @@
            return {
                data: [],
                swiperHeight: 0,
                keyword: '',
            }
        },
        onLoad() {
@@ -29,7 +43,7 @@
        },
        methods: {
            goDetail(index) {
				

            },
            onReady() {
                let that = this;
@@ -57,18 +71,81 @@
                var that = this;
                var userid = that.$store.state.UserData.user_id;
                uni.request({
                    url: that.$store.state.piAPI + '/organ/page?uid=' + userid,
                    url: that.$store.state.piAPI + 'organ/page?uid=' + userid,
                    method: 'GET',
                    success: (res) => {
                        that.data = res.data.data.records;
                    }
                });
            },
            //on input 通过 keyword 关键字查询
            getKeyword() {
                this.getIndutry();
            },
            getIndutry() {
                var that = this;
                uni.request({
                    url: that.$store.state.piAPI + 'organ/page',
                    method: 'GET',
                    data: {
                        organization: this.keyword,
                        uid:that.$store.state.UserData.user_id
                    },
                    success: (res) => {
                        that.data = res.data.data.records;
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    /* 搜索框 */
    .search-ico,
    .search-ico-1 {
        width: 40upx;
        height: 40upx;
    }

    .search-block {
        width: 94%;
        margin: 0 auto;
        // background-color: #007AFF;
        display: flex;
        flex-direction: row;
        position: relative;
        top: 0.55rem;

        .search-ico-wapper {
            background-color: #F1F1F1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0upx 0upx 0upx 15upx;
            border-bottom-left-radius: 7px;
            border-top-left-radius: 7px;
        }

        .search-text {
            font-size: 14px;
            background-color: #F1F1F1;
            height: 70upx;
            width: 100%;
            padding-left: 0.5rem;
        }

        .search-ico-wapper1 {
            background-color: #F1F1F1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0upx 15upx 0upx 0upx;
            border-bottom-right-radius: 7px;
            border-top-right-radius: 7px;
        }
    }

    .u-cell_title {
        width: 250rpx;
        float: left;
@@ -86,10 +163,12 @@
        color: #55aaff;
        padding-left: 10px;
    }

    .bh {
        color: #e60303;
        padding-left: 10px;
    }

    .tg {
        color: #00f300;
        padding-left: 10px;

 pages/shengzs/index.vue

@@ -10,8 +10,12 @@

            <!-- 树、水滴值 -->
            <view class="tree">
                <view v-for="(o, i) in rainArr" :key="i" :class="['rain rain-'+ stages]" @click="rainFun(i, o)">{{o}}<text>g</text></view>
                <image :src="'../../static/shenzs/img/tree-'+ stages +'.png'" :class="['tree-'+ stages, treemove ? 'move-'+ stages : '']" hover-class="none" @click="tree"></image>
                <view v-for="(o, i) in rainArr" :key="i" :class="['rain rain-'+ 1]" @click="rainFun(o.id, o.num)">
                    {{o.num}}<text>g</text>
                </view>
                <image :src="'../../static/shenzs/img/tree-'+ stages +'.png'"
                    :class="['tree-'+ stages, treemove ? 'move-'+ stages : '']" hover-class="none" @click="tree">
                </image>
            </view>

            <!-- 水壶、浇水动画 -->
@@ -45,25 +49,17 @@
                <!-- 树成长进度 -->
                <view class="speed">
                    <view class="progress">
                        <image class="speed-1" :src="'../../static/shenzs/img/speed-1'+ [1 == stages ? '-h' : ''] +'.png'"></image>
                        <image class="speed-2" :src="'../../static/shenzs/img/speed-2'+ [2 == stages ? '-h' : ''] +'.png'"></image>
                        <image class="speed-3" :src="'../../static/shenzs/img/speed-3'+ [3 == stages ? '-h' : ''] +'.png'"></image>
                        <image class="speed-1"
                            :src="'../../static/shenzs/img/speed-1'+ [1 == stages ? '-h' : ''] +'.png'"></image>
                        <image class="speed-2"
                            :src="'../../static/shenzs/img/speed-2'+ [2 == stages ? '-h' : ''] +'.png'"></image>
                        <image class="speed-3"
                            :src="'../../static/shenzs/img/speed-3'+ [3 == stages ? '-h' : ''] +'.png'"></image>
                    </view>
                </view>
            </view>
        </view>
		
        <view class="explain">
            <!-- <view>功能概述：</view>
            <view class="text">该插件样式主要是模仿蚂蚁森林，其中的数据都是可配的（完全可以自义定 或 从后端API获取），根据不同的数据(如用户信息、水滴值等)显示对应的动效。</view> -->
            <view>操作说明：</view>
            <view class="text">1、用水壶每浇水1次，水滴值向上+1。</view>
            <view class="text">2、点击树上面的雨滴，水滴值 + 收取到的雨滴值。</view>
            <view>成长说明：</view>
            <view class="text">1、树的成长过程分为小树、中树、大树3个阶段。</view>
            <view class="text">2、现默认值: 小树(水滴值在100以下)， 中树(水滴值在100 到 1000)， 大树(水滴值在1000以上)。</view>
            <view class="text">3、树苗会在水滴值变化时会展示对应的动效 和 树的动效、大小等。</view>
        </view>


    </view>
</template>
@@ -73,30 +69,37 @@
        data() {
            return {
                info: {
                    name: '沐枫',     // 用户姓名
                    sex: 2,         // 用户姓别 1男， 2女
                    votes: 8,         // 水滴值 默认为8
                    avatar: '../../static/shenzs/img/detail-bg.jpg'     //用户头像
                    name: '沐枫', // 用户姓名
                    sex: 2, // 用户姓别 1男， 2女
                    votes: 9, // 水滴值 默认为8
                    avatar: '../../static/shenzs/img/detail-bg.jpg' //用户头像
                },
                rainArr: [28, 63, 5, 902],     // 雨滴值 点击收取
                rainArr: [28, 63, 5, 902], // 雨滴值 点击收取
                numberone: 1,
                stages: 1, // 成长阶段 1(小树[默认])，中2(中树) ，大3(大树)
                during: 1, // 阶段阈值 1、小树[100以下](during > votes ) ，2、中树[100及以上 并且小于1000](during <= votes && oldest > votes)
                fristD: 100, //中树阶层
                secondD: 1500, //大树阶层
                //oldest: 1000, // 阶段阈值 3、大树[1000及以上](oldest <= votes )
                plussNum: 1, // 加值数量（默认1）

                stages: 1,             // 成长阶段 1(小树[默认])，中2(中树) ，大3(大树)
                during: 100,         // 阶段阈值 1、小树[100以下](during > votes ) ，2、中树[100及以上 并且小于1000](during <= votes && oldest > votes)
                oldest: 1000,         // 阶段阈值 3、大树[1000及以上](oldest <= votes )
                plussNum: 1,         // 加值数量（默认1）

                pluss: false,         // 水滴值+1动画开关
                movetree: true,     // 树动画开关
                treemove: false,     // 树大小动画类型开关
                wateroff: true,     // 浇水动画开关
                watercss: false,     // 水壶动画开关
                waterdom: false     // 水滴动画开关
                pluss: false, // 水滴值+1动画开关
                movetree: true, // 树动画开关
                treemove: false, // 树大小动画类型开关
                wateroff: true, // 浇水动画开关
                watercss: false, // 水壶动画开关
                waterdom: false // 水滴动画开关
            };
        },
        onLoad() {
            this.getNowRain();
            this.getNowAnergy();
            this.getUser();
        },

        methods: {
            // 设置树的大小，恢复动画
            setTree(time = 4000) {
            setTree(time = 1000) {
                setTimeout(() => {
                    this.plussNum = 1;
                    this.pluss = false;
@@ -104,17 +107,17 @@
                    this.watercss = false;
                    this.treemove = false;
                    // 小树阶段
                    if (this.during > this.info.vote) {
                    if (this.during > this.fristD) {
                        this.stages = 1;
                    };
                    }
                    // 中树阶段
                    if (this.during <= this.info.votes && this.oldest > this.info.votes) {
                    if (this.during < this.secondD && this.during >= this.fristD) {
                        this.stages = 2;
                    };
                    }
                    // 大树阶段
                    if (this.oldest <= this.info.votes) {
                    if (this.during >= this.secondD) {
                        this.stages = 3;
                    };
                    }
                }, time);
            },

@@ -127,13 +130,32 @@

            // 收取雨滴的动画
            rainFun(i, o) {
                this.plussNum = o;
                this.info.votes = Number(this.info.votes) + (o - 0);
                this.pluss = true;
                this.treemove = true;
                setTimeout(() => {
                    this.rainArr.splice(i, 1);
                }, 1000);
                //值
                // this.plussNum = o;
                // this.info.votes = Number(this.info.votes) + (o - 0);
                // this.pluss = true;
                // this.treemove = true;
                var that = this;
                console.log(that.number)
                uni.request({
                    url: that.$store.state.piAPI + 'energy/updateEnergyIds',
                    method: 'POST',
                    data: {
                        id: i, // id
                        identification: that.$store.state.UserData.user_id, //用户
                        num: o, // 值
                    },
                    success: (res) => {
                        this.info.votes = Number(this.info.votes) + (o);
                        this.pluss = true;
                        this.treemove = true;
                        setTimeout(() => {
                            //this.rainArr.splice(i, 1);
                            this.getNowRain();
                            this.getNowAnergy();
                        }, 1000);
                    }
                });
                this.setTree(2000);
            },

@@ -160,7 +182,8 @@
                    }, 1500);

                    setTimeout(() => {
                        this.info.votes++;
                        //this.info.votes++;
                        this.getTre();
                        this.pluss = true;
                        this.treemove = true;
                        this.movetree = false;
@@ -173,6 +196,64 @@

                    this.setTree();
                };
            },
            //获取当前漂浮雨量
            getNowRain() {
                this.rainArr = [];
                var that = this;
                uni.request({
                    url: that.$store.state.piAPI + 'energy/list',
                    method: 'GET',
                    data: {
                        type: 1,
                        identification: that.$store.state.UserData.user_id
                    },
                    success: (res) => {
                        const data = res.data.data.records;
                        for (let k in data) {
                            this.rainArr.push({
                                id: +data[k].id,
                                identification: +data[k].identification,
                                num: +data[k].num,
                            });
                        }
                    }
                });
            },
            //获取当前树能量
            getNowAnergy() {
                var that = this;
                uni.request({
                    url: that.$store.state.piAPI + 'energyTree/selectNum',
                    method: 'GET',
                    data: {
                        identification: that.$store.state.UserData.user_id
                    },
                    success: (res) => {
                        that.during = res.data.data;
                        that.info.votes = res.data.data;
                    }
                });
                this.setTree();
            },
            //浇水
            getTre() {
                var that = this;
                uni.request({
                    url: that.$store.state.piAPI + 'energy/updateTre',
                    method: 'POST',
                    data: {
                        identification: that.$store.state.UserData.user_id
                    },
                    success: (res) => {
                        that.during = res.data.data;
                        that.info.votes = res.data.data;
                    }
                });
            },
            getUser() {
                var that = this
                this.info.name = that.$store.state.UserData.user_name
            }
        }
    };