gxd-uni-library-editx 1.0.0

package/src/components/XdNumberUni/XdNumberUni.vue

@@ -0,0 +1,270 @@
+<template>
+	<view class="uni-numbox" :style="{width: width + 'rpx'}">
+		<view @click="_calcValue('minus')" class="uni-numbox__minus uni-cursor-point">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= uiMin || disabled }">-</text>
+		</view>
+		<input
+      :disabled="disabled"
+      @focus="_onFocus"
+      @blur="_onBlur"
+      class="uni-numbox__value"
+      :class="{disabled: disabled}"
+      type="number"
+			v-model="inputValue" />
+		<view @click="_calcValue('plus')" class="uni-numbox__plus uni-cursor-point">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= uiMax || disabled }">+</text>
+		</view>
+	</view>
+</template>
+<script>
+	/**
+	 * XdNumberUni 数字输入框
+	 * @description 带加减按钮的数字输入框
+	 * @property {Number} value 输入框当前值
+	 * @property {Number} min 最小值
+	 * @property {Number} max 最大值
+	 * @property {Number} step 每次点击改变的间隔大小
+	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
+	 * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
+	 */
+
+	export default {
+		name: "XdNumberUni",
+		props: {
+			value: {
+				type: [Number, String],
+				default: 1
+			},
+      width: {
+        type: [Number, String],
+        default: 180
+      },
+			min: {
+				type: Number | String,
+				default: 0
+			},
+			max: {
+				type: Number | String,
+				default: 100
+			},
+			step: {
+				type: Number,
+				default: 1
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				inputValue: 0,
+        uiMin: 0,
+        uiMax: 0,
+			};
+		},
+		watch: {
+			value(val) {
+				this.inputValue = +val;
+			},
+      min(val){
+			  if(this.$xdUniHelper.checkVarType(val) === 'string') {
+          this.uiMin = Number(val);
+        }else{
+          this.uiMin = val;
+        }
+      },
+      max(val) {
+        if (this.$xdUniHelper.checkVarType(val) === 'string') {
+          this.uiMax = Number(val);
+        } else {
+          this.uiMax = val;
+        }
+      }
+		},
+		created() {
+
+      if (this.$xdUniHelper.checkVarType(this.min) === 'string') {
+        this.uiMin = Number(this.min);
+      }
+      else {
+        this.uiMin = this.min;
+      }
+
+      if (this.$xdUniHelper.checkVarType(this.max) === 'string') {
+        this.uiMax = Number(this.max);
+      }
+      else {
+        this.uiMax = this.max;
+      }
+      this.inputValue = +this.value;
+		},
+		methods: {
+			_calcValue(type) {
+			  console.log('_calcValue',type)
+				if (this.disabled) {
+					return;
+				}
+				const scale = this._getDecimalScale();
+				let value = this.inputValue * scale;
+				let step = this.step * scale;
+				if (type === "minus") {
+					value -= step;
+					if (value < (this.uiMin * scale)) {
+						return;
+					}
+					if (value > (this.uiMax * scale)) {
+						value = this.uiMax * scale
+					}
+				}
+
+				if (type === "plus") {
+					value += step;
+					if (value > (this.uiMax * scale)) {
+						return;
+					}
+					if (value < (this.uiMin * scale)) {
+						value = this.uiMin * scale
+					}
+				}
+
+				this.inputValue = (value / scale).toFixed(String(scale).length - 1);
+				this.$emit("input", +this.inputValue);
+				this.$emit("change", +this.inputValue);
+			},
+			_getDecimalScale() {
+
+				let scale = 1;
+				// 浮点型
+				if (~~this.step !== this.step) {
+					scale = Math.pow(10, String(this.step).split(".")[1].length);
+				}
+				return scale;
+			},
+			_onBlur(event) {
+				this.$emit('blur', event)
+				let value = event.detail.value;
+				if (!value) {
+          this.$emit("input", '');
+          this.$emit("change", '');
+					return;
+				}
+				value = +value;
+				if (value > this.uiMax) {
+					value = this.uiMax;
+				} else if (value < this.uiMin) {
+					value = this.uiMin;
+				}
+				const scale = this._getDecimalScale();
+				this.inputValue = value.toFixed(String(scale).length - 1);
+				this.$emit("input", +this.inputValue);
+				this.$emit("change", +this.inputValue);
+			},
+			_onFocus(event) {
+				this.$emit('focus', event)
+			}
+		}
+	};
+</script>
+<style lang="scss" scoped>
+	$box-height: 50rpx;
+	/* #ifdef APP-NVUE */
+	$box-line-height: 35px;
+	/* #endif */
+	$box-line-height: 42rpx;
+	$box-width: 50rpx;
+
+	.uni-numbox {
+
+		/* #ifndef APP-NVUE */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+		/* #endif */
+		flex-direction: row;
+		height: $box-height;
+		line-height: $box-height;
+	}
+
+	.uni-cursor-point {
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-numbox__value {
+		background-color: $uni-bg-color;
+		height: $box-height;
+		text-align: center;
+		font-size: $uni-font-size-lg;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: $uni-border-color;
+		border-left-width: 0;
+		border-right-width: 0;
+    box-sizing: border-box;
+    flex: 1;
+    width: 0;
+
+    &.disabled {
+      color: #bbb;
+    }
+
+	}
+
+	.uni-numbox__minus {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: $box-width;
+		height: $box-height;
+		// line-height: $box-line-height;
+		// text-align: center;
+		font-size: 28rpx;
+		color: $uni-text-color;
+		background-color: $uni-bg-color-grey;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: $uni-border-color;
+		border-top-left-radius: $uni-border-radius-base;
+		border-bottom-left-radius: $uni-border-radius-base;
+		border-right-width: 0;
+    box-sizing: border-box;
+    flex-shrink: 0;
+	}
+
+	.uni-numbox__plus {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: $box-width;
+		height: $box-height;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: $uni-border-color;
+		border-top-right-radius: $uni-border-radius-base;
+		border-bottom-right-radius: $uni-border-radius-base;
+		background-color: $uni-bg-color-grey;
+		border-left-width: 0;
+    box-sizing: border-box;
+    flex-shrink: 0;
+	}
+
+	.uni-numbox--text {
+		font-size: 32rpx;
+		color: $uni-text-color;
+	}
+
+	.uni-numbox--disabled {
+		color: $uni-text-color-disable;
+		/* #ifdef H5 */
+		cursor: not-allowed;
+		/* #endif */
+	}
+</style>

package/src/components/XdNumberUni/readme.md

@@ -0,0 +1,42 @@
+
+
+## XdNumberUni 数字输入框
+> **组件名：xd-number-uni**
+> 代码块： `XdNumberUni`
+
+
+带加减按钮的数字输入框。
+
+### 基本用法
+
+在 ``template`` 中使用组件
+
+```html
+<xd-number-uni></xd-number-uni>
+<xd-number-uni v-model="vModelValue" />
+<xd-number-uni :min="0" :max="9"></xd-number-uni>
+<xd-number-uni @change="bindChange"></xd-number-uni>
+```
+
+## API
+
+### NumberBox Props
+
+|属性名				|类型		|默认值	|说明										|
+|:-:					|:-:		|:-:		|:-:										|
+|value/v-model|Number	|0			|输入框当前值						|
+|min					|Number	|0			|最小值									|
+|max					|Number	|100		|最大值									|
+|step					|Number	|1			|每次点击改变的间隔大小	|
+|disabled			|Boolean|false	|是否为禁用状态					|
+|width			|Number|180	|区域插件宽度				|
+
+### NumberBox Events
+
+|事件名称	|说明																				|返回值	|
+|:-:		|:-:																				|:-:		|
+|change	|输入框值改变时触发的事件，参数为输入框当前的 value	|-			|
+|focus	|输入框聚焦时触发的事件，参数为 event 对象	|-			|
+|blur	|输入框失焦时触发的事件，参数为 event 对象	|-			|
+
+

package/src/components/XdOnlineConfirm/XdOnlineConfirm.vue

@@ -0,0 +1,385 @@
+<template>
+  <view class="xd-online" v-if="info !== null">
+    <view class="xd-online__title">
+      <template v-if="timeStr">
+        <xd-font-icon size="36" icon="iconshijian"></xd-font-icon>
+        <text>支付剩余时间:{{timeStr}}</text>
+      </template>
+    </view>
+    <view class="xd-online__content" :style="'background:#fff' ">
+      <view class="xd-online__content-image">
+        <image :src="info['film_poster']" mode="scaleToFill"></image>
+      </view>
+      <view class="xd-online__content-text">
+        <view>
+          <text>影片：</text>
+          <text>{{info['film_name']}}</text>
+        </view>
+        <view>
+          <text></text>
+          <xd-tag type="primary" size="small" inverted="inverted">{{info['show_version']}}</xd-tag>
+        </view>
+        <view>
+          <text>影厅：</text>
+          <text>{{info['hall_name']}}</text>
+        </view>
+        <view>
+          <text>场次：</text>
+          <text>{{info['show_time']}}</text>
+        </view>
+        <view>
+          <text>座位：</text>
+          <text :style="'padding-right:10rpx; color:' + $mainColor">{{toSeatsStr(info['seats_name'])}}</text>
+        </view>
+      </view>
+    </view>
+    <view class="xd-online__tips">
+      <view class="xd-online__tips-icon">
+        <view>
+          <xd-font-icon size="30" icon="icongerenzhongxinchufabaocuo" color="red"></xd-font-icon>
+          <text>不支持退票</text>
+        </view>
+        <view>
+          <xd-font-icon size="30" icon="icongerenzhongxinchufabaocuo" color="red"></xd-font-icon>
+          <text>不支持改签</text>
+        </view>
+      </view>
+      <view class="xd-online__tips-price" v-if="info['total_price'] && info['ticket_count']">
+        <text>共 {{info['ticket_count']}} 张</text>
+        <xd-unit
+          :price="info['total_price']"
+          :color="$mainColor"
+          :font-size="26"
+          :iocn-size=".35"
+          font-weight="normal"
+        ></xd-unit>
+      </view>
+    </view>
+    <view class="xd-online__phone">
+      <xd-font-icon size="80" icon="iconshoujizhifu" color="#55b2f8"></xd-font-icon>
+      <view class="xd-online__phone-text">
+        <view>取票手机号</view>
+        <view>{{info['phone']}}</view>
+      </view>
+    </view>
+    <xd-title-section bg="#fff" title="影院信息"></xd-title-section>
+    <view class="xd-online__cinema">
+      <view>{{info['cinema_name']}}</view>
+      <view>地址：{{info['cinema_address']}}</view>
+    </view>
+    <xd-title-section bg="#fff" :title="info['notice']['title']"></xd-title-section>
+    <view class="xd-online__notice">
+      <view v-for="(item,index) in info['notice']['content']" :key="index">{{item}}</view>
+    </view>
+    <view class="xd-online__btn-block"></view>
+    <view class="xd-online__btn">
+      <view class="xd-online__btn-top">
+        <view>应付</view>
+        <view>
+          <xd-unit
+            :price="info['total_price']"
+            :color="$mainColor"
+            :font-size="36"
+            :iocn-size="0.5"
+          ></xd-unit>
+        </view>
+      </view>
+      <view class="xd-online__btn-bottom">
+        <xd-button type="primary" radius="10rpx" @click="goToPay">确认支付</xd-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdTitleSection from "@/components/XdTitleSection/XdTitleSection";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdTag from "@/components/XdTag/XdTag";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdButton from "@/components/XdButton/XdButton";
+
+  /**
+   * XdOnlineConfirm
+   * @description 在线选座确认订单
+   *
+   * @property {Number} bottom 顶部到内容区域距离（备注可以从XdLayout插件done事件中获取到）
+   *
+   * @event {Function} onPay 点击确认支付 参数：info
+   */
+
+  export default {
+    name: "XdOnlineConfirm",
+    components: {
+      XdTitleSection,
+      XdFontIcon,
+      XdTag,
+      XdUnit,
+      XdButton
+    },
+    props: {
+      bottom: {
+        type: Number,
+      },
+    },
+    data() {
+      return {
+        info: null,
+        timeStr: '',
+        timeer: null,
+
+        /**
+         * @description 最小数据列
+         */
+        testData: {
+          order_id: "402953720356552704",
+          show_time: " 2021-10-14 12:50:00",
+          film_poster: "https://gw.alicdn.com/i3/O1CN01nCaVI01Lt5lvXF92X_!!6000000001356-0-alipicbeacon.jpg_480x480Q30s150.jpg",
+          total_price: 180,
+          ticket_count: 2,
+          seats_name: ['2排5座', '2排6座'],
+          phone: '15110208397',
+          pay_time_leave: 600,
+          show_version: "中文 4D",
+          hall_name: "3号4DX厅（儿童需购票）",
+          film_name: "长津湖",
+          cinema_address: "朝阳区慈云寺北里209号未来汇2层",
+          cinema_name: "北京耀莱成龙影城（慈云寺店）",
+          notice: {
+            title: "购票须知",
+            content: [
+              '1.请核对订单，影票及卖品售出后不可退换。',
+              '2.影卡支付和码券支付不可同时使用。',
+              '3.影卡或码券未支付的部分可以用现金补足。',
+              '4.最多只能使用4张卡同时支付。（所使用的卡类型必须相同）',
+              '5.购票选座线上扣点与线下扣点存在差异，请知晓。',
+            ]
+          }
+        }
+      }
+    },
+    created() {
+      this.getOrder();
+    },
+    methods: {
+      getOrder() {
+        this.$emit('onGetOrder', (order) => {
+          if (order === null) this.info = this.$xdUniHelper.cloneDeep(this.testData);
+          else {
+            this.info = order;
+          }
+          this.setInval(this.info['pay_time_leave']);
+          console.log('onGetOrder', order)
+        });
+      },
+
+      setInval(time) {
+        if (time === 0) {
+          this.timeStr = '00分00秒'
+        } else {
+          this.timeer = setInterval(() => {
+            if (time === 0) {
+              this.timeStr = '00分00秒';
+              clearInterval(this.timeer);
+            } else {
+              time--;
+              let f = Math.floor(time / 60);
+              f = f < 10 ? ('0' + f) : f;
+              let m = time % 60;
+              m = m < 10 ? ('0' + m) : m;
+              this.timeStr = `${f}分${m}秒`;
+            }
+          }, 1000);
+        }
+      },
+
+      toSeatsStr(val) {
+        return `${val.join(' | ')}`;
+      },
+
+      goToPay() {
+        this.$emit('onPay', this.info)
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-online {
+    &__title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: unit(30, rpx) 0;
+      font-size: @xd-font-size-base+ 2;
+      min-height: unit(40, rpx);
+
+      & > text {
+        padding: 0 unit(6, rpx);
+      }
+    }
+
+    &__content {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: unit(20, rpx);
+      color: #666;
+      border-bottom: 1px solid #e8e8e8;
+
+      &-image {
+        margin-right: unit(20, rpx);
+        width: unit(200, rpx);
+        height: unit(264, rpx);
+        box-shadow: 0 0 unit(10, rpx) rgba(0, 0, 0, .2);
+
+        & > image {
+          max-width: 100%;
+          max-height: 100%;
+        }
+      }
+
+      &-text {
+        flex: 1;
+
+        & > view {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          font-size: @xd-font-size-base;
+          padding-bottom: unit(10, rpx);
+          color: #333;
+
+          & > text:first-child {
+            color: #666;
+            min-width: unit(80, rpx);
+          }
+        }
+      }
+    }
+
+    &__tips {
+      padding: unit(10, rpx) unit(20, rpx);
+      background: #fff;
+      font-size: @xd-font-size-sm;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      &-icon {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        & > view {
+          padding-right: unit(20, rpx);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          & > text {
+            padding: 0 unit(6, rpx);
+          }
+        }
+      }
+
+      &-price {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        & > text {
+          padding: 0 unit(6, rpx);
+        }
+      }
+    }
+
+    &__phone {
+      margin-top: unit(20, rpx);
+      padding: unit(20, rpx);
+      background: #fff;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      &-text {
+        margin-left: unit(10, rpx);
+        font-size: @xd-font-size-base;
+
+        & > view:first-child {
+          font-size: @xd-font-size-base + 2;
+        }
+      }
+    }
+
+    &__cinema {
+      background: #fff;
+      padding: unit(20, rpx) unit(20, rpx);
+      font-size: @xd-font-size-sm;
+      color: #666;
+
+      & > view:first-child {
+        font-size: @xd-font-size-lg;
+        color: #111;
+        padding-bottom: unit(10, rpx);
+      }
+    }
+
+    &__notice {
+      background: #fff;
+      padding: unit(20, rpx) unit(20, rpx) unit(0, rpx);
+      font-size: @xd-font-size-sm;
+      color: #666;
+      line-height: @xd-font-size-sm * 1.2;
+
+      & > view {
+        padding-bottom: unit(20, rpx);
+      }
+    }
+
+    &__btn {
+      position: fixed;
+      box-shadow: 0 0 unit(10, rpx) rgba(100, 100, 100, 0.1);
+      right: 0;
+      left: 0;
+      bottom: 0;
+      border-top: 1px solid #e8e8e8;
+      background: #fff;
+      height: unit(180, rpx);
+      padding: 0 unit(20, rpx);
+      .safe-area();
+
+
+      &-top {
+        display: flex;
+        height: unit(80, rpx);
+        line-height: unit(80, rpx);
+        padding: 0 unit(20, rpx);
+        justify-content: space-between;
+        align-items: center;
+        font-size: @xd-font-size-lg;
+
+        > view:last-child {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+
+          > * {
+            padding: 0 unit(10, rpx);
+            font-size: @xd-font-size-big + 5;
+            font-weight: bold;
+          }
+        }
+      }
+
+      &-bottom {
+        padding: 0 unit(20, rpx) unit(20, rpx);
+      }
+
+      &-block {
+        height: unit(180, rpx);
+        width: 100%;
+      }
+    }
+
+  }
+</style>