退费单、账单

src/pageSubs/afterSales/detail.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-26 15:20:47
  * @LastEditors: dream
- * @LastEditTime: 2021-04-10 17:36:32
+ * @LastEditTime: 2021-04-12 10:33:20
 -->
 <template>
 	<view class="after-sale-detail-main">
@@ -83,7 +83,7 @@
 </template>
 
 <script>
-import iphGoodCard from '../../components/iphGoodCard.vue'
+import iphGoodCard from '@/components/iphGoodCard.vue'
 export default {
   components: { iphGoodCard },
   name: 'afterSablesResult',

src/pageSubs/other/bill.vue

@@ -4,29 +4,178 @@
  * @Author: dream
  * @Date: 2021-03-26 16:23:55
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 16:24:21
+ * @LastEditTime: 2021-04-12 12:05:56
 -->
 <template>
-	<view>bill</view>
+	<view class="bill-main">
+    <view class="bill-search">
+      <view class="u-flex" @click="showDatePicker = true">
+        <view class="u-font-24 u-line-34">{{`${billDate.year}年${billDate.month}月`}}</view>
+        <view class="u-m-l-8 triangle-down"></view>
+      </view>
+      <view class="u-flex u-m-t-8">
+        <view class="detail-price">支出¥5534.43</view>
+        <view class="detail-price u-m-l-16">收入¥5534.43</view>
+        <view class="u-flex-1 u-flex u-row-right" @click="showTypePicker = true">
+          <view class="u-font-24 u-line-34">{{tradingType.name}}</view>
+          <view class="u-m-l-8 triangle-down"></view>
+        </view>
+      </view>
+    </view>
+    <view class="record-list">
+      <blocK v-for="(item, index) in recordList" :key="index">
+        <view class="record-card u-flex u-col-top iph-bg-fff" @click="toDetail">
+          <view class="icon-order iph-icon-order"></view>
+          <view class="record-card-main u-p-b-40 u-border-bottom u-flex-1">
+            <view class="u-flex u-row-between">
+              <view class="u-font-30 u-line-42">订货</view>
+              <view class="u-m-r-32 u-font-32 u-line-44 text-weight-500">{{item.price | priceFilter}}</view>
+            </view>
+            <view class="record-date u-m-t-8 u-font-24 u-line-34">{{item.createDate | createDateFilter}}</view>
+          </view>
+        </view>
+      </blocK>
+    </view>
+    <u-picker
+      mode="time"
+      v-model="showDatePicker"
+      :params="dateParams"
+      :default-time="selectDate"
+      @confirm="changeBillDate"
+    ></u-picker>
+		<u-picker
+      class="choose-picker"
+      v-model="showTypePicker"
+      mode="selector"
+      :range="typeList"
+      range-key="name"
+      cancel-color="#1677FF"
+      @confirm="changeType"
+    ></u-picker>
+  </view>
 </template>
 
 <script>
+import dayjs from 'dayjs'
 export default {
   name: 'bill',
   data () {
     return {
-
+      showDatePicker: false,
+      dateParams: {
+        year: true,
+        month: true,
+        day: false,
+        hour: false,
+        minute: false,
+        second: false
+      },
+      billDate: {
+        year: dayjs().year(),
+        month: dayjs().month() + 1
+      },
+      showTypePicker: false,
+      tradingType: {
+        id: 1,
+        name: '全部账单类型'
+      },
+      typeList: [{
+        id: 1,
+        name: '全部账单类型'
+      }, {
+        id: 2,
+        name: '货到付款'
+      }, {
+        id: 3,
+        name: '线上支付'
+      }, {
+        id: 4,
+        name: '退款'
+      }],
+      recordList: [{
+        price: 233300,
+        createDate: '2021-04-12 11:30:21'
+      }, {
+        price: 122200,
+        createDate: '2021-04-12 7:22:54'
+      }]
+    }
+  },
+  computed: {
+    selectDate () {
+      return `${this.billDate.year}-${this.billDate.month}`
     }
   },
   onLoad () {
 
   },
   methods: {
-
+    changeBillDate (val) {
+      this.billDate = val
+    },
+    changeType (index) {
+      this.tradingType = this.typeList[index]
+    },
+    toDetail () {
+      uni.navigateTo({
+        url: './billDetail'
+      })
+    }
+  },
+  filters: {
+    createDateFilter (val) {
+      return dayjs(val).format('M月D日 HH:mm')
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.bill-main {
+  .bill-search {
+    padding: 32px;
+    .triangle-down {
+        width: 0;
+        height: 0;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 16px solid $iph-base-text;
+    }
+    .detail-price {
+      color: $iph-desc-text;
+    }
+  }
+  .record-list {
+    .record-card {
+      padding: 32px 0 0 32px;
+      &:last-child {
+        .record-card-main {
+          &::after {
+            border-bottom-width: 0;
+          }
+        }
+      }
+      .icon-order {
+        margin-top: 8px;
+        margin-right: 24px;
+        width: 68px;
+        height: 68px;
+      }
+      .record-date {
+        color: $iph-desc-text;
+      }
+    }
+  }
+  .choose-picker {
+    /deep/ .u-drawer {
+      .u-drawer-bottom {
+        border-radius: 16px 16px 0 0;
+      }
+    }
+    /deep/ .u-datetime-picker {
+      border-radius: 16px 16px 0 0;
+      overflow: hidden;
+    }
+  }
+}
 </style>

src/pageSubs/other/billDetail.vue

@@ -4,10 +4,38 @@
  * @Author: dream
  * @Date: 2021-03-26 16:25:14
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 16:25:38
+ * @LastEditTime: 2021-04-12 12:11:32
 -->
 <template>
-	<view>bill Detail</view>
+	<view class="bill-detail-main iph-bg-fff">
+    <view class="detail-header u-border-bottom">
+      <view class="order-icon iph-icon-order"></view>
+      <view class="u-m-t-32 u-font-32 u-line-44">订货</view>
+      <view class="detail-price">26.00</view>
+    </view>
+    <view class="detail-body">
+      <view class="u-flex u-m-b-24">
+        <view class="detail-label">交易时间</view>
+        <view class="u-m-l-32">03-09 13:32</view>
+      </view>
+      <view class="u-flex u-m-b-24">
+        <view class="detail-label">交易单号</view>
+        <view class="u-m-l-32">33M32332324544</view>
+      </view>
+      <view class="u-flex u-m-b-24">
+        <view class="detail-label">支付时间</view>
+        <view class="u-m-l-32">03-09 13:32</view>
+      </view>
+      <view class="u-flex u-m-b-24">
+        <view class="detail-label">支付方式</view>
+        <view class="u-m-l-32">微信支付</view>
+      </view>
+      <view class="u-flex">
+        <view class="detail-label">备注</view>
+        <view class="u-m-l-32">订货4284892953994343</view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
@@ -28,5 +56,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.bill-detail-main {
+  padding: 44px 48px 0;
+  .order-icon {
+    width: 84px;
+    height: 84px;
+  }
+  .detail-header {
+    padding-bottom: 64px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .detail-price {
+      margin-top: 8px;
+      line-height: 80px;
+      font-size: 56px;
+      font-weight: 500;
+    }
+  }
+  .detail-body {
+    padding: 40px 0;
+    .detail-label {
+      width: 104px;
+      color: $iph-desc-text;
+    }
+  }
+}
 </style>

src/pageSubs/refund/components/iphRefundOrderCard.vue

@@ -0,0 +1,63 @@
+<!--
+ * @Descripttion: 退费单卡片
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-04-12 09:56:51
+ * @LastEditors: dream
+ * @LastEditTime: 2021-04-12 10:39:24
+-->
+<template>
+  <view class="refund-order-card-main iph-bg-fff" @click="cardClick">
+    <view class="u-flex u-p-b-24 u-border-bottom u-font-24 u-line-34">
+      <view class="u-flex-1 text-weight-500">退费单号：{{value.orderId}}</view>
+      <view class="card-status">{{value.status | statusFilter}}</view>
+    </view>
+    <view class="u-flex u-p-t-32 u-font-24 u-line-34">
+      <view class="u-flex-1">创建时间</view>
+      <view class="card-time">{{value.createTime | dateFilter}}</view>
+    </view>
+    <view class="u-flex u-p-t-24 u-p-b-32 u-font-24 u-line-34">
+      <view class="u-flex-1">退货退费</view>
+      <view>¥{{value.refundPrice | priceFilter}}</view>
+    </view>
+    <view class="u-border-top u-p-t-32 card-time u-font-24 u-line-34">退费描述：{{value.desc}}</view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'iphRefundOrderCard',
+  props: {
+    value: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  methods: {
+    cardClick () {
+      this.$emit('cardClick', this.val)
+    }
+  },
+  filters: {
+    statusFilter (val) {
+      const statusText = {
+        1: '已退款'
+      }
+      return statusText[val]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.refund-order-card-main {
+  padding: 24px 24px 32px;
+  border-radius: 12px;
+  .card-status {
+    color: $u-type-primary;
+  }
+  .card-time {
+    color: $iph-desc-text;
+  }
+}
+</style>

src/pageSubs/refund/detail.vue

@@ -4,29 +4,202 @@
  * @Author: dream
  * @Date: 2021-03-26 16:21:43
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 16:22:13
+ * @LastEditTime: 2021-04-12 10:43:19
 -->
 <template>
-	<view>Refund Detail</view>
+	<view class="after-sale-detail-main">
+    <view class="head-area"><text class="status-title">已退款</text></view>
+    <view class="body-main">
+      <view class="sale-info iph-bg-fff">
+        <view class="u-flex">
+          <view>退费单号：</view>
+          <view class="u-flex-1 u-text-right">退货退费</view>
+        </view>
+        <view class="u-flex u-m-t-24">
+          <view>退费名称：</view>
+          <view class="u-flex-1 u-text-right">3312423132112</view>
+        </view>
+        <view class="u-flex u-m-t-24">
+          <view>退费时间：</view>
+          <view class="u-flex-1 u-text-right">03-09 14:08</view>
+        </view>
+        <view class="u-flex u-m-t-24 u-p-b-28 u-border-bottom">
+          <view>退款金额：</view>
+          <view class="u-flex-1 u-text-right price-color">¥-1404.00</view>
+        </view>
+        <view class="u-m-t-24">
+          <view class="u-m-b-24">退费描述：已确认退款</view>
+          <image class="note-img" src="https://up.enterdesk.com/edpic_360_360/e8/5a/f6/e85af6483c9088d238185d1def6c786f.jpg" mode="aspectFill" @click="look" />
+        </view>
+      </view>
+      <view class="fee-detail iph-bg-fff">
+        <view class="u-flex">
+          <view class="u-font-32 u-line-44 text-weight-500">退款详情</view>
+          <view class="total-good u-flex-1 u-text-right">共计2笔退款</view>
+        </view>
+        <view class="u-flex u-m-t-32">
+          <view>退款1：</view>
+          <view class="u-flex-1 u-text-right">¥1395.34</view>
+        </view>
+        <view class="u-flex u-m-t-24">
+          <view>退费名称：</view>
+          <view class="u-flex-1 u-text-right">¥8.43</view>
+        </view>
+      </view>
+      <view class="good-detail iph-bg-fff">
+        <view class="u-flex">
+          <view class="u-font-32 u-line-44 text-weight-500">退货详情</view>
+          <view class="total-good u-flex-1 u-text-right">共计2项商品</view>
+        </view>
+        <view class="good-list">
+          <block v-for="(item, index) in goodList" :key="index">
+            <view class="list-item u-p-t-32 u-border-bottom">
+              <iph-good-card :showType="3" :value="item" />
+              <view class="u-flex u-row-between u-m-t-32">
+                <view class="u-font-28 u-line-40">退货：<text class="price-color">2</text></view>
+                <view class="u-font-28 u-line-40">退款：<text class="price-color">¥1403.40</text></view>
+              </view>
+            </view>
+          </block>
+        </view>
+      </view>
+      <view class="fee-detail iph-bg-fff">
+        <view class="u-flex">
+          <view class="u-font-32 u-line-44 text-weight-500">退运费详情</view>
+          <view class="total-good u-flex-1 u-text-right">共计1笔退款</view>
+        </view>
+        <view class="u-flex u-m-t-32">
+          <view>浙江仓库：</view>
+          <view class="u-flex-1 u-text-right">¥200</view>
+        </view>
+        <view class="u-flex u-m-t-24">
+          <view>云东仓库：</view>
+          <view class="u-flex-1 u-text-right">¥200</view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
+import iphGoodCard from '@/components/iphGoodCard.vue'
 export default {
-  name: 'refundDetail',
+  components: { iphGoodCard },
+  name: 'refundResult',
   data () {
     return {
-
+      goodList: [{
+        img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
+        name: '华硕天选',
+        spce: '一件',
+        salesPrice: 46800,
+        originalPrice: 48000,
+        num: 1,
+        checked: false,
+        problemDesc: ''
+      }, {
+        img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
+        name: '华硕天选',
+        spce: '一件',
+        salesPrice: 46800,
+        originalPrice: 48000,
+        num: 1,
+        checked: false,
+        problemDesc: ''
+      }]
     }
   },
   onLoad () {
 
   },
+  onPageScroll (obj) {
+    if (obj.scrollTop < 48) {
+      uni.setNavigationBarColor({
+        frontColor: '#ffffff',
+        backgroundColor: '#1677FF',
+        animation: { duration: 0.5, timingFunc: 'linear' }
+      })
+    } else {
+      uni.setNavigationBarColor({
+        frontColor: '#000000',
+        backgroundColor: '#ffffff',
+        animation: { duration: 0.5, timingFunc: 'linear' }
+      })
+    }
+  },
   methods: {
-
+    look () {
+      uni.previewImage({
+        urls: ['https://up.enterdesk.com/edpic_360_360/e8/5a/f6/e85af6483c9088d238185d1def6c786f.jpg']
+      })
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.after-sale-detail-main {
+  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
+  .head-area {
+    padding: 0 32px;
+    height: 282px;
+    background: linear-gradient(180deg, $u-type-primary 0%, $iph-type-light 55%, $iph-base-bg 100%);
+    .status-title {
+      font-size: 56px;
+      font-weight: 500;
+      line-height: 80px;
+      color: $iph-standby-text;
+    }
+  }
+  .body-main {
+    margin: -186px 24px 0;
+    .sale-info {
+      padding: 32px 32px 24px;
+      border-radius: 12px;
+      .note-img {
+        width: 204px;
+        height: 204px;
+      }
+    }
+    .audit-info {
+      margin-top: 16px;
+      padding: 32px;
+      border-radius: 12px;
+      .look-btn {
+        margin-left: 16px;
+        color: $u-type-primary;
+      }
+    }
+    .good-detail {
+      margin-top: 16px;
+      padding: 48px 32px 16px;
+      border-radius: 12px;
+      .total-good {
+        color: $iph-desc-text;
+      }
+      .good-list {
+        .list-item {
+          padding-bottom: 32px;
+          &:last-child {
+            padding-bottom: 0;
+            &::after {
+              border-bottom-width: 0;
+            }
+          }
+          /deep/ .good-price {
+            color: $iph-base-text;
+          }
+        }
+      }
+    }
+    .fee-detail {
+      margin-top: 16px;
+      padding: 32px;
+      border-radius: 12px;
+      .total-good {
+        color: $iph-desc-text;
+      }
+    }
+  }
+}
 </style>

src/pageSubs/refund/history.vue

@@ -4,29 +4,49 @@
  * @Author: dream
  * @Date: 2021-03-26 16:16:12
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 16:22:29
+ * @LastEditTime: 2021-04-12 10:38:45
 -->
 <template>
-	<view>Refund History</view>
+	<view class="refund-history-main">
+    <block v-for="(item, index) in refundList" :key="index">
+      <view class="u-m-b-24">
+        <iph-refund-order-card :value="item" @cardClick="toDetail" />
+      </view>
+    </block>
+  </view>
 </template>
 
 <script>
+import IphRefundOrderCard from './components/iphRefundOrderCard.vue'
 export default {
   name: 'refundHistory',
+  components: { IphRefundOrderCard },
   data () {
     return {
-
+      refundList: [{
+        orderId: '337JD32i82492332',
+        status: 1,
+        createTime: '2021-04-12 10:15:32',
+        refundPrice: 99200,
+        desc: '已确认退款'
+      }]
     }
   },
   onLoad () {
 
   },
   methods: {
-
+    toDetail () {
+      uni.navigateTo({
+        url: './detail'
+      })
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.refund-history-main {
+  padding: 24px 16px;
+}
 </style>

src/pages/my/my.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-25 15:56:03
  * @LastEditors: dream
- * @LastEditTime: 2021-04-08 15:51:55
+ * @LastEditTime: 2021-04-12 12:17:41
 -->
 <template>
 	<view class="my-main">
@@ -47,14 +47,14 @@
           <image class="item-img" src="~@/static/common/icon_tj_sfd.png" />
           <text class="u-m-t-8 u-font-22 u-line-32">收费单</text>
         </view>
-        <view class="order-item">
+        <navigator class="order-item" url="/pageSubs/refund/history">
           <image class="item-img" src="~@/static/common/icon_tj_tfd.png" />
           <text class="u-m-t-8 u-font-22 u-line-32">退费单</text>
-        </view>
-        <view class="order-item">
+        </navigator>
+        <navigator class="order-item" url="/pageSubs/other/bill">
           <image class="item-img" src="~@/static/common/icon_tj_zd.png" />
           <text class="u-m-t-8 u-font-22 u-line-32">账单</text>
-        </view>
+        </navigator>
         <navigator class="order-item" url="/pageSubs/deliveryOrder/history?current=0">
           <image class="item-img" src="~@/static/common/icon_tj_dfh.png" />
           <text class="u-m-t-8 u-font-22 u-line-32">待发货</text>

src/uni.scss

@@ -149,3 +149,8 @@ $iph-btn-disabel-bg: #999999;
   background: url('~@/static/common/icon_close_tp.png') no-repeat center center;
   background-size: contain;
 }
+
+.iph-icon-order {
+  background: url('~@/static/common/icon_dingdan.png') no-repeat center center;
+  background-size: contain;
+}