设置页面开发

api/my.js

@@ -69,4 +69,16 @@ export function getUserUpBirthday(data = {}) {
     data,
     timeout: 20000
   })
+}
+
+export function getUserUpGender(data = {}) {
+  return request({
+    'url': '/app/user/update/gender',
+    headers: {
+      isToken: true
+    },
+    method: 'post',
+    data,
+    timeout: 20000
+  })
 }

common/styles/global/components.scss

@@ -157,6 +157,7 @@ view{box-sizing: border-box;}
 			height: 70rpx;min-height: 70rpx;padding: 20rpx;box-sizing: border-box;margin-right: 30rpx;
 			border: 1rpx solid #f0f0f0;border-radius: 10rpx;display: block;flex: 1;font-size: 28rpx;}
 		.common-input-margin{margin:0 46rpx 24rpx 46rpx;}
+		.common-select{margin-right: 42rpx;}
 	}
 	.content-center-class{text-align: center;}
 	.content-left-class{text-align: left;}

pages/my/components/genderDialog.vue

@@ -0,0 +1,81 @@
+<template>
+	<uni-popup ref="genderPopup" :animation="false" :is-mask-click="false"
+	 mask-background-color="rgba(0, 0, 0, 0.4)">
+	 <view class="phone-common-dialog">
+		<view class="common-body-box">
+			<view class="common-title">修改性别</view>
+			<view class="common-input-box">
+				<view class="common-input-row">
+					<text class="common-input-label"><text class="common-label-require">*</text>性别：</text>
+					<uni-data-select
+						class="common-select"
+					    v-model="data.gender"
+					    :localdata="data.range"
+					    @change="change"
+					></uni-data-select>
+				</view>
+			</view>
+			<view class="common-btn-box">
+				<view class="not-confirm-btn" @click="handleClose">{{notBtn}}</view>
+				<view class="confirm-btn" @click="confirmBtn">{{okBtn}}</view>
+			</view>
+		</view>
+	 </view>
+	</uni-popup>
+</template>
+
+<script setup>
+	import {ref,reactive} from "vue"
+	const props = defineProps({
+	  notBtn: {
+	    type: String,
+	  	require: true,
+	    default: '取消'
+	  },
+	  okBtn: {
+	    type: String,
+	  	require: true,
+	    default: '确认'
+	  },
+	});
+	const data = reactive({
+		gender: '',
+		range:[
+		    { value: 0, text: "未知" },
+		    { value: 1, text: "男" },
+		    { value: 2, text: "女" },
+		]
+	})
+	const genderPopup = ref(null); // 索引
+	const $emit = defineEmits(['confirm-btn'])
+	
+	function change(data){
+		console.log('changedata',data);
+	}
+	
+	function passClear(){
+		data.gender = '';
+	}
+	// 打开弹窗
+	function handleShow() {
+		genderPopup.value.open();
+	}
+	// 取消
+	function handleClose() {
+		passClear();
+		genderPopup.value.close();
+	}
+	// 确认
+	function confirmBtn(){
+		$emit('confirm-btn',data.gender);
+		passClear();
+		genderPopup.value.close();
+	}
+	defineExpose({
+			handleShow,
+			handleClose
+		})
+</script>
+
+<style>
+</style>