海报

ghsApp/src/admin/item/components/item-poster-popup.vue

@@ -1,149 +1,285 @@
-<template>
-	<uni-popup ref="posterPopup" background-color="transparent" type="top" :animation="true" class="poster-popup-root">
-		<view class="poster-popup-wrap">
-			<view class="poster-popup-head">
-				<text class="poster-popup-title">{{ title }}</text>
-				<text class="poster-close" @click="onClose">×</text>
-			</view>
-			<view class="poster-body">
-				<view class="poster-img-wrap">
-					<image class="poster-img" :src="posterUrl" mode="widthFix" show-menu-by-longpress />
-				</view>
-				<text class="poster-tip">长按图片可保存，或点击下方按钮</text>
-				<view class="poster-actions">
-					<button class="admin-button-com big default poster-action-btn" @click="onClose">取消</button>
-					<button class="admin-button-com big blue poster-action-btn" @click="onSave">保存到相册</button>
-				</view>
-			</view>
-		</view>
-	</uni-popup>
-</template>
-
-<script>
-export default {
-	name: 'ItemPosterPopup',
-	props: {
-		posterUrl: {
-			type: String,
-			default: ''
-		},
-		title: {
-			type: String,
-			default: '分享海报'
-		}
-	},
-	methods: {
-		open() {
-			this.$refs.posterPopup.open('top')
-		},
-		close() {
-			this.$refs.posterPopup.close()
-		},
-		onClose() {
-			this.close()
-			this.$emit('close')
-		},
-		onSave() {
-			this.$emit('save')
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.poster-popup-root {
-	z-index: 999999;
-}
-
-::v-deep .uni-popup.top .uni-popup__wrapper {
-	width: 100% !important;
-	display: flex !important;
-	justify-content: center !important;
-	align-items: flex-start !important;
-}
-
-.poster-popup-wrap {
-	display: flex;
-	width: 100%;
-	padding: 28upx 0 36upx;
-	flex-direction: column;
-	align-items: stretch;
-	max-height: 92vh;
-	overflow: auto;
-	background: #fff;
-	border-radius: 0 0 24upx 24upx;
-	box-shadow: 0 16upx 48upx rgba(0, 0, 0, 0.18);
-	box-sizing: border-box;
-}
-
-.poster-popup-head {
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0 28upx;
-	margin-bottom: 8upx;
-	box-sizing: border-box;
-}
-
-.poster-popup-title {
-	font-size: 32upx;
-	font-weight: 600;
-	color: #1a1a1a;
-}
-
-.poster-close {
-	font-size: 52upx;
-	line-height: 1;
-	color: #999;
-	padding: 0 8upx;
-}
-
-.poster-body {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-.poster-img-wrap {
-	width: 100%;
-	display: flex;
-	justify-content: center;
-	margin-top: 16upx;
-	padding: 0 28upx;
-	box-sizing: border-box;
-}
-
-.poster-img {
-	width: 100%;
-	max-width: 640upx;
-	border-radius: 12upx;
-	box-shadow: 0 8upx 24upx rgba(0, 0, 0, 0.12);
-}
-
-.poster-tip {
-	margin-top: 20upx;
-	font-size: 24upx;
-	color: #999;
-	text-align: center;
-}
-
-.poster-actions {
-	width: 100%;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	margin-top: 28upx;
-	padding: 0 28upx;
-	box-sizing: border-box;
-}
-
-.poster-action-btn {
-	flex: 1;
-}
-
-.poster-action-btn + .poster-action-btn {
-	margin-left: 24upx;
-}
-</style>
+<template>
+
+	<uni-popup ref="posterPopup" background-color="transparent" type="top" :animation="true" class="poster-popup-root">
+
+		<view class="poster-popup-wrap">
+
+			<view class="poster-popup-head">
+				<view class="poster-popup-head-side"></view>
+				<text class="poster-popup-title">{{ title }}</text>
+				<text class="poster-close" @click="onClose">×</text>
+			</view>
+
+			<view class="poster-body">
+
+				<view class="poster-img-wrap">
+
+					<image class="poster-img" :src="posterUrl" mode="widthFix" show-menu-by-longpress />
+
+				</view>
+
+				<text class="poster-tip">长按图片可保存，或点击下方按钮</text>
+
+				<view class="poster-actions">
+
+					<button class="admin-button-com big default poster-action-btn" @click="onClose">取消</button>
+
+					<button class="admin-button-com big blue poster-action-btn" @click="onSave">保存到相册</button>
+
+				</view>
+
+			</view>
+
+		</view>
+
+	</uni-popup>
+
+</template>
+
+
+
+<script>
+
+export default {
+
+	name: 'ItemPosterPopup',
+
+	props: {
+
+		posterUrl: {
+
+			type: String,
+
+			default: ''
+
+		},
+
+		title: {
+
+			type: String,
+
+			default: '分享海报'
+
+		}
+
+	},
+
+	methods: {
+
+		open() {
+
+			this.$refs.posterPopup.open('top')
+
+		},
+
+		close() {
+
+			this.$refs.posterPopup.close()
+
+		},
+
+		onClose() {
+
+			this.close()
+
+			this.$emit('close')
+
+		},
+
+		onSave() {
+
+			this.$emit('save')
+
+		}
+
+	}
+
+}
+
+</script>
+
+
+
+<style lang="scss" scoped>
+
+.poster-popup-root {
+
+	z-index: 999999;
+
+}
+
+
+
+::v-deep .uni-popup.top .uni-popup__wrapper {
+
+	width: 100% !important;
+
+	display: flex !important;
+
+	justify-content: center !important;
+
+	align-items: flex-start !important;
+
+}
+
+
+
+.poster-popup-wrap {
+
+	display: flex;
+
+	width: 100%;
+
+	padding: 28upx 0 36upx;
+
+	flex-direction: column;
+
+	align-items: stretch;
+
+	max-height: 92vh;
+
+	overflow: auto;
+
+	background: #fff;
+
+	border-radius: 0 0 24upx 24upx;
+
+	box-shadow: 0 16upx 48upx rgba(0, 0, 0, 0.18);
+
+	box-sizing: border-box;
+
+}
+
+
+
+.poster-popup-head {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	padding: 0 28upx;
+	margin-bottom: 8upx;
+	box-sizing: border-box;
+}
+
+.poster-popup-head-side {
+	width: 60upx;
+	flex-shrink: 0;
+}
+
+.poster-popup-title {
+	flex: 1;
+	font-size: 32upx;
+	font-weight: 600;
+	color: #1a1a1a;
+	text-align: center;
+}
+
+.poster-close {
+	width: 60upx;
+	flex-shrink: 0;
+	font-size: 52upx;
+	line-height: 1;
+	color: #999;
+	text-align: right;
+	padding: 0 8upx;
+	box-sizing: border-box;
+}
+
+
+
+.poster-body {
+
+	width: 100%;
+
+	display: flex;
+
+	flex-direction: column;
+
+	align-items: center;
+
+}
+
+
+
+.poster-img-wrap {
+
+	width: 100%;
+
+	display: flex;
+
+	justify-content: center;
+
+	margin-top: 16upx;
+
+	padding: 0 28upx;
+
+	box-sizing: border-box;
+
+}
+
+
+
+.poster-img {
+
+	width: 100%;
+
+	max-width: 640upx;
+
+	border-radius: 12upx;
+
+	box-shadow: 0 8upx 24upx rgba(0, 0, 0, 0.12);
+
+}
+
+
+
+.poster-tip {
+
+	margin-top: 20upx;
+
+	font-size: 24upx;
+
+	color: #999;
+
+	text-align: center;
+
+}
+
+
+
+.poster-actions {
+
+	width: 100%;
+
+	display: flex;
+
+	flex-direction: row;
+
+	align-items: center;
+
+	margin-top: 28upx;
+
+	padding: 0 28upx;
+
+	box-sizing: border-box;
+
+}
+
+
+
+.poster-action-btn {
+
+	flex: 1;
+
+}
+
+
+
+.poster-action-btn + .poster-action-btn {
+
+	margin-left: 24upx;
+
+}
+
+</style>
+

ghsApp/src/admin/item/mixins/itemPosterMixin.js

@@ -2,7 +2,7 @@ import { getSkPoster, getHdPoster } from '@/api/item'
 
 /**
  * 使用 ItemStock(item2) 的花材列表页需混入：更多菜单中提供「生成海报」
- * posterType: 'hd' 花店采购 | 'sk' 散客商城
+ * posterType: 'hd' 批发 | 'sk' 零售
  */
 export default {
 	data() {
@@ -27,7 +27,7 @@ export default {
 			}
 			const isHd = posterType === 'hd'
 			const request = isHd ? getHdPoster : getSkPoster
-			this.posterPopupTitle = isHd ? '花店采购海报' : '散客分享海报'
+			this.posterPopupTitle = isHd ? '批发分享海报' : '零售分享海报'
 			const that = this
 			uni.showLoading({ mask: true })
 			request({ id, env_version: this.$util.getMiniEnvVersion() }).then(res => {

hdApp/src/components/item-poster-popup.vue

@@ -2,6 +2,7 @@
 	<uni-popup ref="posterPopup" background-color="transparent" type="top" :animation="true" class="poster-popup-root">
 		<view class="poster-popup-wrap">
 			<view class="poster-popup-head">
+				<view class="poster-popup-head-side"></view>
 				<text class="poster-popup-title">{{ title }}</text>
 				<text class="poster-close" @click="onClose">×</text>
 			</view>
@@ -80,23 +81,33 @@ export default {
 	width: 100%;
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
 	padding: 0 28upx;
 	margin-bottom: 8upx;
 	box-sizing: border-box;
 }
 
+.poster-popup-head-side {
+	width: 60upx;
+	flex-shrink: 0;
+}
+
 .poster-popup-title {
+	flex: 1;
 	font-size: 32upx;
 	font-weight: 600;
 	color: #1a1a1a;
+	text-align: center;
 }
 
 .poster-close {
+	width: 60upx;
+	flex-shrink: 0;
 	font-size: 52upx;
 	line-height: 1;
 	color: #999;
+	text-align: right;
 	padding: 0 8upx;
+	box-sizing: border-box;
 }
 
 .poster-body {