gxd-uni-library-editx 1.0.0

package/src/components/XdStoreCashier/XdStoreCashier.vue

@@ -0,0 +1,526 @@
+<template>
+  <view class="xd-store-cashier" v-if="uiInfo">
+    <view
+      class="xd-store-cashier__address"
+      v-if="uiAddress"
+      @click="handleChange"
+    >
+      <view class="xd-store-cashier__address-left">
+        <view>
+          <text>{{uiAddress.name}}</text>
+          <text>{{uiAddress.phone}}</text>
+        </view>
+        <view>
+          <view
+            v-if="uiAddress['is_default']"
+            class="xd-store-cashier__address-left-tag"
+            :style="{background: $mainColor}"
+          >默认</view>
+          <view
+            v-if="uiAddress['tag'] === 1"
+            class="xd-store-cashier__address-left-tag"
+            :style="{background: $mainColor}"
+          >家庭</view>
+          <view
+            v-if="uiAddress['tag'] === 2"
+            class="xd-store-cashier__address-left-tag"
+            :style="{background: $mainColor}"
+          >公司</view>
+          <view>{{uiAddress|getAddressInfo}}</view>
+        </view>
+      </view>
+      <view class="xd-store-cashier__address-right">
+        <view>
+          <xd-font-icon
+            icon="iconjiantou"
+            size="30"
+            color="#666"
+          ></xd-font-icon>
+        </view>
+      </view>
+    </view>
+    <view class="xd-store-cashier__info">
+      <view class="xd-store-cashier__info-title">商品信息</view>
+      <view class="xd-store-cashier__info-content">
+        <view
+          class="xd-store-cashier__info-item"
+          v-if="uiInfo.product.length > 0"
+          v-for="(item,index) in uiInfo.product"
+          :key="index"
+        >
+          <view :style="{width: productWidth + 'rpx' , height: productHeight + 'rpx' }">
+            <image :src="item.thumb"></image>
+          </view>
+          <view>{{item.product_name}}</view>
+          <view>
+            <view>
+              <xd-unit
+                font-weight="normal"
+                :font-size="24"
+                :iocn-size="0.25"
+                :price="item['sale_price']"
+                color="#666"
+              ></xd-unit>
+            </view>
+            <view> x{{item.ct}}</view>
+          </view>
+        </view>
+      </view>
+      <view class="xd-store-cashier__info-label">
+        <view>商品总额</view>
+        <view>
+          <xd-unit font-weight="normal" :price="uiInfo['price']"></xd-unit>
+        </view>
+      </view>
+      <view class="xd-store-cashier__info-label">
+        <view>配送时间</view>
+        <view style="flex: 1; width: 0">
+          <xd-select
+            v-model="receiveTime"
+            v-if="uiReceiveTime.length > 0"
+            :list="uiReceiveTime"
+            :default-value="uiInfo['receive_time']"
+            justify-content="flex-end"
+            padding="0 0 0 20rpx"
+            :text-color="$mainColor"
+          >
+            <view class="xd-store-cashier__info-label-icon">
+              <xd-font-icon
+                icon="iconjiantou"
+                size="30"
+                color="#666"
+              ></xd-font-icon>
+            </view>
+
+          </xd-select>
+        </view>
+      </view>
+      <view class="xd-store-cashier__info-label">
+        <view>配送费</view>
+        <view>
+          <xd-unit :price="uiInfo['post_price']" font-weight="normal"></xd-unit>
+        </view>
+      </view>
+      <view
+        class="xd-store-cashier__info-label comment"
+      >
+        <view>订单备注</view>
+        <view>
+          <input
+            class="xd-store-cashier__input"
+            placeholder-class="xd-store-cashier__input-placeholder"
+            @confirm="doneInput"
+            type="text"
+            confirm-type="done"
+            placeholder="选填: 请先和商家协商一致"
+            :adjust-position="true"
+            v-model="comment"/>
+        </view>
+      </view>
+    </view>
+    <view class="xd-store-cashier__btn">
+      <view>实付金额:</view>
+      <view>
+        <xd-unit
+          :price="uiInfo['price']"
+          :font-size="36"
+          :iocn-size=".45"
+        ></xd-unit>
+      </view>
+      <view>
+        <xd-button
+          @click="toPay"
+          size="mini"
+          type="primary"
+          radius="10rpx"
+        >确认支付</xd-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdSelect from "@/components/XdSelect/XdSelect";
+  import XdButton from "@/components/XdButton/XdButton";
+
+  export default {
+    name: "XdStoreCashier",
+    components:{
+      XdFontIcon,
+      XdUnit,
+      XdSelect,
+      XdButton
+    },
+    props:{
+      address: {
+        type: Object | null,
+        default(){
+          return null
+        },
+      },
+      info: {
+        type: Object | null,
+        default() {
+          return null
+        },
+      },
+      productWidth: {
+        type: Number,
+        default: 180
+      },
+      productHeight: {
+        type: Number,
+        default: 180
+      }
+    },
+    filters: {
+      getAddressInfo(item) {
+        return `${item.province_name}${item.city_name}${item.area_name}${item.street_name}${item.address_detail}`
+      }
+    },
+    watch:{
+      address(val){
+        if (val) {
+          this.uiAddress = val;
+        }
+      }
+    },
+    data(){
+      return {
+        uiReceiveTime: [],
+        uiInfo: null,
+
+        //form
+        uiAddress: null,
+        receiveTime: null,
+        comment: '', //备注
+
+        //测试数据
+        testAddress: {
+          "select": true,
+          "id": 23843,
+          "name": "高世勇",
+          "province_code": "21",
+          "city_code": "1861",
+          "area_code": "1866",
+          "street_code": "27221",
+          "province_name": "\u6c5f\u897f",
+          "city_name": "\u4e0a\u9976\u5e02",
+          "area_name": "\u5a7a\u6e90\u53bf",
+          "street_name": "\u7d2b\u9633\u9547",
+          "address_detail": "aaaaa",
+          "phone": "15110208397",
+          "is_default": 1,
+          "tag": 1,
+          "tag_name": "\u5bb6\u5ead",
+          "dangaoss_addr_id": "1168352"
+        },
+        testReceiveTime: [
+          {
+            "value": 1,
+            "label": "\u5de5\u4f5c\u65e5\u8282\u5047\u65e5\u5747\u53ef\u6536\u8d27"
+          },
+          {
+            "value": 2,
+            "label": "\u5de5\u4f5c\u65e5"
+          },
+          {
+            "value": 3,
+            "label": "\u53cc\u4f11\u65e5\u53ca\u8282\u5047\u65e5"
+          }
+        ],
+        testInfo: {
+          price: 1259,
+          post_price: 0,
+          receive_time: '工作日节假日均可收货',
+          comment: '',
+          product: [
+            {
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210604101103940.jpg?x-oss-process=style\/200_200",
+              "product_name": "\u4e2d\u7cae \u798f\u4e34\u95e8\u5c0f\u53a8\u5473\u9053\u7c73\u9762\u793c\u76d2 4.5kg",
+              "sale_price": 134,
+              "ct": 6,
+              "product_id": 1420849,
+              "id": 427936,
+              "express_number": "",
+              "express_comment": "",
+              "express_Company": ""
+            }, {
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210428094834724.jpg?x-oss-process=style\/200_200",
+              "product_name": "\u6c47\u6d53\u8499\u7530\u7cae\u6cb9\u7ec4\u5408 \u91d1\u9f99\u9c7c+\u80e1\u59ec\u82b1",
+              "sale_price": 349,
+              "ct": 1,
+              "product_id": 1417296,
+              "id": 427937,
+              "express_number": "",
+              "express_comment": "",
+              "express_Company": ""
+            }, {
+              "thumb": "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119151624114.jpg?x-oss-process=style\/200_200",
+              "product_name": "JIAJIA\/\u52a0\u52a0 \u8c03\u5473\u54c1\u7ec4\u5408A\u6b3e 210g+900ml",
+              "sale_price": 53,
+              "ct": 2,
+              "product_id": 1409457,
+              "id": 427938,
+              "express_number": "",
+              "express_comment": "",
+              "express_Company": ""
+            }
+          ],
+        }
+
+      }
+    },
+    created() {
+      this.uiAddress = this.address;
+      if(this.address === null) {
+        this.uiAddress = this.$xdUniHelper.cloneDeep(this.testAddress);
+      }
+
+
+      this.uiInfo = this.info;
+      if (this.info === null) {
+        this.uiInfo = this.$xdUniHelper.cloneDeep(this.testInfo);
+      }
+
+      this.getReceiveTime()
+    },
+    methods:{
+
+      /**
+       * @description 切换配送地址
+       */
+      handleChange(){
+        this.$emit('onChangeAddress')
+      },
+
+
+      /**
+       * @description 获取配送时间段列表
+       */
+      getReceiveTime(){
+        this.$emit('onReceiveTime', (res)=>{
+          if(res === null) {
+            this.uiReceiveTime = this.$xdUniHelper.cloneDeep(this.testReceiveTime);
+          }
+          else{
+            this.uiReceiveTime = res;
+          }
+        })
+      },
+
+      toPay(){
+        this.$emit('onConfirm', {receive_time: this.receiveTime['value'], comment: this.comment})
+      },
+
+      doneInput() {
+        uni.hideKeyboard()
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-store-cashier {
+    padding-top: unit(20,rpx);
+    padding-bottom: unit(100,rpx);
+
+    &__address {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #efefef;
+      margin-bottom: unit(20, rpx);
+      padding: unit(20,rpx);
+      background: #fff;
+
+      &-select {
+        flex-shrink: 0;
+        width: unit(50, rpx);
+      }
+
+      &-left {
+        flex: 1;
+        width: 0;
+        text-align: left;
+        font-size: @xd-font-size-sm - 2;
+        line-height: unit(30, rpx);
+
+        &-tag {
+          padding: 0 unit(10, rpx);
+          color: #fff;
+          border-radius: unit(6, rpx);
+          transform: scale(.8);
+          flex-shrink: 0;
+        }
+
+        & > view:first-child {
+          margin-left: unit(6, rpx);
+          margin-bottom: unit(15, rpx);
+          font-size: @xd-font-size-lg;
+
+          & > text:last-child {
+            font-size: @xd-font-size-base;
+            margin-left: unit(20, rpx);
+          }
+        }
+
+        & > view:last-child {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+
+
+          & > view:last-child {
+            margin-left: unit(10, rpx);
+            flex: 1;
+            width: 0;
+          }
+
+        }
+      }
+
+      &-right {
+        flex-shrink: 0;
+        display: flex;
+        justify-content: flex-end;
+        padding-left: unit(20, rpx);
+
+        & > view {
+          width: unit(50, rpx);
+          height: unit(50, rpx);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-left: unit(10, rpx);
+        }
+      }
+    }
+
+    &__input {
+      width: 80%;
+      font-size: @xd-font-size-base;
+
+      &-placeholder {
+        font-size: @xd-font-size-base;
+      }
+    }
+
+    &__info {
+      background: #fff;
+
+      &-content {
+        border-bottom: 1px solid #eee;
+        padding-bottom: unit(30, rpx);
+      }
+
+      &-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: 0 unit(20,rpx) unit(20, rpx);
+        margin: unit(20,rpx) 0 0 ;
+        border-bottom: 1px solid #f8f8f8;
+
+        &:last-child {
+          padding-bottom: 0;
+          border-bottom: 0;
+        }
+
+        & > view:first-child {
+          flex-shrink: 0;
+          box-shadow: 0 0 unit(10,rpx) rgba(0,0,0,.08);
+          margin-right: unit(30,rpx);
+          overflow: hidden;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          & > image {
+            width: 96%;
+            height: 96%;
+          }
+        }
+
+        & > view:nth-child(2) {
+          flex: 1;
+          width: 0;
+          font-size: @xd-font-size-base;
+        }
+
+        & > view:last-child {
+          font-size: @xd-font-size-sm;
+          text-align: right;
+          margin-left: unit(30, rpx);
+          color: #666;
+        }
+      }
+
+      &-title {
+        border-bottom: 1px solid #eee;
+        height: unit(80, rpx);
+        line-height: unit(80, rpx);
+        font-size: @xd-font-size-lg;
+        padding: 0 unit(30, rpx);
+      }
+
+      &-label {
+        border-bottom: 1px solid #eee;
+        height: unit(80,rpx);
+        line-height: unit(80,rpx);
+        font-size: @xd-font-size-base;
+        padding: 0 unit(30,rpx);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        & > view:first-child {
+          flex-shrink: 0;
+        }
+
+        & > view:last-child {
+
+        }
+
+        &-icon {
+          margin-left: unit(10,rpx);
+        }
+
+        &.comment {
+          justify-content: flex-start;
+
+          & > view:last-child {
+            padding-left: unit(20, rpx);
+            flex: 1;
+            width: 0;
+          }
+
+        }
+      }
+    }
+
+    &__btn {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: unit(100,rpx);
+      padding: 0 unit(30, rpx);
+      box-shadow: 0 0 unit(10, rpx) rgba(0, 0, 0, .15);
+      background: #f1f1f1;
+      z-index: 3000;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      .safe-area();
+
+      & > view {
+        margin-left: unit(20,rpx);
+        font-size: @xd-font-size-lg;
+      }
+    }
+  }
+</style>