二期样式

.env.development

@@ -10,5 +10,5 @@ VITE_APP_BASE_API = ''
 # 路由懒加载
 VITE_CLI_BABEL_TRANSPILE_MODULES = true
 
-VITE_API_URL=http://192.168.168.104:8090
-# VITE_API_URL=https://test-coupon.qiuyutech.com.cn/stage-api
+# VITE_API_URL=http://192.168.168.104:8090
+VITE_API_URL=https://test-coupon.qiuyutech.com.cn/stage-api

package.json

@@ -70,7 +70,7 @@
     "@uni-helper/vite-plugin-uni-components": "^0.2.0",
     "@vue/runtime-core": "^3.4.21",
     "@vue/tsconfig": "^0.1.3",
-    "sass": "^1.78.0",
+    "sass": "^1.77.8",
     "typescript": "^5.8.3",
     "vite": "5.2.8",
     "vue-tsc": "^1.0.24"

src/components/customUpload.vue

@@ -0,0 +1,96 @@
+<template>
+  <view class="customUploadContainer">
+    <view class="tBox">
+      <text class="xing">*</text>
+      <text>{{ props.title }}</text>
+    </view>
+    <wd-upload
+      :file-list="fileList"
+      multiple
+      :limit="5"
+      :upload-method="customUpload"
+      @remove="handleRemove"
+    >
+      <image
+        class="upload"
+        src="https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/upload.png"
+        mode="scaleToFill"
+      />
+    </wd-upload>
+    <view class="tips">最多上传5张照片</view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { onLoad } from "@dcloudio/uni-app";
+import { reactive, ref } from "vue";
+const fileList = ref<any[]>([]);
+const imgList = ref<string[]>([]);
+const action = import.meta.env.VITE_API_URL + "/miniApp/oss/upload";
+
+const props = defineProps({
+  title: String,
+});
+const emit = defineEmits();
+
+const customUpload = (file: any, formData: any, options: any) => {
+  uni.uploadFile({
+    url: action,
+    header: options.header,
+    name: options.name,
+    fileName: options.name,
+    fileType: options.fileType,
+    formData,
+    filePath: file.url,
+    success(res) {
+      if (res.statusCode === options.statusCode) {
+        // 设置上传成功
+        options.onSuccess(res, file, formData);
+        const data = JSON.parse(res.data);
+        imgList.value.push(data.url);
+        emit("success", imgList.value);
+      } else {
+        // 设置上传失败
+        options.onError({ ...res, errMsg: res.errMsg || "" }, file, formData);
+      }
+    },
+    fail(err) {
+      // 设置上传失败
+      options.onError(err, file, formData);
+    },
+  });
+};
+
+const handleRemove = (file: any) => {
+  const data = JSON.parse(file.file.response);
+  imgList.value = imgList.value.filter((item) => item !== data.url);
+};
+</script>
+
+<style lang="scss">
+.customUploadContainer {
+  padding: 40rpx 32rpx;
+  .tBox {
+    color: #333333;
+    font-size: 32rpx;
+    font-weight: bold;
+    margin-bottom: 32rpx;
+    .xing {
+      color: #e90308;
+    }
+  }
+
+  .wd-upload__picture {
+    width: 196rpx !important;
+    height: 196rpx !important;
+  }
+  .upload {
+    width: 196rpx;
+    height: 196rpx;
+  }
+  .tips {
+    font-size: 20rpx;
+    color: #bfc8db;
+  }
+}
+</style>

src/components/userLoginPopup.vue

@@ -29,11 +29,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, defineExpose } from "vue";
+import { ref } from "vue";
 import { useDraw } from "@/hooks/useDraw";
 let show = ref(false);
 const emit = defineEmits();
-import { verifyPhone, getMobile, isGetPhone } from "@/utils/system";
+import { getMobile, isGetPhone } from "@/utils/system";
 
 const props = defineProps({
   path: {

src/pages.json

@@ -51,9 +51,10 @@
           }
         },
         {
-          "path": "record/uploadList",
+          "path": "record/recordList",
           "style": {
-            "navigationBarTitleText": "上传记录"
+            "navigationBarTitleText": "上传记录",
+            "navigationBarBackgroundColor": "#fff"
           }
         },
         {
@@ -61,6 +62,31 @@
           "style": {
             "navigationBarTitleText": "上传记录详情"
           }
+        },
+        {
+          "path": "claim/apply",
+          "style": {
+            "navigationBarTitleText": "快速理赔申请"
+          }
+        },
+        {
+          "path": "claim/graph",
+          "style": {
+            "navigationBarTitleText": "快速理赔申请"
+          }
+        },
+        {
+          "path": "claim/uploadRecept",
+          "style": {
+            "navigationBarTitleText": "批量上传照片"
+          }
+        },
+        {
+          "path": "claim/claimRecord",
+          "style": {
+            "navigationBarTitleText": "快速理赔",
+            "navigationBarBackgroundColor": "#fff"
+          }
         }
       ]
     }

src/pages/index/index.vue

@@ -15,6 +15,13 @@
       mode="scaleToFill"
       @click="toActivity"
     />
+
+    <image
+      class="enter-img"
+      src="https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/lp.png"
+      mode="scaleToFill"
+      @click="toActivity"
+    />
     <!-- <button open-type="getPhoneNumber" @getphonenumber="getPhone">
       获取手机号
     </button> -->

src/pages/my/index.vue

@@ -31,7 +31,11 @@
         <view class="title"> 常用工具 </view>
 
         <view class="tools">
-          <wd-cell is-link title="奖励记录" @click="toWinner">
+          <wd-cell
+            is-link
+            title="奖励记录"
+            @click="toNextPage('/pagesOne/record/winnerList')"
+          >
             <template #icon>
               <image :src="imgObj.gift" mode="scaleToFill" />
             </template>
@@ -42,7 +46,27 @@
               class="custom-text"
             />
           </wd-cell>
-          <wd-cell border is-link title="上传记录" @click="toUpLoad">
+          <wd-cell
+            is-link
+            title="快速理赔"
+            @click="toNextPage('/pagesOne/claim/apply')"
+          >
+            <template #icon>
+              <image :src="imgObj.lpIcon" mode="scaleToFill" />
+            </template>
+            <image
+              style="width: 128rpx; height: 48rpx"
+              :src="imgObj.with"
+              mode="scaleToFill"
+              class="custom-text"
+            />
+          </wd-cell>
+          <wd-cell
+            border
+            is-link
+            title="上传记录"
+            @click="toNextPage('/pagesOne/record/recordList')"
+          >
             <template #icon>
               <image :src="imgObj.page" mode="scaleToFill" />
             </template>
@@ -50,7 +74,7 @@
         </view>
       </view>
 
-     <!-- <view class="addressBox">
+      <!-- <view class="addressBox">
         <view class="title"> 附近门店 </view>
         <view>
           <view v-for="(item, index) in list2" :key="index" class="address">
@@ -82,10 +106,11 @@ import { onLoad, onShow } from "@dcloudio/uni-app";
 
 import { ref } from "vue";
 import { getNavTop } from "@/utils/system";
-import { paymentAPI } from "@/services/ams";
+// import { paymentAPI } from "@/services/ams";
 import { getActivityData, isGetPhone, getMobile } from "@/utils/system";
 import UserLoginPopup from "@/components/userLoginPopup.vue";
 import NearlyStoreBox from "./components/nearlyStoreBox.vue";
+// import { validateHeaderName } from "http";
 const imgObj = {
   user: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/user.png",
   int: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/int.png",
@@ -94,6 +119,7 @@ const imgObj = {
   page: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/page.png",
   with: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/with.png",
   myBg: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/myBg.png",
+  lpIcon: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/lpIcon.png",
 };
 
 const list = [
@@ -129,27 +155,27 @@ const loginRef = <any>ref(null);
 const path = ref<string>("");
 const phone = uni.getStorageSync("phone");
 
-const toWinner = () => {
-  path.value = "/pagesOne/record/winnerList";
+const toNextPage = (val: string) => {
+  path.value = val;
   if (!isGetPhone()) {
     loginRef.value.show = true;
   } else {
     uni.navigateTo({
-      url: "/pagesOne/record/winnerList",
+      url: val,
     });
   }
 };
 
-const toUpLoad = () => {
-  path.value = "/pagesOne/record/uploadList";
-  if (!isGetPhone()) {
-    loginRef.value.show = true;
-  } else {
-    uni.navigateTo({
-      url: "/pagesOne/record/uploadList",
-    });
-  }
-};
+// const toUpLoad = () => {
+//   path.value = "/pagesOne/record/uploadList";
+//   if (!isGetPhone()) {
+//     loginRef.value.show = true;
+//   } else {
+//     uni.navigateTo({
+//       url: "/pagesOne/record/uploadList",
+//     });
+//   }
+// };
 
 const mobile = ref<string>("");
 const onLogin = async (e: any) => {

src/pagesOne/claim/apply.vue

@@ -0,0 +1,80 @@
+<template>
+  <view class="applyContainer">
+    <view class="main">
+      <view class="tags"> 理赔申请 </view>
+      <view class="content">
+        优惠券在使用微信支付后，若出现未满减的问题，为了避免顾客长时间的等待，可通过此通道按要求上传图片，审核通过后，会给您返现相应的金额红包请注意微信的【服务通知】
+      </view>
+      <view class="btn" @click="toUpload"> 上传凭证 </view>
+      <view class="guide" @click="toGraph"
+        >支付账单详情和优惠券的获取指引></view
+      >
+    </view>
+    <image
+      src="https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/dp.png"
+      mode="scaleToFill"
+      class="dun"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+const toGraph = () => {
+  uni.navigateTo({
+    url: "/pagesOne/claim/graph",
+  });
+};
+
+const toUpload = () => {
+  uni.navigateTo({
+    url: "/pagesOne/claim/uploadRecept",
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.applyContainer {
+  background: $bg-green;
+  width: 100%;
+  height: 100vh;
+  font-family: PingFang SC;
+  overflow: hidden;
+  .main {
+    margin: 32rpx;
+    border-radius: 16rpx;
+    background: #fff;
+    padding: 32rpx;
+    box-sizing: border-box;
+    .tags {
+      width: 134rpx;
+      text-align: center;
+      line-height: 48rpx;
+      color: #fff;
+      font-size: 24rpx;
+      text-align: center;
+      background: $bg-green2;
+      border-radius: 8rpx;
+    }
+    .content {
+      font-size: 32rpx;
+      margin: 24rpx 0 80rpx;
+    }
+    .btn {
+      @include btnStyle(560rpx, 104rpx);
+      margin: auto;
+    }
+    .guide {
+      color: #2a6443;
+      font-size: 28rpx;
+      text-align: center;
+      margin-top: 20rpx;
+      text-decoration: underline;
+    }
+  }
+  .dun {
+    width: 106px;
+    height: 108px;
+    float: right;
+  }
+}
+</style>

src/pagesOne/claim/claimRecord.vue

@@ -0,0 +1,48 @@
+<template>
+  <view class="claimRecord">
+    <view class="content">
+      <view class="title">理赔记录</view>
+      <view>
+        <claim-item :isShow="false"></claim-item>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import ClaimItem from "../record/components/claimItem.vue";
+</script>
+
+<style lang="scss" scoped>
+.claimRecord {
+  background: #f7f8f9;
+  min-height: 100vh;
+  .title {
+    color: #000;
+    font-weight: bold;
+    font-size: 32rpx;
+    position: relative;
+    margin-left: 16rpx;
+    margin-bottom: 16rpx;
+    &::before {
+      content: " ";
+      display: inline-block;
+      width: 6rpx;
+      height: 30rpx;
+      background-color: #296041;
+      margin-right: 16rpx;
+      position: absolute;
+      border-radius: 200rpx;
+      left: -16rpx;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+    }
+  }
+  .content {
+    // margin: 32rpx;
+    padding: 22rpx;
+    box-sizing: border-box;
+  }
+}
+</style>

src/pagesOne/claim/graph.vue

@@ -0,0 +1,25 @@
+<template>
+  <view class="graphContainer">
+    <image
+      src="https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/graph.png"
+      mode="scaleToFill"
+    />
+  </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.graphContainer {
+  background: $bg-green;
+  height: 1420rpx;
+  padding: 32rpx;
+  box-sizing: border-box;
+  image {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/pagesOne/claim/uploadRecept.vue

@@ -0,0 +1,45 @@
+<template>
+  <view class="uploadReceptBox">
+    <custom-upload title="购物小票图片" @success="handleRecept"></custom-upload>
+    <custom-upload
+      title="微信支付账单详情图片"
+      @success="handleBill"
+    ></custom-upload>
+  </view>
+  <wd-gap bg-color="#fff" height="256rpx"></wd-gap>
+  <view class="btn" @click="toAdd">立即上传</view>
+</template>
+
+<script lang="ts" setup>
+import CustomUpload from "@/components/customUpload.vue";
+const handleRecept = (val: Array<string>) => {
+  console.log(val);
+};
+const handleBill = (val: Array<string>) => {
+  console.log(val);
+};
+</script>
+
+<style lang="scss" scoped>
+.uploadReceptBox {
+  min-height: 100vh;
+}
+.btn {
+  width: 560rpx;
+  background: linear-gradient(90deg, #225036 0%, #3b8e5e 45.92%, #296141 100%);
+  color: #fff;
+  font-size: 32rpx;
+  border-radius: 80rpx;
+
+  margin: 204rpx auto 0;
+  text-align: center;
+  line-height: 100rpx;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  bottom: 153rpx;
+  z-index: 99;
+}
+</style>

src/pagesOne/record/claimList.vue

@@ -0,0 +1,38 @@
+<template>
+  <view class="claimList">
+    <empty-box
+      v-if="list.length == 0"
+      text="暂无上传记录"
+      src="https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/no-upload.png"
+    ></empty-box>
+    <view @click="toDetail" class="itemBox">
+      <view class="clain">
+        <claim-item></claim-item>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import claimItem from "./components/claimItem.vue";
+const list: any = [];
+
+const toDetail = () => {
+  console.log("1111111111111111111");
+
+  uni.navigateTo({
+    url: "/pagesOne/claim/claimRecord",
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.claimList {
+  background: #f7f8f9;
+  height: calc(100vh - 84rpx);
+
+  .itemBox {
+    // margin: 32rpx;
+  }
+}
+</style>

src/pagesOne/record/components/claimItem.vue

@@ -0,0 +1,104 @@
+<template>
+  <view class="claimItem">
+    <view class="flex-btw-center">
+      <text>上传时间：2021-11-21 10:00:52</text>
+      <wd-tag
+        v-if="isShow"
+        custom-style="padding:8rpx 26rpx;border-radius: 8rpx;font-size:22rpx;float: right"
+        :color="formatTagColor(detail.processStatus)"
+        :bg-color="formatTagBgColor(detail.processStatus)"
+      >
+        {{ formatTagStr(detail.processStatus) }}
+      </wd-tag>
+    </view>
+    <view>
+      <text class="title">购物小票图片</text>
+      <view>
+        <wd-img
+          width="96rpx"
+          height="170rpx"
+          :src="joy"
+          :enable-preview="true"
+          custom-style="margin-right: 16rpx"
+        />
+      </view>
+    </view>
+    <view>
+      <text class="title">微信账单支付详情图片</text>
+      <view>
+        <wd-img
+          width="96rpx"
+          height="170rpx"
+          :src="joy"
+          :enable-preview="true"
+          custom-style="margin-right: 16rpx"
+        />
+      </view>
+    </view>
+    <view v-if="isShow" class="remark"
+      >拒绝原因：订单中活动商品数量/金额不足</view
+    >
+    <view v-if="!isShow" class="btn">提现</view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { formatTagColor, formatTagBgColor, formatTagStr } from "@/utils/common";
+const props = defineProps({
+  isShow: {
+    type: Boolean,
+    default: true,
+  },
+  detail: {
+    type: Object,
+    default: { processStatus: "2" },
+  },
+  index: {
+    type: Number,
+    default: 0,
+  },
+  isLink: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const joy =
+  "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/Group%201.png";
+</script>
+
+<style lang="scss" scoped>
+.claimItem {
+  font-size: 28rpx;
+  color: #666666;
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 22rpx;
+  box-sizing: border-box;
+  position: relative;
+  .space {
+    border: 2rpx solid;
+  }
+  .title {
+    color: #fff;
+    text-align: center;
+    background: $bg-green2;
+    width: auto;
+    padding: 8rpx 18rpx;
+    border-radius: 8rpx;
+    margin: 32rpx 0 24rpx;
+    display: inline-block;
+  }
+  .remark {
+    color: #ff3b1d;
+    margin-top: 6rpx;
+  }
+  .btn {
+    @include btnStyle(64px, 24px);
+    position: absolute;
+    right: 22rpx;
+    bottom: 24rpx;
+    font-weight: normal;
+  }
+}
+</style>

src/pagesOne/record/recordList.vue

@@ -0,0 +1,39 @@
+<template>
+  <view class="recordList">
+    <wd-tabs
+      v-model="activeName"
+      auto-line-width
+      color="#337B52"
+      inactiveColor="#555D6C"
+    >
+      <wd-tab title="小票上传记录" name="1">
+        <view class="content"><upload-list></upload-list></view>
+      </wd-tab>
+      <wd-tab title="快速理赔上传记录" name="2">
+        <view class="content"><claim-list></claim-list></view>
+      </wd-tab>
+    </wd-tabs>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import uploadList from "./uploadList.vue";
+import claimList from "./claimList.vue";
+import emptyBox from "@/components/emptyBox.vue";
+
+const activeName = ref("2");
+
+const handleChange = (name: string) => {};
+
+onLoad(() => {});
+</script>
+
+<style lang="scss">
+.recordList {
+  .wd-tabs__line {
+    background: #337b52 !important;
+  }
+}
+</style>

src/pagesOne/record/uploadList.vue

@@ -1,8 +1,12 @@
 <template>
-  <view class="winnerListContent">
-    <view class="title">上传记录</view>
+  <scroll-view scroll-y class="winnerListContent">
+    <!-- <view class="title">上传记录</view> -->
     <view class="content">
-			<empty-box v-if="list.length == 0" text="暂无上传记录" src="https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/no-upload.png"></empty-box>
+      <empty-box
+        v-if="list.length == 0"
+        text="暂无上传记录"
+        src="https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/no-upload.png"
+      ></empty-box>
       <active-block
         v-for="(item, index) in list"
         :key="item.id"
@@ -11,31 +15,31 @@
         isLink
       ></active-block>
     </view>
-  </view>
+    <wd-gap bg-color="#f7f8f9" height="50rpx"></wd-gap>
+  </scroll-view>
 </template>
 
 <script lang="ts" setup>
 import { onLoad, onReachBottom } from "@dcloudio/uni-app";
-import { ref,reactive } from "vue";
+import { ref, reactive } from "vue";
 import ActiveBlock from "./components/activeBlock.vue";
 import { rewardList } from "@/services/ams";
-import emptyBox from '@/components/emptyBox.vue'
+import emptyBox from "@/components/emptyBox.vue";
 
 const openid = uni.getStorageSync("openid");
 
-
 const list = <any>ref([]);
 
-const params =<any>reactive({
-	pageSize:10,
-	pageNum:1,
-	currentPage:0
-})
+const params = <any>reactive({
+  pageSize: 10,
+  pageNum: 1,
+  currentPage: 0,
+});
 
 const getList = () => {
-  rewardList({ openid,...params }).then((res: any) => {
-		params.currentPage = Math.ceil(res.total / params.pageSize)
-    list.value = [...list.value,...res.rows];
+  rewardList({ openid, ...params }).then((res: any) => {
+    params.currentPage = Math.ceil(res.total / params.pageSize);
+    list.value = [...list.value, ...res.rows];
   });
 };
 
@@ -43,12 +47,12 @@ onLoad(() => {
   getList();
 });
 
-onReachBottom(()=>{
-	if (params.pageNum < params.currentPage) {
-		params.pageNum ++
-		getList()
-	}
-})
+onReachBottom(() => {
+  if (params.pageNum < params.currentPage) {
+    params.pageNum++;
+    getList();
+  }
+});
 </script>
 
 <style lang="scss" scoped>
@@ -56,28 +60,9 @@ onReachBottom(()=>{
   padding: 32rpx;
   box-sizing: border-box;
   background: #f7f8f9;
-  min-height: 100vh;
-  .title {
-    color: #000;
-    font-weight: bold;
-    font-size: 32rpx;
-    position: relative;
-    margin-left: 16rpx;
-    &::before {
-      content: " ";
-      display: inline-block;
-      width: 6rpx;
-      height: 30rpx;
-      background-color: #296041;
-      margin-right: 16rpx;
-      position: absolute;
-      border-radius: 200rpx;
-      left: -16rpx;
-      top: 0;
-      bottom: 0;
-      margin: auto;
-    }
-  }
+  height: calc(100vh - 84rpx);
+  // min-height: 95vh;
+
   .content {
     .activityItem {
       height: 250rpx;

src/static/app.scss

@@ -0,0 +1,2 @@
+// @import "@/static/index.scss";
+@import "./normal.scss";

src/static/index.scss

@@ -0,0 +1,21 @@
+$linear-green1: linear-gradient(0deg, #fff6d8 0%, #ffffff 100%);
+$btn-green-linear: linear-gradient(
+  90deg,
+  #225036 0%,
+  #3b8e5e 45.92%,
+  #296141 100%
+);
+
+$bg-green: #3a8b5c;
+$bg-green2: #337b52;
+
+@mixin btnStyle($width, $height) {
+  background: $btn-green-linear;
+  border-radius: 80rpx;
+  font-weight: 600;
+  color: #fff;
+  width: $width;
+  height: $height;
+  text-align: center;
+  line-height: $height;
+}

vite.config.ts

@@ -13,6 +13,14 @@ export default defineConfig({
       "@": resolve(__dirname, "src"),
     },
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        sassOptions: { outputStyle: "expanded" },
+        additionalData: `@import "@/static/index.scss";`,
+      },
+    },
+  },
   server: {
     proxy: {
       [process.env.VITE_APP_BASE_API as string]: {