feat:完成委托上架和广告及ui改动

package.json

@@ -68,6 +68,7 @@
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",
     "terser-webpack-plugin": "^4.2.3",
     "typescript": "~4.1.5",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "weixin-js-sdk": "^1.6.0"
   }
 }

public/index.html

@@ -10,6 +10,7 @@
     <script src="/iconfont1.js"></script>
     <script src="//at.alicdn.com/t/font_2629369_79mgwiqma0p.js"></script>
     <script src="//at.alicdn.com/t/font_2990811_y4sspu4i7kq.js"></script>
+    <!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
     <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
     <title>一幕影链</title>

src/App.vue

@@ -114,9 +114,10 @@ export default Vue.extend({
   },
 
   name: "App",
-  mounted() {
-    this.dialogStatus()
-    this.routerController();
+  async mounted() {
+    await this.dialogStatus()
+    await this.routerController();
+
   },
   methods: {
     routerController() {
@@ -188,15 +189,6 @@ export default Vue.extend({
     showDialog(){
       return this.$store.state.app.showOverImg
     },
-    // is_neizhi(): any{
-    //   const ua = navigator.userAgent.toLowerCase() as any;
-    //   if (ua.match(/MicroMessenger/i) == "micromessenger") {
-    //       return "weixin";
-    //   } else if (ua.match(/QQ/i) == "qq") {
-    //       return "QQ";
-    //   }
-    //   return false;
-    // },
   },
 });
 </script>

src/components/CardList.vue

 <template>
     <div class="list-container font-light">
-            <div class="list-row flex justify-start relative text-font-pro-color text-sm mb-3"  v-for="(i,index) in outputData" :key="index" :id="i.id">
+            <!-- <div class="list-row flex justify-start relative text-font-pro-color text-sm mb-3"  v-for="(i,index) in outputData" :key="index" :id="i.id">
               <div class='item flex flex-col w-4/12 items-center z-10 h-44 ' v-for="(k,kindex) in i" :key="kindex" @click="itemOnclick(k.nftHash)">
                   <div class='desk_img_box'>
-                    <!-- <img v-if="k.categoryId == 5" :src="k.cover?k.cover :k.fileUrl" alt="" class="desk_img rounded-md w-11/12 h-5/6 mx-auto" /> -->
                     <img :src="k.cover?k.cover :'/img/cover.png'" class="desk_img rounded-md w-11/12 h-5/6 mx-auto" />
                   </div>
                   <div class='mt-3 overflow-hidden whitespace-nowrap overflow-ellipsis w-full text-center'>
                     {{k.name}}
                   </div>
               </div>
-              <!-- <div class='absolute bottom-6 z-0 w-full '>
+              <div class='absolute bottom-6 z-0 w-full '>
                 <img src="@/assets/img/holder.png" class="w-full ">
-              </div> -->
+              </div>
             </div>
-            <div class="scroll-padding"></div>
+            <div class="scroll-padding"></div> -->
+
+        <div class="list-row flex justify-start relative text-zx-blue-light text-sm mb-3"  v-for="(i,index) in outputData" :key="index" :id="i.id">
+          <div class='item flex flex-col w-1/2 items-center z-10 h-56' v-for="(k,kindex) in i" :key="kindex" @click="itemOnclick(k.nftHash)">
+              <div class=" w-11/12 h-full mx-auto shadow rounded pt-2">
+                <div class='desk_img_box w-full'>
+                  <img :src="k.cover?k.cover :'/img/cover.png'" class="desk_img rounded-md w-full h-full mx-auto" />
+                </div>
+                <div class='overflow-hidden whitespace-nowrap overflow-ellipsis w-full text-zx-blue-light pl-2 mt-2'>
+                  {{k.name}}
+                </div>
+              </div>
           </div>
+        </div>
+    </div>
 </template>
 
 <script lang="ts">
@@ -26,7 +38,7 @@ export default Vue.extend({
   props: {
     rowSize: {
         type:Number,
-        default:3
+        default:2
     },
     data:{
         type:Array,

src/components/CollectionCard_new.vue

 <template>
-  <div class="collection_card">
+  <div class="collection_card rounded-md">
     <div class="img_box">
       <img :src="colletionData.cover?colletionData.cover:'/img/cover.png'" class="rounded-md max-h-full max-w-full" />
     </div>

src/layout/NavFooter.vue

@@ -19,6 +19,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { is_neizhi } from '@/util/common';
 
 export default Vue.extend({
   name: 'layout_one',
@@ -32,7 +33,15 @@ export default Vue.extend({
   },
   methods:{
       goNFT(){
-          this.$store.commit('app/TOGGLE_OVERLAY')
+          if(!is_neizhi()) {
+              this.$dialog({
+                  title:'提示',
+                  message: '请在微信中打开'
+              })
+          }else {
+              this.$store.commit('app/TOGGLE_OVERLAY')
+          }
+          
       },
       setNav(item:any){
           if(this.$route.name != item){

src/main.ts

@@ -13,8 +13,8 @@ import { Image as VanImage } from 'vant';
 import { Toast,Empty,Dialog,Lazyload,ActionSheet, Calendar, RadioGroup, Radio, Area  } from 'vant'
 import VConsole from 'vconsole';
 
-const vconsole = process.env.VUE_APP_ENV === 'TEST'?new VConsole():''
-// const vconsole = new VConsole()
+// const vconsole = process.env.VUE_APP_ENV === 'TEST'?new VConsole():''
+const vconsole = new VConsole()
 
 window.console.log(vconsole,'移动console');
 Vue.use(Lazyload);

src/service/wcPayService/wcPayService.ts

@@ -31,25 +31,27 @@ export class WcPayService extends Service {
     return 'Bearer ' + token.getToken()
   }
 
-  /**获取我的NFT列表 */
+  /**获取微信用户openId */
+  async getWCOpenId(code: string): Promise<{access_token: string, expires_in: number, openid: string, refresh_token: string, scope: string}> {
+    return await this.service.get('/wcOpenIdApi/sns/oauth2/access_token', {
+      params: {
+        appid:'wxbdddd81913c795e9',
+        secret: 'aa201717c46a0e07c4c143b1ee73229a',
+        code,
+        grant_type: 'authorization_code'
+
+      }
+    })
+  }
+
+  /**创建订单 */
   async createOrder(body: CreateOrderType): Promise<{ prepay_id: string }>{
-    const mchid = '1604477044'
-    const privatekey = 'D864DA53FEF8ACD41519064967DC10D2'
-    const method = 'POST'
-    const path = '/v3/pay/transactions/jsapi'
-    const timeStamp = Math.ceil(Number(new Date())/1000)
-    const random = Math.ceil(Math.random()*1000000000)
-    const cerAccount = '72A62544B0A08A214FAEC780108692EDC6E7D5FA'
-    /**生成签名 */
-    const Auth = base64.encode(sha256(`${method}\n${path}\n${timeStamp}\n${random}\n${JSON.stringify(body)}\n`, privatekey))
-    const authInfo = `WECHATPAY2-SHA256-RSA2048 mchid="${mchid}",nonce_str="${random}",serial_no="${cerAccount}",timestamp="${timeStamp}",signature="${Auth}"`
-    console.log(authInfo)
-    // return await this.service.post(this.router.createOrder.path, body, {
-    //   headers: {
-    //     Authorization: authInfo,
-    //     'Content-Type': this.router.createOrder.dataType,
-    //   },
-    // })
+    return await this.service.post(this.router.createOrder.path, body, {
+      headers: {
+        Authorization: this.getAuth(),
+        'Content-Type': this.router.createOrder.dataType,
+      },
+    })
   }
 
 

src/view/Auth/Login/Login.vue

@@ -159,6 +159,8 @@ import checkedIcon from "@/assets/icons/checked.png";
 
 import LoginSerivce from "./LoginService";
 
+import {is_neizhi} from "@/util/common"
+
 const accountType = eAccountType.NULL;
 const loginWay = eLoginWay.NULL;
 
@@ -279,6 +281,12 @@ export default Vue.extend({
         } else if (this.loginWay == eLoginWay.CODE) {
           // 调用登录接口
           await this.loginByCodeFunc(phone, code);
+          if(is_neizhi()) {
+            /**获取微信的code */
+            const ad = document.createElement('a')
+            ad.href = this.getUserCodeUrl
+            ad.click()
+          }
         }
       } catch (err) {
         console.log(err);
@@ -363,6 +371,21 @@ export default Vue.extend({
       }
       return true;
     },
+    getUserCodeUrl(){
+    function urlencode (str: string) {  
+      str = (str + '').toString();   
+      return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').  
+      replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');  
+    }
+    const url = 'https://open.weixin.qq.com/connect/oauth2/authorize'
+    const appId = "wxbdddd81913c795e9"
+    const redirect_uri = 'https://nft.inmvo.com/Mine'
+    const response_type = 'code'
+    const scope = 'snsapi_base'
+    const state = 'STATE'
+    const path = `${url}?appid=${appId}&redirect_uri=${urlencode(redirect_uri)}&response_type=${response_type}&scope=${scope}&state=${state}#wechat_redirect `
+    return path
+    }
   },
   watch: {
     phone(newV: string) {

src/view/Home/index.vue

@@ -18,7 +18,6 @@
               </van-swipe-item>
             </van-swipe>
         </div>
-        <!-- <div class=" text-white" @click="payTest">支付测试</div> -->
         <div class="container-view w-11/12 mx-auto">
           <div v-if="ready">
             <app-scrollbar :list='categoryTypes' @tabChange='getDataByCategory'></app-scrollbar>
@@ -100,25 +99,7 @@ export default Vue.extend({
     gotoMall(link?:string){
       window.location.replace(link?link:'https://mall.inmvo.com')
     },
-    async payTest(){
-      const params = {
-        appid: 'wxbdddd81913c795e9',
-        mchid: '1604477044',
-        description: '',
-        /**订单号*/
-        out_trade_no: '123456',
-        notify_url: 'https://nft.inmvo.com/',
-        amount: { 
-          total: 1, 
-          currency: 'CNY' 
-        },
-        payer: {
-          openid: ''
-        }        
-      }
-      await this.$service.wcPayService.createOrder(params)
-    }
-  }
+  },
 });
 </script>
 

src/view/Mine/index.vue

@@ -71,6 +71,8 @@ import anquanzhongxin89 from "../../assets/img/img-anquanzhongxin89.png"
 import chakan from "../../assets/img/img-chakan.png"
 import atupian from "../../assets/img/img-a-tupian.png"
 import bossyingyetingchushi from "../../assets/img/img-BOSS-yingyeting-chushi.png"
+import { is_neizhi } from "@/util/common"
+import wx from "weixin-js-sdk"
 
 Vue.use(Badge)
 const apps=[
@@ -104,7 +106,10 @@ export default Vue.extend({
     async mounted() {
        if(!token.getToken()) return 
        this.userData = await this.$service.nftService.getMyList()
-       
+       /**如果是微信里面打开的，并且携带了code，那就获取openId */
+       if(this.$route.query.code && is_neizhi()) {
+           await this.initWXConfig()
+       }
     },
   components:{ 
     'Layout-Main':()=>import('@/layout/Main.vue'),
@@ -138,6 +143,10 @@ export default Vue.extend({
     routerJump(path:void | string){
         if(!path) return
         this.$router.push(path)
+    },
+    async initWXConfig(){
+        const res = await this.$service.wcPayService.getWCOpenId(this.$route.query.code as string)
+        localStorage.setItem('openId', res.openid)
     }
   },
   computed:{

src/view/NFT/Copyright/CopyrightList/index.vue

@@ -36,6 +36,7 @@
 
 <script lang='ts'>
 import Vue from 'vue'
+import { is_neizhi } from '../../../../util/common'
 
 enum eActiveTab {
    all,
@@ -112,19 +113,24 @@ export default Vue.extend({
                await this.$service.copyrightService.deleteDraft(Number(payload.id))
                await this.getCopyrightList(this.activeTab)
             }else {
+               if(!is_neizhi()) {
+                  this.$dialog({
+                     title: '提示',
+                     message: '请在微信中打开'
+                  })
+                  return
+               }
                this.$router.push({path:'/Copyright/Step', query: {draftId: payload.id}})
             }
          /**其他类型因为接口一致，统一处理 */
          }else if(payload.selected.name == '编辑' || payload.selected.name == '重新申请') {
-            // this.CprCertificateData = {
-            //    cprHash: 'gdfsssssssssssgdsfgdfsgdsfgdsfgdsfgdsfgdsfgdsfg',
-            //    proofName: 'dfgdg',
-            //    proofFeature: 'gdfg',
-            //    proofType: 'dfgd',
-            //    evidenceUser: '上海艺儒文化投资有限公司',
-            //    evidenceTime: 'gdfgdfg',
-            // }
-            // this.showCprCer = true
+            if(!is_neizhi()) {
+               this.$dialog({
+                  title: '提示',
+                  message: '请在微信中打开'
+               })
+               return
+            }
             this.$router.push({path:'/Copyright/Step', query: {editId: payload.id}})
          }else if(payload.selected.name == '删除') {
             await this.$service.copyrightService.deleteCopyrightApply(Number(payload.id))
@@ -149,8 +155,6 @@ export default Vue.extend({
                }
                this.showCprCer = true
             }
-
-
          }else if(payload.selected.name == '查看版权证书') {
             this.$router.push({path: '/Copyright/CopyrightCer', query: {registerCode: payload.registerCode.toString()}})
          }else if(payload.selected.name == '申请纸质证书') {
@@ -162,8 +166,22 @@ export default Vue.extend({
       /**点击整个卡片后 */
       onClickCpyCard(payload: {id: string, state: string}){
          if(payload.state == '草稿'){
+            if(!is_neizhi()) {
+               this.$dialog({
+                  title: '提示',
+                  message: '请在微信中打开'
+               })
+               return
+            }
             this.$router.push({path:'/Copyright/Step', query: {draftId: payload.id}})
          }else if(payload.state == '已撤回') {
+            if(!is_neizhi()) {
+               this.$dialog({
+                  title: '提示',
+                  message: '请在微信中打开'
+               })
+               return
+            }
             this.$router.push({path:'/Copyright/Step', query: {editId: payload.id}})
          }else if(['待核验','提交审核','待审核','待终审','审核通过'].indexOf(payload.state) != -1) {
             this.$router.push({path: '/Copyright/res', query: {id: payload.id, state: payload.state, res: 'success' }})
@@ -173,6 +191,13 @@ export default Vue.extend({
       },
       /**跳转到版权申请，先检查有没有可用的存证*/
       async routerJump(){
+         if(!is_neizhi()) {
+            this.$dialog({
+               title: '提示',
+               message: '请在微信中打开'
+            })
+            return
+         }
          const traceList = await this.$service.copyrightService.getMyList()
          if(traceList && traceList.length >= 1) {
              this.showDialog = true

src/view/NFT/Copyright/CopyrightRes/index.vue

@@ -26,6 +26,7 @@ import Vue from 'vue'
 /**类型*/
 /**组件*/
 /**自定义方法*/
+import { is_neizhi } from '@/util/common'; 
 
 export default Vue.extend({
    name:'',
@@ -81,6 +82,13 @@ export default Vue.extend({
        },
        /**重新提交 */
        reApply(){
+           if(!is_neizhi()) {
+              this.$dialog({
+                 title: '提示',
+                 message: '请在微信中打开'
+              })
+              return
+           }
         //    this.$router.push({path:'/Copyright/Step', query: { editId: this.$route.query.id, reApply: 'true'}})
            this.$router.push({path:'/Copyright/Step', query: { editId: this.$route.query.id}})
        }

src/view/NFT/Create/form.vue

@@ -15,7 +15,6 @@
     <div class="w-11/12 mx-auto">
       <!-- 第一步 -->
       <div class="step-one" v-if="currentStep == 1">
-
         <app-cell
           v-model="createNFT.value_name"
           type="input"
@@ -202,9 +201,9 @@
         </div>
       </div>
 
-      <!-- 第四步 -->
+      <!-- 第五步 -->
       <div v-if="currentStep == 4" class="text-font-white">
-        <!-- 第四步发行中 -->
+        <!-- 第五步发行中 -->
         <div
           v-if="loading4"
           class="flex flex-col items-center w-full pt-16 justify-center"
@@ -223,7 +222,7 @@
         </div>
      
         <div v-else class="text-center">
-          <!-- 第四步发行成功 -->
+          <!-- 第五步发行成功 -->
           
           <div v-if="success" class="">
               <!-- <div v-if="showOverlay"  class=" fixed left-0 right-0 top-0 bottom-0 bg-gray-800 z-50 overflow-y-scroll" >
@@ -245,7 +244,7 @@
                  <app-btn text="去申请版权" class=' bg-font-blue' @click.native="$router.push('/Copyright/Step')"></app-btn>
               </div>
           </div>
-          <!-- 第四步发行失败 -->
+          <!-- 第五步发行失败 -->
           <div
             v-else
             class="flex flex-col items-center w-full pt-16 justify-center"
@@ -347,6 +346,7 @@ export default Vue.extend({
     this.setState({
       pickedList: [],
     });
+    // this.initWCConfog()
   },
   destroyed() {
     this.setState({
@@ -404,10 +404,30 @@ export default Vue.extend({
         {
           text: "NFT发行",
         },
+        // {
+        //   text: "支付",
+        // },
       ]
     }
   },
   methods: {
+    /**创建订单*/
+    createOrder(){
+
+    },
+    /**调起支付请求*/
+    wcPayHandler(){
+      WeixinJSBridge.invoke('getBrandWCPayRequest', {
+         appId:"wxbdddd81913c795e9", //公众号ID，由商户传入     
+         timeStamp: "", //时间戳，自1970年以来的秒数     
+         nonceStr:"", //随机串     
+         package:`prepay_id=${1}`,     
+         signType:"MD5", //微信签名方式：     
+         paySign:"", //微信签名 
+        },
+        ()=>{}
+      );
+    },
     ...mapMutations("create", {
       setState: "SET_STATE",
     }),
@@ -623,7 +643,6 @@ export default Vue.extend({
         }
       }catch(err){
         this.loading2 = false
-        
         this.$toast('上传失败，请稍后再试~')
         return 
       }

src/view/NFT/Enterst/index.vue

@@ -137,11 +137,12 @@ export default Vue.extend({
                res = await this.$service.nftService.updateEntrust({id: this.entrustId, name: this.nameText, telephone: this.phoneText, nftHash: this.$route.query.nftHash as string, wechatNum:this.WChatAccount})
            }
            if(res) {
-               this.$toast('委托上架成功')
+               this.$toast('委托上架中。。。')
                const entrustInfo = await this.$service.nftService.getEntrustInfo(this.$route.query.nftHash.toString())
                this.entrustId = entrustInfo.id
                this.enterstStatus = eEnterst.afterEnterst
                this.isEntrusted = true
+               this.$toast('委托上架成功')
            }else {
                this.$toast('委托上架失败，请重试')
            }
@@ -149,6 +150,7 @@ export default Vue.extend({
 
        },
        async cancelEnterst(){
+           this.$toast('取消委托中。。。')
            const res = await this.$service.nftService.cancelEntrust(this.entrustId.toString())
            if(res) {
                this.$toast('取消委托成功')

src/wc.d.ts

+declare module 'weixin-js-sdk'
\ No newline at end of file

tailwind.config.js

@@ -43,6 +43,7 @@ module.exports = {
       "table-dark-blue":'":"#1C2654',
 
       "bg-white":"#f5f5f5",
+      // "bg-white":"#fff",
       "font-slim-color":"#7388AB",
       "font-pro-color":"#2B446C",
       black: colors.black,

vue.config.js

@@ -13,6 +13,7 @@ module.exports = {
         }
       },
       devServer: {
+        disableHostCheck: true,
         proxy: { // 设置代理
           '/proxyApi': {
             // target:process.env.VUE_APP_URL,
@@ -31,11 +32,18 @@ module.exports = {
               '^/proxyDowload': ''
             }
           },
-          '/wcPay': {
-            target:'https://api.mch.weixin.qq.com',
+          '/wcOpenIdApi': {
+            target:'https://api.weixin.qq.com',
             changeOrigin: true,
             pathRewrite: {
-              '^/wcPay': ''
+              '^/wcOpenIdApi': ''
+            }
+          },
+          '/wcPayApi': {
+            target: 'https://api.mch.weixin.qq.com',
+            changeOrigin: true,
+            pathRewrite: {
+              '^/wcPayApi': ''
             }
           }
         }