gxd-uni-library-editx 1.0.0

package/src/components/XdEditPwd/XdEditPwd.vue

@@ -0,0 +1,305 @@
+<template>
+  <view>
+    <xd-dailog
+            :show.sync="uiShow"
+            width="90%"
+            title="设置支付密码"
+            :cancel="false"
+            :confirm="false"
+            :zIndex="1100"
+            :showClose="showClose"
+            @close="handleClose"
+    >
+      <view class="pwd">
+        <view class="pwd__title" v-if="title">
+          <view>
+            {{title}}
+          </view>
+        </view>
+        <view class="pwd__form">
+          <view class="pwd__form-item">
+            <view>
+              手机号：
+            </view>
+            <view>
+              <input
+                      :disabled="editPhone!==''"
+                      :style="{width:370+'rpx'}"
+                      type="number"
+                      placeholder="请输入手机号"
+                      :adjust-position="false"
+                      v-model="form.phone"
+              />
+            </view>
+          </view>
+
+          <view class="pwd__form-item">
+            <view style="display: flex;align-items: center;flex: 1;
+          width: 0;">
+              <view>验证码：</view>
+              <view>
+                <input
+                        :style="{width:160+'rpx',marginRight:30+'rpx'}"
+                        type="text"
+                        placeholder="请输入验证码"
+                        :adjust-position="false"
+                        v-model="form.sms_code"/>
+              </view>
+            </view>
+            <view style="flex-shrink: 0;">
+              <xd-button
+                      size="mini"
+                      type="default"
+                      @click="getSmsCodeHandle"
+                      :disabled="!form.phone || status"
+                      :style="{width:codeWidth+'rpx'}"
+              >
+                {{statusMsg}}
+              </xd-button>
+            </view>
+          </view>
+
+          <view class="pwd__form-item">
+            <view>
+              设置支付密码：
+            </view>
+            <view>
+              <input
+                      type="password"
+                      placeholder="请输入六位纯数字密码"
+                      :adjust-position="false"
+                      v-model="form.password"
+                      maxlength="6"
+              />
+            </view>
+          </view>
+
+          <view class="pwd__form-item">
+            <view>
+              确认支付密码：
+            </view>
+            <view>
+              <input
+                      type="password"
+                      placeholder="请输入确认密码"
+                      :adjust-position="false"
+                      v-model="form.confirmPwd"
+                      maxlength="6"
+              />
+            </view>
+          </view>
+        </view>
+
+        <view>
+          <xd-button
+                  type="primary"
+                  size="mini"
+                  :disabled="!form.phone || !form.sms_code || !form.password || !form.confirmPwd"
+                  @click="submit"
+          >
+            确定
+          </xd-button>
+        </view>
+      </view>
+    </xd-dailog>
+  </view>
+</template>
+
+<script>
+  import XdDailog from "@/components/XdDailog/XdDailog";
+  import XdButton from "@/components/XdButton/XdButton";
+
+  export default {
+    name: "SetPassword",
+    props: {
+      show: {
+        type: Boolean,
+        default: false
+      },
+      title: {
+        type: String,
+        default: ''
+      },
+      editPhone: {
+        type: String,
+        default: ''
+      },
+      showClose: {
+        type: Boolean,
+        default: true
+      }
+    },
+    components: {
+      XdDailog,
+      XdButton
+    },
+    data() {
+      return {
+        form: {
+          sms_code: '',
+          phone: '', //手机号
+          password: '',
+          confirmPwd: '',
+        },
+        status: false,
+        second: 0,
+        statusMsg: '获取验证码',
+        codeWidth: '200',
+        confirm: true,
+        uiShow: false
+      }
+    },
+    created() {
+      if (this.editPhone) {
+        this.form.phone = this.editPhone
+      }
+      this.uiShow = this.show;
+    },
+    computed: {},
+    watch: {
+      'form.password': {
+        handler: function (val, oldval) {
+          let num = val.charAt(val.length - 1);
+          let reg = new RegExp("^[0-9]*$");
+          if (!reg.test(num)) {
+            setTimeout(() => {
+              this.form.password = val.slice(0, -1);
+            }, 0);
+          } else {
+            setTimeout(() => {
+              this.form.password = val;
+            }, 0);
+          }
+
+        },
+      },
+
+      'form.confirmPwd': {
+        handler: function (val, oldval) {
+          let num = val.charAt(val.length - 1);
+          let reg = new RegExp("^[0-9]*$");
+          if (!reg.test(num)) {
+            setTimeout(() => {
+              this.form.confirmPwd = val.slice(0, -1);
+            }, 0);
+          } else {
+            setTimeout(() => {
+              this.form.confirmPwd = val;
+            }, 0);
+          }
+
+        },
+      },
+
+      show(newVal) {
+        this.uiShow = newVal;
+
+      },
+
+      uiShow(value) {
+        this.$emit('update:show', value);
+      }
+    },
+    methods: {
+      getSmsCodeHandle() {
+        //无手机号
+        if (!this.form.phone) {
+          this.$xdAlert({
+            content: '请输入手机号!',
+            time: 1500,
+            isClose: false,
+            zIndex: 5000
+          });
+          return
+        }
+
+        if (this.status) {
+          return;
+        }
+        this.$emit('onGetCode', this.form.phone, () => {
+          this.sendSmsSuccess()
+        })
+
+      },
+
+      sendSmsSuccess() {
+        this.status = true;
+        this.second = 119;
+        this.codeWidth = '300';
+        this.statusMsg = `短信已发送:${this.second}s`;
+        let time = setInterval(() => {
+          this.statusMsg = `短信已发送:${this.second}s`;
+          this.second--;
+          if (this.second === 0) {
+            clearInterval(time);
+            this.status = false;
+            this.second = 0;
+            this.codeWidth = '200';
+            this.statusMsg = '获取验证码';
+          }
+        }, 1000)
+      },
+
+      submit() {
+
+        if (this.form.password.length < 6 || this.form.confirmPwd.length < 6) {
+          this.$xdAlert({
+            content: '密码长度不能少于六位!',
+            time: 1500,
+            isClose: false,
+            zIndex: 5000
+          });
+          return
+        }
+
+        if (this.form.password !== this.form.confirmPwd) {
+          this.$xdAlert({
+            content: '确认密码和密码不一致!',
+            time: 1500,
+            isClose: false,
+            zIndex: 5000
+          });
+          return
+        }
+        this.$emit('onSubmit', this.form)
+      },
+
+      handleClose() {
+        this.$emit('onClose')
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .pwd {
+    font-size: @xd-font-size-base;
+
+    &__title {
+      border: 1px solid #ccc;
+      padding: unit(20, rpx);
+      text-align: center;
+      font-size: @xd-font-size-base + 4;
+      margin-bottom: unit(20, rpx);
+    }
+
+    &__form {
+      margin-bottom: unit(27, rpx);
+
+      &-item {
+        display: flex;
+        align-items: center;
+        padding: unit(10, rpx) 0;
+
+        input {
+          font-size: @xd-font-size-base;
+          border-bottom: 1px solid #ccc;
+          text-align: left;
+          padding: unit(10, rpx);
+        }
+      }
+    }
+  }
+
+</style>
+

package/src/components/XdEnterOrderList/XdEnterOrderList.vue

@@ -0,0 +1,413 @@
+<template>
+  <view class="xd-order">
+    <view
+      :style="{background: background}"
+      class="xd-order__item"
+      v-for="(item,index) in dataList"
+      :key="item.order_id"
+    >
+      <view class="xd-order__item-title">
+        <view>订单号：{{item.order_id}}</view>
+        <view>{{item['business_type_name']}}</view>
+      </view>
+      <view class="xd-order__item-list">
+        <view :style="{marginBottom: pIndex===item.product_data.length-1?0:'20rpx'}" class="xd-order__item-list-item"
+              v-for="(pItem,pIndex) in item.product_data" :key="pItem['product_id']"
+              @click="toOrderDetail(item)">
+          <view :style="{width: productWidth + 'rpx', height: productHeight + 'rpx'}">
+            <image :src="pItem.thumb"></image>
+          </view>
+          <view class="xd-order__item-list-name">{{pItem['product_name']}}</view>
+        </view>
+        <view style="background: #fff" class="xd-order__item-list-all"
+              v-if="item.allProduct && item.allProduct.length > 3">
+          <view>
+            <xd-font-icon v-if="item.show_all" size="28" icon="iconxiashuangjiantou"
+                          @click="handleShowAll(item)"></xd-font-icon>
+            <xd-font-icon v-else size="28" icon="iconshuangjiantoushang" @click="handleCloseAll(item)"></xd-font-icon>
+          </view>
+        </view>
+        <view class="xd-order__item-number">
+          <view>
+            下单时间：{{item.placed_time}}
+          </view>
+          <view v-if="item.business_type!=='delivery' && !item['is_hide_price']">
+            <view>合计：</view>
+            <view>
+              <xd-unit :price="item.total_price"></xd-unit>
+            </view>
+          </view>
+        </view>
+        <view
+          class="xd-order__item-btn"
+          v-if="item.status_code === '3008' || item.status_code === '3007' || uiType === 4"
+        >
+          <view v-if="item.status_code === '3008' || item.status_code === '3007'">
+            <xd-button
+              type="default"
+              size="mini"
+              radius="10rpx"
+              @click="cannelOrder(item)"
+            >取消订单
+            </xd-button>
+          </view>
+          <view v-if="item.status_code === '3008' || item.status_code === '3007'">
+            <xd-button
+              type="primary"
+              size="mini"
+              radius="10rpx"
+              @click="toPay(item)"
+            >去付款
+            </xd-button>
+          </view>
+          <view v-if="uiType === 4 && item.status_code === '3000'">
+            <xd-button
+              type="primary"
+              size="mini"
+              radius="10rpx"
+              @click="toCashier(item)"
+            >再次购买
+            </xd-button>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  /**
+   * XdShopOrderList 我的订单插件控件
+   * @description 在使用该插件订单数据列表必须完全加载之后才能初始化该插件（不支持异步加载）
+   *
+   * @property {Boolean} disabled = [true|false]    是否禁用
+   * @property {String}  btnType                    按钮颜色类型（primary,default,subPrimary,danger,info,warning,success）
+   * @property {String}  radius                     圆角处理
+   * @property {String}  size                       按钮大小（default，mini）
+   * @event {Function} click                        按钮点击事件e
+   */
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdButton from "@/components/XdButton/XdButton";
+
+  export default {
+    components: {
+      XdButton,
+      XdUnit,
+      XdFontIcon
+    },
+    name: "XdEnterOrderList",
+    props: {
+      background: {
+        type: String,
+        default: '#fff'
+      },
+      type: {
+        type: String | Number,
+        required: true
+      },
+      nodata: {
+        type: String,
+        default: '您还没有相关订单'
+      },
+
+      list: {
+        type: Array | null,
+        required: true
+      },
+
+      productWidth: {
+        type: Number,
+        default: 150
+      },
+      productHeight: {
+        type: Number,
+        default: 150
+      }
+    },
+    data() {
+      return {
+        uiType: null, //选中订单类型
+
+        //订单列表数组列表
+        dataList: [],
+
+        //我的订单列表数据，null使用测试数据   array=> 使用正式数据
+        testData: [
+          {
+            "order_id": "m458170654005029364",
+            "placed_time": "2022-03-15 19:28:09",
+            "product_data": [
+              {
+                "product_id": 0,
+                "product_name": "六神花露水",
+                "ct": 1,
+                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
+                "ext": ""
+              },
+              {
+                "product_id": 0,
+                "product_name": "六神花露水",
+                "ct": 1,
+                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
+                "ext": ""
+              }, {
+                "product_id": 0,
+                "product_name": "六神花露水",
+                "ct": 1,
+                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
+                "ext": ""
+              },
+              {
+                "product_id": 0,
+                "product_name": "六神花露水",
+                "ct": 1,
+                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
+                "ext": ""
+              },
+            ],
+            "business_type": "store",
+            "business_type_name": "商城兑换",
+            "status": "3000",
+            "status_name": "支付完成",
+            "total_price": "25.00",
+            "order_url": "http://sandbox-store.jufubao.cn/main/order/detail?order_id=m458170654005029364"
+          },
+          {
+            "order_id": "m458170654005029365",
+            "placed_time": "2022-03-15 19:28:09",
+            "product_data": [
+              {
+                "product_id": 1,
+                "product_name": "六神花露水",
+                "ct": 1,
+                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
+                "ext": ""
+              }
+            ],
+            "business_type": "store",
+            "business_type_name": "商城兑换",
+            "status": "3000",
+            "status_name": "支付完成",
+            "total_price": "25.00",
+            "order_url": "http://sandbox-store.jufubao.cn/main/order/detail?order_id=m458170654005029364"
+          },
+          {
+            "order_id": "m458170654005029363",
+            "placed_time": "2022-03-15 19:28:09",
+            "product_data": [
+              {
+                "product_id": 0,
+                "product_name": "六神花露水",
+                "ct": 1,
+                "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153621543.jpg?x-oss-process=style\/200_200",
+                "ext": ""
+              }
+            ],
+            "business_type": "store",
+            "business_type_name": "商城兑换",
+            "status": "3000",
+            "status_name": "支付完成",
+            "total_price": "25.00",
+            "order_url": "http://sandbox-store.jufubao.cn/main/order/detail?order_id=m458170654005029364"
+          }
+        ]
+      }
+    },
+
+    watch: {
+      list(value) {
+        this.init(value);
+      },
+
+      type(value) {
+        this.uiType = value;
+        this.init(this.list)
+      }
+    },
+
+    created() {
+      this.$nextTick(() => {
+        this.uiType = this.type;
+        this.init(this.list);
+      })
+    },
+
+
+    methods: {
+      init(list) {
+        if (list === null) {
+          if (this.uiType === 0 || this.uiType === 4 || this.uiType === 1) {
+            this.testData.map((item, index, arr) => {
+              item.show_all = true
+              if (item.product_data.length > 3) {
+                item.allProduct = this.$xdUniHelper.cloneDeep(item.product_data)
+                item.cutProduct = this.$xdUniHelper.cloneDeep(item.product_data).splice(0, 3)
+                item.product_data = this.$xdUniHelper.cloneDeep(item.cutProduct)
+              }
+              arr.splice(index, 1, item)
+            })
+            this.dataList = this.$xdUniHelper.cloneDeep(this.testData);
+          } else {
+            this.dataList = [];
+          }
+        } else {
+          let tempList = this.$xdUniHelper.cloneDeep(list)
+          tempList.map((item, index, arr) => {
+            item.show_all = true
+            if (item.product_data.length > 3) {
+              item.allProduct = this.$xdUniHelper.cloneDeep(item.product_data)
+              item.cutProduct = this.$xdUniHelper.cloneDeep(item.product_data).splice(0, 3)
+              item.product_data = this.$xdUniHelper.cloneDeep(item.cutProduct)
+            }
+            arr.splice(index, 1, item)
+          })
+          this.dataList = tempList;
+        }
+      },
+
+
+      /**
+       * @description 去付款
+       * @param item
+       */
+      toPay(item) {
+        this.$emit('onToPay', item);
+      },
+
+      /**
+       * @description 取消订单
+       * @param item
+       */
+      cannelOrder(item) {
+        this.$emit('onCannelOrder', item);
+      },
+
+      /**
+       * @description 再次购买
+       * @param item
+       */
+      toCashier(item) {
+        this.$emit('onCashier', item);
+      },
+
+      /**
+       * @description 去订单详情
+       * @param item
+       */
+      toOrderDetail(item) {
+        console.log(item, 'iiiiiiii')
+        this.$emit('onOrderDetail', item);
+      },
+
+      handleShowAll(item) {
+        console.log(item, 'itemitem')
+        item.product_data = this.$xdUniHelper.cloneDeep(item.allProduct)
+        item.show_all = false
+      },
+
+      handleCloseAll(item) {
+        item.product_data = this.$xdUniHelper.cloneDeep(item.cutProduct)
+        item.show_all = true
+      }
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-nodata {
+    line-height: unit(300, rpx);
+    color: #999;
+    text-align: center;
+    font-size: @xd-font-size-base + 2;
+  }
+
+  .xd-order {
+    &__item {
+      margin-top: unit(20, rpx);
+
+      &-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        line-height: unit(60, rpx);
+        border-bottom: 1px solid #efefef;
+        padding: unit(10, rpx) unit(20, rpx);
+        font-size: @xd-font-size-base + 2;
+
+        & > view:last-child {
+          color: #999;
+        }
+
+      }
+
+
+      &-list {
+        font-size: @xd-font-size-base + 2;
+
+        &-all {
+          display: flex;
+          justify-content: center !important;
+          align-items: center !important;
+          font-size: @xd-font-size-base + 2;
+          padding-bottom: unit(20, rpx);
+        }
+
+        & > &-item {
+          display: flex;
+          align-items: center;
+
+          & > view:first-child {
+            border-radius: unit(10, rpx);
+            flex-shrink: 0;
+            margin-right: unit(30, rpx);
+
+            & > image {
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          & > view:nth-child(2) {
+            flex: 1;
+            width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+
+      }
+
+      &-number {
+        font-size: @xd-font-size-base + 2;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: unit(20, rpx);
+        border-top: 1px solid #efefef;
+
+        & > view:nth-child(2) {
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      &-btn {
+        height: unit(70, rpx);
+        display: flex;
+        justify-content: flex-end;
+        align-items: flex-start;
+        text-align: right;
+        padding: 0 unit(20, rpx) unit(10, rpx);
+
+
+        & > view {
+          margin-left: unit(20, rpx);
+        }
+      }
+    }
+  }
+
+</style>