<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><!-- 引入样式 --><linkrel="stylesheet"href=".css"/><linkrel="stylesheet"href="@2.2/lib/index.css"/><!-- <link rel="stylesheet" href="./首页.css" /> --><script src=".4.1/jquery.min.js"></script><script src=".min.js"></script><script src=".19.0/axios.min.js"></script><script src="@2.2/lib/vant.min.js"></script><style>* {box-sizing: border-box;padding: 0;margin: 0;-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}li {list-style: none;}::-webkit-scrollbar {display: none;}#app {width: 100%;height: 100vh;display: flex;justify-content: space-between;}.flex {display: flex;justify-content: space-between;align-items: center;}.flex_l {display: flex;justify-content: flex-start;align-items: center;}.flex_lt {display: flex;justify-content: flex-start;align-items: flex-start;}.flex_y {display: flex;justify-content: flex-start;align-items: center;flex-direction: column;}.yihang {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.erhang {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}.left {background-color: #222d32;width: 580px;height: 100vh;position: relative;background: url(".png") no-repeatcenter center;}.left:hover {background-color: #222d32;}.left .index {background-color: #fff;width: 375px;height: 667px;overflow-x: hidden;overflow-y: auto;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.left .index .msg {width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);color: #fff;z-index: 999;position: absolute;display: none;}.left .index .msg .edit {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.left .index .msg .edit img {width: 30px;height: 30px;margin-right: 10px;}.left .index .box {height: 50px;}.left .index .box:hover .msg {display: block;}.left .index .box .head {background-image: linear-gradient(to bottom right, red, yellow);padding: 0 15px 0 0;height: 50px;position: fixed;top: 0;left: 0;right: 0;z-index: 99;}.left .index .box .head .geren {height: 44px;}.left .index .box .head .van-button--primary {background: transparent;border: 1px solid transparent;}.left .index .box .head .search {flex: 1;margin: 0 10px 0 0;background-color: #fff;border-radius: 20px;height: 30px;position: relative;font-size: 12px;}.left .index .box .head .search .sear {border: none;width: 85%;height: 100%;border-radius: 20px;padding-left: 15%;}.left .index .box .head .search i {position: absolute;left: 15px;top: 8px;}.left .index .box .head .rightImg {width: 22px;height: 22px;}.left .index .content .lunbo {width: 100%;height: 160px;}.left .index .content .lunbo:hover .msg {display: block;}.left .index .content .cat {color: #333;flex-wrap: wrap;background-color: #f5f6f7;padding: 10px 10px 0px;}.left .index .content .cat:hover .msg {display: block;}.left .index .content .cat .item {width: 20%;flex-direction: column;margin: 8px 0;font-size: 10px;}.left .index .content .cat .item img {width: 43px;height: 43px;border-radius: 50%;}.left .index .content .cat .item p {margin-top: 5px;}.left .index .content .notice {font-size: 12px;width: 375px;height: 40px;}.left .index .content .notice:hover .msg {display: block;}.left .index .content .notice img {margin: 0 5px;}.left .index .content .banner:hover .msg {display: block;}.left .index .content .banner .one,.left .index .content .banner .two,.left .index .content .banner .three {width: 100%;height: 120px;}.left .index .content .banner .one img {width: 100%;height: 100%;}.left .index .content .banner .two img {width: 50%;height: 100%;}.left .index .content .banner .three img {width: 33.33%;height: 100%;}.left .index .content .title {width: 100%;height: 60px;}.left .index .content .goods:hover .msg {display: block;}.left .index .content .goods .colist {padding: 15px;flex-wrap: wrap;margin-top: -1px;}.left .index .content .goods .colist li {background-color: #fff;margin-bottom: 10px;box-shadow: 1px 3px 5px #e6dada;border-radius: 5px;}.left .index .content .goods .colist li img {width: 120px;height: 100px;border-radius: 5px;}.left .index .content .goods .colist li .name {font-size: 14px;margin: 5px 5px 3px;color: #333;height: 40px;}.left .index .content .goods .colist li .pro {flex: 1;font-size: 12px;color: #666;margin: 0 5px;}.left .index .content .goods .colist li .price {font-size: 16px;color: #f00;font-weight: 700;margin: 4px 5px;}.left .index .content .goods .colist li .price i {font-size: 14px;}.left .index .content .goods .list {padding: 12px;flex-wrap: wrap;margin-top: -1px;}.left .index .content .goods .list li {width: 48%;margin-bottom: 10px;box-shadow: 1px 3px 5px #e6dada;border-radius: 5px;}.left .index .content .goods .list li img {width: 100%;height: 160px;border-radius: 5px;}.left .index .content .goods .list li .name {font-size: 15px;margin: 10px 5px 5px;color: #333;height: 40px;}.left .index .content .goods .list li .pro {font-size: 12px;color: #666;margin: 0 5px;}.left .index .content .goods .list li .price {font-size: 20px;color: #f00;margin: 5px;}.left .index .content .goods .list li .price i {font-size: 10px;}.right {flex: 1;height: 100vh;position: relative;}.right .open {padding: 50px;border-bottom: 1px solid #f5f6f7;}.right .lunbo .item,.right .nine .item,.right .notice .item,.right .banner .item {border-bottom: 1px solid #f5f6f7;padding: 20px 60px;}.right .lunbo .upload,.right .nine .upload,.right .notice .upload,.right .banner .upload {position: relative;width: 250px;height: 108px;}.right .lunbo .upload .trueimg,.right .nine .upload .trueimg,.right .notice .upload .trueimg,.right .banner .upload .trueimg {width: 100%;height: 100%;}.right .lunbo .upload input[type="file"],.right .nine .upload input[type="file"],.right .notice .upload input[type="file"],.right .banner .upload input[type="file"] {width: 100%;height: 100%;opacity: 0;z-index: 999;position: absolute;left: 0;top: 0;}.right .lunbo .upload input[type="text"],.right .nine .upload input[type="text"],.right .notice .upload input[type="text"],.right .banner .upload input[type="text"] {opacity: 0;width: 0px;height: 0px;}.right .lunbo .upload .up,.right .nine .upload .up,.right .notice .upload .up,.right .banner .upload .up {width: 100px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.right .lunbo .url p,.right .nine .url p,.right .notice .url p,.right .banner .url p {margin-right: 20px;}.right .nine .upload {width: 80px;height: 80px;border-radius: 50%;}.right .notice .upload {width: 150px;height: 50px;margin-left: 20px;}.right .banner .ban1 .title,.right .banner .ban3 .title {width: 100%;padding: 0 50px;}.right .banner .ban1 .open,.right .banner .ban3 .open {border-bottom: none;padding: 30px 50px;}.right .banner .ban1 .upload,.right .banner .ban3 .upload {margin-right: 50px;width: 375px;height: 120px;}.right .banner .ban3 .upload {margin-right: 50px;width: 100px;height: 90px;}.right .banner .ban3 .item {border-bottom: none;}.right .list {padding: 50px;}</style></head><body><div id="app"><div class="left"><div class="index"><!-- 内容 --><div class="content"><!-- 轮播图 --><div class="lunbo"><div class="msg" @click="edit(1)"><div class="edit flex_l"><img src=".png" alt="" /><span>编辑</span></div></div><van-swipe:autoplay="3000"indicator-color="white":height="160"class="lunbo"><van-swipe-itemclass="lun"v-for="(item,i) in oldLunbo":key="i"><imgstyle="display:block;width:100%;height:100%;":src="item.imgurl"/></van-swipe-item></van-swipe></div><!-- 分类 九宫格 --><div class="cat flex_l" v-show="nineOpen"><div class="msg" @click="edit(2)"><div class="edit flex_l"><img src=".png" alt="" /><span>编辑</span></div></div><div class="item flex" v-for="(item,i) in oldNine" :key="i"><img :src="item.itemimg" alt="" /><p>{{ }}</p></div></div><!-- 公告 --><div class="notice flex" v-show="noticeOpen"><div class="msg" @click="edit(3)"><div class="edit flex_l"><img src=".png" alt="" /><span>编辑</span></div></div><imgstyle="width: 80px;height: 20px;":src=&#wimg"alt=""/><van-swipe:autoplay="3000"style="width:100%;height: 40px;line-height:40px;padding:0px 10px 0px 0px;":vertical="true":show-indicators="false"><van-swipe-itemclass="lun"v-for="(item,i) ice":key="i"style="width:100%;height: 40px;"><p class="yihang" style="color:#fc4c4c;font-size: 12px;">{{ }}</p></van-swipe-item></van-swipe></div><!-- 广告图 --><div class="banner"><div class="msg" @click="edit(4)"><div class="edit flex_l"><img src=".png" alt="" /><span>编辑</span></div></div><!-- 一张图 --><div class="one" v-if="banner.open1"><img :src="oldBanner.ban1.img" alt="" /></div><!-- 三张图 --><div class="three flex_l" v-if="banner.open3"><img:src="item.img"v-for="(item,i) in oldBanner.ban3"alt=""/></div></div><!-- 精选商品 --><div class="title" style="margin:10px 0 15px;"><img src=".png" alt /></div><div class="goods"><div class="msg" @click="edit(5)"><div class="edit flex_l"><img src=".png" alt="" /><span>编辑</span></div></div><!-- 商品横向列表 --><div class="colist" v-if="listflag==1"><divclass="null"v-if="list.length==0"style="text-align:center;width:100%;">暂无商品</div><liclass="flex_l"@click="ds_id)"v-for="(item,i) in list":key="i"><img :src=&#ver_Image" /><div class="pro"><div class="name erhang">{{ item.name }}</div><!-- 小标签 --><div class="price" v-if="item.price==item.self_price"><istyle="margin-right:-5px;font-weight:400;font-size:12px;">￥</i>{{ item.price }}</div><div v-else class="price"><i style="margin-right:-5px;font-weight:400;">￥</i>{{ item.self_price }}<sstyle="color:#999;font-size:10px;margin-left:5px;font-weight:400;">￥{{ item.price }}</s></div></div></li></div><!-- 商品竖向列表 --><div class="list flex" v-else><divclass="null"v-if="list.length==0"style="text-align:center;width:100%;">暂无商品</div><li@click="ds_id)"v-for="(item,i) in list":key="i"><img :src=&#ver_Image" /><div class="name erhang">{{ item.name }}</div><div class="price" v-if="item.price==item.self_price"><i style="margin-right:-5px;font-weight:400;font-size:12px;">￥</i>{{ item.price }}</div><div v-else class="price"><i style="margin-right:-5px;font-weight:400;">￥</i>{{ item.self_price }}<sstyle="color:#999;font-size:10px;margin-left:5px;font-weight:400;">￥{{ item.price }}</s></div></li></div></div></div></div></div><div class="right"><!-- tab切换 --><el-menu:default-active="flag"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#18BC9C"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">轮播图设置</el-menu-item><el-menu-item index="2">九宫格设置</el-menu-item><el-menu-item index="3">公告设置</el-menu-item><el-menu-item index="4">广告图设置</el-menu-item><el-menu-item index="5">商品列表设置</el-menu-item></el-menu><!-- 轮播图 --><div class="lunbo" v-if="flag==1"><div class="con"><div class="item flex" v-for="(item,i) in lunboList"><div class="upload flex_y"><imgclass="trueimg"v-if="item.imgurl":src="item.imgurl"alt=""/><input type="file" class="" @change="upimage1($event,i)" /><imgclass="up"v-if="!item.imgurl"src=".png"alt=""/><input type="text" name="" :value="item.imgurl" /></div><div class="url flex_l"><p>跳转地址</p><el-select v-model="item.url" placeholder="请选择跳转链接"><el-option-groupv-for="group in options3":key="group.label":label="group.label"><el-optionv-for="item in group.options":key="item.value":label="item.label":value="item.value"></el-option></el-option-group></el-select></div><div class="btn" style="width:160px;"><el-button type="danger" @click="addlunbo">添加</el-button><el-button type="primary" v-if="i" @click="dellunbo(i)">删除</el-button></div></div></div></div><!-- 九宫格 --><div class="nine" v-if="flag==2"><div class="con"><div class="open"><el-switchstyle="display: block"v-model="nineOpen"active-color="#13ce66"inactive-color="#ccc"active-text="开启"inactive-text="关闭"></el-switch></div><div class="item flex" v-for="(item,i) in nineList"><div class="upload"><imgclass="trueimg"v-if="item.itemimg":src="item.itemimg"alt=""/><input type="file" class="" @change="upimage2($event,i)" /><imgclass="up"v-if="!item.itemimg"src=".png"alt=""/><input type="text" name="" :value="item.itemimg" /></div><div class="text flex_l"><span style="width: 50px;">名称</span><el-inputv-model=&#"placeholder="请输入类目名称"></el-input></div><div class="url flex_l"><p>跳转地址</p><el-select v-model="item.url" placeholder="请选择跳转链接"><el-option-groupv-for="group in options3":key="group.label":label="group.label"><el-optionv-for="item in group.options":key="item.value":label="item.label":value="item.value"></el-option></el-option-group></el-select></div><div class="btn" style="width:160px;"><el-button type="danger" @click="addNine">添加</el-button><el-button type="primary" v-if="i" @click="delNine(i)">删除</el-button></div></div></div></div><!-- 公告 --><div class="notice" v-if="flag==3"><div class="con"><div class="open"><el-switchstyle="display: block"v-model="noticeOpen"active-color="#13ce66"inactive-color="#ccc"active-text="开启"inactive-text="关闭"></el-switch></div><div class="item flex_l"><p>上传图片或LOGO</p><div class="upload"><imgclass="trueimg"v-if=&#wimg":src=&#wimg"alt=""/><input type="file" class="" @change="upimage3($event)" /><imgclass="up"v-if="!wimg"src=".png"alt=""/><input type="text" name="" :value=&#wimg" /></div></div><div class="item flex" v-for="(item,i) ice"><div class="text flex_l"><p style="width: 110px;">公告内容</p><el-inputv-model=&#"placeholder="请输入公告内容"></el-input></div><div class="url flex_l"><p>跳转地址</p><el-select v-model="item.url" placeholder="请选择跳转链接"><el-option-groupv-for="group in options3":key="group.label":label="group.label"><el-optionv-for="item in group.options":key="item.value":label="item.label":value="item.value"></el-option></el-option-group></el-select></div><div class="btn" style="width:160px;"><el-button type="danger" @click="addNotice">添加</el-button><el-button type="primary" v-if="i" @click="delNotice(i)">删除</el-button></div></div></div></div><!-- 广告图 --><div class="banner" v-if="flag==4"><div class="con"><div class="ban1"><div class="title flex_l"><p>单图广告</p><div class="open"><el-switchstyle="display: block"v-model="banner.open1"active-color="#13ce66"inactive-color="#ccc"active-text="开启"inactive-text="关闭"></el-switch></div></div><div class="item flex_l"><div class="upload"><imgclass="trueimg"v-if="banner.ban1.img":src="banner.ban1.img"alt=""/><input type="file" class="" @change="upimage4($event)" /><imgclass="up"v-if="!banner.ban1.img"src=".png"alt=""/><input type="text" name="" :value="banner.ban1.img" /></div><div class="url flex_l"><p>跳转地址</p><el-selectv-model="banner.ban1.url"placeholder="请选择跳转链接"><el-option-groupv-for="group in options3":key="group.label":label="group.label"><el-optionv-for="item in group.options":key="item.value":label="item.label":value="item.value"></el-option></el-option-group></el-select></div></div></div><div class="ban3"><div class="title flex_l"><p>三图广告</p><div class="open"><el-switchstyle="display: block"v-model="banner.open3"active-color="#13ce66"inactive-color="#ccc"active-text="开启"inactive-text="关闭"></el-switch></div></div><div class="item flex_l" v-for="(item,i) in banner.ban3"><div class="upload"><img class="trueimg" v-if="item.img" :src="item.img" alt="" /><input type="file" class="" @change="upimage5($event,i)" /><imgclass="up"v-if="!item.img"src=".png"alt=""/><input type="text" name="" :value="item.img" /></div><div class="url flex_l"><p>跳转地址</p><el-select v-model="item.url" placeholder="请选择跳转链接"><el-option-groupv-for="group in options3":key="group.label":label="group.label"><el-optionv-for="item in group.options":key="item.value":label="item.label":value="item.value"></el-option></el-option-group></el-select></div></div></div></div></div><!-- 商品列表 --><div class="list" v-if="flag==5"><div class="item"><el-radio v-model="listflag" label="1">横向排列</el-radio><el-radio v-model="listflag" label="2">竖向排列</el-radio></div></div></div></div></body><!-- 引入组件库 --><script src=".js"></script><!-- 引入canvas --><script>new Vue({el: "#app",data: function() {return {flag: "1", //编辑模块 轮播1 九宫格2 公告3 广告4 商品列表 5oldLunbo: [{imgurl: ".png",url: ""},{imgurl: ".png",url: ""}],lunboList: [{url: "",imgurl: ""}], //轮播列表nineOpen: true,oldNine: [{itemimg: ".png",text: "客服",url: ""},{itemimg: ".png",text: "收藏",url: ""},{itemimg: ".png",text: "足迹",url: ""},{itemimg: ".png",text: "信息",url: ""},{itemimg: ".png",text: "商学院",url: ""},{itemimg: ".png",text: "礼物",url: ""},{itemimg: ".png",text: "升级",url: ""},{itemimg: ".png",text: "订单",url: ""},{itemimg: ".png",text: "购物",url: ""},{itemimg: ".png",text: "淘宝",url: ""}],// 九宫格列表nineList: [{text: "", //文字url: "", //链接itemimg: ""}],// 公告oldNotice: {newimg: ".png",notice: [{text: "秋季补水神器上新了，欢迎抢购",url: ""},{text:"河南乐匠科技专注于微商管理系统：授权管理、团队管理、订单发货、防伪控价、活动营销、零售系统、业绩返利、数据分析、商学院、素材圈等。",url: ""}]},noticeList: {newimg: "",notice: [{text: "",url: ""}]},noticeOpen: true,// 广告oldBanner: {ban1: {img: ".gif",url: ""},ban3: [{img: ".gif",url: ""},{img: ".gif",url: ""},{img: ".png",url: ""}]},banner: {ban1: {img: "",url: ""},ban3: [{img: "",url: ""},{img: "",url: ""},{img: "",url: ""}],newimg1: "",mewimg3: [],open1: true,open3: true},options3: [//轮播链接选择{label: "商品",options: [{value: "Shanghai",label: "西瓜瓜"},{value: "Beijing",label: "帅帅"}]},{label: "菜单",options: [{value: "Chengdu",label: "邀请"}]}],listflag: "1", //1横排 2竖排list: [{label: null,goods_id: 21,name:"美肤宝面霜精萃透白精华霜美白补水滋润保湿霜懒人霜学生女正品",cover_Image:".jpg",category_name: "美肤宝",brand_name: "美肤宝",self_price: "75",self_pick: 1,price: 109,size_name: "小白瓶",size_value: "1",sales_target_text: "",status_text: ""},{label: null,goods_id: 20,name: "菁美妍补水精华面膜",cover_Image:".jpg",category_name: "菁美妍",brand_name: "菁美妍",self_price: "85",self_pick: 1,price: 120,size_name: "盒",size_value: "1",sales_target_text: "",status_text: ""},{label: null,goods_id: 19,name:"美肤宝五珍套装补水保湿提拉紧致抗皱淡化细纹官方直营旗舰护肤品",cover_Image:".jpg",category_name: "美肤宝",brand_name: "美肤宝",self_price: "150",self_pick: 1,price: 209,size_name: "五件套",size_value: "五件套",sales_target_text: "",status_text: ""},{label: null,goods_id: 18,name: "悦木之源黑金面膜",cover_Image:".jpg",category_name: "悦木之源",brand_name: "悦木之源",self_price: "60",self_pick: 1,price: 109,size_name: "粉色",size_value: "粉色",sales_target_text: "",status_text: ""}]};},watch: {},computed: {},mounted() {// axios.post('').then(res=>{// console.log(res.data);// })},methods: {// 点击tab切换handleSelect(key, keyPath) {console.log(key, keyPath);this.flag = key;},// 编辑轮播图edit(index) {this.flag = index;},// 上传图片upimage1(e, i) {this.upload(e).then(data => {this.lunboList[i].imgurl ="" + data;}).then(data => {this.updataLeft();});},// 更新左边updataLeft() {let a = [];this.lunboList.forEach(item => {if (item.imgurl) {a.push(item);}});this.oldLunbo = a;},// 添加轮播图addlunbo() {this.lunboList.push({url: "",imgurl: ""});},// 删除轮播图dellunbo(i) {this.lunboList.splice(i, 1);this.updataLeft();},// 添加九宫格addNine() {this.nineList.push({text: "",url: "",itemimg: ""});},upimage2(e, i) {this.upload(e).then(data => {this.nineList[i].itemimg ="" + data;}).then(data => {this.updataNine();});},// 更新左边updataNine() {let a = [];this.nineList.forEach(item => {if (item.itemimg) {a.push(item);}});this.oldNine = a;},// 删除九宫格delNine(i) {this.nineList.splice(i, 1);this.updataNine();},updataNotice() {this.oldNotice = iceList;},// 上传图片upimage3(e) {this.upload(e).then(data => {wimg ="" + data;}).then(data => {this.updataNotice();});},// 添加公告addNotice() {ice.push({text: "",url: ""});this.updataNotice();},// 删除公告delNotice(i) {ice.splice(i, 1);},// 上传图片upimage4(e) {this.upload(e).then(data => {this.banner.ban1.img ="" + data;}).then(data => {this.oldBanner.ban1 = this.banner.ban1;});},// 上传图片upimage5(e, i) {this.upload(e).then(data => {this.banner.ban3[i].img ="" + data;}).then(data => {this.oldBanner.ban3 = this.banner.ban3;});},/*将base64转换为file*/dataURLtoFile(dataurl, filename) {//将base64转换为文件var arr = dataurl.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type: mime});},// ajax上传图片——文件流方式upload(e) {return new Promise((resolve, reject) => {// 实例化FormDatavar formdata = new FormData();// 将文件信息存入formdata，键名为file// formdata会将文件信息序列化为ajax可识别的数据类型formdata.append("file", e.target.files[0]);$.ajax({type: "post",url:"=97b9cba4-5ec6-4a83-9a6c-f3190d47daf4&sign_id=21hd8eksuq7db5hs",data: formdata, // formdata直接赋值给dataprocessData: false, //formdata已将数据序列化，无需在处理contentType: false, //formdata无需设置请求头success: function(res) {console.log(res);resolve(res.data.url);}});});}}});</script>
</html>本文发布于:2024-01-27 18:01:08，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17063496661781.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
