12 changed files with 297 additions and 77 deletions
@ -0,0 +1,165 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view class="foot fixed"> |
||||
|
<uni-section title="左侧文字+右侧文字" subTitle="使用 left-text/right-text 设置左右文字" type="line" |
||||
|
style="margin-bottom: 3px;"> |
||||
|
<view class="box-bg"> |
||||
|
<uni-nav-bar border="false" title="标题" > |
||||
|
<block slot="left"> |
||||
|
<!-- <view ><uni-icons type="back" size="30"></uni-icons></view> --> |
||||
|
<view class="icon-all"><image class="imgsize"src='../../static/icon/left.png'/></view> |
||||
|
</block> |
||||
|
<block slot="right"> |
||||
|
|
||||
|
<view class="text-bg" @click="Sub()">submit</view> |
||||
|
|
||||
|
</block> |
||||
|
</uni-nav-bar> |
||||
|
</view> |
||||
|
</uni-section> |
||||
|
</view> |
||||
|
|
||||
|
<view class="detail"> |
||||
|
<view class="contain" v-for="(item,index) in imglist" :key="index"> |
||||
|
<!-- <view class="icon imgsize" :style="{backgroundImage :'url(' + item +')'}"></view> --> |
||||
|
|
||||
|
<view class="icon" @click="tabActive(index,item)"> |
||||
|
|
||||
|
<image class="imgsize":src="item"></image> |
||||
|
<radio class="main-icon-radio" v-show="current>0" :checked="index == current?true:false" /> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import {defaultRequest} from '../../api/index.js' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
current:-1, |
||||
|
active_img:'', |
||||
|
query:{ |
||||
|
_action:'getinfo' |
||||
|
|
||||
|
}, |
||||
|
query2:{ |
||||
|
_action:'updateinfo', |
||||
|
nickname:'', |
||||
|
sex:'', |
||||
|
birthday:'', |
||||
|
user_head:'', |
||||
|
email:'' |
||||
|
}, |
||||
|
imglist:[] |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
this.getimglist() |
||||
|
}, |
||||
|
methods: { |
||||
|
getimglist(){ |
||||
|
defaultRequest(this.query).then(res => |
||||
|
{ |
||||
|
// console.log(res.data.headicons,'图片') |
||||
|
this.imglist = res.data.headicons |
||||
|
console.log(res.data) |
||||
|
this.query2.nickname = res.data.nickname |
||||
|
// for(let i of this.imglist) |
||||
|
// console.log(i) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
tabActive(index,item){ |
||||
|
this.current = index |
||||
|
console.log(index) |
||||
|
this.active_img = item |
||||
|
}, |
||||
|
// 提交图片 |
||||
|
Sub(){ |
||||
|
console.log( this.active_img,'选择的图片') |
||||
|
this.query2.user_head = this.active_img; |
||||
|
defaultRequest(this.query2).then( res => { |
||||
|
console.log(res,'yyyy') |
||||
|
if(res.error==0){ |
||||
|
uni.showToast({ |
||||
|
title:'succuss', |
||||
|
duration: 2000, |
||||
|
icon:'none' |
||||
|
|
||||
|
}) |
||||
|
uni.navigateBack({ |
||||
|
delta:1 |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.foot{ |
||||
|
height:120rpx; |
||||
|
width: 100vw; |
||||
|
padding:50rpx 0 0 0; |
||||
|
background-color: #fff; |
||||
|
position: fixed; |
||||
|
} |
||||
|
.fixed{ |
||||
|
position: fixed; |
||||
|
z-index: 99; |
||||
|
} |
||||
|
.icon-all{ |
||||
|
height: 30rpx; |
||||
|
width:30rpx ; |
||||
|
} |
||||
|
.detail{ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
margin:10rpx 50rpx 10rpx 50rpx; |
||||
|
padding: 100rpx 0; |
||||
|
background-color: #fff; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
.text-bg{ |
||||
|
background-color: black; |
||||
|
color: aliceblue; |
||||
|
padding: 6rpx 10rpx; |
||||
|
border-radius: 15rpx; |
||||
|
} |
||||
|
.contain{ |
||||
|
width: 180rpx; |
||||
|
height: 160rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
margin: 50rpx 10rpx 10rpx 10rpx; |
||||
|
padding: 10rpx; |
||||
|
position: relative; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.icon{ |
||||
|
height: 160rpx; |
||||
|
width:160rpx; |
||||
|
margin: 12rpx; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
position: absolute; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.imgsize{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.main-icon-radio { |
||||
|
position: absolute; |
||||
|
z-index: 9; |
||||
|
margin-top: 110rpx; |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 355 B |
Loading…
Reference in new issue