申请售后

src/components/iphGoodCard.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-28 10:12:49
  * @LastEditors: dream
- * @LastEditTime: 2021-04-01 17:06:08
+ * @LastEditTime: 2021-04-10 10:47:58
 -->
 <template>
 	<view class="u-flex good-card-main" @click="cardClick">
@@ -19,9 +19,9 @@
       <view class="u-flex u-flex-1 u-col-bottom u-m-t-24">
         <view class="good-price">
           <text class="u-font-22">¥</text>
-          <text class="u-font-32">{{value.salesPrice}}</text>
+          <text class="u-font-32">{{value.salesPrice | priceFilter}}</text>
         </view>
-        <view class="good-disable-price u-m-l-8 u-font-22 text-through" v-if="value.originalPrice">¥{{value.originalPrice}}</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="u-flex-1 u-flex u-row-right">
           <block v-if="showType === 1">
             <block v-if="!isShowEmpty">

src/pageSubs/afterSales/submit.vue

@@ -1,32 +0,0 @@
-<!--
- * @Descripttion: 申请售后
- * @version: 1.0.0
- * @Author: dream
- * @Date: 2021-03-26 14:34:38
- * @LastEditors: dream
- * @LastEditTime: 2021-03-26 15:10:33
--->
-<template>
-	<view>Submit After Sales</view>
-</template>
-
-<script>
-export default {
-  name: 'submitAfterSales',
-  data () {
-    return {
-
-    }
-  },
-  onLoad () {
-
-  },
-  methods: {
-
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/pageSubs/afterSales/submitStep1.vue

@@ -0,0 +1,161 @@
+<!--
+ * @Descripttion: 申请售后-选择货品
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-03-26 14:34:38
+ * @LastEditors: dream
+ * @LastEditTime: 2021-04-10 11:11:40
+-->
+<template>
+	<view class="after-sales-submit" :style="{paddingBottom: `${pagePaddingBottom}px`}">
+    <view class="good-list iph-bg-fff">
+      <block v-for="(item, index) in goodList" :key="index">
+        <view class="check-card">
+          <u-checkbox v-model="item.checked" shape="circle">
+            <iph-good-card :showType="3" :value="item" />
+          </u-checkbox>
+          <view class="problem" v-show="item.checked">
+            <textarea
+              class="desc-input"
+              v-model="item.problemDesc"
+              placeholder="请输入问题描述，限50字符"
+              placeholder-style="color: #999999;"
+              auto-height
+              @click.stop
+            />
+          </view>
+        </view>
+      </block>
+    </view>
+    <iph-fixed-bottom @getHeight="getFooterHeight">
+      <view class="shopcat-footer u-flex iph-bg-fff">
+        <u-checkbox class="checkall u-flex-1" v-model="checkedAll" icon-size="40" shape="circle" :label-disabled="false">
+          <view class="check-all u-m-l-16">全选</view>
+        </u-checkbox>
+        <button class="pay-btn" @click="next">下一步(2)</button>
+      </view>
+    </iph-fixed-bottom>
+  </view>
+</template>
+
+<script>
+import IphFixedBottom from '@/components/iphFixedBottom.vue'
+import iphGoodCard from '@/components/iphGoodCard.vue'
+export default {
+  components: { iphGoodCard, IphFixedBottom },
+  name: 'submitAfterSales',
+  data () {
+    return {
+      pagePaddingBottom: 0,
+      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 () {
+
+  },
+  methods: {
+    getFooterHeight (val) {
+      this.pagePaddingBottom = val + 8
+    },
+    next () {
+      uni.navigateTo({
+        url: './submitStep2'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.after-sales-submit {
+  .good-list {
+    .check-card {
+      padding-bottom: 40px;
+      border-bottom: 1px solid $iph-border-other;
+      &:last-child {
+        border-bottom: none;
+      }
+      /deep/ .u-checkbox-group {
+        background-color: $iph-standby-bg;
+      }
+      /deep/ .u-checkbox {
+        padding: 40px 0 0 32px;
+        width: 100% !important;
+        .u-checkbox__label {
+          margin-left: 32px !important;
+          margin-right: 32px !important;
+          width: 100%;
+        }
+        .u-checkbox__icon-wrap--circle {
+          width: 28px !important;
+          height: 28px !important;
+        }
+      }
+      .problem {
+        padding: 32px 32px 0 92px;
+        .desc-input {
+          padding: 20px 24px;
+          width: auto;
+          background-color: #F5F5F5;
+        }
+      }
+    }
+  }
+  .shopcat-footer {
+    padding: 24px 32px;
+    .checkall {
+      /deep/ .u-checkbox {
+        width: 100%;
+        .u-checkbox__label {
+          width: 100%;
+        }
+        .u-checkbox__icon-wrap--circle {
+          width: 40px !important;
+          height: 40px !important;
+        }
+      }
+      .check-all {
+        font-size: 26px;
+        line-height: 36px;
+        color: $iph-base-text;
+      }
+    }
+    .total-price {
+      line-height: 44px;
+      font-size: 32px;
+      font-weight: 500;
+    }
+    .pay-btn {
+      margin-left: 24px;
+      padding: 16px 0;
+      width: 226px;
+      height: 72px;
+      font-size: 28px;
+      line-height: 40px;
+      color: $iph-standby-text;
+      background-color: $u-type-primary;
+      border-radius: 38px;
+    }
+  }
+}
+</style>

src/pageSubs/afterSales/submitStep2.vue

@@ -0,0 +1,195 @@
+<!--
+ * @Descripttion: 申请售后-选择仓库
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-03-26 14:34:38
+ * @LastEditors: dream
+ * @LastEditTime: 2021-04-10 11:32:40
+-->
+<template>
+	<view class="after-sales-submit" :style="{paddingBottom: `${pagePaddingBottom}px`}">
+    <view class="good-list iph-bg-fff">
+      <block v-for="(item, index) in goodList" :key="index">
+        <view class="check-card">
+          <u-checkbox v-model="item.checked" shape="circle">
+            <view class="u-flex">
+              <view class="shop-icon iph-icon-shop"></view>
+              <view>云东仓</view>
+            </view>
+          </u-checkbox>
+          <view class="problem u-flex" @click="checkWarehouse(item)">
+            <view class="fee-text u-m-r-24">配送费</view>
+            <view class="price-color">
+              <text class="u-font-22 u-line-32 text-weight-500">¥</text>
+              <text class="u-font-32 u-line-44 text-weight-600">200</text>
+            </view>
+          </view>
+          <view class="problem" v-show="item.checked">
+            <textarea
+              class="desc-input"
+              v-model="item.problemDesc"
+              placeholder="请输入问题描述，限50字符"
+              placeholder-style="color: #999999;"
+              auto-height
+              @click.stop
+            />
+          </view>
+        </view>
+      </block>
+    </view>
+    <iph-fixed-bottom @getHeight="getFooterHeight">
+      <view class="shopcat-footer u-flex iph-bg-fff">
+        <u-checkbox class="checkall u-flex-1" v-model="checkedAll" icon-size="40" shape="circle" :label-disabled="false">
+          <view class="check-all u-m-l-16">全选</view>
+        </u-checkbox>
+        <button class="back-btn" @click="backStep">上一步(1)</button>
+        <button class="pay-btn" @click="next">下一步(2)</button>
+      </view>
+    </iph-fixed-bottom>
+  </view>
+</template>
+
+<script>
+import IphFixedBottom from '@/components/iphFixedBottom.vue'
+export default {
+  components: { IphFixedBottom },
+  name: 'submitAfterSales',
+  data () {
+    return {
+      pagePaddingBottom: 0,
+      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 () {
+
+  },
+  methods: {
+    getFooterHeight (val) {
+      this.pagePaddingBottom = val + 8
+    },
+    checkWarehouse (val) {
+      val.checked = !val.checked
+    },
+    backStep () {
+      uni.navigateBack({
+        delta: 1
+      })
+    },
+    next () {
+      uni.navigateTo({
+        url: './credentials'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.after-sales-submit {
+  .good-list {
+    .check-card {
+      padding-bottom: 40px;
+      border-bottom: 1px solid $iph-border-other;
+      &:last-child {
+        border-bottom: none;
+      }
+      .shop-icon {
+        margin-right: 8px;
+        width: 28px;
+        height: 28px;
+      }
+      /deep/ .u-checkbox-group {
+        background-color: $iph-standby-bg;
+      }
+      /deep/ .u-checkbox {
+        padding: 40px 0 0 32px;
+        width: 100% !important;
+        .u-checkbox__label {
+          margin-left: 32px !important;
+          margin-right: 32px !important;
+          width: 100%;
+        }
+        .u-checkbox__icon-wrap--circle {
+          width: 28px !important;
+          height: 28px !important;
+        }
+      }
+      .problem {
+        padding: 32px 32px 0 92px;
+        .fee-text {
+          color: $iph-desc-text;
+        }
+        .desc-input {
+          padding: 20px 24px;
+          width: auto;
+          background-color: #F5F5F5;
+        }
+      }
+    }
+  }
+  .shopcat-footer {
+    padding: 24px 32px;
+    .checkall {
+      /deep/ .u-checkbox {
+        width: 100%;
+        .u-checkbox__label {
+          width: 100%;
+        }
+        .u-checkbox__icon-wrap--circle {
+          width: 40px !important;
+          height: 40px !important;
+        }
+      }
+      .check-all {
+        font-size: 26px;
+        line-height: 36px;
+        color: $iph-base-text;
+      }
+    }
+    .total-price {
+      line-height: 44px;
+      font-size: 32px;
+      font-weight: 500;
+    }
+    .pay-btn {
+      margin-left: 24px;
+      padding: 16px 0;
+      width: 226px;
+      height: 72px;
+      font-size: 28px;
+      line-height: 40px;
+      color: $iph-standby-text;
+      background-color: $u-type-primary;
+      border-radius: 38px;
+    }
+    .back-btn {
+      @extend .pay-btn;
+      color: $iph-base-text;
+      background-color: #fff;
+      &::after {
+        border-radius: 76px;
+      }
+    }
+  }
+}
+</style>

src/pageSubs/orders/components/iphOrderCard.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-04-08 14:52:47
  * @LastEditors: dream
- * @LastEditTime: 2021-04-08 16:40:29
+ * @LastEditTime: 2021-04-09 09:56:30
 -->
 <template>
   <view class="iph-order-card-main iph-bg-fff">
@@ -39,10 +39,10 @@
     </view>
     <view class="u-flex u-row-right u-p-t-26">
       <blocK v-if="value.status === 1">
-        <button class="to-pay-btn">去支付</button>
+        <button class="to-pay-btn" @click="toPay">去支付</button>
       </blocK>
       <block v-if="value.status === 3">
-        <button class="after-sale-btn">申请售后</button>
+        <button class="after-sale-btn" @click="toAfterSale">申请售后</button>
       </block>
     </view>
   </view>
@@ -57,6 +57,14 @@ export default {
       default: () => {}
     }
   },
+  methods: {
+    toPay () {
+      this.$emit('toPay', this.value)
+    },
+    toAfterSale () {
+      this.$emit('toAfterSale', this.value)
+    }
+  },
   filters: {
     statusFilter (val) {
       const statusText = {

src/pageSubs/orders/history.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-26 15:16:21
  * @LastEditors: dream
- * @LastEditTime: 2021-04-08 16:41:11
+ * @LastEditTime: 2021-04-10 09:59:31
 -->
 <template>
 	<view class="order-history-main">
@@ -28,9 +28,18 @@
 		</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-order-card :value="item" />
+        <iph-order-card :value="item" @toPay="toPay" @toAfterSale="openReasonPicker" />
       </view>
     </block>
+		<u-picker
+      class="choose-picker"
+      v-model="showReasonPicker"
+      mode="selector"
+      :range="reasonList"
+      range-key="name"
+      cancel-color="#1677FF"
+      @confirm="toAfterSale"
+    ></u-picker>
     <iph-empty :show="!orderList.length" :type="1" :marginTop="168"/>
   </view>
 </template>
@@ -54,6 +63,20 @@ export default {
       }, {
         name: '已取消'
       }],
+      showReasonPicker: false,
+      reasonList: [{
+        id: 1,
+        name: '食材质量问题'
+      }, {
+        id: 2,
+        name: '包材质量问题'
+      }, {
+        id: 3,
+        name: '仓配服务投诉'
+      }, {
+        id: 4,
+        name: '仓库发出临期产品'
+      }],
       orderList: [{
         orderId: '337JD32i82492332',
         status: 3,
@@ -88,6 +111,21 @@ export default {
   methods: {
     changeTab (val) {
       this.currentTab = val
+    },
+    toPay (val) {
+      console.log('去支付', val)
+      uni.navigateTo({
+        url: './detail'
+      })
+    },
+    openReasonPicker (val) {
+      console.log('申请售后', val)
+      this.showReasonPicker = true
+    },
+    toAfterSale () {
+      uni.navigateTo({
+        url: '../afterSales/submit'
+      })
     }
   }
 }
@@ -101,5 +139,16 @@ export default {
       font-weight: 500 !important;
     }
   }
+  .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/pages.json

@@ -75,7 +75,12 @@
 	}, {
     "root": "pageSubs/afterSales",
     "pages": [{
-      "path": "submit",
+      "path": "submitStep1",
+			"style": {
+				"navigationBarTitleText": "申请售后"
+			}
+    }, {
+      "path": "submitStep2",
 			"style": {
 				"navigationBarTitleText": "申请售后"
 			}

src/pages/shopcat/shopcat.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-25 15:55:43
  * @LastEditors: dream
- * @LastEditTime: 2021-03-30 15:58:55
+ * @LastEditTime: 2021-04-10 11:00:48
 -->
 <template>
 	<view class="shopcat-main" :style="{paddingBottom: `${pagePaddingBottom}px`}">
@@ -162,7 +162,7 @@ export default {
     }
     .go-order-btn {
       margin: 40px 0 96px;
-      padding: 10px 64px;
+      padding: 10px 0;
       font-size: 28px;
       line-height: 40px;
       border-radius: 30px;
@@ -199,7 +199,7 @@ export default {
     }
     .pay-btn {
       margin-left: 24px;
-      padding: 16px 66px;
+      padding: 16px 0;
       width: 226px;
       height: 72px;
       font-size: 28px;

src/uni.scss

@@ -20,6 +20,7 @@ $iph-empty-text: #717171;
 $iph-border-base: #eeeeee;
 $iph-border-standby: #E5E5E5;
 $iph-border-prompt: #CCCCCC;
+$iph-border-other: #F2F4F8;
 
 $iph-base-bg: #f5f5f5;
 $iph-standby-bg: #ffffff;