220 lines
9.1 KiB
HTML
220 lines
9.1 KiB
HTML
{{template "header" }}
|
|
<div id="app" style="width:100%">
|
|
<template>
|
|
<el-tabs type="border-card">
|
|
<el-tab-pane label="付费资源列表">
|
|
<el-button @click="productInfo.form={};productInfo.dialog=true" icon="el-icon-plus" style="margin-bottom: 10px;" type="primary" size="small">添加资源</el-button>
|
|
<el-table
|
|
:data="product.list"
|
|
border>
|
|
<el-table-column
|
|
prop="id"
|
|
label="ID">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="kefu_name"
|
|
label="商家">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="product_name"
|
|
label="资源名称">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="price"
|
|
label="价格 (元)">
|
|
<template slot-scope="scope">
|
|
<{scope.row.price/100}>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="resource_link"
|
|
label="地址">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="created_at"
|
|
label="添加时间">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="updated_at"
|
|
label="更新时间">
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="160px;"
|
|
prop="id"
|
|
label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button @click="viewProduct(scope.row.id)" type="primary" size="mini" icon="el-icon-view" circle></el-button>
|
|
<el-button @click="getProduct(scope.row)" type="primary" size="mini" icon="el-icon-edit" circle></el-button>
|
|
<el-button @click="deleteProduct(scope.row.id)" type="danger" size="mini" icon="el-icon-delete" circle></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
background
|
|
@current-change="getProducts"
|
|
:current-page="product.page"
|
|
layout="prev,pager, next"
|
|
:page-size="product.pagesize"
|
|
:total="product.count">
|
|
</el-pagination>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
<el-dialog
|
|
title="编辑资源"
|
|
:visible.sync="productInfo.dialog"
|
|
width="70%"
|
|
:close-on-click-modal="false"
|
|
top="3%"
|
|
>
|
|
<el-form size="medium" ref="productInfo.form" :model="productInfo.form" :rules="productInfo.formRule" label-width="220px">
|
|
<el-form-item class="eform" label="资源名称" prop="product_name">
|
|
<el-input placeholder="资源名称" v-model="productInfo.form.product_name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item class="eform" label="资源模板" prop="product_category">
|
|
<el-select v-model="productInfo.form.product_category">
|
|
<el-option label="付费进群" value="wechat_group"></el-option>
|
|
<el-option label="知识付费" value="knowledge"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item class="eform" label="支付方式(建议易支付)" prop="payment">
|
|
<el-select v-model="productInfo.form.payment">
|
|
<el-option label="微信官方支付" value="wechat"></el-option>
|
|
<el-option label="易支付" value="nan66"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item class="eform" label="价格（单位：分）" prop="price">
|
|
<el-input type="number" placeholder="资源价格" v-model="productInfo.form.price"></el-input>
|
|
</el-form-item>
|
|
<el-form-item class="eform" label="资源地址(飞书文档分享链接)" prop="resource_link">
|
|
<el-input type="textarea" placeholder="资源地址" v-model="productInfo.form.resource_link"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="productInfo.dialog = false">取消</el-button>
|
|
<el-button type="primary" @click="setProductInfoForm('productInfo.form')">保存</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
delimiters:["<{","}>"],
|
|
data: {
|
|
window:window,
|
|
productInfo:{
|
|
dialog:false,
|
|
formRule:{
|
|
product_name: [
|
|
{ required: true, message: '名称不能为空', trigger: 'blur' },
|
|
],
|
|
price: [
|
|
{ required: true, message: '价格不能为空', trigger: 'blur' },
|
|
],
|
|
product_category: [
|
|
{ required: true, message: '资源类型必选', trigger: 'blur' },
|
|
],
|
|
payment: [
|
|
{ required: true, message: '支付方式必选', trigger: 'blur' },
|
|
],
|
|
resource_link: [
|
|
{ required: true, message: '资源地址不能为空', trigger: 'blur' },
|
|
],
|
|
},
|
|
form:{},
|
|
},
|
|
product:{
|
|
page:1,
|
|
count:0,
|
|
pagesize:0,
|
|
list:[],
|
|
},
|
|
},
|
|
methods: {
|
|
handleTabClick(tab, event){
|
|
let _this=this;
|
|
if(tab.name=="wechat"){
|
|
|
|
}
|
|
},
|
|
getProduct(params){
|
|
// var _this=this;
|
|
this.productInfo.form=params;
|
|
this.productInfo.dialog=true;
|
|
},
|
|
getProducts(page){
|
|
var _this=this;
|
|
var params={};
|
|
params={pagesize:20,page:page};
|
|
sendAjax("/kefu/virtualProducts","get",params,function(result){
|
|
_this.product=result.result;
|
|
});
|
|
},
|
|
//设置产品信息
|
|
setProductInfoForm(formName){
|
|
let _this=this;
|
|
this.$refs[formName].validate((valid) => {
|
|
if (!valid) {
|
|
return false;
|
|
} else {
|
|
sendAjax("/kefu/virtualProduct","POST",this.productInfo.form,function(result){
|
|
if(result.code!=20000){
|
|
_this.$message({
|
|
message: result.msg,
|
|
type: 'error'
|
|
});
|
|
return;
|
|
}
|
|
_this.productInfo.dialog=false;
|
|
_this.getProducts(_this.productInfo.page);
|
|
_this.$message({
|
|
message: "success",
|
|
type: 'success'
|
|
});
|
|
});
|
|
}
|
|
});
|
|
},
|
|
deleteProduct(id){
|
|
var _this=this;
|
|
this.$confirm('将执行删除操作, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(function(){
|
|
sendAjax("/kefu/deleteVirtualProduct","get",{id:id},function(result){
|
|
_this.$message({
|
|
type: 'success',
|
|
message: result.msg
|
|
});
|
|
_this.getProducts(_this.productInfo.page);
|
|
});
|
|
});
|
|
},
|
|
viewProduct(id){
|
|
|
|
let _this=this;
|
|
sendAjax("/kefu/viewVirtualProduct","get",{product:id},function(result){
|
|
let html=result.result;
|
|
_this.$confirm(html, '商品地址', {
|
|
cancelButtonText: '关闭',
|
|
dangerouslyUseHTMLString: true,
|
|
}).then(() => {
|
|
}).catch(() => {
|
|
});
|
|
});
|
|
}
|
|
},
|
|
mounted:function(){
|
|
},
|
|
created: function () {
|
|
this.getProducts(1);
|
|
}
|
|
})
|
|
</script>
|
|
|