add ExpressWay component

packages/express-way/Option.vue

@@ -0,0 +1,38 @@
+<template>
+  <van-cell class="van-express-way-option" @click="$emit('change')">
+    <van-radio :name="data.express_type" :value="currentExpressWay" />
+    <div class="van-express-way-option__content">
+      <h3 class="van-express-way-option__title">
+        <span>{{ data.postage_title }}</span>
+        <span>{{ data.postage }}</span>
+      </h3>
+      <p>{{ data.postage_desc }}</p>
+      <div class="van-express-way-option__warn" v-if="data.postage_warn_desc">{{ data.postage_warn_desc }}</div>
+    </div>
+  </van-cell>
+</template>
+
+<script>
+import Cell from '../cell';
+import Radio from '../radio';
+
+export default {
+  name: 'van-express-way-option',
+
+  components: {
+    [Cell.name]: Cell,
+    [Radio.name]: Radio
+  },
+
+  props: {
+    currentExpressWay: {
+      type: Number,
+      required: true
+    },
+    data: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>

packages/express-way/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <van-cell class="van-express-way">
+    <van-actionsheet v-if="computedEditable" v-model="showActionsheet" :title="actionsheetTitle" >
+      <van-cell-group>
+        <van-express-way-option
+          v-for="(item, index) in computedList"
+          :key="item.express_type"
+          :data="item"
+          :currentExpressWay="value"
+          @change="onSelectExpressWay(item, index)"
+        />
+      </van-cell-group>
+    </van-actionsheet>
+    <van-cell :title="cellTitle" :isLink="computedEditable" @click="showActionsheet = computedEditable">
+      <p class="van-express-way__fee">{{ currentOption.postage }}</p>
+      <p class="van-express-way__type">{{ currentOption.postage_title }}</p>
+    </van-cell>
+  </van-cell>
+</template>
+
+<script>
+import Option from './Option.vue';
+import Actionsheet from '../actionsheet';
+import Cell from '../cell';
+import CellGroup from '../cell-group';
+
+export default {
+  name: 'van-express-way',
+
+  components: {
+    [Option.name]: Option,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [Actionsheet.name]: Actionsheet
+  },
+
+  props: {
+    value: {
+      type: Number,
+      required: true
+    },
+    expressList: {
+      type: Array,
+      required: true
+    },
+    cellTitle: {
+      type: String,
+      default: '配送方式'
+    },
+    actionsheetTitle: {
+      type: String,
+      default: '配送方式'
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      showActionsheet: false
+    };
+  },
+
+  computed: {
+    computedList() {
+      return this.expressList.map(item => ({
+        ...item,
+        postage: this.calcPostage(item.postage)
+      }));
+    },
+
+    computedEditable() {
+      return this.expressList && this.expressList.length >= 2 && this.editable;
+    },
+
+    currentOption() {
+      for (let i = 0; i < this.computedList.length; i++) {
+        if (this.computedList[i].express_type === this.value) {
+          return this.computedList[i];
+        }
+      }
+      return {};
+    }
+  },
+
+  methods: {
+    onSelectExpressWay(item, index) {
+      this.showActionsheet = false;
+      this.$emit('input', item.express_type);
+      this.$emit('change', item, index);
+    },
+
+    calcPostage(postage) {
+      return postage === 0 ? '免运费' : '¥' + (postage / 100).toFixed(2);
+    }
+  }
+};
+</script>

packages/index.js

@@ -11,6 +11,7 @@ import CheckboxGroup from './checkbox-group';
 import Col from './col';
 import DatetimePicker from './datetime-picker';
 import Dialog from './dialog';
+import ExpressWay from './express-way';
 import Field from './field';
 import Icon from './icon';
 import ImagePreview from './image-preview';
@@ -53,6 +54,7 @@ const components = [
   CheckboxGroup,
   Col,
   DatetimePicker,
+  ExpressWay,
   Field,
   Icon,
   Loading,
@@ -107,6 +109,7 @@ export {
   Col,
   DatetimePicker,
   Dialog,
+  ExpressWay,
   Field,
   Icon,
   ImagePreview,

packages/vant-css/src/express-way.css

@@ -0,0 +1,58 @@
+.van-express-way {
+  padding: 0;
+
+  &__fee,
+  &__type {
+    color: #666;
+    line-height: 1.5;
+  }
+
+  &__fee {
+    font-size: 14px;
+  }
+
+  &__type {
+    font-size: 12px;
+  }
+
+  .van-actionsheet__content {
+    max-height: 290px;
+    overflow-y: auto;
+  }
+
+  &-option {
+    position: relative;
+    padding: 14px 15px 14px 0;
+    
+    .van-radio {
+      top: 50%;
+      left: 0;
+      margin-top: -11px;
+      position: absolute;
+    }
+
+    &__content {
+      padding-left: 30px;
+
+      p {
+        color: #999;
+        font-size: 12px;
+        line-height: 16px;
+      }
+    }
+
+    &__title {
+      span {
+        vertical-align: middle;
+
+        &:first-child {
+          margin-right: 5px;
+        }
+      }
+    }
+
+    &__warn {
+      color: #f09000;
+    }
+  }
+}

packages/vant-css/src/index.css

@@ -32,3 +32,4 @@
 @import './swipe.css';
 @import './notice-bar.css';
 @import './switch-cell.css';
+@import './express-way.css';