jufubao-forms 1.0.0-beta1

package/src/components/CusCouponItem/CusCouponItem.vue

@@ -0,0 +1,298 @@
+<template>
+  <view @click="toDetail" class="xd-coupon_item" :style="couponItemBoxStyle">
+    <view class="coupon_left" :style="{
+      background: couponLeftBgColor
+    }">
+      <view class="_point">
+        <xd-unit
+          :unitFontSize="24"
+          :fontSize="48"
+          :price="item.card_point"
+          :isOld="false"
+          :unit="item.unit || ''"
+          :colorNew="'#ffffff'"
+        ></xd-unit>
+        <!-- <text style="font-size: 24rpx;">{{ item.unit }}</text> -->
+      </view>
+      <view class="_rule">{{ item.show_name }}</view>
+    </view>
+    <view class="coupon_right" :style="couponRightItemBoxStyle">
+      <view class="cont_top" :style="{
+        background: couponTitleBgColor,
+        color: mainColor
+      }">{{ item.card_type_name }}</view>
+      <view class="cont_main">
+        <view class="cou_number">券号：{{ item.card_number }}</view>
+        <view class="cou_time">有效期：{{getTimeFormat(item.end_time) }}</view>
+        <view class="cou_point">
+          余额：
+          <xd-unit
+            :unitFontSize="24"
+            :fontSize="28"
+            :price="item.card_point"
+            :isOld="false"
+            :unit="item.unit || ''"
+            :colorNew="'#333333'"
+          ></xd-unit>
+        </view>
+        <slot name="btn">
+          <view class="cou_btn"
+            :style="[
+              item.is_login === 'Y' ? couponBtnActiveStyle : couponBtnStyle,
+              {
+                padding: couponBtnPadding,
+                borderRadius: couponBtnRadius + 'rpx'
+              }
+            ]"
+            @click.stop="goToUseCoupon"
+          >{{item.is_login === 'Y' ? '已登录' : '去使用'}}</view>
+        </slot>
+      </view>
+      <view class="cont_bottom">
+        <view class="switch_rule" @click.stop="switchRule">
+          <view>使用规则</view>
+          <view>
+            <xd-font-icon v-if="!expand" icon="iconxia_down" size="24"></xd-font-icon>
+            <xd-font-icon v-else icon="iconshang_up" size="24"></xd-font-icon>
+          </view>
+        </view>
+        <view v-if="expand" class="expand_rule">
+          {{ item.card_use_rule }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+  import getServiceUrl from '@/common/getServiceUrl'
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  export default{
+    name: "CusCouponItem",
+    components: {
+      XdFontIcon,
+      XdUnit
+    },
+    props: {
+      item:{
+        type: Object,
+      },
+      couponRadius: {
+        type: String | Number,
+        default: "16"
+      },
+      couponLeftBgColor: {
+        type: String,
+        default: 'linear-gradient(180deg, #FFA852 0%, #FF5733 100%)'
+      },
+      couponImageUrl: {
+        type: Object | String
+      },
+      couponTitleBgColor: {
+        type: String,
+        default: "rgba(255, 87, 51, 0.1)"
+      },
+      mainColor: {
+        type: String,
+        default: "#000"
+      },
+      couponUseBtnPadding: {
+        type: Object,
+        default(){
+          return {
+            top: 20,
+            right: 20,
+            bottom: 10,
+            left: 20
+          }
+        },
+      },
+      couponBtnRadius: {
+        type: String | Number,
+        default: "16"
+      },
+      couponBtnTextStyle: {
+        type: Object,
+        default(){
+          return {
+            color: '#fff',
+            bgColor: '#ff5722',
+            fontSize: '30rpx',
+            fontWeight: 'normal'
+          }
+        }
+      }
+    },
+    data() {
+      return {
+        expand: false,
+      }
+    },
+    computed: {
+      couponItemBoxStyle(){
+        return this.styleObjectToString({
+          borderRadius: this.couponRadius + 'rpx',
+        })
+      },
+      couponBtnPadding(){
+        let padding = `${this.checkValue(this.couponUseBtnPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.couponUseBtnPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.couponUseBtnPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.couponUseBtnPadding.left, 20)}rpx`;
+        return padding;
+      },
+      couponBtnStyle(){
+        let styleObj = {
+          color: this.couponBtnTextStyle['color'] || '#333',
+          background: this.couponBtnTextStyle['bgColor'] || '#fff',
+          fontSize: this.couponBtnTextStyle['fontSize'] || '30rpx',
+          fontWeight: this.couponBtnTextStyle['fontWeight'] || 'normal',
+        }
+        return this.styleObjectToString(styleObj)
+      },
+      couponBtnActiveStyle(){
+        return this.styleObjectToString({
+          color: this.couponBtnTextStyle['actColor'] || '#fff',
+          background: this.couponBtnTextStyle['actBgColor'] || '#ff5722',
+          fontSize: this.couponBtnTextStyle['actFontSize'] || '30rpx',
+          fontWeight: this.couponBtnTextStyle['actFontWeight'] || 'normal',
+        })
+      },
+      couponRightItemBoxStyle(){
+        let image = {};
+        if(this.cardImageUrl) image = {
+          backgroundImage: `url(${this.getCouponBgImage})`,
+          backgroundSize: '100%',
+          backgroundRepeat: 'no-repeat',
+        }
+        return this.styleObjectToString(image)
+      },
+      getCouponBgImage(){
+        let bg = '';
+        if(this.$xdUniHelper.checkVarType(this.couponImageUrl) === 'object'
+          || this.$xdUniHelper.checkVarType(this.couponImageUrl) === 'array'
+        ) {
+          if(!this.$xdUniHelper.isEmpty(this.couponImageUrl)) {
+            return getServiceUrl(this.couponImageUrl.url)
+          }
+        }
+        return bg
+      },
+    },
+    methods: {
+      switchRule(){
+        this.expand = !this.expand;
+      },
+      getTimeFormat(time) {
+        let date = null;
+        if (time == +time) {
+          if ((time + "").length <= 10) date = new Date(+time * 1000);
+          else date = new Date(+time);
+          return (
+            date.getFullYear() +
+            "-" +
+            (date.getMonth() + 1) +
+            "-" +
+            date.getDate()
+          );
+        }
+        return time;
+      },
+      toDetail(){
+        this.$emit('toDetail', this.item);
+      },
+      goToUseCoupon(){
+        this.$emit('useCoupon', this.item);
+      },
+      checkValue(value, dValue = 0){
+        if(value === undefined || value === '' || value === null) return dValue;
+        return Number(value || 0);
+      },
+    }
+  }
+
+</script>
+<style lang="less" scoped>
+  .xd-coupon_item{
+    display: flex;
+    margin: 20rpx 0;
+    border-radius: 16rpx;
+    background: #FFFFFF;
+    overflow: hidden;
+    border: 2rpx solid #eee;
+    .coupon_left{
+      color: #FFFFFF;
+      width: 170rpx;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      ._point{
+        font-size: 48rpx;
+      }
+      ._rule{
+        font-size: 24rpx;
+      }
+    }
+    .coupon_right{
+      flex: 1;
+      width: 0;
+      .cont_top{
+        background: rgba(255, 87, 51, 0.1);
+        padding: 8rpx 40rpx;
+        font-size: 24rpx;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .cont_main{
+        position: relative;
+        padding: 28rpx 20rpx 28rpx 40rpx;
+        color: #333333;
+        .cou_number{
+          font-size: 32rpx;
+          font-weight: bold;
+        }
+        .cou_time{
+          font-size: 28rpx;
+          margin: 16rpx 0;
+        }
+        .cou_point{
+          font-size: 28rpx;
+          display: flex;
+          align-items: center;
+        }
+        .cou_btn{
+          position: absolute;
+          padding: 10rpx 30rpx;
+          background-color: #ddd;
+          border-radius: 12rpx;
+          right: 20rpx;
+          bottom: 20rpx;
+        }
+      }
+      .cont_bottom{
+        background: #EEEEEE;
+        .switch_rule{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 12rpx 40rpx;
+          font-size: 24rpx;
+          color: #666666;
+        }
+        .expand_rule{
+          padding: 12rpx 40rpx;
+          font-size: 20rpx;
+          color: #333333;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          background-color: #F5F5F5;
+        }
+      }
+    }
+  }
+</style>

package/src/components/CusEnter/CusEnter.vue

@@ -0,0 +1,333 @@
+<template>
+  <view
+    class="list-poster"
+    v-if="enterList !== null && enterList.length > 0"
+  >
+    <!--静态显示-->
+    <view class="list-poster-one" v-if="0"></view>
+    <!--静态显示-->
+
+    <view class="list-poster-more" v-else>
+      <cus-swiper-dot
+        :style="[outStyleBoxComp]"
+        :current="current"
+        :info="enterListComp"
+        field="content_name"
+        :mode="mode"
+        :dots-styles="dotStyleData"
+      >
+        <swiper
+          class="swiper xd-swiper-content"
+          :style="[inStyleBoxComp]"
+          :indicator-dots="false"
+          :autoplay="time > 0"
+          :interval="time"
+          :duration="500"
+          :current="current"
+          circular
+          @animationfinish="handleAnimationFinish"
+          @change="handleChange"
+        >
+          <swiper-item
+            v-for="(item,index) in enterListComp"
+            :key="index"
+            class="swiper-list"
+          >
+            <view
+              v-for="(brand,idx) in item"
+              :key="brand.value"
+              :style="[itemStyleComp,{marginRight:(idx>0&&(idx+1)%column===0)?0:(columnSpacing + 'rpx')}]"
+              @click.stop="handlePosterClick(brand,index)"
+            >
+              <view :style="[itemImageComp]" class="list-image">
+                <image v-if="brand['error-status']===false" :style="{borderRadius:iconRadius+'rpx'}" :src="brand.brand_icon" :alt="brand.label"></image>
+                <image v-else :style="{borderRadius:iconRadius+'rpx'}" :src="iconErrorUrl" :alt="brand.label"></image>
+              </view>
+              <view class="list-title" :style="[titleStyle]">{{brand.label}}</view>
+            </view>
+          </swiper-item>
+        </swiper>
+      </cus-swiper-dot>
+    </view>
+  </view>
+</template>
+
+<script>
+
+import CusSwiperDot from "@/components/CusSwiperDot/CusSwiperDot.vue";
+import Color from "color";
+
+export default {
+  name: "CusEnter",
+  components: {
+    CusSwiperDot
+  },
+  props:{
+    isPoster:{
+      type:Boolean,
+      default: false,
+    },
+    iconErrorUrl: {
+      type:String,
+      required: true,
+    },
+    outWidth: {
+      type: Number,
+      required: true
+    },
+    columnSpacing:{
+      type: Number,
+      default: 0
+    },
+    rowSpacing:{
+      type: Number,
+      default: 0
+    },
+    iconSize: {
+      type:Number,
+      default: 20,
+    },
+    iconRadius:{
+      type:Number,
+      default: 20,
+    },
+    column:{
+      type: Number,
+      default: 5
+    },
+    row:{
+      type: Number,
+      default: 2
+    },
+    time:{
+      type: Number,
+      default: 5
+    },
+    enterList:{
+      type: Array|null,
+      default: null
+    },
+    mode:{
+      type: String,
+      default:'round'
+    },
+    mainColor:{
+      type:String,
+      required: true
+    },
+    titleStyle:{
+      type:Object,
+      default(){
+        return {}
+      }
+    },
+  },
+
+  computed:{
+    dotStyleData(){
+      return this.dotStyleDataConf()[this.mode];
+    },
+    enterListComp(){
+      let temp = [];
+      let page_token = this.column * this.row;
+      let len = Math.ceil(this.enterList.length/page_token);
+      for(let i=0; i < len; i++) {
+        temp.push(this.$xdUniHelper.getLocalPaginationData(this.enterList, i+1,page_token));
+      }
+      return temp;
+    },
+    itemImageComp(){
+      return {
+        width: this.itemWidth + 'rpx',
+        height: this.itemWidth + 'rpx',
+        padding: this.iconSize+'rpx',
+      }
+    },
+    itemStyleComp(){
+      return {
+        width: this.itemImageComp.width,
+      }
+    },
+
+    outStyleBoxComp(){
+      return this.styleBox();
+    },
+
+    inStyleBoxComp(){
+      return  this.styleBox('in');
+    },
+    itemWidth(){
+      return (this.outWidth - (this.column - 1) * this.columnSpacing)/this.column;
+    },
+  },
+
+  data(){
+    return {
+      current:0,
+      dotStyleDataConf(){
+        let alpha = 0.6;
+        let selectedColor = `rgba(${Color(this.mainColor).alpha(alpha).array().join(',')})`;
+        let textColor = `rgba(${Color(this.mainColor).alpha(0.2).array().join(',')})`;
+        return {
+          dot: {
+            backgroundColor: 'rgba(166,166,166,.5)',
+            border: '0px rgba(166,166,166,.5) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: `0px this.mainColor solid`
+          },
+          default: {
+            width: 16,
+            backgroundColor: 'rgba(200,200,200,.45)',
+            border: '1px rgba(200,200,200,.45) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: `1px this.mainColor solid`
+          },
+          round: {
+            backgroundColor: 'rgba(166,166,166,.5)',
+            border: '0px rgba(166,166,166,.5) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: `0px this.mainColor solid`
+          },
+          nav: {
+            backgroundColor: selectedColor,
+            border: '1px rgba(0,0,0,.2) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: '1px rgba(255, 255, 255 1) solid'
+          },
+          indexes: {
+            backgroundColor: textColor,
+            border: '0px rgba(0,0,0,.2) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: '0px rgba(0,0,0,.8) solid',
+            selectedColor: '#fff',
+          }
+        }
+      },
+    }
+  },
+  methods:{
+
+    styleBox(out='out'){
+      let height = this.itemWidth * (this.row);
+      let text = 32 * this.row;
+      let columnSpacings = this.rowSpacing * (this.row -1);
+      let modeHeight = 46;
+      if(this.mode === "normal") modeHeight = 10;
+      if(out === 'in') modeHeight = 0;
+      return {
+        width: this.outWidth + 'rpx',
+        height: (height + columnSpacings + modeHeight + text) + 'rpx'
+      }
+    },
+
+    handlePosterClick(item,index){
+      if(!this.isPoster) {
+        this.$emit('on-detail', {item,index});
+        return;
+      }
+
+      if(!item.redirect_data) {
+        console.warn(`未配置链接地址: ${item.redirect_data}`);
+        console.error(`未配置链接地址: ${item.redirect_data}`);
+        return
+      }
+
+      //内部链接跳转地址
+      if (item.redirect_type === 'INN') {
+        try {
+          let url = JSON.parse(item.redirect_data);
+          let params = '';
+          if(url.page) {
+            if (item['redirect_params']) params = `?${item['redirect_params']}`;
+            this.$xdUniHelper.navigateTo({url: url.page + params})
+          }
+          else {
+            console.error(`应用链接配置错误: ${url.page}`)
+          }
+        } catch (e) {
+          console.error(`应用链接配置错误: ${item.redirect_data}`)
+        }
+      }
+
+      //外部链接
+      if (item.redirect_type === 'URL') {
+        let reg = /^(http:\/\/|https:\/\/|\/\/)+.+$/;
+        let spReg = /(-apiuri\/v)/;
+        //#ifdef MP-WEIXIN
+        try {
+          let url = JSON.parse(item.redirect_data);
+          if (reg.test(url.url) || spReg.test(url.url)) {
+            console.warn(`广告跳转外站: ${url.url}`)
+            this.$xdUniHelper.navigateTo(url);
+          } else {
+            console.error(`广告跳转外站配置错误: ${url.url}`)
+          }
+        } catch (e) {
+          console.error(`广告跳转外站配置错误: ${item.redirect_data}`)
+        }
+        //#endif
+        //#ifdef H5
+        try {
+          let url = JSON.parse(item.redirect_data);
+          console.warn(`广告跳转外站: ${url.url}`);
+          this.$xdUniHelper.redirectTo(url, false)
+        } catch (e) {
+          console.error(`广告跳转外站配置错误: ${item.redirect_data}`)
+        }
+        //#endif
+
+      }
+
+      //无跳转地址
+      if(item.redirect_type === 'EMP') {
+        console.warn(`无跳转地址`);
+      }
+    },
+
+    handleChange(e){
+      this.current = e.detail.current;
+    },
+
+    handleAnimationFinish(e){
+    },
+  }
+}
+
+</script>
+
+
+<style scoped lang="less">
+  .swiper-list {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-flow: wrap;
+    flex-shrink: 0;
+
+    .list-image {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+    }
+
+    .list-title {
+      text-align: center;
+      font-size: 24rpx;
+      color: #666;
+      line-height: 32rpx;
+      .uni-one-cut(32);
+      padding: 0 6rpx;
+    }
+
+    & image {
+      width:100%;
+      height: 100%;
+    }
+  }
+</style>