关注公众号

src/components/User/UserCard.vue

 <template>
-  <div class="items-center row">
+  <div class="items-center row" ref="UserCardRef">
     <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713433759000_282.png"
                 style="height: 33px" @click="forwardProduct" class="cusor-pointer"/>
     <div class="primary-link-button q-ml-lg cusor-pointer no-select" @click="addVisible=true">创建设计</div>
@@ -85,7 +85,7 @@
       /></el-icon>
       <template #dropdown>
         <div class="MarketPopoverMore row wrap pointer">
-          <div class="column" v-for="(item, index) in moreList" @click="forward(item.Url)">
+          <div class="column" v-for="(item, index) in moreList" @click="forward(item)">
             <div>
               <img :src="item.icon" width="34" height="34" />
             </div>
@@ -98,6 +98,7 @@
   <!-- 创建设计 -->
   <temDesign :addTem="addVisible" @close="addVisible=false"/>
   <OrderReview v-if="orderVisible" :show-person="isShowPerson" :default-type="isShowPerson?1:2" @close="()=>orderVisible=false"></OrderReview>
+  <follow v-if="followVisible" @close="followVisible=false"></follow>
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
@@ -133,22 +134,32 @@ const format = (percentage: number) => {
     return percentage == 100 ? '' : ``
 }
 const moreList = [
-  { icon: require("@/assets/img/homeMore0.png"), Name: "添加到桌面" },
-  { icon: require("@/assets/img/homeMore1.png"), Name: "关注公众号" },
-  { icon: require("@/assets/img/homeMore2.png"), Name: "我的订单", Url:'/u/order' },
-  { icon: require("@/assets/img/homeMore3.png"), Name: "意见反馈", Url:'https://work.weixin.qq.com/kfid/kfc378aada578ca8b0e' },
+  { icon: require("@/assets/img/homeMore0.png"), Name: "添加到桌面",Id:1 },
+  { icon: require("@/assets/img/homeMore1.png"), Name: "关注公众号",Id:2  },
+  { icon: require("@/assets/img/homeMore2.png"), Name: "我的订单", Url:'/u/order',Id:3 },
+  { icon: require("@/assets/img/homeMore3.png"), Name: "意见反馈", Url:'https://work.weixin.qq.com/kfid/kfc378aada578ca8b0e',Id:4 },
 ];
 
 const TravelDesign = ref({} as any)
+const followVisible = ref(false)
+const UserCardRef = ref()
+
 
 const forwardUserCenter = ()=>{
   router.push('/u')
 }
-const forward = (url:string|undefined)=>{
-  if(url){
+const forward = (item:any)=>{
+  if(item.url){
     if(url.includes('http://')||url.includes('https://')) openNewBlank(url)
     else router.push(url)
   }
+  if(item.Id==2) {
+    followVisible.value = true
+    if(UserCardRef.value){
+      UserCardRef.value.click()
+    }
+  }
+  
 }
 const loginOutHandler = ()=>{
     useUser.setUserLoginOut()

src/components/home/follow.vue

+<template>
+    <div class="followForm">
+        <div class="followForm-bj"></div>
+        <div class="followBox row flex-center">
+            <div class="followBox-center">
+                <img src="../../assets//img/follow.png" 
+                style="height: 33.7vw;"/> 
+                <span class="close-btn cursor-pointer column items-center flex-center"
+             @click="close"><IconClose size="0.83vw"></IconClose></span>
+             <div class="pa followBoxQR" style="font-size: 0.73vw;" v-loading="qrLoading">
+                <QRCode :value="qrCode" style="width: 13.95vw;height: auto;" v-if="!qrLoading"></QRCode>
+                <QRCode value="http://www.viitto.com" style="width: 13.95vw;height: auto;" v-if="qrLoading"></QRCode>
+             </div>
+            </div>
+        </div>
+        
+        
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue'
+import { useRouter } from "vue-router";
+import { storeToRefs } from 'pinia'
+import { useScreenStore } from '@/store'
+import { ApiResult } from '@/configs/axios'
+import WechatSerice from '@/services/WechatSerice'
+const qrCode = ref('none')
+const qrLoading = ref(false)
+const router = useRouter();
+
+const { market, model, ConfigId, CoverImg, dataLoading } = storeToRefs(useScreenStore())
+
+const props = defineProps({
+    DetaTem:{
+        type: Boolean,
+        default: false,
+    },
+    Details:{
+        type: Object,
+        default: {},
+    }
+})
+const params = reactive({
+    ConfigId: '' as any,
+    TCID: '' as any,
+})
+const emit = defineEmits<{
+    (event: 'close'): void,
+}>()
+
+const close = () => {
+    emit('close')
+}
+if(model.value==0 && ConfigId.value) params.ConfigId = ConfigId.value
+const getQrcode = async () => {
+    qrLoading.value = true
+    const response = await WechatSerice.GetShowQrcode({})
+    if(response.data.resultCode == ApiResult.SUCCESS){
+       qrCode.value = response.data.data
+    }
+    qrLoading.value = false
+}
+
+const goVipIntroduce = () =>{
+    router.push({
+        path:`/p/show`
+    })
+}
+getQrcode()
+</script>
+
+<style lang="scss" scoped>
+.followForm,.followForm-bj{
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 10;
+}
+.followForm-bj{
+    background: #000;
+    opacity: 0.6;
+    z-index: 11;
+}
+.followBox{
+    position: relative;
+    z-index: 12;
+}
+.followBox-center{
+    position: relative;
+    top: 9.32vw;
+}
+.followBox .close-btn{
+    position: absolute;
+    top: 1.98vw;
+    right: -3vw;
+    width: 1.77vw;
+    height: 1.77vw;
+    border:2px solid #AFAFAF;
+    text-align: center;
+    color:#AFAFAF;
+    border-radius: 50%;
+}
+.followBox .close-btn:hover{
+    color: #FFF;
+    border-color: #FFF;
+}
+.followBoxQR{
+    width: 13.95vw;
+    position: absolute;
+    left: 4.55vw;
+    top: 9.7vw;
+    /* background: red; */
+    border-radius: .7vw;
+}  
+</style>
\ No newline at end of file

src/components/home/temDesign.vue

@@ -123,12 +123,6 @@ const datas = reactive({
     loading: false,
     ColorValue: '',
     scrollTop: 0,
-    moreList:[
-        {icon: require("@/assets/img/homeMore0.png"),Name:'添加到桌面'},
-        {icon: require("@/assets/img/homeMore1.png"),Name:'关注公众号'},
-        {icon: require("@/assets/img/homeMore2.png"),Name:'我的订单'},
-        {icon: require("@/assets/img/homeMore3.png"),Name:'意见反馈'},
-    ],
     CustomSize:{ // 自定义尺寸
         width: null,
         height: null,

src/services/WechatSerice.ts

+import Api,{ HttpResponse, Result } from './../utils/request';
+
+
+class WechatSerice{
+
+    static async GetShowQrcode(params:any):Promise<HttpResponse>{
+        return Api.Post("Wechat_QrCode_GetShowQrcode",params)
+    }
+
+}
+export default WechatSerice;
\ No newline at end of file

src/views/Market/Index.vue

@@ -246,6 +246,7 @@ import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 import foote from '@/components/footer/index.vue';
 import temDetails from "@/components/home/temDetails.vue";
 import vipFooter from "@/components/home/vipFooter.vue";
+import follow from "@/components/home/follow.vue";
 import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
 import 'vue-waterfall-plugin-next/dist/style.css'
 
@@ -299,6 +300,7 @@ const datas = reactive({
     TemDetails: {}
 })
 const DetailsVisible = ref(false)
+
 let TemplateType = 0
 if(router.currentRoute.value.path=='/market') model.value=1
 if(router.currentRoute.value.path.includes('create')) {

src/views/TemplateCenter/Index.vue

@@ -278,12 +278,6 @@ const datas = reactive({
   loading: false,
   ColorValue: '',
   scrollTop: 0,
-  moreList:[
-      {icon: require("@/assets/img/homeMore0.png"),Name:'添加到桌面'},
-      {icon: require("@/assets/img/homeMore1.png"),Name:'关注公众号'},
-      {icon: require("@/assets/img/homeMore2.png"),Name:'我的订单'},
-      {icon: require("@/assets/img/homeMore3.png"),Name:'意见反馈'},
-  ],
   CustomSize:{ // 自定义尺寸
       width: null,
       height: null,