<View
  className="component-cpx-coupons-swrapper"
  style={{
    'backgroundColor': fields.backgroundColor || '#fff'
  }}>
  <View className="coupons-list" x-if={data.list.length}>
    <View
      x-if={fields.layout === 3}
      className="coupon-item coupon-item-three"
      x-for={(item, idx) in data.list}
      key={idx}
    >
      <View className="used" x-if={item.received}></View>
      <Text className="discount" x-if={item.discountType && item.discountType === 2}>{item.amount}</Text>
      <Text className="d-container" x-class={{'letter': item.letter}} x-else>{item.amount}</Text>
      <Text className="use">{item.thresholdDesc}</Text>
      <Text className="date">{item.validateDesc}</Text>
      <View className="btn" onClick={method.couponItemGet.bind(this, item, idx)}>{item.btnText}</View>
    </View>
    <View
      x-if={fields.layout === 2}
      className="coupon-item coupon-item-two"
      x-for={(item, idx) in data.list}
      key={idx}
    >
      <View className="coupon">优惠券</View>
      <View className="used-view" x-if={item.received}><View className="used"></View></View>
      <View className="du-view">
        <Text className="discount" x-if={item.discountType && item.discountType === 2}>{item.amount}</Text>
        <Text className="d-container" x-class={{'letter': item.letter}} x-else>{item.amount}</Text>
        <View x-if={item.thresholdDesc}>
          <Text className="use">{item.thresholdDesc}</Text>
          <!-- <Text className="use">使用</Text> -->
        </View>
      </View>
      <View className="d-btn-view">
        <Text className="date" x-if={item.validateType && item.validateType === '1'}>{item.validateDesc}</Text>
        <Text className="date" x-else>有效期 {item.validateDesc}</Text>
        <View className="btn" onClick={method.couponItemGet.bind(this, item, idx)}>{item.btnText}</View>
      </View>
    </View>
    <View
      x-if={fields.layout === 1 || !fields.layout}
      className="coupon-item coupon-item-one"
      x-for={(item, idx) in data.list}
      key={idx}
    >
      <!-- <Image
        source={{uri: 'https://img.alicdn.com/imgextra/i2/O1CN01sy0iX21FFo3pZGTiy_!!6000000000458-2-tps-678-172.png'}}
        mode="cover"
        className="com-image"
      /> -->
      <View className="com-container">
        <View className="coupon">优惠券</View>
        <View className="used" x-if={item.received}></View>
        <View className="dud-view">
          <Text className="discount" x-if={item.discountType && item.discountType === 2}>{item.amount}</Text>
          <Text className="d-container" x-class={{'letter': item.letter}} x-else>{item.amount}</Text>
          <View className="ud-view">
            <Text className="use">{item.thresholdDesc}</Text>
            <Text className="date" x-if={item.validateType && item.validateType === '1'}>{item.validateDesc}</Text>
            <Text className="date" x-else>有效期 {item.validateDesc}</Text>
          </View>
        </View>
        <View className="btn" onClick={method.couponItemGet.bind(this, item, idx)}>{item.btnText}</View>
      </View>
    </View>
  </View>
  <View className="button"  x-if={fields.showButton && data.list.length} onClick={method.couponsReceiveGet.bind(this)}>{data.btnText}</View>
  <Image
    x-if={!data.list.length}
    resizeMode="contain"
    mode="widthFix"
    source={{
      uri: 'https://media.feihe.com/ywztmall/TB1zN5XSXXXXXbUXpXXXXXXXXXX-750-376.png',
      width: '100%'
    }}
  />
</View>