售后

src/components/iphGoodCard.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-28 10:12:49
  * @LastEditors: dream
- * @LastEditTime: 2021-04-10 10:47:58
+ * @LastEditTime: 2021-04-10 16:59:43
 -->
 <template>
 	<view class="u-flex good-card-main" @click="cardClick">
@@ -21,7 +21,7 @@
           <text class="u-font-22">¥</text>
           <text class="u-font-32">{{value.salesPrice | priceFilter}}</text>
         </view>
-        <view class="good-disable-price u-m-l-8 u-m-b-8 u-font-22 text-through" v-if="value.originalPrice">¥{{value.originalPrice | priceFilter}}</view>
+        <view class="good-disable-price u-m-l-8 u-m-b-4 u-font-22 text-through" v-if="value.originalPrice">¥{{value.originalPrice | priceFilter}}</view>
         <view class="u-flex-1 u-flex u-row-right">
           <block v-if="showType === 1">
             <block v-if="!isShowEmpty">

src/pageSubs/afterSales/components/iphAfterSaleOrderCard.vue

@@ -0,0 +1,65 @@
+<!--
+ * @Descripttion: 售后单卡片
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-04-10 14:48:01
+ * @LastEditors: dream
+ * @LastEditTime: 2021-04-10 15:17:12
+-->
+<template>
+  <view class="after-sale-order-card iph-bg-fff">
+    <view class="u-flex">
+      <view class="u-flex-1 u-font-30 u-line-42 text-weight-500">退补配送费申请</view>
+      <view class="ordre-time u-font-24 u-line-34">{{value.createTime | dateFilter}}</view>
+    </view>
+    <view class="u-font-24 u-line-34 u-m-t-24 u-p-b-40 u-border-bottom">售后单号：{{value.orderId}}</view>
+    <view class="u-flex u-m-t-16">
+      <view class="total u-flex-1">合计：{{value.num}}项仓库</view>
+      <button class="look-btn" @click="lookDetail">退款详情</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'iphAfterSaleOrderCrad',
+  props: {
+    value: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  methods: {
+    lookDetail () {
+      this.$emit('lookDetail', this.value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.after-sale-order-card {
+  padding: 32px 24px 16px;
+  border-radius: 12px;
+  .ordre-time {
+    color: $iph-desc-text;
+  }
+  .total {
+    color: $iph-total-text;
+  }
+  .look-btn {
+    margin: 0;
+    padding: 8px 0;
+    width: 144px;
+    font-size: 24px;
+    line-height: 34px;
+    border-radius: 24px;
+    color: $u-type-primary;
+    background-color: $iph-standby-bg;
+    &::after {
+      border-radius: 48px;
+      border-color: $u-type-primary;
+    }
+  }
+}
+</style>

src/pageSubs/afterSales/credentials.vue

@@ -4,10 +4,37 @@
  * @Author: dream
  * @Date: 2021-03-26 15:06:57
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 15:11:39
+ * @LastEditTime: 2021-04-10 17:58:55
 -->
 <template>
-	<view>After Sales credentials</view>
+	<view class="after-sales-credenttials">
+    <textarea
+      class="note iph-bg-fff"
+      placeholder="请输入申请备注…"
+      placeholder-style="color: #cccccc;"
+    ></textarea>
+    <view class="img-list iph-bg-fff">
+      <view class="img-item">
+        <image class="note-img" src="https://www.youmeitu.com/imgesmeinv/47.jpg?x-oss-process=image/resize,m_fill,w_180,h_270" mode="aspectFill" @click="look" />
+        <view class="del-icon iph-icon-close"></view>
+      </view>
+      <view class="upload-icon iph-icon-upload"></view>
+    </view>
+    <button class="submit-btn" :disabled="!isRead">提交申请</button>
+    <view class="u-flex u-row-center">
+      <u-checkbox class="checkall" v-model="isRead" shape="circle">
+        <view class="u-font-24 u-line-34 read">我已阅读<text class="instructions" @click="showIndtructions = true">《售后说明》</text></view>
+      </u-checkbox>
+    </view>
+		<u-popup v-model="showIndtructions" mode="center" border-radius="16">
+      <view class="popup-body">
+        <view class="u-font-36 u-line-50 text-weight-500 u-text-center">售后说明</view>
+        <view class="u-font-28 u-line-40 u-m-t-32 u-m-l-24 u-m-r-24">1.发起售后需上传签收单，最少一张，最多3张</view>
+        <view class="u-font-28 u-line-40 u-m-t-32 u-m-l-24 u-m-r-24 u-p-b-40 u-border-bottom">2.提交申请后将为您生成一笔服务单，可在客服页面进行查看服务进度</view>
+        <view class="know-btn" @click="showIndtructions = false">我知道了</view>
+      </view>
+		</u-popup>
+  </view>
 </template>
 
 <script>
@@ -15,18 +42,114 @@ export default {
   name: 'afterSalesCredentials',
   data () {
     return {
-
+      isRead: false,
+      showIndtructions: false
     }
   },
   onLoad () {
 
   },
   methods: {
-
+    look () {
+      uni.previewImage({
+        urls: ['https://www.youmeitu.com/imgesmeinv/40.jpg']
+      })
+    },
+    lookInstructions () {
+      uni.showModal({
+        title: '售后说明',
+        content: `
+          1.发起售后需上传签收单，最少一张，最多3张
+          2.提交申请后将为您生成一笔服务单，可在客服页面进行查看服务进度
+        `,
+        success: function (res) {
+          if (res.confirm) {
+            console.log('用户点击确定')
+          } else if (res.cancel) {
+            console.log('用户点击取消')
+          }
+        }
+      })
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.after-sales-credenttials {
+  .note {
+    padding: 16px 32px;
+    width: auto;
+    height: 216px;
+  }
+  .img-list {
+    padding: 32px;
+    display: flex;
+    .img-item {
+      position: relative;
+      margin-right: 16px;
+      .note-img {
+        width: 204px;
+        height: 204px;
+      }
+      .del-icon {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        width: 36px;
+        height: 36px;
+      }
+    }
+    .upload-icon {
+      width: 204px;
+      height: 204px;
+    }
+  }
+  .submit-btn {
+    margin: 48px 32px 32px;
+    padding: 22px 0;
+    font-size: 32px;
+    line-height: 44px;
+    color: $iph-standby-text;
+    background-color: $u-type-primary;
+    border-radius: 8px;
+    &[disabled] {
+      background-color: $u-type-primary !important;
+      opacity: .4;
+    }
+  }
+  .read {
+    color: $iph-desc-text;
+    .instructions {
+      color: $u-type-primary;
+    }
+  }
+  .checkall {
+    /deep/ .u-checkbox {
+      .u-checkbox__icon-wrap--circle {
+        width: 28px !important;
+        height: 28px !important;
+      }
+    }
+    .check-all {
+      font-size: 26px;
+      line-height: 36px;
+      color: $iph-base-text;
+    }
+  }
+  .popup-body {
+    box-sizing: border-box;
+    padding: 40px 8px 0;
+    width: 576px;
+    height: 448px;
+    .know-btn {
+      padding: 24px 0;
+      line-height: 44px;
+      font-size: 32px;
+      font-weight: 600;
+      text-align: center;
+      color: $u-type-primary;
+    }
+  }
+}
 </style>

src/pageSubs/afterSales/detail.vue

@@ -4,29 +4,205 @@
  * @Author: dream
  * @Date: 2021-03-26 15:20:47
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 15:27:22
+ * @LastEditTime: 2021-04-10 17:36:32
 -->
 <template>
-	<view>After Sables Result</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">33D12423132112</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="audit-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">4D33i92342934</view>
+          <view class="look-btn">查看</view>
+        </view>
+        <view class="u-flex u-m-t-24 u-col-top">
+          <view>驳回理由：</view>
+          <view class="u-flex-1 u-text-right">凭证上传有误</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 {
+  components: { iphGoodCard },
   name: 'afterSablesResult',
   data () {
     return {
-
+      goodList: [{
+        img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
+        name: '华硕天选',
+        spce: '一件',
+        warehouse: '云东仓',
+        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: '一件',
+        warehouse: '云东仓',
+        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/afterSales/history.vue

@@ -4,25 +4,78 @@
  * @Author: dream
  * @Date: 2021-03-26 15:19:28
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 15:19:39
+ * @LastEditTime: 2021-04-10 15:17:38
 -->
 <template>
-	<view>After Sables Result</view>
+	<view class="after-sales-history">
+		<u-sticky :enable="enable">
+      <u-tabs
+        class="history-tab"
+        :list="tabList"
+        :is-scroll="false"
+        :current="currentTab"
+        :bold="false"
+        inactive-color="#AAAAAA"
+        :bar-style="{
+          marginLeft: '-22rpx',
+          bottom:  '-4rpx',
+          width: '84rpx',
+          height: '4rpx',
+          borderRadius: 0
+        }"
+        @change="changeTab"
+      ></u-tabs>
+		</u-sticky>
+    <block v-for="(item, index) in orderList" :key="index">
+      <view class="u-m-t-24 u-m-l-16 u-m-r-16">
+        <iph-after-sale-order-card :value="item" @lookDetail="toDetail" />
+      </view>
+    </block>
+  </view>
 </template>
 
 <script>
+import iphAfterSaleOrderCard from './components/iphAfterSaleOrderCard.vue'
 export default {
+  components: { iphAfterSaleOrderCard },
   name: 'afterSablesResult',
   data () {
     return {
-
+      enable: true,
+      currentTab: 0,
+      tabList: [{
+        name: '已提交'
+      }, {
+        name: '审核通过'
+      }, {
+        name: '审核驳回'
+      }],
+      orderList: [{
+        createTime: '2020-05-06 13:42:32',
+        orderId: '337JF23284294293',
+        num: 1
+      }]
     }
   },
   onLoad () {
 
   },
+  onShow () {
+    this.enable = true
+  },
+  onHide () {
+    this.enable = false
+  },
   methods: {
-
+    changeTab (val) {
+      this.currentTab = val
+    },
+    toDetail (val) {
+      console.log(val)
+      uni.navigateTo({
+        url: './detail'
+      })
+    }
   }
 }
 </script>

src/pageSubs/afterSales/result.vue

@@ -1,26 +1,30 @@
 <!--
- * @Descripttion: 提交售后结果
+ * @Descripttion: 提交订单结果
  * @version: 1.0.0
  * @Author: dream
- * @Date: 2021-03-26 15:13:39
+ * @Date: 2021-03-26 14:00:59
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 15:17:34
+ * @LastEditTime: 2021-04-10 18:01:09
 -->
 <template>
-	<view>After Sables Result</view>
+	<view class="after-sales-res">
+    <view class="main-area iph-bg-fff">
+      <view class="res-icon iph-icon-res-success"></view>
+      <view class="res-text u-m-t-40 u-font-36 u-line-50">提交成功</view>
+      <view class="res-desc u-m-t-16">请耐心等待结果</view>
+    </view>
+    <button class="back-btn">返回</button>
+  </view>
 </template>
 
 <script>
 export default {
-  name: 'afterSablesResult',
+  name: 'afterSalesResult',
   data () {
     return {
 
     }
   },
-  onLoad () {
-
-  },
   methods: {
 
   }
@@ -28,5 +32,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.after-sales-res {
+  .main-area {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 64px 32px;
+    .res-text {
+      color: $iph-prompt-text;
+    }
+    .res-desc {
+      color: $iph-desc-text;
+    }
+  }
+  .res-icon {
+    width: 128px;
+    height: 128px;
+  }
+  .back-btn {
+    margin-top: 48px;
+    padding: 22px 0;
+    width: 686px;
+    height: 88px;
+    line-height: 44px;
+    font-size: 32px;
+    text-align: center;
+    color: $iph-standby-text;
+    background-color: $u-type-primary;
+  }
+}
 </style>

src/pageSubs/afterSales/submitStep1.vue

@@ -4,10 +4,10 @@
  * @Author: dream
  * @Date: 2021-03-26 14:34:38
  * @LastEditors: dream
- * @LastEditTime: 2021-04-10 11:11:40
+ * @LastEditTime: 2021-04-10 17:02:54
 -->
 <template>
-	<view class="after-sales-submit" :style="{paddingBottom: `${pagePaddingBottom}px`}">
+	<view class="after-sales-submit1" :style="{paddingBottom: `${pagePaddingBottom}px`}">
     <view class="good-list iph-bg-fff">
       <block v-for="(item, index) in goodList" :key="index">
         <view class="check-card">
@@ -87,11 +87,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.after-sales-submit {
+.after-sales-submit1 {
   .good-list {
     .check-card {
       padding-bottom: 40px;
       border-bottom: 1px solid $iph-border-other;
+      /deep/ .good-disable-price {
+        margin-bottom: 8px;
+      }
       &:last-child {
         border-bottom: none;
       }

src/pageSubs/afterSales/submitStep2.vue

@@ -4,10 +4,10 @@
  * @Author: dream
  * @Date: 2021-03-26 14:34:38
  * @LastEditors: dream
- * @LastEditTime: 2021-04-10 11:32:40
+ * @LastEditTime: 2021-04-10 11:46:41
 -->
 <template>
-	<view class="after-sales-submit" :style="{paddingBottom: `${pagePaddingBottom}px`}">
+	<view class="after-sales-submit2" :style="{paddingBottom: `${pagePaddingBottom}px`}">
     <view class="good-list iph-bg-fff">
       <block v-for="(item, index) in goodList" :key="index">
         <view class="check-card">
@@ -105,7 +105,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.after-sales-submit {
+.after-sales-submit2 {
   .good-list {
     .check-card {
       padding-bottom: 40px;

src/pages.json

@@ -85,6 +85,18 @@
 				"navigationBarTitleText": "申请售后"
 			}
     }, {
+      "path": "history",
+			"style": {
+				"navigationBarTitleText": "售后"
+			}
+    }, {
+      "path": "detail",
+			"style": {
+        "navigationBarBackgroundColor": "#1677FF",
+        "navigationBarTextStyle": "white",
+        "navigationBarTitleText": "退款详情"
+			}
+    }, {
       "path": "credentials",
 			"style": {
 				"navigationBarTitleText": "售后凭证"

src/uni.scss

@@ -139,3 +139,13 @@ $iph-btn-disabel-bg: #999999;
   background: url('~@/static/common/icon_phone.png') no-repeat center center;
   background-size: contain;
 }
+
+.iph-icon-upload {
+  background: url('~@/static/common/icon_tianjia.png') no-repeat center center;
+  background-size: contain;
+}
+
+.iph-icon-close {
+  background: url('~@/static/common/icon_close_tp.png') no-repeat center center;
+  background-size: contain;
+}