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 @@ ...@@ -6,7 +6,7 @@
<div class="hoindexImgdiv"> <div class="hoindexImgdiv">
<img src="../assets/img/logo.png" alt="" style="height:30px"> <img src="../assets/img/logo.png" alt="" style="height:30px">
</div> </div>
<div class="hoindexRight"> <div class="hoindexRight" style="cursor:pointer;">
<el-dropdown> <el-dropdown>
<span class="el-dropdown-link" style="color:#fff;font-size:16px"> <span class="el-dropdown-link" style="color:#fff;font-size:16px">
<i class="iconfont icon-iconzh1"></i> <i class="iconfont icon-iconzh1"></i>
......
src/components/sallCenter/templateManage.vue
View file @ 98ba777b
...@@ -50,6 +50,9 @@ ...@@ -50,6 +50,9 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </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>
</div> </div>
</template> </template>
...@@ -60,7 +63,7 @@ ...@@ -60,7 +63,7 @@
dataList: [], dataList: [],
qMsg: { qMsg: {
pageIndex: 1, pageIndex: 1,
pageSize: 20, pageSize: 15,
}, },
total: 0 total: 0
}; };
...@@ -69,6 +72,10 @@ ...@@ -69,6 +72,10 @@
}, },
methods: { methods: {
handleCurrentChange(val) {
this.qMsg.pageIndex = val;
this.getList();
},
getList() { getList() {
this.apipost("/api/Template/GetMiniTemplatePageList", this.qMsg, res => { this.apipost("/api/Template/GetMiniTemplatePageList", this.qMsg, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
...@@ -106,4 +113,5 @@ ...@@ -106,4 +113,5 @@
this.getList(); this.getList();
} }
}; };
</script>
\ No newline at end of file </script>
src/components/sallCenter/templateMarket.vue
View file @ 98ba777b
<template> <template>
<div class="templateMarket"> <div class="templateMarket">
<template> <div class="template_comheader">
<div class="head-title"> <div>
模板市场 <span>模板市场</span>
<el-button type="primary" size="small" @click="CommonJump('templateMarketManage',{})">模板市场管理</el-button>
</div> </div>
<div class="content"> </div>
<div style="padding:0 20px;margin-bottom:20px;"> <div class="content">
<el-select size="small" style="width:150px;"> <div class="template_MarketList">
<el-option label="全部模板" :value="1"> </el-option> <div class="Market_List" v-for="(item,index) in dataList" :key="index">
<el-option label="已拥有模板" :value="2"> </el-option> <div class="MarketInner">
<el-option label="未拥有模板" :value="3"> </el-option> <div flex="dir:top cross:center main:center" class="dialog-img">
</el-select> <div class="choose-btn market_useBtn" @click="LoadTemplate(item)">加载模板</div>
</div> <div class="choose-btn" @click="getImgSrc(item)">预览模板</div>
<div class="template_MarketList"> </div>
<div class="Market_List" v-for="(item,index) in dataList" :key="index"> <div class="show-img" :style="{backgroundImage:'url('+item.Pics+')'}">
<div class="MarketInner"> </div>
<div flex="dir:top cross:center main:center" class="dialog-img"> <div class="Market_Info">
<div class="choose-btn market_useBtn">加载模板</div> <div flex="dir:top main:center">
<div class="choose-btn" @click="getImgSrc(item)">预览模板</div> <div flex="main:justify">
</div> <div class="item-name">{{item.Name}}</div>
<div class="show-img" :style="{backgroundImage:'url('+item.pics[0]+')'}"> </div>
</div> <div>
<div class="Market_Info"> <div flex="cross:center main:justify">
<div flex="dir:top main:center"> <div class="price">
<div flex="main:justify"> ￥{{item.Price}}
<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>
<button type="button" class="el-button el-button--primary el-button--mini">
<span @click="LoadTemplate(item)">加载</span>
</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -42,8 +36,7 @@ ...@@ -42,8 +36,7 @@
</div> </div>
</div> </div>
</div> </div>
</template> </div>
<el-dialog title="手机端预览" :visible.sync="viewDialog" width="600px"> <el-dialog title="手机端预览" :visible.sync="viewDialog" width="600px">
<div class="MarketView" ref="MarketView"> <div class="MarketView" ref="MarketView">
<img :src="imgUrl" alt="" style="width: 375px;"> <img :src="imgUrl" alt="" style="width: 375px;">
...@@ -53,7 +46,6 @@ ...@@ -53,7 +46,6 @@
<el-button type="primary" @click="viewDialog = false" size="small">确 定</el-button> <el-button type="primary" @click="viewDialog = false" size="small">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
...@@ -63,582 +55,14 @@ ...@@ -63,582 +55,14 @@
//预览弹窗 //预览弹窗
viewDialog: false, viewDialog: false,
imgUrl: '', imgUrl: '',
dataList: [{ dataList: [],
"id": 40, qMsg: {
"name": "618年中盛典-2", pageIndex: 1,
"pics": [ pageSize: 15,
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/35120f94cf467eb8874aa67afe0b12c4.png" IsUse: 1,
], IsShow: 1,
"price": "0.00", },
"user_id": 8, total: 0,
"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"
}
],
}; };
}, },
components: { components: {
...@@ -650,15 +74,48 @@ ...@@ -650,15 +74,48 @@
methods: { methods: {
getImgSrc(item) { getImgSrc(item) {
this.viewDialog = true; this.viewDialog = true;
this.imgUrl = item.pics[0]; this.imgUrl = item.Pics;
}, },
//关闭 //关闭
closeDialog() { closeDialog() {
this.viewDialog = false; this.viewDialog = false;
this.$refs.MarketView.scrollTop = 0; 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> </script>
...@@ -670,6 +127,13 @@ ...@@ -670,6 +127,13 @@
box-sizing: border-box; box-sizing: border-box;
} }
.templateMarket .template_comheader>div {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
.templateMarket .template_MarketList { .templateMarket .template_MarketList {
display: flex; display: flex;
flex-direction: row; 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> <template>
<div class="templateMarket"> <div class="templateMarketManage">
<template> <div class="template_comheader">
<div class="head-title"> <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>
<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 class="content">
<div style="padding:0 20px;margin-bottom:20px;"> <el-form label-width="120px" style="padding:0 20px;">
<el-select size="small" style="width:150px;"> <el-form-item label="模板名称">
<el-option label="全部模板" :value="1"> </el-option> <el-input v-model="PostMsg.Name" class="w400" size="small" maxlength="20" placeholder="请输入模板名称" />
<el-option label="已拥有模板" :value="2"> </el-option> </el-form-item>
<el-option label="未拥有模板" :value="3"> </el-option> <el-form-item label="封面图">
</el-select> <el-input type="text" v-model="PostMsg.Pics" size="small" class="w400" placeholder="请输入选择封面图" />
</div> </el-form-item>
<div class="template_MarketList"> <el-form-item label="价格">
<div class="Market_List" v-for="(item,index) in dataList" :key="index"> <el-input type="text" v-model="PostMsg.Price" size="small" class="w400"
<div class="MarketInner"> @keyup.native="checkPrice(PostMsg,'Price')" placeholder="请输入价格" />
<div flex="dir:top cross:center main:center" class="dialog-img"> </el-form-item>
<div class="choose-btn market_useBtn">加载模板</div> <el-form-item label="启用/禁用">
<div class="choose-btn" @click="getImgSrc(item)">预览模板</div> <el-switch v-model="PostMsg.IsUse" active-color="#409EFF" :active-value="1" :inactive-value="0"></el-switch>
</div> </el-form-item>
<div class="show-img" :style="{backgroundImage:'url('+item.pics[0]+')'}"> <el-form-item label="显示/隐藏">
</div> <el-switch v-model="PostMsg.IsShow" active-color="#409EFF" :active-value="1" :inactive-value="0">
<div class="Market_Info"> </el-switch>
<div flex="dir:top main:center"> </el-form-item>
<div flex="main:justify"> <el-form-item label="排序">
<div class="item-name">{{item.name}}</div> <el-input type="text" v-model="PostMsg.SortNum" size="small" class="w400"
</div> @keyup.native="checkInteger(PostMsg,'SortNum')" placeholder="请输入排序" />
<div> </el-form-item>
<div flex="cross:center main:justify"> <el-form-item label="模板内容">
<div class="price"> <el-input type="textarea" :rows="5" v-model="PostMsg.TemplateData" size="small" class="w400"
￥{{item.price}} placeholder="请输入模板内容" />
</div> </el-form-item>
<button type="button" class="el-button el-button--primary el-button--mini"> </el-form>
<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;">
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button size="small" @click="closeDialog">取 消</el-button> <el-button size="small" @click="isShow = false,clearMsg()">取消</el-button>
<el-button type="primary" @click="viewDialog = false" size="small">确 定</el-button> <el-button size="small" type="primary" @click="SaveMarket()">保存</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
//预览弹窗 isShow: false,
viewDialog: false, dataList: [],
imgUrl: '', qMsg: {
dataList: [{ pageIndex: 1,
"id": 40, pageSize: 15,
"name": "618年中盛典-2", IsUse:-1,
"pics": [ IsShow:-1,
"http://auth-zjhejiang-com.oss-cn-hangzhou.aliyuncs.com/uploads/versions/35120f94cf467eb8874aa67afe0b12c4.png" },
], total: 0,
"price": "0.00", //添加修改
"user_id": 8, PostMsg: {
"type": "diy", Id: 0, //编号
"version": "0.0.1", Name: "", //模板名称
"is_buy": 0, Pics: "", //封面图
"user": { Price: 0.00, //价格
"id": 8, IsUse: 1, //是否使用(0-禁用,1-使用)
"name": "程基恩" IsShow: 1, //是否显示(0-不显示,1-显示)
}, TemplateData: "", //模板数据
"order": "", SortNum: 0, //排序
"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"
}
],
}; };
},
components: {
}, },
created() { created() {
}, },
methods: { methods: {
getImgSrc(item) { handleCurrentChange(val) {
this.viewDialog = true; this.qMsg.pageIndex = val;
this.imgUrl = item.pics[0]; 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() { EditeMarket(item) {
this.viewDialog = false; this.apipost("/api/Template/GetTemplateMarket", {
this.$refs.MarketView.scrollTop = 0; 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> </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