商品绑定组件

src/components/bindGoods.vue

@@ -1,5 +1,5 @@
 <template>
-    <GuipDialog :dialogVisible="dialogVisible" :showFooterButton="showFooterButton"
+    <GuipDialog :dialogVisible="dialogVisible" :showFooterButton="list.length>0"
                 title="搜索商品" @confirm="handleConfirm" @cancel="handleCancel" @close="handleCancel">
         <div class="domain-wrap">
             <el-form class="el-row demo-ruleForm" ref="formRef">
@@ -12,9 +12,10 @@
                     <GuipButton type="primary" @click="handleSearch()">搜索</GuipButton>
                 </div>
 
-                <div class="goods-list">
+                <template v-if="loading">
+                    <div class="goods-list" v-if="list.length>0">
                         <div class="goods-item" v-for="(row) in list" :key="row.num_iid">
-                        <img src="@/assets/site/kefuTem.png" alt="">
+                            <img :src="row.pic_url" alt="">
                             <div class="goods-info">
                                 <p>{{row.title}}</p>
                                 <p>¥{{row.price}}</p>
@@ -24,12 +25,13 @@
                             <el-checkbox v-model="row.selected" @change="handleSelectGood(row)"></el-checkbox>
                         </div>
                     </div>
+                    <el-empty v-else :image="emptyImg" :description="empty_text"></el-empty>
+                </template>
             </el-form>
         </div>
     </GuipDialog>
 </template>
 <script>
-
 import GuipDialog from "@/components/GuipDialog.vue";
 import GuipToolTip from "@/components/GuipToolTip.vue";
 import GuipInput from "@/components/GuipInput.vue";
@@ -38,7 +40,7 @@ import GuipSelect from "@/components/GuipSelect.vue";
 
 export default {
   name: '',
-  props:['uid','type','isPdd'],
+  props:['uid','type','pdd_pati','pdd_pagecode'],
   components: {
       GuipSelect,
       GuipButton,
@@ -49,21 +51,36 @@ export default {
   data(){
     return {
         dialogVisible: true,
-        showFooterButton: false,
         keywords: '',
-        pati: '',
+        loading: false,
-        pageCode: '',
         list: [],
+        emptyImg:require('@/assets/table_empty.png'),
         empty_text: '',
         bindData: {}
     }
   },
-  mounted() {
-      if(this.isPdd) this.initPddSdk()
-  },
   methods:{
       handleConfirm(){
           this.dialogVisible = false;
+          const that = this
+          this.$http('POST', '/agentnew/ajax_bind_service_goods', {
+              uid: that.uid,
+              type: that.type,
+              bind_list: that.bindData,
+          }, {
+              headers: {
+                  'Auth': this.token
+              }
+          }).then(response => {
+              if(response.status){
+                  that.$message.success('绑定成功');
+                  this.$emit('handleBind', this.bindData)
+                  return true;
+              }
+              that.$message.error(response.info);
+          }).catch(error => {
+              console.error(error, 'error')
+          })
       },
       handleCancel(){
           this.dialogVisible = false;
@@ -71,6 +88,8 @@ export default {
       },
       handleSearch(){
           const that = this
+          that.list = []
+          that.loading = false
           this.$http('POST', '/agentnew/ajax_get_goods_list', {
               uid: that.uid,
               type: that.type,
@@ -82,6 +101,7 @@ export default {
                   'Auth': this.token
               }
           }).then(response => {
+              that.loading = true
               if(response.status){
                   if(response.data.length>0){
                       response.data.forEach((item) => {
@@ -95,7 +115,6 @@ export default {
                       });
                       that.$nextTick(() => {
                           that.list = response.data
-                          that.showFooterButton = true
                       })
                   } else {
                       that.empty_text = '未查询到相关商品'
@@ -116,7 +135,7 @@ export default {
                  this.$message.warning('请选择SKU');
                  return false
              }
-             this.bindData[row.num_iid] = row.skuid
+             this.bindData[row.num_iid] = !row.skuid ? 0 : row.skuid
           }else{
              this.$delete(this.bindData, row.num_iid);
           }
@@ -126,46 +145,6 @@ export default {
               this.bindData[row.num_iid] = row.skuid
           }
       },
-      async getPddPageCode(){
-          const that = this
-          this.$http('POST', '/agentnew/ajax_get_pdd_page_code', {
-              uid: that.uid,
-          }, {
-              headers: {
-                  'Auth': this.token
-              }
-          }).then(response => {
-              return response.data
-          }).catch(error => {
-              console.error(error, 'error')
-          })
-      },
-      async initPddSdk() {
-          const that = this
-          this.pageCode = await this.getPddPageCode()
-
-          const script = document.createElement('script');
-          script.src = 'https://pfile.pddpic.com/galerie-go/open_sdk/pc.202102201613.js';
-          script.onload = () => {
-              if (typeof window.PDD_OPEN_init === 'function') {
-                  window.PDD_OPEN_init({
-                      code: that.pageCode
-                      // 对于获取 code 接口或未登录态，可不传 code：PDD_OPEN_init({}, function () { ... })
-                  }, function () {
-                      // 初始化已完成
-                      window.PDD_OPEN_getPati().then(function (pati) {
-                          that.pati = pati
-                      }).catch(error => console.log(error))
-                  });
-              } else {
-                  console.error('PDD_OPEN_init 不存在，SDK 未正确加载');
-              }
-          };
-          script.onerror = () => {
-              console.error('拼多多 SDK 加载失败');
-          };
-          document.head.appendChild(script);
-      }
   }
 }
 </script>
@@ -176,6 +155,9 @@ export default {
 .el-dialog{
   min-height: 0;
 }
+.el-empty{
+  padding: 20px 0;
+}
 
 .goods-list{
   max-height: 400px;

src/router/index.js

@@ -18,7 +18,7 @@ const blackHeaderList = [
   '/franchise'
 ];
 const blackFooterList = [
-  '/', '/franchise', '/register', '/agent/siteAdd', '/agent/payInfoSetting','/agent/siteServiceEdit'
+  '/', '/franchise', '/register', '/agent/siteAdd', '/agent/payInfoSetting','/agent/siteServiceEdit','/agent/siteAddFinally','/agent/siteServiceAdd',
 ];
 // const whiteSlideList = ['/', '/ui', 
 //   '/agent/siteList', 
@@ -129,6 +129,17 @@ const routes = [{
     }
   },
   {
+    path: '/agent/siteAddFinally',
+    name: '添加站点-添加服务',
+    isFirst: true,
+    component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteAddFinally.vue'),
+    meta: {
+      title: '添加服务',
+      breadcrumbParent: '添加站点',
+      // hideBreadcrumb: true // 一级页面不显示面包屑
+    }
+  },
+  {
     path: '/agent/siteServiceList',
     name: '服务列表',
     isFirst: true,

src/views/agent/siteAddFinally.vue

@@ -75,13 +75,19 @@
                             </div>
                         </div>
 
-                        <div class="flex mb24 line40" v-if="row.enable_bind">
+                        <template v-if="row.enable_bind">
+                            <div class="flex mb24 line40">
                                 <GuipButton @click="bindGoods(row.type)" class="bind-button" type="ignore" :btnstyle="{width:'148px',height:'40px',background:'#F2F3F5','border-radius':'4px'}">
                                     <div class="bgImg"></div>
                                     <span>关联商品</span>
                                 </GuipButton>
                             </div>
 
+                            <div>
+
+                            </div>
+                        </template>
+
                         <div class="flex flex-between service-opt">
                             <GuipButton type="ignore" @click="reset(row)">重置</GuipButton>
                             <GuipButton type="primary" @click="save(row)" size="medium">保存</GuipButton>
@@ -143,8 +149,7 @@ export default {
             this.$message.error('非法请求');
             this.$router.push('/agent/siteAdd')
         }
-        this.initPddSdk2(this.$route.query.uid)
+        this.loadPddSDK()
-        console.log('wwww')
     },
     mounted() {
         store.commit('SET_PAGETITLE', '添加服务');
@@ -156,66 +161,35 @@ export default {
         bindGoods(type){
             this.bindData.uid = this.siteInfo.uid
             this.bindData.type = type
-            // if(this.siteInfo.sale_channel == 3){
+            this.bindComponent = 'bindGoods'
-            //     const initData = this.initPddSdk2(this.$route.query.uid)
+        },
-            //     this.bindData.type = initData.pageCode
+        loadPddSDK(){
-            //     this.bindData.type = initData.pati
+            const script = document.createElement('script');
-            // }
+            script.src = 'https://pfile.pddpic.com/galerie-go/open_sdk/pc.202102201613.js';
-            // this.bindComponent = 'bindGoods'
+            document.head.appendChild(script);
         },
         async getPddPageCode(uid){
-            console.log('aaa')
             const that = this
-            that.$http('POST', '/agentnew/ajax_get_pdd_page_code', {
+            return await that.$http('POST', '/agentnew/ajax_get_pdd_page_code', {
                 uid: uid,
             }, {
                 headers: {
                     'Auth': this.token
                 }
             }).then(response => {
-                console.log(response.data,'bbb')
-                that.bindData.pageCode = response.data
                 return response.data
             }).catch(error => {
                 console.error(error, 'error')
             })
         },
-        async loadPddSk(pageCode){
+        async initPddParam(uid) {
-            console.log('ccc',pageCode)
+            if (typeof window.PDD_OPEN_init === 'function') {
-            const script = document.createElement('script');
+                this.bindData.pageCode = await this.getPddPageCode(uid)
-            script.src = 'https://pfile.pddpic.com/galerie-go/open_sdk/pc.202102201613.js';
+
-            script.onload = () => {
+                await window.PDD_OPEN_init({code: this.bindData.pageCode})
-                window.PDD_OPEN_init({
+                this.bindData.pati = await window.PDD_OPEN_getPati()
-                    code: pageCode
+            } else {
-                    // 对于获取 code 接口或未登录态，可不传：PDD_OPEN_init({}, function () { ... })
+                console.error('PDD_OPEN_init 不存在，SDK 未正确加载');
-                }).then(function () {
-                    console.log('ddd')
-                    // 初始化已完成
-                    window.PDD_OPEN_getPati().then(
-                        function (pati) {
-                            console.log(pati)
-                            // 使用 pati
-                        }).catch(error => console.log(error))
-                })
-            };
-            script.onerror = () => {
-                console.log('errpr')
-                console.error('拼多多 SDK 加载失败');
-            };
-            document.head.appendChild(script);
-        },
-        async initPddSdk2(uid) {
-            const that = this
-            try {
-                const pageCode = await that.getPddPageCode(uid)
-                // await that.loadPddSk(pageCode)
-                console.log(pageCode,'eee')
-                // console.log(that.bindData.pageCode,'bbb')
-                // that.bindData.pati = await that.loadPddSk(that.bindData.pageCode)
-                // console.log('aaa')
-
-            } catch (e) {
-                console.log(e)
             }
         },
         handleBind(data){
@@ -256,6 +230,10 @@ export default {
                     that.siteInfo = response.data.siteinfo
                     that.serviceAddList = response.data.service_add_list
                     store.commit('SET_BREADRIGHTTEXT', that.siteInfo.short_name);
+                    //拼多多初始化
+                    if(this.siteInfo.sale_channel == 3){
+                        this.initPddParam(this.$route.query.uid)
+                    }
                 })
             }).catch(error => {
                 console.error(error, 'error')