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

<template>
    <div>
        <div class="pageheader">
            <span class="pagetitle">{{info.type_desc}}-价格设置</span>
        </div>

        <div class="flex-common">
            <h3>网页支付与售价</h3>
            <el-form ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <div class="set-item">
                            <div class="set-title flex flex-between">
                                <p>售价管理</p>
                                <p>供货价格：3.5元/篇</p>
                            </div>
                            <div class="set-content flex">
                                <GuipSelect width="264px" prop="card" :options="options" class="mr12"/>
                                <GuipInput v-if="!info.price" width="264px" v-model="info.price" ref="GuipInput" unit="元/篇"></GuipInput>
                                <template v-else>
                                    <GuipInput width="180px" v-model="info.price" ref="GuipInput" unit="元"></GuipInput>
                                    <span class="mr12"></span>
                                    <GuipInput v-model="info.unit_num" ref="GuipInput" width="180px" unit="字符"></GuipInput>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">

                    </div>
                </div>
            </el-form>
        </div>

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

import GuipButton from "@/components/GuipButton.vue";
import GuipInput from "@/components/GuipInput.vue";
import GuipSelect from "@/components/GuipSelect.vue";

export default {
  name: 'priceSet',
  props: {
    serviceInfo: {
        type: Object,
        required: true
    }
  },
  components: {
      GuipSelect,
      GuipInput,
       GuipButton

  },
  data(){
    return {
        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
        info:{},
        //添加按钮样式
        saveBtnStyleObj: {
            width: '144px',
            height: '46px',
            borderRadius: '4px',
            background: '#006AFF',
        },
        options: [{
            value: '选项1',
            label1: '黄金hhhhhh',
            id1: '1',
            id2: '啊11哈哈',
            label: '黄金糕'
        }, {
            value: '选项2',
            id1: '12',
            id2: '啊22哈哈',
            label1: '双皮奶hhhhhhhhh',
            label: '双皮奶'
        }, {
            value: '选项3',
            id1: '13',
            id2: '啊33哈哈',
            label1: '蚵仔煎hhhhhhhhh',
            label: '蚵仔煎'
        }, {
            value: '选项4',
            id1: '14',
            id2: '啊444哈哈',
            label1: '双皮奶hhhhhhhhh',
            label: '龙须面'
        }, {
            value: '选项5',
            id1: '155',
            id2: '啊55哈哈',
            label1: '双皮奶hhhhhhhhh',
            label: '北京烤鸭'
        }],
        form: {
            username: '',
            language: '',
            domain_set: '',
            domainSuffix: '11',
            domainSuffix1: '.chachongz.com',
            card: '1',
            input1: '跨年的烟火,绽放天空',
            input2: '',
            input3: '',
        },
    }
  },
  mounted() {
      this.info = JSON.parse(JSON.stringify(this.serviceInfo))
  },
  methods:{
      saveConfirm() {
          let obj = {}
          obj.uid = this.info.uid
          obj.type = this.info.type
          obj.logo_bgcolor = this.tabColor.replace('#','')
          obj.link_btn_color = this.themeColor.replace('#','')
          obj.selected_nav_bgcolor = this.navColor.replace('#','')

          const that = this
          this.$http('POST', '/agentnew/ajax_update_service_style', obj,{
              headers:{
                  'Auth': this.token
              }
          }).then(response => {
              if(response.status){
                  that.$message.success('保存成功');

                  let color_info = {}
                  color_info.logo_bgcolor = obj.logo_bgcolor
                  color_info.link_btn_color = obj.link_btn_color
                  color_info.selected_nav_bgcolor = obj.selected_nav_bgcolor
                  that.info.color_info = color_info

                  that.$emit('saveEvent', that.info)
                  return true;
              }
              that.$message.error(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      },
  }
}
</script>
<style lang="scss">
.mr12{
  margin-right: 12px;
}
.set-item{
  width: 540px;
  letter-spacing: 0.08em;
  .set-title{
    font-size: 14px;
    color: #1E2226;
    margin-bottom: 12px;
    p:last-child{
      color: #8A9099;
    }
  }

  .set-content{
    width: 100%;
  }
}
</style>