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