Commit 3fa4c3a0 authored by tangfh's avatar tangfh

封装 f-add-image-grid 插件(图片选择),并上传插件市场;修改图片路径

parent c2fa0fa3
...@@ -22,12 +22,12 @@ const statusViewUI = { ...@@ -22,12 +22,12 @@ const statusViewUI = {
}, },
empty: { empty: {
value: "empty", value: "empty",
src: "/static/icon-empty.png", src: "/static/f/icon-empty.png",
text: "暂无内容", text: "暂无内容",
}, },
error: { error: {
value: "error", value: "error",
src: "/static/icon-error.png", src: "/static/f/icon-error.png",
text: "服务器开小差,请稍候再试", text: "服务器开小差,请稍候再试",
}, },
} }
......
<template> <template>
<view class="content" :style="[style]"> <view class="content" :style="[style]">
<f-status-view v-if="statusViewUI.isShowStatusView" :status="statusViewUI.status" @tap="onStatusViewClick"></f-status-view> <f-status-view v-if="statusViewUI.isShowStatusView" :status="statusViewUI.status"
@tap="onStatusViewClick"></f-status-view>
<f-add-image-grid @choose="onImageChoose" @delete="onImageDelete"></f-add-image-grid>
<button @click="showPopTop">f-pop-top</button> <button @click="showPopTop">f-pop-top</button>
<button @click="showPopCenter">f-pop-center</button> <button @click="showPopCenter">f-pop-center</button>
<button @click="showPopBottom">f-pop-bottom</button> <button @click="showPopBottom">f-pop-bottom</button>
...@@ -27,7 +31,7 @@ ...@@ -27,7 +31,7 @@
</template> </template>
</f-pop> </f-pop>
<f-pop-date-time-picker :isShow="isShowPopDatetimePicker" mode="date" returnType="yyyy-MM-dd" <f-pop-date-time-picker :isShow="isShowPopDatetimePicker" mode="date" returnType="yyyy-MM-dd"
@change="onPopDatetimePickerChange" @dismiss="onPopDatatimePickerDismiss" /> @change="onPopDatetimePickerChange" @dismiss="onPopDatatimePickerDismiss" />
<f-image-01></f-image-01> <f-image-01></f-image-01>
<f-text-01 :ui="uiAddBtn"></f-text-01> <f-text-01 :ui="uiAddBtn"></f-text-01>
<view style="display: block; width: 100%;"> <view style="display: block; width: 100%;">
...@@ -69,7 +73,7 @@ ...@@ -69,7 +73,7 @@
marginRight: "32rpx", marginRight: "32rpx",
}, },
uiIcon: { uiIcon: {
value: "/static/icon-add.png", value: "/static/f/icon-add.png",
}, },
uiTxt: { uiTxt: {
value: "新增", value: "新增",
...@@ -112,6 +116,12 @@ ...@@ -112,6 +116,12 @@
this.cMultiText01UiInit() this.cMultiText01UiInit()
}, },
methods: { methods: {
onImageChoose(res) {
},
onImageDelete(res) {
},
showPopTop() { showPopTop() {
this.isShowPopTop = true this.isShowPopTop = true
}, },
...@@ -133,7 +143,7 @@ ...@@ -133,7 +143,7 @@
this.isShowPopDatetimePicker = false this.isShowPopDatetimePicker = false
}, },
onPopDatetimePickerChange(res) { onPopDatetimePickerChange(res) {
console.log('onPopDatetimePickerChange res: ',res); console.log('onPopDatetimePickerChange res: ', res);
this.onPopDatatimePickerDismiss() this.onPopDatatimePickerDismiss()
}, },
styleInit() { styleInit() {
...@@ -145,7 +155,7 @@ ...@@ -145,7 +155,7 @@
let ui = JSON.parse(JSON.stringify(constant.CONST.cMultiTextUI)); let ui = JSON.parse(JSON.stringify(constant.CONST.cMultiTextUI));
ui.prefix = '面积' ui.prefix = '面积'
ui.value = '56' ui.value = '56'
ui.iconRight = "/static/icon-dropdown.png" ui.iconRight = "/static/f/icon-dropdown.png"
ui.isShowIconRight = true ui.isShowIconRight = true
ui.clickActive = true ui.clickActive = true
this.cMultiText01Ui = ui this.cMultiText01Ui = ui
......
## 1.0.0(2024-05-30)
1.0.0
<template>
<view class="view-grid-pic flex-row" :style="{width: width}">
<view class="view-image-container" v-for="(item, index) in picsInner" :index="index" :key="index">
<image class="image-grid-pic" :src="item" mode="aspectFill" @click="onImageClick(index)">
</image>
<image class="image-delete" src="/static/f/icon-delete-image.png" @click="onDeleteImageBtnClick(index)"
:style="{opacity: edit ? 1 : 0}"></image>
</view>
<image :style="{'border': showBorder()}" class="image-add-pic-btn" src="/static/f/icon-add-image.png"
@click="onAddPicBtnClick" v-if="edit && picsInner.length < max"></image>
</view>
</template>
<script>
export default {
name: "f-add-image-grid",
data() {
return {
picsInner: []
};
},
props: {
max: {
type: Number,
default: 6
},
pics: {
type: Array,
default: []
},
edit: {
type: Boolean,
default: true
},
width: {
type: String,
default: "444rpx"
},
isBorder: {
type: Boolean,
default: true
}
},
created() {
},
methods: {
showBorder() {
if (!this.isBorder) {
return 'none';
}
},
onDeleteImageBtnClick(index) {
//this.$emit("delete", index);
this.picsInner = this.picsInner.filter((item)=> {
return this.picsInner[index] != item
})
this.$emit("delete", _this.picsInner)
},
onAddPicBtnClick() {
this.$emit("onAddPicBtnClick");
let _this = this;
uni.chooseImage({
count: this.count,
success(res) {
//console.log('chooseImage success res: ', res);
let tempFilePaths = res.tempFilePaths;
tempFilePaths.forEach((item, index) => {
_this.picsInner.push(item)
})
this.$emit("choose", _this.picsInner)
},
fail(res) {
console.log('chooseImage fail res: ', res);
},
complete(res) {
//.log('chooseImage complete res: ',res);
}
})
},
getPaths() {
let path = "";
let length = this.picsInner.length;
this.picsInner.forEach((item, index) => {
if (index == length - 1) {
path += item;
} else {
path += item + ",";
}
})
return path;
},
onImageClick(index) {
// let paths = this.getPaths();
// this.$emit("onImageClick", {
// index: index,
// paths: paths,
// })
uni.previewImage({
current: index,
urls: this.picsInner,
indicator: "number",
loop: true,
})
}
}
}
</script>
<style lang="scss">
.view-image-container {
display: flex;
margin-bottom: 2rpx;
position: relative;
}
.view-grid-pic {
width: 444rpx;
padding-bottom: 20rpx;
flex-wrap: wrap;
}
.image-grid-pic {
flex-shrink: 0;
display: flex;
width: 128rpx;
height: 128rpx;
margin-right: 16rpx;
margin-top: 16rpx;
// border: #ebebeb solid 1rpx;
border-radius: 24rpx;
}
.view-image-container::after {
border: none;
}
.image-add-pic-btn {
flex-shrink: 0;
margin-top: 16rpx;
width: 123rpx;
height: 123rpx;
padding: 4rpx;
border-radius: 24rpx;
}
.image-delete {
width: 32rpx;
height: 32rpx;
position: absolute;
top: 0rpx;
right: 0rpx;
}
</style>
\ No newline at end of file
{
"id": "f-add-image-grid",
"displayName": "f-add-image-grid",
"version": "1.0.0",
"description": "图片选择",
"keywords": [
"f-add-image-grid"
],
"repository": "http://git.guoguodz.com/tangfh/fashion-ui.git",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "u",
"app-nvue": "u",
"app-uvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "y",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
# f-add-image-grid
\ No newline at end of file
## 1.0.2(2024-05-30)
1.0.2
## 1.0.1(2024-05-28) ## 1.0.1(2024-05-28)
1.0.1 1.0.1
## 1.0.0(2024-05-28) ## 1.0.0(2024-05-28)
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
</template> </template>
<script> <script>
const AVATAR_DEFAULT = "/static/ic_avatar_default.png" const AVATAR_DEFAULT = "/static/f/ic_avatar_default.png"
export default { export default {
name: "f-image-01", name: "f-image-01",
data() { data() {
......
{ {
"id": "f-image-01", "id": "f-image-01",
"displayName": "f-image-01", "displayName": "f-image-01",
"version": "1.0.1", "version": "1.0.2",
"description": "f-image-01", "description": "f-image-01",
"keywords": [ "keywords": [
"f-image-01" "f-image-01"
......
## 1.0.4(2024-05-30)
1.0.4
## 1.0.3(2024-05-29) ## 1.0.3(2024-05-29)
1.0.3 1.0.3
## 1.0.2(2024-05-29) ## 1.0.2(2024-05-29)
......
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
}, },
closeIcon: { closeIcon: {
type: String, type: String,
default: "/static/icon-close.png" default: "/static/f/icon-close.png"
} }
}, },
mounted() { mounted() {
......
{ {
"id": "f-pop", "id": "f-pop",
"displayName": "f-pop", "displayName": "f-pop",
"version": "1.0.3", "version": "1.0.4",
"description": "f-pop 插件(底部弹出,中间弹出,顶部弹出)", "description": "f-pop 插件(底部弹出,中间弹出,顶部弹出)",
"keywords": [ "keywords": [
"f-pop" "f-pop"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment