From 8f5cb6a122d2024c7ec5cd2b2fce3962da6c6104 Mon Sep 17 00:00:00 2001 From: red-deng-deng <1924913374@qq.com> Date: Sat, 8 Jan 2022 18:19:33 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E9=A2=84=E8=A7=88?= =?UTF-8?q?=E6=95=88=E6=9E=9C=E7=BC=96=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../exchangepage/edittemplate/detailsPage.js | 2 +- src/pages/exchangepage/edittemplate/main.js | 13 +- src/pages/exchangepage/template/preview.js | 350 +++++------------- src/pages/exchangepage/template/preview.less | 34 +- 4 files changed, 126 insertions(+), 273 deletions(-) diff --git a/src/pages/exchangepage/edittemplate/detailsPage.js b/src/pages/exchangepage/edittemplate/detailsPage.js index 7ed60b38..de9e9547 100644 --- a/src/pages/exchangepage/edittemplate/detailsPage.js +++ b/src/pages/exchangepage/edittemplate/detailsPage.js @@ -16,7 +16,7 @@ export default class edittemplate extends React.Component{ model:{ font_color: "", button_color: "", - describe: {type : 1, content: "

xxxxx

",bg_image:''}, + describe: {type : 1, content: " ",bg_image:''}, } } } diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index e61385a1..ee8cfd13 100644 --- a/src/pages/exchangepage/edittemplate/main.js +++ b/src/pages/exchangepage/edittemplate/main.js @@ -29,7 +29,7 @@ export default class edittemplate extends React.Component{ title:"落地页标题", top_image: "", middle_image: "", - describe: {type: 1,content :"",bg_image:''}, + describe: {type:"",content :"",bg_image:''}, bg_color:"", font_color:"", }, @@ -39,12 +39,12 @@ export default class edittemplate extends React.Component{ list: 1, font_color:"", button_color: "", - describe: {type : 1, content : "",bg_image:''}, + describe: {type : "", content : "",bg_image:''}, }, product_detail:{ font_color:'', button_color:'', - describe:{type: 1, content: "",bg_image:''}, + describe:{type: "", content: "",bg_image:''}, }, preview_visible:false, previewData:null, @@ -271,7 +271,7 @@ getLandingdata(val){ } // getlandftcolor(c){ - let landConfig=this.state.landConfigure; + let landConfig=this.state.model; landConfig.font_color=c; this.setState({model:landConfig}); } @@ -294,6 +294,7 @@ getLandingdata(val){ } //获取商品排列方式 getarrayType(c){ + console.log(297,c); let goodsConfig=this.state.product_list; goodsConfig.list=c; this.setState({product_list:goodsConfig}); @@ -338,7 +339,7 @@ getLandingdata(val){ } onPreview(){ - this.setState({previewData:this.state.model}) + this.setState({previewData:this.state}) this.setState({preview_visible:true}) } //获取商品详情数据 @@ -689,7 +690,7 @@ getLandingdata(val){ this.state.activeNavStatus!=2?null:this.state.activeshow&&this.state.product_list.describe.type==2&&this.state.product_list.describe.content?this.showactiveIcon(c)} goodsdata={this.state.product_list}/>:this.setState({activeshow:true})} goodsdata={this.state.product_list}/> } { - this.state.activeNavStatus!=3?null:this.state.detailactiveshow&&this.state.product_detail.activeType==2&&this.state.product_detail.editorHtml?this.showactivedetail(c)} goodsdata={this.state.product_detail}/>:this.setState({detailactiveshow:true})} detaildata={this.state.product_detail}/> + this.state.activeNavStatus!=3?null:this.state.detailactiveshow&&this.state.product_detail.describe.type==2&&this.state.product_detail.describe.content?this.showactivedetail(c)} goodsdata={this.state.product_detail}/>:this.setState({detailactiveshow:true})} detaildata={this.state.product_detail}/> } diff --git a/src/pages/exchangepage/template/preview.js b/src/pages/exchangepage/template/preview.js index f8c16e6b..29c08bc2 100644 --- a/src/pages/exchangepage/template/preview.js +++ b/src/pages/exchangepage/template/preview.js @@ -1,14 +1,10 @@ import ReactDOM from 'react-dom'; import React, { Component } from 'react'; -import { HashRouter as Router, Route, Link } from "react-router-dom"; import { Button } from 'zent'; - import {RadioGroup,RadioButton,Input,openDialog ,Notify,Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu,Sweetalert } from 'zent'; import "../../../assets/comm.css" import _ from "lodash"; import "./preview.less" - - export default class acclist extends React.Component{ constructor(props){ super(props) @@ -16,98 +12,25 @@ export default class acclist extends React.Component{ step:1, layout:"list", type:1, - top_url:"" + top_url:"", + top_image:'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/59ba305520d3229e7fc53d5229bfec0c.png', + middle_image:'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png', } - } componentDidMount(e){ - - setTimeout(()=>{ - let img = document.getElementById("preview-center-img") - let center = document.getElementById("preview-center") - - - - center.style.height = (img.clientHeight -2) + "px"; - - - },500) - - } exchangeBtn(){ } - popPage(){ + - if(this.state.step == 2) - { - - - setTimeout(()=>{ - let img = document.getElementById("preview-center-img") - - let center = document.getElementById("preview-center") - img.onload=function(){ - - center.style.height = (img.clientHeight -2) + "px"; - - } - },500) - } - if(this.state.step > 1) - { - let step = this.state.step - 1; - this.setState({step : step }) - } - - } - pushPage(){ - if(this.state.step < 2) - { - let step = this.state.step + 1; - this.setState({step : step }) - } - } onListChange(e){ - - this.setState({type:e.target.value }) - if(e.target.value == 1) - { - - this.setState({layout:"list"}) - } - if(e.target.value == 2) - { - this.setState({layout:"rotation"}) - - } - if(e.target.value ==3) - { - this.setState({layout:"matrix"}) - } + this.setState({step:e.target.value }) } render(){ const productData = [ - { - "id": 641, - "batch_id": "285464532271284225", - "name": "腾讯视频VIP", - "price": "12.00", - "face_value": "12.00", - "item_id": 101, - "item_name": "优酷周卡", - "exchange_account_type": 1, - "goods_category_id": null, - "goods_category_name": null, - "img_url": "https://lsxdemall.oss-cn-beijing.aliyuncs.com/productLogo/youku.png", - "create_time": null, - "update_time": "2021-10-22 10:22:38", - "position": 0, - "status": 1, - "send_method": null - },{ +{ "id": 641, "batch_id": "285464532271284225", "name": "腾讯视频VIP", @@ -197,201 +120,122 @@ export default class acclist extends React.Component{ "status": 1, "send_method": null }, - { - "id": 643, - "batch_id": "285464532271284225", - "name": "优酷视频VIP", - "price": "14.00", - "face_value": "14.00", - "item_id": 104, - "item_name": "优酷年卡", - "exchange_account_type": 4, - "goods_category_id": null, - "goods_category_name": null, - "img_url": "https://lsxdemall.oss-cn-beijing.aliyuncs.com/productLogo/youku.png", - "create_time": null, - "update_time": "2021-10-22 14:10:14", - "position": 0, - "status": 1, - "send_method": null - }, - { - "id": 645, - "batch_id": "285464532271284225", - "name": "爱奇艺VIP", - "price": "16.00", - "face_value": "16.00", - "item_id": 128, - "item_name": "QQ音乐绿钻月卡", - "exchange_account_type": 4, - "goods_category_id": null, - "goods_category_name": null, - "img_url": "https://lsxdemall.oss-cn-beijing.aliyuncs.com/productLogo/qqmusic.png", - "create_time": null, - "update_time": "2021-10-22 14:10:18", - "position": 0, - "status": 1, - "send_method": null - }, - { - "id": 645, - "batch_id": "285464532271284225", - "name": "爱奇艺VIP", - "price": "16.00", - "face_value": "16.00", - "item_id": 128, - "item_name": "QQ音乐绿钻月卡", - "exchange_account_type": 4, - "goods_category_id": null, - "goods_category_name": null, - "img_url": "https://lsxdemall.oss-cn-beijing.aliyuncs.com/productLogo/qqmusic.png", - "create_time": null, - "update_time": "2021-10-22 14:10:18", - "position": 0, - "status": 1, - "send_method": null - } + ]; + + let propsData=this.props.data; + console.log('预览', propsData.product_list.list); return(
-
- { this.state.step==1 ? ( -
this.pushPage(e)}> +
- + { + propsData.model.top_image?: + }
- - + { + propsData.model.middle_image?: + }
- + { + propsData.model.describe.bg_image?:null + } + { + propsData.model.describe.content?
:null + }
) : null } - { - this.state.step==2 ? ( - - - this.state.layout == "rotation" ? - ( -
this.pushPage(e)}> -
- -
-
-
-
- -
-
-
-
- 立 即 兑 换 -
-
- -
- ): this.state.layout == "list" ? ( -
-
- -
-
-
-
    - { - productData.map((item, index) => { - if(index < 6) - { - return( -
  • -
    - - {item.name} -
    - 兑换 -
    • - ) - } - - }) - } - -
-
-
- - ) : ( - -
this.pushPage(e)}> -
- -
-
-
-
    - { - productData.map((item, index) => { - return( -
  • -
    - -
    -
    {item.name}
    -
    • - ) - }) - } -
-
- -
- - - - ) :null - - - - - - - - - - - ) : null - - } + { + this.state.step==2?propsData.product_list.list==1?
+
+ { + propsData.product_list.top_image? : + } +
+
+
+
+ +
+
+
+
+ 立 即 兑 换 +
+
+
:propsData.product_list.list==2?
+
+ +
+
+
+
    + { + productData.map((item, index) => { + if(index < 6) + { + return( +
  • +
    + + {item.name} +
    + 兑换 +
    • + ) + } + + }) + } +
+
+
:
+
+ +
+
+
+
    + { + productData.map((item, index) => { + return( +
  • +
    + +
    +
    {item.name}
    +
    • + ) + }) + } +
+
+ +
:null + } { this.state.step==3 ? ( -
- - - - - +
+ sdsdfsdf
) : null } - - - -
- {this.onListChange(e)} } value={this.state.type}> - 列表 - 轮播 - 矩阵 + {this.onListChange(e)} } value={this.state.step}> + 落地页 + 列表页 + 详情页
diff --git a/src/pages/exchangepage/template/preview.less b/src/pages/exchangepage/template/preview.less index d60e4a97..7177a67d 100644 --- a/src/pages/exchangepage/template/preview.less +++ b/src/pages/exchangepage/template/preview.less @@ -9,7 +9,7 @@ } #preview-bg{ z-index: 10; - max-height: 600px; + height: 600px; position: relative; overflow-y: auto; background: #fff; @@ -35,9 +35,20 @@ .bottom{ width: 100%; height: auto; - vertical-align: middle; + vertical-align: middle; + position: relative; + } + .textTip_land{ + position: absolute; + top: 0; + padding:60px 24px 24px; + line-height: 1.4rem; + font-size: 13px; + box-sizing: border-box; + } + #preview-center-img{ + width: 100%; } - .key{ position: absolute; top: 38px; @@ -156,9 +167,6 @@ background-color: #F4F6F9; position: relative; list-style: none; - - - .top{ position: absolute; top: -40px; @@ -172,8 +180,7 @@ text-align: center; } img{ - width: 100%; - height: 200px; + height:200px; position: absolute; top: 0px; } @@ -187,10 +194,11 @@ ul{ width: 96%; margin: 0 auto; - margin-top: 90px; + margin-top: 110px; + background: #F4F6F9; } li{ width: 100%; - height: 80px; + height: 60px; border-radius: 5px; padding: 0.14rem; box-sizing: border-box; @@ -248,7 +256,7 @@ } img{ position: absolute; - top: -50px; + height: 200px; } } @@ -256,10 +264,10 @@ .center{ width: 95%; - height: 75%; + height:46%; background: #FFFFFF; position: absolute; - top: 280px; + top: 320px; left: 50%; margin: -47.5%; border-radius: 5px;