系统通知+增值服务添加

src/components/site/serviceSetting/valueAdded.vue

@@ -0,0 +1,205 @@
+<template>
+    <el-form class="el-row demo-ruleForm" ref="formRef" v-if="serviceAddInfo && serviceAddInfo.type_name">
+        <div class="flex-wrap">
+            <div class="flex-left">
+                <div class="flex-between mb12">
+                    <div>{{serviceAddInfo.type_name}}</div>
+                    <div>供货价：{{ serviceAddInfo.supply_price }}{{ serviceAddInfo.supply_price_warning }}</div>
+                </div>
+
+                <PromptText v-if="serviceAddInfo && serviceAddInfo.prompt && serviceAddInfo.prompt.title" :text='serviceAddInfo.prompt.title' :type="1"
+                            class="mb12">
+                    <template #desc v-if="serviceAddInfo.prompt.content">
+                        <div class="alert-more-info mt8">
+                            <div class="flex mb10" v-for="item in serviceAddInfo.prompt.content" :key="item">
+                                {{ item }}</div>
+                        </div>
+                    </template>
+                </PromptText>
+
+                <div class="flex-between">
+                    <div class="short-width" v-if="Object.keys(serviceAddInfo.set_units).length>1">
+                        <GuipSelect width="100%" v-model="service_unit" placeholder="选择计费方式"
+                                    :options="serviceAddInfo.set_units" @change="handleUnitName"/>
+                    </div>
+                    <div class="short-width" v-if="service_unit !== '0'">
+                        <GuipInput v-model="serviceInfo.price" width="100%"
+                                   ref="GuipInput" :unit="'元/'+serviceAddInfo.unit_name"></GuipInput>
+                    </div>
+                </div>
+                <div class="flex-between mt12" v-if="service_unit === '0'">
+                    <div class="short-width">
+                        <GuipInput width="100%" v-model="serviceInfo.price" ref="GuipInput" unit="元">
+                        </GuipInput>
+                    </div>
+                    <div class="short-width">
+                        <GuipInput width="100%" v-model="serviceInfo.unit_num" ref="GuipInput" :unit="serviceAddInfo.unit_name">
+                        </GuipInput>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex service-opt mt12">
+            <GuipButton type="ignore" @click="resetPrice">重置</GuipButton>
+            <GuipButton type="primary" @click="savePrice" size="medium">保存</GuipButton>
+        </div>
+    </el-form>
+</template>
+<script>
+
+
+
+import GuipInput from "@/components/GuipInput.vue";
+import GuipSelect from "@/components/GuipSelect.vue";
+import GuipButton from "@/components/GuipButton.vue";
+import PromptText from "@/components/PromptText.vue";
+
+export default {
+  name: 'valueAdded',
+  props: ['uid','type'],
+  components: {
+      PromptText,
+      GuipButton, GuipSelect, GuipInput
+
+  },
+  data(){
+    return {
+        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
+        service_unit: '',
+        serviceInfo: {},
+        serviceAddInfo: {},
+    }
+  },
+  mounted() {
+      this.getServiceAddInfo()
+  },
+  methods:{
+      //获得要添加的服务信息
+      getServiceAddInfo() {
+          this.serviceAddInfo = {}
+          const that = this
+          that.$http('POST', '/agentnew/ajax_get_service_add_info', {
+              uid: that.uid,
+              type: that.type,
+          }, {
+              headers: {
+                  'Auth': this.token
+              }
+          }).then(response => {
+              if (response.status) {
+                  that.$nextTick(() => {
+                      that.serviceAddInfo = response.data
+                      that.service_unit = that.serviceAddInfo.unit
+                      //查询是否添加了此服务
+                      that.getServiceInfo()
+                  })
+                  return true
+              }
+              that.$message.error(response.info);
+          }).catch(error => {
+              console.error(error, 'error')
+          })
+      },
+      //查询是否添加了此服务
+      getServiceInfo() {
+          const that = this
+          that.serviceInfo = {}
+          that.$http('POST', '/agentnew/ajax_get_service_info', {
+              uid: that.uid,
+              type: that.type,
+          }, {
+              headers: {
+                  'Auth': this.token
+              }
+          }).then(response => {
+              that.$nextTick(() => {
+                  //默认未开启
+                  if (response.status && response.data) {
+                      that.serviceInfo = response.data.service_info
+                  }
+              })
+          }).catch(error => {
+              console.error(error, 'error')
+          })
+      },
+      handleUnitName(){
+          this.serviceAddInfo.unit_name =  this.serviceAddInfo.set_units[this.service_unit]
+      },
+      resetPrice() {
+          this.serviceInfo.price = ''
+          this.serviceInfo.unit_num = ''
+          this.serviceInfo.b_unit_price = ''
+          this.serviceInfo.b_unit_num = ''
+      },
+      savePrice() {
+          const that = this
+          //非字符计费
+          if(that.service_unit !== '0') {
+              that.serviceInfo.unit_num = 1
+              that.serviceInfo.base_unit_num = ''
+              that.serviceInfo.base_unit_price = ''
+          }
+          this.$http('POST', "/agentnew/ajax_set_service_price", {
+              uid: that.uid,
+              type: that.type,
+              unit: that.service_unit,
+              unit_num: that.serviceInfo.unit_num,
+              unit_price: that.serviceInfo.price,
+              b_unit_num: that.serviceInfo.base_unit_num,
+              b_unit_price: that.serviceInfo.base_unit_price,
+          }, {
+              headers: {
+                  'Auth': this.token
+              }
+          }).then(response => {
+              if (response.status) {
+                  that.$message.success('保存成功');
+                  return true;
+              }
+              that.$message.error(response.info);
+          }).catch(error => {
+              console.error(error, 'error')
+          })
+      },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.mt8{
+  margin-top: 8px;
+}
+.mb10{
+  margin-bottom: 10px;
+}
+.price-top {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+
+  .title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #1E2226;
+  }
+
+  .desc {
+    font-size: 14px;
+    color: #626573;
+    margin-left: 12px;
+  }
+}
+.service-opt {
+  justify-content: right;
+}
+
+.alert-more-info {
+  color: #1E2226;
+  letter-spacing: 0.08em;
+}
+
+::v-deep .prompt-desc {
+  font-size: 14px;
+  font-weight: bold;
+  color: #1E2226;
+}
+</style>

src/router/index.js

@@ -10,6 +10,7 @@ const whiteSecondSider = [
 ];
 const blackSliderList = [
   '/register', '/agent/siteAdd', '/franchise','/agent/siteServiceList', '/agent/siteTemplate','/agent/siteAddFinally','/agent/siteServiceAdd', '/agent/supplyList'
+  , '/agent/noticeList'
 ];
 // 一级路由
 let first_child_router = []
@@ -62,6 +63,17 @@ const routes = [{
     }
   },
   {
+    path: '/agent/noticeList',
+    name: '首页',
+    component: () => import( /* webpackChunkName: "register" */ '../views/agent/noticeList.vue'),
+    isFirst: true, //是否属于一级路由
+    meta: {
+      title: '系统通知', //面包屑名称（此页面确认不需要放置在面包屑可以不添加此属性；如果获取不到title 会自动 获取 name 作为面包屑名称）
+      breadcrumbParent: '首页',
+      // hideBreadcrumb: true // 是否隐藏面包屑
+    }
+  },
+  {
     path: '/register',
     name: 'register',
     // this generates a separate chunk (about.[hash].js) for this route

src/views/agent/home.vue

@@ -8,7 +8,7 @@
             <span class="hoverCommon" @click="lookMoreSystem">查看更多</span>
           </h2>
           <div class="systemNotice-main">
-            <div class="sales-item flex" v-for="(item, key) in noticeList.slice(0, 4)" :key="item.title">
+            <div class="sales-item flex" v-for="(item, key) in noticeList.slice(0, 2)" :key="item.title">
               <img :src="require('@/assets/home/notice_tag_'+(key+1)+'.png')" alt="">
               <div class="column">
                 <b class="flex">{{ item.title }} <img class="systemIcon" src="@/assets/home/systemIcon.svg" alt=""> </b>
@@ -320,6 +320,7 @@ export default {
     },
     lookMoreSystem() {
       // 系统通知 -查看更多
+        this.$router.push('/agent/noticeList')
     },
     lookAllSales() {
       // 销售统计 -查看全部

src/views/agent/noticeList.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="main-content12">
+        <div class="flex-common">
+            <h3>系统通知</h3>
+            <div class="systemNotice-main">
+                <div class="sales-item flex" v-for="(item) in noticeList" :key="item.title">
+                    <img :src="require('@/assets/home/notice_'+item.type+'.png')" alt="">
+                    <div class="column">
+                        <b class="flex">{{ item.title }} <img class="systemIcon" src="@/assets/home/systemIcon.svg" alt=""> </b>
+                        <p v-html="item.content">{{ item.content }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+
+export default {
+    // 站点设置
+    name: '',
+    props: [''],
+    components: {
+
+    },
+    data() {
+        return {
+            // AUTH
+            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
+            noticeList: [],
+        }
+    },
+    computed: {
+        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
+    },
+    mounted() {
+        this.getNoticeList()
+    },
+    methods: {
+        getNoticeList(){
+            this.$http('POST', '/agentnew/ajax_get_notice_list', {
+
+            },{
+                headers:{
+                    'Auth': this.token
+                }
+            }).then(response => {
+                this.$nextTick(() => {
+                    this.noticeList = response.data
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+.systemNotice-main {
+  img {
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+  }
+
+  .sales-item:last-child{
+    border: none;
+  }
+  .sales-item {
+    width: 100%;
+    justify-content: flex-start;
+    padding: 24px 12px;
+    box-sizing: border-box;
+    transition: all .3s;
+    border-bottom: 1px solid #DFE2E6;
+
+    .systemIcon {
+      display: none;
+      width: 12px;
+      height: 8px;
+    }
+
+    &:hover {
+      background: #F6F7FA;
+
+      b {
+        color: #006AFF;
+      }
+
+      .systemIcon {
+        margin-left: 12px;
+        display: block;
+      }
+    }
+
+    div {
+      width: calc(100% - 30px);
+    }
+
+    /* 确保 padding 不会影响宽度计算 */
+    b {
+      font-size: 14px;
+      font-weight: normal;
+      line-height: normal;
+      letter-spacing: 0.08em;
+      color: #1E2226;
+    }
+
+    p {
+      display: -webkit-box;
+      width: 100%;
+      margin-top: 6px;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      text-overflow: ellipsis;
+      text-align: left;
+      color: #8A9099;
+    }
+  }
+
+}
+</style>