优惠券

src/components/common/common-navbar.vue

@@ -3,7 +3,7 @@
     <div
       class="nav-part"
       :style="'background:' + bgColor + ';'
-      + 'padding-top:' + paddingTop + ';border-bottom:' + borderStyle"
+      + 'padding-top:' + paddingTop+ ';padding-bottom:' + paddingbtm  + ';border-bottom:' + borderStyle"
     >
       <div class="nav-title">
         <span class="nav-back" @click="goBack">
@@ -18,6 +18,7 @@
           <img v-show="!isBlack" src="../../images/cme/share-icon-white.png"/>
         </span>
       </div>
+      <slot name="tabs" />
     </div>
   </section>
 </template>
@@ -97,6 +98,10 @@ export default {
       type: String | Number,
       default: ""
     },
+    paddingbtm: {
+      type: String | Number,
+      default: "0px"
+    },
     isInMergeDetail: {
       type: Boolean,
       default: true

src/router/router.js

@@ -14,6 +14,7 @@ const questionBank = r => require.ensure([], () => r(require('../views/question-
 const questionDetail = r => require.ensure([], () => r(require('../views/question-detail')), 'question-detail')
 
 const couponList = r => require.ensure([], () => r(require('../views/coupon/coupon-list')), 'coupon-list')
+const couponCenter= r => require.ensure([], () => r(require('../views/coupon-center/index')), 'coupon-center')
 
 export default [{
   path: '/',
@@ -80,6 +81,13 @@ export default [{
       meta: {
         title: '优惠券'
       }
+    },
+    {
+      path: '/coupon-center',
+      component: couponCenter,
+      meta: {
+        title: '领券中心'
+      }
     }
   ]
 }]

src/utils/env-config.js

@@ -4,11 +4,11 @@
 export const envConfig = {
   development: {
     // baseUrl: 'http://sosoapi.yunqueyi.com/sosoapi-web/pass/mock/72/',
-    // baseUrl: 'https://dev-sc.yunqueyi.com/',
+    baseUrl: 'https://dev-sc.yunqueyi.com/',
     // baseUrl: 'http://10.177.15.180:10202/',
     // baseUrl: 'http://192.168.140.14:10201/',
 
-    baseUrl: 'https://test1-sc.yunqueyi.com/',
+    // baseUrl: 'https://test1-sc.yunqueyi.com/',
     apiUrl: 'https://dev-api.yunqueyi.com/',
     webPageUrl: 'https://dev-phome.yunqueyi.com/',
     hactiveUrl: 'https://dev-hactive.yunqueyi.com',

src/utils/index.js

@@ -70,6 +70,7 @@ export function getTradeType() {
 
 // 根据不同环境，生成URL
 function getConfigByEnvType(urlType) {
+  console.log(process.env.BUILD_ENV,'process.env.BUILD_ENV')
   return envConfig[process.env.BUILD_ENV][urlType]
 }
 

src/utils/mixins.js

@@ -231,7 +231,6 @@ module.exports = {
 
         // 校验token，有效则调用回调函数，否则调起原生登陆页面
         commonCheckToken(cb) {
-            console.log('5555 this.token', this.token);
             let param = {
                 token: this.token || this.$store.state.user.token || this.$store.state.coop.userInfo.userToken || localStorage.getItem("couponToken") || getCookie("couponToken"),
                 // token: this.token || this.$store.state.user.token || this.$store.state.coop.userInfo.userToken,

src/views/coupon-center/index.vue

+<template>
+  <section class="coupon-list-wrapper" :class="{ 'no-pt': isWeb }">
+    <div class="page-wrapper">
+      <!-- <common-header
+      :bg-color="bgColor"
+      title="领券中心"
+      :is-black="true"
+      :is-fixheader="true"
+      :is-hundred-height="true"
+    /> -->
+      <CommonNavbar
+        :isWeb="isWeb"
+        ref="navBarCom"
+        :bgColor="bgColor"
+        :paddingbtm="paddingbtm"
+        v-if="isShowNavbar"
+        :title="navTitle"
+        :isFixNavbar="isFixNavbar"
+        :isInMergeDetail="isInMergeDetail"
+      >
+      </CommonNavbar>
+      <div class="page-content">
+        <van-list v-if="couponList.length" class="list" enable-flex scroll-y>
+          <coupo-item
+            v-for="(item, index) in couponList"
+            :key="index"
+            class="item"
+            :coupon-detail="item"
+            :has-tips="hasTips"
+            :has-stock="false"
+            @goUse="chooseCoupon"
+          />
+        </van-list>
+        <div v-else>
+          <empty />
+        </div>
+      </div>
+      <coupon-tips :visible.sync="show" @close="close" />
+    </div>
+  </section>
+</template>
+<script>
+import CoupoItem from "../coupon/components/coupon-item.vue";
+import empty from "../coupon/components/empty.vue";
+// import CommonHeader from '@/components/common/header';
+import CommonNavbar from "@/components/common/common-navbar";
+import CouponTips from "../coupon/components/coupon-tips.vue";
+// import { getSearchCoupons, receiveCoupon } from "@/api/coupon.js";
+import { getWebPageUrl, getHactiveUrl } from "@/utils";
+import { mapGetters, mapActions } from "vuex";
+import { setCookie, getCookie, delCookie } from "@/utils/index";
+export default {
+  components: {
+    CoupoItem,
+    empty,
+    // CommonHeader,
+    CommonNavbar,
+    CouponTips,
+  },
+  data() {
+    return {
+      couponList: [],
+      hasTips: false,
+      show: false,
+      token: "",
+      couponToken: "",
+      shareUrl: "",
+      isWeb: window.__isWeb,
+      bgColor: "#fff",
+      paddingbtm: 0,
+      isShowNavbar: true,
+      navTitle: "领券中心",
+      isFixNavbar: true,
+      isInMergeDetail: false,
+    };
+  },
+  watch: {
+    webUserInfo: {
+      handler(userInfo) {
+        console.log("userInfo", userInfo);
+        if (userInfo.id) {
+          this.getSearchCoupons();
+        }
+      },
+      deep: true,
+    },
+  },
+  computed: {
+    ...mapGetters(["webUserInfo"]),
+  },
+  created() {
+    let _this = this;
+    let href = location.href;
+    this.couponToken = this.$route.query.couponToken || "";
+
+    this.shareUrl = getWebPageUrl(`profexam/#/coupon-center`);
+    if (href.indexOf("singlemessage") >= 0 || href.indexOf("wx_code") >= 0) {
+      location.replace(this.shareUrl);
+    }
+    localStorage.setItem("returnUrl", this.shareUrl);
+
+    window.__getUserInfo4CouponList = function (param) {
+      console.log("__getUserInfo4CouponList", param);
+      _this.token = param.userToken;
+      _this.setUserInfo(param);
+      _this.getSearchCoupons();
+    };
+
+    window.__refresh = function () {
+      console.log(1);
+
+      _this.getUserInfo();
+    };
+  },
+  mounted() {
+    // 如果在浏览器或微信里
+    if (this.isWeb) {
+      const { token, info } = this.$store.state.user;
+      this.token =
+        token ||
+        this.couponToken ||
+        localStorage.getItem("couponToken") ||
+        getCookie("couponToken");
+      if (this.token && !info.id) {
+        console.log("4444 this.token", this.token);
+        // this.$store.dispatch('setToken', this.token);
+        this.commonCheckToken(() => {
+          this.$store.dispatch("setToken", this.token);
+          // this.$store.dispatch("getUserInfo");
+        });
+      }
+      // 从登陆页面过来的
+      this.getSearchCoupons();
+    } else {
+      this.getUserInfo();
+    }
+  },
+  methods: {
+    ...mapActions(["setUserInfo"]),
+    //获取用户信息
+    getUserInfo() {
+      rocNative.getUserInfo({
+        __funcName: "__getUserInfo4CouponList",
+      });
+    },
+    getSearchCoupons() {
+      this.POST(`trade/coupon/app/searchCoupons`, {}).then((res) => {
+        console.log(res);
+        this.couponList = res.data.baseCouponModelList;
+      });
+    },
+    chooseCoupon(item) {
+      switch (item.couponStatus) {
+        case 0:
+          receiveCoupon(item.couponId, item.grantConfigId).then((res) => {
+            console.log(res, "receiveCoupon");
+            //   couponType 1 满减 2 立减  todo 现金红包
+            // if (item.couponType === 2) {
+            //   this.show = true;
+            // } else {
+            this.$toast("领取成功");
+            this.getSearchCoupons();
+            // }
+          });
+
+          break;
+        case 1:
+          // uni.switchTab({
+          //   url: "/pages/home/index",
+          // });
+          this.$router.push({
+            path: "/consultation/",
+            query: { backMethod: "web" },
+          });
+          break;
+        default:
+          break;
+      }
+      console.log(this.show, item);
+    },
+    close() {},
+  },
+};
+</script>
+<style lang="less" scoped>
+.coupon-list-wrapper {
+  padding-top: 88px;
+  min-height: 100vh;
+  background: #f8f9fa;
+  &.no-pt {
+    padding-top: 10px;
+  }
+}
+.page-wrapper {
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  /deep/ .nav-title {
+    border-bottom: 1px solid transparent !important;
+    position: relative !important;
+  }
+  .ios_safe_height {
+    background-color: #fff;
+  }
+  .page-content {
+    padding: 10px 12px 24px;
+  }
+  .list {
+    padding-bottom: 50px;
+  }
+}
+</style>

src/views/coupon/components/coupon-bottom.vue

+<template>
+  <div class="coupon-bottom">
+    <div class="coupon-main flex">
+      <div class="flex coupon-bottom-left">
+        <img
+          class="image"
+          src="https://files.yunqueyi.com/image/png/common/20240425190946978.png"
+        >
+        <span class="more">领更多好券</span>
+      </div>
+      <div class="flex coupon-bottom-right">
+        <div
+          class="center"
+          @click="goCenter"
+        >
+          去领券中心
+        </div>
+        <van-icon
+          name="arrow"
+          color="#999999"
+          size="12px"
+        />
+      </div>
+    </div>
+    <div class="bottom" />
+  </div>
+</template>
+<script>
+  export default {
+    components: {},
+    props: {},
+    emits: [],
+    data() {
+      return {};
+    },
+    mounted() {},
+
+    methods: {
+      goCenter() {
+        console.log(111,'111')
+        this.$router.push({
+          path: '/coupon-center',
+          // query: { backMethod: 'web' },
+        });
+      },
+    },
+  };
+</script>
+<style lang="less" scoped>
+.coupon-bottom {
+  position: fixed;
+  width: 100%;
+  background: #fff;
+  z-index: 2;
+  bottom: 0;
+  z-index: 111;
+  // padding-bottom: calc(25rpx + constant(safe-area-inset-bottom));
+  // padding-bottom: calc(25rpx + env(safe-area-inset-bottom));
+  .coupon-main {
+    padding: 12px 20px;
+    box-shadow: inset 0 -1px 0 0 #e7e8e7;
+    justify-content: space-between;
+    .image {
+      height: 23px;
+      width: 22px;
+      margin-right: 8px;
+    }
+    .more {
+      font-weight: 500;
+      font-size: 15px;
+      color: #5f3c15;
+      line-height: 24px;
+    }
+    .center {
+      font-weight: 400;
+      font-size: 14px;
+      color: #999999;
+      line-height: 14px;
+      margin-right: 3px;
+    }
+
+  }
+ 
+    &-right {
+      align-items: center;
+    }
+  .bottom {
+    height: 26px;
+    width: 100%;
+    background-color: #fff;
+
+  }
+  .flex {
+    display: flex;
+  } 
+}
+</style>

src/views/coupon/components/coupon-tips.vue

+<template>
+  <div>
+    <van-dialog
+      v-model="visible"
+      class="coupon-dialog"
+      :show-confirm-button="false"
+    >
+      <div class="body">
+        <div class="title">
+          <div class="title-text">
+            领取成功!
+          </div>
+          <div
+            class="title-close"
+            @click="close"
+          >
+            <van-icon
+              name="cross"
+              size="22"
+              color="#aaaaaa"
+            />
+          </div>
+        </div>
+        <div class="card-item">
+          <div class="flex stretch">
+            <div class="card-item-left shadow">
+              <div class="card-item-left-top">
+                <span class="unit">¥</span> <span class="amount">
+                  20
+                </span>
+              </div>
+              <div class="card-item-left-bottom">
+                现金红包
+              </div>
+            </div>
+            <div class="card-item-right flex shadow">
+              <div class="card-item-right-center">
+                <div class="right-coupon">
+                  可至「云鹊医App-个人中心-账户余额」中提现
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card-bottom">
+          <span class="card-text"> 去提现 </span>
+        </div>
+      </div>
+    </van-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    components: {},
+    props: {
+      tabsDetail: {
+        type: Array,
+        default() {
+          return [];
+        },
+      },
+      visible: {
+        type: Boolean,
+      },
+    },
+    data() {
+      return {
+        currentIndex: 0,
+      };
+    },
+    mounted() {},
+
+    methods: {
+      changeTab(index) {
+        if (this.currentIndex === index) return;
+        this.currentIndex = index;
+        this.$emit('changeTab', this.currentIndex);
+      },
+      close() {
+        this.$emit('update:visible', false);
+        this.$emit('close', false);
+      },
+    },
+  };
+</script>
+<style scoped lang="less">
+.coupon-dialog{
+  /deep/ .van-dialog__content{
+      height: 273px;
+  }
+  .body {
+  height: 215px;
+  width: 295px;
+  background: url("https://files.yunqueyi.com/image/png/common/20240510112413239.png")
+    no-repeat;
+  background-size: 100% 100%;
+  border-radius: 12px;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  padding: 28px 24px 30px;
+
+  .title {
+    position: relative;
+    margin-bottom: 25px;
+    &-text {
+      font-weight: 500;
+      font-size: 28px;
+      color: #812603;
+      line-height: 28px;
+      text-align: center;
+      font-style: normal;
+    }
+    &-close {
+      position: absolute;
+      top: -4px;
+      right: 0;
+    }
+  }
+  .card-item {
+    margin-bottom: 10px;
+    &-left {
+      width: 119px;
+      &-top {
+        font-weight: 600;
+        font-size: 33px;
+        color: #fff;
+        line-height: 33px;
+        text-align: center;
+        margin-top: 20px;
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+        .unit {
+          font-weight: 500;
+          font-size: 15px;
+          color: #fff;
+          line-height: 15px;
+        }
+        .amount {
+          font-weight: 600;
+          font-size: 33px;
+          color: #fff;
+          line-height: 33px;
+        }
+      }
+      &-bottom {
+        font-weight: 400;
+        font-size: 12px;
+        color: #fff;
+        line-height: 12px;
+        text-align: center;
+        margin-top: 6px;
+      }
+    }
+    // .bar {
+    //   position: relative;
+    //   &-top {
+    //     width: 22rpx;
+    //     height: 12rpx;
+    //     background: #f5f6f8;
+    //     border-radius: 0 0 50% 50%;
+    //     line-height: 22rpx;
+    //     left: -11rpx;
+    //     position: absolute;
+    //   }
+    //   &-center {
+    //     width: 2rpx;
+    //     // min-height: 200rpx;
+    //     background-image: linear-gradient(to bottom, #fe624a 0%, #fe624a 80%, transparent 50%);
+    //     background-size: 3rpx 18rpx;
+    //     background-repeat: y-repeat;
+    //     opacity: 0.1;
+    //   }
+
+    //   &-bottom {
+    //     width: 22rpx;
+    //     height: 12rpx;
+    //     border-radius: 50% 50% 0 0;
+    //     background: #f5f6f8;
+    //     line-height: 22rpx;
+    //     left: -11rpx;
+    //     bottom: 0rpx;
+    //     position: absolute;
+    //   }
+    // }
+    &-right {
+      flex: 1;
+      //   min-height: 200rpx;
+      justify-content: space-between;
+      &-center {
+        padding: 0 14px;
+        height: 100px;
+        .right-coupon {
+          font-weight: 500;
+          font-size: 13px;
+          color: #fff;
+          line-height: 15px;
+          padding-top: 31px;
+        }
+      }
+    }
+  }
+  //   .shadow {
+  //     box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
+  //   }
+  .flex{
+    display: flex;
+  }
+  .stretch {
+    align-items: stretch;
+  }
+  .card-bottom {
+    padding: 15px 0;
+    margin: 0 5px;
+    text-align: center;
+    background: url("https://files.yunqueyi.com/image/png/common/20240510135801168.png")
+      no-repeat;
+    background-size: 100% 100%;
+    .card-text {
+      font-weight: 600;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 19px;
+      letter-spacing: 1px;
+      text-shadow: 0px 0px 10px #ff0009;
+      text-align: center;
+      font-style: normal;
+    }
+  }
+}
+}
+
+</style>

src/views/coupon/components/empty.vue

+<template>
+  <div>
+    <div class="empty">
+      <img
+        class="empty-image"
+        src="../../../images/empty.png"
+      >
+      <div class="empty-text">
+        您还没有优惠券
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    components: {},
+    props: {},
+    emits: [],
+    data() {
+      return {
+      };
+    },
+    mounted() {},
+
+    methods: {},
+  };
+</script>
+<style lang="less" scoped>
+.empty {
+  text-align: center;
+  margin-top: 300px;
+  height: 100%;
+  &-image {
+    width: 218px;
+    height: 102px;
+    margin: 0 auto;
+  }
+  &-text {
+    font-weight: 400;
+    font-size: 13px;
+    color: #999999;
+    line-height: 21px;
+  }
+}
+</style>

src/views/coupon/components/tabs.vue

+<template>
+  <div>
+    <div class="tabs">
+      <div class="tab-holder" />
+      <div
+        v-for="(item, index) in tabsDetail"
+        :key="index"
+        class="tab-item"
+        :class="{ active: index === currentIndex }"
+        @click="changeTab(index)"
+      >
+        <span>{{ item.title }}</span>
+      </div>
+      <div class="tab-holder" />
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    components: {},
+    props: {
+      defaultIndex: {
+        type: Number,
+        default() {
+          return 0;
+        },
+      },
+      tabsDetail: {
+        type: Array,
+        default() {
+          return [];
+        },
+      },
+    },
+    data() {
+      return {
+        currentIndex: this.defaultIndex,
+      };
+    },
+    mounted() {
+    },
+
+    methods: {
+      changeTab(index) {
+        if (this.currentIndex === index) return;
+        this.currentIndex = index;
+        this.$emit('changeTab', this.currentIndex);
+      },
+    },
+  };
+</script>
+<style lang="less" scoped>
+.tabs {
+  // position: fixed;
+  top: 84px;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  height: 50px;
+  display: flex;
+  white-space: nowrap;
+  background-color: #fff;
+  border-bottom: 1px solid #e7e8e7;
+  z-index: 111;
+  .tab-item {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 0 14px;
+    font-weight: 600;
+    font-size: 15px;
+    color: #979899;
+    &.active {
+      color: #373839;
+      &::after {
+        position: absolute;
+        left: 50%;
+        bottom: 0;
+        transform: translateX(-50%);
+        display: block;
+        content: "";
+        width: 22px;
+        height: 3px;
+        background: #fe6d0e;
+        border-radius: 2px;
+        z-index: 1;
+      }
+    }
+  }
+  .tab-holder {
+    flex: 0 0 6px;
+  }
+}
+</style>