列表 list #

<template>
  <view class="container">
    <PlUniList :list="list">
      <template #f1>
        <image style="width: 112rpx; height: 112rpx; border-radius: 50%" :src="user.photo"></image>
      </template>
      <template #f2>
        <picker
          :value="sexIndex"
          :range="sexArray"
          range-key="value"
          class="picker"
          @change="bindPickerChange"
        >
          <view style="width: 100%">{{ user.sex }}</view>
        </picker>
      </template>
      <template #f3>
        <picker
          mode="date"
          class="picker"
          :value="user.birthday"
          :start="'1900-01-01'"
          @change="bindDateChange"
        >
          <view class="uni-input">{{ user.birthday }}</view>
        </picker>
      </template>
    </PlUniList>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { toast } from '@/utils/methods'
import { findIndex } from 'lodash'
const user = ref({
  photo: 'https://markettest.gree.com/storage/group1/M00/01/39/ZEdkPGQhQbiAKK3PAAXq3U_-DSE225.jpg',
  sex: '男',
  birthday: '1995-02-19',
  phone: '15878541234'
})
const sexArray = ref([
  {
    id: 12,
    value: '男'
  },
  {
    id: 123,
    value: '女'
  }
])
const list = ref([
  {
    // 字段名
    field: 'photo',
    // 图片地址
    imgUrl: '/static/image/user/camera.png',
    // 左侧文字
    label: '头像',
    // 是否显示右侧icon
    iconRightShow: false,
    slot: 'f1'
  },
  {
    // 字段名
    field: 'sex',
    // 图片地址
    imgUrl: '/static/image/user/camera.png',
    // 左侧文字
    label: '性别',
    // 是否显示右侧icon
    iconRightShow: true,
    slot: 'f2'
  },
  {
    // 字段名
    field: 'birthday',
    // 图片地址
    imgUrl: '/static/image/user/camera.png',
    // 左侧文字
    label: '生日',
    // 是否显示右侧icon
    iconRightShow: true,
    slot: 'f3'
  },
  {
    // 字段名
    field: 'phone',
    // 图片地址
    imgUrl: '/static/image/user/camera.png',
    // 左侧文字
    label: '手机号',
    // 是否显示右侧icon
    iconRightShow: false,
    defaultValue: user.value.phone
  },
  {
    // 字段名
    field: 'register',
    // 图片地址
    imgUrl: '/static/image/user/camera.png',
    // 左侧文字
    label: '注册协议',
    // 是否显示右侧icon
    iconRightShow: true,
    // 可点击
    clickable: true,
    // 点击事件
    onClick: () => {
      toast('点击注册协议')
    }
  }
])
const sexIndex = computed(() => {
  return findIndex(sexArray.value, { value: user.value.sex })
})
const bindPickerChange = (e) => {
  user.value.sex = sexArray.value[e.detail.value].value
}
const bindDateChange = (e) => {
  user.value.birthday = e.detail.value
}
</script>
<style lang="scss" scoped>
.container {
  min-height: 100%;
  background-color: $uni-bg-color;
  .picker {
    flex: 1;
    text-align: right;
  }
}
</style>