jufubao-base 1.0.289-beta2 → 1.0.290-beta1

package/src/components/CusCouponItem/CusCouponItem.vue

@@ -1,298 +0,0 @@
-<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

@@ -1,360 +0,0 @@
-<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"
-          >
-            <view :style="[boxStyleComp]" 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')},
-                  {marginTop:idx<column?0:(rowSpacing + 'rpx')}
-                 ]"
-                @click.stop="handlePosterClick(brand,index)"
-              >
-                <view :style="[itemImageComp]" class="list-image" >
-                  <image v-if="brand['error-status']===false" :style="[config['iconStyle']]" :src="brand.brand_icon" :alt="brand.label"></image>
-                  <image v-else :style="[config['iconStyle']]" :src="iconErrorUrl" :alt="brand.label"></image>
-                </view>
-                <view class="list-title" :style="[config['titleStyle']]">{{brand.label}}</view>
-              </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:{
-    config: {
-      type: Object,
-      default(){
-        return {
-          outWidth: uni.getSystemInfoSync().safeArea.width,//(px)
-          column: 5,//列
-          row: 2, //行
-          wrapperPadding:0, //盒子填充（有投影时候设置） (rpx)
-          wrapperPaddingRL: 0, //内容盒子左右边距和
-          wrapperPaddingTB: 0, //内容盒子上下边距和
-          wrapperBorderRadius:0, //内容盒子圆角设置
-          iconBoxStyle: {}, //图片icon外壳样式
-          titleStyle: {}, //图标下文字样式
-          columnSpacing: 0, //列间距  (rpx)
-          rowSpacing: 0, //行间距  (rpx)
-          iconStyle: { //icon样式
-            borderRadius: 0, // (rpx)
-            iconPadding: 0 // (rpx)
-          },
-        }
-      }
-    },
-    /**
-     * @description 是否为广告模式，非广告模式使用事件通知上层进行页面跳转
-     */
-    isPoster:{
-      type:Boolean,
-      default: false,
-    },
-    iconErrorUrl: {
-      type:String,
-      required: true,
-    },
-    time:{
-      type: Number,
-      default: 5
-    },
-    enterList:{
-      type: Array|null,
-      default: null
-    },
-    mode:{
-      type: String,
-      default:'round'
-    },
-    mainColor:{
-      type:String,
-      required: true
-    }
-  },
-
-  computed:{
-    //maps
-    columnSpacing(){
-      return this.config.columnSpacing
-    },
-    rowSpacing(){
-      return this.config.rowSpacing
-    },
-    column(){
-      return  this.config.column
-    },
-    row(){
-      return  this.config.row
-    },
-    //外填充样式
-    boxStyleComp(){
-      return {
-        padding: this.config.wrapperPadding,
-        boxSizing:'border-box'
-      }
-    },
-    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;
-    },
-    //icon盒子样式设置
-    itemImageComp(){
-      return {
-        width: this.itemWidth + 'px',
-        height: this.itemWidth + 'px',
-        padding: this.iconSize + 'rpx',
-        boxSizing:'border-box',
-        ...this.config.iconBoxStyle
-      }
-    },
-
-    //图标列表宽度
-    itemWidth(){
-      return (this.config.outWidth - (this.column - 1) * this.columnSpacing * this.$rpxNum)/this.column;
-    },
-
-    //图标列表样式
-    itemStyleComp(){
-      return {
-        width: this.itemWidth + 'px',
-        height: (this.itemWidth + this.textHeight*this.$rpxNum) + 'px',
-      }
-    },
-
-    outStyleBoxComp(){
-      return this.styleBox();
-    },
-
-    inStyleBoxComp(){
-      return  this.styleBox('in');
-    },
-
-
-  },
-
-  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',
-          }
-        }
-      },
-      textHeight: 40,
-      indexHeight: 46,
-    }
-  },
-  methods:{
-    styleBox(out='out'){
-      let boxPaddingBT = this.config.wrapperPaddingTB * this.$rpxNum
-      let height = this.itemWidth * (this.row);
-      let text = this.textHeight * this.row * this.$rpxNum;
-      let columnSpacings = this.rowSpacing * (this.row -1) * this.$rpxNum;
-      let modeHeight = this.indexHeight * this.$rpxNum;
-      if(this.mode === "normal") modeHeight = 10 * this.$rpxNum;
-      if(out === 'in') modeHeight = 0;
-
-      return {
-        width: '100%',
-        height: (height + columnSpacings + modeHeight + text + boxPaddingBT) + 'px'
-      }
-    },
-
-    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;
-    }
-
-    .list-title {
-      text-align: center;
-      font-size: 24rpx;
-      color: #666;
-      line-height: 40rpx;
-      .uni-one-cut(40);
-      padding: 0 6rpx;
-    }
-
-    & image {
-      width:100%;
-      height: 100%;
-    }
-  }
-</style>