feat: v2.2.15

.github/workflows/preview.yml

@@ -1,14 +1,12 @@
 name: 🔂 Surge PR Preview
 
-on: pull_request_target
+on: pull_request
 
 jobs:
   preview:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-        with:
-          ref: refs/pull/${{ github.event.pull_request.number }}/merge
       - uses: afc163/surge-preview@v1
         with:
           surge_token: ${{ secrets.SURGE_TOKEN }}

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 2.2.15
+
+`2020-03-03`
+
+* :bug: fix(datepicker)：组件英文环境下时分秒显示的中文 #337 @Drjingfubo
 ## 2.2.14
 
 `2020-02-08`

SECURITY.md

@@ -0,0 +1,5 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+Send information about security vulnerabilities to nutui@jd.com

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "2.2.14",
+  "version": "2.2.15",
   "description": "一套轻量级移动端Vue组件库",
   "typings": "dist/types/index.d.ts",
   "main": "dist/nutui.js",

src/config.json

@@ -516,6 +516,16 @@
     },
     {
       "version": "1.0.0",
+      "name": "Coupon",
+      "chnName": "优惠券",
+      "desc": "优惠券",
+      "type": "component",
+      "sort": "6",
+      "showDemo": true,
+      "author": ""
+    },
+    {
+      "version": "1.0.0",
       "name": "TabSelect",
       "chnName": "配送时间",
       "desc": "两级配送时间",

src/nutui.js

@@ -141,6 +141,9 @@ import './packages/numberkeyboard/numberkeyboard.scss';
 import CollapseItem from './packages/collapseitem/index.js';
 import './packages/collapseitem/collapseitem.scss';
 
+import Coupon from './packages/coupon/index.js';
+import './packages/coupon/coupon.scss';
+
 const packages = {
   Cell,
   Dialog,
@@ -209,7 +212,8 @@ const packages = {
   Collapse: Collapse,
   Luckycard: Luckycard,
   NumberKeyboard: NumberKeyboard,
-  CollapseItem: CollapseItem
+  CollapseItem: CollapseItem,
+  Coupon: Coupon
 };
 
 const components = {};

src/packages/coupon/coupon.scss

@@ -0,0 +1,106 @@
+.nut-coupon {
+  position: relative;
+  width: 133px;
+  min-height: 76px;
+  padding: 7px 12px;
+  text-align: center;
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-sizing: border-box;
+  &-info {
+    position: relative;
+    display: flex;
+    width: 100%;
+  }
+  &-imgbox {
+    margin-right: 5px;
+  }
+  &-img {
+    display: block;
+    width: 44px;
+    height: 44px;
+  }
+  &-desc {
+    width: 100%;
+    text-align: left;
+  }
+  &-discount {
+    font-weight: bold;
+    font-size: 24px;
+    color: #e8220e;
+    white-space: nowrap;
+    .rmb {
+      font-size: 14px;
+    }
+  }
+  &-quota {
+    margin-bottom: 4px;
+    font-weight: bold;
+    font-size: 12px;
+    color: #e8220e;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &-limitStr {
+    margin-bottom: 7px;
+    font-size: 12px;
+    color: #8c8c8c;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &-btn {
+    width: 100%;
+    height: 22px;
+    line-height: 24px;
+    font-size: 14px;
+    text-align: center;
+    color: rgba(232, 34, 14, 1);
+    background: rgba(253, 237, 236, 1);
+    border: 1px solid rgba(232, 34, 14, 1);
+    border-radius: 10px;
+  }
+  &-image {
+    .nut-coupon-info {
+    }
+    .nut-coupon-quota {
+    }
+  }
+  &-1 {
+    .nut-coupon-info {
+      justify-content: center;
+    }
+    .nut-coupon-quota {
+      text-align: center;
+      font-size: 17px;
+    }
+  }
+  &-use {
+    .nut-coupon-btn {
+      color: #fff;
+      background: #f2140c;
+      border-color: #f2140c;
+    }
+  }
+  &-ban {
+    &:after {
+      content: '';
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: rgba(0, 0, 0, 0.4);
+      z-index: 2;
+    }
+    .nut-coupon-btn {
+      color: #fff;
+      background: #999;
+      border-color: #999;
+    }
+  }
+}

src/packages/coupon/coupon.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    :class="['nut-coupon', `nut-coupon-${type}`, cImage == true ? 'nut-coupon-image' : '', `nut-coupon-${['get', 'use', 'ban'][state]}`]"
+    @click="clickHandler"
+  >
+    <div class="nut-coupon-info">
+      <div v-if="type == 2 && cImage" class="nut-coupon-imgbox">
+        <img class="nut-coupon-img" :src="cImage" />
+      </div>
+      <div class="nut-coupon-desc">
+        <template v-if="type != '1'">
+          <template v-if="typeof +discount == 'number' && !isNaN(+discount)">
+            <div class="nut-coupon-discount">
+              <span class="rmb">&yen;</span>
+              {{ discount }}
+            </div>
+          </template>
+          <template v-else>
+            <div class="nut-coupon-discount">
+              {{ discount }}
+            </div>
+          </template>
+        </template>
+        <div class="nut-coupon-quota">{{ cleanZero(cText1) }}</div>
+      </div>
+    </div>
+    <div class="nut-coupon-limitStr">{{ cleanZero(cText2) }}</div>
+    <div class="nut-coupon-btn">
+      <div v-if="state == 0">立即领取</div>
+      <div v-else-if="state == 1">去使用</div>
+      <div v-else-if="state == 2">已抢光</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'nut-coupon',
+  props: {
+    item: {
+      type: Object,
+      default: null
+    },
+    type: {
+      type: [String, Number],
+      default: '1'
+    },
+    discount: {
+      type: [String, Number],
+      default: null
+    },
+    cText1: {
+      type: [String, Number],
+      default: null
+    },
+    cText2: {
+      type: [String, Number],
+      default: null
+    },
+    cImage: {
+      type: [Boolean, String],
+      default: false
+    },
+    state: {
+      type: [String, Number],
+      default: '0'
+    }
+  },
+  data() {
+    return {};
+  },
+  components: {},
+  mounted() {
+    // console.log('item', this.item)
+  },
+  methods: {
+    clickHandler(event) {
+      this.$emit('click', event);
+    },
+    cleanZero(value) {
+      value = value;
+      let res = /\.0+$/.exec(value);
+      if (res) {
+        return value.slice(0, res.index);
+      }
+      return value;
+    }
+  }
+};
+</script>

src/packages/coupon/demo.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="demo-list">
+    <!-- 京贴券 -->
+    <h4>京贴券</h4>
+    <div class="coupon-box">
+      <div class="coupon-item">
+        <nut-coupon type="1" cText1="每满10减1" cText2="仅可购买京贴测试商品" state="0" @click="handleClick()" />
+      </div>
+      <div class="coupon-item">
+        <nut-coupon type="1" cText1="每满10减1" cText2="仅可购买京贴测试商品" state="1" @click="handleClick()" />
+      </div>
+      <div class="coupon-item">
+        <nut-coupon type="1" cText1="每满10减1" cText2="仅可购买京贴测试商品" state="2" @click="handleClick()" />
+      </div>
+    </div>
+    <!-- 品类券无图 -->
+    <h4>品类券无图</h4>
+    <div class="coupon-box">
+      <div class="coupon-item">
+        <nut-coupon type="2" discount="2" cText1="满49元可用" cText2="仅可购买年货节头号京贴活动商品" state="0" @click="handleClick()" />
+      </div>
+      <div class="coupon-item">
+        <nut-coupon type="2" discount="8折" cText1="满199元可用" cText2="仅可购买年货节头号京贴活动商品" state="1" @click="handleClick()" />
+      </div>
+      <div class="coupon-item">
+        <nut-coupon type="2" discount="5" cText1="满99元可用" cText2="全品类券" state="2" @click="handleClick()" />
+      </div>
+    </div>
+    <!-- 品类券有图 -->
+    <h4>品类券有图</h4>
+    <div class="coupon-box">
+      <div class="coupon-item">
+        <nut-coupon
+          type="2"
+          discount="2"
+          cText1="满49元可用"
+          cText2="仅可购买年货节头号京贴活动商品"
+          cImage="http://m.360buyimg.com/babel/s250x250_jfs/t1/137621/21/15770/49049/5fbe0520E043b4ce5/f8a1e0e877908389.jpg"
+          state="0"
+          @click="handleClick()"
+        />
+      </div>
+      <div class="coupon-item">
+        <nut-coupon
+          type="2"
+          discount="8折"
+          cText1="满199元可用"
+          cText2="仅可购买年货节头号京贴活动商品"
+          cImage="http://m.360buyimg.com/babel/s250x250_jfs/t1/132022/33/3322/189592/5ef9d0c4Ece6a3708/c5dc348d3f943324.jpg"
+          state="1"
+          @click="handleClick()"
+        />
+      </div>
+      <div class="coupon-item">
+        <nut-coupon
+          type="2"
+          discount="5"
+          cText1="满99元可用"
+          cText2="全品类券"
+          cImage="http://m.360buyimg.com/babel/s250x250_jfs/t1/113459/35/17982/103219/5f6338c6Ec5691153/7e8cf299c6318afe.jpg"
+          state="2"
+          @click="handleClick()"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  data() {
+    return {};
+  },
+  methods: {
+    handleClick() {
+      this.$toast.text('很抱歉，没抢到~~');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.demo-list /deep/ p {
+  padding: 0;
+  margin: 0;
+}
+.coupon-box {
+  display: flex;
+  flex: 0 0 auto;
+  overflow-x: auto;
+  .coupon-item {
+    position: relative;
+    margin-right: 10px;
+  }
+}
+</style>

src/packages/coupon/doc.md

@@ -0,0 +1,92 @@
+# Coupon 优惠券
+
+## 基本用法
+
+```html
+<nut-coupon 
+  type="1" 
+  cText1="每满10减1" 
+  cText2="仅可购买京贴测试商品" 
+  state="0"
+  @click="handleClick()" 
+/>
+```
+
+## 京贴券
+
+```html
+<nut-coupon 
+  type="1" 
+  cText1="每满10减1" 
+  cText2="仅可购买京贴测试商品" 
+  state="0"
+  @click="handleClick()" 
+/>
+```
+
+```javascript
+export default {
+  methods: {
+    handleClick() {
+      this.$toast.text('很抱歉，没抢到~~');
+    }
+  }
+};
+```
+
+## 品类券无图
+
+```html
+<nut-coupon 
+  type="2" 
+  discount="2"
+  cText1="满49元可用" 
+  cText2="仅可购买年货节头号京贴活动商品" 
+  state="0"
+  @click="handleClick()" 
+/>
+```
+
+```javascript
+export default {
+  methods: {
+    handleClick() {
+      this.$toast.text('很抱歉，没抢到~~');
+    }
+  }
+};
+```
+
+## 品类券有图
+
+```html
+<nut-coupon 
+  type="2" 
+  discount="2"
+  cText1="满49元可用" 
+  cText2="仅可购买年货节头号京贴活动商品" 
+  cImage="http://m.360buyimg.com/babel/s250x250_jfs/t1/137621/21/15770/49049/5fbe0520E043b4ce5/f8a1e0e877908389.jpg"
+  state="0"
+  @click="handleClick()" 
+/>
+```
+```javascript
+export default {
+  methods: {
+    handleClick() {
+      this.$toast.text('很抱歉，没抢到~~');
+    }
+  }
+};
+```
+
+### Prop
+
+| 字段              | 说明                                       | 类型    | 默认值   |
+| ----------------- | ------------------------------------------ | ------- | -------- |
+| type         | 优惠券品类类型                              | String   | 1：普通、2：满减 | 
+| discount     | 优惠券品类额度金额                           | String  | -       | 
+| cText1       | 优惠券第一行文字                            | String   | -       | 
+| cText2       | 优惠券第二行文字                            | String   | -       | 
+| cImage       | 优惠券图片                                 | Boolean  | -       | 
+| state        | 优惠券状态（0:未领取;  1: 已领取;  2: 已抢光） | Boolean  | 0       |

src/packages/coupon/index.js

@@ -0,0 +1,8 @@
+import Coupon from './coupon.vue';
+import './coupon.scss';
+
+Coupon.install = function(Vue) {
+  Vue.component(Coupon.name, Coupon);
+};
+
+export default Coupon;

types/nutui.d.ts

@@ -88,3 +88,4 @@ export declare class Collapse extends UIComponent {}
 export declare class Luckycard extends UIComponent {}
 export declare class NumberKeyboard extends UIComponent {}
 export declare class CollapseItem extends UIComponent {}
+export declare class Coupon extends UIComponent {}