gxd-uni-library-editx 1.0.0

package/src/dome/dome/cake.vue

@@ -0,0 +1,186 @@
+<template>
+  <xd-layout
+    title="商品详情"
+    background="#f8f8f8"
+    :show-footer="false"
+    :show-bar="true"
+    @back="back"
+  >
+    <xd-store-product-info
+      :item="item"
+      :collect="collect"
+      :cart-number="cartNumber"
+      :address="address"
+      :is-show-selected="true"
+      :is-show-send-range="true"
+      @onCollect="handleCollect"
+      @onFastLink="handleFastLink"
+      @onFastBtn="handleFastBtn"
+      @onShop="handleShop"
+      @onSend="handleSend"
+    >
+    </xd-store-product-info>
+  </xd-layout>
+</template>
+
+<script>
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdStoreCart from "@/components/XdCartList/XdCartList";
+  import XdStoreProductInfo from "@/components/XdStoreProductInfo/XdStoreProductInfo";
+
+  export default {
+    name: "AppProductCake",
+    components: {
+      XdStoreProductInfo,
+      XdLayout,
+      XdStoreCart
+    },
+    data() {
+      return {
+        collect: null,
+        cartNumber: 99,
+        address:null,
+        selectNumber: null,
+
+        item: {
+          //头部轮播图
+          thumb: ["https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210604101103940.jpg", "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210604101113376.jpg", "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210604101122312.jpg"],
+          product_name: '中粮 福临门小厨味道米面礼盒 4.5kg', //商品名称
+          product_short_desc: '中粮 福临门小厨味道米面礼盒 4.5kg中粮 福临门小厨味道米面礼盒 4.5kg', //商品短名称
+          product_sub_name: '尺寸/口味/人群', //副标题，无此此地不显示副标题
+          sale_price: 150, //价格
+          id: 199191,
+          collect: true, //是否启用收藏按钮(undefined => 不显示  true=> 已收藏， false=> 未收藏)
+
+          //显示店铺展示模块
+          shop: {
+            logo: 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200826/733372b7f9022ce6c127ffbe03c54cb5.jpg',
+            name: '幸福西饼廊坊店',
+            desc: '使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来',
+          },
+
+          //产品显示标签
+          infoLabel: [
+            {
+              label: '描述',
+              value: '下午茶类产品不包含生日帽、蜡烛和巧克力牌',
+            },
+            {
+              label: '保质期',
+              value: '当天食用',
+            },
+            {
+              label: '预约时间',
+              value: '提前24小时预约',
+            },
+            {
+              label: '配送方式',
+              value: ['专人配送', '到店自提', '快递物流'],
+            },
+            {
+              label: '配送范围',
+              value: '北京，上海，河北唐山，大连 或者  北京，上海城市地区除外',
+            },
+          ],
+
+
+          tips: '订单付款后72小时内发货，法定节假日顺延到工作日发货',
+
+          //发货提示
+          notice: '订单付款后72小时内发货，法定节假日顺延到工作日发货',
+
+          //快速链接地址  align=left，right， center
+          links: [
+            {name: '查看配送范围', value: '全国', key: 0, align: 'right'},
+            {name: '支持门店', value: '某某门店', key: 1, align: 'right'}
+          ],
+
+          //快速按钮
+          fastBtns: [
+            {type: 'primary', name: '补货中', disabled: true},
+            {type: 'subPrimary', name: '立即购买', disabled: true},
+          ],
+
+          //详情
+          //detail: "\n                                                                                                                                    \n                                                                            \u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153542102.png?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\n                                                                                                                        \u003Cdiv\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/7daysservice.jpeg\u0022 width=\u0022100%\u0022\u003E\u003C\/div\u003E",
+          detail: "\n                                                                                                                                    \n                                                                                                                                    \n                                                                                                                                    \n                                                                                                                                    \n                                                                            \u003Cp\u003E\u5907\u6ce8\uff1a\u003C\/p\u003E\u003Cp\u003E1\u3001\u672c\u4ea7\u54c1\u4e0d\u652f\u63017\u5929\u65e0\u7406\u7531\u9000\u6362\u8d27\u003C\/p\u003E\u003Cp\u003E2\u3001\u65b0\u7586\u3001\u897f\u85cf\u3001\u5185\u8499\u3001\u6d77\u5357\u3001\u6e2f\u6fb3\u53f0\u4e0d\u652f\u6301\u6d3e\u4ef6\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142948482.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947977.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947278.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947126.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947903.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947859.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947175.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947841.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947619.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142948576.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947384.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947381.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\n                                                                                                                        \n                                                                                                                        \n                                                                                                                        \n                                                                                                                        \u003Cdiv\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/7daysservice.jpeg\u0022 width=\u0022100%\u0022\u003E\u003C\/div\u003E",
+        },
+      }
+    },
+    created(){
+      setTimeout(()=>{
+        this.address = '河北省廊坊三河市北城汽车站片城建新村50号楼5单元3001室'
+      }, 1000);
+      setTimeout(()=>{
+        this.collect = true;
+        this.cartNumber = 100;
+        this.selectNumber = '2件'
+      }, 5000)
+    },
+
+    methods: {
+      back(){
+        this.$xdUniHelper.navigateBack()
+      },
+
+      /**
+       * @description 点击配送范围事件
+       * @param item 当前商品对象
+       */
+      handleSend(item){
+        console.log('handleSend', item)
+      },
+
+      /**
+       * @description 点击收藏事件
+       * @param item 当前商品对象
+       */
+      handleCollect(item) {
+        console.log('handleCollect',item)
+        this.$xdShowLoading({});
+        setTimeout(() => {
+          this.collect = !this.collect;
+          this.$xdHideLoading()
+        }, 1000)
+      },
+
+      /**
+       * @description 快速连接点击事件
+       * @param link 当前点击连接对象
+       * @param index 当前快速连接所在列表位置
+       */
+      handleFastLink({link ,index}){
+        if(index === 0) {
+          this.$xdUniHelper.redirectTo({
+
+          })
+        }
+        console.log('handleFastLink', link, index)
+      },
+
+      /**
+       * @description 快速按钮点击事件
+       * @param link 当前点击连接对象
+       * @param index 当前快速连接所在列表位置
+       */
+      handleFastBtn({btn, index}){
+        console.log('handleFastBtn', btn, index)
+      },
+
+      /**
+       * @description 点击店铺模块事件
+       */
+      handleShop(shop){
+        console.log('handleShop', shop)
+      }
+
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .app-send {
+    text-align: right;
+  }
+</style>

package/src/dome/dome/cart.vue

@@ -0,0 +1,205 @@
+<template>
+  <xd-layout
+    :title="title"
+    background="#f8f8f8"
+    :show-bar="true"
+    :show-back="true"
+    @back="back"
+    @done="handleDone"
+  >
+    <template v-if="layoutDone">
+      <view>
+        <xd-store-cart
+          ref="xd-store-cart"
+          @onPay="handlePayClick"
+          @onCurtRemove="handleRemoveCurt"
+          @onCurtSetNumber="handleCurtSetNumber"
+          @onCartList="handleCurtList"
+          @onSelect="handleSelect"
+          :is-all="isAll"
+        ></xd-store-cart>
+      </view>
+      <template slot="footer">
+        <view class="app-body__footer" :style="{bottom: bottom + 'px'}">
+          <template v-if="selectCart !== null">
+            <view>
+              <xd-radio size="mini" @change="handleChangeAll"  :value="isAll"></xd-radio>
+            </view>
+            <view>全选</view>
+            <view>
+              <xd-unit :price="getProductPrice(selectCart.totalPrice)" :font-size="40" :iocn-size=".45"></xd-unit>
+            </view>
+            <view>
+              <xd-button type="primary" size="mini" radius="10rpx">{{btnMsg}}</xd-button>
+            </view>
+          </template>
+        </view>
+      </template>
+    </template>
+  </xd-layout>
+</template>
+
+<script>
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdStoreCart from "@/components/XdCartList/XdCartList";
+  import XdRadio from "@/components/XdRadio/XdRadio";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdButton from "@/components/XdButton/XdButton";
+
+  export default {
+    name: "XdCartInde",
+    components: {
+      XdButton,
+      XdUnit,
+      XdRadio,
+      XdLayout,
+      XdStoreCart
+    },
+    data() {
+      return {
+        top: 0, //顶部到顶部自定义位置距离
+        bottom: 0, //底部到底部自定义位置距离
+        layoutDone: false, //layout插件加载完成
+
+        isAll: true, //是否全选
+        btnMsg: '结算',
+        title: '购物车',
+        selectCart: null
+      }
+    },
+    created(){
+
+    },
+
+    methods: {
+
+      getProductPrice(price){
+        return this.$xdUniHelper.divisionFloatNumber(price, 100)
+      },
+
+      /**
+       * @description 全选选中购物车
+       * @param status
+       */
+      handleChangeAll(status){
+        this.$refs['xd-store-cart'].setIsAll(status);//调用插件内的方式
+      },
+
+      /**
+       * @description 选中购物车事件
+       * @param select
+       */
+      handleSelect(select){
+        console.log('handleSelect',select);
+        this.selectCart = select;
+        if(select.totalNum > 0) this.btnMsg = `结算(${select.totalNum})`;
+        else  this.btnMsg = `结算`;
+        if (select.countNum > 0)  this.title = `购物车(${select.countNum})`;
+        else this.title = `购物车`;
+        this.isAll = select.isAll;
+      },
+
+
+      /**
+       * @description 确认订单
+       * @param item 门店与商品信息
+       */
+      handlePayClick(item) {
+        console.log('handlePayClick',item)
+      },
+
+      /**
+       * @description 删除购物车商品
+       * @param product {Object} 商品信息
+       * @param item {Object} 门店信息
+       * @param delDone {Function} 商品删除完成回调
+       */
+      handleRemoveCurt(product, item , delDone){
+        console.log('handleRemoveCurt', product, item);
+        setTimeout(()=>{
+          delDone();
+        },2000)
+      },
+
+      /**
+       * @description 商品增加购买数量
+       * @param product {Object} 商品信息
+       * @param item {Object} 门店信息
+       * @param setDone {Function} 商品增加数量完成回调 1=>更新成功 2=>更新失败
+       */
+      handleCurtSetNumber(product, item, setDone) {
+        console.log('handleCurtSetNumber', product, item);
+        this.$xdShowLoading({});
+        setTimeout(() => {
+          setDone(1);
+          this.$xdHideLoading()
+        }, 1000)
+      },
+
+      /**
+       * @description 获取购物车数据
+       * @param resolve {Function} 获取购物车数据完成回调
+       */
+      handleCurtList(resolve) {
+        console.log('handleCurtSetNumber');
+        uni.showLoading({});
+        setTimeout(() => {
+          //null=>使用测试数据
+          //array => 正式数据
+          resolve(null);
+          uni.hideLoading()
+        }, 100)
+      },
+
+      handleDone(layoutInfo) {
+        let {bottom, top} = layoutInfo;
+        this.bottom = bottom;
+        this.layoutDone = true;
+      },
+
+      back() {
+        this.$xdUniHelper.navigateBack()
+      },
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .app-body {
+    &__footer {
+      position: fixed;
+      left: 0;
+      right: 0;
+      border-top: 1px solid #efefef;
+      background: #fff;
+      height: unit(100,rpx);
+      box-shadow: 0 0 unit(10,rpx) rgba(0,0,0,.1);
+      z-index: 100;
+      padding: 0 unit(20,rpx);
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      & > view:first-child{
+        transform: scale(.86);
+      }
+
+      & > view:first-child,
+      & > view:nth-child(2),
+      & >view:last-child {
+        flex-shrink: 0;
+      }
+
+      & > view:nth-child(2){
+        margin-left: unit(20,rpx);
+      }
+
+      & > view:nth-child(3) {
+        flex: 1;
+        margin-left: unit(20,rpx);
+      }
+    }
+  }
+</style>

package/src/dome/dome/cart_store.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="false"
+      ></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>

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

@@ -0,0 +1,73 @@
+<template>
+  <xd-layout
+    title="收银台"
+    background="#f8f8f8"
+    :show-bar="true"
+    :show-footer="false"
+    @back="back"
+  >
+    <view class="app-body">
+      <xd-store-cashier
+        @onReceiveTime="handleReceiveTime"
+        @onChangeAddress="handleChangeAddress"
+      >
+
+      </xd-store-cashier>
+    </view>
+  </xd-layout>
+</template>
+
+<script>
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdStoreCashier from "@/components/XdStoreCashier/XdStoreCashier";
+
+
+  export default {
+    name: "XdCartInde",
+    components: {
+      XdStoreCashier,
+      XdLayout,
+    },
+    data() {
+      return {
+
+      }
+    },
+
+    created(){
+
+    },
+
+    methods: {
+
+      /**
+       * @description 切换配送地址
+       */
+      handleChangeAddress(){
+        console.log('handleChangeAddress')
+      },
+
+      /**
+       * @description 获取配送时间段数据列表
+       * @param resolve 成功回调事件 null=> 使用测试数据  object => 正式数控
+       */
+      handleReceiveTime(resolve){
+        console.log('handleReceiveTime');
+        setTimeout(() => {
+          resolve(null);
+        }, 500)
+      },
+
+
+      back(){
+        this.$xdUniHelper.navigateBack()
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .app-body {
+
+  }
+</style>