物流modal

src/component/applyRefund/applyRefund.js

+// component/applyRefund/applyRefund.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    show: { // 显示标识
+      type: Boolean,
+      value: false
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    isSelect: false
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    selectCoupon() {
+      console.log('2222')
+      this.setData({
+        isSelect: !this.data.isSelect
+      })
+    },
+    hidePopup: function () { // 隐藏弹出框
+      this.setData({
+        show: false
+      })
+    },
+
+  },
+
+
+
+})

src/component/applyRefund/applyRefund.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

src/component/applyRefund/applyRefund.wxml

+<!--component/applyRefund/applyRefund.wxml-->
+<view class="modal-container{{show ? ' active' : ''}}" bindtap="hidePopup"></view>
+<view class="modal-content{{show ? ' active' : ''}}">
+
+  <view class="modal-header">
+    <image class="modal-close" mode="widthFix" src="/assets/imgs/7_1_0/close.png" bindtap="hidePopup"></image>
+  </view>
+
+  <view class="modal-info">
+    <view class="modal-logistics">
+      <view>
+        <picker></picker>
+      </view>
+      <view>
+        <input placeholder-class="modal-placeholder" class="modal-input" placeholder="填写物流单号"></input>
+      </view>
+    </view>
+    <view>
+      <button class="btn btn-primary btn-lg">确认</button>
+    </view>
+  </view>
+</view>

src/component/applyRefund/applyRefund.wxss

+/* component/applyRefund/applyRefund.wxss */
+@import "/app.wxss";
+.modal-container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  /* transform: translateZ(100%); */
+  opacity: 0;
+  transition: opacity 200ms;
+  z-index: 98; 
+}
+
+.modal-container.active {
+  opacity: 1;
+  /* transform: translateZ(0);  */
+  }
+
+.modal-content.active {
+  opacity: 1;
+  /* transform: translateZ(0);  */
+  }
+
+.modal-content {
+  position: fixed;
+  z-index: 99;
+  bottom: 30%;
+  left: 65rpx;
+  background: #ffffff;
+  transition: transform 300ms;
+  /* transform: translateZ(100%);  */
+  height: 620rpx;
+  width: 620rpx;
+  opacity: 0;
+  border-radius: 15rpx;
+  }
+
+.modal-content .modal-close {
+  position: absolute;
+  right: 24rpx;
+  top: 35rpx;
+  width: 25rpx;
+   }
+
+.modal-info{
+  padding: 0 40rpx;
+  margin-top: 95rpx;
+}
+.modal-input{
+  border-radius: 5rpx;
+  border: 1px solid rgba(170, 170, 170, 1);
+  height: 78rpx;
+  padding: 0 20rpx;
+}
+.modal-placeholder{
+  color: #999999;
+}
\ No newline at end of file

src/pages/refundDetail/refundDetail.js

@@ -5,6 +5,7 @@ Page({
    * 页面的初始数据
    */
   data: {
+    showApplyRefundModal:true
 
   },
 
@@ -35,5 +36,10 @@ Page({
         });
       }
     });
+  },
+
+  //填写物流信息
+  tapWriteLogis(){
+
   }
 })
\ No newline at end of file

src/pages/refundDetail/refundDetail.json

 {
   "navigationBarTitleText": "退单详情",
-  "usingComponents": {}
+  "usingComponents": {
+    "apply-refund": "/component/applyRefund/applyRefund"
+  }
 }
\ No newline at end of file

src/pages/refundDetail/refundDetail.wxml

@@ -8,6 +8,23 @@
     </view>
   </view>
 
+  <view class="logistics-wrap">
+    <view class="logistics-info">
+      <view class="logistics-item">
+        <text>物流公司</text>
+        <text class="company">xxxxxxx</text>
+      </view>
+      <view class="logistics-item">
+        <text>快递单号</text>
+        <text class="company">456575687686786</text>
+      </view>
+      <view class="write-logistics" bindtap="tapWriteLogis">
+        <button class="btn btn-primary btn-outline write-btn">填写物流信息</button>
+
+      </view>
+    </view>
+  </view>
+
    <view class="pro-wrap">
       <view class="pro-header">
         <text class="choose-pro">选择商品</text>
@@ -92,3 +109,5 @@
     <button class="btn btn-primary btn-lg">撤销退款</button>
   </view>
 </view>
+
+<apply-refund show="{{showApplyRefundModal}}"/>

src/pages/refundDetail/refundDetail.wxss

 /* pages/refundDetail/refundDetail.wxss */
+@import './../../base/base.wxss';
+
 page{
   background: #f9f9f9;
   padding-bottom: 95rpx;
@@ -28,12 +30,45 @@ page{
   font-size: 26rpx;
   margin-top: 8rpx;
 }
+.logistics-wrap{
+  background-color: #ffffff;
+  padding: 28rpx 30rpx;
+}
+.logistics-info{
+  padding: 23rpx 22rpx 22rpx 44rpx;
+  border-radius: 10rpx;
+  background-color: rgba(255, 255, 255, 1);
+  box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
+}
+.logistics-item{
+  color: #76A1D5;
+  font-size: 26rpx;
+}
+.logistics-item:nth-child(2){
+  margin-top: 10rpx;
+}
+.company{
+  margin-left: 30rpx;
+}
+.write-logistics{
+  display: flex;
+  flex-direction: row-reverse;
+}
+.write-btn{
+  width: 188rpx;
+  height: 46rpx;
+  line-height: 46rpx;
+  border-radius: 23rpx;
+  border: 1px solid rgba(203, 60, 60, 1);
+}
+
+
 .pro-header{
   display: flex;
   justify-content: space-between;
 }
 .pro-wrap{
-  padding: 19rpx 32rpx 0 30rpx;
+  padding: 19rpx 32rpx 53rpx 30rpx;
   background-color: #ffffff;
 }
 .choose-pro{