commit message

pages/order/afterSales/afterSalesSelect.vue

@@ -0,0 +1,193 @@
+<template>
+  <view>
+    <view class="after-sales-goods-detail-view">
+      <view class="header">
+        <view>
+          本次售后服务将由
+          <text class="seller-name">{{ sku.storeName }}</text>
+          为您提供
+        </view>
+      </view>
+      <view>
+        <view class="goods-item-view" v-for="(item,index) in sku.orderItems" v-if="item.sn == sn" @click="gotoGoodsDetail(sku.skuId)">
+          <view class="goods-img">
+            <u-image border-radius="6" width="131rpx" height="131rpx" :src="item.image"></u-image>
+          </view>
+          <view class="goods-info">
+            <view class="goods-title u-line-2">{{ item.name }}</view>
+            <view class="goods-price">
+              <!-- <span v-if="sku.point">￥{{ sku.subtotal }}+{{ sku.point }}积分</span> -->
+
+              <span v-if="sku.orderItems.length <= 1">￥{{ sku.flowPrice }}</span>
+              <span class="num" v-else>购买数量{{item.num}}</span>
+
+              <span v-if="sku.orderItems.length <= 1" class="num">购买数量: {{ item.num }}</span>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="select-view">
+      <view class="select-cell" @click="onSelect(1)">
+        <view class="select-image">
+          <image style="height: 51rpx; width: 51rpx" src="/static/order/t1.png"></image>
+        </view>
+        <view class="right">
+          <view class="select-title">退货</view>
+          <view class="select-sub-title">
+            退回收到的商品
+            <uni-icons color="#BABABA" type="arrowright"></uni-icons>
+          </view>
+        </view>
+      </view>
+      <view class="select-cell" @click="onSelect(3)">
+        <view class="select-image">
+          <image style="height: 51rpx; width: 51rpx" src="/static/order/t3.png"></image>
+        </view>
+        <view class="right">
+          <view class="select-title">退款</view>
+          <view class="select-sub-title">
+            退款商品返还金额
+            <uni-icons color="#BABABA" type="arrowright"></uni-icons>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import UniIcons from "@/components/uni-icons/uni-icons.vue";
+export default {
+  components: {
+    UniIcons,
+  },
+  data() {
+    return {
+      sn: "",
+      applyInfo: {},
+      sku: {},
+    };
+  },
+  onLoad(options) {
+    this.sn = options.sn;
+    let dData = decodeURIComponent(options.sku);
+    let newData = JSON.parse(dData);
+    this.sku = newData;
+  },
+  methods: {
+    onSelect(value) {
+      uni.redirectTo({
+        url: `./afterSalesDetail?sn=${this.sn}&sku=${encodeURIComponent(
+          JSON.stringify(this.sku)
+        )}&value=${value}`,
+      });
+    },
+    gotoGoodsDetail(id) {
+      uni.navigateTo({
+        url: `/pages/product/goods?id=${id}&goodsId=${goodsId}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+page,
+.content {
+  background: $page-color-base;
+  height: 100%;
+}
+.after-sales-goods-detail-view {
+  background-color: #fff;
+  .header {
+    background-color: #f7f7f7;
+    color: #999999;
+    font-size: 22rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    line-height: 70rpx;
+    .header-text {
+      background-color: #999999;
+      padding: 10rpx 30rpx;
+      border-radius: 50rpx;
+    }
+    .seller-name {
+      color: $main-color;
+    }
+  }
+
+  .goods-item-view {
+    display: flex;
+    flex-direction: row;
+    padding: 10rpx 30rpx;
+    background-color: #eef1f2;
+    .goods-img {
+    }
+    .goods-info {
+      padding-left: 30rpx;
+      flex: 1;
+      .goods-title {
+        margin-bottom: 10rpx;
+        color: $font-color-dark;
+      }
+      .goods-specs {
+        font-size: 24rpx;
+        margin-bottom: 10rpx;
+        color: #cccccc;
+      }
+      .goods-price {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        font-size: 28rpx;
+        margin-bottom: 10rpx;
+        color: $light-color;
+        .num {
+          font-size: 24rpx;
+          color: #999999;
+        }
+      }
+    }
+    .goods-num {
+      width: 60rpx;
+      color: $main-color;
+    }
+  }
+}
+.select-view {
+  background-color: #fff;
+  margin-top: 20rpx;
+  .select-cell {
+    display: flex;
+    align-items: center;
+    margin: 0rpx 20rpx;
+    line-height: 110rpx;
+    border-bottom: 1px solid $page-color-base;
+    .select-image {
+      width: 51rpx;
+      height: 110rpx;
+      line-height: 110rpx;
+      display: flex;
+      align-items: center;
+    }
+    .right {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .select-title {
+        margin-left: 18rpx;
+        color: #666666;
+        width: 200rpx;
+      }
+      .select-sub-title {
+        color: #cccccc;
+      }
+    }
+  }
+}
+</style>