kuailelunwen_new_houtai/src/components/site/serviceSetting/showSet.vue

<template>
    <div class="main-content12">
        <div class="pageheader">
            <span class="pagetitle">{{info.type_desc}}-展示设置</span>
        </div>

        <template v-if="!saveSuccess">
            <div class="flex-common">
                <h3 class="mb16">基础信息</h3>

                <PromptText text='温馨提示：服务别名、首页服务广告词和首页服务描述不允许使用"知网"、"pmlc"、"amlc"和"smlc"等关键词。' :type="2" class="mb32"/>

                <el-form ref="formRef">
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <GuipFormItem column="column" label="服务别名">
                                <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
                                           placeholder="建议80字内" desc="展示在用户端的服务名称" v-model="info.title">
                                </GuipInput>
                            </GuipFormItem>
                            <GuipFormItem column="column" label="服务广告词">
                                <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
                                           placeholder="建议20字内" desc="用来简短概括的解释服务" v-model="info.subtitle">
                                </GuipInput>
                            </GuipFormItem>
                            <GuipFormItem column="column" label="服务描述">
                                <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
                                           desc="用来详细的解释服务" v-model="info.desc">
                                </GuipInput>
                            </GuipFormItem>
                        </div>
                        <div class="flex-line "></div>
                        <div class="flex-right">
                            <GuipFormItem column="column" label="服务Logo">
                                <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
                                              :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
                                              hover-text-color="#006AFF"/>
                            </GuipFormItem>
                            <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
                        </div>
                    </div>
                </el-form>
            </div>

            <div class="flex-common">
                <h3>展示开关</h3>
                <el-form ref="formRef">
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <div class="card-item">
                                <div class="card-info">
                                    <p class="card-name">首页服务显示</p>
                                    <p class="card-desc">控制首页是否显示本服务</p>
                                </div>
                                <el-form>
                                    <GuipSwitch :modelValue="info.is_index_display" :active-value="1" :inactive-value="0"
                                                activeText="开启" inactiveText="关闭" @change="onSwitchChange('is_index_display')">
                                    </GuipSwitch>
                                </el-form>
                            </div>
                            <div class="card-item">
                                <div class="card-info">
                                    <p class="card-name">检测页价格展示</p>
                                    <p class="card-desc">本服务检测页面是否展示价格</p>
                                </div>
                                <el-form>
                                    <GuipSwitch :modelValue="info.is_display_price" :active-value="1" :inactive-value="0"
                                                activeText="开启" inactiveText="关闭" @change="onSwitchChange('is_display_price')">
                                    </GuipSwitch>
                                </el-form>
                            </div>
                        </div>
                        <div class="flex-line "></div>
                        <div class="flex-right">
                            <div class="card-item">
                                <div class="card-info">
                                    <p class="card-name">首页推荐位</p>
                                    <p class="card-desc">开启即上推荐位</p>
                                </div>
                                <el-form>
                                    <GuipSwitch :modelValue="info.is_recommend" :active-value="1" :inactive-value="0"
                                                activeText="开启" inactiveText="关闭" @change="onSwitchChange('is_recommend')">
                                    </GuipSwitch>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
        </template>
        <template v-else>
            <div class="flex-common">
                <div class="back-area" @click="saveBack">
                    <img src="@/assets/site/back_icon.png" alt="">
                    返回
                </div>
                <div class="success-area">
                    <img src="@/assets/message_Success.png" alt="">
                    <div>设置保存成功</div>
                </div>
                <div class="pro-list">
                    <div class="pro-item">
                        <img src="@/assets/site/site-web.svg" alt="">
                        <div class="pro-name">PC端预览</div>
                        <div class="pro-link">
                            <a :href="info.domain" class="flex" target="_blank">
                                <img src="@/assets/site/form_linkActive.svg" alt="">
                                <span>{{info.domain}}</span>
                            </a>
                        </div>
                        <div class="pro-desc">点击上方网址访问</div>
                    </div>
                    <div class="pro-item">
                        <img src="@/assets/site/site-h5.svg" alt="">
                        <div class="pro-name">手机H5预览</div>
                        <div class="pro-link"><img src="@/assets/site/kefuTem.png" alt="" class="link-code"></div>
                        <div class="pro-desc">微信扫码预览</div>
                    </div>
                    <div class="pro-item">
                        <img src="@/assets/site/site-mp.svg" alt="">
                        <div class="pro-name">小程序预览</div>
                        <div class="pro-link"><img src="@/assets/site/kefuTem.png" alt="" class="link-code"></div>
                        <div class="pro-desc">微信扫码预览</div>
                    </div>
                </div>

                <div class="back-btn" @click="saveBack">
                    返回展示设置
                </div>
            </div>
        </template>

        <div class="save-button">
            <GuipButton type="primary" :btnstyle="saveBtnStyleObj" @click="saveConfirm">保存</GuipButton>
        </div>
    </div>
</template>
<script>

import HoverButton from "@/components/HoverButton.vue";
import GuipFormItem from "@/components/GuipFormItem.vue";
import GuipSwitch from "@/components/GuipSwitch.vue";
import PromptText from "@/components/PromptText.vue";
import GuipInput from "@/components/GuipInput.vue";
import GuipButton from "@/components/GuipButton.vue";

export default {
  name: 'showSet',
  props: {
    serviceInfo: {
      type: Object,
      required: true
    }
  },
  components: {
      GuipButton,
      GuipInput, PromptText, GuipSwitch, GuipFormItem, HoverButton
  },
  data(){
    return {
        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
        info:{},
        saveSuccess: false,
        //添加按钮样式
        saveBtnStyleObj: {
            width: '144px',
            height: '46px',
            borderRadius: '4px',
            background: '#006AFF',
        },
    }
  },
  mounted() {
      this.info = this.serviceInfo
  },
  methods:{
      saveBack(){
          this.saveSuccess = false
      },
      onSwitchChange(attr){
          this.info[attr] = this.info[attr] === 1 ? 0 : 1
      },
      saveConfirm() {
          let obj = {}
          obj.uid = this.info.uid
          obj.type = this.info.type
          obj.title = this.info.title
          obj.subtitle = this.info.subtitle
          obj.desc = this.info.desc
          obj.sort_id = this.info.sort_id
          obj.is_display_price = this.info.is_display_price
          obj.is_index_display = this.info.is_index_display
          obj.is_recommend = this.info.is_recommend

          const that = this
          this.$http('POST', '/agentnew/ajax_update_service_show', obj,{
              headers:{
                  'Auth': this.token
              }
          }).then(response => {
              if(response.status){
                  that.$message.success('保存成功');
                  that.$emit('saveEvent', that.info)
                  // that.saveSuccess = true
                  return true;
              }
              that.$message.success(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      },
  }
}
</script>
<style lang="scss">
.card-item{
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAFAFA;
  border-radius: 4px;
  border: none;
  margin-bottom: 12px;
  .card-info{
    text-align: left;
    margin-left: 12px;
    font-variation-settings: "opsz" auto;
    letter-spacing: 0.08em;
    .card-name{
      font-size: 14px;
      line-height: 18px;
      color: #1E2226;
    }
    .card-desc{
      font-size: 12px;
      line-height: 13px;
      margin-top: 12px;
      color: #8A9099;
    }
  }

  .el-form-item{
    margin: 0;
  }
}

.back-area{
  display: flex;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #626573;
  line-height: 16px;
  img{
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }
}

.success-area{
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  letter-spacing: 0.06em;
  color: #1E2226;
  margin-bottom: 52px;
  img{
    width: 50px;
    height: 50px;
    margin-bottom: 12px;
  }
}

.pro-list{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  letter-spacing: 0.08em;
  .pro-item{
    width: 300px;
    height: 293px;
    border-radius: 20px;
    border: 1px solid #DFE2E6;
    padding: 42px 0;
    box-sizing: border-box;
    .pro-name{
      font-size: 16px;
      font-weight: bold;
      color: #1E2226;
      margin-top: 12px;
    }

    .pro-link{
      margin-top: 32px;
      .link-code{
        width: 80px;
        height: 80px;
      }

      a{
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #006AFF;
        text-decoration: none;
        img{
          width: 16px;
          height: 16px;
          vertical-align: middle;
          margin-right: 12px;
        }
        span{
          width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .pro-desc{
      font-size: 12px;
      color: #8A9099;
      margin-top: 12px;
    }
  }
}

.back-btn{
  width: 144px;
  height: 46px;
  border-radius: 4px;
  border: 1px solid #006AFF;
  padding: 14px 2px;
  gap: 6px;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.08em;
  color: #006AFF;
  box-sizing: border-box;
  margin: 52px auto 0;
}
</style>