From f1d0c08bbef3ffef0b9bbd0c181d2047c9866a7f Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期六, 11 十月 2025 14:42:40 +0800
Subject: [PATCH] 定制模板
---
pages/product/m-buy/goods.vue | 675 +++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 639 insertions(+), 36 deletions(-)
diff --git a/pages/product/m-buy/goods.vue b/pages/product/m-buy/goods.vue
index 22c3418..6289c32 100644
--- a/pages/product/m-buy/goods.vue
+++ b/pages/product/m-buy/goods.vue
@@ -1,6 +1,6 @@
<template>
<div class="wrapper">
- <u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode" :border-radius="setup.radius" @close="closeMask()">
+ <u-popup class="popup" :value="buyMask" :height="setup.height" closeable :mode="setup.mode" :border-radius="setup.radius" @input="handlePopupInput" @close="closeMask()">
<!-- 鍟嗗搧 -->
<view class="goods-box bottom">
<view class="goods-header">
@@ -102,7 +102,93 @@
<uni-number-box class="uNumber" :min="1" :max="999" :disabled="goodsDetail.quantity === 0" v-model="num"></uni-number-box>
</view>
<view class="template">
- {{JSON.stringify(consumizetemplateInfo)}}
+ <view class="template-title" v-if="consumizetemplateInfo && consumizetemplateInfo.name">
+ <text class="title-text">{{ consumizetemplateInfo.name }}</text>
+ </view>
+
+ <!-- 鍥剧墖閫夋嫨鍖哄煙 -->
+ <view class="template-images" v-if="consumizetemplateInfo && consumizetemplateInfo.templateImgs && consumizetemplateInfo.templateImgs.length > 0">
+ <view class="images-grid">
+ <view
+ v-for="(img, index) in consumizetemplateInfo.templateImgs"
+ :key="img.id"
+ class="image-item"
+ :class="{ selected: selectedImages.includes(img.imgUrl) }"
+ @click="selectImage(img.imgUrl)"
+ >
+ <image
+ :src="getFilePreviewUrlSync(img.imgUrl)"
+ class="image-preview"
+ mode="aspectFill"
+ />
+ <view v-if="selectedImages.includes(img.imgUrl)" class="selected-overlay">
+ <uni-icons type="checkmarkempty" size="30" color="#fff"></uni-icons>
+ </view>
+ </view>
+ </view>
+ </view>
+
+ <!-- 鍔ㄦ�佽〃鍗曢」 -->
+ <view class="template-form" v-if="consumizetemplateInfo && consumizetemplateInfo.templateConstomizeTitles">
+ <view
+ v-for="(item, index) in consumizetemplateInfo.templateConstomizeTitles"
+ :key="item.id"
+ class="form-item"
+ >
+ <text class="form-label">{{ item.templateTitle }}</text>
+
+ <!-- 鏂囨湰杈撳叆妗� -->
+ <input
+ v-if="item.contentType === 'TEXT'"
+ class="form-input"
+ :value="getFormValue(item.id)"
+ @input="updateFormValue(item.id, item.templateTitle, $event.target.value)"
+ :placeholder="'璇疯緭鍏�' + item.templateTitle"
+ />
+
+ <!-- 鍥剧墖涓婁紶锛堜笉浣跨敤u-upload缁勪欢锛� -->
+ <view v-if="item.contentType === 'IMAGE'" class="form-upload">
+ <!-- 涓婁紶鎸夐挳 -->
+ <view class="upload-btn" @click="chooseImage(item.id)">
+ <uni-icons type="plusempty" size="40" color="#999"></uni-icons>
+ <text class="upload-text">鐐瑰嚮涓婁紶</text>
+ </view>
+
+ <!-- 鍥剧墖棰勮鍖哄煙 -->
+ <view v-if="imagePreviewUrls[item.id]" class="image-preview-container">
+ <image
+ :src="imagePreviewUrls[item.id]"
+ class="uploaded-image"
+ mode="aspectFill"
+ />
+ <uni-icons
+ type="closeempty"
+ class="delete-icon"
+ @click="deleteImage(item.id)"
+ size="20"
+ color="#fff"
+ ></uni-icons>
+ </view>
+
+ <!-- 涓婁紶杩涘害鏉� -->
+ <progress
+ v-if="uploadProgress[item.id] && uploadProgress[item.id] > 0 && uploadProgress[item.id] < 100"
+ :percent="uploadProgress[item.id]"
+ active-mode="forwards"
+ show-info
+ stroke-width="6"
+ :active="true"
+ active-color="#ff573e"
+ style="margin-top: 10rpx;"
+ />
+
+ <!-- 涓婁紶鐘舵�佷俊鎭� -->
+ <text v-if="uploadStatus[item.id]" class="upload-status">
+ {{ uploadStatus[item.id] }}
+ </text>
+ </view>
+ </view>
+ </view>
</view>
</scroll-view>
<!-- 鎸夐挳 -->
@@ -120,6 +206,10 @@
import * as API_trade from '@/api/trade.js';
import setup from './popup';
// import uniNumberBox from '@/components/uni-number-box'
+import { getFilePreviewUrl } from "@/api/common.js";
+import { getSTSToken } from "@/api/common.js";
+import { getFileKey } from "@/utils/file.js";
+
export default {
components: {
// uniNumberBox
@@ -137,7 +227,23 @@
formatList: [],
currentSelected: [],
skuList: '',
- isClose: false //鏄惁鍙互鐐瑰嚮閬僵鍏抽棴
+ isClose: false, //鏄惁鍙互鐐瑰嚮閬僵鍏抽棴
+
+ // 琛ㄥ崟鐩稿叧鏁版嵁
+ selectedImages: [], // 閫変腑鐨勬ā鏉垮浘鐗�
+ formValues: {
+ templateId: "", // 妯℃澘ID
+ templateName: "", // 妯℃澘鍚嶇О
+ chooseImage: "", // 閫変腑鐨勫浘鐗�
+ templateForm: [] // 琛ㄥ崟鏁扮粍 [{id, templateTitle, value}]
+ }, // 琛ㄥ崟鍊�
+ imagePreviewUrls: {}, // 鍥剧墖棰勮URL
+ uploadProgress: {}, // 涓婁紶杩涘害
+ uploadStatus: {}, // 涓婁紶鐘舵�佷俊鎭�
+ cosClient: null, // COS瀹㈡埛绔�
+ bucket: '', // 瀛樺偍妗�
+ region: '', // 鍦板煙
+ previewUrls: {} // 鏂囦欢棰勮鍦板潃缂撳瓨
};
},
props: {
@@ -211,6 +317,7 @@
buyType: {
handler(val) {
if (val) {
+ // 浣跨敤鐩存帴璧嬪�艰�屼笉鏄痶his.$set
this.buyType = val;
}
},
@@ -218,39 +325,337 @@
},
selectSkuList: {
handler(val, oldval) {
- this.$emit('changed', val);
+ // 浣跨敤setTimeout寤惰繜瑙﹀彂浜嬩欢锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ this.$emit('changed', val);
+ }, 100);
},
deep: true
},
'goodsDetail.quantity': {
handler(val) {
if (val == 0) {
- uni.showToast({
- title: '鍟嗗搧宸插敭缃�',
- duration: 2000,
- icon: 'none'
- })
+ // 浣跨敤setTimeout寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ uni.showToast({
+ title: '鍟嗗搧宸插敭缃�',
+ duration: 2000,
+ icon: 'none'
+ });
+ }, 100);
this.num = 1;
}
}
+ },
+ // 鐩戝惉妯℃澘淇℃伅鍙樺寲
+ consumizetemplateInfo: {
+ handler(newVal, oldVal) {
+ if (newVal) {
+ // 浣跨敤setTimeout寤惰繜鎵ц锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ // 棰勫姞杞芥ā鏉垮浘鐗囩殑棰勮鍦板潃
+ this.preloadTemplateImages();
+ // 鍒濆鍖栨ā鏉胯〃鍗曟暟鎹�
+ this.initTemplateFormData();
+ }, 100);
+ }
+ },
+ immediate: true,
+ deep: true
}
},
methods: {
+ // 鍒濆鍖栬吘璁簯COS瀹㈡埛绔�
+ initCOS() {
+ getSTSToken().then(res => {
+ const COS = require('@/lib/cos-wx-sdk-v5.js');
+ // 浣跨敤鐩存帴璧嬪�艰�屼笉鏄痶his.$set
+ this.cosClient = new COS({
+ SecretId: res.data.data.tmpSecretId,
+ SecretKey: res.data.data.tmpSecretKey,
+ SecurityToken: res.data.data.sessionToken,
+ StartTime: res.data.data.stsStartTime,
+ ExpiredTime: res.data.data.stsEndTime,
+ SimpleUploadMethod: 'putObject'
+ });
+ this.bucket = res.data.data.bucket;
+ this.region = res.data.data.region;
+ }).catch(err => {
+ console.error('鍒濆鍖朇OS澶辫触', err);
+ // 浣跨敤setTimeout寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ uni.showToast({
+ title: '涓婁紶鏈嶅姟鍒濆鍖栧け璐�',
+ icon: 'none'
+ });
+ }, 100);
+ });
+ },
+
+ // 鑾峰彇鏂囦欢棰勮鍦板潃
+ async fetchFilePreviewUrl(fileKey) {
+ // 濡傛灉鏄畬鏁寸殑URL锛岀洿鎺ヨ繑鍥�
+ if (fileKey && (fileKey.startsWith('http://') || fileKey.startsWith('https://'))) {
+ return fileKey;
+ }
+
+ // 濡傛灉宸茬粡缂撳瓨杩囷紝鐩存帴杩斿洖缂撳瓨鍊�
+ if (this.previewUrls[fileKey]) {
+ return this.previewUrls[fileKey];
+ }
+
+ // 璋冪敤API鑾峰彇棰勮鍦板潃
+ try {
+ const res = await getFilePreviewUrl(fileKey);
+ const previewUrl = res.data.data;
+ // 浣跨敤鐩存帴璧嬪�艰�屼笉鏄痶his.$set
+ this.previewUrls[fileKey] = previewUrl;
+ return previewUrl;
+ } catch (error) {
+ console.error('鑾峰彇鏂囦欢棰勮鍦板潃澶辫触', error);
+ return fileKey; // 濡傛灉鑾峰彇澶辫触锛岃繑鍥炲師濮嬪��
+ }
+ },
+
+ // 閫夋嫨妯℃澘鍥剧墖
+ selectImage(imgUrl) {
+ const index = this.selectedImages.indexOf(imgUrl);
+ if (index > -1) {
+ // 濡傛灉宸查�変腑锛屽垯鍙栨秷閫夋嫨
+ this.selectedImages.splice(index, 1);
+ } else {
+ // 鍚﹀垯娣诲姞鍒伴�変腑鍒楄〃
+ this.selectedImages.push(imgUrl);
+ }
+ // 鏇存柊formValues涓殑chooseImage
+ this.formValues.chooseImage = this.selectedImages.join(',');
+ },
+
+ // 閫夋嫨鍥剧墖锛堝弬鑰僾ideo.vue鐨勫疄鐜帮級
+ chooseImage(fieldId) {
+ if (!this.cosClient) {
+ // 浣跨敤setTimeout寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ uni.showToast({
+ title: '涓婁紶鏈嶅姟鏈垵濮嬪寲',
+ icon: 'none'
+ });
+ }, 100);
+ // 閲嶆柊鍒濆鍖朇OS
+ this.initCOS();
+ return;
+ }
+
+ uni.chooseImage({
+ count: 1,
+ sizeType: ['compressed'],
+ sourceType: ['album', 'camera'],
+ success: (res) => {
+ const tempFilePath = res.tempFilePaths[0];
+
+ // 鑾峰彇鏂囦欢鍚�
+ let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
+ // 澶勭悊瀹夊崜鍙兘鐨刄RI缂栫爜
+ if(fileName.indexOf('%') > -1) {
+ fileName = decodeURIComponent(fileName);
+ }
+
+ // 鐢熸垚鏂囦欢key
+ const fileKey = getFileKey(fileName);
+
+ // 鏄剧ず棰勮鍥�
+ this.$set(this.imagePreviewUrls, fieldId, tempFilePath);
+
+ // 鍒濆鍖栦笂浼犵姸鎬�
+ this.$set(this.uploadProgress, fieldId, 0);
+ this.$set(this.uploadStatus, fieldId, '涓婁紶涓�...');
+
+ // 寮哄埗鏇存柊瑙嗗浘
+ this.$forceUpdate();
+
+ // 鎵ц涓婁紶
+ this.cosClient.uploadFile({
+ Bucket: this.bucket,
+ Region: this.region,
+ Key: fileKey,
+ FilePath: tempFilePath,
+ SliceSize: 1024 * 1024 * 5, // 5M
+ onProgress: (progressData) => {
+ // 鏇存柊涓婁紶杩涘害
+ const progress = Math.round(progressData.percent * 100);
+ this.$set(this.uploadProgress, fieldId, progress);
+
+ // 寮哄埗鏇存柊瑙嗗浘
+ this.$forceUpdate();
+ }
+ }, (err, data) => {
+ // 娓呴櫎涓婁紶杩涘害
+ // 浣跨敤Vue.delete鎴杢his.$delete鍙兘浼氳Е鍙戠粍浠舵洿鏂帮紝鏀圭敤鐩存帴鍒犻櫎
+ delete this.uploadProgress[fieldId];
+
+ if (err) {
+ console.error('涓婁紶澶辫触', err);
+ // 鏇存柊涓婁紶鐘舵��
+ this.$set(this.uploadStatus, fieldId, '涓婁紶澶辫触');
+ // 娓呴櫎棰勮鍥�
+ this.$delete(this.imagePreviewUrls, fieldId);
+ // 娉ㄦ剰锛氳繖閲屼笉鍐嶉渶瑕佹竻闄ormValues涓殑瀛楁锛屽洜涓烘垜浠凡缁忎慨鏀逛簡鏁版嵁缁撴瀯
+
+ // 寮哄埗鏇存柊瑙嗗浘
+ this.$forceUpdate();
+
+ // 浣跨敤setTimeout寤惰繜鏄剧ず閿欒鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ uni.showToast({
+ title: '涓婁紶澶辫触',
+ icon: 'none'
+ });
+ }, 100);
+ } else {
+ // 鑾峰彇褰撳墠琛ㄥ崟椤圭殑淇℃伅
+ const currentItem = this.consumizetemplateInfo.templateConstomizeTitles.find(item => item.id === fieldId);
+ const templateTitle = currentItem ? currentItem.templateTitle : '';
+
+ // 涓婁紶鎴愬姛锛屾洿鏂拌〃鍗曞��
+ this.updateFormValue(fieldId, templateTitle, fileKey);
+
+ // 鏇存柊涓婁紶鐘舵��
+ this.$set(this.uploadStatus, fieldId, '涓婁紶鎴愬姛');
+
+ // 寮哄埗鏇存柊瑙嗗浘
+ this.$forceUpdate();
+
+ // 浣跨敤setTimeout寤惰繜鏄剧ず鎴愬姛鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ uni.showToast({
+ title: '涓婁紶鎴愬姛',
+ icon: 'success'
+ });
+ }, 100);
+ }
+ });
+ },
+ fail: (err) => {
+ console.error('閫夋嫨鍥剧墖澶辫触', err);
+ // 鍖哄垎鐢ㄦ埛鍙栨秷鎿嶄綔鍜岀湡姝ｇ殑閿欒
+ // 濡傛灉鏄敤鎴蜂富鍔ㄥ彇娑堬紝涓嶆樉绀烘彁绀�
+ if (err.errMsg && err.errMsg.indexOf('cancel') === -1 && err.errMsg.indexOf('fail') !== -1) {
+ // 浣跨敤setTimeout寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ uni.showToast({
+ title: '鏈�夋嫨鍥剧墖',
+ icon: 'none'
+ });
+ }, 100);
+ }
+ }
+ });
+ },
+
+ // 鍒犻櫎鍥剧墖
+ deleteImage(fieldId) {
+ // 娓呴櫎棰勮鍥�
+ this.$delete(this.imagePreviewUrls, fieldId);
+ // 娓呴櫎涓婁紶鐘舵��
+ this.$delete(this.uploadStatus, fieldId);
+ // 娓呴櫎涓婁紶杩涘害
+ this.$delete(this.uploadProgress, fieldId);
+
+ // 浠巉ormValues涓Щ闄ゅ搴旂殑琛ㄥ崟瀛楁
+ const index = this.formValues.templateForm.findIndex(item => item.id === fieldId);
+ if (index > -1) {
+ this.formValues.templateForm.splice(index, 1);
+ }
+
+ // 浣跨敤setTimeout寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ uni.showToast({
+ title: '鍒犻櫎鎴愬姛',
+ icon: 'success'
+ });
+ }, 100);
+
+ // 寮哄埗鏇存柊瑙嗗浘
+ this.$forceUpdate();
+ },
+
+ // 鑾峰彇琛ㄥ崟鍊�
+ getFormValue(fieldId) {
+ const field = this.formValues.templateForm.find(item => item.id === fieldId);
+ return field ? field.value : '';
+ },
+
+ // 鏇存柊琛ㄥ崟鍊�
+ updateFormValue(fieldId, templateTitle, value) {
+ // 鏇存柊妯℃澘鍩烘湰淇℃伅
+ this.formValues.templateId = this.consumizetemplateInfo.id;
+ this.formValues.templateName = this.consumizetemplateInfo.name;
+
+ // 鏌ユ壘鏄惁宸插瓨鍦ㄨ瀛楁
+ const existingIndex = this.formValues.templateForm.findIndex(item => item.id === fieldId);
+
+ if (existingIndex > -1) {
+ // 鏇存柊鐜版湁瀛楁
+ this.$set(this.formValues.templateForm, existingIndex, {
+ id: fieldId,
+ templateTitle: templateTitle,
+ value: value
+ });
+ } else {
+ // 娣诲姞鏂板瓧娈�
+ this.formValues.templateForm.push({
+ id: fieldId,
+ templateTitle: templateTitle,
+ value: value
+ });
+ }
+ },
+
+ // 鏇存柊妯℃澘琛ㄥ崟鏁版嵁
+ updateTemplateFormData(fieldId, templateTitle, value) {
+ // 杩欎釜鏂规硶鐜板湪鍙互淇濇寔涓嶅彉锛屽洜涓烘垜浠凡缁忓湪updateFormValue涓鐞嗕簡formValues鐨勬洿鏂�
+ // 濡傛灉闇�瑕佸叾浠栧鐞嗭紝鍙互鍦ㄨ繖閲屾坊鍔�
+ },
+
+ // 琛ㄥ崟鎻愪氦澶勭悊
+ handleFormSubmit() {
+ // 浣跨敤鏂扮殑formValues鏁版嵁缁撴瀯
+ const formData = this.formValues;
+
+ console.log('琛ㄥ崟鏁版嵁:', formData);
+ // 杩欓噷鍙互娣诲姞瀹為檯鐨勮〃鍗曟彁浜ら�昏緫
+ // 浣跨敤setTimeout寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ uni.showToast({
+ title: '琛ㄥ崟鎻愪氦鎴愬姛',
+ icon: 'success'
+ });
+ }, 100);
+ },
+
numCheck(val) {
if (this.wholesaleList && this.wholesaleList.length > 0) {
if (this.num <= this.wholesaleList[0].num) {
- uni.showToast({
- title: '鎵瑰彂鍟嗗搧璐拱鏁伴噺涓嶈兘灏忎簬璧锋壒鏁伴噺!',
- duration: 2000,
- icon: 'none'
- });
+ // 浣跨敤setTimeout寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ uni.showToast({
+ title: '鎵瑰彂鍟嗗搧璐拱鏁伴噺涓嶈兘灏忎簬璧锋壒鏁伴噺!',
+ duration: 2000,
+ icon: 'none'
+ });
+ }, 100);
this.num = this.wholesaleList[0].num;
}
}
},
closeMask() {
this.$emit('closeBuy', false);
+ },
+
+ // 澶勭悊寮圭獥杈撳叆浜嬩欢锛岄伩鍏嶇洿鎺ヤ慨鏀筽rop
+ handlePopupInput(val) {
+ this.$emit('closeBuy', val);
},
/**鐐瑰嚮瑙勬牸 */
@@ -285,11 +690,14 @@
goodsId: this.goodsDetail.goodsId
});
} else {
- uni.showToast({
- title: '鏆傛棤璇ュ晢鍝�!',
- duration: 2000,
- icon: 'none'
- });
+ // 浣跨敤setTimeout寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ uni.showToast({
+ title: '鏆傛棤璇ュ晢鍝�!',
+ duration: 2000,
+ icon: 'none'
+ });
+ }, 100);
}
},
@@ -299,9 +707,12 @@
buy(data) {
API_trade.addToCart(data).then(res => {
if (res.data.success) {
- uni.navigateTo({
- url: `/pages/order/fillorder?way=${data.cartType}&addr=${''}&parentOrder=${encodeURIComponent(JSON.stringify(this.parentOrder))}`
- });
+ // 浣跨敤setTimeout寤惰繜璺宠浆锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ uni.navigateTo({
+ url: `/pages/order/fillorder?way=${data.cartType}&addr=${''}&parentOrder=${encodeURIComponent(JSON.stringify(this.parentOrder))}`
+ });
+ }, 100);
}
});
},
@@ -310,11 +721,15 @@
* 娣诲姞鍒拌喘鐗╄溅鎴栬喘涔�
*/
addToCartOrBuy(val) {
+ console.log(JSON.stringify(this.formValues))
if (!this.selectSkuList) {
- uni.showToast({
- title: '璇烽�夋嫨瑙勬牸鍟嗗搧',
- icon: 'none'
- });
+ // 浣跨敤setTimeout寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ uni.showToast({
+ title: '璇烽�夋嫨瑙勬牸鍟嗗搧',
+ icon: 'none'
+ });
+ }, 100);
return;
}
let data = {
@@ -325,10 +740,13 @@
if (val == 'cart') {
API_trade.addToCart(data).then(res => {
if (res.data.code == 200) {
- uni.showToast({
- title: '鍟嗗搧宸叉坊鍔犲埌璐墿杞�',
- icon: 'none'
- });
+ // 浣跨敤setTimeout寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ uni.showToast({
+ title: '鍟嗗搧宸叉坊鍔犲埌璐墿杞�',
+ icon: 'none'
+ });
+ }, 100);
this.$emit('queryCart');
this.closeMask();
@@ -346,9 +764,12 @@
API_trade.addToCart(data).then(res => {
if (res.data.code == 200) {
- uni.navigateTo({
- url: `/pages/order/fillorder?way=${data.cartType}&addr=${this.addr.id || ''}&parentOrder=${encodeURIComponent(JSON.stringify(this.parentOrder))}`
- });
+ // 浣跨敤setTimeout寤惰繜璺宠浆锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ uni.navigateTo({
+ url: `/pages/order/fillorder?way=${data.cartType}&addr=${this.addr.id || ''}&template=${encodeURIComponent(JSON.stringify(this.formValues))}&parentOrder=${encodeURIComponent(JSON.stringify(this.parentOrder))}`
+ });
+ }, 100);
}
});
}
@@ -380,6 +801,7 @@
return i.value === values.value;
})
) {
+ // 浣跨敤鐩存帴璧嬪�艰�屼笉鏄痶his.$set
arrItem.values.push(values);
}
@@ -387,6 +809,7 @@
return key.name;
});
if (!keys.includes(name)) {
+ // 浣跨敤鐩存帴璧嬪�艰�屼笉鏄痶his.$set
arr.push({
name: name,
values: [values]
@@ -397,6 +820,7 @@
});
arr.shift();
+ // 浣跨敤鐩存帴璧嬪�艰�屼笉鏄痶his.$set
this.formatList = arr;
list.forEach(item => {
@@ -405,6 +829,7 @@
item.specValues
.filter(i => i.specName !== 'images')
.forEach((value, _index) => {
+ // 浣跨敤鐩存帴璧嬪�艰�屼笉鏄痶his.$set
this.currentSelected[_index] = value.specValue;
this.selectName = value.specValue;
@@ -417,15 +842,60 @@
}
});
+ // 浣跨敤鐩存帴璧嬪�艰�屼笉鏄痶his.$set
this.skuList = list;
// console.log(" this.skuList", this.skuList)
+ },
+
+ // 棰勫姞杞芥ā鏉垮浘鐗囩殑棰勮鍦板潃
+ async preloadTemplateImages() {
+ if (this.consumizetemplateInfo && this.consumizetemplateInfo.templateImgs) {
+ for (const img of this.consumizetemplateInfo.templateImgs) {
+ await this.fetchFilePreviewUrl(img.imgUrl);
+ }
+ }
+ },
+
+ // 鑾峰彇鏂囦欢棰勮鍦板潃(鍚屾鐗堟湰)
+ getFilePreviewUrlSync(fileKey) {
+ // 濡傛灉鏄畬鏁寸殑URL锛岀洿鎺ヨ繑鍥�
+ if (fileKey && (fileKey.startsWith('http://') || fileKey.startsWith('https://'))) {
+ return fileKey;
+ }
+ // 濡傛灉鏈夐瑙堝湴鍧�锛岃繑鍥為瑙堝湴鍧�
+ if (this.previewUrls && this.previewUrls[fileKey]) {
+ return this.previewUrls[fileKey];
+ }
+ // 鍚﹀垯杩斿洖鍘熷鍊�
+ return fileKey;
+ },
+
+ // 鍒濆鍖栨ā鏉胯〃鍗曟暟鎹�
+ initTemplateFormData() {
+ if (this.consumizetemplateInfo && this.consumizetemplateInfo.templateConstomizeTitles) {
+ // 鍒濆鍖杅ormValues鐨勫熀鏈俊鎭�
+ this.formValues.templateId = this.consumizetemplateInfo.id;
+ this.formValues.templateName = this.consumizetemplateInfo.name;
+ this.formValues.chooseImage = "";
+ this.formValues.templateForm = [];
+ }
}
},
mounted() {
- this.formatSku(this.goodsSpec);
+ // 浣跨敤setTimeout寤惰繜鎵ц锛岄伩鍏嶅奖鍝嶅脊绐�
+ setTimeout(() => {
+ this.formatSku(this.goodsSpec);
+ this.initCOS(); // 鍒濆鍖朇OS瀹㈡埛绔�
+
+ // 棰勫姞杞芥ā鏉垮浘鐗囩殑棰勮鍦板潃
+ this.preloadTemplateImages();
- console.log("goodsDetail",this.goodsDetail)
+ // 鍒濆鍖栨ā鏉胯〃鍗曟暟鎹�
+ this.initTemplateFormData();
+
+ console.log("goodsDetail",this.goodsDetail)
+ }, 100);
}
};
</script>
@@ -580,4 +1050,137 @@
color: #333;
}
}
-</style>
+
+// 妯℃澘鏍峰紡
+.template {
+ padding: 20rpx;
+}
+
+.template-title {
+ margin-bottom: 30rpx;
+ text-align: center;
+}
+
+.title-text {
+ font-size: 36rpx;
+ font-weight: bold;
+ color: #333;
+}
+
+// 鍥剧墖閫夋嫨鍖哄煙
+.template-images {
+ margin-bottom: 40rpx;
+}
+
+.images-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20rpx;
+}
+
+.image-item {
+ width: calc((100% - 40rpx) / 3);
+ height: 200rpx;
+ border: 2rpx solid #e0e0e0;
+ border-radius: 10rpx;
+ overflow: hidden;
+ position: relative;
+
+ &.selected {
+ border-color: #ff6b00;
+ box-shadow: 0 0 10rpx rgba(255, 107, 0, 0.5);
+ }
+}
+
+.selected-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.3);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.image-preview {
+ width: 100%;
+ height: 100%;
+}
+
+// 琛ㄥ崟鍖哄煙
+.template-form {
+
+}
+
+.form-item {
+ margin-bottom: 30rpx;
+}
+
+.form-label {
+ display: block;
+ margin-bottom: 15rpx;
+ font-size: 28rpx;
+ color: #333;
+}
+
+.form-input {
+ width: 100%;
+ height: 80rpx;
+ padding: 0 20rpx;
+ border: 2rpx solid #e0e0e0;
+ border-radius: 10rpx;
+ font-size: 28rpx;
+ box-sizing: border-box;
+}
+
+.form-upload {
+ margin-top: 15rpx;
+}
+
+// 鍥剧墖涓婁紶鏍峰紡
+.upload-btn {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 150rpx;
+ height: 150rpx;
+ border: 2rpx dashed #ccc;
+ border-radius: 10rpx;
+ background-color: #f8f8f8;
+}
+
+.upload-text {
+ font-size: 24rpx;
+ color: #999;
+ margin-top: 10rpx;
+}
+
+.image-preview-container {
+ position: relative;
+ width: 150rpx;
+ height: 150rpx;
+ margin-top: 10rpx;
+}
+
+.uploaded-image {
+ width: 100%;
+ height: 100%;
+ border-radius: 10rpx;
+}
+
+.delete-icon {
+ position: absolute;
+ top: -10rpx;
+ right: -10rpx;
+ background-color: #ff6b00;
+ border-radius: 50%;
+ width: 30rpx;
+ height: 30rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0