voucher Poster

src/component/filteredShopComponent/filteredShopComponent.js

@@ -2,6 +2,7 @@ import Taro, { Component } from '@tarojs/taro'
 import { View, Button, Text, Image } from '@tarojs/components'
 import { AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtInput, AtNoticebar } from 'taro-ui'
 
+import VoucherPosterComponent from './voucherPosterComponent/voucherPosterComponent'
 
 import './filteredShopComponent.scss'
 import URL from '../../serviceAPI.config'
@@ -20,15 +21,15 @@ class recommondShop extends Component {
     constructor() {
         super(...arguments);
         this.state = {
-            isOpenVouhcer: false,
+            isOpenVoucher: false,
             isOpenConsult: false,
             consultTip: '',
             voucherResponseMsg: '',
             voucherCanConsult: false,
-            voucherName:this.props.userName,
-            voucherPhone:this.props.userPhone,
-            consultName:this.props.userName,
-            consultPhone:this.props.userPhone,
+            voucherName: this.props.userName,
+            voucherPhone: this.props.userPhone,
+            consultName: this.props.userName,
+            consultPhone: this.props.userPhone,
         }
     }
     goToShop(value) {
@@ -114,27 +115,27 @@ class recommondShop extends Component {
             .then(res => {
                 console.log('购买咨询请求成功', res)
                 if (res.statusCode === 200) {
-                   Taro.showToast({ title: '咨询成功',icon:'success' })
+                    Taro.showToast({ title: '咨询成功', icon: 'success' })
                 } else {
-                    Taro.showToast({ title: res.data.err_msg,icon:'none' })
+                    Taro.showToast({ title: res.data.err_msg, icon: 'none' })
 
                 }
-            }).catch(err=>{
+            }).catch(err => {
                 console.log('购买咨询请求失败', err)
             })
     }
 
     // 优惠卷弹框。取消。确认
     isOpenVoucher() {
-        this.setState({ isOpenVouhcer: true })
+        this.setState({ isOpenVoucher: true })
         this.getVoucherInfo({})
     }
     voucherModalClose() {
-        this.setState({ isOpenVouhcer: false })
+        this.setState({ isOpenVoucher: false })
     }
     voucherModalConfirm() {
-        this.setState({ isOpenVouhcer: false })
-        this.buyConsult({user:this.state.voucherName,phone:this.state.voucherPhone})
+        this.setState({ isOpenVoucher: false })
+        this.buyConsult({ user: this.state.voucherName, phone: this.state.voucherPhone })
     }
     // 咨询弹框。取消。确认
     isOpenConsult() {
@@ -146,19 +147,23 @@ class recommondShop extends Component {
     }
     consultModalConfirm() {
         this.setState({ isOpenConsult: false })
-        this.buyConsult({user:this.state.consultName,phone:this.state.consultPhone})
+        this.buyConsult({ user: this.state.consultName, phone: this.state.consultPhone })
     }
-    handleInputVcherPhone(value){
-         this.setState({voucherPhone:value})
+    handleInputVcherPhone(value) {
+        this.setState({ voucherPhone: value })
     }
-    handleInputVcherName(value){
-        this.setState({voucherName:value})
+    handleInputVcherName(value) {
+        this.setState({ voucherName: value })
     }
-    handleInputCsultName(value){
-        this.setState({consultName:value})
+    handleInputCsultName(value) {
+        this.setState({ consultName: value })
     }
-    handleInputCsultPhone(value){
-        this.setState({consultPhone:value})
+    handleInputCsultPhone(value) {
+        this.setState({ consultPhone: value })
+    }
+    getDataFromChild(value) {
+        console.log('从voucherposter件传回来的值', value)
+        this.setState({ isOpenVoucher: value })
     }
 
 
@@ -194,34 +199,37 @@ class recommondShop extends Component {
             </View>
         }) : null
         //  优惠卷和咨询元素
-        const voucherModalElement = <AtModal className='voucher-modal' isOpened={this.state.isOpenVouhcer}>
-            <AtModalHeader>优惠卷须知：</AtModalHeader>
-            <AtModalContent>
-                <AtNoticebar >
-                    <Text className='orange' > 提示：具体可以前往实体店进行领取优惠卷或通过电话进行咨询</Text>
-                </AtNoticebar>
-                <View className='voucher-left'>当前优惠卷{voucherLeft}张</View>
-                <AtInput
-                  name='value'
-                  title='联系人：'
-                  type='text'
-                  value={this.state.voucherName}
-                  onChange={this.handleInputVcherName.bind(this)}
-                />
-                <AtInput
-                  border={false}
-                  name='value'
-                  title='联系电话：'
-                  type='number'
-                  value={this.state.voucherPhone}
-                  onChange={this.handleInputVcherPhone.bind(this)}
+        // const voucherModalElement = <AtModal className='voucher-modal' isOpened={this.state.isOpenVoucher}>
+        //     <AtModalHeader>优惠卷须知：</AtModalHeader>
+        //     <AtModalContent>
+        //         <AtNoticebar >
+        //             <Text className='orange' > 提示：具体可以前往实体店进行领取优惠卷或通过电话进行咨询</Text>
+        //         </AtNoticebar>
+        //         <View className='voucher-left'>当前优惠卷{voucherLeft}张</View>
+        //         <AtInput
+        //             name='value'
+        //             title='联系人：'
+        //             type='text'
+        //             value={this.state.voucherName}
+        //             onChange={this.handleInputVcherName.bind(this)}
+        //         />
+        //         <AtInput
+        //             border={false}
+        //             name='value'
+        //             title='联系电话：'
+        //             type='number'
+        //             value={this.state.voucherPhone}
+        //             onChange={this.handleInputVcherPhone.bind(this)}
+
+        //         />
+        //         {!this.state.voucherCanConsult ? <View className='voucher-ResponseMsg'>{this.state.voucherResponseMsg}</View> : null}
+
+        //     </AtModalContent>
+        //     <AtModalAction> <Button onClick={this.voucherModalClose.bind(this)} >取消</Button> <Button className='orange' onClick={this.voucherModalConfirm.bind(this)}>确定</Button> </AtModalAction>
+        // </AtModal>
+
 
-                />
-                {!this.state.voucherCanConsult ? <View className='voucher-ResponseMsg'>{this.state.voucherResponseMsg}</View> : null}
 
-            </AtModalContent>
-            <AtModalAction> <Button onClick={this.voucherModalClose.bind(this)} >取消</Button> <Button className='orange' onClick={this.voucherModalConfirm.bind(this)}>确定</Button> </AtModalAction>
-        </AtModal>
         const consultModalElement = <AtModal isOpened={this.state.isOpenConsult}>
             <AtModalHeader>咨询</AtModalHeader>
             <AtModalContent>
@@ -232,19 +240,19 @@ class recommondShop extends Component {
 
 
                 <AtInput
-                  name='value'
-                  title='联系人：'
-                  type='text'
-                  value={this.state.consultName}
-                  onChange={this.handleInputCsultName.bind(this)}
+                    name='value'
+                    title='联系人：'
+                    type='text'
+                    value={this.state.consultName}
+                    onChange={this.handleInputCsultName.bind(this)}
                 />
                 <AtInput
-                  name='value'
-                  title='联系电话：'
-                  type='number'
-                  value={this.state.consultPhone}
-                  border={false}
-                  onChange={this.handleInputCsultPhone.bind(this)}
+                    name='value'
+                    title='联系电话：'
+                    type='number'
+                    value={this.state.consultPhone}
+                    border={false}
+                    onChange={this.handleInputCsultPhone.bind(this)}
                 />
             </AtModalContent>
             <AtModalAction> <Button onClick={this.consultModalClose.bind(this)} >取消</Button> <Button className='orange' onClick={this.consultModalConfirm.bind(this)}>确定</Button> </AtModalAction>
@@ -255,17 +263,34 @@ class recommondShop extends Component {
             <View className='shop-list-box' >
                 {voucherModalElement}
                 {consultModalElement}
-            
+                <VoucherPosterComponent isVoucherPoster={this.state.isOpenVoucher}
+                    onPassDataToChild={this.getDataFromChild.bind(this)}
+                    voucherLeft={this.props.shop.left_nums}
+                    voucherResponseMsg={this.state.voucherResponseMsg}
+                ></VoucherPosterComponent>
                 <View className='header'>
+
                     <View className='title'>
                         <Image src={ads !== 0 ? hornIcon : houseIcon} style='width:12px; height:12px; vertical-align: middle;' />
                         <Text style='margin-left:2px; vertical-align: middle;'>  {title}</Text>
                     </View>
-                    <View className='consult-voucher-button' style='margin-right:5px'>
-                        {voucherLeft ? <Button onClick={this.isOpenVoucher.bind(this)} size='mini'  className='button-orange voucher-button-text voucher' >优惠卷</Button> : <Button size='mini' className='button-orange voucher-button-text'>优惠卷</Button>}
+
+                    <View className='button-container' style='margin-right:5px'>
+                        {voucherLeft ? <View className='button' onClick={this.isOpenVoucher.bind(this)} >
+                            <Button size='mini' className='button-blue'>
+                                优惠卷</Button>
+                        </View> : <View className='button'  >
+                                <Button disabled={true} size='mini' className='button-blue'>优惠卷</Button>
+                            </View>}
+                        <View className='button' onClick={this.isOpenConsult.bind(this)} >
+                            <Button size='mini' className='button-blue'>
+                                询价</Button>
+                        </View>
 
 
-                        <Button onClick={this.isOpenConsult.bind(this)} size='mini' className='button-orange consult-button-text'>询价</Button>
+                        {/* {voucherLeft ? <Button onClick={this.isOpenVoucher.bind(this)} size='mini' className='button-orange' >优惠卷</Button> : <Button disabled={true} size='mini' className='button-orange'>优惠卷</Button>}
+
+                        <Button onClick={this.isOpenConsult.bind(this)} size='mini' className='button-orange'>询价</Button> */}
 
                     </View>
                 </View>

src/component/filteredShopComponent/filteredShopComponent.scss

@@ -1,3 +1,5 @@
+$linearBlue:linear-gradient(to right, #337ab7, #337ab7);
+
 .shop-list-box{
        border: 4rpx solid #ddd;
     border-radius: 3px;
@@ -26,20 +28,40 @@
     .header{
         border-bottom:4rpx solid #F2F2F2;
         display: flex;
+        .button-container{
+            flex:1;
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: row;
+          //  padding:20px 0;
+          margin-top:2%;
+            .button{
+                flex:1;
+               // margin-left:2%;
+                text-align: center;
+                margin-left:8%;
+            }
+            .button-blue{
+                color:white;
+                font-size: 22px;
+                background:$linearBlue;
+            }
+        }
         .title{
-           
-            flex:2;
+            flex:1;
             color: #333;
             font-weight: bold;
             font-size: 30px;
             text-align: left;
             overflow:hidden;
             white-space:nowrap;
-            line-height:90rpx;
+           // line-height:80rpx;
             margin-left:3%;
+            margin-top:2%;
+            margin-bottom:2%;
+            padding:0;
         }
         .consult-voucher-button{
-           
             flex:1;
             //margin-top: 20px ;
             margin-left: 50px;

src/component/filteredShopComponent/voucherPosterComponent/voucherPosterComponent.js

@@ -0,0 +1,151 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View, Input, Image, Text, Button } from '@tarojs/components'
+import { AtIcon } from 'taro-ui'
+
+import './voucherPosterComponent.scss'
+import URL from '../../../serviceAPI.config'
+
+
+
+class VoucherPoster extends Component {
+  config = {
+    navigationBarTitleText: '优惠卷活动弹窗'
+  }
+
+  constructor() {
+    super(...arguments);
+    this.state = {
+      voucherName: '',
+      voucherPhone: '',
+     voucherPosterImage:'background-image:url('+URL.Base+'/Public/images/store/m_yhq.png);'
+    }
+  }
+  // api 购买咨询 BuyConsult
+  buyConsult({ user = "杨夕兵", phone = "18950295811", shops = ["1306"], source_type = "2", source_level = 1, coupons_flag = 0 }) {
+    Taro.request({
+      url: URL.BuyConsult,
+      method: 'POST',
+      dataType: 'json',
+      data: {
+        data: JSON.stringify({
+          user: user,
+          phone: phone,
+          shops: shops,
+          source_type: source_type,
+          source_level: source_level,
+          coupons_flag: coupons_flag,
+        })
+      },
+      header: {
+        'content-type': 'application/x-www-form-urlencoded',
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    })
+      .then(res => {
+        console.log('购买咨询请求成功', res)
+        if (res.statusCode === 200) {
+          Taro.showToast({ title: '咨询成功', icon: 'success' })
+        } else {
+          Taro.showToast({ title: res.data.err_msg, icon: 'none' })
+
+        }
+      }).catch(err => {
+        console.log('购买咨询请求失败', err)
+      })
+  }
+  // 确认键
+  voucherModalConfirm() {
+    this.buyConsult({ user: this.state.voucherName, phone: this.state.voucherPhone })
+  }
+  //名字输入
+  handleNameChange(value) {
+    this.setState({ voucherName: value })
+  }
+  //号码输入
+  handlePhoneChange(value) {
+    this.setState({ voucherPhone: value })
+  }
+  passDataToParent() {
+    this.props.onPassDataToChild(false)
+  }
+  componentDidMount() {
+    console.log('poster did mount')
+    this.setState({
+      voucherName: Taro.getStorageSync('user_identity').username,
+      voucherPhone: Taro.getStorageSync('user_identity').userphone,
+    })
+  }
+  componentWillReceiveProps(nextProps) {
+    console.log(this.props, nextProps)
+  }
+
+  componentWillUnmount() { }
+
+  componentDidShow() { }
+
+  componentDidHide() { }
+
+  render() {
+   
+    return (
+      <View className='voucherEventPopUpComponent'>
+      
+
+        {/* <!-- The Modal --> */}
+        <View className='modal myModal' style={this.props.isVoucherPoster ? 'display:block' : 'display:none'}>
+          <View className='modal-content'  >
+          
+
+
+            <View className=' absolute container'  style={this.state.voucherPosterImage}>
+              <View className='close-icon ' onClick={this.passDataToParent.bind(this)}>
+                <AtIcon value='close-circle' size='30' color='#3F536E'></AtIcon>
+              </View>
+            
+              <View className='voucher-left '>
+                当前优惠卷<Text class='left-amount'>{this.props.voucherLeft}</Text>张
+            </View>
+              <View className='input-name ' >
+
+                <View className='title'> <Text>联系人：</Text></View>
+                <Input class='input-info' type='text' value={this.state.voucherName} onChange={this.handleNameChange.bind(this)} />
+              </View>
+              <View className='input-number ' >
+
+                <View className='title'> <Text>联系电话：</Text></View>
+                <Input class='input-info' type='text' value={this.state.voucherPhone} onChange={this.handleNumberChange.bind(this)} />
+              </View>
+              <View className='tips'>
+                 {this.props.voucherResponseMsg}
+            </View>
+
+              <View className='button ' >
+                <Button size='default' className='button-orange' onClick={this.onClickUploadGoods.bind(this)}>预约领取</Button>
+              </View>
+              <View className='declare '>
+
+                <Text className='title'>领取须知:</Text>
+
+                <View>1、用户拥有晨丰爱家网平台帐号；</View>
+                <View>2、用户关注并绑定定制家居运营平台微信公众号；</View>
+                <View>3、用户预约成功后，需要在规定时间内到商家店内领取;</View>
+                <View>4、优惠券具体使用规矩，以领取到的优惠券上的规则为准；</View>
+                <View>5、购买商品时，可以直接使用优惠券进行现金抵扣；</View>
+                <View>6、优惠券兑换现金操作请到指定地点进行兑换申请；</View>
+                <View>7、具体兑换规则，到指定兑换点进行查看。</View>
+
+                <View className='address'>兑换点地址:</View>
+                <View className='address-a'>福州市鼓楼区铜盘路软件大道89号软件园D区34楼4层福州晨丰科技有限公司</View>
+
+              </View>
+            </View>
+
+          </View>
+        </View>
+
+      </View>
+    )
+  }
+}
+
+export default VoucherPoster

src/component/filteredShopComponent/voucherPosterComponent/voucherPosterComponent.scss

@@ -0,0 +1,186 @@
+/* The Modal (background) */
+$linearOrange:linear-gradient(to right, #FF7142, #FF7142);
+
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+     /* Modal Content */
+    .modal-content::-webkit-scrollbar {display:none}
+  .modal-content {
+   
+    position: relative;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s;
+    height:80%;
+    overflow-y: scroll;
+   .absolute{
+    position:absolute;
+   }
+   .container{
+       top:0px;
+       background-size:100% 100%;
+
+    .close-icon{
+        margin-left:88%;
+        margin-top:2%;
+
+    }
+    .voucher-left{
+        margin-top:55%;
+        width: 100%;
+        text-align: center;
+        color:white;
+        font-size: 28rpx;
+        .left-amount{
+            font-size: 50px;
+        }
+    }
+    .input-name{
+        margin-top:2%;
+        margin-left:10%;
+        
+         overflow: hidden;
+         width: 80%;
+        
+        border-radius:50rpx;
+        background-color: white;
+         display: flex;
+         height:80px;
+         font-size:25px;
+         .title{
+            flex:1;
+           margin-left:7%;
+           margin-top:4%
+        }
+        .input-info{
+            flex:2;
+            margin-top:1.5%
+        }
+
+    }
+    .input-number{
+        margin-top:2%;
+        margin-left:10%;
+        overflow: hidden;
+        width: 80%;
+       border-radius:50rpx;
+       background-color: white;
+        display: flex;
+        height:80px;
+        font-size:25px;
+       .title{
+           flex:1;
+          margin-left:7%;
+          margin-top:4%
+       }
+       .input-info{
+           flex:2;
+           margin-top:1.5%
+       }
+
+   }
+   .tips{
+  
+    margin-left: 10%;
+    margin-top: 2%;
+    color:white;
+    font-size: 25rpx;
+    
+
+   }
+    
+    .button{
+        margin-top:2%;
+        margin-left:10%;
+        overflow: hidden;
+        width: 80%;
+ 
+        border-radius: 50rpx;
+        .button-orange{
+                color:white;
+                font-size: 28px;
+                background:$linearOrange;
+                padding: 12rpx;
+               // margin:20px auto
+            
+        }
+    }
+    .declare{
+        margin-top:2%;
+        font-size:20rpx;
+        color:white;
+        padding:0 4%;
+        .address{
+            margin-top: 2%;
+            
+        }
+        .address-a{
+            
+            margin-bottom: 5%;
+        }
+
+    }
+
+   }
+  
+    
+  }}
+  
+  /* Add Animation */
+  @-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0} 
+    to {top:0; opacity:1}
+  }
+  
+  @keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+  }
+  .close-button{
+      background-color: blue
+  }
+
+  /* The Close Button */
+//   .close {
+//     color: white;
+//     float: right;
+//     font-size: 28px;
+//     font-weight: bold;
+//   }
+  
+//   .close:hover,
+//   .close:focus {
+//     color: #000;
+//     text-decoration: none;
+//     cursor: pointer;
+//   }
+  
+//   .modal-header {
+//     padding: 2px 16px;
+//     background-color: #5cb85c;
+//     color: white;
+//   }
+  
+//   .modal-body {padding: 2px 16px;}
+  
+ 
+//   }
+  
+ 

src/pages/goods/goods.js

@@ -2,11 +2,9 @@ import Taro, { Component } from '@tarojs/taro'
 import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'
 
 import { AtTabs, AtTabsPane, AtSegmentedControl, AtIcon, Picker } from 'taro-ui'
-import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'
+import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
 
 import URL from '../../serviceAPI.config'
-
-
 import './goods.scss'
 class Goods extends Component {
 
@@ -290,7 +288,7 @@ class Goods extends Component {
 
                 </View>
 
-                <copyrightComponent></copyrightComponent>
+                <CopyrightComponent></CopyrightComponent>
 
                 <View className='shop-bottom-box' >
                     <View className='shop-bottom-nav'>

src/pages/home/home.js

@@ -150,6 +150,7 @@ class Home extends Component {
         if (res.data.err_msg === 'success') {
           
           this.setState({ shopsDetails: res.data.shops })
+          Taro.hideLoading()
 
         } else {
           Taro.showToast({
@@ -271,6 +272,9 @@ class Home extends Component {
     const parentClass = item.parent_class_id
     const childClass = item.class_id
     this.setState({ subCate: item.children })
+    Taro.showLoading({
+      title:'加载中'
+    })
     this.getShopsInfo({ parent_supply_class: parentClass, supply_class: childClass })
     
   }
@@ -279,11 +283,14 @@ class Home extends Component {
     const parentClass = item.parent_class_id
     const childClass = item.class_id
     // this.getShops(item.parent_class_id, item.class_id, 2)
+    Taro.showLoading({
+      title:'加载中'
+    })
     this.getShopsInfo({ parent_supply_class: parentClass, supply_class: childClass, supply_level: 2 })
   }
   scrollToSubCate(item) {
     Taro.pageScrollTo({
-      scrollTop: 400,
+      scrollTop: 410,
       duration: 300
     })
     this.onClickParentCate(item)
@@ -327,6 +334,13 @@ class Home extends Component {
       url: '/pages/grabOrderPage/grabOrderPage?orderId=' + orderId
     })
   }
+  goToMyNeedsPublish(){
+    Taro.navigateTo({
+
+      url: '/pages/myNeedsPublish/myNeedsPublish'
+    })
+
+  }
   componentDidMount() {
     // 页面加载后 得到首页的基本信息和推荐店铺的信息
     Taro.showLoading({ title: '加载中' })
@@ -487,13 +501,11 @@ class Home extends Component {
             indicatorDots
             autoplay
           >
-            <SwiperItem>
-              <Image className='banner-img' src={URL.Base + 'Public/images/xgt.png'} />
-            </SwiperItem>
-            <SwiperItem>
+            <SwiperItem onClick={this.goToMyNeedsPublish.bind(this)}>
               <Image className='banner-img' src={URL.Base + 'Public/images/xgt.png'} />
             </SwiperItem>
  
+
           </Swiper>
         </View>
 

src/pages/home/home.scss

@@ -54,6 +54,7 @@ $themeColor: #FF7142;
         padding:0 20px;
         .demanding-item{
             border: 3rpx solid #ddd;
+            border-right:0px;
             text-align: center;
             .item-tag{
                 color:white;

src/pages/myGoodList/myGoodList.scss

@@ -38,7 +38,6 @@ $themeColor:#FF7142;
         }
         .sub-filter{
             border-top: 1px solid #ddd;
-           
             display: flex;
             flex-wrap: wrap;
             flex-direction: row;