diff --git a/pages/my/new-serv.vue b/pages/my/new-serv.vue index f1165cc..32f0260 100644 --- a/pages/my/new-serv.vue +++ b/pages/my/new-serv.vue @@ -50,21 +50,21 @@ - - - - - - - - - - - + + + + + + + + + + + @@ -73,7 +73,7 @@ - - - - + + - - - - - + + + + - - - - 商品单位* - - - - - 附加服务 - - + + + + 商品单位* + + + + + 附加服务 + + @@ -132,10 +133,10 @@ 区域描述 - - - + + + - + + + @@ -268,7 +271,11 @@ descImgList: [], coverImgList: [], videoList: [] - }, + }, + url2Crop: '', + cropWidth: 200, + cropHeight: 300, + curImgListField: '', categoryList: [], categoryMultiIndex: [0, 0], regionList: [], @@ -289,13 +296,13 @@ }, { code: 5, name: '平方' - }], - servHonorTitle: [{ - code: -1, - name: '无' - }, { - code: 1, - name: '金牌服务' + }], + servHonorTitle: [{ + code: -1, + name: '无' + }, { + code: 1, + name: '金牌服务' }], productProtectTimes: [{ code: 1, @@ -306,9 +313,9 @@ }, { code: 3, name: '45天' - }], - curUserInfo: {}, - bankCard: null, + }], + curUserInfo: {}, + bankCard: null, certifyInfo: null } }, @@ -320,46 +327,46 @@ this.loadData(goodId); }, methods: { - async loadData(goodId) { - this.curUserInfo = this.$request.getCurUserInfo(); + async loadData(goodId) { + this.curUserInfo = this.$request.getCurUserInfo(); this.checkBankAndCertify(); this.loadCategoryList(); this.loadRegionList(); // TODO 如果存在goodId说明是修改，需要查询good信息进行回显 // this.categoryList = await this.$api.data('categoryList'); // this.regionList = await this.$api.data('regionList'); - }, - async checkBankAndCertify() { - // 查询账户绑定信息 - // let bankCardRes = await this.$request.getBindBankCardByWorkerId({ - // workerId: this.curUserInfo.workerId - // }); - // this.bankCard = bankCardRes.data; - // 查询实名信息 - let certifyInfoRes = await this.$request.getWorkerCertify(); - this.certifyInfo = certifyInfoRes.data; - // if (!this.bankCard || !this.bankCard.bankNum) { - // this.$refs.vertifyBankBind.showModal(); - // return false; - if (!this.certifyInfo || !this.certifyInfo.workerCertificationId) { - this.$refs.vertifyCertify.showModal(); - return false; - } - return true; + }, + async checkBankAndCertify() { + // 查询账户绑定信息 + // let bankCardRes = await this.$request.getBindBankCardByWorkerId({ + // workerId: this.curUserInfo.workerId + // }); + // this.bankCard = bankCardRes.data; + // 查询实名信息 + let certifyInfoRes = await this.$request.getWorkerCertify(); + this.certifyInfo = certifyInfoRes.data; + // if (!this.bankCard || !this.bankCard.bankNum) { + // this.$refs.vertifyBankBind.showModal(); + // return false; + if (!this.certifyInfo || !this.certifyInfo.workerCertificationId) { + this.$refs.vertifyCertify.showModal(); + return false; + } + return true; }, async loadCategoryList(idArr) { - let typeList = await this.$request.listByStep({ - type: 1 + let typeList = await this.$request.listByStep({ + type: 1 }); typeList = typeList.data; let col1Id = idArr ? idArr[0] : typeList[0].goodsCategoryId; - let subTypeList = await this.$request.listByStep({ + let subTypeList = await this.$request.listByStep({ type: 1, goodsCategoryId: col1Id }); subTypeList = subTypeList.data; let col2Id = idArr ? idArr[1] : subTypeList[0].goodsCategoryId; - let subSubTypeList = await this.$request.listByStep({ + let subSubTypeList = await this.$request.listByStep({ type: 1, goodsCategoryId: col2Id }); @@ -390,7 +397,7 @@ this.formData.category = chosenCategory; // 查询最后一级品类 - let res = await this.$request.listByStep({ + let res = await this.$request.listByStep({ type: 1, goodsCategoryId: chosenCategory[chosenCategory.length - 1].goodsCategoryId }); @@ -400,12 +407,12 @@ let colObj = e.detail; // if (colObj.column == 0) { // // 通过一级查询二级，通过二级查三级 - // let subTypeList = await this.$request.listByStep({ + // let subTypeList = await this.$request.listByStep({ // type: 1, // goodsCategoryId: this.categoryList[0][colObj.value].goodsCategoryId // }); // subTypeList = subTypeList.data; - // let subSubTypeList = await this.$request.listByStep({ + // let subSubTypeList = await this.$request.listByStep({ // type: 1, // goodsCategoryId: subTypeList[0].goodsCategoryId // }); @@ -415,10 +422,10 @@ // this.categoryList.push(subTypeList); // this.categoryList.push(subSubTypeList); // this.categoryMultiIndex = [colObj.value, 0, 0]; - // } else + // } else if (colObj.column == 0) { // 通过二级查三级 - let subSubTypeList = await this.$request.listByStep({ + let subSubTypeList = await this.$request.listByStep({ type: 1, goodsCategoryId: this.categoryList[0][colObj.value].goodsCategoryId }); @@ -481,27 +488,37 @@ } } }, - chooseImgList(e, imgListField) { + chooseImgList(e, imgListField, cropWidth, cropHeight) { + this.cropWidth = cropWidth && cropWidth > 0 ? cropWidth : 200; + this.cropHeight = cropHeight && cropHeight > 0 ? cropHeight : 300; uni.chooseImage({ - count: 9, //默认9 + count: 1, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 sourceType: ['album'], //从相册选择 success: (res) => { - uni.showLoading({ - title: '上传中', - mask: true - }); - res.tempFilePaths.forEach((tmpUrl, index) => { - this.$request.uploadFile(tmpUrl).then((url) => { - this.formData[imgListField].push(url); - if (index === res.tempFilePaths.length - 1) { - uni.hideLoading(); - } - }); + res.tempFilePaths.forEach((tmpUrl, index) => { + this.url2Crop = tmpUrl; + this.curImgListField = imgListField; }); } }); }, + onok(ev) { + uni.showLoading({ + title: '上传中', + mask: true + }); + this.$request.uploadFile(ev.path).then((url) => { + this.formData[this.curImgListField].push(url); + uni.hideLoading(); + }); + // url设置为空，隐藏控件 + this.url2Crop = ""; + }, + oncancel() { + // url设置为空，隐藏控件 + this.url2Crop = ""; + }, viewImage(e, imgList) { uni.previewImage({ urls: imgList, @@ -521,18 +538,18 @@ } }) }, - chooseVideo() { + chooseVideo() { let _this = this; uni.chooseVideo({ sourceType: ['camera', 'album'], - success: function(res) { - uni.showLoading({ - title: '上传中', - mask: true - }); - _this.$request.uploadFile(res.tempFilePath).then((url) => { - uni.hideLoading(); - _this.formData.videoList.push(url); + success: function(res) { + uni.showLoading({ + title: '上传中', + mask: true + }); + _this.$request.uploadFile(res.tempFilePath).then((url) => { + uni.hideLoading(); + _this.formData.videoList.push(url); }); } }); @@ -544,89 +561,89 @@ // }); // this.formData.video = await this.$request.uploadFile(e.tempFilePaths[0]); // uni.hideLoading(); - // }, - validData(data) { - let errMsg = ""; - if (!data.servName) { - errMsg = '服务名称不能为空'; - } else if (!data.goodsStandardList || !data.goodsStandardList.length) { - errMsg = '至少选择一个规格'; - } else if (!this.validSpecData(data.goodsStandardList)) { - return false; - } else if (!data.goodsUnit) { - errMsg = '商品单位不能为空'; - } else if (!data.goodsAreaList || !data.goodsAreaList.length) { - errMsg = '至少选择一个上架区域'; - } else if (!data.coverImgList || !data.coverImgList.length) { - errMsg = '封面图不能为空' - } else if (!data.descImgList || !data.descImgList.length) { - errMsg = '详情图不能为空' - } else if (!data.imgList || !data.imgList.length) { - errMsg = '轮播图不能为空' - } - if (errMsg) { - uni.showToast({ - icon: 'none', - title: errMsg - }) - return false; - } - return true; - }, - validSpecData(goodsStandardList) { - let errMsg = ""; - for (let i = 0; i < goodsStandardList.length; i++) { - let spec = goodsStandardList[i]; - if (!spec.goodsStandardName) { - errMsg = '勾选规格的自编辑购买标题不能为空'; - } else if (!spec.goodsPrice) { - errMsg = '勾选规格的价格不能为空'; - } else if (!spec.groupPrice) { - errMsg = '勾选规格的团购价不能为空'; - } else if (!spec.goodsNum) { - errMsg = '勾选规格的库存不能为空'; - } - if (errMsg) { - uni.showToast({ - icon: 'none', - title: errMsg - }) - break; - } - } - if (errMsg) { - return false; - } - return true; + // }, + validData(data) { + let errMsg = ""; + if (!data.servName) { + errMsg = '服务名称不能为空'; + } else if (!data.goodsStandardList || !data.goodsStandardList.length) { + errMsg = '至少选择一个规格'; + } else if (!this.validSpecData(data.goodsStandardList)) { + return false; + } else if (!data.goodsUnit) { + errMsg = '商品单位不能为空'; + } else if (!data.goodsAreaList || !data.goodsAreaList.length) { + errMsg = '至少选择一个上架区域'; + } else if (!data.coverImgList || !data.coverImgList.length) { + errMsg = '封面图不能为空' + } else if (!data.descImgList || !data.descImgList.length) { + errMsg = '详情图不能为空' + } else if (!data.imgList || !data.imgList.length) { + errMsg = '轮播图不能为空' + } + if (errMsg) { + uni.showToast({ + icon: 'none', + title: errMsg + }) + return false; + } + return true; }, - async submit() { - let goodsStandardList = this.formData.specsList.filter((item) => { - if (item.checked) { - return { - ...item - } - } - }); - let goodsAreaList = this.formData.districtList.filter((item) => { - if (item.checked) { - item.countryAreaId = item.areaId; - return item; - } - }); - let data2Valid = { - ...this.formData, - goodsStandardList: goodsStandardList, - goodsAreaList: goodsAreaList - } - if (!this.validData(data2Valid)) { - return; - } - - let checkRes = await this.checkBankAndCertify(); - if (!checkRes) { - return; - } - + validSpecData(goodsStandardList) { + let errMsg = ""; + for (let i = 0; i < goodsStandardList.length; i++) { + let spec = goodsStandardList[i]; + if (!spec.goodsStandardName) { + errMsg = '勾选规格的自编辑购买标题不能为空'; + } else if (!spec.goodsPrice) { + errMsg = '勾选规格的价格不能为空'; + } else if (!spec.groupPrice) { + errMsg = '勾选规格的团购价不能为空'; + } else if (!spec.goodsNum) { + errMsg = '勾选规格的库存不能为空'; + } + if (errMsg) { + uni.showToast({ + icon: 'none', + title: errMsg + }) + break; + } + } + if (errMsg) { + return false; + } + return true; + }, + async submit() { + let goodsStandardList = this.formData.specsList.filter((item) => { + if (item.checked) { + return { + ...item + } + } + }); + let goodsAreaList = this.formData.districtList.filter((item) => { + if (item.checked) { + item.countryAreaId = item.areaId; + return item; + } + }); + let data2Valid = { + ...this.formData, + goodsStandardList: goodsStandardList, + goodsAreaList: goodsAreaList + } + if (!this.validData(data2Valid)) { + return; + } + + let checkRes = await this.checkBankAndCertify(); + if (!checkRes) { + return; + } + // 0是轮播图，1是详情图 let goodsImgsList = []; this.formData.imgList.forEach((url) => { @@ -640,12 +657,12 @@ imgUrl: url, imgType: 1 }); - }); - let goodsVideoUrl = this.formData.videoList.length ? this.formData.videoList[0] : ''; - + }); + let goodsVideoUrl = this.formData.videoList.length ? this.formData.videoList[0] : ''; + let params = { - goodsName: this.formData.servName, - goodsDesc: this.formData.servDesc, + goodsName: this.formData.servName, + goodsDesc: this.formData.servDesc, goodsUnit: this.formData.goodsUnit, deptGoodsCategoryId: this.formData.category[this.formData.category.length - 1].goodsCategoryId, goodsStandardList: goodsStandardList, @@ -661,8 +678,8 @@ uni.showToast({ icon: 'success' }) - uni.reLaunch({ - url: '/pages/index/index?menuCode=supplyChainPage' + uni.reLaunch({ + url: '/pages/index/index?menuCode=supplyChainPage' }) } } @@ -682,9 +699,9 @@ .long-btn { width: 95%; - } - - .form-val-area { - flex-basis: 75% !important; + } + + .form-val-area { + flex-basis: 75% !important; } diff --git a/uni_modules/ksp-cropper/changelog.md b/uni_modules/ksp-cropper/changelog.md new file mode 100644 index 0000000..9baa9f8 --- /dev/null +++ b/uni_modules/ksp-cropper/changelog.md @@ -0,0 +1,18 @@ +## 1.1.5（2022-06-14） +填新版HBuilderX的坑，简单测试是没问题了。 +## 1.1.4（2022-02-15） +修护ios下微信小程序第一次裁剪的bug +## 1.1.3（2022-02-10） +修护APP点击无效的bug +## 1.1.2（2022-01-24） +优化一些细节 +## 1.1.1（2022-01-19） +更新示例项目 +## 1.1.0（2022-01-18） +新增旋转功能 +## 1.0.2（2022-01-13） +修护mode="fixed"模式无效的bug +## 1.0.1（2021-12-20） +修护IOS下，小程序点击没反应的bug +## 1.0.0（2021-12-06） +图片裁剪工具 diff --git a/uni_modules/ksp-cropper/components/ksp-cropper/ksp-cropper.vue b/uni_modules/ksp-cropper/components/ksp-cropper/ksp-cropper.vue new file mode 100644 index 0000000..1e4b4b6 --- /dev/null +++ b/uni_modules/ksp-cropper/components/ksp-cropper/ksp-cropper.vue @@ -0,0 +1,971 @@ + + + + + + diff --git a/uni_modules/ksp-cropper/package.json b/uni_modules/ksp-cropper/package.json new file mode 100644 index 0000000..aa6a1dc --- /dev/null +++ b/uni_modules/ksp-cropper/package.json @@ -0,0 +1,84 @@ +{ + "id": "ksp-cropper", + "displayName": "ksp-cropper", + "version": "1.1.5", + "description": "高性能图片裁剪工具", + "keywords": [ + "头像", + "图片", + "裁剪" +], + "repository": "", + "engines": { + "HBuilderX": "^3.1.0" + }, + "dcloudext": { + "category": [ + "前端组件", + "通用组件" + ], + "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" + }, + "client": { + "Vue": { + "vue2": "y", + "vue3": "y" + }, + "App": { + "app-vue": "y", + "app-nvue": "u" + }, + "H5-mobile": { + "Safari": "y", + "Android Browser": "y", + "微信浏览器(Android)": "y", + "QQ浏览器(Android)": "y" + }, + "H5-pc": { + "Chrome": "u", + "IE": "u", + "Edge": "u", + "Firefox": "u", + "Safari": "u" + }, + "小程序": { + "微信": { + "minVersion": "2.9.0" + }, + "阿里": "n", + "百度": "n", + "字节跳动": "n", + "QQ": "u" + }, + "快应用": { + "华为": "u", + "联盟": "u" + } + } + } + } +} \ No newline at end of file diff --git a/uni_modules/ksp-cropper/readme.md b/uni_modules/ksp-cropper/readme.md new file mode 100644 index 0000000..ecd3066 --- /dev/null +++ b/uni_modules/ksp-cropper/readme.md @@ -0,0 +1,73 @@ +# ksp-cropper + +## 高性能图片裁剪工具 + +### 属性说明 +|属性 |类型 |默认 |备注 | +| :--------: | :-----: | :----: | :----: | +| url |String | "" | 需要裁剪的图片路径，为空时控件隐藏，不为空时控件显示| +| mode |String | "free" | 裁剪模式| +| width |Number | 200 | 图片裁剪后的宽度，固定大小时有效| +| height |Number | 200 | 图片裁剪后的高度，固定大小时有效| +| maxWidth |Number | 1024 | 图片裁剪后的最大宽度 | +| maxHeight |Number | 1024 | 图片裁剪后的最大高度 | + +### mode有效值 + +| 模式 |值 |说明 | +| :-----: | :-----: | :----: | +| 固定模式 |fixed | 裁剪出指定大小的图片，一般用于头像上传 | +| 等比缩放 |ratio | 限定宽高比，裁剪大小不固定 | +| 自由模式 |free | 不限定宽高比，裁剪大小不固定 | + +### 事件说明 +|事件名称 |说明 |返回 | +| :--------: | :-----: | :----: | +| ok |点击确定按钮 | e:{path} | +| cancel |点击取消按钮 | - | + + +### 示例 + +```html + + + + +``` \ No newline at end of file