EIEI/wechat_wc
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
lhmin0604
2026-07-27 14:54:21 +08:00
commit 4d086758e8
161 changed files with 63776 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/pages/diy/index.js
Vendored
+597
View File
@@ -0,0 +1,597 @@
"use strict";
(wx["webpackJsonp"] = wx["webpackJsonp"] || []).push([["pages/diy/index"],{
/***/ "./node_modules/@tarojs/taro-loader/lib/entry-cache.js?name=pages/diy/index!./src/pages/diy/index.tsx":
/*!************************************************************************************************************!*\
!*** ./node_modules/@tarojs/taro-loader/lib/entry-cache.js?name=pages/diy/index!./src/pages/diy/index.tsx ***!
\************************************************************************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": function() { return /* binding */ DIYPage; }
/* harmony export */ });
/* harmony import */ var F_weixin_wordc_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js */ "./node_modules/@babel/runtime/helpers/esm/objectSpread2.js");
/* harmony import */ var F_weixin_wordc_node_modules_babel_runtime_helpers_esm_toConsumableArray_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js */ "./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js");
/* harmony import */ var F_weixin_wordc_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/slicedToArray.js */ "./node_modules/@babel/runtime/helpers/esm/slicedToArray.js");
/* harmony import */ var _tarojs_components__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @tarojs/components */ "./node_modules/@tarojs/plugin-platform-weapp/dist/components-react.js");
/* harmony import */ var _tarojs_taro__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tarojs/taro */ "./node_modules/@tarojs/taro/index.js");
/* harmony import */ var _tarojs_taro__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tarojs_taro__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "./node_modules/react/cjs/react.production.min.js");
/* harmony import */ var _utils_productConfig__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils/productConfig */ "./src/utils/productConfig.ts");
/* harmony import */ var _utils_store__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils/store */ "./src/utils/store.ts");
/* harmony import */ var _components_ThemeToggle__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../components/ThemeToggle */ "./src/components/ThemeToggle/index.tsx");
/* harmony import */ var _context_ThemeContext__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../context/ThemeContext */ "./src/context/ThemeContext.tsx");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/cjs/react-jsx-runtime.production.min.js");
function DIYPage() {
var _stickers$find;
var _useThemeContext = (0,_context_ThemeContext__WEBPACK_IMPORTED_MODULE_5__.useThemeContext)(),
theme = _useThemeContext.theme;
var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(null),
_useState2 = (0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__["default"])(_useState, 2),
category = _useState2[0],
setCategory = _useState2[1];
var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(1),
_useState4 = (0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__["default"])(_useState3, 2),
step = _useState4[0],
setStep = _useState4[1];
var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(''),
_useState6 = (0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__["default"])(_useState5, 2),
designId = _useState6[0],
setDesignId = _useState6[1];
var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(1),
_useState8 = (0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__["default"])(_useState7, 2),
quantity = _useState8[0],
setQuantity = _useState8[1];
var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]),
_useState0 = (0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__["default"])(_useState9, 2),
stickers = _useState0[0],
setStickers = _useState0[1];
var _useState1 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(null),
_useState10 = (0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__["default"])(_useState1, 2),
activeStickerId = _useState10[0],
setActiveStickerId = _useState10[1];
var _useState11 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
_useState12 = (0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__["default"])(_useState11, 2),
isDragging = _useState12[0],
setIsDragging = _useState12[1];
var _useState13 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)({
x: 0,
y: 0
}),
_useState14 = (0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__["default"])(_useState13, 2),
startPos = _useState14[0],
setStartPos = _useState14[1];
var _useState15 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
_useState16 = (0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__["default"])(_useState15, 2),
previewMode = _useState16[0],
setPreviewMode = _useState16[1];
var _useState17 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
_useState18 = (0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__["default"])(_useState17, 2),
hasOverlap = _useState18[0],
setHasOverlap = _useState18[1];
(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
var _Taro$getCurrentInsta;
var params = (_Taro$getCurrentInsta = _tarojs_taro__WEBPACK_IMPORTED_MODULE_0___default().getCurrentInstance().router) === null || _Taro$getCurrentInsta === void 0 ? void 0 : _Taro$getCurrentInsta.params;
var source = params === null || params === void 0 ? void 0 : params.source;
var productId = (params === null || params === void 0 ? void 0 : params.productId) || (params === null || params === void 0 ? void 0 : params.category);
if (source === 'product' && productId) {
var product = (0,_utils_productConfig__WEBPACK_IMPORTED_MODULE_2__.getProductById)(productId);
if (product) {
setCategory(product);
setQuantity(Number(params === null || params === void 0 ? void 0 : params.quantity) || 1);
var newDesign = {
id: 'DSG' + Date.now(),
productId: product.id,
productName: product.name,
productIcon: product.icon,
unitPrice: product.price,
count: Number(params === null || params === void 0 ? void 0 : params.quantity) || 1,
status: 'designing',
createdAt: new Date().toISOString().slice(0, 10)
};
var list = (0,_utils_store__WEBPACK_IMPORTED_MODULE_3__.getDesignList)();
(0,_utils_store__WEBPACK_IMPORTED_MODULE_3__.setDesignList)([].concat((0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_toConsumableArray_js__WEBPACK_IMPORTED_MODULE_8__["default"])(list), [newDesign]));
setDesignId(newDesign.id);
}
return;
}
if (source === 'designList' && params !== null && params !== void 0 && params.designId) {
var dId = params.designId;
var _list = (0,_utils_store__WEBPACK_IMPORTED_MODULE_3__.getDesignList)();
var design = _list.find(function (d) {
return d.id === dId;
});
if (design) {
var _design$designData, _design$designData2;
setDesignId(dId);
setQuantity(design.count);
var _product = (0,_utils_productConfig__WEBPACK_IMPORTED_MODULE_2__.getProductById)(design.productId);
if (_product) setCategory(_product);
if ((_design$designData = design.designData) !== null && _design$designData !== void 0 && _design$designData.stickers) {
setStickers(design.designData.stickers);
} else if ((_design$designData2 = design.designData) !== null && _design$designData2 !== void 0 && _design$designData2.imageSrc) {
var _design$designData$im, _design$designData$im2, _design$designData$im3;
// 兼容旧版数据
var s = {
id: 'legacy_' + Date.now(),
src: design.designData.imageSrc,
x: ((_design$designData$im = design.designData.imagePos) === null || _design$designData$im === void 0 ? void 0 : _design$designData$im.x) || 0,
y: ((_design$designData$im2 = design.designData.imagePos) === null || _design$designData$im2 === void 0 ? void 0 : _design$designData$im2.y) || 0,
scale: ((_design$designData$im3 = design.designData.imagePos) === null || _design$designData$im3 === void 0 ? void 0 : _design$designData$im3.scale) || 1,
width: 200,
height: 200,
isOverlapping: false
};
setStickers([s]);
}
}
return;
}
// 默认情况（从首页 old category 参数兼容）
if (productId) {
var found = (0,_utils_productConfig__WEBPACK_IMPORTED_MODULE_2__.getProductById)(productId);
if (found) {
setCategory(found);
var _newDesign = {
id: 'DSG' + Date.now(),
productId: found.id,
productName: found.name,
productIcon: found.icon,
unitPrice: found.price,
count: 1,
status: 'designing',
createdAt: new Date().toISOString().slice(0, 10)
};
var _list2 = (0,_utils_store__WEBPACK_IMPORTED_MODULE_3__.getDesignList)();
(0,_utils_store__WEBPACK_IMPORTED_MODULE_3__.setDesignList)([].concat((0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_toConsumableArray_js__WEBPACK_IMPORTED_MODULE_8__["default"])(_list2), [_newDesign]));
setDesignId(_newDesign.id);
}
}
}, []);
// 矩形碰撞检测
var checkOverlap = function checkOverlap(list) {
var newList = list.map(function (s) {
return (0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_9__["default"])((0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_9__["default"])({}, s), {}, {
isOverlapping: false
});
});
for (var i = 0; i < newList.length; i++) {
for (var j = i + 1; j < newList.length; j++) {
var a = newList[i];
var b = newList[j];
var aw = a.width * a.scale;
var ah = a.height * a.scale;
var bw = b.width * b.scale;
var bh = b.height * b.scale;
if (a.x < b.x + bw && a.x + aw > b.x && a.y < b.y + bh && a.y + ah > b.y) {
newList[i].isOverlapping = true;
newList[j].isOverlapping = true;
}
}
}
var overlapAny = newList.some(function (s) {
return s.isOverlapping;
});
setHasOverlap(overlapAny);
return newList;
};
var addSticker = function addSticker() {
_tarojs_taro__WEBPACK_IMPORTED_MODULE_0___default().chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function success(res) {
var src = res.tempFilePaths[0];
// 获取图片尺寸用于碰撞检测
_tarojs_taro__WEBPACK_IMPORTED_MODULE_0___default().getImageInfo({
src: src,
success: function success(info) {
var newSticker = {
id: 'stk_' + Date.now(),
src: src,
x: 0,
y: 0,
scale: 1,
width: info.width,
height: info.height,
isOverlapping: false
};
var next = [].concat((0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_toConsumableArray_js__WEBPACK_IMPORTED_MODULE_8__["default"])(stickers), [newSticker]);
var checked = checkOverlap(next);
setStickers(checked);
setActiveStickerId(newSticker.id);
},
fail: function fail() {
// fallback 尺寸
var newSticker = {
id: 'stk_' + Date.now(),
src: src,
x: 0,
y: 0,
scale: 1,
width: 200,
height: 200,
isOverlapping: false
};
var next = [].concat((0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_toConsumableArray_js__WEBPACK_IMPORTED_MODULE_8__["default"])(stickers), [newSticker]);
var checked = checkOverlap(next);
setStickers(checked);
setActiveStickerId(newSticker.id);
}
});
}
});
};
var deleteSticker = function deleteSticker(id) {
var next = stickers.filter(function (s) {
return s.id !== id;
});
var checked = checkOverlap(next);
setStickers(checked);
if (activeStickerId === id) setActiveStickerId(null);
};
var handleStickerTouchStart = function handleStickerTouchStart(e, id) {
var touch = e.touches[0];
var s = stickers.find(function (x) {
return x.id === id;
});
if (!s) return;
setActiveStickerId(id);
setIsDragging(true);
setStartPos({
x: touch.clientX - s.x,
y: touch.clientY - s.y
});
};
var handleStickerTouchMove = function handleStickerTouchMove(e) {
if (!isDragging || !activeStickerId) return;
var touch = e.touches[0];
var next = stickers.map(function (s) {
if (s.id !== activeStickerId) return s;
return (0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_9__["default"])((0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_9__["default"])({}, s), {}, {
x: touch.clientX - startPos.x,
y: touch.clientY - startPos.y
});
});
var checked = checkOverlap(next);
setStickers(checked);
};
var handleTouchEnd = function handleTouchEnd() {
return setIsDragging(false);
};
var handleScale = function handleScale(id, delta) {
var next = stickers.map(function (s) {
if (s.id !== id) return s;
return (0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_9__["default"])((0,F_weixin_wordc_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_9__["default"])({}, s), {}, {
scale: Math.max(0.3, Math.min(3, s.scale + delta))
});
});
var checked = checkOverlap(next);
setStickers(checked);
};
var goBack = function goBack() {
_tarojs_taro__WEBPACK_IMPORTED_MODULE_0___default().navigateBack();
};
var getMaskStyle = function getMaskStyle() {
if (!category) return {
width: 300,
height: 420
};
var base = {
width: category.mask.width,
height: category.mask.height
};
if (category.mask.shape === 'rect') {
base.borderRadius = category.mask.borderRadius || 0;
}
if (category.mask.shape === 'circle') {
base.borderRadius = '50%';
}
return base;
};
var handleComplete = function handleComplete() {
if (hasOverlap) {
_tarojs_taro__WEBPACK_IMPORTED_MODULE_0___default().showToast({
title: '贴纸不能重叠',
icon: 'none'
});
return;
}
if (designId) {
(0,_utils_store__WEBPACK_IMPORTED_MODULE_3__.updateDesign)(designId, {
designData: {
stickers: stickers,
category: category
}
});
}
setPreviewMode(false);
_tarojs_taro__WEBPACK_IMPORTED_MODULE_0___default().navigateTo({
url: "/pages/checkout/index?designId=".concat(designId)
});
};
if (!category) {
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "theme-".concat(theme),
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "diy-page",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "page-title",
children: "\u52A0\u8F7D\u4E2D..."
})
})
});
}
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "theme-".concat(theme),
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "diy-page",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_components_ThemeToggle__WEBPACK_IMPORTED_MODULE_4__["default"], {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "page-header dashed-card mt-20",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "star-badge"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "flex-between",
style: {
width: '100%'
},
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "back-btn",
onClick: goBack,
children: "\u2190"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "page-title",
children: "\u8BBE\u8BA1\u5DE5\u4F5C\u53F0"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
style: {
width: '60px'
}
})]
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "canvas-wrapper dashed-card mt-20",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "star-badge"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "canvas-area",
style: getMaskStyle(),
children: [stickers.map(function (s) {
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Image, {
className: "canvas-image ".concat(s.isOverlapping ? 'overlap' : '', " ").concat(activeStickerId === s.id ? 'active' : ''),
src: s.src,
style: {
transform: "translate(".concat(s.x, "px, ").concat(s.y, "px) scale(").concat(s.scale, ")"),
opacity: isDragging && activeStickerId === s.id ? 0.8 : 1,
zIndex: activeStickerId === s.id ? 10 : 5,
width: s.width || 200,
height: s.height || 200
},
onTouchStart: function onTouchStart(e) {
return handleStickerTouchStart(e, s.id);
},
onTouchMove: handleStickerTouchMove,
onTouchEnd: handleTouchEnd,
onClick: function onClick() {
return setActiveStickerId(s.id);
},
mode: "aspectFit"
}, s.id);
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "mask-border",
style: getMaskStyle()
})]
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "sticker-panel dashed-card mt-20",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "star-badge"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "section-title",
children: "\u8D34\u7EB8"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "sticker-list",
children: [stickers.map(function (s) {
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "sticker-thumb ".concat(s.isOverlapping ? 'overlap' : '', " ").concat(activeStickerId === s.id ? 'active' : ''),
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Image, {
src: s.src,
className: "sticker-thumb-img",
mode: "aspectFit",
onClick: function onClick() {
return setActiveStickerId(s.id);
}
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "sticker-del",
onClick: function onClick() {
return deleteSticker(s.id);
},
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "del-icon",
children: "\xD7"
})
})]
}, s.id);
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "sticker-add-btn",
onClick: addSticker,
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "add-icon",
children: "+"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "add-label",
children: "\u6DFB\u52A0"
})]
})]
}), hasOverlap && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "overlap-hint",
children: "\u26A0\uFE0F \u6709\u8D34\u7EB8\u91CD\u53E0\uFF0C\u8BF7\u8C03\u6574\u4F4D\u7F6E"
})]
}), activeStickerId && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "toolbar dashed-card mt-20",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "star-badge"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "tool-row",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "tool-label",
children: "\u7F29\u653E"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "flex-center",
style: {
gap: '20px'
},
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "tool-btn",
onClick: function onClick() {
return handleScale(activeStickerId, -0.1);
},
children: "\uFF0D"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "tool-value",
children: [Math.round((((_stickers$find = stickers.find(function (s) {
return s.id === activeStickerId;
})) === null || _stickers$find === void 0 ? void 0 : _stickers$find.scale) || 1) * 100), "%"]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "tool-btn",
onClick: function onClick() {
return handleScale(activeStickerId, 0.1);
},
children: "\uFF0B"
})]
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "tool-row",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "tool-label",
children: "\u63D0\u793A"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "tool-hint",
children: "\u62D6\u52A8\u8C03\u6574\u4F4D\u7F6E\uFF0C\u8D34\u7EB8\u4E0D\u53EF\u91CD\u53E0"
})]
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "action-btns mt-20",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "btn-gradient",
onClick: function onClick() {
return setPreviewMode(true);
},
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
children: "\u9884\u89C8\u6548\u679C"
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "btn-outline",
onClick: addSticker,
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
children: "\u6DFB\u52A0\u8D34\u7EB8"
})
})]
}), previewMode && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "preview-overlay",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "preview-card dashed-card",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "star-badge"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "preview-title",
children: "\u786E\u8BA4\u6548\u679C"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "preview-canvas",
style: getMaskStyle(),
children: stickers.map(function (s) {
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Image, {
className: "preview-image ".concat(s.isOverlapping ? 'overlap' : ''),
src: s.src,
style: {
transform: "translate(".concat(s.x, "px, ").concat(s.y, "px) scale(").concat(s.scale, ")"),
width: s.width || 200,
height: s.height || 200
},
mode: "aspectFit"
}, s.id);
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "product-info",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "product-name",
children: category.name
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "product-size",
children: ["\u753B\u5E03\u5C3A\u5BF8: ", category.mask.width, " \xD7 ", category.mask.height, " px"]
}), hasOverlap && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
className: "overlap-hint",
children: "\u8D34\u7EB8\u6709\u91CD\u53E0\uFF0C\u4E0D\u53EF\u63D0\u4EA4"
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "preview-actions",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "btn-outline",
onClick: function onClick() {
return setPreviewMode(false);
},
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
children: "\u8FD4\u56DE\u4FEE\u6539"
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
className: "btn-gradient ".concat(hasOverlap ? 'disabled' : ''),
onClick: handleComplete,
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.Text, {
children: "\u786E\u8BA4\u5B8C\u6210"
})
})]
})]
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_10__.View, {
style: {
height: '40px'
}
})]
})
});
}
/***/ }),
/***/ "./src/pages/diy/index.tsx":
/*!*********************************!*\
!*** ./src/pages/diy/index.tsx ***!
\*********************************/
/***/ (function(__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) {
/* harmony import */ var _tarojs_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tarojs/runtime */ "./node_modules/@tarojs/runtime/dist/runtime.esm.js");
/* harmony import */ var _node_modules_tarojs_taro_loader_lib_entry_cache_js_name_pages_diy_index_index_tsx__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !!../../../node_modules/@tarojs/taro-loader/lib/entry-cache.js?name=pages/diy/index!./index.tsx */ "./node_modules/@tarojs/taro-loader/lib/entry-cache.js?name=pages/diy/index!./src/pages/diy/index.tsx");
var config = {};
var inst = Page((0,_tarojs_runtime__WEBPACK_IMPORTED_MODULE_1__.createPageConfig)(_node_modules_tarojs_taro_loader_lib_entry_cache_js_name_pages_diy_index_index_tsx__WEBPACK_IMPORTED_MODULE_0__["default"], 'pages/diy/index', {root:{cn:[]}}, config || {}))
/* unused harmony default export */ var __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_tarojs_taro_loader_lib_entry_cache_js_name_pages_diy_index_index_tsx__WEBPACK_IMPORTED_MODULE_0__["default"]);
/***/ })
},
/******/ function(__webpack_require__) { // webpackRuntimeModules
/******/ var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); }
/******/ __webpack_require__.O(0, ["taro","vendors","common"], function() { return __webpack_exec__("./src/pages/diy/index.tsx"); });
/******/ var __webpack_exports__ = __webpack_require__.O();
/******/ }
]);
//# sourceMappingURL=index.js.map
dist/pages/diy/index.js.map
Vendored
+1
View File
File diff suppressed because one or more lines are too long
dist/pages/diy/index.json
Vendored
+1
View File
@@ -0,0 +1 @@
{"usingComponents":{"comp":"../../comp"}}
dist/pages/diy/index.wxml
Vendored
+2
View File
@@ -0,0 +1,2 @@
<import src="../../base.wxml"/>
<template is="taro_tmpl" data="{{root:root}}" />
dist/pages/diy/index.wxss
Vendored
+340
View File
@@ -0,0 +1,340 @@
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/@tarojs/webpack5-runner/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./src/pages/diy/index.scss ***!
\************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.diy-page {
padding: 0 24rpx 24rpx;
min-height: 100vh;
}
/* 画布区域 */
.canvas-wrapper {
padding: 40rpx;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.canvas-area {
position: relative;
background: -webkit-linear-gradient(315deg, rgba(255, 154, 158, 0.08) 0%, rgba(160, 196, 255, 0.08) 100%);
background: linear-gradient(135deg, rgba(255, 154, 158, 0.08) 0%, rgba(160, 196, 255, 0.08) 100%);
overflow: hidden;
border-radius: 16rpx;
min-width: 200rpx;
min-height: 200rpx;
}
.mask-border {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 3rpx dashed var(--accent-blue);
pointer-events: none;
z-index: 2;
}
.canvas-image {
position: absolute;
max-width: 100%;
max-height: 100%;
z-index: 5;
border: 2rpx solid transparent;
}
.canvas-image.active {
border-color: var(--accent-pink);
}
.canvas-image.overlap {
border-color: #ff4757;
-webkit-box-shadow: 0 0 12rpx rgba(255, 71, 87, 0.5);
box-shadow: 0 0 12rpx rgba(255, 71, 87, 0.5);
}
/* 贴纸面板 */
.sticker-panel {
padding: 28rpx;
}
.sticker-list {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16rpx;
}
.sticker-thumb {
position: relative;
width: 120rpx;
height: 120rpx;
border: 2rpx dashed var(--line-star);
border-radius: 12rpx;
overflow: hidden;
background: var(--bg-input);
}
.sticker-thumb.active {
border-color: var(--accent-pink);
border-width: 3rpx;
}
.sticker-thumb.overlap {
border-color: #ff4757;
}
.sticker-thumb-img {
width: 100%;
height: 100%;
}
.sticker-del {
position: absolute;
top: 4rpx;
right: 4rpx;
width: 36rpx;
height: 36rpx;
background: rgba(255, 71, 87, 0.85);
border-radius: 50%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
z-index: 10;
}
.del-icon {
color: #fff;
font-size: 24rpx;
font-weight: 700;
}
.sticker-add-btn {
width: 120rpx;
height: 120rpx;
border: 2rpx dashed var(--line-star);
border-radius: 12rpx;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background: var(--bg-input);
}
.add-icon {
font-size: 48rpx;
color: var(--accent-pink);
line-height: 1;
}
.add-label {
font-size: 22rpx;
color: var(--text-secondary);
margin-top: 8rpx;
}
.overlap-hint {
display: block;
margin-top: 16rpx;
font-size: 26rpx;
color: #ff4757;
font-weight: 600;
text-align: center;
}
/* 工具栏 */
.toolbar {
padding: 28rpx 32rpx;
}
.tool-row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 20rpx;
}
.tool-row:last-child {
margin-bottom: 0;
}
.tool-label {
font-size: 28rpx;
font-weight: 600;
color: var(--text-primary);
}
.tool-btn {
width: 56rpx;
height: 56rpx;
background: -webkit-linear-gradient(315deg, rgba(255, 154, 158, 0.08) 0%, rgba(160, 196, 255, 0.08) 100%);
background: linear-gradient(135deg, rgba(255, 154, 158, 0.08) 0%, rgba(160, 196, 255, 0.08) 100%);
border: 2rpx dashed var(--accent-blue);
border-radius: 50%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 32rpx;
color: var(--text-primary);
font-weight: 700;
}
.tool-value {
font-size: 28rpx;
font-weight: 600;
color: var(--accent-pink);
min-width: 80rpx;
text-align: center;
}
.tool-hint {
font-size: 24rpx;
color: var(--text-secondary);
}
/* 预览弹窗 */
.preview-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
z-index: 1000;
padding: 40rpx;
}
.preview-card {
background: var(--bg-card);
width: 100%;
max-height: 80vh;
overflow-y: auto;
padding: 40rpx;
}
.preview-title {
font-size: 36rpx;
font-weight: 700;
color: var(--text-primary);
display: block;
margin-bottom: 24rpx;
text-align: center;
}
.preview-canvas {
background: -webkit-linear-gradient(315deg, rgba(255, 154, 158, 0.08) 0%, rgba(160, 196, 255, 0.08) 100%);
background: linear-gradient(135deg, rgba(255, 154, 158, 0.08) 0%, rgba(160, 196, 255, 0.08) 100%);
border-radius: 16rpx;
overflow: hidden;
margin: 0 auto 24rpx;
border: 3rpx dashed var(--accent-blue);
position: relative;
min-width: 200rpx;
min-height: 200rpx;
}
.preview-image {
position: absolute;
max-width: 100%;
max-height: 100%;
z-index: 5;
}
.preview-image.overlap {
border: 2rpx solid #ff4757;
}
.product-info {
text-align: center;
margin-bottom: 32rpx;
}
.product-name {
font-size: 30rpx;
font-weight: 700;
color: var(--text-primary);
display: block;
margin-bottom: 8rpx;
}
.product-size {
font-size: 24rpx;
color: var(--text-secondary);
}
.preview-actions {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
gap: 20rpx;
}
.preview-actions .btn-outline,
.preview-actions .btn-gradient {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
.preview-actions .btn-gradient.disabled {
opacity: 0.5;
pointer-events: none;
}
/* 按钮 */
.action-btns {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 20rpx;
}
.mt-20 {
margin-top: 20rpx;
}