付款页面新增按钮

2025-02-17 15:24:01 +08:00
parent 2ecff5c060 b70106e821
commit e85c7c5263
35 changed files with 1209 additions and 188 deletions
--- a/src/component/DetailCopy/canvas/index.vue
+++ b/src/component/DetailCopy/canvas/index.vue
@@ -0,0 +1,121 @@
+<template>
+    <div class="canvasBox">
+		<!-- designDetailShow -->
+		<!-- :class="[driver__.driver?'hideEvents':'']" -->
+		 <div class="canvasContent">
+			<div class="argument-box">
+				<argument ref="argument" v-if="canvasObj.canvas"></argument>
+			</div>
+			<div class="canvas">
+				<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
+				<div class="canvas">
+					<canvasContent ref="canvasContent"></canvasContent>
+				</div>
+			</div>
+		 </div>
+		
+		<!-- <div class="mark_loading" v-show="isShowMark">
+			<a-spin size="large" />
+		</div> -->
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
+import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+
+import canvasGeneral from "@/tool/canvasGeneralCopy";
+import argument from './argument.vue'
+import canvasContent from './canvasContent.vue'
+import tool from "./tool.vue"
+
+export default defineComponent({
+    components:{
+		tool,argument,canvasContent,
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+      
+		const detailDom = reactive({
+			model:null
+		})
+		const userDetail = computed(()=>{
+			return store.state.UserHabit.userDetail
+		})
+		const detailData = reactive({
+			canvasObj:canvasGeneral,
+
+
+			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			designDetailShow:false,
+			loadingShow:false,
+			isEditPattern:{
+				value:false,
+			},// 是否编辑图案
+		})
+ 	
+		onBeforeUnmount(()=>{
+		})
+        return{
+			...toRefs(detailDom),
+			...toRefs(detailData),
+        }
+    },
+	provide() {
+		return {
+		}
+	},
+	mounted(){
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .canvasBox{
+		flex: 1;
+		overflow: hidden;
+		// top: -100%;
+		display: flex;
+		align-items: center;
+		.argument-box,
+		.canvas,
+		.detail-box{
+			:deep(i){
+				font-size: 2.5rem;
+				cursor: pointer;
+				width: 3rem;
+				height: 3rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+				transition: all .3s;
+				margin-bottom: .5rem;
+				&.active{
+					border: 1px solid;
+					border-radius: .4rem;
+				}
+				&.icon-xiala{
+					transform: rotate(-90deg);
+				}
+				&.icon-xialaActive{
+					transform: rotate(90deg);
+				}
+			}
+		}
+		.canvasContent{
+			height: 73rem;
+			width: 100%;
+			border: 2px solid #000;
+			border-radius: 3rem;
+			padding: 4rem;
+		}
+		
+	}
+</style>