Skip to content

E
ElectricitySheep
Commit 98ba777b authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 4fe5a178
Hide whitespace changes
Inline Side-by-side
Showing with 312 additions and 1355 deletions
src/components/Index.vue
View file @ 98ba777b
......@@ -6,7 +6,7 @@
<div class="hoindexImgdiv">
<img src="../assets/img/logo.png" alt="" style="height:30px">
</div>
<div class="hoindexRight">
<div class="hoindexRight" style="cursor:pointer;">
<el-dropdown>
<span class="el-dropdown-link" style="color:#fff;font-size:16px">
<i class="iconfont icon-iconzh1"></i>
......
src/components/sallCenter/templateManage.vue
View file @ 98ba777b
......@@ -50,6 +50,9 @@
</template>
</el-table-column>
</el-table>
<el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="qMsg.pageSize"
layout="prev, pager, next" :total="total">
</el-pagination>
</div>
</div>
</template>
......@@ -60,7 +63,7 @@
dataList: [],
qMsg: {
pageIndex: 1,
pageSize: 20,
pageSize: 15,
},
total: 0
};
......@@ -69,6 +72,10 @@
},
methods: {
handleCurrentChange(val) {
this.qMsg.pageIndex = val;
this.getList();
},
getList() {
this.apipost("/api/Template/GetMiniTemplatePageList", this.qMsg, res => {
if (res.data.resultCode == 1) {
......@@ -106,4 +113,5 @@
this.getList();
}
};
</script>
\ No newline at end of file
</script>
src/components/sallCenter/templateMarket.vue
View file @ 98ba777b
<template>
<div class="templateMarket">
<template>
<div class="head-title">
模板市场
<div class="template_comheader">
<div>
<span>模板市场</span>
<el-button type="primary" size="small" @click="CommonJump('templateMarketManage',{})">模板市场管理</el-button>
</div>
<div class="content">
<div style="padding:0 20px;margin-bottom:20px;">
<el-select size="small" style="width:150px;">
<el-option label="全部模板" :value="1"> </el-option>
<el-option label="已拥有模板" :value="2"> </el-option>
<el-option label="未拥有模板" :value="3"> </el-option>
</el-select>
</div>
<div class="template_MarketList">
<div class="Market_List" v-for="(item,index) in dataList" :key="index">
<div class="MarketInner">
<div flex="dir:top cross:center main:center" class="dialog-img">
<div class="choose-btn market_useBtn">加载模板</div>
<div class="choose-btn" @click="getImgSrc(item)">预览模板</div>
</div>
<div class="show-img" :style="{backgroundImage:'url('+item.pics[0]+')'}">
</div>
<div class="Market_Info">
<div flex="dir:top main:center">
<div flex="main:justify">
<div class="item-name">{{item.name}}</div>
</div>
<div>
<div flex="cross:center main:justify">
<div class="price">
￥{{item.price}}
</div>
<button type="button" class="el-button el-button--primary el-button--mini">
<span>加载</span>
</button>
</div>
<div class="content">
<div class="template_MarketList">
<div class="Market_List" v-for="(item,index) in dataList" :key="index">
<div class="MarketInner">
<div flex="dir:top cross:center main:center" class="dialog-img">
<div class="choose-btn market_useBtn" @click="LoadTemplate(item)">加载模板</div>
<div class="choose-btn" @click="getImgSrc(item)">预览模板</div>
</div>
<div class="show-img" :style="{backgroundImage:'url('+item.Pics+')'}">
</div>
<div class="Market_Info">
<div flex="dir:top main:center">
<div flex="main:justify">
<div class="item-name">{{item.Name}}</div>
</div>
<div>
<div flex="cross:center main:justify">
<div class="price">
￥{{item.Price}}
</div>
<button type="button" class="el-button el-button--primary el-button--mini">
<span @click="LoadTemplate(item)">加载</span>
</button>
</div>
</div>
</div>
......@@ -42,8 +36,7 @@
</div>
</div>
</div>
</template>
</div>
<el-dialog title="手机端预览" :visible.sync="viewDialog" width="600px">
<div class="MarketView" ref="MarketView">
<img :src="imgUrl" alt="" style="width: 375px;">
......@@ -53,7 +46,6 @@
<el-button type="primary" @click="viewDialog = false" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
......@@ -63,582 +55,14 @@
//预览弹窗
viewDialog: false,
imgUrl: '',
dataList: [{
"id": 40,
"name": "618年中盛典-2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/35120f94cf467eb8874aa67afe0b12c4.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "618年中盛典-2",
"cloud_price": "0.00"
},
{
"id": 39,
"name": "618年中盛典",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/3dec44461189a8c99b157e426ec98aa4.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "618年中盛典",
"cloud_price": "0.00"
},
{
"id": 38,
"name": "51劳动节-2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/a65509e5cee18c6dda134cde50009892.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "51劳动节-2",
"cloud_price": "0.00"
},
{
"id": 37,
"name": "51劳动节",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/fdce3d73af8165e0f5652187213950e3.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "51劳动节",
"cloud_price": "0.00"
},
{
"id": 36,
"name": "妇女节2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/df3307934c25cfbf1ae2c1046037d8bc.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "妇女节2",
"cloud_price": "0.00"
},
{
"id": 35,
"name": "妇女节",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/be4f913235be3ca1b7a4b4d34bb45216.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "妇女节",
"cloud_price": "0.00"
},
{
"id": 34,
"name": "情人节模板2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/a0dadedd1a511bfa59fa63497a8c974d.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "情人节模板2",
"cloud_price": "0.00"
},
{
"id": 33,
"name": "春节模板2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/2022fc32d157bbdacae989174c75d583.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "春节模板2",
"cloud_price": "0.00"
},
{
"id": 31,
"name": "元宵节模板2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/5f8c2f51b4a9160decb00bed2277952f.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "元宵节模板2",
"cloud_price": "0.00"
},
{
"id": 30,
"name": "情人节模板",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/615112ec2dc3e3b0b8aaa9b0b93bd4f0.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "情人节模板",
"cloud_price": "0.00"
},
{
"id": 29,
"name": "元宵节模板",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/a5c397ade39f0e76c784d46078f0ea20.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "元宵节模板",
"cloud_price": "0.00"
},
{
"id": 28,
"name": "春节模板",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/2be7b8bd21b5b89c1008bcbfbd6fc876.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "春节模板",
"cloud_price": "0.00"
},
{
"id": 19,
"name": "超市3",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/63f989c9f7b9663e6ab9de13c03056b6.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "超市3",
"cloud_price": "0.00"
},
{
"id": 18,
"name": "超市2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/81ecb3a4ec8e8248da0e7f7a027bafd2.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "超市2",
"cloud_price": "0.00"
},
{
"id": 17,
"name": "超市1",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/3bddad82d6c63870596334e318777fa5.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "超市1",
"cloud_price": "0.00"
},
{
"id": 16,
"name": "美妆2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/dc9370e6666b5cb588d81c1b22c72151.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "美妆2",
"cloud_price": "0.00"
},
{
"id": 15,
"name": "美妆1",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/9d24aec77b45951b50343f3bc9708cd9.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "美妆1",
"cloud_price": "0.00"
},
{
"id": 14,
"name": "生鲜2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/7b516ba8fce669badea52aa2452dc3db.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.2",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "生鲜2",
"cloud_price": "0.00"
},
{
"id": 13,
"name": "生鲜1",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/3d6b77eb7d512537c8e03e86c1e052f5.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "生鲜1",
"cloud_price": "0.00"
},
{
"id": 10,
"name": "服饰3",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/2e86a1ad42ac8ea8b5f9c8e1131e2cc2.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "服饰3",
"cloud_price": "0.00"
},
{
"id": 9,
"name": "服饰2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/7e96634708ed70371f9fbcd3dcba0bb4.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "服饰2",
"cloud_price": "0.00"
},
{
"id": 8,
"name": "服饰1",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/42d68cee10e3fa8af2c23ab81241e14e.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "服饰1",
"cloud_price": "0.00"
},
{
"id": 7,
"name": "双十二",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/d66b72d485ceed26d358e8f142dec60f.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "双十二",
"cloud_price": "0.00"
}
],
dataList: [],
qMsg: {
pageIndex: 1,
pageSize: 15,
IsUse: 1,
IsShow: 1,
},
total: 0,
};
},
components: {
......@@ -650,15 +74,48 @@
methods: {
getImgSrc(item) {
this.viewDialog = true;
this.imgUrl = item.pics[0];
this.imgUrl = item.Pics;
},
//关闭
closeDialog() {
this.viewDialog = false;
this.$refs.MarketView.scrollTop = 0;
},
handleCurrentChange(val) {
this.qMsg.pageIndex = val;
this.getList();
},
getList() {
this.apipost("/api/Template/GetTemplateMarketPageListModule", this.qMsg, res => {
if (res.data.resultCode == 1) {
this.dataList = res.data.data.pageData;
this.total = res.data.data.count;
} else {
this.Info(res.data.message);
}
})
},
//加载模板
LoadTemplate(item) {
var that = this;
that.apipost("/api/Template/LoadTemplateMarket", {
Id: item.Id
}, res => {
if (res.data.resultCode == 1) {
that.Confirm("是否前往编辑新模板?", function () {
that.CommonJump('templateEdit', {
Id: res.data.data.Id
});
});
} else {
that.Info(res.data.message);
}
})
}
},
mounted() {}
mounted() {
this.getList();
}
};
</script>
......@@ -670,6 +127,13 @@
box-sizing: border-box;
}
.templateMarket .template_comheader>div {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
.templateMarket .template_MarketList {
display: flex;
flex-direction: row;
......
src/components/sallCenter/templateMarketManage.vue
View file @ 98ba777b
<style>
.templateMarketManage .template_comheader {
padding: 13px 20px;
border-bottom: 1px solid #EBEEF5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
}
.templateMarketManage .template_comheader>div {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
.templateMarketManage .temp_content {
margin-top: 10px;
background: #fff;
padding: 20px;
}
.templateMarketManage .temp_imgStyle {
display: inline-block;
margin-right: 10px;
}
</style>
<template>
<div class="templateMarket">
<template>
<div class="head-title">
模板市场
<div class="templateMarketManage">
<div class="template_comheader">
<div>
<span>模板市场管理</span>
<el-button type="primary" size="small" @click="CommonJump('templateMarket',{})">模板市场</el-button>
<el-button type="primary" size="small" @click="isShow=true,clearMsg()">新增</el-button>
</div>
</div>
<div class="temp_content">
<el-table :data="dataList" border style="width: 100%">
<el-table-column prop="Id" label="编号" width="100"></el-table-column>
<el-table-column prop="Name" label="模板名称"></el-table-column>
<el-table-column label="封面图" width="200">
<template slot-scope="scope">
<img :src="scope.row.Pics" style="width:180px;height:150px;">
</template>
</el-table-column>
<el-table-column label="启用/禁用" width="100">
<template slot-scope="scope">
<el-switch v-model="scope.row.IsUse" active-color="#409EFF" :active-value="1" :inactive-value="0"
@change="updateIsUse(scope.row)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="显示/隐藏" width="100">
<template slot-scope="scope">
<el-switch v-model="scope.row.IsShow" active-color="#409EFF" :active-value="1" :inactive-value="0"
@change="updateIsShow(scope.row)">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="SortNum" label="排序" width="180"></el-table-column>
<el-table-column prop="CreateByName" label="操作人" width="150"></el-table-column>
<el-table-column prop="CreateDateStr" label="创建时间" width="180"></el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" content="编辑" placement="top">
<img src="../../assets/img/setup/edit.png" alt="" class="temp_imgStyle" @click="EditeMarket(scope.row)">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top">
<img src="../../assets/img/setup/del.png" alt="" class="temp_imgStyle" @click="DeleteMarket(scope.row)">
</el-tooltip>
</template>
</el-table-column>
</el-table>
<el-pagination style="text-align:right" background @current-change="handleCurrentChange"
:page-size="qMsg.pageSize" layout="prev, pager, next" :total="total">
</el-pagination>
</div>
<!-- 新增修改模板市场 -->
<el-dialog title="模板市场" :visible.sync="isShow" width="700px">
<div class="content">
<div style="padding:0 20px;margin-bottom:20px;">
<el-select size="small" style="width:150px;">
<el-option label="全部模板" :value="1"> </el-option>
<el-option label="已拥有模板" :value="2"> </el-option>
<el-option label="未拥有模板" :value="3"> </el-option>
</el-select>
</div>
<div class="template_MarketList">
<div class="Market_List" v-for="(item,index) in dataList" :key="index">
<div class="MarketInner">
<div flex="dir:top cross:center main:center" class="dialog-img">
<div class="choose-btn market_useBtn">加载模板</div>
<div class="choose-btn" @click="getImgSrc(item)">预览模板</div>
</div>
<div class="show-img" :style="{backgroundImage:'url('+item.pics[0]+')'}">
</div>
<div class="Market_Info">
<div flex="dir:top main:center">
<div flex="main:justify">
<div class="item-name">{{item.name}}</div>
</div>
<div>
<div flex="cross:center main:justify">
<div class="price">
￥{{item.price}}
</div>
<button type="button" class="el-button el-button--primary el-button--mini">
<span>加载</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<el-dialog title="手机端预览" :visible.sync="viewDialog" width="600px">
<div class="MarketView" ref="MarketView">
<img :src="imgUrl" alt="" style="width: 375px;">
<el-form label-width="120px" style="padding:0 20px;">
<el-form-item label="模板名称">
<el-input v-model="PostMsg.Name" class="w400" size="small" maxlength="20" placeholder="请输入模板名称" />
</el-form-item>
<el-form-item label="封面图">
<el-input type="text" v-model="PostMsg.Pics" size="small" class="w400" placeholder="请输入选择封面图" />
</el-form-item>
<el-form-item label="价格">
<el-input type="text" v-model="PostMsg.Price" size="small" class="w400"
@keyup.native="checkPrice(PostMsg,'Price')" placeholder="请输入价格" />
</el-form-item>
<el-form-item label="启用/禁用">
<el-switch v-model="PostMsg.IsUse" active-color="#409EFF" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="显示/隐藏">
<el-switch v-model="PostMsg.IsShow" active-color="#409EFF" :active-value="1" :inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item label="排序">
<el-input type="text" v-model="PostMsg.SortNum" size="small" class="w400"
@keyup.native="checkInteger(PostMsg,'SortNum')" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="模板内容">
<el-input type="textarea" :rows="5" v-model="PostMsg.TemplateData" size="small" class="w400"
placeholder="请输入模板内容" />
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="viewDialog = false" size="small">确 定</el-button>
<el-button size="small" @click="isShow = false,clearMsg()">取消</el-button>
<el-button size="small" type="primary" @click="SaveMarket()">保存</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
//预览弹窗
viewDialog: false,
imgUrl: '',
dataList: [{
"id": 40,
"name": "618年中盛典-2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/35120f94cf467eb8874aa67afe0b12c4.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "618年中盛典-2",
"cloud_price": "0.00"
},
{
"id": 39,
"name": "618年中盛典",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/3dec44461189a8c99b157e426ec98aa4.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "618年中盛典",
"cloud_price": "0.00"
},
{
"id": 38,
"name": "51劳动节-2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/a65509e5cee18c6dda134cde50009892.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "51劳动节-2",
"cloud_price": "0.00"
},
{
"id": 37,
"name": "51劳动节",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/fdce3d73af8165e0f5652187213950e3.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "51劳动节",
"cloud_price": "0.00"
},
{
"id": 36,
"name": "妇女节2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/df3307934c25cfbf1ae2c1046037d8bc.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "妇女节2",
"cloud_price": "0.00"
},
{
"id": 35,
"name": "妇女节",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/be4f913235be3ca1b7a4b4d34bb45216.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "妇女节",
"cloud_price": "0.00"
},
{
"id": 34,
"name": "情人节模板2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/a0dadedd1a511bfa59fa63497a8c974d.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "情人节模板2",
"cloud_price": "0.00"
},
{
"id": 33,
"name": "春节模板2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/2022fc32d157bbdacae989174c75d583.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "春节模板2",
"cloud_price": "0.00"
},
{
"id": 31,
"name": "元宵节模板2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/5f8c2f51b4a9160decb00bed2277952f.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "元宵节模板2",
"cloud_price": "0.00"
},
{
"id": 30,
"name": "情人节模板",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/615112ec2dc3e3b0b8aaa9b0b93bd4f0.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "情人节模板",
"cloud_price": "0.00"
},
{
"id": 29,
"name": "元宵节模板",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/a5c397ade39f0e76c784d46078f0ea20.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "元宵节模板",
"cloud_price": "0.00"
},
{
"id": 28,
"name": "春节模板",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/2be7b8bd21b5b89c1008bcbfbd6fc876.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "春节模板",
"cloud_price": "0.00"
},
{
"id": 19,
"name": "超市3",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/63f989c9f7b9663e6ab9de13c03056b6.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "超市3",
"cloud_price": "0.00"
},
{
"id": 18,
"name": "超市2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/81ecb3a4ec8e8248da0e7f7a027bafd2.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "超市2",
"cloud_price": "0.00"
},
{
"id": 17,
"name": "超市1",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/3bddad82d6c63870596334e318777fa5.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "超市1",
"cloud_price": "0.00"
},
{
"id": 16,
"name": "美妆2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/dc9370e6666b5cb588d81c1b22c72151.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "美妆2",
"cloud_price": "0.00"
},
{
"id": 15,
"name": "美妆1",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/9d24aec77b45951b50343f3bc9708cd9.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "美妆1",
"cloud_price": "0.00"
},
{
"id": 14,
"name": "生鲜2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/7b516ba8fce669badea52aa2452dc3db.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.2",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "生鲜2",
"cloud_price": "0.00"
},
{
"id": 13,
"name": "生鲜1",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/3d6b77eb7d512537c8e03e86c1e052f5.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "生鲜1",
"cloud_price": "0.00"
},
{
"id": 10,
"name": "服饰3",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/2e86a1ad42ac8ea8b5f9c8e1131e2cc2.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "服饰3",
"cloud_price": "0.00"
},
{
"id": 9,
"name": "服饰2",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/7e96634708ed70371f9fbcd3dcba0bb4.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "服饰2",
"cloud_price": "0.00"
},
{
"id": 8,
"name": "服饰1",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/42d68cee10e3fa8af2c23ab81241e14e.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "服饰1",
"cloud_price": "0.00"
},
{
"id": 7,
"name": "双十二",
"pics": [
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/d66b72d485ceed26d358e8f142dec60f.png"
],
"price": "0.00",
"user_id": 8,
"type": "diy",
"version": "0.0.1",
"is_buy": 0,
"user": {
"id": 8,
"name": "程基恩"
},
"order": "",
"is_use": true,
"is_show": 0,
"use": true,
"template": {
"data": true
},
"cloud_name": "双十二",
"cloud_price": "0.00"
}
],
isShow: false,
dataList: [],
qMsg: {
pageIndex: 1,
pageSize: 15,
IsUse:-1,
IsShow:-1,
},
total: 0,
//添加修改
PostMsg: {
Id: 0, //编号
Name: "", //模板名称
Pics: "", //封面图
Price: 0.00, //价格
IsUse: 1, //是否使用(0-禁用,1-使用)
IsShow: 1, //是否显示(0-不显示,1-显示)
TemplateData: "", //模板数据
SortNum: 0, //排序
}
};
},
components: {
},
created() {
},
methods: {
getImgSrc(item) {
this.viewDialog = true;
this.imgUrl = item.pics[0];
handleCurrentChange(val) {
this.qMsg.pageIndex = val;
this.getList();
},
//清空数据
clearMsg() {
this.PostMsg.Id = 0;
this.PostMsg.Name = "";
this.PostMsg.Pics = "";
this.PostMsg.Price = 0;
this.PostMsg.IsUse = 1;
this.PostMsg.IsShow = 1;
this.PostMsg.TemplateData = "";
this.PostMsg.SortNum = 0;
},
getList() {
this.apipost("/api/Template/GetTemplateMarketPageListModule", this.qMsg, res => {
if (res.data.resultCode == 1) {
this.dataList = res.data.data.pageData;
this.total = res.data.data.count;
} else {
this.Info(res.data.message);
}
})
},
//保存模板市场数据
SaveMarket() {
this.apipost("/api/Template/SetTemplateMarket", this.PostMsg, res => {
if (res.data.resultCode == 1) {
this.isShow=false;
this.Success(res.data.message);
this.getList();
this.clearMsg();
} else {
this.Info(res.data.message);
}
})
},
//关闭
closeDialog() {
this.viewDialog = false;
this.$refs.MarketView.scrollTop = 0;
//修改模板市场
EditeMarket(item) {
this.apipost("/api/Template/GetTemplateMarket", {
Id: item.Id,
}, res => {
if (res.data.resultCode == 1) {
this.PostMsg = res.data.data;
this.isShow = true;
} else {
this.Info(res.data.message);
}
})
},
//删除模板市场
DeleteMarket(item) {
let that = this;
that.Confirm("是否删除?", function () {
that.apipost("/api/Template/RemoveTemplateMarket", {
Id: item.Id,
}, res => {
if (res.data.resultCode == 1) {
that.Success(res.data.message);
that.getList();
} else {
that.Info(res.data.message);
}
})
});
},
//更新是否使用
updateIsUse(item) {
this.apipost("/api/Template/UpdateTemplateMarketIsUse", {
Id: item.Id,
IsUse: item.IsUse
}, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message);
this.getList();
} else {
this.Info(res.data.message);
}
})
},
//更新是否显示
updateIsShow(item) {
this.apipost("/api/Template/UpdateTemplateMarketIsShow", {
Id: item.Id,
IsShow: item.IsShow
}, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message);
this.getList();
} else {
this.Info(res.data.message);
}
})
}
},
mounted() {}
mounted() {
this.getList();
}
};
</script>
<style>
.templateMarket .content {
background: #fff;
padding-top: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.templateMarket .template_MarketList {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.templateMarket .Market_List {
width: 207.5px;
height: 370px;
padding: 0 0 20px 20px;
}
.templateMarket .MarketInner {
width: 187.5px;
position: relative;
top: 0;
border: 1px solid #e2e2e2;
border-radius: 5px;
height: 350px;
}
.MarketInner:hover .dialog-img {
display: flex;
}
.Market_List:hover .MarketInner {
top: -10px;
box-shadow: 0 4px 4px 4px #ECECEC;
}
.templateMarket .dialog-img {
background-color: rgba(0, 0, 0, .4);
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 187.5px;
height: 270px;
display: none;
}
.dialog-img .choose-btn {
cursor: pointer;
border-radius: 6px;
height: 40px;
line-height: 38px;
width: 120px;
margin: 10px auto;
text-align: center;
border: 1px solid #fff;
color: #fff;
font-size: 16px;
}
.templateMarket .market_useBtn {
border: 1px solid #3399ff !important;
background-color: #3399ff;
}
.templateMarket .show-img {
width: 187.5px;
height: 270px;
overflow: hidden;
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
}
.templateMarket .Market_Info {
padding: 0 10px;
width: 100%;
background-color: #fff;
}
.templateMarket .item-name {
font-size: 16px;
margin: 5px 0;
width: 80%;
}
.templateMarket .price {
color: #ff4544;
}
.MarketView {
height: 600px;
overflow-y: auto;
text-align: center;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment