gxd-uni-library-editx 1.0.0

package/src/dome/dome/cashier/check_cashier.vue

@@ -0,0 +1,469 @@
+<template>
+  <xd-layout
+    title="收银台(体检)"
+    background="#f8f8f8"
+    :show-bar="true"
+    :show-footer="false"
+    @back="back"
+    @done="handleDone"
+    :bottom-height="100"
+  >
+    <view class="app-body">
+      <view class="app-body__product">
+        <view class="app-body__product-org">
+          <view>
+            <image src="https://img.li91.com/m/0/1541663983/57a17d381f94c.jpg"></image>
+          </view>
+          <view>廊坊美年大健康（廊坊分院）</view>
+          <view>
+            <view>
+              <xd-font-icon icon="icondiqu" color="#666"></xd-font-icon>
+            </view>
+            <view>约48.07km</view>
+          </view>
+        </view>
+        <view class="app-body__product-package">
+          <view>
+            <image src="https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20210126/26cfc49abbdc33eeb187ca22730b995a.jpg"></image>
+          </view>
+          <view>
+            <view>常规套餐（男女通用）</view>
+            <view>
+              <xd-unit price="300" :font-size="32"></xd-unit>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="app-body__title">预约信息</view>
+      <view class="app-body__form">
+        <view class="app-body__form-item">
+          <xd-label-new label="姓名:" :width="labelWidth">
+            <view class="app-body__form-item-content">
+              <input
+                class="app-body__form-item-input"
+                placeholder-class="app-body__form-item-placeholder"
+                @confirm="doneInput"
+                type="text"
+                confirm-type="done"
+                placeholder="请输入体检者姓名"
+                :adjust-position="true"
+                @input="
+                (e) => {
+                  handleKeyword(e, 'name', 5);
+                }
+              "
+                v-model="name"
+              />
+            </view>
+          </xd-label-new>
+        </view>
+        <view class="app-body__form-item">
+          <xd-label-new label="日期:" :width="labelWidth">
+            <view class="app-body__form-item-content date" @click="dateShow=!dateShow">
+              <view :style="{color: makeTime ? '#333': '#999'}">{{makeTime?makeTime: '请选择体检日期'}}</view>
+              <view>
+                <xd-font-icon icon="iconriqi"></xd-font-icon>
+              </view>
+            </view>
+          </xd-label-new>
+        </view>
+        <view class="app-body__form-item">
+          <xd-label-new label="证件类型:" :width="labelWidth">
+            <view class="app-body__form-item-content">
+              <xd-select
+                :list="typeList"
+                justify-content="space-between"
+                placeholder="请选择证件类型"
+                width="100%"
+                v-model="type"
+              ></xd-select>
+            </view>
+          </xd-label-new>
+        </view>
+        <view class="app-body__form-item">
+          <xd-label-new label="证件号码:" :width="labelWidth">
+            <view class="app-body__form-item-content">
+              <input
+                class="app-body__form-item-input"
+                placeholder-class="app-body__form-item-placeholder"
+                @confirm="doneInput"
+                type="text"
+                confirm-type="done"
+                placeholder="请输入您的证件号码"
+                :adjust-position="true"
+                @input="
+                (e) => {
+                  handleKeyword(e, 'numberId', 5);
+                }
+              "
+                v-model="numberId"
+              />
+            </view>
+          </xd-label-new>
+        </view>
+        <view class="app-body__form-item" v-if="type && type['value'] === 2">
+          <xd-label-new label="出生日期:" :width="labelWidth">
+            <view class="app-body__form-item-content">
+              <xd-select
+                :list="birthDateList"
+                justify-content="space-between"
+                placeholder="请选择出生年月日"
+                contentPrefix="/"
+                width="100%"
+                mode="multiSelector"
+                v-model="birthDate"
+              ></xd-select>
+            </view>
+          </xd-label-new>
+        </view>
+        <view class="app-body__form-item" v-if="type && type['value'] === 2">
+          <xd-label-new label="性别:" :width="labelWidth">
+            <view class="app-body__form-item-content">
+              <xd-select
+                justify-content="space-between"
+                placeholder="请选择性别"
+                width="100%"
+                v-model="sex"
+              ></xd-select>
+            </view>
+          </xd-label-new>
+        </view>
+        <view class="app-body__form-item">
+          <xd-label-new label="婚姻状况:" :width="labelWidth">
+            <view class="app-body__form-item-content">
+              <xd-select
+                justify-content="space-between"
+                placeholder="请选择"
+                width="100%"
+                v-model="wedding"
+              ></xd-select>
+            </view>
+          </xd-label-new>
+        </view>
+        <view class="app-body__form-item">
+          <xd-label-new label="手机号码:" :width="labelWidth">
+            <view class="app-body__form-item-content">
+              <input
+                class="app-body__form-item-input"
+                placeholder-class="app-body__form-item-placeholder"
+                @confirm="doneInput"
+                type="text"
+                confirm-type="done"
+                placeholder="请输入体检者手机号码"
+                :adjust-position="true"
+                @input="
+                (e) => {
+                  handleKeyword(e, 'numberId', 5);
+                }
+              "
+                v-model="phone"
+              />
+            </view>
+          </xd-label-new>
+        </view>
+      </view>
+    </view>
+    <xd-date
+      ref="calendar"
+      :selected="date.selected"
+      :show.sync="dateShow"
+      :clear-date="true"
+      :insert="date.insert"
+      :lunar="date.lunar"
+      :selected-circle="false"
+      :startDate="date.startDate"
+      :endDate="date.endDate"
+      @confirm="confirm"
+      @close="close"
+    >
+    </xd-date>
+    <template slot="footer">
+      <view class="app-body__footer">
+        <view>
+          <text>合计：</text>
+          <xd-unit price="300" :font-size="32" :icon-size="0.40"></xd-unit>
+        </view>
+        <view>
+          <xd-button type="primary"  @click="handlePay">去兑换</xd-button>
+        </view>
+      </view>
+    </template>
+  </xd-layout>
+</template>
+
+<script>
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdLabelNew from "@/components/XdLabelNew/XdLabelNew";
+  import XdSelect from "@/components/XdSelect/XdSelect";
+  import XdDate from "@/components/XdDate/XdDate";
+  import selected from '@/dome/dome/date/selected'
+
+  export default {
+    name: "check_cashier",
+    components: {
+      XdDate,
+      XdSelect,
+      XdLabelNew,
+      XdUnit,
+      XdButton,
+      XdLayout,
+      XdFontIcon
+    },
+    data(){
+      return{
+        top: 0,
+        bottom: 0,
+        labelWidth: 170,
+
+        name: '', //体检这姓名
+        numberId: '', //证件号码
+        type: null, //证件类型
+        phone: '',//手机号码
+        wedding: null, //婚姻状态
+        birthDate: null, //出生年月日
+        sex: null, //性别
+        makeTime: '', //预约日期
+
+        typeList:[
+          {value: 1, label: '身份证'},
+          {value: 2, label: '港澳台证件/护照'},
+        ],
+
+        //时间选中插件
+        selectDate: null, //选中日期对象
+        dateShow: false,
+        date: {
+          lunar: false, //是否显示农历
+          insert: false, //启动弹出层模式
+          selected: [] , //设置预约信息
+        },
+
+        birthDateList: [
+          [
+            {value: 2021, label: '2021'},
+            {value: 2020, label: '2020'},
+            {value: 2019, label: '2019'},
+            {value: 2108, label: '2108'}
+          ],
+          [
+            {value: 1, label: '1'},
+            {value: 2, label: '2'},
+            {value: 3, label: '3'},
+            {value: 4, label: '4'}
+          ],
+          [
+            {value: 1, label: '1'},
+            {value: 2, label: '2'},
+            {value: 3, label: '3'},
+            {value: 4, label: '4'}
+          ]
+        ]
+      }
+    },
+    mounted(){
+      this.$nextTick(()=>{
+        setTimeout(() => {
+          let date = [];
+          selected.result.data.map(item => {
+            date.push({
+              ...item,
+              info: item['isky'],
+              disable: item['isky'] === '不可约'
+            })
+          });
+          //this.$set(this.date, 'date', this.$xdUniHelper.getDate(new Date(),3, '/')['fullDate']);
+          this.$set(this.date, 'startDate', selected.result.data[0].date);
+          this.$set(this.date, 'endDate', selected.result.data[selected.result.data.length - 1].date);
+          this.$set(this.date, 'selected', date);
+        }, 1000)
+      })
+    },
+    methods:{
+      /**
+       * @description 去支付页面
+       */
+      handlePay(){},
+
+      handleOpenDate(){
+        this.dateShow = !this.dateShow;
+
+      },
+
+
+      handleDone({bottom,top, ...res}) {
+        console.log('handleDone', res)
+        this.bottom = bottom;
+        this.top = top;
+      },
+
+      handleKeyword(e, keyword, len) {
+        if (this.timeer) {
+          clearTimeout(this.timeer);
+          this.timeer = null;
+        }
+        this.timeer = setTimeout(() => {
+          this[keyword] = e.detail.value.slice(0, len);
+        }, 200);
+      },
+
+      close() {
+        console.log('弹窗关闭');
+      },
+
+      confirm(e) {
+        console.log('confirm 返回:', e)
+        this.makeTime = e.fulldate.replace(/\-/g, '/');
+        this.selectDate = e;
+      },
+
+      doneInput() {
+        uni.hideKeyboard();
+      },
+
+      back() {
+        this.$xdUniHelper.navigateBack()
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .app-body {
+    padding: unit(20,rpx) unit(20, rpx) 0;
+
+    &__product {
+      border-radius: unit(10, rpx);
+      background: #fff;
+      padding: unit(10,rpx);
+
+      &-org {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom: unit(20,rpx);
+
+
+        & > view:first-child {
+          flex-shrink: 0;
+          width: unit(60,rpx);
+          height: unit(60,rpx);
+          margin-right: unit(10,rpx);
+
+          & > image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        & > view:nth-child(2) {
+          font-size: @xd-font-size-lg;
+          flex: 1;
+          width: 0;
+        }
+
+        & > view:last-child {
+          font-size: @xd-font-size-base;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          flex-shrink: 0;
+          margin-left: unit(10,rpx);
+          color: #999;
+        }
+      }
+
+      &-package {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: #666;
+
+        & > view:first-child {
+          width: unit(168,rpx);
+          height: unit(168,rpx);
+          flex-shrink: 0;
+          margin-right: unit(20,rpx);
+          overflow: hidden;
+          border-radius: unit(10,rpx);
+
+          & > image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        & > view:last-child {
+          flex: 1;
+          width: 0;
+          font-size: @xd-font-size-base + 4;
+
+          & >view:first-child {
+            padding-bottom: unit(20,rpx);
+          }
+        }
+      }
+    }
+
+    &__title {
+      font-size: @xd-font-size-lg;
+      line-height: unit(80,rpx);
+    }
+
+    &__form {
+      border-radius: unit(10, rpx);
+      background: #fff;
+      padding: unit(20, rpx) ;
+
+      &-item {
+        &-content {
+          min-height: unit(80, rpx);
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          border-bottom: 1px solid #ccc;
+
+          &.date {
+            justify-content: space-between;
+            padding: 0 unit(20,rpx);
+            font-size: @xd-font-size-base;
+          }
+        }
+
+        &-placeholder {
+          font-size: @xd-font-size-base;
+          color: #999;
+        }
+
+        &-input {
+          font-size: @xd-font-size-base;
+          color: #333;
+          padding: 0 unit(20,rpx);
+        }
+      }
+
+
+
+
+
+    }
+
+    &__footer {
+      background: #fff;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 unit(20,rpx);
+
+      & > view:first-child {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: @xd-font-size-base;
+      }
+    }
+  }
+</style>

package/src/dome/dome/cashier/success.vue

@@ -0,0 +1,127 @@
+<template>
+  <xd-layout
+    title="订单状态"
+    background="#eee"
+    :show-bar="true"
+    :show-footer="false"
+    @back="back"
+  >
+    <xd-my-success
+      v-if="order_id"
+      :info="info"
+      @onBtn="handleOnBtnClick"
+      @getStatus="getStatus"
+    ></xd-my-success>
+  </xd-layout>
+</template>
+
+<script>
+  import {mapActions} from 'vuex';
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdMySuccess from "@/components/XdMySuccess/XdMySuccess";
+
+  export default {
+    name: "AppCashierSuccess",
+    components: {
+      XdMySuccess,
+      XdLayout
+    },
+    data() {
+      return {
+        order_id: null,
+        info: null
+      }
+    },
+
+    mounted(){
+      this.$nextTick(()=>{
+        let {order_id} = this.$xdUniHelper.parseURL()['params'];
+        this.order_id = order_id;
+      })
+    },
+    methods: {
+      ...mapActions('order', [
+        'getStatusOrder'
+      ]),
+
+      back(){
+        this.$xdUniHelper.navigateBack()
+      },
+
+      handleOnBtnClick({btn,item}){
+        if(btn['value'] === 1) {
+          this.$xdUniHelper.redirectTo({
+            url: this.$settings.index
+          },false)
+        }
+        if(btn['value'] === 2) {
+          this.$xdUniHelper.navigateTo({
+            url: `/main/order/detail?order_id=${this.order_id}`
+          })
+        }
+      },
+
+      /**
+       * @description 获取订单详情，轮询时间使用2n次方递增方式
+       * @param resolve 回调函数
+       */
+      getStatus(resolve){
+        setTimeout(() => {
+          console.log('order', 'reslut');
+          resolve({
+            icon: 'icondingdanwancheng', //iconfont里面的图标 ， 成功=>icondingdanwancheng，失败：icongerenzhongxinchufabaocuo
+            iconSize: 80, //图标大小
+            iconColor: 'red', //图标颜色
+            orderName: '订单已支付成功', //订单状态名称
+            orderStatus: '3001', //订单状态名称
+          })
+        }, 2000)
+        // this.getStatusOrder({order_id: this.order_id})
+        //   .then(res=>{
+        //     this.info = {
+        //       tips: res['tips'],
+        //       descTitle: res['desc_title'],
+        //       desc: res['desc'],
+        //       btn: [
+        //         {'label': '返回首页', value: 1, type: 'default', radius: '12rpx'},
+        //         {'label': '查看订单', value: 2, type: 'primary', radius: '12rpx'},
+        //       ]
+        //     };
+        //     //成功
+        //     let icon = 'icondingdanwancheng';
+        //     let color = 'green';
+        //     let status = '3000';
+        //
+        //     //进行中
+        //     if (res['pay_status'] === 2) {
+        //       icon = 'iconshijian';
+        //       color = '#333';
+        //       status = '3001';
+        //     }
+        //
+        //     //失败
+        //     if (res['pay_status'] === 3) {
+        //       icon = 'icongerenzhongxinchufabaocuo';
+        //       color = 'red';
+        //       status = '3002';
+        //     }
+        //
+        //     //status => 3000:成功  3002:失败  3001:进行中
+        //     let reslut = {
+        //       icon: icon,
+        //       iconSize: 80, //图标大小
+        //       iconColor: color, //图标颜色
+        //       orderName: res['pay_status_name'], //订单状态名称
+        //       orderStatus: status, //订单状态名称,
+        //     };
+        //     resolve(reslut);
+        //   })
+        //   .catch()
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+
+</style>