jufubao-base 1.0.56 → 1.0.61-beta1002

package/src/components/JfbBaseCardDetailEntry/JfbBaseCardDetailEntry.vue

@@ -0,0 +1,920 @@
+<template>
+  <view
+    class="jfb-base-card-detail-entry"
+    @click="handleEditxSelect"
+    :class="{ editx: isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-card-detail-entry__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-card-detail-entry__edit-icon" @click="delEdit"
+        >删除</view
+      >
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-card-detail-entry__body" v-if="info!==null">
+      <view class="card-list" :style="{
+            background: headerBg['color'],
+            backgroundSize: '100%'
+          }">
+                <view class="card-list-warp" :style="{backgroundImage: `url(${headerBg['image']})`}">
+            <view class="card-list__title"><view>{{info['card_type_name']}}</view></view>
+            <div class="card-list__content">
+              <view>
+                <text>券号：</text>
+                <text>{{info.card_number}}</text>
+              </view>
+            </div>
+            <view class="card-list__date">
+              <text>有效期：</text>
+              <text>{{info.end_time}}</text>
+            </view>
+            <view class="card-list__yue">
+              <text>余额：</text>
+              <text>{{info.card_point}} {{ info.unit }}</text>
+            </view>
+            <view class="card-list__other" v-if="info.other_card_point && info.card_point_type === 2">
+              <view><text>购买其他物品可抵：</text><text>{{info.other_card_point}} {{ info.unit }}</text></view>
+            </view>
+          </view>
+        </view>
+      <view class="jfb-base-card-detail-entry__body-qrcode">
+        <view>
+          <view>
+            <image mode="aspectFit" :src="info.barcode"></image>
+          </view>
+        </view>
+        <view style="position: relative">
+          <image
+            :style="{width: '300rpx', height: '300rpx'}"
+            :src="info.card_qrcode"
+          ></image>
+          <image v-if="isBrandLogo" class="logo-icon" :src="brandLogo"></image>
+        </view>
+        <view :style="{marginTop: '20rpx'}" v-if="timeStr">消费二维码，有效期为{{ info["card_qrcode_expire"] / 60 }}分钟</view>
+        <view v-if="timeStr">距离刷新还有{{ timeStr }}</view>
+      </view>
+      <view
+      v-if="info.site_entry_settings&&info.site_entry_settings.length>0"
+      class="jfb-base-card-detail-entry__body-business"
+      >
+       <view
+       class="jfb-base-card-detail-entry__body-business-title"
+       >
+      进入业务板块
+      </view>
+      <view style="display:flex;align-content:center;justify-content:center">
+        <view class="jfb-base-card-detail-entry__body-business-content">
+        <view
+        class="jfb-base-card-detail-entry__body-business-content-item"
+        @click="handleBindLogin(item)"
+        v-for="(item,index) in info.site_entry_settings"
+        :key="index">
+          <view><image :src="item.image_url"></image></view>
+          <view>{{item.entry_name}}</view>
+        </view>
+      </view>
+      </view>
+    </view>
+    <view :style="{height: '100rpx'}"></view>
+        <!-- 靠底支付 -->
+        <view class="fixe_bottom" :style="prod_bottom">
+          <!-- <xd-button
+          size="small"
+          type="primary">
+          消费记录
+        </xd-button> -->
+          <xd-button
+          v-if="info.is_exchange==='Y'"
+          @click="handleToShift"
+          size="small"
+          type="primary">
+          券转换
+        </xd-button>
+          <xd-button
+          v-if="isShowUnbind"
+          @click="handleUnBindCard"
+          size="small"
+          type="primary">
+          解除绑定
+        </xd-button>
+        </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseCardDetailEntryMixin from "./JfbBaseCardDetailEntryMixin";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import colorCardMixins from "@/mixins/colorCardMixins";
+import getServiceUrl from "@/common/getServiceUrl";
+import { mapState } from "vuex";
+import { Base64 } from "js-base64";
+import XdPwPay from "./XdPwPay";
+import XdEditPwd from "./XdEditPwd";
+import XdUnit from "@/components/XdUnit/XdUnit";
+import XdButton from '@/components/XdButton/XdButton'
+export default {
+  name: "JfbBaseCardDetailEntry",
+  components: {
+    XdFontIcon,
+    XdPwPay,
+    XdEditPwd,
+    XdUnit,
+    XdButton
+  },
+  mixins: [
+    componentsMixins,extsMixins,JfbBaseCardDetailEntryMixin,colorCardMixins,
+  ],
+  data() {
+    return {
+      userInfo: null, //用户信息（暂时不可用）
+
+      info: null,
+      timeStr: "",
+      timeer: null,
+      date: 2, //时间底数
+      time: 2, //时间幂指数
+      refrushTimeer: null,
+      maxTime: 30, //最大执行时间幂指数
+      editShow: false,
+      pwdTitle: "",
+      editPhone: "",
+      editTitle: "",
+      show: false,
+      textList: [],
+      password: "",
+      card_number: "",
+      stopTimer: false, //停止轮询
+      download: "",
+      qrcode: "",
+      backUrl: "",
+      shift_url: "",
+
+      //品牌logo
+      brandLogo:
+        "data:image/png;base64,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",
+      isBrandLogo: false,
+
+      isShowUnbind: false, //是否启动绑定按钮
+      headerBg: {},
+    };
+  },
+  watch: {
+    container(value) {
+      this.init(value);
+    },
+  },
+  computed: {
+    ...mapState(["brandInfo"]),
+    jfbAuthorize: (state) => state.jfbAuthorize,
+    prod_bottom() {
+        return this.fixedStyle({height: 0, zIndex: 111});
+      },
+  },
+  created() {},
+  methods: {
+    onJfbLoad(options) {
+      console.log(options,'optionsoptionsoptionsoptions');
+      if (options["x-params"]) {
+        try {
+          let params = JSON.parse(Base64.decode(options["x-params"]));
+          this.brandLogo = params["qrcode_logo"];
+        } catch (e) {
+          console.warn(options["x-params"]);
+        }
+      }
+
+      this.$nextTick(() => {
+        this.card_number = options.card_number;
+        this.init();
+
+        // if (card_number) {
+        //   this.card_number = card_number;
+        //   if (this.brandInfo['is_enable_pay_password'] === 'N') {
+        //     this.init();
+        //   } else if (this.brandInfo['is_enable_pay_password'] === 'Y' && this.userInfo['has_user_set_password'] === 'N') {
+        //     this.editShow = true
+        //     this.pwdTitle = '您还未设置支付密码，请设置您的平台支付密码'
+        //   } else if (this.brandInfo['is_enable_pay_password'] === 'Y' && this.userInfo['has_user_set_password'] === 'Y') {
+        //     this.show = true
+        //     this.textList = [
+        //       {
+        //         label: '查看卡详情',
+        //       },
+        //       {
+        //         label: '请输入支付密码',
+        //       }
+        //     ]
+        //   }
+        //   this.first = true;
+        // } else {
+        //   setTimeout(() => {
+        //     this.$xdUniHelper.navigateTo({
+        //       url: `/pages/index/index`
+        //     }, false)
+        //   }, 2000)
+        // }
+      });
+    },
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init() {
+      this.detail();
+      this.refrush();
+      if(this.$configProject.isPreview) {
+        this.timeStr = "01分19秒"
+      }
+      this.backUrl = getContainerPropsValue( this.container,  "content.back_url", { value: "" }).value;
+      this.shift_url = getContainerPropsValue( this.container,  "content.shift_url", { value: "" }).value;
+    },
+    /**
+     * @description 获取卡详情
+     */
+    detail() {
+      jfbRootExec("getBaseByIdCardDetailEntry", {
+        vm: this,
+        data: {
+          card_number: this.card_number,
+          is_show_entry_settings: "Y",
+        },
+      })
+        .then((res) => {
+          if (res && res.card_point) {
+            res["card_point"] = this.$xdUniHelper.divisionFloatNumber(
+              res.card_point,
+              100
+            );
+          }
+          if (res && res.card_point) {
+            res["other_card_point"] = this.$xdUniHelper.divisionFloatNumber(
+              res.other_card_point,
+              100
+            );
+          }
+          if(res && res.site_entry_settings && res.site_entry_settings.length>0) {
+            res.site_entry_settings = res.site_entry_settings.map(item=>{
+              item['image_url'] = getServiceUrl(item['image_url'])
+              return item
+            })
+          }
+          this.info = res;
+          if(!this.$configProject.isPreview) {
+            this.setInval(this.info.card_qrcode_expire);
+          }
+          this.show = false;
+          console.log(this.getCardThemes(res.card_type_name),'this.getCardThemes(res.card_type_name)');
+          this.headerBg = this.getCardThemes(res.card_type_name);
+
+          //显示按钮
+          if (res["is_show_qrcode_logo"] === "Y") {
+            this.isBrandLogo = true;
+          }
+
+          this.isShowUnbind =
+            res["is_can_unbind"] === "Y" || res["is_can_unbind"] === undefined;
+        })
+        .catch((err) => {
+          // this.$refs["pwPay"].clearPwd();
+        });
+    },
+    refrush() {
+      if (this.stopTimer) return;
+      if (this.time >= this.maxTime) {
+        clearTimeout(this.refrushTimeer);
+        console.log("refrushTimeer.end");
+        return;
+      }
+      this.time++;
+      let time =
+        this.time >= 5 ? 32 * 1000 : Math.pow(this.date, this.time) * 1000;
+      this.refrushTimeer = setTimeout(() => {
+        jfbRootExec("getCardYueEntry", {
+          vm: this,
+          data: {
+            card_number: this.card_number,
+          },
+        })
+          .then((res) => {
+            //res[4]['value'] = this.$xdUniHelper.random(20,30);
+            let refrushInfo = this.$xdUniHelper.cloneDeep(this.info);
+            if (res && res !== null && Object.keys(res).length > 0) {
+              if (res.card_point) {
+                refrushInfo.card_point = this.$xdUniHelper.divisionFloatNumber(
+                  res.card_point,
+                  100
+                );
+              }
+              if (res.other_card_point) {
+                refrushInfo.other_card_point =
+                  this.$xdUniHelper.divisionFloatNumber(
+                    res.other_card_point,
+                    100
+                  );
+              }
+            }
+
+            this.info = refrushInfo;
+            this.refrush();
+            this.show = false;
+          })
+          .catch();
+      }, time);
+    },
+     /**
+     * @description 已绑定卡登录
+     * @param item
+     */
+     handleBindLogin(entry) {
+      //卡券登陆
+      this.$xdShowLoading({});
+      jfbRootExec("detailLoginEntryCardBind", {
+          vm: this,
+          data: { card_number: this.info["card_number"] },
+        })
+          .then((res) => {
+            this.$xdHideLoading();
+            //#ifdef MP-WEIXIN
+            if (this.jfbAuthorize !== null) {
+              this.jfbAuthorize.setToken("card", res["card_token"], {
+                expires: res["card_expire_in"] / 60 / 60,
+              });
+              this.handleToApp(entry);
+            }
+            //#endif
+            if (this.$configProject.isPreview) {
+              console.log("handleBindLogin", "预览模式不跳转", this.inCallback);
+            }
+            
+            else {
+              this.handleToApp(entry);
+            }
+          })
+          .catch((res) => {
+            this.$xdHideLoading();
+          });
+    },
+    toApp(url){
+      this.$xdUniHelper.redirectTo({
+        url
+      })
+    },
+    handleToApp(entry){
+      let item, redirectUrl;
+      try{
+        item = JSON.parse(entry['redirect_data']);
+      }catch (e) {
+        return;
+      }
+      const {dir, path, host} = item;
+      let nsp = Base64.encodeURI(JSON.stringify({business_code: entry['business_code']}));
+      
+      //外站配置地址
+      if (entry.redirect_type === 'URL') {
+        if (item['path'].indexOf('?') === -1) {
+          redirectUrl = `${item['path']}?x-common=${nsp}&vs=${new Date().getTime()}`
+        } else redirectUrl = `${item['path']}&x-common=${nsp}&vs=${new Date().getTime()}`;
+        this.toApp(redirectUrl);
+        return;
+      }
+      
+      //站内转换
+      let jumpUrl = item.path;
+      //#ifdef H5
+      jumpUrl = `//${host}/${dir}${path}`;
+      //#endif
+  
+      if (item['fixed_business_code'] === '') {
+        redirectUrl = `${jumpUrl}?x-common=${nsp}&vs=${new Date().getTime()}`
+      }
+      else {
+        redirectUrl = `${jumpUrl}?x-common=${nsp}&vs=${new Date().getTime()}`
+      }
+      this.toApp(redirectUrl);
+    },
+    handleOnClose() {
+      this.editShow = false;
+    },
+    handlePwdOnSubmit(val) {
+      this.password = val;
+      this.init();
+    },
+
+    handleOnForget() {
+      this.editShow = true;
+      this.editTitle = "请验证您的手机并修改支付密码";
+    },
+
+    handlePwdClose() {
+      this.$helper.navigateBack();
+    },
+    handleUnBindCard() {
+      this.$xdConfirm({
+        $vm: this,
+        content: "您确定要解除绑定票券吗",
+        title: "系统提示",
+        width: "80%",
+        isTitle: true,
+        zIndex: 2000,
+        vm: this,
+        success: (res) => {
+          if (res.confirm) {
+            this.timeStr = ""
+            clearTimeout(this.timeer);
+            clearTimeout(this.refrushTimeer);
+            this.stopTimer = true;
+            jfbRootExec("deleteCardUnbindEntry", {
+              vm: this,
+              data: {
+                card_number: this.card_number + "",
+              },
+            })
+              .then((res) => {
+                this.$xdAlert({
+                  content: "解绑成功",
+                  close: () => {
+                    this.$xdUniHelper.redirectTo({
+                      url: this.backUrl || this.settings.index,
+                    });
+                  },
+                });
+              })
+              .catch((err) => {
+                console.log(err, "err");
+                this.stopTimer = false;
+              });
+          }
+        },
+      });
+    },
+    setInval(time) {
+      console.log("pppppp", time);
+      this.timeer = setInterval(() => {
+        if (time === 0) {
+          this.timeStr = "00分00秒";
+          clearInterval(this.timeer);
+          if (!this.stopTimer) this.detail();
+        } else {
+          time--;
+          let f = Math.floor(time / 60);
+          f = f < 10 ? "0" + f : f;
+          let m = time % 60;
+          m = m < 10 ? "0" + m : m;
+          this.timeStr = `${f}分${m}秒`;
+        }
+      }, 1000);
+    },
+    handleToShift() {
+      this.$xdUniHelper.navigateTo({
+          url: `${this.shift_url}?card_number=${this.info["card_number"]}`,
+      });
+    },
+    onJfbBack(options) {
+      if (this.timeer) {
+        clearTimeout(this.timeer);
+      }
+      if (this.refrushTimeer) {
+        clearTimeout(this.refrushTimeer);
+      }
+      this.$xdUniHelper.navigateBack();
+    },
+    onJfbUnload() {
+      this.timeStr = ""
+      if (this.timeer) {
+        clearTimeout(this.timeer);
+      }
+      if (this.refrushTimeer) {
+        clearTimeout(this.refrushTimeer);
+      }
+    },
+    onJfbScroll(options) {
+      console.log("event.onJfbScroll", options);
+    },
+    onJfbReachBottom(options) {
+      console.log("event.onJfbReachBottom", options);
+    },
+    onJfbShow(options) {
+      console.log("event.onJfbShow", options);
+      this.onJfbLoad(options)
+      // if (this.first) {
+      //   if (this.brandInfo["is_enable_pay_password"] === "N") {
+      //     this.init();
+      //   } else if (
+      //     this.brandInfo["is_enable_pay_password"] === "Y" &&
+      //     this.userInfo["has_user_set_password"] === "N"
+      //   ) {
+      //     this.editShow = true;
+      //     this.pwdTitle = "您还未设置支付密码，请设置您的平台支付密码";
+      //   } else if (
+      //     this.brandInfo["is_enable_pay_password"] === "Y" &&
+      //     this.userInfo["has_user_set_password"] === "Y"
+      //   ) {
+      //     this.show = true;
+      //     this.textList = [
+      //       {
+      //         label: "查看卡详情",
+      //       },
+      //       {
+      //         label: "请输入支付密码",
+      //       },
+      //     ];
+      //   }
+      // }
+    },
+    onJfbHide(options) {
+      this.timeStr = ""
+      if (this.timeer) {
+        clearTimeout(this.timeer);
+      }
+      if (this.refrushTimeer) {
+        clearTimeout(this.refrushTimeer);
+      }
+    },
+    onJfbBack(options) {
+      console.log("event.onJfbBack", options);
+    },
+    onJfbUpdate(...data) {
+      console.log("event.onJfbUpdate", data);
+    },
+    onJfbCustomEvent(options) {
+      console.log("event.onJfbReachBottom", options);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseCardDetailEntryLess.less";
+
+.jfb-base-card-detail-entry {
+  &__body {
+    color: #333;
+    .logo-icon {
+      width: unit(100, rpx) !important;
+      height: unit(100, rpx) !important;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50rpx, -50rpx);
+    }
+    padding: unit(26, rpx);
+    .card-list {
+  overflow: hidden;
+  border-radius: unit(16, rpx);
+  margin-bottom: unit(30, rpx);
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  
+  &__title {
+    height: unit(56, rpx);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    
+    & > view {
+      padding: 0 unit(80, rpx);
+      font-size: unit(24, rpx);
+      line-height: unit(56, rpx);
+      background: rgba(102, 102, 102, 0.4);
+      color: #fff;
+      border-radius: 0 0 unit(16, rpx) 0;
+    }
+    
+  }
+  
+  &__content {
+    padding: unit(10, rpx) unit(40, rpx) 0;
+    height: unit(86, rpx);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    & > view:first-child {
+      font-size: unit(36, rpx);
+      line-height: unit(86, rpx);
+      color: #fff;
+      font-weight: 700;
+    }
+    
+    & > view:nth-child(2) {
+      font-size: unit(24, rpx);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-flow: wrap;
+      flex-direction: column;
+      color: #fff;
+    }
+  }
+  
+  &__date {
+    padding: 0 unit(40, rpx);
+    font-size: unit(28, rpx);
+    line-height: unit(32, rpx);
+    color: #fff;
+  }
+  
+  &__yue {
+    padding: unit(10, rpx) unit(40, rpx) 0;
+    font-size: unit(28, rpx);
+    line-height: unit(32, rpx);
+    color: #fff;
+    
+    & > text:nth-child(2) {
+      font-weight: 700;
+    }
+  }
+  
+  &__other {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: unit(20, rpx) unit(40, rpx) 0;
+    margin-top: unit(0, rpx);
+    
+    & > view {
+      border-radius:unit(8, rpx);
+      background: rgba(255, 255, 255, 0.2);
+      height: unit(48, rpx);
+      line-height: unit(48, rpx);
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-weight: 400;
+      font-size: unit(24, rpx);
+      padding: 0 unit(20, rpx);
+      color: #fff;
+    }
+    
+    
+  }
+  
+  &__nodata {
+    padding: unit(20, rpx) unit(40, rpx) 0;
+    margin-top: unit(0, rpx);
+    color: #fff;
+    font-size: unit(28, rpx);
+  }
+  
+  &__entry {
+    padding: unit(20, rpx) unit(40, rpx) 0;
+    & > view {
+      line-height: unit(64, rpx);
+      text-align: center;
+      font-size: unit(26, rpx);
+      border-radius: unit(32, rpx);
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
+      font-weight: 500;
+    }
+  }
+  
+  &__entrys {
+    margin: unit(20, rpx) unit(20, rpx) 0;
+    padding: unit(30, rpx);
+    border-radius: unit(16, rpx);
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
+    
+    &-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+     
+      
+      & > view:first-child {
+        font-size: unit(28, rpx);
+        font-weight: 500;
+        flex: 1;
+      }
+      
+      & > view:nth-child(2) {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-shrink: 0;
+        font-size: unit(20, rpx);
+        color: #999;
+      }
+    }
+    
+    &-scroll {
+    
+    }
+  
+    &-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-flow: nowrap;
+      margin-left: unit(-14, rpx);
+      padding-top: unit(20, rpx);
+      
+      & > view {
+        width: unit(120, rpx);
+        margin-right: unit(10, rpx);
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        
+        & > view:first-child {
+          width: unit(76, rpx);
+          height: unit(76, rpx);
+          overflow: hidden;
+    
+          & > image {
+            height: 100%;
+            width: 100%;
+          }
+        }
+        
+        & > view:nth-child(2) {
+          margin-top: unit(10, rpx);
+          font-size: unit(24, rpx);
+          line-height: unit(36, rpx);
+          margin-bottom: unit(10, rpx);
+        }
+        
+        & > view:nth-child(3) {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-shrink: 0;
+          font-size: unit(20, rpx);
+          color: #999;
+        }
+        
+        &:last-child {
+          margin-right: 0;
+        }
+        
+      }
+      
+      
+    }
+  }
+  
+  &-warp {
+    width: unit(700, rpx);
+    min-height: unit(290, rpx);
+    position: relative;
+    border-radius: unit(16, rpx);
+    background-size: 100%;
+    padding-bottom: unit(20, rpx);
+  }
+}
+
+    &-qrcode {
+      text-align: center;
+      font-size: @xd-font-size-base;
+      line-height: unit(36, rpx);
+      background: #fff;
+      border-radius: unit(16,rpx);
+      margin-top: unit(24, rpx);
+      padding: unit(20,rpx) unit(70,rpx) unit(70,rpx) unit(70,rpx);
+      color: #000;
+
+      & > view {
+        // margin-bottom: unit(20, rpx);
+
+        & > view {
+          margin-bottom: 0;
+        }
+      }
+
+      & > view:nth-child(1) {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        height: unit(200, rpx);
+        width: 100%;
+        margin-top: unit(20, rpx);
+
+        & > view {
+          width: 100%;
+          height: unit(200, rpx);
+          padding: unit(10, rpx);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          & > image {
+            max-width: 100%;
+            max-height: unit(200, rpx);
+          }
+        }
+      }
+
+      & > view:nth-child(2) {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: unit(20, rpx);
+
+        & > view {
+          width: unit(450, rpx);
+          height: unit(450, rpx);
+          padding: unit(10, rpx);
+
+          & > image {
+            width: unit(450, rpx);
+            height: unit(450, rpx);
+          }
+        }
+      }
+    }
+
+    &-business {
+      background: #fff;
+      border-radius: unit(16,rpx);
+      margin-top: unit(24,rpx);
+
+      &-title {
+        font-size: unit(28,rpx);
+        font-weight: 500;
+        text-align: center;
+        padding: unit(28,rpx);
+      }
+
+      &-content {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-flow: wrap;
+      padding-left: unit(30, rpx);
+      
+      & > view {
+        width: unit(120, rpx);
+        margin-right: unit(10, rpx);
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        
+        & > view:first-child {
+          width: unit(76, rpx);
+          height: unit(76, rpx);
+          overflow: hidden;
+    
+          & > image {
+            height: 100%;
+            width: 100%;
+          }
+        }
+        
+        & > view:nth-child(2) {
+          margin-top: unit(10, rpx);
+          font-size: unit(24, rpx);
+          line-height: unit(36, rpx);
+          margin-bottom: unit(10, rpx);
+        }
+        
+        & > view:nth-child(3) {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-shrink: 0;
+          font-size: unit(20, rpx);
+          color: #999;
+        }
+        
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+    }
+
+    .fixe_bottom{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: unit(100, rpx);
+        padding: 0 unit(40, rpx);
+        background: #FFF;
+        box-shadow: 0 0 unit(16, rpx) rgba(0,0,0,.05);
+        .flex_l{
+          display: flex;
+          align-items: center;
+          font-size: unit(32,rpx);
+        }
+      }
+  }
+}
+</style>