gxd-uni-library-editx 1.0.0

package/src/components/XdStoreOrderDetail/XdStoreOrderDetail.vue

@@ -0,0 +1,1571 @@
+<template>
+  <view class="xd-store" v-if="info !== null">
+    <view class="xd-store__header">
+      <view class="xd-store__header-bg" :style="{background: $mainColor}"></view>
+      <view class="xd-store__header-body">
+        <view class="xd-store__header-body-status">
+          <slot></slot>
+        </view>
+        <!--地址-->
+        <view class="xd-store__address" v-if="info['address']">
+          <view class="xd-store__address-icon">
+            <xd-font-icon size="60" icon="icondiqu" :color="$mainColor" ></xd-font-icon>
+          </view>
+          <view class="axd-store__address-content">
+            <view>
+              <text>{{info['address']['receipt_username']}}</text>
+              <text>{{info['address']['receipt_phone']}}</text>
+            </view>
+            <view>{{info['address']['receipt_address']}}</view>
+          </view>
+        </view>
+        <!--地址-->
+        <!--自提门店名称-->
+        <slot name="shop"></slot>
+        <!--自提门店名称-->
+        <!--子订单号-->
+        <view class="xd-store__subOrder" v-if="isSubOrder && info['subOrderList'] && !isEmpty(info['subOrderList'])">
+          <view
+            class="xd-store__subOrder-item"
+            v-for="(subOrder,index) in info['subOrderList']"
+            :key="index"
+          >
+            <view class="xd-store__subOrder-item-title">
+              <view>子订单：{{subOrder.order_id}}</view>
+              <view>{{subOrder.status_name}}</view>
+            </view>
+            <view class="xd-store__subOrder-item-content">
+              <view
+                class="xd-store__subOrder-item-content-list"
+                v-for="(list,ide) in subOrder['product_data']"
+                :key="ide"
+                v-if="ide < 2 || (ide >=2 && subOrder.more)"
+                @click="onProductDetail(subOrder,list)"
+              >
+                <view :style="{width: productWidth + 'rpx', maxHeight: productHeight + 'rpx'}">
+                  <image
+                    :style="{
+                      maxWidth: (productWidth - 10) + 'rpx',
+                      maxHeight: (productHeight - 10)+ 'rpx'
+                    }"
+                    :src="list.thumb"
+                    mode="widthFix"></image>
+                </view>
+                <view>{{list.product_name}}</view>
+                <view>
+                  <view>
+                    <xd-unit
+                      font-weight="normal"
+                      :font-size="26"
+                      :price="list.price"
+                      :icon-size=".35"
+                    ></xd-unit>
+                  </view>
+                  <view>x{{list.ct}}</view>
+                </view>
+              </view>
+            </view>
+            <view
+              class="xd-store__subOrder-item-more"
+              @click="subOrder.more = !subOrder.more"
+            >
+              <view
+                v-if="subOrder.product_data.length > 1"
+                :style="{
+                  marginTop: !subOrder.more? '-4rpx': '-20rpx'
+                }"
+              >
+                <xd-font-icon
+                  color="#bbb"
+                  :size="26"
+                  :icon="subOrder.more ? 'iconshuangjiantoushang': 'iconxiashuangjiantou'"
+                ></xd-font-icon>
+              </view>
+            </view>
+            <view
+              class="xd-store__subOrder-item-footer"
+              v-if="subOrder.express_data && subOrder.express_data.length > 0"
+            >
+              <view class="xd-store__subOrder-item-footer-btn">
+                <xd-button type="default" size="small" @click="handleExpress(subOrder.express_data,subOrder)">查看物流</xd-button>
+              </view>
+            </view>
+            <view class="xd-store__subOrder-item-shop" v-if="subOrder.shop_data">
+              <view>
+                <view>自提门店：</view>
+                <view>{{subOrder.shop_data.name}}</view>
+              </view>
+              <view>
+                <view>门店地址：</view>
+                <view>{{subOrder.shop_data.address}}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!--子订单号-->
+        <!--快递-->
+        <view class="xd-store__express" v-if="isSubOrder && info['express'] && !isEmpty(info['express'])">
+          <view @click="handleExpress(exItem)" v-for="(exItem,exIndex) in info['express']" :key="exItem['number']">
+            <view>
+              <xd-font-icon icon="icondistribution" size="45" :color="$mainColor"></xd-font-icon>
+            </view>
+            <view>
+              <view>
+                <view>{{exItem.name}}</view>
+                <view>({{exItem.number}})</view>
+              </view>
+              <view>{{exItem.comment}}</view>
+            </view>
+            <view>
+              <xd-font-icon icon="iconjiantou" size="22"></xd-font-icon>
+            </view>
+          </view>
+        </view>
+        <!--快递-->
+        <!--自提配送-->
+        <view class="xd-store__self" v-if="info['self']">
+          <view>
+            <xd-font-icon size="70" icon="iconmendianziqu" :color="$mainColor"></xd-font-icon>
+          </view>
+          <view>
+            <view>
+              <text>{{info['self']['receipt_username']}}</text>
+              <text>{{info['self']['receipt_phone']}}</text>
+            </view>
+          </view>
+        </view>
+        <!--自提配送-->
+        <!--电子码(号码+密码)-->
+        <template v-if="info['numberAndPassword'] && !isEmpty(info['numberAndPassword'])">
+          <view
+            class="xd-store__numberAndPassword"
+            v-for="(nap,nindex) in info['numberAndPassword']"
+            :key="nindex"
+          >
+            <view v-for="(item,codeIndex) in nap" :key="codeIndex">
+              <view>
+                <view>{{item['label']}}</view>
+                <view>{{item['value']}}</view>
+              </view>
+              <view>
+                <xd-button @click="copy(item['value'])" btn-type="primary" size="small">复制</xd-button>
+              </view>
+            </view>
+          </view>
+        </template>
+        <!--电子码(号码+密码)-->
+        <!--电子码（密码)-->
+        <view class="xd-store__code" v-if="info['code'] && !isEmpty(info['code'])">
+          <view v-for="(item,codeIndex) in info['code']" :key="codeIndex">
+            <view>
+              <view>{{item['label']}}</view>
+              <view>{{item['value']}}</view>
+            </view>
+            <view>
+              <xd-button @click="copy(item['value'])" btn-type="primary" size="small">复制</xd-button>
+            </view>
+          </view>
+        </view>
+        <!--电子码（密码)-->
+        <!--二维码-->
+        <view
+          class="xd-store__codeimg"
+          v-if="info['twocode'] && !isEmpty(info['twocode'])"
+        >
+          <view v-for="(item,codeIndex) in info['twocode']" :key="codeIndex">
+            <image class="twocode" :src="item['value']"></image>
+            <view>{{item['label']}}</view>
+          </view>
+        </view>
+        <!--二维码-->
+        <!--条形码-->
+        <view
+          class="xd-store__codeimg"
+          v-if="info['barcode']  && !isEmpty(info['barcode'])"
+        >
+          <view v-for="(item,codeIndex) in info['barcode']" :key="codeIndex">
+            <image mode="aspectFit" class="barcode" :src="item['value']"></image>
+            <view>{{item['label']}}</view>
+          </view>
+        </view>
+        <!--条形码-->
+      </view>
+      <view class="xd-store__sendinfo" v-if="info['send'] && info['send']['label']">
+        <view>{{info['send']['label']}}</view>
+        <view :style="{color: $mainColor}">{{info['send']['value']}}</view>
+      </view>
+      <!--商品-->
+      <view class="xd-store__products" v-if="isSubOrder && info['products'] && !isEmpty(info['products'])">
+        <view class="xd-store__products-title">
+          <view class="xd-store__products-title-left" v-if="info['shop_logo']">
+            <image :src="info['shop_logo']"></image>
+          </view>
+          <view class="xd-store__products-title-right">
+            <view @click="handleTitleClick(info)">
+              <view v-if="info['title']">{{info['title']}}</view>
+              <view v-if="info['titleIcon']">
+                <xd-font-icon size="20" icon="iconjiantou"></xd-font-icon>
+              </view>
+            </view>
+            <view
+              class="xd-store__products-address"
+              v-if="info['shop_address']"
+            >{{info['shop_address']}}
+            </view>
+          </view>
+          <view
+            class="xd-store__products-line"
+            :style="{background: $mainColor}"
+            v-if="info['title'] || info['titleIcon'] || info['shop_address']"
+          ></view>
+        </view>
+        <view
+          class="xd-store__products-item"
+          v-for="(item,index) in info['products']"
+          :key="index"
+          @click="onProductDetail(info,item)"
+        >
+          <view class="xd-store__products-item-image">
+            <xd-image :width="productWidth" :height="productHeight" :image="item['thumb']"></xd-image>
+          </view>
+          <view class="xd-store__products-item-body" :style="{minHeight: productHeight + 'rpx'}">
+            <view>{{item['product_name']}}</view>
+            <view>{{item['product_sku_text']}}</view>
+            <view class="app-my-order__products-item-body-price">
+              <view>
+                <xd-unit
+                  v-if="item['price']"
+                  :price="item['price']"
+                  font-weight="normal"
+                  :iocn-size="0.3"
+                  :font-size="24"
+                ></xd-unit>
+              </view>
+              <view>x {{item['num']}}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!--商品-->
+      <!--自定义内容显示模块-->
+      <view class="xd-store__custom" v-if="info['makeInfo'] && info['makeInfo'].length > 0">
+        <view class="xd-store__custom-title">{{info['makeInfoTitle']}}</view>
+        <view class="xd-store__custom-content">
+          <view class="xd-store__custom-item" v-for="(makeItem, makeIndex) in info['makeInfo']" :key="makeIndex">
+            <view>{{makeItem.label}}</view>
+            <view>{{makeItem.value}}</view>
+          </view>
+        </view>
+
+      </view>
+      <!--自定义内容显示模块 结束-->
+      <!--支付信息-->
+      <view class="xd-store__price"
+        v-if="info['card'] ||
+        info['price'] ||
+        info['total_price'] ||
+        info['post_price'] ||
+        info['pay_price']
+      ">
+        <!--卡消费-->
+        <view class="xd-store__price-card" v-if="info['card'] && info['card'].length > 0">
+          <view class="xd-store__price-card-title">
+            <view>使用卡列表</view>
+            <view>
+              <xd-unit
+                v-if="info['card_price']"
+                :price="info['card_price']"
+                color="#333"
+                :font-size="36"
+                :iocn-size=".25"
+              ></xd-unit>
+            </view>
+          </view>
+          <view>
+            <view class="xd-store__price-card-item" v-for="(item,cardIndex) in info['card']" :key="cardIndex">
+              <view>{{item['card_type_name']}}</view>
+              <view>
+                <view>{{item['card_number']}}</view>
+                <view>
+                  <xd-unit
+                    :is-show-icon="false"
+                    :price="item['point']"
+                    :font-size="25"
+                    :unit="null"
+                  ></xd-unit>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="xd-store__price-line" :style="{background: $mainColor}"></view>
+        </view>
+        <!--卡消费-->
+        <!--消费数据-->
+        <view class="xd-store__price-label">
+          <view v-if="info['price'] !== undefined">
+            <view>商品总额</view>
+            <view>
+              <xd-unit :price="info['price']" :font-size="26"></xd-unit>
+            </view>
+          </view>
+          <view v-if="info['post_price'] !== undefined">
+            <view>配送费</view>
+            <view>
+              <xd-unit :price="info['post_price']" :font-size="26"></xd-unit>
+            </view>
+          </view>
+          <view v-if="info['total_price'] !== undefined">
+            <view>合计</view>
+            <view>
+              <xd-unit :price="info['total_price']" :font-size="32"></xd-unit>
+            </view>
+          </view>
+          <view v-if="info['pay_price'] !== undefined">
+            <view>实付款</view>
+            <view>
+              <xd-unit :is-show-icon="false" :price="info['pay_price']" :font-size="32" :unit="info['pay_unit']"></xd-unit>
+            </view>
+          </view>
+        </view>
+        <!--消费数据 结束-->
+      </view>
+      <!--支付信息-->
+      <!--自定义金额显示-->
+      <view class="xd-store__price-show" v-if="info['orderPrice']">
+        <view
+          v-for="(oPrice,oIndex) in info['orderPrice']"
+          :key="oIndex"
+          :style="{
+            justifyContent:  oPrice.algin,
+          }"
+        >
+          <view v-if="oPrice['type'] === 'line'" class="xd-store__price-show-line"></view>
+          <template v-else>
+            <view
+              :style="{
+              fontSize: oPrice['size'] + 'rpx',
+              color:  oPrice['color'] || '#333'
+            }"
+            >{{oPrice['label']}}
+            </view>
+            <view>
+              <xd-unit
+                v-if="oPrice['unit']"
+                :price="oPrice['value']"
+                :font-size="oPrice['size'] || 26"
+                :is-show-icon="false"
+                :icon-size="0.35*Number(oPrice['size'])/32"
+                :unit="oPrice['unit']"
+              ></xd-unit>
+              <xd-unit
+                v-else
+                :price="oPrice['value']"
+                :font-size="oPrice['size'] || 26"
+                :is-show-icon="oPrice['isShowIcon'] ===undefined? true:oPrice['isShowIcon']"
+                :icon-size="0.35*Number(oPrice['size'])/32"
+              ></xd-unit>
+            </view>
+          </template>
+        </view>
+      </view>
+      <!--自定义金额显示 结束-->
+      <!--支持门店-->
+      <slot name="supportshop"></slot>
+      <!--支持门店-->
+      <!--订单信息-->
+      <view class="xd-store__order">
+        <view
+          class="xd-store__order-item"
+          v-for="(order,orderInde) in info['orderInfo']"
+          :key="orderInde"
+        >
+          <view>{{order['label']}}</view>
+          <view v-if="order['unit'] === true">
+            <xd-unit
+              :price="order['value']"
+              font-weight="normal"
+              :iocn-size="0.3"
+              :font-size="26"
+            ></xd-unit>
+          </view>
+          <view v-else>{{order['value']}}</view>
+        </view>
+      </view>
+      <!--订单信息-->
+      <!--插槽内容-->
+      <slot name="footer"></slot>
+      <!--插槽内容-->
+      <!--订单操作按钮-->
+      <template v-if="info['btn'] && !isEmpty(info.btn)">
+        <view class="xd-store__btn-block"></view>
+        <view
+          class="xd-store__btn"
+          :class="{
+            center: info['btn'].length === 1,
+            right: info['btn'].length > 1
+          }">
+          <view v-for="(btn,btnIndex) in info['btn']" :key="btnIndex">
+            <xd-button
+              @click="handleBtnClick(info,btn)"
+              :btn-type="btn['type']"
+              size="mini"
+              :radius="btn['radius']"
+            >{{btn['label']}}
+            </xd-button>
+          </view>
+        </view>
+      </template>
+      <!--订单操作按钮-->
+    </view>
+  </view>
+</template>
+
+<script>
+
+  /**
+   * XdStoreOrderDetail 我的订单详情
+   * @description 我的订单详情
+   * @property {Object} detail 订单详情数据接口查看测试数据
+   *
+   * @event {Function} onBtn {item, btn} 点击取消按钮与去付款事件
+   * @event {Function} onProductDetail {order, btn} 点击商品事件
+   * @event {Function} onExpress {express} 点击快递列表事件
+   */
+
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import xdImage from "@/components/XdImage/XdImage";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdButton from "@/components/XdButton/XdButton";
+
+
+  export default {
+    name: "XdStoreOrderDetail",
+    components: {
+      XdButton,
+      XdFontIcon,
+      xdImage,
+      XdUnit
+    },
+    props: {
+      detail: {
+        type: Object | null,
+        required: true
+      },
+
+      productWidth: {
+        type: Number,
+        default: 160
+      },
+      productHeight: {
+        type: Number,
+        default: 160
+      }
+    },
+
+    computed:{
+      isSubOrder(){
+        let flag = false;
+        if(this.info !== null
+          && this.info['subOrderList']
+          && this.info['subOrderList'].length > 0) {
+          flag = true
+        }
+        return flag
+      }
+    },
+
+
+    data(){
+      return {
+        info: null,
+
+        //测试数据
+        testData:{
+          title: '廊坊美年大健康体检中心(廊坊分院)', //店铺名称 （必填）
+          shop_address: '北京北京石景山区八大处科技园区小区AQ1-1-2000', //是否显示店铺地址
+          shop_logo: 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20210126/26cfc49abbdc33eeb187ca22730b995a.jpg', ////是否显示店铺logo
+
+          //电子码 （密码）
+          code: [
+            {label: "兑换码：", value: "jfbcake.oss-cn-beijing.aliyuncs.comliyuncs.com"},
+            {label: "兑换码：", value: "45122"}
+          ],
+
+          //电子码 （号码 + 密码）
+          numberAndPassword: [
+            [{label: "券号：", value: "1515"}, {label: "密码：", value: "45122"}],
+            [{label: "券号：", value: "1515"}, {label: "密码：", value: "45122"}]
+          ],
+
+          //条形码
+          barcode: [
+            {
+              label: "券号:cardcardcardcard0001 密码：21337",
+              value: "http://sandbox-m-cake.jufubao.cn/rest/3.0/cakeshop/order/order/barcode_img?c=&p=21337"
+            },
+            {
+              label: "券号:cardcardcardcard0001 密码：21337",
+              value: "http://sandbox-m-cake.jufubao.cn/rest/3.0/cakeshop/order/order/barcode_img?c=cardcardcardcard0001&p=21337"
+            }
+          ],
+
+          //二维码
+          twocode: [
+            {
+              label: "券号:cardcardcardcard0001 密码：21337",
+              value: "https://c.jufubao.cn/web/pb/qrcode/image?content=21337"
+            },
+            {
+              label: "券号:cardcardcardcard0001 密码：21337",
+              value: "https://c.jufubao.cn/web/pb/qrcode/image?content=21337"
+            }
+          ],
+
+          //地址管理
+          address: {
+            receipt_address: "北京北京石景山区八大处科技园区小区AQ1-1-2000",
+            receipt_phone: "15110208397",
+            receipt_username: "高世勇",
+          },
+
+          //订单信息
+          orderInfo: [
+            {label: '订单号：', value: '12588744664462252'},
+            {label: '下单时间：', value: '2020-08-15 10:25:56'},
+            {label: '确认时间：', value: '2020-08-15 12:00:00'},
+            {label: '支付时间：', value: ' 2020-08-15 12:00:00'},
+            {label: '发货时间：', value: '2020-08-15 12:00:00'},
+            {label: '订单备注：', value: '通过记录自己从纽约出发到洛杉矶，再飞到中国的经历'},
+          ],
+
+          //订单消费数据
+          price: 630, //商品总额
+          total_price: 630, //商品总额
+          post_price: 0, //配送费
+          pay_price: 0, //实付款
+
+          //订单消费金额(algin:space-between,flex-start, flex-end)
+          /**
+           * @description 订单消费金额
+           * @property orderPrice.algin 对齐方式： space-between（两端） flex-start（左对齐） flex-end（右对齐）
+           * @property orderPrice.size 字体大小 默认: 26rpx
+           * @property orderPrice.color 字体颜色 默认：#999
+           * @property orderPrice.unit 启用自定义单位 默认：无
+           * @property  orderPrice.type 显示线
+           */
+          orderPrice: [
+            {label: '商品总额', value: 300, algin: 'space-between', size: 26},
+            {label: '消费卡', value: 300 , algin: 'space-between', size: 26},
+            {label: '微信支付：', value: 30, unit:"元", algin: 'space-between', size: 26},
+            {label: '快递运费：', value: 0, algin: 'flex-end', size: 26},
+            {type: 'line'}, //显示线
+            {label: '实付款：', value: 300, algin: 'flex-end', size: 32},
+            {label: '合计：', value: 300, algin: 'flex-end', size: 32},
+          ],
+
+          /**
+           * @description 订单自定义信息显示模块
+           */
+          makeInfoTitle: '预约信息',
+          makeInfo:[
+            {label: '姓名：', value: '张三'},
+            {label: '日期：', value: '2020-08-15'},
+            {label: '证件类型：', value: '身份证'},
+            {label: '证件号码：', value: '1310********7844'},
+            {label: '婚姻状态：', value: '未婚'},
+            {label: '手机号码：', value: '131*******452'},
+            {label: '订单备注：', value: '通过记录自己从纽约出发到洛杉矶，再飞到中国的经历'},
+          ],
+
+          //显示操作按钮（选填）（不显示按钮btn为空数组）
+          btn: [
+            {'label': '取消订单', value: 1, type: 'info', radius: '12rpx'},
+            {'label': '去付款', value: 2, type: 'primary', radius: '12rpx'},
+          ],
+
+
+
+          /**子订单模块 与 商品，快递列表 二选一******/
+          //商品列表
+          products: [
+            {
+              id: 161078,
+              num: 3, //产品数量
+              product_id: 423457, //商品ID （必填）
+              product_name: "金龙鱼 醇香菜籽油 5L*4桶", //产品名称 （必填）
+              product_uuid: '5f71e590-ee83-11ea-b9ba-debcd2503074', //产品uuid （选填）
+              product_sku: "0", //产品型号ID （选填）
+              product_sku_text: "", //产品型号名称 （选填）
+              price: 312, //产品价格 （必填）
+              thumb: "https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20210126/26cfc49abbdc33eeb187ca22730b995a.jpg?x-oss-process=style/400_400" //产品缩略图 （必填）
+            }
+          ],
+
+
+          //快递列表
+          express: [
+            {comment: "不在数据列表中的数据可以自行扩张", company: 6, name: "韵达", number: "JT51210012120"},
+          ],
+
+          /**
+           * @description 订单菜单信息
+           */
+          subOrderList:[
+            {
+              "status": "3000",
+              "status_name": "支付完成",
+              "total_price": "100.00",
+              "order_id": "m458170654005029364",
+              "placed_time": "2022-03-15 19:28:09",
+              "more": false,
+              "product_data": [
+                {
+                  "product_id": 0,
+                  "product_name": "六神花露水",
+                  "ct": 1,
+                  "thumb": "https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20210126/26cfc49abbdc33eeb187ca22730b995a.jpg",
+                  "ext": "",
+                  "price": "25.00",
+                },
+                {
+                  "product_id": 0,
+                  "product_name": "六神花露水",
+                  "ct": 1,
+                  "thumb": "http://pic.lvmama.com//uploads/pc/place2/2017-05-16/016f9813-f456-4c9d-9d63-0ceb5970187d.jpg",
+                  "ext": "",
+                  "price": "25.00",
+                }, {
+                  "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": "",
+                  "price": "25.00",
+                },
+                {
+                  "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": "",
+                  "price": "25.00",
+                },
+              ],
+              "express_data": [
+                {name: '百世快递', number: 'BS1212212'},
+                {name: '顺丰快递', number: 'FS97878787'},
+              ],
+              "shop_data": {
+                "address": '河北省廊坊市三河市鑫乐汇一层',
+                "name": '大牌烘焙一店',
+              }
+            }
+          ],
+          /**子订单模块 与 商品，快递列表 二选一******/
+
+          //配送模块
+          send: {
+            label: '专人配送/配送时间',
+            value: '2020-08-16 11:30:00'
+          },
+
+          //消费卡列表
+          card: [
+            {
+              card_number: "101070100032692",
+              card_type_name: "聚福宝福卡测试",
+              point: "45"
+            }
+          ],
+        }
+      }
+    },
+
+    created() {
+      this.init();
+    },
+
+
+
+    methods:{
+      init(){
+        let info = null;
+        if(this.detail === null) {
+          info = this.$xdUniHelper.cloneDeep(this.testData);
+        }
+        else if(this.$xdUniHelper.checkVarType(this.detail) === 'object') {
+          info = this.$xdUniHelper.cloneDeep(this.detail);
+        }
+
+        if(info && info.subOrderList && info.subOrderList.length > 0) {
+          info.subOrderList = info.subOrderList.map(item=>{
+            return {...item, more: false}
+          })
+        }
+        this.info = info
+      },
+
+      /***
+       * @description 点击标题事件
+       */
+      handleTitleClick(item) {
+        this.$emit('onTitle', item);
+      },
+
+
+      /**
+       * @description 是否为空
+       * @param data
+       */
+      isEmpty(data){
+        return this.$xdUniHelper.isEmpty(data);
+      },
+
+      /**
+       *@description 复制功能
+       * @param  text
+       */
+      copy(text){
+        // #ifdef H5
+        this.$copyText(text).then(
+          res => {
+            uni.showToast({
+              title: '复制成功'
+            })
+          }
+        )
+        // #endif
+        // #ifndef H5
+        uni.setClipboardData({
+          data: text,
+          success: () => {
+            uni.showToast({
+              title: '复制成功'
+            })
+          }
+        })
+        // #endif
+      },
+
+      /**
+       * @description 点击按钮事件
+       * @param order
+       * @param btn
+       */
+      handleBtnClick(order, btn) {
+        this.$emit('onBtn', {order, btn});
+      },
+
+      /**
+       * @description 点击商品事件
+       * @param order
+       * @param product
+       */
+      onProductDetail(order, product) {
+        this.$emit('onProductDetail', {order, product});
+      },
+
+      /**
+       * @description 点击查看快递详情
+       * @param express
+       */
+      handleExpress(express,item){
+        this.$emit('onExpress', express,item);
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .nopadding {
+    padding-bottom: 0!important;
+    margin-bottom: 0!important;
+  }
+
+  .xd-store {
+    &__header {
+      position: relative;
+
+      & > view {
+        position: relative;
+        z-index: 2;
+      }
+
+      &-body {
+        padding: 0 unit(20, rpx);
+        box-sizing: border-box;
+
+        &-status {
+          height: unit(120, rpx);
+        }
+
+
+        &-express {
+          margin-top: unit(20, rpx);
+          background: #ffffff;
+          padding: unit(20, rpx) unit(34, rpx);
+          color: #333;
+          font-size: @xd-font-size-base;
+
+          & > view {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          }
+
+        }
+      }
+
+      &-bg {
+        position: absolute !important;
+        height: unit(200, rpx);
+        left: 0;
+        top: 0;
+        right: 0;
+        z-index: 1;
+        border-radius: 0 0 unit(20, rpx) unit(20, rpx);
+
+      }
+    }
+
+    &__subOrder {
+      margin-top: unit(20,rpx);
+
+      &-item {
+        .uni-box-radius();
+        background: #fff;
+        padding: unit(20, rpx) unit(20, rpx) unit(10, rpx);
+        margin-bottom: unit(20, rpx);
+
+        &:last-child {
+          margin-bottom: unit(0, rpx);
+        }
+
+        &-title {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          border-bottom: 1px solid #e5e5e5;
+          line-height: unit(40,rpx);
+          padding-bottom: unit(15,rpx);
+          margin-bottom: unit(15,rpx);
+
+          & > view:first-child {
+            font-size: @xd-font-size-base + 4;
+          }
+
+          & > view:last-child {
+            flex-shrink: 0;
+            margin-left: unit(15,rpx);
+            font-size: @xd-font-size-base;
+            color: #666;
+          }
+        }
+
+        &-content {
+          &-list {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: unit(15,rpx);
+
+            &:last-child {
+              margin-bottom: unit(0, rpx);
+            }
+
+            & > view:first-child {
+              display: flex;
+              flex-shrink: 0;
+              justify-content: center;
+              align-items: center;
+              box-sizing: border-box;
+              border:1px solid #efefef;
+              padding: unit(5,rpx);
+              overflow: hidden;
+
+              & > image {
+                max-width: unit(110,rpx);
+              }
+            }
+
+            & > view:nth-child(2) {
+              flex: 1;
+              width: 0;
+              font-size: @xd-font-size-base + 2;
+              padding: 0 unit(15,rpx);
+              color: #666;
+            }
+
+            & > view:last-child {
+              flex-shrink: 0;
+              min-width: unit(100,rpx);
+              text-align: right;
+              font-size: unit(26,rpx);
+              color: #999;
+            }
+          }
+        }
+
+        &-more {
+          height: unit(2,rpx);
+          position: relative;
+          margin: unit(15,rpx) 0 unit(15,rpx);
+          background: #e5e5e5;
+          display: flex;
+          justify-content:center;
+          align-items: flex-start;
+
+          & > view {
+            margin-top: unit(-4,rpx);
+            background: #fff;
+          }
+        }
+
+        &-footer {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          padding-bottom: unit(10,rpx);
+        }
+
+        &-shop {
+          & > view {
+            font-size: @xd-font-size-base;
+            &:first-child {
+              color: #333;
+            }
+            &:last-child {
+              padding-top: unit(10,rpx);
+              color: #666;
+            }
+
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+
+            & > view:first-child {
+              flex-shrink: 0;
+            }
+
+            & > view:last-child {
+              flex: 1;
+              width: 0;
+
+            }
+          }
+        }
+      }
+    }
+
+    &__express {
+      font-size: @xd-font-size-base;
+      background: #fff;
+      padding: 0;
+      margin-top: unit(20, rpx);
+
+      & > view {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #efefef;
+        padding: 0 unit(34, rpx);
+        line-height: unit(40, rpx);
+
+        &:last-child {
+          border-bottom: 0;
+        }
+
+        & > view:first-child {
+          width: unit(60, rpx);
+          height: unit(60, rpx);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-shrink: 0;
+          margin-right: unit(34, rpx);
+        }
+
+        & > view:nth-child(2) {
+          flex: 1;
+          width: 0;
+          padding: unit(20, rpx) 0;
+
+          & > view:first-child {
+            line-height: unit(40, rpx);
+            font-size: @xd-font-size-lg;
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-end;
+
+            & > view:last-child {
+              font-size: @xd-font-size-base;
+              margin-left: unit(20, rpx);
+            }
+          }
+
+          & > view:last-child {
+            font-size: @xd-font-size-base;
+            color: #999;
+          }
+        }
+
+        & > view:last-child {
+          flex-shrink: 0;
+          margin-left: unit(34, rpx);
+        }
+      }
+    }
+
+    &__address {
+      background: #ffffff;
+      .uni-box-radius();
+      padding: unit(20, rpx) unit(34, rpx);
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      color: #333;
+
+      & > view:first-child {
+        margin-right: unit(30, rpx);
+      }
+
+      & > view:last-child {
+        & > view:first-child {
+          font-size: @xd-font-size-lg;
+          padding-bottom: unit(10, rpx);
+
+          > text:last-child {
+            font-size: @xd-font-size-base + 2;
+            color: #999;
+            margin-left: unit(10, rpx);
+          }
+        }
+
+        & > view:last-child {
+          font-size: @xd-font-size-base;
+        }
+      }
+    }
+
+    &__self {
+      background: #ffffff;
+      .uni-box-radius();
+      padding: unit(20, rpx) unit(34, rpx);
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      color: #333;
+
+      & > view:first-child {
+        margin-right: unit(30, rpx);
+      }
+
+      & > view:last-child {
+        & > view:first-child {
+          font-size: @xd-font-size-lg;
+
+          > text:last-child {
+            font-size: @xd-font-size-base + 2;
+            color: #999;
+            margin-left: unit(10, rpx);
+          }
+        }
+
+        & > view:last-child {
+          font-size: @xd-font-size-base;
+        }
+      }
+    }
+
+    &__sendinfo {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: unit(20, rpx) unit(20,rpx) 0;
+      .uni-box-radius();
+      background: #fff;
+      padding: unit(20, rpx);
+      font-size: @xd-font-size-lg;
+    }
+
+    &__numberAndPassword {
+      .uni-box-radius();
+      margin-top: unit(20, rpx);
+      background: #fff;
+      font-size: @xd-font-size-base;
+      padding: unit(20, rpx);
+      box-sizing: border-box;
+
+      & > view {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom: unit(20, rpx);
+
+        &:last-child {
+          padding-bottom: 0;
+        }
+
+        & > view:first-child {
+          flex: 1;
+          .uni-break-word();
+          margin-right: unit(20, rpx);
+          background: #f8f8f8;
+          padding: unit(10, rpx);
+          border-radius: unit(15, rpx);
+          font-size: @xd-font-size-lg - 2;
+
+          &:hover {
+            background: #ececec;
+          }
+
+          display: flex;
+          justify-content: center;
+          align-items: flex-start;
+
+          & > view:first-child {
+            flex-shrink: 0;
+          }
+
+          & > view:last-child {
+            flex: 1;
+            width: 0;
+          }
+        }
+
+        & > view:last-child {
+          width: unit(120, rpx);
+        }
+      }
+    }
+
+    &__code {
+      .uni-box-radius();
+      margin-top: unit(20, rpx);
+      background: #fff;
+      font-size: @xd-font-size-base;
+      padding: unit(20, rpx);
+      box-sizing: border-box;
+
+      & > view {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom: unit(20, rpx);
+
+        &:last-child {
+          padding-bottom: 0;
+        }
+
+        & > view:first-child {
+          flex: 1;
+          .uni-break-word();
+          margin-right: unit(20, rpx);
+          background: #f8f8f8;
+          padding: unit(10, rpx);
+          border-radius: unit(15, rpx);
+
+          &:hover {
+            background: #ececec;
+          }
+          display: flex;
+          justify-content: center;
+          align-items: flex-start;
+
+          & > view:first-child {
+            flex-shrink: 0;
+          }
+
+          & >view:last-child {
+            flex: 1;
+            width: 0;
+          }
+        }
+
+        & > view:last-child {
+          width: unit(120, rpx);
+        }
+      }
+
+      & .twocode {
+        width: unit(160, rpx);
+        height: unit(160, rpx);
+      }
+
+      & .barcode {
+        width: unit(320, rpx);
+        height: unit(160, rpx);
+      }
+    }
+
+    &__codeimg {
+      .uni-box-radius();
+      margin-top: unit(20, rpx);
+      background: #fff;
+      font-size: @xd-font-size-base;
+      padding: unit(20, rpx);
+      box-sizing: border-box;
+
+      & > view {
+        text-align: center;
+        padding-bottom: unit(10,rpx);
+        margin-bottom: unit(10,rpx);
+        border-bottom: 1px solid #efefef;
+        &:last-child {
+          border-bottom: 0;
+          padding-bottom: 0;
+        }
+
+        & > view:first-child {
+          flex: 1;
+          .uni-break-word();
+          margin-right: unit(20, rpx);
+          background: #f8f8f8;
+          padding: unit(10, rpx);
+          border-radius: unit(15, rpx);
+
+          &:hover {
+            background: #ececec;
+          }
+        }
+
+        & > view:last-child {
+          width: 100%;
+          text-align: center;
+          font-size: @xd-font-size-lg;
+        }
+      }
+
+      .twocode {
+        width: unit(300, rpx);
+        height: unit(300, rpx);
+      }
+
+      .barcode {
+        max-height: unit(160, rpx);
+        max-width: 100%;
+      }
+    }
+
+    &__order {
+      .uni-box-radius();
+      margin: unit(20, rpx);
+      background: #fff;
+      padding: unit(20, rpx);
+
+      &-item {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        padding: unit(10, rpx) 0;
+        font-size: @xd-font-size-base;
+
+        &:last-child {
+          padding-bottom: 0;
+        }
+
+        &:first-child {
+          padding-top: 0;
+        }
+
+        & > view:first-child {
+          color: #666;
+          min-width: unit(130, rpx);
+          text-align: right;
+        }
+
+        & > view:last-child {
+          flex: 1;
+        }
+      }
+
+    }
+
+    &__btn {
+      position: fixed !important;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: #fff;
+      border-top: 1px solid #ececec;
+      height: unit(100, rpx);
+      padding: 0 unit(34, rpx);
+      .safe-area();
+
+
+      &.center {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        & > view {
+          margin-left: 0!important;
+          width: 100%;
+        }
+      }
+
+      &.right {
+        justify-content: flex-end;
+        display: flex;
+        align-items: center;
+      }
+
+
+      & > view:first-child {
+
+      }
+
+      & > view:last-child {
+        margin-left: unit(20, rpx);
+      }
+
+      &-block {
+        height: unit(100, rpx);
+      }
+    }
+
+    &__products {
+      .uni-box-radius();
+      margin: unit(20, rpx) unit(20, rpx) 0;
+      background: #fff;
+      padding: unit(20, rpx);
+
+      &-line {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 1px;
+        opacity: 0.2;
+      }
+
+      &-address {
+        font-size: @xd-font-size-sm;
+        color: #999;
+      }
+
+      &-title {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        position: relative;
+        padding-bottom: unit(15, rpx);
+        font-size: @xd-font-size-base + 2;
+
+
+        &-left {
+          width: unit(60,rpx);
+          height: unit(60,rpx);
+          flex-shrink: 0;
+          margin-right: unit(20,rpx);
+          border-radius: unit(10,rpx);
+          overflow: hidden;
+
+          &>image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        &-right {
+          flex: 1;
+          width: 0;
+
+
+          & > view:first-child {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+
+            & > view:first-child {
+              flex: 1;
+            }
+          }
+        }
+      }
+
+      &-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: unit(20, rpx) 0;
+        border-bottom: 1px solid #ececec;
+
+        &:last-child {
+          border-bottom: 0;
+          padding-bottom: 0;
+        }
+
+
+        &-image {
+          margin-right: unit(20, rpx);
+        }
+
+        &-body {
+          flex: 1;
+          position: relative;
+          font-size: @xd-font-size-base + 2;
+
+          & > view:first-child {
+            .uni-max-cut(3, 120);
+            line-height: unit(40,rpx);
+          }
+
+          & > view:nth-child(2) {
+            color: #999;
+            font-size: @xd-font-size-sm;
+            margin-top: unit(10, rpx);
+          }
+
+          & > view:last-child {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            & > view:last-child {
+              font-size: @xd-font-size-base;
+            }
+          }
+
+        }
+      }
+    }
+
+    &__price {
+      .uni-box-radius();
+      margin: unit(20, rpx) unit(20, rpx) 0;
+      padding: unit(20, rpx);
+      background: #fff;
+
+      &-line {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 1px;
+        opacity: 0.2;
+      }
+
+      &-card {
+        position: relative;
+        padding-bottom: unit(20, rpx);
+        margin-bottom: unit(20, rpx);
+        box-sizing: border-box;
+
+
+        &-title {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: @xd-font-size-lg;
+        }
+
+        &-item {
+          font-size: @xd-font-size-sm;
+          padding: unit(10, rpx) 0;
+          border-bottom: 1px solid #eee;
+
+          &:last-child {
+            border-bottom: 0;
+            padding-bottom: 0;
+          }
+
+          & > view:first-child {
+            color: #999;
+          }
+
+          & > view:last-child {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          }
+        }
+      }
+
+      &-label {
+        & > view {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: @xd-font-size-base;
+          color: #999;
+          line-height: unit(50,rpx);
+
+          &:nth-child(3),
+          &:nth-child(4) {
+            font-size: @xd-font-size-lg;
+            color: #333;
+          }
+
+          &:nth-child(4) {
+            padding-right: unit(8,rpx);
+          }
+        }
+      }
+
+      &-show {
+        .uni-box-radius();
+        padding: unit(20, rpx);
+        background: #fff;
+        margin: unit(20, rpx) unit(20, rpx) 0;
+
+        &-line {
+          background: #efefef;
+          height: 1px;
+          overflow: hidden;
+          margin: unit(6,rpx) 0;
+          width: 100%;
+        }
+        & > view {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          line-height: unit(55, rpx);
+        }
+      }
+    }
+
+    &__custom {
+      .uni-box-radius();
+      margin: unit(20, rpx) unit(20, rpx) 0;
+      padding: unit(20, rpx);
+      background: #fff;
+
+      &-title {
+        font-size: @xd-font-size-lg;
+        line-height: unit(40,rpx);
+        padding-bottom: unit(15,rpx);
+      }
+
+      &-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        font-size: @xd-font-size-base;
+        border-bottom: 1px solid #efefef;
+        line-height: unit(36,rpx);
+        padding: unit(10,rpx) 0;
+
+        &:last-child {
+          border-bottom: 0;
+        }
+
+        & > view:first-child {
+          width: unit(130,rpx);
+          flex-shrink: 0;
+          margin-right: unit(10,rpx);
+          color: #666;
+        }
+
+        & > view:last-child {
+          flex: 1;
+          width: 0;
+          color: #333;
+        }
+      }
+    }
+  }
+</style>