增加 头像上传功能

.gitignore

@@ -1,17 +1 @@
-# 忽略所有 .map 文件
-*.map
-
-# 忽略所有 .js 文件（如果你不想提交编译后的 JS 文件）
-*.js
-
-# 忽略所有 .json 文件（如果你不想提交某些 JSON 文件）
-*.json
-
-# 忽略 dist 目录（通常编译后的文件会放在 dist 目录中）
-dist/
-
-# 忽略 node_modules 目录
-node_modules/
-
-# 忽略 HBuilderX 生成的 unpackage 目录
-.DS_Store
+unpackage/

pages.json

@@ -60,7 +60,7 @@
 		{
 			"path": "pages/user/mine",
 			"style": {
-				"navigationBarTitleText": "我的"
+				"navigationBarTitleText": "裁剪demo"
 			}
 		},
 		{

pages/user/mine.vue

@@ -1,44 +1,24 @@
 <template>
-    <view class="mine">
-        <!-- main -->
-        <view class="main">
-            <!-- header -->
-            <view class="header">
-                <view class="avatar">
-                    <u-avatar :src="src" size="80"></u-avatar>
-                </view>
-                <view class="edit-mine">
-                    <u-button shape="circle" :customStyle="{width: '280rpx', color: '#6049a9', borderColor:'#6049a9'}" @click="onEdit">编辑资料</u-button>
-                </view>
-            </view>
-
-            <!-- numberinfo -->
-            <view class="numberinfo">
-                <view class="nickname">
-                    <text>昵称：微信用户</text>
-                    <u-icon name="woman" color="#2979ff" size="26"></u-icon>
-                </view>
-                <view class="phone">
-                    <text>16698592316</text>
-                </view>
-                <view class="id-box">
-                    <text>ID 1858708950943834113</text>
-                    <u-icon name="file-text" color="#2979ff" size="35"></u-icon>
-                </view>
-            </view>
-            <!-- actions -->
-            <view class="actions">
-                <u-grid :col="3" :border="false" >
-                    <u-grid-item v-for="index in 4" :key="index" :customStyle="gridStyle">
-                        <view class="button-item" style="background-color: #FFC0CB;">
-                            <u-icon name="file-text" size="40" color="#fff"></u-icon>
-                            <text class="button-text">个人资料</text>
-                        </view>
-                    </u-grid-item>
-                </u-grid>
-            </view>
+    <view class="container">
+        <button @click="chooseImage">选择图片</button>
+        <view class="canvas-container" v-if="imagePath">
+            <canvas canvas-id="imageCanvas"
+                :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
+            <view :class="[
+                'crop-area',
+                cropShape === 'circle' ? 'circle' : 'rectangle'
+            ]" :style="{
+            left: cropX + 'px',
+            top: cropY + 'px',
+            width: cropWidth + 'px',
+            height: cropHeight + 'px'
+        }" @touchstart="startDrag" @touchmove="drag" @touchend="endDrag"></view>
+        </view>
+        <view class="button-group">
+            <button @click="changeCropShape">切换裁剪形状</button>
+            <button @click="resetCanvas">重置画布</button>
+            <button @click="cropImage">裁剪图片</button>
         </view>
-
     </view>
 </template>
 
@@ -46,87 +26,148 @@
 export default {
     data() {
         return {
-            src: require("../../static/logo.png"),
-        }
-    },
-    computed: {
-        gridStyle() {
-            return {
-                height: '240rpx', 
-                padding: '15rpx 20rpx 15rpx 0', 
-            }
-        },
+            imagePath: '',
+            canvasWidth: 300,
+            canvasHeight: 300,
+            cropX: 50,
+            cropY: 50,
+            cropWidth: 200,
+            cropHeight: 200,
+            cropShape: 'rectangle',
+            isDragging: false,
+            startX: 0,
+            startY: 0
+        };
     },
     methods: {
-        onEdit() {
-           	uni.navigateTo({
-        		url: '/pages/user/info',
-        	})
-        }
-    }
-
-}
-</script>
+        chooseImage() {
+            uni.chooseImage({
+                count: 1,
+                success: (res) => {
+                    this.imagePath = res.tempFilePaths[0];
+                    this.drawImageOnCanvas();
+                }
+            });
+        },
+        drawImageOnCanvas() {
+            const ctx = uni.createCanvasContext('imageCanvas', this);
+            ctx.drawImage(this.imagePath, 0, 0, this.canvasWidth, this.canvasHeight);
+            ctx.draw();
+        },
+        startDrag(e) {
+            this.isDragging = true;
+            this.startX = e.touches[0].clientX;
+            this.startY = e.touches[0].clientY;
+        },
+        drag(e) {
+            if (this.isDragging) {
+                const deltaX = e.touches[0].clientX - this.startX;
+                const deltaY = e.touches[0].clientY - this.startY;
+                let newX = this.cropX + deltaX;
+                let newY = this.cropY + deltaY;
 
-<style scoped lang="scss">
-    .mine {
-        position: relative;
-        height: 100vh;
-        overflow: hidden;
-        .main {
-            padding: 40rpx;
-            .header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 30rpx 0;
-                .avatar {
+                // 限制裁剪区域不超出图片范围
+                newX = Math.max(0, Math.min(newX, this.canvasWidth - this.cropWidth));
+                newY = Math.max(0, Math.min(newY, this.canvasHeight - this.cropHeight));
 
-                }
+                this.cropX = newX;
+                this.cropY = newY;
+                this.startX = e.touches[0].clientX;
+                this.startY = e.touches[0].clientY;
             }
-            .numberinfo {
-                .nickname {
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: center;
-                    text {
-                        font-size: 40rpx;
-                        font-weight: bold;
-                        margin: 20rpx 20rpx 20rpx 0;
-                    }
-                }
-                .phone {
-                    font-size: 28rpx;
-                    margin: 10rpx 0;
-                }
-                .id-box {
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: center;
-                    text {
-                        font-size: 28rpx;
-                        margin-right: 20rpx;
-                    }
-                }
-            }
-            .actions {
-                margin-top: 20rpx;
-                .button-item {
-                    height: 100%;
-                    width: 100%;
-                    padding: 10rpx 0;
-                    display: flex;
-                    justify-content: space-around;
-                    align-items: center;
-                    flex-direction: column;
-                    border-radius: 10rpx;
-                    .button-text {
-                        font-weight: bold;
-                        font-size: 30rpx;
-                        color: $uni-color-subtitle;
+        },
+        endDrag() {
+            this.isDragging = false;
+        },
+        changeCropShape() {
+            this.cropShape = this.cropShape === 'rectangle' ? 'circle' : 'rectangle';
+        },
+        resetCanvas() {
+            this.cropX = 50;
+            this.cropY = 50;
+            this.cropWidth = 200;
+            this.cropHeight = 200;
+            this.cropShape = 'rectangle';
+            this.drawImageOnCanvas();
+        },
+        cropImage() {
+            if (this.cropShape === 'rectangle') {
+                uni.canvasToTempFilePath({
+                    canvasId: 'imageCanvas',
+                    x: this.cropX,
+                    y: this.cropY,
+                    width: this.cropWidth,
+                    height: this.cropHeight,
+                    success: (res) => {
+                        console.log('裁剪后的图片路径:', res.tempFilePath);
+                        uni.previewImage({
+                            urls: [res.tempFilePath]
+                        });
+                    },
+                    fail: (err) => {
+                        console.error('裁剪失败:', err);
                     }
-                }
+                }, this);
+            } else {
+                const ctx = uni.createCanvasContext('imageCanvas', this);
+                const centerX = this.cropX + this.cropWidth / 2;
+                const centerY = this.cropY + this.cropHeight / 2;
+                const radius = Math.min(this.cropWidth, this.cropHeight) / 2;
+
+                ctx.save();
+                ctx.beginPath();
+                ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+                ctx.clip();
+                ctx.drawImage(this.imagePath, 0, 0, this.canvasWidth, this.canvasHeight);
+                ctx.restore();
+
+                ctx.draw(false, () => {
+                    uni.canvasToTempFilePath({
+                        canvasId: 'imageCanvas',
+                        x: centerX - radius,
+                        y: centerY - radius,
+                        width: 2 * radius,
+                        height: 2 * radius,
+                        success: (res) => {
+                            console.log('裁剪后的图片路径:', res.tempFilePath);
+                            uni.previewImage({
+                                urls: [res.tempFilePath]
+                            });
+                        },
+                        fail: (err) => {
+                            console.error('裁剪失败:', err);
+                        }
+                    }, this);
+                });
             }
         }
     }
+};
+</script>
+
+<style scoped>
+.container {
+    padding: 20px;
+}
+
+.canvas-container {
+    position: relative;
+    margin-top: 20px;
+}
+
+.crop-area {
+    position: absolute;
+    border: 2px dashed blue;
+    box-sizing: border-box;
+}
+
+.circle {
+    border-radius: 50%;
+}
+
+.button-group {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-around;
+}
 </style>

store/modules/token.js

@@ -0,0 +1,2 @@
+ const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySW5mbyI6IntcIklkXCI6MTA3LFwiUGhvbmVcIjpcIjE4Mjc3NDI2NzEyXCIsXCJBcHBJZFwiOlwid3gwMGYzNWZkMDc5OTI2NDliXCJ9IiwiRXhwIjoiMTc0NTM5MDMwMSIsIm5iZiI6MTc0Mjc5ODMwMSwiZXhwIjoxNzQ1MzkwMzAxLCJhdWQiOiJTaGFwaW5nQXVkaWVuY2UifQ.PdLiC3O-Aio2wzobgIbu00l3j7oVI7Vg9k-qNAooiNE'
+ export default token

unpackage/dist/dev/mp-weixin/node-modules/uview-ui/components/u-grid-item/u-grid-item.js

@@ -1,11 +1 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["node-modules/uview-ui/components/u-grid-item/u-grid-item"],{404:function(t,e,n){"use strict";n.r(e);var r=n(405),i=n(407);for(var a in i)["default"].indexOf(a)<0&&function(t){n.d(e,t,(function(){return i[t]}))}(a);n(410);var u,o=n(32),c=Object(o["default"])(i["default"],r["render"],r["staticRenderFns"],!1,null,"99a45d26",null,!1,r["components"],u);c.options.__file="node_modules/uview-ui/components/u-grid-item/u-grid-item.vue",e["default"]=c.exports},405:function(t,e,n){"use strict";n.r(e);var r=n(406);n.d(e,"render",(function(){return r["render"]})),n.d(e,"staticRenderFns",(function(){return r["staticRenderFns"]})),n.d(e,"recyclableRender",(function(){return r["recyclableRender"]})),n.d(e,"components",(function(){return r["components"]}))},406:function(t,e,n){"use strict";var r;n.r(e),n.d(e,"render",(function(){return i})),n.d(e,"staticRenderFns",(function(){return u})),n.d(e,"recyclableRender",(function(){return a})),n.d(e,"components",(function(){return r}));var i=function(){var t=this,e=t.$createElement,n=(t._self._c,t.__get_style([t.itemStyle]));t.$mp.data=Object.assign({},{$root:{s0:n}})},a=!1,u=[];i._withStripped=!0},407:function(t,e,n){"use strict";n.r(e);var r=n(408),i=n.n(r);for(var a in r)["default"].indexOf(a)<0&&function(t){n.d(e,t,(function(){return r[t]}))}(a);e["default"]=i.a},408:function(t,e,n){"use strict";(function(t){var r=n(4);Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var i=r(n(56)),a=r(n(58)),u=r(n(409)),o={name:"u-grid-item",mixins:[t.$u.mpMixin,t.$u.mixin,u.default],data:function(){return{parentData:{col:3,border:!0},classes:[]}},mounted:function(){this.init()},computed:{width:function(){return 100/Number(this.parentData.col)+"%"},itemStyle:function(){var e={background:this.bgColor,width:this.width};return t.$u.deepMerge(e,t.$u.addStyle(this.customStyle))}},methods:{init:function(){var e=this;t.$on("$uGridItem",(function(){e.gridItemClasses()})),this.updateParentData(),t.$emit("$uGridItem"),this.gridItemClasses()},updateParentData:function(){this.getParentData("u-grid")},clickHandler:function(){var t,e=this,n=this.name,r=null===(t=this.parent)||void 0===t?void 0:t.children;r&&null===this.name&&(n=r.findIndex((function(t){return t===e}))),this.parent&&this.parent.childClick(n),this.$emit("click",n)},getItemWidth:function(){var t=this;return(0,a.default)(i.default.mark((function e(){var n,r;return i.default.wrap((function(e){while(1)switch(e.prev=e.next){case 0:if(n=0,!t.parent){e.next=6;break}return e.next=4,t.getParentWidth();case 4:r=e.sent,n=r/Number(t.parentData.col)+"px";case 6:t.width=n;case 7:case"end":return e.stop()}}),e)})))()},getParentWidth:function(){},gridItemClasses:function(){var t=this;if(this.parentData.border){var e=[];this.parent.children.map((function(n,r){if(t===n){var i=t.parent.children.length;(r+1)%t.parentData.col!==0&&r+1!==i&&e.push("u-border-right");var a=i%t.parentData.col===0?t.parentData.col:i%t.parentData.col;r<i-a&&e.push("u-border-bottom")}})),this.classes=e}}},beforeDestroy:function(){t.$off("$uGridItem")}};e.default=o}).call(this,n(2)["default"])},410:function(t,e,n){"use strict";n.r(e);var r=n(411),i=n.n(r);for(var a in r)["default"].indexOf(a)<0&&function(t){n.d(e,t,(function(){return r[t]}))}(a);e["default"]=i.a},411:function(t,e,n){}}]);
-//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/node-modules/uview-ui/components/u-grid-item/u-grid-item.js.map
-;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([
-    'node-modules/uview-ui/components/u-grid-item/u-grid-item-create-component',
-    {
-        'node-modules/uview-ui/components/u-grid-item/u-grid-item-create-component':(function(module, exports, __webpack_require__){
-            __webpack_require__('2')['createComponent'](__webpack_require__(404))
-        })
-    },
-    [['node-modules/uview-ui/components/u-grid-item/u-grid-item-create-component']]
-]);
+Component({})

unpackage/dist/dev/mp-weixin/node-modules/uview-ui/components/u-grid/u-grid.js

@@ -1,11 +1 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["node-modules/uview-ui/components/u-grid/u-grid"],{396:function(t,e,n){"use strict";n.r(e);var r=n(397),i=n(399);for(var u in i)["default"].indexOf(u)<0&&function(t){n.d(e,t,(function(){return i[t]}))}(u);n(402);var c,a=n(32),o=Object(a["default"])(i["default"],r["render"],r["staticRenderFns"],!1,null,"50bc7b32",null,!1,r["components"],c);o.options.__file="node_modules/uview-ui/components/u-grid/u-grid.vue",e["default"]=o.exports},397:function(t,e,n){"use strict";n.r(e);var r=n(398);n.d(e,"render",(function(){return r["render"]})),n.d(e,"staticRenderFns",(function(){return r["staticRenderFns"]})),n.d(e,"recyclableRender",(function(){return r["recyclableRender"]})),n.d(e,"components",(function(){return r["components"]}))},398:function(t,e,n){"use strict";var r;n.r(e),n.d(e,"render",(function(){return i})),n.d(e,"staticRenderFns",(function(){return c})),n.d(e,"recyclableRender",(function(){return u})),n.d(e,"components",(function(){return r}));var i=function(){var t=this,e=t.$createElement,n=(t._self._c,t.__get_style([t.gridStyle]));t.$mp.data=Object.assign({},{$root:{s0:n}})},u=!1,c=[];i._withStripped=!0},399:function(t,e,n){"use strict";n.r(e);var r=n(400),i=n.n(r);for(var u in r)["default"].indexOf(u)<0&&function(t){n.d(e,t,(function(){return r[t]}))}(u);e["default"]=i.a},400:function(t,e,n){"use strict";(function(t){var r=n(4);Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var i=r(n(401)),u={name:"u-grid",mixins:[t.$u.mpMixin,t.$u.mixin,i.default],data:function(){return{index:0,width:0}},watch:{parentData:function(){this.children.length&&this.children.map((function(t){"function"==typeof t.updateParentData&&t.updateParentData()}))}},created:function(){this.children=[]},computed:{parentData:function(){return[this.hoverClass,this.col,this.size,this.border]},gridStyle:function(){var e={};switch(this.align){case"left":e.justifyContent="flex-start";break;case"center":e.justifyContent="center";break;case"right":e.justifyContent="flex-end";break;default:e.justifyContent="flex-start"}return t.$u.deepMerge(e,t.$u.addStyle(this.customStyle))}},methods:{childClick:function(t){this.$emit("click",t)}}};e.default=u}).call(this,n(2)["default"])},402:function(t,e,n){"use strict";n.r(e);var r=n(403),i=n.n(r);for(var u in r)["default"].indexOf(u)<0&&function(t){n.d(e,t,(function(){return r[t]}))}(u);e["default"]=i.a},403:function(t,e,n){}}]);
-//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/node-modules/uview-ui/components/u-grid/u-grid.js.map
-;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([
-    'node-modules/uview-ui/components/u-grid/u-grid-create-component',
-    {
-        'node-modules/uview-ui/components/u-grid/u-grid-create-component':(function(module, exports, __webpack_require__){
-            __webpack_require__('2')['createComponent'](__webpack_require__(396))
-        })
-    },
-    [['node-modules/uview-ui/components/u-grid/u-grid-create-component']]
-]);
+Component({})

unpackage/dist/dev/mp-weixin/pages/skin-assessment/croppedImage.js

@@ -1,2 +1,2 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["pages/skin-assessment/croppedImage"],{220:function(e,n,t){"use strict";(function(e,n){var o=t(4);t(26);o(t(25));var r=o(t(221));e.__webpack_require_UNI_MP_PLUGIN__=t,n(r.default)}).call(this,t(1)["default"],t(2)["createPage"])},221:function(e,n,t){"use strict";t.r(n);var o=t(222),r=t(224);for(var c in r)["default"].indexOf(c)<0&&function(e){t.d(n,e,(function(){return r[e]}))}(c);t(226);var i,a=t(32),s=Object(a["default"])(r["default"],o["render"],o["staticRenderFns"],!1,null,"23853472",null,!1,o["components"],i);s.options.__file="pages/skin-assessment/croppedImage.vue",n["default"]=s.exports},222:function(e,n,t){"use strict";t.r(n);var o=t(223);t.d(n,"render",(function(){return o["render"]})),t.d(n,"staticRenderFns",(function(){return o["staticRenderFns"]})),t.d(n,"recyclableRender",(function(){return o["recyclableRender"]})),t.d(n,"components",(function(){return o["components"]}))},223:function(e,n,t){"use strict";var o;t.r(n),t.d(n,"render",(function(){return r})),t.d(n,"staticRenderFns",(function(){return i})),t.d(n,"recyclableRender",(function(){return c})),t.d(n,"components",(function(){return o}));var r=function(){var e=this,n=e.$createElement;e._self._c},c=!1,i=[];r._withStripped=!0},224:function(e,n,t){"use strict";t.r(n);var o=t(225),r=t.n(o);for(var c in o)["default"].indexOf(c)<0&&function(e){t.d(n,e,(function(){return o[e]}))}(c);n["default"]=r.a},225:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=function(){Promise.all([t.e("common/vendor"),t.e("components/xiaogang-crop/index")]).then(function(){return resolve(t(375))}.bind(null,t)).catch(t.oe)},r=function(){Promise.all([t.e("common/vendor"),t.e("components/yq-avatar/yq-avatar")]).then(function(){return resolve(t(382))}.bind(null,t)).catch(t.oe)},c={data:function(){return{webUrl:"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxab7b8b9509e1d137&redirect_uri=https://id.ssjlai.com/telpoaiopsweb?appid=wxab7b8b9509e1d137&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect",uurls:["../../static/logo.png","../../static/logo.png"],cropImgPath:"",isShow:!1}},computed:{imageUrl:function(){return this.$store.state.user.photoPath}},onLoad:function(){this.isShow=!0},methods:{onMessage:function(e){console.log("收到消息",e.detail.data)},cropCompleted:function(e){console.log("e",e.tempFilePath),this.cropImgPath=e.tempFilePath},cropCancel:function(){},myUpload:function(e){this.$set(this.urls,e.index,e.path)},showCrop:function(){this.isShow=!0}},components:{avatar:r,imageCropping:o}};n.default=c},226:function(e,n,t){"use strict";t.r(n);var o=t(227),r=t.n(o);for(var c in o)["default"].indexOf(c)<0&&function(e){t.d(n,e,(function(){return o[e]}))}(c);n["default"]=r.a},227:function(e,n,t){}},[[220,"common/runtime","common/vendor"]]]);
+(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["pages/skin-assessment/croppedImage"],{220:function(e,n,t){"use strict";(function(e,n){var o=t(4);t(26);o(t(25));var r=o(t(221));e.__webpack_require_UNI_MP_PLUGIN__=t,n(r.default)}).call(this,t(1)["default"],t(2)["createPage"])},221:function(e,n,t){"use strict";t.r(n);var o=t(222),r=t(224);for(var c in r)["default"].indexOf(c)<0&&function(e){t.d(n,e,(function(){return r[e]}))}(c);t(226);var a,i=t(32),s=Object(i["default"])(r["default"],o["render"],o["staticRenderFns"],!1,null,"23853472",null,!1,o["components"],a);s.options.__file="pages/skin-assessment/croppedImage.vue",n["default"]=s.exports},222:function(e,n,t){"use strict";t.r(n);var o=t(223);t.d(n,"render",(function(){return o["render"]})),t.d(n,"staticRenderFns",(function(){return o["staticRenderFns"]})),t.d(n,"recyclableRender",(function(){return o["recyclableRender"]})),t.d(n,"components",(function(){return o["components"]}))},223:function(e,n,t){"use strict";var o;t.r(n),t.d(n,"render",(function(){return r})),t.d(n,"staticRenderFns",(function(){return a})),t.d(n,"recyclableRender",(function(){return c})),t.d(n,"components",(function(){return o}));var r=function(){var e=this,n=e.$createElement;e._self._c},c=!1,a=[];r._withStripped=!0},224:function(e,n,t){"use strict";t.r(n);var o=t(225),r=t.n(o);for(var c in o)["default"].indexOf(c)<0&&function(e){t.d(n,e,(function(){return o[e]}))}(c);n["default"]=r.a},225:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=function(){Promise.all([t.e("common/vendor"),t.e("components/xiaogang-crop/index")]).then(function(){return resolve(t(375))}.bind(null,t)).catch(t.oe)},r=function(){Promise.all([t.e("common/vendor"),t.e("components/yq-avatar/yq-avatar")]).then(function(){return resolve(t(382))}.bind(null,t)).catch(t.oe)},c={data:function(){return{webUrl:"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxab7b8b9509e1d137&redirect_uri=https://id.ssjlai.com/telpoaiopsweb?appid=wxab7b8b9509e1d137&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect",uurls:["../../static/logo.png","../../static/logo.png"],cropImgPath:"",isShow:!1}},computed:{imageUrl:function(){return this.$store.state.user.photoPath||"https://telpo-healthy.oss-cn-hangzhou.aliyuncs.com/healthy/knowledge/202503/91948f89ac494805a85b6605449c0366.png"}},onLoad:function(){this.isShow=!0},methods:{onMessage:function(e){console.log("收到消息",e.detail.data)},cropCompleted:function(e){console.log("e",e.tempFilePath),this.cropImgPath=e.tempFilePath},cropCancel:function(){},myUpload:function(e){this.$set(this.urls,e.index,e.path)},showCrop:function(){this.isShow=!0}},components:{avatar:r,imageCropping:o}};n.default=c},226:function(e,n,t){"use strict";t.r(n);var o=t(227),r=t.n(o);for(var c in o)["default"].indexOf(c)<0&&function(e){t.d(n,e,(function(){return o[e]}))}(c);n["default"]=r.a},227:function(e,n,t){}},[[220,"common/runtime","common/vendor"]]]);
 //# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/skin-assessment/croppedImage.js.map

unpackage/dist/dev/mp-weixin/pages/skin-assessment/croppedImage.wxml

@@ -1 +1 @@
-<view class="data-v-23853472"><view class="main data-v-23853472"></view><block wx:if="{{isShow}}"><image-cropping vue-id="4d21dad4-1" src="{{imageUrl}}" isFixedSize="{{true}}" ratioGroup="{{['4:3','1:1']}}" cropShape="circular" data-event-opts="{{[['^completed',[['cropCompleted']]],['^cancel',[['cropCancel']]]]}}" bind:completed="__e" bind:cancel="__e" class="data-v-23853472" bind:__l="__l"></image-cropping></block></view>
+<view class="data-v-23853472"><view class="main data-v-23853472"></view><block wx:if="{{isShow}}"><image-cropping vue-id="4d21dad4-1" src="{{imageUrl}}" isFixedSize="{{true}}" ratioGroup="{{['4:3','1:1']}}" data-event-opts="{{[['^completed',[['cropCompleted']]],['^cancel',[['cropCancel']]]]}}" bind:completed="__e" bind:cancel="__e" class="data-v-23853472" bind:__l="__l"></image-cropping></block></view>

unpackage/dist/dev/mp-weixin/pages/user/mine.js

@@ -1,2 +1,2 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["pages/user/mine"],{244:function(n,e,t){"use strict";(function(n,e){var r=t(4);t(26);r(t(25));var o=r(t(245));n.__webpack_require_UNI_MP_PLUGIN__=t,e(o.default)}).call(this,t(1)["default"],t(2)["createPage"])},245:function(n,e,t){"use strict";t.r(e);var r=t(246),o=t(248);for(var u in o)["default"].indexOf(u)<0&&function(n){t.d(e,n,(function(){return o[n]}))}(u);t(251);var i,c=t(32),d=Object(c["default"])(o["default"],r["render"],r["staticRenderFns"],!1,null,"7e5aa06e",null,!1,r["components"],i);d.options.__file="pages/user/mine.vue",e["default"]=d.exports},246:function(n,e,t){"use strict";t.r(e);var r=t(247);t.d(e,"render",(function(){return r["render"]})),t.d(e,"staticRenderFns",(function(){return r["staticRenderFns"]})),t.d(e,"recyclableRender",(function(){return r["recyclableRender"]})),t.d(e,"components",(function(){return r["components"]}))},247:function(n,e,t){"use strict";var r;t.r(e),t.d(e,"render",(function(){return o})),t.d(e,"staticRenderFns",(function(){return i})),t.d(e,"recyclableRender",(function(){return u})),t.d(e,"components",(function(){return r}));try{r={uAvatar:function(){return Promise.all([t.e("common/vendor"),t.e("node-modules/uview-ui/components/u-avatar/u-avatar")]).then(t.bind(null,359))},uButton:function(){return Promise.all([t.e("common/vendor"),t.e("node-modules/uview-ui/components/u-button/u-button")]).then(t.bind(null,261))},uIcon:function(){return Promise.all([t.e("common/vendor"),t.e("node-modules/uview-ui/components/u-icon/u-icon")]).then(t.bind(null,342))},uGrid:function(){return Promise.all([t.e("common/vendor"),t.e("node-modules/uview-ui/components/u-grid/u-grid")]).then(t.bind(null,396))},uGridItem:function(){return Promise.all([t.e("common/vendor"),t.e("node-modules/uview-ui/components/u-grid-item/u-grid-item")]).then(t.bind(null,404))}}}catch(c){if(-1===c.message.indexOf("Cannot find module")||-1===c.message.indexOf(".vue"))throw c;console.error(c.message),console.error("1. 排查组件名称拼写是否正确"),console.error("2. 排查组件是否符合 easycom 规范，文档：https://uniapp.dcloud.net.cn/collocation/pages?id=easycom"),console.error("3. 若组件不符合 easycom 规范，需手动引入，并在 components 中注册该组件")}var o=function(){var n=this,e=n.$createElement;n._self._c},u=!1,i=[];o._withStripped=!0},248:function(n,e,t){"use strict";t.r(e);var r=t(249),o=t.n(r);for(var u in r)["default"].indexOf(u)<0&&function(n){t.d(e,n,(function(){return r[n]}))}(u);e["default"]=o.a},249:function(n,e,t){"use strict";(function(n){Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var r={data:function(){return{src:t(250)}},computed:{gridStyle:function(){return{height:"240rpx",padding:"15rpx 20rpx 15rpx 0"}}},methods:{onEdit:function(){n.navigateTo({url:"/pages/user/info"})}}};e.default=r}).call(this,t(2)["default"])},251:function(n,e,t){"use strict";t.r(e);var r=t(252),o=t.n(r);for(var u in r)["default"].indexOf(u)<0&&function(n){t.d(e,n,(function(){return r[n]}))}(u);e["default"]=o.a},252:function(n,e,t){}},[[244,"common/runtime","common/vendor"]]]);
+(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["pages/user/mine"],{244:function(t,e,n){"use strict";(function(t,e){var i=n(4);n(26);i(n(25));var a=i(n(245));t.__webpack_require_UNI_MP_PLUGIN__=n,e(a.default)}).call(this,n(1)["default"],n(2)["createPage"])},245:function(t,e,n){"use strict";n.r(e);var i=n(246),a=n(248);for(var r in a)["default"].indexOf(r)<0&&function(t){n.d(e,t,(function(){return a[t]}))}(r);n(250);var c,s=n(32),o=Object(s["default"])(a["default"],i["render"],i["staticRenderFns"],!1,null,"7e5aa06e",null,!1,i["components"],c);o.options.__file="pages/user/mine.vue",e["default"]=o.exports},246:function(t,e,n){"use strict";n.r(e);var i=n(247);n.d(e,"render",(function(){return i["render"]})),n.d(e,"staticRenderFns",(function(){return i["staticRenderFns"]})),n.d(e,"recyclableRender",(function(){return i["recyclableRender"]})),n.d(e,"components",(function(){return i["components"]}))},247:function(t,e,n){"use strict";var i;n.r(e),n.d(e,"render",(function(){return a})),n.d(e,"staticRenderFns",(function(){return c})),n.d(e,"recyclableRender",(function(){return r})),n.d(e,"components",(function(){return i}));var a=function(){var t=this,e=t.$createElement;t._self._c},r=!1,c=[];a._withStripped=!0},248:function(t,e,n){"use strict";n.r(e);var i=n(249),a=n.n(i);for(var r in i)["default"].indexOf(r)<0&&function(t){n.d(e,t,(function(){return i[t]}))}(r);e["default"]=a.a},249:function(t,e,n){"use strict";(function(t){Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var n={data:function(){return{imagePath:"",canvasWidth:300,canvasHeight:300,cropX:50,cropY:50,cropWidth:200,cropHeight:200,cropShape:"rectangle",isDragging:!1,startX:0,startY:0}},methods:{chooseImage:function(){var e=this;t.chooseImage({count:1,success:function(t){e.imagePath=t.tempFilePaths[0],e.drawImageOnCanvas()}})},drawImageOnCanvas:function(){var e=t.createCanvasContext("imageCanvas",this);e.drawImage(this.imagePath,0,0,this.canvasWidth,this.canvasHeight),e.draw()},startDrag:function(t){this.isDragging=!0,this.startX=t.touches[0].clientX,this.startY=t.touches[0].clientY},drag:function(t){if(this.isDragging){var e=t.touches[0].clientX-this.startX,n=t.touches[0].clientY-this.startY,i=this.cropX+e,a=this.cropY+n;i=Math.max(0,Math.min(i,this.canvasWidth-this.cropWidth)),a=Math.max(0,Math.min(a,this.canvasHeight-this.cropHeight)),this.cropX=i,this.cropY=a,this.startX=t.touches[0].clientX,this.startY=t.touches[0].clientY}},endDrag:function(){this.isDragging=!1},changeCropShape:function(){this.cropShape="rectangle"===this.cropShape?"circle":"rectangle"},resetCanvas:function(){this.cropX=50,this.cropY=50,this.cropWidth=200,this.cropHeight=200,this.cropShape="rectangle",this.drawImageOnCanvas()},cropImage:function(){var e=this;if("rectangle"===this.cropShape)t.canvasToTempFilePath({canvasId:"imageCanvas",x:this.cropX,y:this.cropY,width:this.cropWidth,height:this.cropHeight,success:function(e){console.log("裁剪后的图片路径:",e.tempFilePath),t.previewImage({urls:[e.tempFilePath]})},fail:function(t){console.error("裁剪失败:",t)}},this);else{var n=t.createCanvasContext("imageCanvas",this),i=this.cropX+this.cropWidth/2,a=this.cropY+this.cropHeight/2,r=Math.min(this.cropWidth,this.cropHeight)/2;n.save(),n.beginPath(),n.arc(i,a,r,0,2*Math.PI),n.clip(),n.drawImage(this.imagePath,0,0,this.canvasWidth,this.canvasHeight),n.restore(),n.draw(!1,(function(){t.canvasToTempFilePath({canvasId:"imageCanvas",x:i-r,y:a-r,width:2*r,height:2*r,success:function(e){console.log("裁剪后的图片路径:",e.tempFilePath),t.previewImage({urls:[e.tempFilePath]})},fail:function(t){console.error("裁剪失败:",t)}},e)}))}}}};e.default=n}).call(this,n(2)["default"])},250:function(t,e,n){"use strict";n.r(e);var i=n(251),a=n.n(i);for(var r in i)["default"].indexOf(r)<0&&function(t){n.d(e,t,(function(){return i[t]}))}(r);e["default"]=a.a},251:function(t,e,n){}},[[244,"common/runtime","common/vendor"]]]);
 //# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/user/mine.js.map

unpackage/dist/dev/mp-weixin/pages/user/mine.json

@@ -1,10 +1,4 @@
 {
-  "navigationBarTitleText": "我的",
-  "usingComponents": {
-    "u-avatar": "/node-modules/uview-ui/components/u-avatar/u-avatar",
-    "u-button": "/node-modules/uview-ui/components/u-button/u-button",
-    "u-icon": "/node-modules/uview-ui/components/u-icon/u-icon",
-    "u-grid": "/node-modules/uview-ui/components/u-grid/u-grid",
-    "u-grid-item": "/node-modules/uview-ui/components/u-grid-item/u-grid-item"
-  }
+  "navigationBarTitleText": "裁剪demo",
+  "usingComponents": {}
 }

unpackage/dist/dev/mp-weixin/pages/user/mine.wxml

@@ -1 +1 @@
-<view class="mine data-v-7e5aa06e"><view class="main data-v-7e5aa06e"><view class="header data-v-7e5aa06e"><view class="avatar data-v-7e5aa06e"><u-avatar vue-id="4cf9ee58-1" src="{{src}}" size="80" class="data-v-7e5aa06e" bind:__l="__l"></u-avatar></view><view class="edit-mine data-v-7e5aa06e"><u-button vue-id="4cf9ee58-2" shape="circle" customStyle="{{({width:'280rpx',color:'#6049a9',borderColor:'#6049a9'})}}" data-event-opts="{{[['^click',[['onEdit']]]]}}" bind:click="__e" class="data-v-7e5aa06e" bind:__l="__l" vue-slots="{{['default']}}">编辑资料</u-button></view></view><view class="numberinfo data-v-7e5aa06e"><view class="nickname data-v-7e5aa06e"><text class="data-v-7e5aa06e">昵称：微信用户</text><u-icon vue-id="4cf9ee58-3" name="woman" color="#2979ff" size="26" class="data-v-7e5aa06e" bind:__l="__l"></u-icon></view><view class="phone data-v-7e5aa06e"><text class="data-v-7e5aa06e">16698592316</text></view><view class="id-box data-v-7e5aa06e"><text class="data-v-7e5aa06e">ID 1858708950943834113</text><u-icon vue-id="4cf9ee58-4" name="file-text" color="#2979ff" size="35" class="data-v-7e5aa06e" bind:__l="__l"></u-icon></view></view><view class="actions data-v-7e5aa06e"><u-grid vue-id="4cf9ee58-5" col="{{3}}" border="{{false}}" class="data-v-7e5aa06e" bind:__l="__l" vue-slots="{{['default']}}"><block wx:for="{{4}}" wx:for-item="index" wx:for-index="__i0__" wx:key="*this"><u-grid-item vue-id="{{('4cf9ee58-6-'+__i0__)+','+('4cf9ee58-5')}}" customStyle="{{gridStyle}}" class="data-v-7e5aa06e" bind:__l="__l" vue-slots="{{['default']}}"><view class="button-item data-v-7e5aa06e" style="background-color:#FFC0CB;"><u-icon vue-id="{{('4cf9ee58-7-'+__i0__)+','+('4cf9ee58-6-'+__i0__)}}" name="file-text" size="40" color="#fff" class="data-v-7e5aa06e" bind:__l="__l"></u-icon><text class="button-text data-v-7e5aa06e">个人资料</text></view></u-grid-item></block></u-grid></view></view></view>
+<view class="container data-v-7e5aa06e"><button data-event-opts="{{[['tap',[['chooseImage',['$event']]]]]}}" bindtap="__e" class="data-v-7e5aa06e">选择图片</button><block wx:if="{{imagePath}}"><view class="canvas-container data-v-7e5aa06e"><canvas style="{{'width:'+(canvasWidth+'px')+';'+('height:'+(canvasHeight+'px')+';')}}" canvas-id="imageCanvas" class="data-v-7e5aa06e"></canvas><view data-event-opts="{{[['touchstart',[['startDrag',['$event']]]],['touchmove',[['drag',['$event']]]],['touchend',[['endDrag',['$event']]]]]}}" class="{{['data-v-7e5aa06e','crop-area',cropShape==='circle'?'circle':'rectangle']}}" style="{{'left:'+(cropX+'px')+';'+('top:'+(cropY+'px')+';')+('width:'+(cropWidth+'px')+';')+('height:'+(cropHeight+'px')+';')}}" bindtouchstart="__e" bindtouchmove="__e" bindtouchend="__e"></view></view></block><view class="button-group data-v-7e5aa06e"><button data-event-opts="{{[['tap',[['changeCropShape',['$event']]]]]}}" bindtap="__e" class="data-v-7e5aa06e">切换裁剪形状</button><button data-event-opts="{{[['tap',[['resetCanvas',['$event']]]]]}}" bindtap="__e" class="data-v-7e5aa06e">重置画布</button><button data-event-opts="{{[['tap',[['cropImage',['$event']]]]]}}" bindtap="__e" class="data-v-7e5aa06e">裁剪图片</button></view></view>

unpackage/dist/dev/mp-weixin/pages/user/mine.wxss

@@ -1,87 +1,22 @@
-@charset "UTF-8";
-/**
- * 这里是uni-app内置的常用样式变量
- *
- * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
- * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
- *
- */
-/**
- * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
- *
- * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
- */
-/* 颜色变量 */
-/* 行为相关颜色 */
-/* 文字基本颜色 */
-/* 背景颜色 */
-/* 边框颜色 */
-/* 尺寸变量 */
-/* 文字尺寸 */
-/* 图片尺寸 */
-/* Border Radius */
-/* 水平间距 */
-/* 垂直间距 */
-/* 透明度 */
-/* 文章场景相关 */
-.safe-area-bottom.data-v-7e5aa06e {
-  padding-bottom: env(safe-area-inset-bottom);
+
+.container.data-v-7e5aa06e {
+    padding: 20px;
 }
-text.data-v-7e5aa06e {
-  font-family: Source Han Sans CN;
+.canvas-container.data-v-7e5aa06e {
+    position: relative;
+    margin-top: 20px;
 }
-.mine.data-v-7e5aa06e {
-  position: relative;
-  height: 100vh;
-  overflow: hidden;
+.crop-area.data-v-7e5aa06e {
+    position: absolute;
+    border: 2px dashed blue;
+    box-sizing: border-box;
 }
-.mine .main.data-v-7e5aa06e {
-  padding: 40rpx;
+.circle.data-v-7e5aa06e {
+    border-radius: 50%;
 }
-.mine .main .header.data-v-7e5aa06e {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 30rpx 0;
-}
-.mine .main .numberinfo .nickname.data-v-7e5aa06e {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-.mine .main .numberinfo .nickname text.data-v-7e5aa06e {
-  font-size: 40rpx;
-  font-weight: bold;
-  margin: 20rpx 20rpx 20rpx 0;
-}
-.mine .main .numberinfo .phone.data-v-7e5aa06e {
-  font-size: 28rpx;
-  margin: 10rpx 0;
-}
-.mine .main .numberinfo .id-box.data-v-7e5aa06e {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-.mine .main .numberinfo .id-box text.data-v-7e5aa06e {
-  font-size: 28rpx;
-  margin-right: 20rpx;
-}
-.mine .main .actions.data-v-7e5aa06e {
-  margin-top: 20rpx;
-}
-.mine .main .actions .button-item.data-v-7e5aa06e {
-  height: 100%;
-  width: 100%;
-  padding: 10rpx 0;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  flex-direction: column;
-  border-radius: 10rpx;
-}
-.mine .main .actions .button-item .button-text.data-v-7e5aa06e {
-  font-weight: bold;
-  font-size: 30rpx;
-  color: #555555;
+.button-group.data-v-7e5aa06e {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-around;
 }
+

unpackage/dist/dev/mp-weixin/project.private.config.json

@@ -5,7 +5,7 @@
     "useIsolateContext": true
   },
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-  "libVersion": "2.28.1",
+  "libVersion": "2.33.0",
   "condition": {
     "miniprogram": {
       "list": [
@@ -64,6 +64,13 @@
           "query": "%E6%B5%8B%E8%AF%84%E7%BB%93%E6%9E%9C=",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "裁剪",
+          "pathName": "pages/user/mine",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }

utils/pictureUrls.js

@@ -0,0 +1,6 @@
+const urls = {
+    loginBanner: 'https://telpo-healthy.oss-cn-hangzhou.aliyuncs.com/healthy/diary/202503/a42f17289a63484bbc519bbe747c1e70.png',
+    takePhone: 'https://telpo-healthy.oss-cn-hangzhou.aliyuncs.com/healthy/diary/202503/9557af6b14d24855896c5a6fe654c2df.png'
+
+}
+export default urls;