|
|
@@ -0,0 +1,173 @@
|
|
|
+<template>
|
|
|
+ <view class="gg-container">
|
|
|
+ <view class="gg-tit">
|
|
|
+ <view class="gg-title">
|
|
|
+ 我的吉农宝<text>上个页面传过来的参数{{id}}</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <uni-section title="基本用法" type="line">
|
|
|
+ <view class="example">
|
|
|
+ <!-- 基础用法，不包含校验规则 -->
|
|
|
+ <uni-forms ref="baseForm" :modelValue="baseFormData">
|
|
|
+ <uni-forms-item label="姓名" required>
|
|
|
+ <uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="年龄" required>
|
|
|
+ <uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="性别" required>
|
|
|
+ <uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="兴趣爱好" required>
|
|
|
+ <uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobbys" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="自我介绍">
|
|
|
+ <uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入自我介绍" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="日期时间">
|
|
|
+ <uni-datetime-picker type="datetime" return-type="timestamp" v-model="baseFormData.datetimesingle"/>
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-forms>
|
|
|
+ </view>
|
|
|
+ </uni-section>
|
|
|
+ <uni-section title="多行文本" subTitle="指定属性 type=textarea 使用多行文本框" type="line" padding>
|
|
|
+ <uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
|
|
|
+ </uni-section>
|
|
|
+ <!-- 这张图片就是自定义的图片，地址填写自己本地的就行 -->
|
|
|
+ <image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
|
|
|
+ mode="widthFix" style="width: 112rpx;height: 110rpx;" @click="uploadImagePhoto()"></image>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ baseFormData: {
|
|
|
+ name: '',
|
|
|
+ age: '',
|
|
|
+ introduction: '',
|
|
|
+ sex: 2,
|
|
|
+ hobby: [5],
|
|
|
+ datetimesingle: 1627529992399
|
|
|
+ },
|
|
|
+ // 单选数据源
|
|
|
+ sexs: [{
|
|
|
+ text: '男',
|
|
|
+ value: 0
|
|
|
+ }, {
|
|
|
+ text: '女',
|
|
|
+ value: 1
|
|
|
+ }, {
|
|
|
+ text: '保密',
|
|
|
+ value: 2
|
|
|
+ }],
|
|
|
+ // 多选数据源
|
|
|
+ hobbys: [{
|
|
|
+ text: '跑步',
|
|
|
+ value: 0
|
|
|
+ }, {
|
|
|
+ text: '游泳',
|
|
|
+ value: 1
|
|
|
+ }, {
|
|
|
+ text: '绘画',
|
|
|
+ value: 2
|
|
|
+ }, {
|
|
|
+ text: '足球',
|
|
|
+ value: 3
|
|
|
+ }, {
|
|
|
+ text: '篮球',
|
|
|
+ value: 4
|
|
|
+ }, {
|
|
|
+ text: '其他',
|
|
|
+ value: 5
|
|
|
+ }],
|
|
|
+ value: '',
|
|
|
+ password: '',
|
|
|
+ placeholderStyle: "color:#2979FF;font-size:14px",
|
|
|
+ styles: {
|
|
|
+ color: '#2979FF',
|
|
|
+ borderColor: '#2979FF'
|
|
|
+ },
|
|
|
+ id:'',
|
|
|
+ fileList1: []
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.id = options.id;
|
|
|
+ },
|
|
|
+ onReady() {},
|
|
|
+ methods: {
|
|
|
+ input(e) {
|
|
|
+ console.log('输入内容：', e);
|
|
|
+ },
|
|
|
+ iconClick(type) {
|
|
|
+ uni.showToast({
|
|
|
+ title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ uploadImagePhoto() {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 6, //默认9
|
|
|
+ sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
|
+ sourceType: ['album'], //从相册选择
|
|
|
+ success: function (res) {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 新增图片
|
|
|
+ async afterRead(event) {
|
|
|
+ console.log(event)
|
|
|
+ // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
|
|
+ let lists = [].concat(event.file)
|
|
|
+ let fileListLen = this[`fileList${event.name}`].length
|
|
|
+ lists.map((item) => {
|
|
|
+ this[`fileList${event.name}`].push({
|
|
|
+ ...item,
|
|
|
+ status: 'uploading',
|
|
|
+ message: '上传中'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ for (let i = 0; i < lists.length; i++) {
|
|
|
+ const result = await this.uploadFilePromise(lists[i].url)
|
|
|
+ let item = this[`fileList${event.name}`][fileListLen]
|
|
|
+ this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
|
+ status: 'success',
|
|
|
+ message: '',
|
|
|
+ url: result
|
|
|
+ }))
|
|
|
+ fileListLen++
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //上传图片
|
|
|
+ uploadFilePromise(url) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let a = uni.uploadFile({
|
|
|
+ //url: this.$common.domain+'/api/common/upload', // 仅为示例，非真实的接口地址
|
|
|
+ // url:'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
|
|
|
+ filePath: url,
|
|
|
+ name: 'file',
|
|
|
+ formData: {
|
|
|
+ user: 'test'
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ let data=JSON.parse(res.data) //最终传给的是字符串，这里需要转换格式
|
|
|
+ resolve(data.data.url)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .uni-mt-5 {
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+</style>
|
