gxd-uni-library-editx 1.0.0

package/src/dome/dome/index.vue

@@ -0,0 +1,725 @@
+<template>
+  <xd-layout
+    title="测试"
+    background="#fff"
+    :show-bar="true"
+    :show-footer="true"
+    :show-back="false"
+    @onDone="handleDone"
+    :is-animation="true"
+  >
+    <template slot="top">
+      <view class="app-list-city">
+        <xd-city-show
+          city-location-type="baidu"
+          @getCityList="handleGetCityList"
+          @done="handleCityDone"
+          @onChange="handleCityChange"
+          color="#333"
+        >
+          <template slot-scope="{item}">
+            {{item|raw}}
+          </template>
+        </xd-city-show>
+      </view>
+    </template>
+    <view class="app-list">
+      <xd-swiper
+        :list="swiperList"
+        :current="0"
+        width="100%"
+        height="400rpx"
+        @onClickItem="handleItemClick"
+      >
+        <template slot-scope="{ item, index}">
+          <image :src="item['imgUrl']"></image>
+          {{index}}
+        </template>
+      </xd-swiper>
+    </view>
+    <view class="app-list" style="margin: 20px 0">
+      <xd-tab-scroll
+        :list="null"
+      ></xd-tab-scroll>
+    </view>
+    <view class="app-list">
+      <xd-title-section
+        title="后续会展示在弹窗中"
+        sub-title="test"
+        bg="#fff"
+        type="circle"
+
+      ></xd-title-section>
+    </view>
+    <view class="app-list">
+      <xd-title-tab
+        :list="listTitle"
+        :into-view="2"
+        @onTab="onTab"
+        @onInit="handleXdTabInit"
+      ></xd-title-tab>
+    </view>
+    <view class="app-list">
+      {{rangePriceValue|raw}}
+      <xd-range-slider
+        v-model="rangePriceValue"
+        :fill-max-value="100"
+        :fill-min-value="18"
+        :minValue="20"
+        :maxValue="45"
+        :step="1"
+        @end="end"
+      ></xd-range-slider>
+    </view>
+    <view class="app-list">
+      <xd-tab
+        :list="tabList"
+        :show-setting="true"
+        :tab-index="2"
+        @onTab="handleTab"
+        @onSetting="handleSetting"
+        @onInit="handleXdTabInit"
+      ></xd-tab>
+    </view>
+    <view class="app-list-bas">
+      <xd-font-icon size="100" :key="index" v-for="(icon,index) in icons" :icon="icon"></xd-font-icon>
+    </view>
+    <view>
+      <xd-button type="primary" radius="20rpx" :box-shadow="null"></xd-button>
+    </view>
+    <view>
+      <xd-button type="info"></xd-button>
+    </view>
+    <view>
+      <xd-button type="default"></xd-button>
+    </view>
+    <view>
+      <xd-button type="text"></xd-button>
+    </view>
+    <view>
+      <xd-button type="primary" size="mini"></xd-button>
+    </view>
+    <view>
+      <xd-button type="primary" size="medium"></xd-button>
+    </view>
+    <view>
+      <xd-button type="primary" size="small"></xd-button>
+    </view>
+    <view>
+      <xd-button type="primary" size="large"></xd-button>
+    </view>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="handleClick">跳转到同框架其他项目并返回</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('online/seat')">在线选座选座</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('online/schedule')">在线选座电影排期</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('online/confirm')">在线选座确认订单</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('online/detail')">在线选座订单详情</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('online/pay')">在线选座支付</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('city')">选中城市</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('webview')">Webview</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('layout')">Layout</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('swiper')">滑选</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toPages('/main/cashier/cashier')">收银台（普通商城）</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toPages('/main/cashier/check_cashier')">收银台（体检）</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="handleSelect">选择段时间</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('date/date')">选择日期插件</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('clip')">图片剪辑</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('map/search')">百度地址搜索</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('debug/debug')">清理缓冲</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('order/success')">我的订单成功</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('order/list_shop')">我的订单列表（带店铺）</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('order/list')">我的订单列表（不带店铺）</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('order/detail')">我的订单详情</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toMain('product/type')">商品分类列表</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('cake')">蛋糕商品详情（蛋糕）</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('product')">商品详情（商城）</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('express')">我的物流信息详情</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('cart')">我的购物车（带店铺）</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('cart_store')">我的购物车（不带店铺）</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('notice')">通栏通知</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('item')">列表类型</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="xdDialogShow=true; handleDisabled()">XdDailog</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('form')">自定义表单</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button type="primary" @click="toOrder('address')">添加地址</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-button btn-type="subPrimary" @click="toXdDownDrawer">从下往上全屏抽屉功能</xd-button>
+    </view>
+    <view class="app-list">
+      <xd-radio size="small"></xd-radio>
+      <xd-radio size="mini"></xd-radio>
+      <xd-radio></xd-radio>
+    </view>
+    <view class="app-list">
+      <xd-nav-tab :values="['a','b','c']"></xd-nav-tab>
+    </view>
+
+    <view class="app-list">
+      <xd-unit price="20" :color="$mainColor"></xd-unit>
+    </view>
+
+    <view class="app-list">
+      <xd-select
+        default-value="AA"
+        :disabled="false"
+        v-model="select_film"
+        label="影院类型："
+        radius="40rpx"
+        :height="80"
+        :list="null"
+        :border-width="0"
+        placeholder="请选择影院类型"
+      >
+        <!--        <template slot-scope="{status}">-->
+        <!--          {{status}}-->
+        <!--        </template>-->
+      </xd-select>
+    </view>
+
+    <view class="app-list">
+      <xd-star v-model="star"></xd-star>
+    </view>
+
+    <view class="app-list">
+      <xd-switch
+        size="mini"
+        :is-show-text="true"
+        open-text="开启"
+        close-text="关闭"
+        color="green"
+        :checked="false"
+        :disabled="false"
+      ></xd-switch>
+      <xd-switch
+        size="mini"
+        :is-show-text="false"
+        color="green"
+        :checked="false"
+        :disabled="false"
+      ></xd-switch>
+    </view>
+    <view class="app-list">
+      <xd-content-xss
+        :html="testhtml"
+      ></xd-content-xss>
+    </view>
+    <view class="app-list">
+      <xd-number :value="1"></xd-number>
+    </view>
+    <view class="app-list">
+      <xd-number-uni
+        @change="changeNumber"
+        v-model="valueNumber"
+        min="1"
+        max="21"
+      ></xd-number-uni>
+    </view>
+    <view class="app-list" style="display: flex; justify-content: flex-start; align-items: center">
+      <xd-tag is-close size="normal" type="primary">标签1</xd-tag>
+      <xd-tag size="normal" type="primary">标签1</xd-tag>
+      <xd-tag size="normal" type="primary">标签1</xd-tag>
+    </view>
+    <view class="app-list">
+      <xd-tag is-close is-stop size="small" type="primary">tag</xd-tag>
+    </view>
+    <xd-more>没有了</xd-more>
+    <xd-down-drawer
+      :show.sync="xdDownDrawer"
+      :z-index="1000"
+    ></xd-down-drawer>
+    <xd-select-time
+      :show.sync="showSelectTime"
+      @onTimeSlotList="handleTimeSlotList"
+      @onSelect="handleTimeSelect"
+    ></xd-select-time>
+    <xd-pw-pay
+      :show="false"
+      :text-list="textList"
+      :input_len="6"
+      :password="true"
+      width="90%"
+      title="支付密码"
+    ></xd-pw-pay>
+    <xd-dailog
+      :show.sync="xdDialogShow"
+    >
+      <template slot="title">
+        <image style="width: 361rpx; height: 53rpx" src="/static/title.png"></image>
+      </template>
+      <image style="width: 562rpx; height: 1006rpx" src="/static/test.png"></image>
+    </xd-dailog>
+  </xd-layout>
+</template>
+
+<script>
+
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdSearchBar from "@/components/XdSearchBar/XdSearchBar";
+  import XdCoins from "@/components/XdCoins/XdCoins";
+  import XdNavTab from "@/components/XdNavTab/XdNavTab";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdMore from "@/components/XdMore/XdMore";
+  import XdNoticeBar from "@/components/XdNoticeBar/XdNoticeBar";
+  import XdNumber from "@/components/XdNumber/XdNumber";
+  import XdSelect from "@/components/XdSelect/XdSelect";
+  import XdStar from "@/components/XdStar/XdStar";
+  import XdSwitch from "@/components/XdSwitch/XdSwitch";
+  import XdTag from "@/components/XdTag/XdTag";
+  import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer";
+  import XdTitleTab from "@/components/XdTitleTab/XdTitleTab";
+  import XdTab from "@/components/XdTab/XdTab";
+  import XdSwiper from "@/components/XdSwiper/XdSwiper";
+  import XdTitleSection from "@/components/XdTitleSection/XdTitleSection";
+  import XdRangeSlider from "@/components/XdRangeSlider/XdRangeSlider";
+  import XdNumberUni from "@/components/XdNumberUni/XdNumberUni";
+  import XdTabScroll from "@/components/XdTabScroll/XdTabScroll";
+  import XdCityShow from "@/components/XdCityShow/XdCityShow";
+  import cityData from "@/dome/dome/cityData";
+  import XdSelectTime from "@/components/XdSelectTime/XdSelectTime";
+  import XdRadio from "@/components/XdRadio/XdRadio";
+  import XdContentXss from "@/components/XdContentXss/XdContentXss";
+  import XdMpHtml from "@/components/XdMpHtml/XdMpHtml";
+  import XdDailog from "@/components/XdDailog/XdDailog";
+  import XdFontIcon from "../../components/XdFontIcon/XdFontIcon";
+  import XdPwPay from "@/components/XdPwPay/XdPwPay";
+
+
+  export default {
+    components: {
+      XdFontIcon,
+      XdDailog,
+      XdContentXss,
+      XdRadio,
+      XdSelectTime,
+      XdCityShow,
+      XdTabScroll,
+      XdTitleTab,
+      XdNumberUni,
+      XdRangeSlider,
+      XdTitleSection,
+      XdSwiper,
+      XdTab,
+      XdDownDrawer,
+      XdTag,
+      XdSwitch,
+      XdStar,
+      XdNumber,
+      XdNoticeBar,
+      XdUnit,
+      XdNavTab,
+      XdCoins,
+      XdSearchBar,
+      XdButton,
+      XdLayout,
+      XdMore,
+      XdSelect,
+      XdPwPay
+    },
+
+    data() {
+      return {
+        icons: [
+          'iconicon-wd-dj',
+          'iconicon-wd-mr',
+          'iconicon-dd-mr',
+          'iconicon-weixuanzhong',
+          'iconhi',
+          'iconsjx',
+          'iconicon-dd-dj',
+          'iconsjs',
+          'iconkefu_mian',
+          'iconsousuo_mian',
+          'iconsousuo_mian',
+          'iconjubao_mian',
+          'iconqianxianxinxi_mian',
+          'icondianyingyuehui_mian',
+          'iconVIPtubiao_mian',
+          'iconwx',
+          'icontuanpiao',
+          'iconicon-zyk-mr',
+          'iconyuehuibiaoqian_mian',
+          'iconhuanyiju_xian',
+          'iconicon-dd-dj-01'
+        ],
+
+        textList: [
+          {
+            label: '查看卡详情',
+          },
+          {
+            label: '请输入支付密码',
+            value: '10'
+          }
+        ],
+
+        testhtml: `<article class="markdown-body">\\n            <h1>mp-html 富文本组件【全端支持，可编辑】 - 更新日志</h1>\\n             <h2>v2.2.2（2022-02-26）</h2>\\n                <ol>\\n<li><code>A</code> 增加了 <a href="https://jin-yufeng.gitee.io/mp-html/#/advanced/api#pauseMedia">pauseMedia</a> 的 <code>api</code>，可用于暂停播放音视频 <a href="https://github.com/jin-yufeng/mp-html/issues/317">详细</a></li>\\n<li><code>U</code> 优化了长内容的加载速度  </li>\\n<li><code>U</code> 适配 <code>vue3</code> <a href="https://github.com/jin-yufeng/mp-html/issues/389">#389</a>、<a href="https://github.com/jin-yufeng/mp-html/pull/398">#398</a> by <a href="https://github.com/zhouhuafei">@zhouhuafei</a>、<a href="https://github.com/jin-yufeng/mp-html/issues/400">#400</a></li>\\n<li><code>F</code> 修复了小程序端图片高度设置为百分比时可能不显示的问题</li>\\n<li><code>F</code> 修复了 <code>highlight</code> 插件部分情况下可能显示不完整的问题 <a href="https://github.com/jin-yufeng/mp-html/issues/403">详细</a></li>\\n</ol>\\n                            </article>`,
+        showSelectTime: false,
+        rangePriceValue: [2000, 5000],
+        valueNumber: 10,
+        title: 'Hello',
+        select_film: null,
+        star: 3, //评分
+        xdDownDrawer: false,
+        listTitle: [
+          {id: 1, name: '到店自提1'},
+          {id: 2, name: '配送到家1'},
+          {id: 3, name: '到店自提2'},
+          {id: 4, name: '配送到家2'},
+          {id: 5, name: '到店自提3'},
+          {id: 6, name: '配送到家4'},
+        ],
+        tabList: [
+          {id: 1, name: 'Html5'},
+          {id: 2, name: 'CSS'},
+          {id: 3, name: 'Vue'},
+          {id: 4, name: 'PHP'},
+          {id: 5, name: 'Javasript'},
+          {id: 6, name: 'Java'},
+          {id: 7, name: 'C++'},
+          {id: 8, name: 'Vuex'},
+          {id: 9, name: 'C语言'},
+          {id: 10, name: 'CSS3'},
+        ],
+        swiperList: [
+          {
+            imgUrl: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=158078740,1228297333&fm=26&gp=0.jpg',
+            url: 'https://uniapp.dcloud.io/component/swiper'
+          },
+
+          {
+            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20190930%2F11%2F1569814966-kqFfTBHvAy.jpg&refer=http%3A%2F%2Fimage.biaobaiju.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622163011&t=f9258e07f2dca0dab67f4bac29a39dd2',
+            url: 'https://uniapp.dcloud.io/component/swiper'
+          }
+        ],
+
+        xdDialogShow: false,
+        disabled: true,
+      }
+    },
+    watch: {
+      rangePriceValue(val) {
+        console.log(JSON.stringify(val))
+      }
+    },
+    onReachBottom(e) {
+      //console.log('onReachBottom',e);
+    },
+    onPageScroll(e) {
+      //console.log('onPageScroll',e);
+    },
+    created() {
+      // this.$xdConfirm({
+      //   title: '取消报名',
+      //   showClose: true,
+      //   isTitle: true,
+      //   content: '是否确定取消本次电影约会活动',
+      //   success:(res)=>{
+      //     console.log('$xdConfirm',res)
+      //   }
+      // });
+
+
+      // this.$xdAlert({
+      //   content: '参数错误',
+      //   type: 'error',
+      //   time: 4000,
+      //   close: ()=>{
+      //     console.log('$xdAlert','参数错误')
+      //   }
+      // })
+
+      //this.$xdShowLoading({})
+    },
+    methods: {
+
+      handleDisabled() {
+        setTimeout(() => {
+          this.disabled = false
+        }, 10000)
+      },
+
+      handleDone(layoutInfo) {
+        console.log('layoutInfo', layoutInfo)
+      },
+
+      toPages(url) {
+        this.$xdUniHelper.navigateTo({
+          url: url
+        });
+      },
+
+      /**选中时间段***/
+      handleSelect() {
+        this.showSelectTime = true;
+      },
+
+      handleTimeSlotList(resolve) {
+        setTimeout(() => {
+          resolve(null)
+        }, 500)
+      },
+
+      handleTimeSelect(time) {
+        console.log('handleTimeSelect', time)
+      },
+      /**选中时间段***/
+
+      handleClick() {
+        this.$xdUniHelper.navigateProjectTo({
+          url: 'http://192.168.0.102:8081/dome/dome/cart'
+        })
+      },
+
+      /**城市定位**********************/
+
+      /**
+       * @description 获取城市列表接口
+       * @param location
+       * @param resolve
+       */
+      handleGetCityList({location}, resolve) {
+        console.log('handleGetCityList', location, cityData.result);
+        resolve(this.toCityFormat(cityData.result));
+        console.log(getApp().globalData.weixinSDK)
+      },
+
+      /**
+       * @description 数据格式转换(建议在vuex中处理)
+       * 并缓存城市列表原始数据和处理完成数据
+       * @param cityInfo
+       */
+      toCityFormat(cityInfo) {
+        let classifyList = [];
+        cityInfo.letters.map((item) => {
+          classifyList.push({idx: item});
+        });
+
+        let hotData = [];
+        Object.keys(cityInfo.hot_city_data).map((key) => {
+          hotData.push({
+            "city_name": cityInfo.hot_city_data[key],
+            "city_id": Number(key),
+          },)
+        });
+
+        let list = [];
+        Object.keys(cityInfo.city_data).map((key) => {
+          let item = {idx: key, cities: []};
+          cityInfo.city_data[key].map(itm => {
+            let city_id = itm[0]['value'];
+            let city_name = itm[1]['value'];
+            let province_name = itm[2]['value'];
+            item.cities.push({
+              city_id,
+              city_name,
+              province_name,
+              city_pinyin: '',
+              py: '',
+              letter: key,
+            })
+          });
+          list.push(item);
+        });
+
+        console.log(classifyList, hotData, list)
+        return {
+          city_nav: list,
+          classify_nav: classifyList,
+          hot_city: hotData
+        }
+      },
+
+
+      /***
+       * @description 定位完成事件
+       * @param city
+       */
+      handleCityDone(city) {
+        console.log('handleCityDone', city)
+      },
+
+      handleCityChange() {
+        console.log('handleCityChange');
+        this.$xdUniHelper.navigateTo({
+          url: '/dome/dome/city'
+        })
+      },
+      /**城市定位**********************/
+
+
+
+      end(e) {
+        console.log(e);
+      },
+
+      changeNumber(num) {
+        console.log('changeNumber', num)
+        if (num > 15) this.valueNumber = 15;
+      },
+      handleXdTabInit(item, index) {
+        console.log('handleXdTabInit', item, index)
+      },
+
+      handleItemClick(item, index) {
+        console.log('handleItemClick', item, index)
+      },
+
+      handleTab(item, index) {
+        console.log('handleTab', item, index)
+      },
+      handleSetting() {
+        console.log('handleSetting')
+      },
+
+      toXdDownDrawer() {
+        this.xdDownDrawer = true;
+      },
+
+      onTab(item, index) {
+        console.log('onTab', item, index)
+      },
+
+      toOrder(name) {
+        this.$xdUniHelper.navigateTo({
+          url: `/dome/dome/${name}`
+        });
+      },
+
+      toMain(name) {
+        this.$xdUniHelper.navigateTo({
+          url: `/main/${name}`
+        });
+      },
+
+      onGetPhoneNumber(info) {
+        console.log(info);
+      },
+
+      onGetUserProfile() {
+
+      },
+
+      onGetuserinfo(info) {
+        console.log(info);
+
+
+        //获取用户登录凭证
+        uni.login({
+          provider: 'weixin',
+          success: function (loginRes) {
+            console.log('kkkk', loginRes);
+          }
+        });
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .app-list-bas {
+    margin: unit(20, rpx);
+    box-shadow: 0 0 unit(10, rpx) rgba(0, 0, 0, .5);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: unit(20, rpx);
+
+    & > * {
+      margin: unit(10, rpx);
+    }
+  }
+
+  .app-list-buttom {
+    padding: unit(10, rpx) unit(30, rpx);
+
+    & > view {
+      margin-bottom: 20px;
+    }
+  }
+
+  .app-list {
+    padding: unit(10, rpx) unit(30, rpx);
+  }
+
+  .app-list-flex {
+    padding: unit(10, rpx) unit(30, rpx);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    font-size: @xd-font-size-base;
+  }
+
+  .app-list-city {
+    height: unit(100, rpx);
+    line-height: unit(100, rpx);
+    padding: 0 unit(20, rpx);
+    background: #eee;
+  }
+
+
+</style>