<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>