gxd-uni-library-editx 1.0.0

package/src/components/XdOnlineDetail/XdOnlineDetail.vue

@@ -0,0 +1,332 @@
+<template>
+  <view class="xd-online" v-if="info !== null">
+    <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>
+    <xd-title-section bg="#fff" title="取票信息"></xd-title-section>
+    <view class="xd-online__ticket">
+      <view class="xd-online__ticket-code" v-if="info['ticket_code']">
+        <view class="xd-online__ticket-code-input">{{info['ticket_code']}}</view>
+      </view>
+      <view class="xd-online__ticket-qrcode" v-if="info['ticket_qr_code']">
+        <image :src="info['ticket_qr_code']" mode="scaleToFill"></image>
+      </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="订单信息"></xd-title-section>
+    <view class="xd-online__order">
+      <view v-for="(item,index) in getOrderInfo" :key="index">
+        <view>{{item.label}}</view>
+        <view v-if="!item.unit">{{item.value}}</view>
+        <view v-else class="xd-online__order-price">
+          <xd-unit
+            :price="info['total_price']"
+            :color="$mainColor"
+            :font-size="26"
+            :iocn-size=".35"
+            font-weight="normal"
+          ></xd-unit>
+          <view v-if="item['status'] === '3007' || item['status'] === '3008'">
+            <xd-button size="small" radius="10rpx" @click="goToPay" btn-type="primary">去付款</xd-button>
+          </view>
+        </view>
+      </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>
+</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";
+
+  /**
+   * XdOnlineDetail
+   * @description 在线选座订单详情
+   * @event {Function} onPay 点击确认支付 参数：info
+   */
+
+  export default {
+    name: "XdOnlineDetail",
+    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",
+          seats_name: ['2排5座', '2排6座'],
+          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.购票选座线上扣点与线下扣点存在差异，请知晓',
+            ]
+          },
+          ticket_qr_code: "http://sandbox-c.jufubao.cn/web/pb/qrcode/image?content=",
+          ticket_code: "取票码:863109",
+          status_name: "支付完成",
+          placed_time: "2021-01-05 09:17:04", //出票时间
+          ticket_count: 2, //购票数量
+          total_price: 180, //订单总价
+          phone: "15110208397", //购票手机号
+          status: "3007", //订单状态 3007，3008（需要去支付）
+        }
+      }
+    },
+    computed:{
+      getOrderInfo(){
+        if(this.info===null) return [];
+        return [
+          {label: '订单编号：', value: this.info['order_id']},
+          {label: '购票时间：', value: this.info['placed_time']},
+          {label: '购票数量：', value: `${this.info['ticket_count']}张`},
+          {label: '订单总价：', value: this.info['total_price'], unit: true, status: this.info['status']},
+          {label: '订票手机：', value: this.info['phone']},
+          {label: '订单状态：', value: this.info['status_name']},
+        ]
+      }
+    },
+    created() {
+      this.getOrder();
+    },
+    methods: {
+      getOrder() {
+        this.$emit('onGetOrder', (order) => {
+          if (order === null) this.info = this.$xdUniHelper.cloneDeep(this.testData);
+          else {
+            this.info = order;
+          }
+          console.log('onGetOrder', order)
+        });
+      },
+
+      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;
+
+      &-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);
+          }
+        }
+      }
+    }
+
+    &__ticket {
+      background: #fff;
+      padding: unit(40, rpx) 0;
+
+      &-code {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &-input {
+          background: #eee;
+          font-size: @xd-font-size-lg;
+          border-radius: unit(35, rpx);
+          height: unit(70, rpx);
+          text-align: center;
+          line-height: unit(70, rpx);
+          padding: 0 unit(35, rpx);
+          margin-bottom: unit(30, rpx);
+        }
+      }
+
+      &-qrcode {
+        height: unit(350, rpx);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        image {
+          width: unit(350, rpx);
+          height: unit(350, rpx);
+        }
+      }
+    }
+
+    &__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);
+      }
+    }
+
+    &__order {
+      background: #fff;
+      padding: unit(20, rpx) unit(20, rpx) 0;
+      & > view {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        font-size: @xd-font-size-base;
+        height: unit(50,rpx);
+
+        & > view:first-child {
+          flex-shrink: 0;
+        }
+
+        & > view:last-child {
+          flex: 1;
+          width: 0;
+          color: #666;
+        }
+      }
+
+      &-price {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      &-topay {
+        position: absolute;
+        top: unit(-6, rpx);
+        right: 0;
+
+        /deep/ .xd-button {
+          height: unit(50, rpx);
+          line-height: unit(48, rpx);
+          padding: 0 unit(20, rpx);
+          font-size: @xd-font-size-sm;
+        }
+      }
+
+    }
+
+    &__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);
+      }
+    }
+
+
+  }
+</style>

package/src/components/XdOnlinePay/XdOnlinePay.vue

@@ -0,0 +1,349 @@
+<template>
+  <view class="xd-online" v-if="info !== null">
+    <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__pay">
+      <view>
+        <view>我的金元宝：</view>
+        <view>
+          <xd-unit :price="info['yue']"></xd-unit>
+        </view>
+      </view>
+      <view>
+        <view>购票张数：</view>
+        <view>
+          <text :style="{color:$mainColor}">{{info['ticket_count']}}</text>
+          <text> 张</text>
+        </view>
+      </view>
+      <view>
+        <view>订单总额：</view>
+        <view>
+          <xd-unit :price="info['total_price']"></xd-unit>
+        </view>
+      </view>
+      <view>
+        <view>金元宝抵扣：</view>
+        <view class="xd-online__pay-yue">
+          <view>
+            <input
+              class="xd-input"
+              type="number"
+              v-model="yue"
+              confirm-type="done"
+              @input="handleInput"
+              @confirm="handleInput"
+            >
+          </view>
+          <xd-radio v-model="wxGoldSelected" @change="handleChange"></xd-radio>
+        </view>
+      </view>
+      <view v-if="wxPayPrice > 0">
+        <view>微信支付：</view>
+        <view>
+          <xd-unit :price="wxPayPrice" unit="元" :is-show-icon="false"></xd-unit>
+        </view>
+      </view>
+    </view>
+    <view class="xd-online__btn-block"></view>
+    <view class="xd-online__btn">
+      <view class="xd-online__btn-bottom">
+        <xd-button type="primary" radius="10rpx" @click="goToPay">结算</xd-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdRadio from "@/components/XdRadio/XdRadio";
+
+  /**
+   * XdOnlinePay
+   * @description 在线选座支付
+   *
+   * @property {Number} bottom 顶部到内容区域距离（备注可以从XdLayout插件done事件中获取到）
+   *
+   * @event {Function} onPay 点击确认支付 参数：info， wx(微信支付金额)，price(支付元宝数量)
+   */
+
+  export default {
+    name: "XdOnlinePay",
+    components:{
+      XdRadio,
+      XdUnit,
+      XdButton
+    },
+    props: {
+      bottom: {
+        type: Number,
+      },
+    },
+    data(){
+      return {
+        info: null,
+        wxSelected: true,
+        wxGoldSelected: false,
+        yue: '',
+        wxPayPrice: 0,
+        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: "长津湖",
+          yue: 30, //我的金元宝
+        }
+      }
+    },
+    computed:{
+    },
+    created() {
+      this.getOrder();
+    },
+    methods: {
+      setTimePrice(yue, wxPayPrice){
+        if(this.timeer) {
+          clearTimeout(this.timeer);
+          this.timeer = null;
+        }
+        this.timeer = setTimeout(()=>{
+          this.yue = yue;
+          this.wxPayPrice = wxPayPrice;
+        }, 50)
+      },
+      handleChange(){
+        if(this.wxGoldSelected) {
+          if(this.yue > 0) {
+            let params = {
+              detail: {
+                value: this.yue
+              }
+            };
+            this.handleInput(params);
+          }
+          else {
+            if (this.info['total_price'] <= this.info.yue) {
+              this.setTimePrice(this.info['total_price'], 0);
+            } else {
+              this.setTimePrice(this.info.yue,this.cutPrice(this.info['total_price'] , this.info.yue));
+            }
+          }
+        }
+        else {
+          this.setTimePrice(this.yue, this.info['total_price']);
+        }
+      },
+
+      cutPrice(num1,num2){
+        return this.$xdUniHelper.cutFloatNumber(num1, num2)
+      },
+
+      handleInput(e){
+        if (e.detail.value === '') {
+          this.setTimePrice('', this.info['total_price']);
+          return;
+        }
+        let price = Number(e.detail.value);
+
+        if(this.wxGoldSelected) {
+          //余额小于订单总额
+          if(this.info['yue'] < this.info['total_price']){
+            console.log('handleInput < ', price, this.info['total_price'], this.info['yue']);
+            if(price <= this.info['yue']) {
+              this.setTimePrice(price, this.cutPrice(this.info['total_price'],price));
+            }
+            else if(price > this.info['total_price']){
+              if(this.info['yue'] < this.info['total_price']) {
+                this.setTimePrice(this.info['yue'], this.cutPrice(this.info['total_price'] , this.info['yue']));
+              }
+              else{
+                this.setTimePrice(this.info['total_price'], 0);
+              }
+
+              console.log(2, price <= this.info['yue'])
+            }
+            else {
+              this.setTimePrice(this.info['yue'], this.cutPrice(this.info['total_price'] , this.info['yue']));
+              console.log(3)
+            }
+
+          }
+          //余额大于订单总额
+          else{
+            if(price > this.info['total_price']) {
+              this.setTimePrice(this.info['total_price'], 0);
+            }
+            else{
+              this.setTimePrice(price, this.cutPrice(this.info['total_price'], price));
+            }
+          }
+        }
+      },
+
+      getOrder() {
+        this.$emit('onGetOrder', (order) => {
+          if (order === null) this.info = this.$xdUniHelper.cloneDeep(this.testData);
+          else {
+            this.info = order;
+          }
+          this.handleChange(false);
+          console.log('onGetOrder', order)
+        });
+      },
+
+      toSeatsStr(val) {
+        if(!val) val = [];
+        return `${val.join(' | ')}`;
+      },
+
+      goToPay() {
+        this.$emit('onPay', {
+          info: this.info,
+          wx: this.wxPayPrice,
+          price: this.cutPrice(this.info['total_price'] , this.wxPayPrice)
+        })
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-online {
+    &__content {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: unit(20, rpx);
+      color: #666;
+
+      &-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);
+          }
+        }
+      }
+    }
+
+    &__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(100, rpx);
+      padding: 0 unit(20, rpx);
+      .safe-area();
+
+      &-bottom {
+        margin-top: unit(20,rpx);
+      }
+
+      &-block {
+        height: unit(120, rpx);
+        width: 100%;
+      }
+    }
+
+    &__pay {
+      background: #fff;
+      margin-top: unit(20,rpx);
+
+      & > view {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: unit(20, rpx);
+        border-bottom: 1px solid #efefef;
+
+        & > view:first-child {
+          flex-shrink: 0;
+        }
+
+        & > view  > text:last-child {
+          padding-left: unit(10,rpx);
+        }
+      }
+
+      &-yue {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex: 1;
+        width: 0;
+
+      }
+    }
+
+  }
+
+  .xd-input {
+    background: #efefef;
+    border-radius: unit(25,rpx);
+    height: unit(50,rpx);
+    padding: 0 unit(25,rpx);
+  }
+</style>