H5端齐采药项目,uniapp框架
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

150 lines
2.8 KiB

<template>
<u-popup :show="show" @close="show=false" bgColor="#F8F6F6" mode="right">
<view class="selectPopup">
<div class="content">
<div class="radio-item" v-for="(item,index) in itemes" :key="item.id" @click="position(index,item)">
<div>{{item.name}}</div>
<image :src="$util.img(`/upload/weapp/user/gou.png`)" v-if="index==isRadio"></image>
<image :src="$util.img(`/upload/weapp/user/un_gou.png`)" v-else></image>
</div>
</div>
<div class="btns">
<div class="btn1" @click="show=false">返回</div>
<div class="btn2" @click="btn">确定</div>
</div>
</view>
</u-popup>
</template>
<script>
export default {
data() {
return {
isRadio:0,
value: '业务员',
show: false,
valueList:[{id:1,name:'一类'}],
item:[],
itemes:[
{id:1,name:'一类'},
{id:2,name:'二类'}
]
};
},
created() {
},
methods: {
start() {
this.show = true
},
position(index,item){
// console.log(item);
this.isRadio=index
this.item=item
},
btn(){
let _this=this
console.log(this.item,'333');
if(this.item.id){
console.log(this.item,'222');
this.show=false
setTimeout(()=>{
uni.$emit('type',this.item)
},500)
}else{
console.log(_this.valueList[0],'111');
this.show=false
setTimeout(()=>{
uni.$emit('type',_this.valueList[0])
},500)
}
}
}
}
</script>
<style lang="scss">
::v-deep{
.u-popup__content{
// background-color: rgb(85, 0, 0 , 46%);
background-color: rgba(0,0,0,0.0) !important;
}
}
.selectPopup {
width: 70vw;
position: relative;
height: 90vh;
background-color: #fff;
margin-top: 10vh;
.content {
padding: 32rpx;
.radio-item{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #222222;
margin: 10rpx 0;
image{
width: 32rpx;
height: 32rpx;
}
}
::v-deep{
.u-radio{
margin-bottom: 32rpx;
}
.u-radio__text{
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #222222;
}
}
}
.btns {
width: 100%;
position: absolute;
bottom: 0;
display: flex;
align-items: center;
.btn1 {
text-align: center;
line-height: 88rpx;
min-width: 172rpx;
height: 88rpx;
background: #DDDDDD;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
border-radius: 0;
}
.btn2 {
text-align: center;
line-height: 88rpx;
width: 100%;
height: 88rpx;
background: #21BBF3;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fff;
}
}
}
</style>