兑换记录,合作企业页面开发

src/components/common/Tatle.vue

@@ -13,7 +13,8 @@
      <van-row >
        <van-col  span="9" v-if="tatleflag"><van-icon name="arrow-left" @click="retyen()" /></van-col>
        <van-col  span="15">{{tatle}}</van-col>
-   </van-row> 
+       <slot></slot>
+   </van-row>
   </div>
 </template>
 

src/router/index.ts

@@ -31,6 +31,7 @@ const routes: Array<RouteConfig> = [
   {
     path: "/login",
     component: () => import(/* webpackChunkName: "login" */ "@/views/authentication/LoginView.vue"),
+    //component: () => import(/* webpackChunkName: "login" */ "@/components/common/Tool.vue"),
     meta: { keepAlive: true, requiresAuth: true },
   },
   //...mainRoutes,

src/router/workbench.routing.ts

@@ -24,8 +24,20 @@ const workbenchRoutes = [
     component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/workbench/Accommodation.vue"),
     props: propsConvert,
     meta: { keepAlive: false, requiresAuth: true, name: "贷款信息" },
-  }
- 
- 
+  },
+  {
+    path: `/CooperationBusiness`,
+    name: 'CooperationBusiness',
+    component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/workbench/CooperationBusiness.vue"),
+    props: propsConvert,
+    meta: { keepAlive: false, requiresAuth: true, name: "合作企业" },
+  },
+  {
+    path: `/ExchangeRecord`,
+    name: 'ExchangeRecord',
+    component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/workbench/ExchangeRecord.vue"),
+    props: propsConvert,
+    meta: { keepAlive: false, requiresAuth: true, name: "兑换记录" },
+  },
 ];
 export default workbenchRoutes;

src/services/component-vue.service.ts

@@ -32,10 +32,11 @@ import CardUnLogin from "@/components/common/CardUnLogin.vue";
 import ProductDetail from "@/components/common/ProductDetail.vue";
 import PicketAcced from "@/components/common/PicketAcced.vue";
 import ProductCard from "@/components/common/ProductCard.vue";
+import CompanyCard from "@/views/workbench/CompanyCard.vue";
 
 
 
-ProductCard
+//ProductCard
 declare module "vue/types/vue" {
   interface Vue {
     $message: any;
@@ -99,7 +100,7 @@ class ComponentVueService {
     Vue.component("base-list", BaseList);
     Vue.component("anchor-nav", AnchorNav);
     Vue.component("tatle-bar", Tatle);
-    Vue.component("picket-bar", picket); Tool
+    Vue.component("picket-bar", picket);
     Vue.component("tools-bar", Tool);
     Vue.component("bottom-bar", Bottom);
     Vue.component("person-bar", Person);
@@ -109,7 +110,7 @@ class ComponentVueService {
     Vue.component("product-detail", ProductDetail);
     Vue.component("product-card", ProductCard);
     Vue.component("picket-acced", PicketAcced);
-    
+    Vue.component("company-card",CompanyCard);
   }
 }
 const componentService = new ComponentVueService();

src/views/MyView/MyPage.vue

@@ -66,12 +66,14 @@ export default class MyPage extends Vue {
   {
     productname: "兑换记录",
     //图片信息
-    img: "#icon-a-duihuanjilu16x16px"
+    img: "#icon-a-duihuanjilu16x16px",
+    flag: "ExchangeRecord",
   },
   {
     productname: "合作企业",
     //图片信息
-    img: "#icon-a-hezuoqiye16x16px"
+    img: "#icon-a-hezuoqiye16x16px",
+    flag: "CooperationBusiness",
   }]
 
   //点击事件
@@ -87,6 +89,14 @@ export default class MyPage extends Vue {
         name: "Accommodation"
         //参数
       })
+    } else if ( item.flag === "ExchangeRecord") {
+      this.$router.push({
+        name: "ExchangeRecord"
+      })
+    } else if ( item.flag === "CooperationBusiness") {
+      this.$router.push({
+        name: "CooperationBusiness"
+      })
     }
   }
 }

src/views/workbench/CompanyCard.vue

+<template>
+  <div class="d-page backage-color-body">
+    <scroller-view>
+  <div class="roolsolt" v-for="(item , index) in params" :key="index">
+    <div class="body">
+      <van-row type="flex" class="title">
+        <van-col  span="24" style="margin-top: 10px;">{{ item.title }}</van-col>
+      </van-row>
+      <div class="d-flex mb-3 ">
+        <div class="p-2  ">
+          <img :src ="item.image" style="width: 100px;height: 100px;"/>
+        </div>
+        <div class="p-2 ">
+          <div class="d-flex flex-column">
+            <div class="p-2 " ><span style="color: #666666;">合作企业:</span><span>{{ item.commpay }}</span></div>
+            <div class="p-2 "><span style="color: #666666;">联系电话:</span><span>{{ item.phone }}</span></div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+    </scroller-view>
+    </div>
+</template>
+
+<script lang="ts">
+/*export default {
+  name: "CompanyCard"
+}*/
+import {Component, Prop, Vue} from "vue-property-decorator";
+import { ProductData } from '@/model/entity/ProductData'
+
+@Component({
+  name: "CompanyCard",
+})
+export default class CompanyCard extends Vue {
+  @Prop({ default: "" }) params: any | [];
+    image:any=require('@/assets/images/qyimage.png');
+}
+</script>
+
+<style scoped lang="scss">
+.roolsolt{
+  width:96%;
+  margin: -4% auto;
+}
+.title {
+  font-size: 25px;
+  text-align: left;
+  font-family: 'Arial Normal', 'Arial', sans-serif;
+  font-weight: bold;
+  font-style: inherit;
+  color: black;
+  margin-left: 2%;
+  margin-top: 6%;
+}
+.mumMoney{
+  margin:5% auto;
+}
+.backage-color-body{
+  background-color: #e4e7ed;
+}
+.body{
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+  border-radius: 6px;
+}
+
+.moneytitle {
+  color: #FFA121;
+  text-align: left;
+  font-size: 14px;
+  font-family: 'Arial Normal', 'Arial', sans-serif;
+  font-style: normal;
+  margin-top: 5%;
+}
+
+
+
+
+</style>

src/views/workbench/CooperationBusiness.vue

+<template>
+  <div class="body d-page">
+    <div class="rarle">
+      <tatle-bar :tatle="tatleName"></tatle-bar>
+    </div>
+    <div>
+      <company-card :params="params"></company-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" >
+import {Component, Vue} from "vue-property-decorator";
+
+@Component({
+  name: "CooperationBusiness",
+  components: {
+
+  },
+})
+export default class CooperationBusiness extends Vue {
+  tatleName= "合作企业";
+  params: any=[
+    {title:"上海滑索",image:require('@/assets/images/qyimage.png'),commpay:"上海市松江区华硕大道330号",phone:"15879213419"},
+    {title:"黑龙江中泰",image:require('@/assets/images/qyimage.png'),commpay:"上海市松江区华硕大道330号",phone:"15879213419"},
+    {title:"黑龙江华夏",image:require('@/assets/images/qyimage.png'),commpay:"上海市松江区华硕大道330号",phone:"15879213419"},
+    {title:"黑龙江深重集团",image:require('@/assets/images/qyimage.png'),commpay:"上海市松江区华硕大道330号",phone:"15879213419"},
+  ];
+}
+</script>
+
+<style scoped>
+.body{
+  width: 100%;
+  height: 100%;
+  background-color: #ebeef5;
+
+}
+</style>

src/views/workbench/ExchangeRecord.vue

+<template>
+  <div>
+    <div class="rarle">
+      <!--上部分-->
+      <div style="width:100%;height: calc(35vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);">
+        <tatle-bar :tatle="titleName" :tatleflag="titleflag" >
+          <van-col  span="15" class="jfNumber">2134</van-col>
+        </tatle-bar>
+      </div>
+
+      <!--下部分-->
+      <div style="width:100%;height: calc(100vh);background-color: #ebeef5;">
+        <van-tabs v-model:active="active" class="tab">
+          <van-tab title="积分收支明细">
+            <!--按钮部分-->
+<!--            <van-row>
+              <van-col span="8">全部</van-col>
+              <van-col span="8">已获取</van-col>
+              <van-col span="8">已消耗</van-col>
+            </van-row>-->
+            <van-row gutter="20" class="brn-DIV">
+              <van-col span="8">全部</van-col>
+              <van-col span="8">已获取</van-col>
+              <van-col span="8">已消耗</van-col>
+            </van-row>
+            <van-row class="ms-style" >
+              <van-col span="8" style="width: 90%;background-color: #ffffff;text-align: revert;">本月获取积分3842 已消耗3400</van-col>
+            </van-row>
+            <div style="width: 100%;height: 100%;">
+              <van-row>
+                <van-col span="4">存款积分奖励</van-col>
+                <van-col span="10" offset="4">3211</van-col>
+              </van-row>
+
+              <van-row>
+                <van-col span="4" style="margin-left: 6%;">2022-07-24 15:38</van-col>
+              </van-row>
+
+            </div>
+            <div style="width: 100%;height:1px;border: 1px solid #f5f2f0;"></div>
+          </van-tab>
+
+          <van-tab title="积分兑换记录">
+            <div>
+
+            </div>
+          </van-tab>
+        </van-tabs>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from "vue-property-decorator";
+@Component({
+  name: "ExchangeRecord",
+})
+export default class ExchangeRecord extends Vue {
+  titleName="积分收支明细";
+  titleflag= true;
+}
+</script>
+
+<style scoped lang="scss">
+.body{
+  width: 96%;
+  background-color: #02a7f0;
+  border-radius: 6px;
+  margin-left: 2%;
+  z-index: 10;
+}
+.jfNumber{
+  font-size: 24px;
+  color: #ffffff;
+  font-weight: 900;
+  margin-left: 2%;
+  margin-top: 18%;
+}
+.tab{
+  position: fixed;
+  top: 24vh;
+  left: auto;
+  left: 2%;
+  width: 96%;
+  height: 100%;
+  /* border-radius: 108px; */
+  margin: 0px auto;
+  text-align: center;
+  background-color: #ffffff;
+}
+.van-col--8 {
+  width: 20%;
+  margin-top: 10px;
+  background-color: #1989fa;
+/*  border: 1px solid;*/
+  margin: 7px;
+  border-radius: 5px;
+  text-align: center;
+}
+.ms-style{
+  width: 90%;
+  text-align: initial;
+  background-color: #ffffff;
+}
+.van-col--4 {
+  width: 40%;
+}
+</style>