gxd-uni-library-editx 1.0.0

package/src/main/cashier/check_cashier.vue

@@ -0,0 +1,483 @@
+<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>
+      <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>
+  </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/main/city/city.vue

@@ -0,0 +1,149 @@
+<template>
+  <xd-layout
+    :title="title"
+    background="#f8f8f8"
+    :show-bar="true"
+    @back="back"
+  >
+    <view style="padding: 20rpx; box-sizing: border-box">
+      <xd-cart-no-store-list
+        :count.sync="productCount"
+        @onPay="handlePayClick"
+        @onCartRemove="handleRemoveCart"
+        @onCartUpdateNumber="handleCartSetNumber"
+        @onCartList="handleCartList"
+        @onToCartDetail="handleToCartDetail"
+        @onRecommendList="handleRecommendList"
+        @onToProductDetail="handleToProductDetail"
+        :is-all="true"
+      ></xd-cart-no-store-list>
+    </view>
+
+  </xd-layout>
+</template>
+
+<script>
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdCartNoStoreList from "@/components/XdCartNoStoreList/XdCartNoStoreList";
+
+  export default {
+    name: "XdCartInde",
+    components: {
+      XdLayout,
+      XdCartNoStoreList
+    },
+    data() {
+      return {
+        productCount: 0,
+        title: '购物车'
+      }
+    },
+
+    watch:{
+      productCount(val){
+        if(val > 0) {
+          this.title = `购物车(${val})`
+        }
+        else{
+          this.title = `购物车`
+        }
+      },
+    },
+
+    created(){
+
+    },
+
+    methods: {
+      back(){
+        this.$xdUniHelper.navigateBack()
+      },
+
+      /**
+       * @description 确认订单
+       * @param item 门店与商品信息
+       */
+      handlePayClick(item) {
+        console.log('handlePayClick',item)
+      },
+
+      /**
+       * @description 删除购物车商品
+       * @param item {Object} 商品信息
+       * @param index {Number} 当前商品所在列表位置
+       * @param number {Number} 当前更改商品数量
+       * @param delDone {Function} 商品删除完成回调 1：删除购物成功 2：删除购物成功
+       */
+      handleRemoveCart({item,index, number}, delDone){
+        console.log('handleRemoveCart', item, index, number);
+        setTimeout(()=>{
+          delDone(1);
+        },2000)
+      },
+
+      /**
+       * @description 更新购物车商品数量
+       * @param item {Object} 商品信息
+       * @param index {Number} 当前商品所在列表位置
+       * @param number {Number} 当前更改商品数量
+       * @param setDone {Function} 商品更新数量完成回调
+       * @return setDone返回值 1：更新购物成功 2：更新购物失败
+       */
+      handleCartSetNumber({item, index, number}, setDone) {
+        console.log('handleCartSetNumber', item, index, number);
+        setTimeout(() => {
+          setDone(2);
+        }, 2000)
+      },
+
+      /**
+       * @description 获取购物车数据
+       * @param resolve {Function} 获取购物车数据完成回调
+       */
+      handleCartList(resolve) {
+        setTimeout(() => {
+          //null=>使用测试数据
+          //array => 正式数据
+          resolve(null);
+          uni.hideLoading()
+        }, 1000)
+      },
+
+
+      /**
+       * @description 获取推荐数据列表
+       * @param resolve {Function} 获取推荐数据列表完成回调
+       */
+      handleRecommendList(resolve) {
+        setTimeout(() => {
+          //null=>使用测试数据
+          //array => 正式数据
+          resolve(null);
+        }, 1000)
+      },
+
+      /**
+       * @description 推荐商品查看详情
+       */
+      handleToProductDetail(item){
+        console.log('handleToProductDetail',item);
+      },
+
+
+      /**
+       * @description 购物车查看详情事件
+       * @param item {Function} 获取购物车数据完成回调
+       */
+      handleToCartDetail(item){
+        console.log(item)
+      }
+
+
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+
+</style>