大数据

<template>

<view style="height: 100vh;background-color: #f9f9f9;">
    <heat style="background-color: red;"></heat>
    <view style="width: 100%;height: 88rpx;background-color: #fff;"></view>
    <loading></loading>
    <view class="dis_f_f_c">
        <view v-for="(item,index) in list" class="ma_r20 dis_f_f_c"  :hover-start-time="1" :hover-stay-time="1" hover-class="box-active" hover-stop-propagation :key='index' @click="c_shuzi(index,item)">
            <view :class="index==list_num?'fs_36_red':''">
                {{item.name}}
            </view>
            <view class="whbox" v-show="index!=list_num"></view>
            <view :class="item.state?'whbox_red':'whbox_lv'" v-show="index==list_num"></view>
        </view>
    </view>
    <view @click="smcode">扫码</view>
    <view @click="returndy">返回</view>
    
    <view @click="yulantup">图片预览</view>
    <view class="dongxian">
        <view class="dobglan">
            <view class="po_rrr">
                <view class="po_a44"></view>
            </view>
        </view>
    </view>
    
    
    
    <view class="dis_f_f_c">
        <uni-tag text="标签"></uni-tag>
        <uni-tag text="124" size="small" type="default" :circle="true"></uni-tag>
        <uni-tag text="标签" @click="bindClick"></uni-tag>

        <uni-badge text="10" type="error" size='small' style="" />
        <view class="ttt">100</view>
    </view>
    <button @click="open">打开弹窗</button>
    <view style="width: 100px;height: 100px;">
    <uni-grid :column="1">
        <uni-grid-item>
            <text class="text">文本17888888888886</text>
        </uni-grid-item>
        </uni-grid-item>
    </uni-grid>
    </view>
    <uni-popup ref="popup" type="share" >
        <view class="bao" @click="closeone">aas</view>
    </uni-popup>
    <!-- <view style="width: 100%;height: 100px;background-color: #007AFF;position: fixed;z-index: 99;left: 0;bottom: 0;">asd</view> -->
    <!-- <uni-popup ref="popup" type="dialog">
        <uni-popup-dialog type="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
    </uni-popup> -->
    <!-- 基本用法 -->
    <uni-search-bar @confirm="search" @input="input"></uni-search-bar>

    <!-- 自定义Placeholder -->
    <uni-search-bar placeholder="自定placeholder" @confirm="search"></uni-search-bar>

    <!-- 设置圆角 -->
    <uni-search-bar :radius="100" @confirm="search"></uni-search-bar>

    <!-- 一般用法 -->
    <uni-grid :column="3">
        <uni-grid-item>
            <text class="text">文本1</text>
        </uni-grid-item>
        <uni-grid-item>
            <text class="text">文本2</text>
        </uni-grid-item>
        <uni-grid-item>
            <text class="text">文本3</text>
        </uni-grid-item>
    </uni-grid>

    <!-- 不带边框并矩形显示 -->
    <uni-grid :column="3" :show-border="false" :square="false">
        <uni-grid-item>
            <text class="text">文本</text>
        </uni-grid-item>
        <uni-grid-item>
            <text class="text">文本</text>
        </uni-grid-item>
        <uni-grid-item>
            <text class="text">文本</text>
        </uni-grid-item>
        <uni-grid-item>
            <text class="text">文本</text>
        </uni-grid-item>
        <uni-grid-item>
            <text class="text">文本</text>
        </uni-grid-item>
        <uni-grid-item>
            <text class="text">文本</text>
        </uni-grid-item>
    </uni-grid>
    <!-- 基本用法 -->
    <uni-notice-bar single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
    <uni-notice-bar text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

    <!-- 文字滚动 -->
    <uni-notice-bar scrollable="true" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

    <!-- 显示图标 -->
    <uni-notice-bar showIcon="true" text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

    <!-- 显示关闭按钮 -->
    <uni-notice-bar showClose="true" showIcon="true" text="这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

    <!-- 查看更多 -->
    <uni-notice-bar @getmore="getMore" :showGetMore="true" moreText="查看更多" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

    <!-- 基本用法 -->
    <uni-steps :options="[{title: '事件一'}, {title: '事件二'}, {title: '事件三'}, {title: '事件四'}]" :active="1"></uni-steps>

    <!-- 纵向排列 -->
    <uni-steps :options="[{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]"
     direction="column" :active="2"></uni-steps>
     
    <uni-load-more status="loading" iconType="circle"></uni-load-more>
    <uni-swipe-action>
        <!-- 基础用法 -->
        <uni-swipe-action-item :right-options="options" :left-options="options" @click="onClick" @change="change">
            <view>SwipeAction 基础使用场景</view>
        </uni-swipe-action-item>
        <!-- 使用插槽 （请自行给定插槽内容宽度）-->
        <uni-swipe-action-item>
            <template v-slot:left>
                <view><text>置顶</text></view>
            </template>
            <view>
                <text>使用插槽</text>
            </view>
            <template v-slot:right>
                <view><text>删除</text></view>
            </template>
        </uni-swipe-action-item>
        <!-- 混合用法 -->
        <uni-swipe-action-item :right-options="options">
            <template v-slot:left>
                <view><text>置顶</text></view>
            </template>
            <view><text>混合使用</text></view>
        </uni-swipe-action-item>
    </uni-swipe-action>

    <!-- 禁止滑动 -->
    <uni-swipe-action>
        <uni-swipe-action-item :disabled="true" :right-options="options">
            <view>SwipeAction 基础使用场景</view>
        </uni-swipe-action-item>
    </uni-swipe-action>

    <!-- 按组使用 -->
    <uni-swipe-action>
        <uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, 0)">
            <view style="height: 50px;">item1</view>
        </uni-swipe-action-item>
        <!-- <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, 1)">
            <view>item2</view>
        </uni-swipe-action-item>
        <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, 2)">
            <view>item3</view>
        </uni-swipe-action-item> -->
    </uni-swipe-action>
    
</view>

</template>

<script>

import heat from "@/components/heat/index.vue"
import loading from '@/pages/index/loading.vue'
export default {
    components:{
        heat,
        loading
    },
    data() {
        return {
            num: 1,
            options: [{
                text: '取消',
                style: {
                    backgroundColor: '#007aff'
                }
            }, {
                text: '确认',
                style: {
                    backgroundColor: '#dd524d'
                }
            }],
            list: [{
                    state: true,
                    name: '张三'
                },
                {
                    state: false,
                    name: '李四'
                },
                {
                    state: false,
                    name: '王五'
                }
            ],
            list_num: 0,
            imglist:[
                {
                    url:'https://pubstorage-bucket.oss-cn-shenzhen.aliyuncs.com/yunyaoduo/buyer/2049/1608197645198.jpg'
                },
                {
                    url:'https://pubstorage-bucket.oss-cn-shenzhen.aliyuncs.com/yunyaoduo/buyer/2060/1609140476935.jpg'
                }
            ]
        }
    },
    onLoad() {
        uni.startPullDownRefresh();
    },
    // 2.下拉刷新
onPullDownRefresh() {
        console.log('refresh');
        setTimeout(function () {
            uni.stopPullDownRefresh();
            // 这里放刷新数据的方法
        }, 1000);
    },
    methods: {
        yulantup(){
            console.log('图片')
             let photoList = this.imglist.map(item => {
                        return item.url;
                    });
                    uni.previewImage({
                        current: 1,     // 当前显示图片的链接/索引值
                        urls: photoList,    // 需要预览的图片链接列表，photoList要求必须是数组
                        loop:true   // 是否可循环预览
                    });
        },
        c_shuzi(index, item) {
            this.list_num = index;
            item.state = !item.state;
            
        },
        open() {
            this.$refs.popup.open()
        },
        closeone(){
            this.$refs.popup.close()
        },
        /**
         * 点击取消按钮触发
         * @param {Object} done
         */
        close(done) {
            // TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
            // ...
            done()
        },
        returndy(){
            let pages = getCurrentPages();
            let nowPage = pages[ pages.length - 1];
            let prevPage = pages[ pages.length - 2 ]; 
            prevPage.$vm.sh = 100;
            uni.navigateBack({
                delta:1
            })
        },
        /**
         * 点击确认按钮触发
         * @param {Object} done
         * @param {Object} value
         */
        confirm(done, value) {
            // 输入框的值
            console.log(value)
            // TODO 做一些其他的事情，手动执行 done 才会关闭对话框
            // ...
            done()
        },
        onClick(e) {
            console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
        },
        swipeChange(e, index) {
            console.log('当前状态：' + open + '，下标：' + index)
        },
        bindClick(e) {
            console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
        },
        smcode(){
            uni.scanCode({
                success: function (res) {
                    console.log('条码类型：' + res.scanType);
                    console.log('条码内容：' + res.result);
                }
            })
        }
    }
}

</script>

<style>

.dongxian{
    width: 544rpx;
    height: 20rpx;        
    background: #CCE5FD;
    border-radius: 10rpx;
    padding:2rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.dobglan{
    width: 30%;
    height: 16rpx;        
    background: #007FF4;
    border-radius: 7rpx;
    padding-right: 44rpx;
    box-sizing: border-box;
    
}
.po_rrr{
    position: relative;
    width: 100%;
    height: 100%;
    /* background-color: red; */
}
.po_a44{
    width: 44rpx;
    height: 44rpx;
    border-radius: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: -14rpx;
    left: 100%;
}

.box-active{
        background-color: #f7f7f7;
}
.aa {
    height: 100vh;
    width: 100%;
    background-color: #007AFF;
}

.dis_f_f_c {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.fs_36_ff {
    font-size: 36rpx;
    color: #fff;
}

.fs_36_red {
    font-size: 36rpx;
    color: red;
}

.ba_red {
    background-color: red;
}

.ma_r20 {
    margin-right: 20rpx;
}

.shuzi {
    background-color: red;
    color: #fff;
}

.ttt {
    min-width: 20rpx;
    height: 20rpx;
    background-color: red;
    border-radius: 20rpx;
    font-size: 18rpx;
    line-height: 20rpx;
    text-align: center;
    color: #fff;
    padding: 5rpx;
}

.whbox {
    width: 20rpx;
    height: 20rpx;
    background-color: #333;
}

.whbox_red {
    width: 20rpx;
    height: 20rpx;
    background-color: red;
}

.whbox_lv {
    width: 20rpx;
    height: 20rpx;
    background-color: #4CD964;
}

.bao {
    width: 100%;
    height: 500rpx;
    background-color: #fff;
}

</style>