mali-applet-ui 0.0.38 → 0.0.41

package/components/ml-amount-input/ml-amount-input.vue

@@ -2,7 +2,7 @@
 	<input
 		class="ml-amount-input"
 		v-model="inpVal"
-		type="text"
+		type="digit"
 		:class="[{'is-right': align === 'right', 'is-border': border}, className]"
 		autocomplete="off"
 		:placeholder="placeholder"

package/components/ml-date-picker/ml-date-picker.vue

@@ -31,9 +31,9 @@ export default {
     }
   },
   methods: {
-    changeEvent () {
-      this.$emit('input', this.selectVal)
-      this.$emit('change', { value: this.selectVal })
+    changeEvent (value) {
+      this.$emit('input', value)
+      this.$emit('change', { value })
     }
   }
 }

package/components/ml-datetime-picker/ml-datetime-picker.vue

@@ -31,9 +31,9 @@ export default {
     }
   },
   methods: {
-    changeEvent () {
-      this.$emit('input', this.selectVal)
-      this.$emit('change', { value: this.selectVal })
+    changeEvent (value) {
+      this.$emit('input', value)
+      this.$emit('change', { value })
     }
   }
 }

package/components/ml-datetime-range-picker/ml-datetime-range-picker.vue

@@ -32,8 +32,8 @@ export default {
     }
   },
   methods: {
-    changeEvent () {
-      const [startDate, endDate] = this.selectDates
+    changeEvent (value) {
+      const [startDate, endDate] = value
       this.$emit('update:startDate', startDate)
       this.$emit('update:endDate', endDate)
       this.$emit('change', { startDate, endDate })

package/components/ml-form/ml-form.vue

@@ -1,7 +1,14 @@
 <template>
-  <view class="ml-form" :class="[className || '', {'is-vertical': vertical}]">
-    <uni-forms ref="uniForm" :modelValue="data" :rules="formRules" :label-position="vertical ? 'top' : 'left'">
-      <slot></slot>
+  <view class="ml-form" :class="[className || '']">
+    <uni-forms :key="fKey" ref="uniForm" :modelValue="data" :rules="formRules" :label-position="vertical ? 'top' : 'left'">
+      <slot>
+        <view v-for="(item, index) in items" :key="index">
+          <ml-form-group v-if="item.children && item.children.length">
+            <ml-form-item v-for="(cItem, cIndex) in item.children" :key="cIndex" :title="cItem.title" :field="cItem.field" :itemRender="cItem.itemRender" @modelvalue="updateModel"></ml-form-item>
+          </ml-form-group>
+          <ml-form-item v-else :title="item.title" :field="item.field" :itemRender="item.itemRender" @modelvalue="updateModel"></ml-form-item>
+        </view>
+      </slot>
     </uni-forms>
   </view>
 </template>
@@ -15,14 +22,23 @@ export default {
     virtualHost: true
   },
   props: {
+    value: Object,
     data: Object,
     items: Array,
     rules: Object,
+    readonly: Boolean,
     vertical: Boolean,
+    labelWidth: String,
     className: String
   },
+  provide() {
+    return {
+      mlForm: this
+    }
+  },
   data () {
     return {
+      fKey: 1
     }
   },
   computed: {
@@ -38,9 +54,14 @@ export default {
       return rest
     }
   },
+  created () {
+    this.$nextTick(() => {
+      this.fKey++
+    })
+  },
   methods: {
-    matchComponent (item, name) {
-      return item.itemRender && item.itemRender.name === name
+    getProp (item, prop, defultValue) {
+      return (item.itemRender.props ? item.itemRender.props[prop] : null) || defultValue
     },
     validate () {
       return this.$refs.uniForm.validate().then(() => {
@@ -55,6 +76,9 @@ export default {
       }).catch(() => {
         return {}
       })
+    },
+    updateModel ({ field, value}) {
+      this.$emit('input', { ...this.value, [field]: value })
     }
   }
 }

package/components/ml-form-group/ml-form-group.vue

@@ -0,0 +1,26 @@
+<template>
+  <view class="ml-form-group" :class="className">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlFormItem',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    className: String
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-form-group {
+  margin: 10rpx 0;
+  padding: 20rpx;
+  border-radius: 10rpx;
+  background: #ffffff;
+}
+</style>

package/components/ml-form-item/ml-form-item.vue

@@ -1,7 +1,21 @@
 <template>
-  <uni-forms-item :class="className" :label="title" :name="field">
-    <slot></slot>
-  </uni-forms-item>
+  <view class="ml-form-item">
+    <uni-forms-item
+      ref="uniFormItem"
+      :class="className"
+      :label="title"
+      :name="field"
+      :label-width="itemLabelWidth"
+      :label-position="itemVertical">
+      <slot>
+        <ml-input v-if="matchComponent('MlInput')" :value="itemValue" border @change="modelEvent"></ml-input>
+        <ml-date-picker v-else-if="matchComponent('MlDatePicker')" :value="itemValue" border @change="modelEvent"></ml-date-picker>
+        <ml-select-picker v-else-if="matchComponent('MlSelectPicker')" :value="itemValue" :options="renderOpts.options" border @change="modelEvent"></ml-select-picker>
+        <ml-textarea v-else-if="matchComponent('MlTextarea')" :value="itemValue" :rows="renderOpts.rows || 3" border @change="modelEvent"></ml-textarea>
+        <view v-else>{{ itemValue }}</view>
+      </slot>
+    </uni-forms-item>
+  </view>
 </template>
 
 <script>
@@ -13,7 +27,68 @@ export default {
   props: {
     title: String,
     field: String,
+    vertical: {
+      type: Boolean,
+       default: null
+    },
+    labelWidth: String,
+    itemRender: Object,
     className: String
+  },
+  inject: {
+    form: {
+      from: 'mlForm',
+      default: null
+    }
+  },
+  computed: {
+    itemValue () {
+      return this.formData[this.field]
+    },
+    formData () {
+      return (this.form ? this.form.value : {}) || {}
+    },
+    renderOpts () {
+      return this.itemRender || {}
+    },
+    itemVertical () {
+      let vertical = this.vertical
+      if (!vertical) {
+        vertical = this.form ? this.form.vertical : ''
+      }
+      return vertical ? 'top' : 'left'
+    },
+    itemLabelWidth () {
+      let labelWidth = this.labelWidth
+      if (!labelWidth) {
+        labelWidth = this.form ? this.form.labelWidth : ''
+      }
+      if (labelWidth && !isNaN(labelWidth)) {
+        labelWidth = `${labelWidth}rpx`
+      }
+      return labelWidth
+    }
+  },
+  created () {
+    this.init()
+  },
+  watch: {
+    itemVertical () {
+      this.init()
+    }
+  },
+  methods: {
+    init () {
+      this.$nextTick(() => {
+        this.$refs.uniFormItem.localLabelPos = this.itemVertical
+      })
+    },
+    matchComponent (name) {
+      return this.renderOpts.name === name
+    },
+    modelEvent (params) {
+      this.$emit('modelvalue', { field: this.field, ...params })
+    }
   }
 }
-</script>
+</script>

package/components/ml-input/ml-input.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="ml-input" :class="[className || '', {'is-right': align === 'right', 'is-border': border, 'is-prefix': prefixIcon || type === 'search', 'is-suffix': suffixIcon, 'is-disabled': disabled}]">
 		<view v-if="prefixIcon || type === 'search'" class="ml-input-prefix-icon">
-			<ml-icon v-if="prefixIcon" :class="prefixIcon"></ml-icon>
+			<ml-icon v-if="prefixIcon" :className="prefixIcon"></ml-icon>
 			<ml-icon v-else name="search"></ml-icon>
 		</view>
 		<input
@@ -13,7 +13,7 @@
 			@input="inputEvent" 
 			@confirm="confirmEvent"/>
 		<view v-if="suffixIcon" class="ml-input-suffix-icon">
-			<ml-icon :class="suffixIcon"></ml-icon>
+			<ml-icon :className="suffixIcon"></ml-icon>
 		</view>
 	</view>
 </template>

package/components/ml-month-picker/ml-month-picker.vue

@@ -1,8 +1,8 @@
 <template>
-  <picker :value="value" class="ml-month-picker" :class="[className || '', {'is-border': border}]" mode="date" fields="month" @change="changeEvent">
-		<view class="picker-warpper">
-      <view class="picker-text">{{ value || '请选择' }}</view>
-      <ml-icon class="picker-icon" name="arrow-down"></ml-icon>
+  <picker :value="value" class="ml-month-picker" mode="date" fields="month" @change="changeEvent">
+		<view class="ml-month-picker-warpper" :class="[className || '', {'is-border': border}]">
+      <view class="ml-month-picker-text">{{ value || '请选择' }}</view>
+      <ml-icon class="ml-month-picker-icon" name="arrow-down"></ml-icon>
     </view>
 	</picker>
 </template>
@@ -30,34 +30,33 @@ export default {
 
 <style lang="scss">
 .ml-month-picker {
-  font-size: 14px;
+  display: inline-block;
+	font-size: $uni-font-size-base;
   box-sizing: border-box;
-  border-radius: 4px;
-  padding: 0 5px;
-  padding-left: 10px;
+  padding: 0;
   position: relative;
-  display: flex;
   user-select: none;
   flex-direction: row;
   align-items: center;
-  height: 35px;
-  width: 240rpx;
+  width: 100%;
   color: #6a6a6a;
+}
+.ml-month-picker-warpper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 10rpx;
+  height: 70rpx;
+  border-radius: 10rpx;
   &.is-border {
     border: 1px solid #e5e5e5;
   }
-  .picker-warpper {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 194rpx;
-  }
-  .picker-text {
-    flex-grow: 1;
-  }
-  .picker-icon {
-    color: #6a6a6a;
-  }
+}
+.ml-month-picker-text {
+  flex-grow: 1;
+}
+.ml-month-picker-icon {
+  color: #6a6a6a;
 }
 </style>

package/components/ml-number-input/ml-number-input.vue

@@ -2,7 +2,7 @@
 	<input
 		class="ml-number-input"
 		v-model="inpVal"
-		type="text"
+		:type="type === 'integer' ? 'number' : 'digit'"
 		:class="[className || '', {'is-right': align === 'right', 'is-border': border}]"
 		autocomplete="off"
 		:placeholder="placeholder"
@@ -21,6 +21,7 @@ export default {
 		value: String,
 		align: String,
 		border: Boolean,
+		type: String,
 		maxLength: {
 			type: Number,
 			default: 12

package/components/ml-select-picker/ml-select-picker.vue

@@ -1,6 +1,6 @@
 <template>
-  <picker class="ml-select-picker" :class="[className || '', {'is-border': border}]" :range="optionList" :range-key="optLabelField" @change="changeEvent">
-    <view class="ml-select-picker-warpper" :style="{width: width || '160rpx'}">
+  <picker class="ml-select-picker" :style="{width: width || '100%'}" :range="optionList" :range-key="optLabelField" @change="changeEvent">
+    <view class="ml-select-picker-warpper" :class="[className || '', {'is-border': border}]">
       <view class="ml-select-picker-text">
         <text v-if="value !== null">{{ selectName }}</text>
         <text v-else class="picker-placeholder">{{ placeholder }}</text>
@@ -78,27 +78,28 @@ export default {
 
 <style lang="scss">
 .ml-select-picker {
+  display: inline-block;
 	font-size: $uni-font-size-base;
   box-sizing: border-box;
-  border-radius: 8rpx;
-  padding: 0 10rpx;
-  padding-left: 20rpx;
+  padding: 0;
   position: relative;
-  display: inline-flex;;
   user-select: none;
   flex-direction: row;
   align-items: center;
-  height: 70rpx;
+  width: 100%;
   color: #6a6a6a;
-  &.is-border {
-    border: 1px solid #e5e5e5;
-  }
 }
 .ml-select-picker-warpper {
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
+  padding: 0 10rpx;
+  height: 70rpx;
+  border-radius: 10rpx;
+  &.is-border {
+    border: 1px solid #e5e5e5;
+  }
 }
 .ml-select-picker-text {
   flex-grow: 1;

package/components/ml-textarea/ml-textarea.vue

@@ -1,11 +1,11 @@
 <template>
 	<view class="ml-textarea" :class="[className || '', {'is-border': border}]">
-		<view v-if="readonly" class="content">{{ inpVal }}</view>
+		<view v-if="readonly" class="ml-textarea-content">{{ inpVal }}</view>
 		<view v-else>
-			<textarea class="textarea" v-model="inpVal" :rows="rows" :maxlength="maxLength" :placeholder="placeholder" @input="inputEvent" :style="{color: fontColor, height: `${rows * 30}rpx`}"></textarea>
-			<view v-if="showWordLimit" class="word-count">
-				<VoiceInput v-if="showVoice" class="word-voice" v-model="inpVal" @input="inputEvent"></VoiceInput>
-				<view class="word-numbers">{{ value ? value.length : 0 }}/{{ maxLength }}</view>
+			<textarea class="ml-textarea-inp" v-model="inpVal" :rows="rows" :maxlength="maxLength" :placeholder="placeholder" @input="inputEvent" :style="{color: fontColor, height: `${rows * 30}rpx`}"></textarea>
+			<view v-if="showWordLimit" class="ml-textarea-word-count">
+				<VoiceInput v-if="showVoice" v-model="inpVal" @input="inputEvent"></VoiceInput>
+				<view class="ml-textarea-word-numbers">{{ value ? value.length : 0 }}/{{ maxLength }}</view>
 			</view>
 		</view>
 	</view>
@@ -67,11 +67,12 @@ export default {
   },
   methods: {
     inputEvent () {
-      if (this.maxLength && this.inpVal && this.inpVal.length > this.maxLength) {
-        this.$emit('input', this.inpVal.slice(0, this.maxLength))
-      } else {
-        this.$emit('input', this.inpVal)
+      let value = this.inpVal
+      if (this.maxLength && value &&value.length > this.maxLength) {
+        value = value.slice(0, this.maxLength)
       }
+      this.$emit('input', value)
+      this.$emit('change', { value })
     }
   }
 }
@@ -80,26 +81,27 @@ export default {
 <style lang="scss">
 .ml-textarea {
 	font-size: $uni-font-size-base;
-  padding: 20rpx 10rpx 10rpx 30rpx;
+  padding: 20rpx 10rpx 10rpx 20rpx;
   &.is-border {
     border: 1px solid #e5e5e5;
     border-radius: 10rpx;
   }
-  & > .content {
+  .ml-textarea-content {
     width: 100%;
     overflow: auto;
     word-break: break-all;
   }
-  .textarea {
+  .ml-textarea-inp {
     color: rgba(39, 42, 48, 0.4500);
     height: 280rpx;
     width: 100%;
+		font-size: $uni-font-size-base;
   }
-  .word-count {
+  .ml-textarea-word-count {
     padding-top: 10rpx;
     display: flex;
   }
-  .word-numbers {
+  .ml-textarea-word-numbers {
     flex-grow: 1;
     color: #999999;
     text-align: right;

package/components/ml-upload/ml-upload.vue

@@ -0,0 +1,350 @@
+<template>
+	<view class="ml-upload" :class="className">
+		<view v-if="readonly">
+			<view v-if="mediatype === 'image'" class="ml-upload-image-list">
+				<view class="ml-upload-file-item" v-for="(item, index) in value" :key="index">
+					<image class="ml-upload-file-img" mode="aspectFill" :src="getUrl(item)" @click="previewEvent(item, index)"></image>
+				</view>
+			</view>
+			<view v-else class="ml-upload-file-list">
+				<view class="ml-upload-file-item" v-for="(item, index) in value" :key="index">
+					<view class="ml-upload-file-name" @click="downloadEvent(item)">{{ item[nameField] }}</view>
+				</view>
+			</view>
+		</view>
+		<uni-file-picker
+			v-else
+			v-model="selectUniFileList" 
+			:limit="limit"
+			file-mediatype="image"
+			:image-styles="imageStyles"
+			:auto-upload="false"
+			@select="selectFile"
+			@delete="removeEvent">
+		</uni-file-picker>
+	</view>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+import globalStore from '../../config/store'
+	
+export default {
+  name: 'MlUpload',
+  options: {
+    virtualHost: true
+  },
+	props: {
+		value: {
+			type: Array,
+			default: () => ([])
+		},
+		urlList: {
+		  type: Array,
+		  default: () => ([])
+		},
+		simpleValue: {
+		  type: Boolean,
+		  default: false
+		},
+		readonly: {
+		  type: Boolean,
+		  default: false
+		},
+    limit: {
+      type: Number,
+      default: 9
+    },
+		className: String,
+		mediatype: {
+			type: String,
+			default: 'all'
+		},
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    fileProps: {
+      type: Object,
+      default: () => ({})
+    },
+		getFileUrl: Function,
+		uploadFile: Function,
+		removeFile: Function
+	},
+	data () {
+		return {
+			fileList: [],
+			selectUniFileList: [],
+			imageStyles: {
+				// "height": 60,	// 边框高度
+				// "width": 60,	// 边框宽度
+				// "border":{ // 如果为 Boolean 值，可以控制边框显示与否
+				// 	"color":"transparent",		// 边框颜色
+				// 	"width":"1px",		// 边框宽度
+				// 	"style":"solid", 	// 边框样式
+				// }
+			},
+			imgTypes: ['png', 'jpg']
+		}
+	},
+	computed: {
+    imageList () {
+      return this.value ? this.value.filter(item => this.imgTypes.includes(item[this.typeField])) : []
+    },
+    fieldMaps () {
+      return { ...globalStore.upload.fileProps, ...this.fileProps }
+    },
+    urlField () {
+      return this.fieldMaps.fileUrl || 'fileUrl'
+    },
+    typeField () {
+      return this.fieldMaps.fileType || 'fileType'
+    },
+    nameField () {
+      return this.fieldMaps.fileName || 'fileName'
+    }
+	},
+	watch: {
+		value (val) {
+			if (!this.isUpdate) {
+				this.isUpdate = true
+				this.loadList()
+			}
+		},
+		urlList () {
+		  this.loadList()
+		}
+	},
+	created () {
+		this.loadList()
+	},
+	methods: {
+		loadList () {
+			if (this.simpleValue) {
+				this.fileList = this.urlList.map(url => {
+          const name = this.getUrlName(url)
+					return {
+						id: null,
+						[this.nameField]: name,
+						[this.typeField]: this.getSuffix(name),
+						[this.urlField]: url,
+						tempPath: url
+					}
+				})
+				this.selectUniFileList = this.urlList.map(url => {
+          const name = this.getUrlName(url)
+					return {
+						name: name,
+						extname: this.getSuffix(name),
+						url: url
+					}
+				})
+				this.isUpdate = true
+				this.$emit('input', this.fileList)
+			} else {
+				this.fileList = this.value.map(item => {
+					item.tempPath = item[this.urlField]
+					return item
+				})
+				this.selectUniFileList = this.value.map(item => {
+					return {
+						name: item[this.nameField],
+						extname: item[this.typeField],
+						url: item[this.urlField]
+					}
+				})
+			}
+		},
+		updateModel () {
+		  this.$emit('update:urlList', this.fileList.map(item => item[this.urlField]))
+		  this.$emit('input', this.fileList)
+		},
+		async selectFile (e) {
+			const { tempFiles } = e
+			uni.showLoading({
+				title: "上传中..."
+			});
+			const uploadMethod = this.uploadFile ? this.uploadFile : (globalStore.upload ? globalStore.upload.uploadFile : null)
+			await Promise.all(
+				tempFiles.map(file => {
+					if (uploadMethod) {
+						return Promise.resolve(
+							uploadMethod({
+								file,
+								params: this.params
+							})
+						)
+					}
+				})
+			)
+			uni.hideLoading();
+		},
+		removeEvent (e) {
+			const { tempFilePath } = e
+			const item = this.fileList.find(item => item.tempPath === tempFilePath)
+			this.selectUniFileList = this.selectUniFileList.filter(item => item.url !== tempFilePath)
+			this.fileList = this.fileList.filter(item => item.tempPath !== tempFilePath)
+			const removeMethod = this.removeFile ? this.removeFile : (globalStore.upload ? globalStore.upload.removeFile : null)
+			if (item && !item.id) {
+				if (removeMethod) {
+					removeMethod({
+						item,
+						params: this.params
+					})
+				}
+			}
+			this.isUpdate = true
+			this.updateModel()
+		},
+    getUrl (item) {
+      const getFileMethod = this.getFileUrl ? this.getFileUrl : (globalStore.upload ? globalStore.upload.getFileUrl : null)
+      if (getFileMethod) {
+        return getFileMethod({
+          item,
+          params: this.params
+        })
+      }
+      return item[this.urlField]
+    },
+    getUrlName (url) {
+      const urlRest = XEUtils.parseUrl(url)
+      return urlRest.pathname.split('/').slice(-1)[0] || ''
+    },
+		getSuffix (filename) {
+		  const pos = filename.lastIndexOf('.')
+		  let suffix = ''
+		  if (pos !== -1) {
+				suffix = filename.substring(pos + 1)
+		  }
+		  return suffix
+		},
+		previewEvent (item, index) {
+			if (this.previewStatus) {
+				return
+			}
+			this.previewStatus = true
+			Promise.all(
+				this.value.map(item => {
+					return new Promise((resolve, reject) => {
+						uni.downloadFile({
+							url: this.getUrl(item), 
+							success: (downRes) => {
+								resolve({
+									url: downRes.tempFilePath
+								})
+							},
+							fail () {
+								resolve({
+									url: ''
+								})
+							}
+						})
+					})
+				})
+			).then(res => {
+				if (typeof wx === 'object') {
+					wx.previewMedia({
+						current: index,
+						sources: res
+					})
+				}
+				this.previewStatus = false
+			})
+		},
+		previewImg (item) {
+			uni.downloadFile({
+				url: this.getUrl(item), 
+				success: (downRes) => {
+					uni.previewImage({
+						urls: [
+							downRes.tempFilePath
+						],
+						longPressActions: {
+							itemList: ['保存图片']
+						}
+					})
+				}
+			})
+		},
+		downloadEvent (item) {
+			uni.downloadFile({
+				url: this.getUrl(item), 
+				success: (downRes) => {
+					// 仅支持类型
+					if (['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'].includes(item[this.typeField])) {
+						uni.openDocument({
+							filePath: downRes.tempFilePath,
+							showMenu: true,
+							success (saveRes) {
+							},
+							fail () {
+								uni.showModal({
+									content: '打开失败',
+									showCancel: false
+								});
+							}
+						})
+					} else if (['png', 'jpg'].includes(item[this.typeField])) {
+						this.previewImg(item)
+					} else {
+						uni.saveFile({
+							tempFilePath: downRes.tempFilePath,
+							success: function(res) {
+								uni.showToast({
+									icon: 'none',
+									mask: true,
+									title: '文件已保存：' + res.savedFilePath, //保存路径
+									duration: 3000,
+								})
+							}
+						})
+
+					}
+				},
+				fail () {
+					uni.showModal({
+						content: '下载失败',
+						showCancel: false
+					});
+				}
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.ml-upload{
+	margin: 20rpx 0;
+	background: #fff;
+}
+.ml-upload-image-list {
+	.ml-upload-file-item {
+		display: inline-block;
+		width: 210rpx;
+		height: 210rpx;
+		padding: 0 10rpx;
+	}
+	.ml-upload-file-img {
+		width: 100%;
+		height: 100%;
+	}
+}
+.ml-upload-file-list {
+	display: block;
+	.ml-upload-file-item {
+		border: 1rpx solid rgba(39, 42, 48, 0.0200);
+		background-color: rgba(39, 42, 48, 0.0200);
+		margin: 10rpx 0;
+		border-radius: 8rpx;
+    padding: 20rpx;
+	}
+	.ml-upload-file-name {
+		width: 600rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+</style>

package/components/ml-year-picker/ml-year-picker.vue

@@ -1,8 +1,8 @@
 <template>
-  <picker :value="value" class="ml-year-picker" :class="[className || '', {'is-border': border}]" mode="date" fields="year" @change="changeEvent">
-		<view class="picker-warpper">
-      <view class="picker-text">{{ value || '请选择' }}</view>
-      <ml-icon class="picker-icon" name="arrow-down"></ml-icon>
+  <picker :value="value" class="ml-year-picker"  mode="date" fields="year" @change="changeEvent">
+		<view class="ml-year-picker-warpper" :class="[className || '', {'is-border': border}]">
+      <view class="ml-year-picker-text">{{ value || '请选择' }}</view>
+      <ml-icon class="ml-year-picker-icon" name="arrow-down"></ml-icon>
     </view>
 	</picker>
 </template>
@@ -30,34 +30,33 @@ export default {
 
 <style lang="scss">
 .ml-year-picker {
-  font-size: 14px;
+  display: inline-block;
+	font-size: $uni-font-size-base;
   box-sizing: border-box;
-  border-radius: 4px;
-  padding: 0 5px;
-  padding-left: 10px;
+  padding: 0;
   position: relative;
-  display: flex;
   user-select: none;
   flex-direction: row;
   align-items: center;
-  height: 35px;
-  width: 240rpx;
+  width: 100%;
   color: #6a6a6a;
+}
+.ml-year-picker-warpper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 10rpx;
+  height: 70rpx;
+  border-radius: 10rpx;
   &.is-border {
     border: 1px solid #e5e5e5;
   }
-  .picker-warpper {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 194rpx;
-  }
-  .picker-text {
-    flex-grow: 1;
-  }
-  .picker-icon {
-    color: #6a6a6a;
-  }
+}
+.ml-year-picker-text {
+  flex-grow: 1;
+}
+.ml-year-picker-icon {
+  color: #6a6a6a;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "0.0.38",
+  "version": "0.0.41",
   "description": "码里云小程序组件库",
   "files": [
     "components",

package/components/ml-fixed-bottom/ml-fixed-bottom.vue

@@ -1,33 +0,0 @@
-<template>
-  <view class="ml-fixed-bottom" :class="[className || '']" :style="styles">
-    <slot></slot>
-  </view>
-</template>
-
-<script>
-export default {
-  name: 'MlFixedBottom',
-  options: {
-    virtualHost: true
-  },
-  props: {
-    bottom: String,
-    className: String
-  },
-  computed: {
-    styles () {
-      return this.bottom ? `bottom:${this.bottom};` : ''
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.ml-fixed-bottom {
-  display: flex;
-  flex-direction: row;
-  position: fixed;
-  width: 100%;
-  bottom: 40rpx;
-}
-</style>