xiangqin/pages/profile/personStatus.vue

<template>
  <view class="page flex-col">
    <view class="group_1 flex-col">
		<image src="../../static/bg.png" mode="" style="width: 100%;height: 100%;"></image>
      
      <view class="box_3 flex-col">
        <text class="text_4">当前状态：{{list[info.status*1-1]||'暂无'}}</text>
        <view class="group_5 flex-col"></view>
        <view class="text-wrapper_3 flex-col" v-for="(item,index) in list" @click="itemclick(index)" :class="{'select':current==index}" :key="index" >
          <text class="text_6">{{item}}</text>
        </view>
       <!-- <view class="text-wrapper_3 flex-col">
          <text class="text_6">已婚</text>
        </view>
        <view class="text-wrapper_4 flex-col">
          <text class="text_7">离异</text>
        </view>
        <view class="text-wrapper_5 flex-col">
          <text class="text_8">丧偶</text>
        </view> -->
        <view class="text-wrapper_6 flex-col" @click="confirm">
          <text class="text_9" >确认</text>
        </view>
        <view class="group_6 flex-col">
			<view class="avatar">
				<image :src="info.headimg" mode=""></image>
			</view>
		</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
	onLoad() {
			this.info=JSON.parse(uni.getStorageSync('userInfo'))
			this.current=this.info.status*1-1
	},
  data() {
    return {
      list:['未婚','已婚','离异','丧偶'],
	  current:0,
	  info:{}
    };
  },
  methods: {
	  confirm(){
		  uni.$u.http.post('/api/user/user_status',{status:this.current*1+1}).then(res => {
		  		if(res.code==1){
					this.$u.toast(res.msg)
					this.getUserInfo()
				}
		  })
	  },
	  getUserInfo(){
		  uni.$u.http.post('/api/user/userinfo').then(res => {
		  	if(res.code==1){
				this.info=res.data
		  		uni.setStorageSync('userInfo',JSON.stringify(res.data))
		  	}
		  })
	  },
	  itemclick(index){
		  if(this.current!=index){
			  this.current=index
		  }
	  }
  },
};
</script>
<style lang="scss">
@import '@/common/common.css';
.select{
background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
text{
	color: #fff;
}
}
.avatar{
	position: relative;
	z-index: 999;
	margin: 0 auto;
	image{
		width: 172rpx;
		height: 172rpx;
		border-radius: 50%;
		border: 4rpx solid #FFFFFF;
	}
}
.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 750rpx;
  overflow: hidden;
}

.group_1 {
	position: relative;
  height: 100vh;
  width: 750rpx;
}

.group_10 {
  width: 750rpx;
  height: 290rpx;
}

.box_5 {
  width: 680rpx;
  height: 34rpx;
  margin: 30rpx 0 0 42rpx;
}

.text-wrapper_8 {
  width: 108rpx;
  height: 34rpx;
  overflow-wrap: break-word;
  font-size: 0;
  letter-spacing: -0.2800000011920929px;
  font-family: Helvetica;
  text-align: center;
  white-space: nowrap;
  line-height: 34rpx;
}

.text_12 {
  width: 108rpx;
  height: 34rpx;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 28rpx;
  font-family: Helvetica;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
}

.text_13 {
  width: 108rpx;
  height: 34rpx;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 28rpx;
  font-family: Helvetica;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
}

.group_11 {
  width: 34rpx;
  height: 22rpx;
  background-size: 36rpx 24rpx;
  margin: 6rpx 0 0 438rpx;
}

.group_12 {
  width: 30rpx;
  height: 22rpx;
  background-size: 32rpx 24rpx;
  margin: 4rpx 0 0 10rpx;
}

.group_13 {
  width: 50rpx;
  height: 24rpx;
  margin: 4rpx 0 0 10rpx;
}

.box_6 {
  width: 706rpx;
  height: 74rpx;
  margin: 24rpx 0 128rpx 30rpx;
}

.box_2 {
  width: 64rpx;
  height: 64rpx;
}

.text_3 {
  width: 146rpx;
  height: 50rpx;
  overflow-wrap: break-word;
  color: rgba(34, 34, 34, 1);
  font-size: 36rpx;
  letter-spacing: 0.2266666740179062px;
  font-family: PingFangSC-Medium;
  text-align: right;
  white-space: nowrap;
  line-height: 50rpx;
  margin: 22rpx 0 0 208rpx;
}

.group_14 {
  width: 168rpx;
  height: 60rpx;
  margin: 14rpx 0 0 120rpx;
}

.box_3 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 20px 20px 0px 0px;
  position: absolute;
  left: 0;
  top: 151rpx;
  width: 750rpx;
  height: 1336rpx;
}

.text_4 {
  width: 228rpx;
  height: 44rpx;
  overflow-wrap: break-word;
  color: rgba(34, 34, 34, 1);
  font-size: 32rpx;
  letter-spacing: 0.20148147642612457px;
  font-family: PingFangSC-Medium;
  text-align: right;
  white-space: nowrap;
  line-height: 44rpx;
  margin: 136rpx 0 0 262rpx;
}

.group_5 {
  background-color: rgba(242, 242, 242, 1);
  width: 690rpx;
  height: 2rpx;
  margin: 40rpx 0 0 30rpx;
}

.text-wrapper_2 {
  height: 100rpx;
  width: 610rpx;
  margin: 64rpx 0 0 70rpx;
}

.text_5 {
  width: 66rpx;
  height: 44rpx;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 32rpx;
  letter-spacing: 0.20148147642612457px;
  font-family: PingFangSC-Medium;
  text-align: right;
  white-space: nowrap;
  line-height: 44rpx;
  margin: 28rpx 0 0 272rpx;
}

.text-wrapper_3 {
  background-color: rgba(243, 244, 246, 1);
  border-radius: 10px;
  height: 100rpx;
  width: 610rpx;
  margin: 40rpx 0 0 70rpx;
}

.text_6 {
  width: 66rpx;
  height: 44rpx;
  overflow-wrap: break-word;
  color: rgba(34, 34, 34, 1);
  font-size: 32rpx;
  letter-spacing: 0.20148147642612457px;
  font-family: PingFangSC-Medium;
  text-align: right;
  white-space: nowrap;
  line-height: 44rpx;
  margin: 28rpx 0 0 272rpx;
}

.text-wrapper_4 {
  background-color: rgba(243, 244, 246, 1);
  border-radius: 10px;
  height: 100rpx;
  width: 610rpx;
  margin: 40rpx 0 0 70rpx;
}

.text_7 {
  width: 66rpx;
  height: 44rpx;
  overflow-wrap: break-word;
  color: rgba(34, 34, 34, 1);
  font-size: 32rpx;
  letter-spacing: 0.20148147642612457px;
  font-family: PingFangSC-Medium;
  text-align: right;
  white-space: nowrap;
  line-height: 44rpx;
  margin: 28rpx 0 0 272rpx;
}

.text-wrapper_5 {
  background-color: rgba(243, 244, 246, 1);
  border-radius: 10px;
  height: 100rpx;
  width: 610rpx;
  margin: 40rpx 0 0 70rpx;
}

.text_8 {
  width: 66rpx;
  height: 44rpx;
  overflow-wrap: break-word;
  color: rgba(34, 34, 34, 1);
  font-size: 32rpx;
  letter-spacing: 0.20148147642612457px;
  font-family: PingFangSC-Medium;
  text-align: right;
  white-space: nowrap;
  line-height: 44rpx;
  margin: 28rpx 0 0 272rpx;
}

.text-wrapper_6 {
	position: fixed;
	bottom: 84rpx;
	left: 50%;
	transform: translateX(-50%);
background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
  height: 92rpx;
  width: 650rpx;
  
border-radius: 52rpx;
}

.text_9 {
  width: 74rpx;
  height: 50rpx;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 36rpx;
  letter-spacing: 0.2266666740179062px;
  font-family: PingFangSC-Medium;
  text-align: right;
  white-space: nowrap;
  line-height: 50rpx;
  margin: 22rpx 0 0 288rpx;
}

.group_6 {
  position: absolute;
  left: 290rpx;
  top: -72rpx;
  width: 172rpx;
  height: 172rpx;
}

</style>