Initial commit: 积分兑换电商平台多商户版 MER-2.2

Made-with: Cursor

mer_uniapp/pages/member/components/recordList.vue

@@ -0,0 +1,110 @@
+<template>
+  <view class="record-list">
+    <view class="record-actions" @click="requestRefund(item)">
+      <button class="refund-btn text-333 f-s-24">{{title}}</button>
+    </view>
+    <!-- 单条记录 -->
+    <view class="record-item" v-for="(item, index) in records" :key="index">
+      <!-- 记录详情循环展示 -->
+      <view class="record-row flex-between-center" v-for="(detail, index) in item.details" :key="detail.key">
+       <view>
+         <text class="f-s-28 text-666">{{ detail.label }}：</text>
+         <text
+             class="f-s-28 text-333"
+             :class="{
+              'font-color': detail.key === 'paidAmount'
+            }"
+         >
+           {{ detail.prefix }} {{ item[detail.key] }}
+         </text>
+       </view>
+        <text v-if="index === 0" class="font-color f-s-28">衣柜看</text>
+      </view>
+
+      <!-- 操作按钮 -->
+      <view class="record-actions" @click="requestRefund(item)">
+        <button class="refund-btn text-333 f-s-24">{{title}}</button>
+      </view>
+    </view>
+    <!-- 申请退款 -->
+    <request-refund ref="requestRefundRef" :orderNo="orderNo" @handleSubmit="handleSubmit"></request-refund>
+  </view>
+</template>
+
+<script>
+import requestRefund from "./requestRefund";
+
+export default {
+  name: "recordList",
+  components: {
+    requestRefund
+  },
+  props: {
+    records:{
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    title: {
+      type: String,
+      default: '',
+    }
+  },
+  data(){
+    return {
+      orderNo: ''
+    }
+  },
+  methods: {
+    // 申请退款
+    requestRefund(item){
+      this.orderNo = item.orderNo
+      this.$refs.requestRefundRef.open()
+    },
+    handleSubmit(){
+      this.$emit('handle-submit')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* 记录列表 */
+.record-list {
+  padding: 28rpx 24rpx;
+}
+
+/* 单条记录 */
+.record-item {
+  background-color: #ffffff;
+  border-radius: 12rpx;
+  padding: 32rpx 24rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+/* 记录行 */
+.record-row {
+  margin-bottom: 24rpx;
+}
+
+/* 最后一行记录行 */
+.record-row:last-child {
+  margin-bottom: 30rpx;
+}
+
+/* 操作按钮容器 */
+.record-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 20rpx;
+}
+
+/* 申请退款按钮 */
+.refund-btn {
+  padding: 12rpx 32rpx;
+  border-radius: 30rpx;
+  border: 1rpx solid #CCCCCC;
+}
+</style>

mer_uniapp/pages/member/components/requestRefund.vue

@@ -0,0 +1,146 @@
+<template>
+  <view :data-theme="theme">
+    <uni-popup ref="popup" type="bottom" @change="change">
+      <view class="refund-content bg--w111-fff borders-radius-top">
+        <view class="title relative text-center f-s-32 text-333 fw-500">
+          退款申请
+          <CloseIcon @handle-close="close"></CloseIcon>
+        </view>
+        <view class="content">
+          <view class="textarea-box bg--w111-f5f5f5 rd-20px p-24 mb-30">
+            <textarea
+              v-model="refundReason"
+              placeholder="请填写退款申明"
+              placeholder-class="text-999"
+              class="w-full h-200 f-s-28 text-333"
+              maxlength="200"
+            />
+          </view>
+          <view class="footer flex justify-between align-center items-center pt-20">
+            <view class="f-s-28 text-333"></view>
+            <view class="btn-submit bg-color text--w111-fff f-s-26 flex-center" @click="submit">提交</view>
+          </view>
+        </view>
+      </view>
+    </uni-popup>
+  </view>
+</template>
+
+<script>
+import {shoppingCreditsRefundApplyApi} from "../memberApi";
+const app = getApp();
+export default {
+  name: "requestRefund",
+  props: {
+    orderNo: {
+      type: String,
+      default: '',
+    },
+    refundAmount: {
+      type: String,
+      default: '',
+    }
+  },
+  data() {
+    return {
+      theme: app.globalData.theme,
+      refundReason: '',
+    }
+  },
+  methods: {
+    open() {
+      this.$refs.popup.open()
+    },
+    close() {
+      this.$refs.popup.close()
+    },
+    change(e) {
+      this.$emit('change', e)
+    },
+    async submit() {
+      if (!this.refundReason.trim()) {
+        return uni.showToast({
+          title: '请填写退款申明',
+          icon: 'none'
+        })
+      }
+      try {
+        await shoppingCreditsRefundApplyApi({
+          refundReason: this.refundReason,
+          orderNo: this.orderNo
+        })
+        uni.showToast({
+          title: '申请成功',
+          icon: 'none'
+        })
+        this.refundReason = ''
+        this.close()
+        this.$emit('handleSubmit')
+      }catch (e) {
+        uni.showToast({
+          title: e,
+          icon: 'none'
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.refund-content {
+  background-color: #fff;
+  border-radius: 40rpx 40rpx 0 0;
+  padding: 32rpx 24rpx 50rpx;
+  position: relative;
+  
+  .title {
+    padding: 0 0 44rpx;
+    
+    .close {
+      right: 0;
+      top: 10rpx;
+      width: 40rpx;
+      height: 40rpx;
+      
+      .iconfont {
+        font-size: 32rpx;
+        color: #999;
+      }
+    }
+  }
+  
+  .content {
+    .textarea-box {
+      background-color: #F5F5F5;
+      padding: 24rpx;
+      border-radius: 14rpx;
+      border: 1px solid #eee;
+      
+      textarea {
+        width: 100%;
+        height: 260rpx;
+        font-size: 28rpx;
+        line-height: 1.5;
+      }
+    }
+    
+    .footer {
+      margin-top: 20rpx;
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom);
+      
+      .btn-submit {
+        width: 168rpx;
+        height: 72rpx;
+        @include linear-gradient(theme);
+        border-radius: 50rpx;
+        
+        &:active {
+          opacity: 0.9;
+        }
+      }
+    }
+  }
+}
+</style>