rule

src/pages/project/detail/index.js

       // 没有找到 id , 再重新找一次
       if (!id) {
         getQrCodeParams(this.$router.params.scene).then(res => {
+          console.log(res,"扫码参数")
           this.setState({
             qrcodeParams: res
           })

src/pages/shop/rule/index.js

 import Taro, { Component } from '@tarojs/taro';
-import { getWindowHeight } from '@utils/style'
 import './index.scss'
-
+import { transferImage } from '@utils/tools'
 import ready from '@utils/ready'
 import { connect } from '@tarojs/redux'
 import * as actions from '@actions/shop'
-import dayjs from 'dayjs'
+import { View } from '@tarojs/components';
+import { queryUserInfo, doUserSignin } from '@services/user'
+const ruleBg = require('@assets/rulebg.png')
+
+@connect(state => ({ ...state.shop, ...state.user, ...state.city, }), { ...actions })
 
-@connect(state => ({ ...state.shop, ...state.user }), { ...actions })
 export default class Shop extends Component {
   config = {
     navigationBarTitleText: '积分规则'
   }
 
   state = {
-    pointRule: []
+    pointRule: [],
+    user: {},
   }
 
   componentWillMount() {
+    this.loadUserInfo()
     this.loadRecords()
+
   }
 
   loadRecords() {
       })
       Taro.hideLoading()
     })
+
+  }
+  loadUserInfo() {
+    queryUserInfo().then(user => {
+      this.setState({
+        user,
+      })
+    })
+  }
+  getBtnName(code) {
+    const { user: { havaSigned } } = this.state
+    switch (code) {
+      case 'checkin':
+        return havaSigned ? '已签到' : '签到'
+      case 'share-poster':
+        return '去分享'
+      case 'recommend-customer':
+        return '去推荐'
+      case 'signup-agent':
+        return '去授权'
+      case 'document_verify':
+        return '去提交'
+      default:
+        return '立即参与'
+    }
+  }
+  // 签到
+  doSign(pointsAmount) {
+    const { user: { id, havaSigned } } = this.state
+
+
+    if (havaSigned) {
+      return
+    }
+    doUserSignin({ id }).then(res => {
+      Taro.showToast({
+        title: `签到成功，获取${pointsAmount}积分`,
+        icon: 'none'
+      })
+      this.loadUserInfo()
+
+    })
+  }
+  handleItemClick(item) {
+    switch (item.code) {
+      case 'checkin':
+        this.doSign(item.pointsAmount)
+        return
+      case 'share-poster':
+        Taro.switchTab({
+          url: '/pages/project/index'
+        })
+        return
+      case 'recommend-customer':
+        Taro.navigateTo({
+          url: `/pages/agent/recommend/index?type=index&cityId=` + this.props.curCity.id
+        })
+        return
+      case 'signup-agent':
+        Taro.navigateTo({
+          url: '/pages/person/personDetail/index'
+        })
+        return
+      case 'document_verify':
+        Taro.navigateTo({
+          url: '/pages/person/profile/index'
+        })
+        return
+      default:
+        Taro.getApp().props.projectIndex = 2
+        Taro.switchTab({
+          url: `/pages/activity/activity`,
+          fail: res => {
+            Taro.getApp().props.projectIndex = 0
+          }
+        })
+        return
+    }
+
   }
 
   render() {
     const { pointRule } = this.state
 
     return (
-      <View className="page">
-        <View className='rule_title'>
-          <Text>积分项</Text>
-          <Text>奖励积分</Text>
-          <Text>说明</Text>
-        </View>
+      // <View className="page" style={`background: url(${transferImage(buildBg)}) no-repeat center;background-size: 100% 100%;`}>
+      <View className="page" >
+        <Image className="bg-img" src={transferImage(ruleBg)} mode='widthFix'></Image>
         <ScrollView
           scrollY
           scroll-with-animation
           enable-back-to-top
           className="list"
           style={{
-            height: '65vh'
+            maxHeight: '78vh'
           }}>
           {
             pointRule.length === 0 ? '' : (
               pointRule.map(item => (
                 <View className='rule_item' key={item.ruleId}>
-                  <Text>{item.ruleName}</Text>
-                  <Text>+{item.pointsAmount}</Text>
-                  <Text>{item.remark}</Text>
-                  {/* <Text>{dayjs(item.updateDate).format('YYYY-MM-DD HH:mm:ss')}</Text> */}
+                  <View className="item-name">{item.ruleName}<Text className="item-num">+{item.pointsAmount}</Text><Text className="jifen">积分</Text></View>
+                  <View className="item-rule">{item.remark}</View>
+                  <View className={this.getBtnName(item.code)=='已签到'?'yiqiandao':"item-btn"} onClick={this.handleItemClick.bind(this, item)}>{this.getBtnName(item.code)}</View>
                 </View>
               ))
             )

src/pages/shop/rule/index.scss

 @import "@styles/theme.scss";
 .page {
   position: relative;
-  background: #F2F2F2;
   width: 100%;
   height: 100%;
-  .rule_title {
-    position: fixed;
-    width: 100%;
-    left: 0%;
-    background: #fff;
-    color: #fd8000;
-    font-size: 28px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 30px 90px;
-    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
-    font-weight:500;
+  .bg-img{
+    width: 100vw;
+    display: block;
   }
+  // .rule_title {
+  //   position: fixed;
+  //   width: 100%;
+  //   left: 0%;
+  //   background: #fff;
+  //   color: #fd8000;
+  //   font-size: 28px;
+  //   display: flex;
+  //   justify-content: space-between;
+  //   align-items: center;
+  //   padding: 30px 90px;
+  //   box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
+  //   font-weight:500;
+  // }
   .list {
     position: absolute;
-    width: 100%;
-    top: 100px;
+    width: 690px;
+    left: 30px;
+    top: 560px;
+    background: #fff;
+    border-radius: 12px;
     .rule_item {
       position: relative;
       width: 100%;
-      text-align: center;
-      border-bottom: 2px solid rgba(151, 151, 151, 0.0865);
-      padding: 40px 12px;
-      display: inline-flex;
-      background: #fff;
-      Text {
-        width: 33.33%;
-        text-align: center;
-        float: left;
+      box-shadow:0px 1px 0px 0px rgba(0,0,0,0.08);
+      padding: 24px 20px 28px 20px;
+      .item-name{
+        font-size: 34px;
+        color: #333;
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        .item-num{
+          font-size: 36px;
+          color: #FF8203;
+          margin: 0 6px 0 10px;
+        }
+        .jifen{
+          font-size: 24px;
+          color: #666;
+        }
       }
-      Text:nth-of-type(1){
-        color:rgba(0,0,0,1);
-        font-size: 30px;
-        font-weight:500;
+      .item-rule{
+        font-size: 24px;
+        color: #999;
+        width: 500px;
       }
-      Text:nth-of-type(2){
-        color:rgba(255,59,51,1);
-        font-size: 32px;
-        font-weight: 500;
+      .yiqiandao{
+        width:120px;
+        height:60px;
+        background:#d8d8d8;
+        border-radius:30px;
+        position: absolute;
+        right: 20px;
+        top: 24px;
+        color: #fff;
+        font-size: 26px;
+        text-align: center;
+        line-height: 60px;
+
       }
-      Text:nth-of-type(3){
-        color:rgba(0,0,0,0.33);
-        font-size: 24px;
+      .item-btn{
+        width:120px;
+        height:60px;
+        background:linear-gradient(180deg,rgba(255,222,131,1) 0%,rgba(255,129,2,1) 100%);
+        box-shadow:0px 12px 30px -8px rgba(255,131,5,0.5);
+        border-radius:30px;
+        position: absolute;
+        right: 20px;
+        top: 24px;
+        color: #fff;
+        font-size: 26px;
+        text-align: center;
+        line-height: 60px;
       }
+      // display: inline-flex;
+      // Text {
+      //   width: 33.33%;
+      //   text-align: center;
+      //   float: left;
+      // }
+      // Text:nth-of-type(1){
+      //   color:rgba(0,0,0,1);
+      //   font-size: 30px;
+      //   font-weight:500;
+      // }
+      // Text:nth-of-type(2){
+      //   color:rgba(255,59,51,1);
+      //   font-size: 32px;
+      //   font-weight: 500;
+      // }
+      // Text:nth-of-type(3){
+      //   color:rgba(0,0,0,0.33);
+      //   font-size: 24px;
+      // }
     }
   }
 }