组件

components/dkbase/dk-customer-detail/dk-customer-detail.js

@@ -0,0 +1,57 @@
+/*******************************************************************************
+* Copyright(c) 2022 dongke All rights reserved. / Confidential
+* 类的信息：
+*		1.功能描述：加载页面
+* 编辑履历：
+*		作者				日期					版本				修改内容
+*		于继渤		   2022-07-15	  1.00		     订单相关客户信息(渐变色)
+*******************************************************************************/
+
+Component({
+    /**
+     * 组件的对外属性
+     */
+    properties: {
+      //背景色
+      backgroundColor: {
+        type: String,
+        value: '#7900FF,#7900FF,#9900FF'
+      },
+      textColor: { //字体颜色
+        type: String,
+        value: 'white'
+      },
+      customerName: {
+        type: String,
+        value: ''
+      },
+      customerPhone: {
+        type: String,
+        value: ''
+      },
+      addressFull: {
+        type: String,
+        value: ''
+      },
+      showEdit: {
+        type: Boolean,
+        value: false
+      },
+      radius:{
+        type: String,
+        value: '12rpx 12rpx 12rpx 12rpx'
+      },
+    },
+    options: {
+      addGlobalClass: true,
+    },
+    data: {
+    },
+    attached() {
+    },
+    methods: {
+      edit() {
+        this.triggerEvent('edit')
+      },
+    }
+  })

components/dkbase/dk-customer-detail/dk-customer-detail.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+  }

components/dkbase/dk-customer-detail/dk-customer-detail.wxml

@@ -0,0 +1,33 @@
+<view style="{{'border-radius:'+radius+'; box-shadow:2px 2px 5px #e5e5e6;display: flex;margin-left: 6px;; width: 96.5%;height: 195rpx;background-image: linear-gradient(to bottom left,#4C619B,#687cb3,#6F88C4 );'}}">
+	<view style="color: white;margin:12px;font-size: 13px; width: 100%;">
+		<view style="display: flex;">
+
+			<view style="width: 45%; display: flex;">
+				<view style="padding-right: 5px;margin-top:2px;">
+					<van-image width="20" height="20" src="/static/img/user.png" />
+				</view>
+
+				<view style="display:flex;padding-top: 8rpx;padding-left: 2px;">{{customerName}}</view>
+			</view>
+
+
+			<view style="width: 45%;display: flex;">
+				<view style="display:flex;padding-top: 8rpx;padding-left: 2px;">{{customerPhone}}</view>
+			</view>
+
+			<view wx:if="{{showEdit}}" style=" width: 10%; display: flex;text-align: right;" catchtap="edit">
+				<van-image width="21" height="21" src="/static/img/edit.png" />
+			</view>
+		</view>
+		<view style="display: flex;padding-top: 10px;width: 100%;">
+			<!-- <van-icon name="location" size="35rpx"/> -->
+			<view style="display:flex;padding-top: 8rpx;padding-left: 2px;">{{addressFull}}</view>
+		</view>
+
+		<!-- 
+		<view style="display: flex;padding-top: 9px;">
+			仓库送货
+		</view> -->
+	</view>
+
+</view>

components/dkbase/dk-customer-detail/dk-customer-detail.wxss

@@ -0,0 +1,93 @@
+.oout-view{
+    width:100%;
+    position:fixed;
+    z-index:99999;
+    top:0;
+    left:0;
+    bottom:0;
+    right:0;
+  }
+  .out-view{
+    background-color:#333333;
+    position:fixed;
+    top:36%;
+    width:260rpx;
+    height:260rpx;
+    z-index:999999;
+    margin-left:calc((100% - 260rpx)/ 2);
+    border-radius: 0.7rem;
+    text-align: center;
+    opacity:1;
+  }
+  
+  /* load1 */
+  .load1 {
+    width: 100%;
+    display: block;
+  }
+  
+  .load1 > div {
+    /* background-color: red; */
+    height: 100rpx;
+    opacity:1;
+    width: 12rpx;
+    margin-left: 0.3rem;
+    margin-top: calc((100% - 100rpx)/2 - 36rpx);
+    display: inline-block;
+    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+    animation: stretchdelay 1.2s infinite ease-in-out;
+  }
+  
+  .load1 .rect1{
+     margin-left: 0;
+     background-color:#d9001b;
+  }
+  .load1 .rect2 {
+    background-color:#d9001b;
+    -webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+  }
+  .load1 .rect3 {
+    background-color:#d9001b;
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+  }
+  .load1 .rect4 {
+    background-color:#d9001b;
+    -webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+  }
+  .load1 .rect5 {
+    background-color:#d9001b;
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+  }
+  .load1 .rect6 {
+    background-color:#d9001b;
+    -webkit-animation-delay: -0.7s;
+    animation-delay: -0.7s;
+  }
+  .load1 .rect7 {
+    background-color:#d9001b;
+    -webkit-animation-delay: -0.6s;
+    animation-delay: -0.6s;
+  }
+  .load1 .rect8 {
+    background-color:#d9001b;
+    -webkit-animation-delay: -0.5s;
+    animation-delay: -0.5s;
+  }
+  @-webkit-keyframes stretchdelay {
+    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+    20% { -webkit-transform: scaleY(1.0) }
+  }
+  @keyframes stretchdelay {
+    0%, 40%, 100% {
+      transform: scaleY(0.4);
+      -webkit-transform: scaleY(0.4);
+    }  20% {
+      transform: scaleY(1.0);
+      -webkit-transform: scaleY(1.0);
+    }
+  }
+