Skip to content

E
ElectricitySheep
Commit 7a3f32a4 authored by zhengke's avatar zhengke
Browse files
Options

增加页面

parent 01697978
Hide whitespace changes
Inline Side-by-side
Showing with 768 additions and 1 deletion
src/components/Ftemplate.vue
View file @ 7a3f32a4
......@@ -178,7 +178,7 @@
<li class="menu_item" :class="{'Fchecked':isChecked=='/templateManage'}" @click="isChecked='/templateManage',CommonJump('templateManage')">
<i class="el-icon-menu"></i><span>模板管理</span>
</li>
<li class="menu_item" :class="{'Fchecked':isChecked==''}">
<li class="menu_item" :class="{'Fchecked':isChecked=='/templateMarket'}" @click="isChecked='/templateMarket',CommonJump('templateMarket')">
<i class="el-icon-menu"></i><span>模板市场</span>
</li>
<li class="menu_item" :class="{'Fchecked':isChecked=='/CustomPage'}" @click="isChecked='/CustomPage',CommonJump('CustomPage')">
......
src/components/sallCenter/templateMarket.vue 0 → 100644
View file @ 7a3f32a4
<template>
<div class="templateMarket">
<template>
<div class="head-title">
模板市场
</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>
</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>
<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>
</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"
}
],
};
},
components: {
},
created() {
},
methods: {
getImgSrc(item) {
this.viewDialog = true;
this.imgUrl = item.pics[0];
},
//关闭
closeDialog() {
this.viewDialog = false;
this.$refs.MarketView.scrollTop = 0;
}
},
mounted() {}
};
</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>
src/router/index.js
View file @ 7a3f32a4
......@@ -95,6 +95,10 @@ export default new Router({
path: '/authorization',
name: 'authorization',
component: resolve => require(['@/components/sallCenter/authorization'], resolve),
},{ //模板市场
path: '/templateMarket',
name: 'templateMarket',
component: resolve => require(['@/components/sallCenter/templateMarket'], resolve),
}]
},
{
......
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