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