zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

商品绑定组件

master
pengda 2 days ago
parent
46af1937f8
commit
3ce995eadb
3 changed files with 87 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 104
      src/components/bindGoods.vue
  2. 13
      src/router/index.js
  3. 86
      src/views/agent/siteAddFinally.vue

104
src/components/bindGoods.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<GuipDialog :dialogVisible="dialogVisible" :showFooterButton="showFooterButton" <GuipDialog :dialogVisible="dialogVisible" :showFooterButton="list.length>0"
title="搜索商品" @confirm="handleConfirm" @cancel="handleCancel" @close="handleCancel"> title="搜索商品" @confirm="handleConfirm" @cancel="handleCancel" @close="handleCancel">
<div class="domain-wrap"> <div class="domain-wrap">
<el-form class="el-row demo-ruleForm" ref="formRef"> <el-form class="el-row demo-ruleForm" ref="formRef">
@ -12,24 +12,26 @@
<GuipButton type="primary" @click="handleSearch()">搜索</GuipButton> <GuipButton type="primary" @click="handleSearch()">搜索</GuipButton>
</div> </div>
<div class="goods-list"> <template v-if="loading">
<div class="goods-item" v-for="(row) in list" :key="row.num_iid"> <div class="goods-list" v-if="list.length>0">
<img src="@/assets/site/kefuTem.png" alt=""> <div class="goods-item" v-for="(row) in list" :key="row.num_iid">
<div class="goods-info"> <img :src="row.pic_url" alt="">
<p>{{row.title}}</p> <div class="goods-info">
<p>¥{{row.price}}</p> <p>{{row.title}}</p>
<GuipSelect v-if="row.skus" v-model="row.skuid" width="200px" placeholder="选择SKU" :options="row.skus" @change="handleSelectSku(row)"/> <p>¥{{row.price}}</p>
<div v-else style="height: 40px"></div> <GuipSelect v-if="row.skus" v-model="row.skuid" width="200px" placeholder="选择SKU" :options="row.skus" @change="handleSelectSku(row)"/>
<div v-else style="height: 40px"></div>
</div>
<el-checkbox v-model="row.selected" @change="handleSelectGood(row)"></el-checkbox>
</div> </div>
<el-checkbox v-model="row.selected" @change="handleSelectGood(row)"></el-checkbox>
</div> </div>
</div> <el-empty v-else :image="emptyImg" :description="empty_text"></el-empty>
</template>
</el-form> </el-form>
</div> </div>
</GuipDialog> </GuipDialog>
</template> </template>
<script> <script>
import GuipDialog from "@/components/GuipDialog.vue"; import GuipDialog from "@/components/GuipDialog.vue";
import GuipToolTip from "@/components/GuipToolTip.vue"; import GuipToolTip from "@/components/GuipToolTip.vue";
import GuipInput from "@/components/GuipInput.vue"; import GuipInput from "@/components/GuipInput.vue";
@ -38,7 +40,7 @@ import GuipSelect from "@/components/GuipSelect.vue";
export default { export default {
name: '', name: '',
props:['uid','type','isPdd'], props:['uid','type','pdd_pati','pdd_pagecode'],
components: { components: {
GuipSelect, GuipSelect,
GuipButton, GuipButton,
@ -49,21 +51,36 @@ export default {
data(){ data(){
return { return {
dialogVisible: true, dialogVisible: true,
showFooterButton: false,
keywords: '', keywords: '',
pati: '', loading: false,
pageCode: '',
list: [], list: [],
emptyImg:require('@/assets/table_empty.png'),
empty_text: '', empty_text: '',
bindData: {} bindData: {}
} }
}, },
mounted() {
if(this.isPdd) this.initPddSdk()
},
methods:{ methods:{
handleConfirm(){ handleConfirm(){
this.dialogVisible = false; 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(){ handleCancel(){
this.dialogVisible = false; this.dialogVisible = false;
@ -71,6 +88,8 @@ export default {
}, },
handleSearch(){ handleSearch(){
const that = this const that = this
that.list = []
that.loading = false
this.$http('POST', '/agentnew/ajax_get_goods_list', { this.$http('POST', '/agentnew/ajax_get_goods_list', {
uid: that.uid, uid: that.uid,
type: that.type, type: that.type,
@ -82,6 +101,7 @@ export default {
'Auth': this.token 'Auth': this.token
} }
}).then(response => { }).then(response => {
that.loading = true
if(response.status){ if(response.status){
if(response.data.length>0){ if(response.data.length>0){
response.data.forEach((item) => { response.data.forEach((item) => {
@ -95,7 +115,6 @@ export default {
}); });
that.$nextTick(() => { that.$nextTick(() => {
that.list = response.data that.list = response.data
that.showFooterButton = true
}) })
} else { } else {
that.empty_text = '未查询到相关商品' that.empty_text = '未查询到相关商品'
@ -116,7 +135,7 @@ export default {
this.$message.warning('请选择SKU'); this.$message.warning('请选择SKU');
return false return false
} }
this.bindData[row.num_iid] = row.skuid this.bindData[row.num_iid] = !row.skuid ? 0 : row.skuid
}else{ }else{
this.$delete(this.bindData, row.num_iid); this.$delete(this.bindData, row.num_iid);
} }
@ -126,46 +145,6 @@ export default {
this.bindData[row.num_iid] = row.skuid 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> </script>
@ -176,6 +155,9 @@ export default {
.el-dialog{ .el-dialog{
min-height: 0; min-height: 0;
} }
.el-empty{
padding: 20px 0;
}
.goods-list{ .goods-list{
max-height: 400px; max-height: 400px;

13
src/router/index.js
View File

@ -18,7 +18,7 @@ const blackHeaderList = [
'/franchise' '/franchise'
]; ];
const blackFooterList = [ 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', // const whiteSlideList = ['/', '/ui',
// '/agent/siteList', // '/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', path: '/agent/siteServiceList',
name: '服务列表', name: '服务列表',
isFirst: true, isFirst: true,

86
src/views/agent/siteAddFinally.vue
View File

@ -75,12 +75,18 @@
</div> </div>
</div> </div>
<div class="flex mb24 line40" v-if="row.enable_bind"> <template v-if="row.enable_bind">
<GuipButton @click="bindGoods(row.type)" class="bind-button" type="ignore" :btnstyle="{width:'148px',height:'40px',background:'#F2F3F5','border-radius':'4px'}"> <div class="flex mb24 line40">
<div class="bgImg"></div> <GuipButton @click="bindGoods(row.type)" class="bind-button" type="ignore" :btnstyle="{width:'148px',height:'40px',background:'#F2F3F5','border-radius':'4px'}">
<span>关联商品</span> <div class="bgImg"></div>
</GuipButton> <span>关联商品</span>
</div> </GuipButton>
</div>
<div>
</div>
</template>
<div class="flex flex-between service-opt"> <div class="flex flex-between service-opt">
<GuipButton type="ignore" @click="reset(row)">重置</GuipButton> <GuipButton type="ignore" @click="reset(row)">重置</GuipButton>
@ -143,8 +149,7 @@ export default {
this.$message.error('非法请求'); this.$message.error('非法请求');
this.$router.push('/agent/siteAdd') this.$router.push('/agent/siteAdd')
} }
this.initPddSdk2(this.$route.query.uid) this.loadPddSDK()
console.log('wwww')
}, },
mounted() { mounted() {
store.commit('SET_PAGETITLE', '添加服务'); store.commit('SET_PAGETITLE', '添加服务');
@ -156,66 +161,35 @@ export default {
bindGoods(type){ bindGoods(type){
this.bindData.uid = this.siteInfo.uid this.bindData.uid = this.siteInfo.uid
this.bindData.type = type 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){ async getPddPageCode(uid){
console.log('aaa')
const that = this 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, uid: uid,
}, { }, {
headers: { headers: {
'Auth': this.token 'Auth': this.token
} }
}).then(response => { }).then(response => {
console.log(response.data,'bbb')
that.bindData.pageCode = response.data
return response.data return response.data
}).catch(error => { }).catch(error => {
console.error(error, '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){ handleBind(data){
@ -256,6 +230,10 @@ export default {
that.siteInfo = response.data.siteinfo that.siteInfo = response.data.siteinfo
that.serviceAddList = response.data.service_add_list that.serviceAddList = response.data.service_add_list
store.commit('SET_BREADRIGHTTEXT', that.siteInfo.short_name); store.commit('SET_BREADRIGHTTEXT', that.siteInfo.short_name);
//拼多多初始化
if(this.siteInfo.sale_channel == 3){
this.initPddParam(this.$route.query.uid)
}
}) })
}).catch(error => { }).catch(error => {
console.error(error, 'error') console.error(error, 'error')

Write Preview
Loading…
Cancel
Save