|
|
@@ -2,50 +2,6 @@
|
|
|
<view class="poster-overlay" v-if="show" @click.self="$emit('close')">
|
|
|
<view class="poster-container">
|
|
|
<canvas canvas-id="contentPosterCanvas" class="poster-canvas" id="contentPosterCanvas"></canvas>
|
|
|
- <!-- 模板选择 -->
|
|
|
- <view class="poster-tpl-row">
|
|
|
- <view class="tpl-label">海报模板</view>
|
|
|
- <view class="tpl-options">
|
|
|
- <view
|
|
|
- class="tpl-option"
|
|
|
- :class="{ 'tpl-active': template === 'gradient' }"
|
|
|
- @click="switchTemplate('gradient')"
|
|
|
- >
|
|
|
- <view class="tpl-dot tpl-dot-grad"></view>
|
|
|
- <text class="tpl-text">渐变</text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="tpl-option"
|
|
|
- :class="{ 'tpl-active': template === 'minimal' }"
|
|
|
- @click="switchTemplate('minimal')"
|
|
|
- >
|
|
|
- <view class="tpl-dot tpl-dot-dark"></view>
|
|
|
- <text class="tpl-text">深色</text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="tpl-option"
|
|
|
- :class="{ 'tpl-active': template === 'card' }"
|
|
|
- @click="switchTemplate('card')"
|
|
|
- >
|
|
|
- <view class="tpl-dot tpl-dot-light"></view>
|
|
|
- <text class="tpl-text">卡片</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 背景颜色选择(渐变模板可用) -->
|
|
|
- <view class="poster-bg-row" v-if="template === 'gradient'">
|
|
|
- <view class="tpl-label">背景色</view>
|
|
|
- <view class="bg-options">
|
|
|
- <view
|
|
|
- v-for="(c, i) in bgColors"
|
|
|
- :key="i"
|
|
|
- class="bg-option"
|
|
|
- :class="{ 'bg-active': bgColor === c }"
|
|
|
- :style="{ background: c }"
|
|
|
- @click="switchBgColor(c)"
|
|
|
- ></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
<view class="poster-actions">
|
|
|
<button class="poster-btn save" @click="savePoster">保存到相册</button>
|
|
|
</view>
|
|
|
@@ -89,10 +45,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
- return {
|
|
|
- // 可选的背景色(渐变模板下展示)
|
|
|
- bgColors: ['#FF8C42', '#6366F1', '#F59E0B', '#10B981', '#FF6B9D', '#1E293B', '#FFFFFF']
|
|
|
- }
|
|
|
+ return {}
|
|
|
},
|
|
|
methods: {
|
|
|
getColors() {
|
|
|
@@ -143,7 +96,7 @@ export default {
|
|
|
var scaleY = 1
|
|
|
if (rect && rect.width && rect.height) {
|
|
|
scaleX = rect.width / 500
|
|
|
- scaleY = rect.height / 633
|
|
|
+ scaleY = rect.height / 800
|
|
|
}
|
|
|
self._renderPoster(scaleX, scaleY)
|
|
|
})
|
|
|
@@ -624,27 +577,12 @@ export default {
|
|
|
ctx.closePath()
|
|
|
},
|
|
|
|
|
|
- switchTemplate(tpl) {
|
|
|
- this.$emit('update:template', tpl)
|
|
|
- var self = this
|
|
|
- this.$nextTick(function() {
|
|
|
- setTimeout(self.drawPoster.bind(self), 100)
|
|
|
- })
|
|
|
- },
|
|
|
- switchBgColor(color) {
|
|
|
- this.$emit('update:bgColor', color)
|
|
|
- var self = this
|
|
|
- this.$nextTick(function() {
|
|
|
- setTimeout(self.drawPoster.bind(self), 100)
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
savePoster() {
|
|
|
var self = this
|
|
|
uni.canvasToTempFilePath({
|
|
|
canvasId: 'contentPosterCanvas',
|
|
|
destWidth: 500,
|
|
|
- destHeight: 633,
|
|
|
+ destHeight: 800,
|
|
|
success: function(res) {
|
|
|
uni.saveImageToPhotosAlbum({
|
|
|
filePath: res.tempFilePath,
|
|
|
@@ -699,7 +637,8 @@ export default {
|
|
|
}
|
|
|
.poster-canvas {
|
|
|
width: 620rpx;
|
|
|
- height: 792rpx;
|
|
|
+ height: 992rpx;
|
|
|
+ margin-bottom: 80rpx;
|
|
|
border-radius: 16rpx;
|
|
|
}
|
|
|
.poster-actions {
|
|
|
@@ -723,63 +662,5 @@ export default {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
.poster-btn.save:active { opacity: 0.85; }
|
|
|
-.poster-tpl-row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 12rpx 0;
|
|
|
- font-size: 24rpx;
|
|
|
-}
|
|
|
-.tpl-label {
|
|
|
- margin-right: 20rpx;
|
|
|
- color: #666;
|
|
|
-}
|
|
|
-.tpl-options {
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-.tpl-option {
|
|
|
- flex: 1;
|
|
|
- margin: 0 4rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.tpl-dot {
|
|
|
- width: 24rpx;
|
|
|
- height: 24rpx;
|
|
|
- border-radius: 999rpx;
|
|
|
- margin-bottom: 4rpx;
|
|
|
-}
|
|
|
-.tpl-dot-grad { background: linear-gradient(135deg, #FF8C42, #EA580C); }
|
|
|
-.tpl-dot-dark { background: #1E293B; }
|
|
|
-.tpl-dot-light { background: #FFFFFF; }
|
|
|
-.tpl-text {
|
|
|
- font-size: 14rpx;
|
|
|
- text-align: center;
|
|
|
- color: #666;
|
|
|
-}
|
|
|
-.tpl-active .tpl-text { color: #F97316; }
|
|
|
|
|
|
-.poster-bg-row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 12rpx 0;
|
|
|
- font-size: 24rpx;
|
|
|
-}
|
|
|
-.bg-label {
|
|
|
- margin-right: 20rpx;
|
|
|
- color: #666;
|
|
|
-}
|
|
|
-.bg-options {
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-.bg-option {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- border-radius: 999rpx;
|
|
|
- margin: 0 4rpx;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.bg-active {
|
|
|
- border: 2rpx solid #F97316;
|
|
|
-}</style>
|
|
|
+</style>
|