voucher Poster

2019-01-11 17:33:26 +08:00 · 2019-01-11 17:33:26 +08:00 · f4936692f0
commit f4936692f0
parent e449c07ffc
9 changed files with 475 additions and 81 deletions
--- a/src/assets/img/m_yhq.png
+++ b/src/assets/img/m_yhq.png
--- a/src/component/filteredShopComponent/filteredShopComponent.js
+++ b/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,7 +21,7 @@ class recommondShop extends Component {
    constructor() {
        super(...arguments);
        this.state = {
-            isOpenVouhcer: false,
+            isOpenVoucher: false,
            isOpenConsult: false,
            consultTip: '',
            voucherResponseMsg: '',
@ -126,14 +127,14 @@ class recommondShop extends Component {

    // 优惠卷弹框。取消。确认
    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.setState({ isOpenVoucher: false })
        this.buyConsult({ user: this.state.voucherName, phone: this.state.voucherPhone })
    }
    // 咨询弹框。取消。确认
@ -160,6 +161,10 @@ class recommondShop extends Component {
    handleInputCsultPhone(value) {
        this.setState({ consultPhone: value })
    }
+    getDataFromChild(value) {
+        console.log('从voucherposter件传回来的值', value)
+        this.setState({ isOpenVoucher: value })
+    }


    componentWillReceiveProps(nextProps) {
@ -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>
@ -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>
--- a/src/component/filteredShopComponent/filteredShopComponent.scss
+++ b/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;
--- a/src/component/filteredShopComponent/voucherPosterComponent/voucherPosterComponent.js
+++ b/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
--- a/src/component/filteredShopComponent/voucherPosterComponent/voucherPosterComponent.scss
+++ b/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;}
+  
+ 
+//   }
+  
+ 
--- a/src/pages/goods/goods.js
+++ b/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'>
--- a/src/pages/home/home.js
+++ b/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>

--- a/src/pages/home/home.scss
+++ b/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;
--- a/src/pages/myGoodList/myGoodList.scss
+++ b/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;