orderSystemJp/raising-vue-uniapp/upms/views/menu/languageDialog.vue

<template>
  <view class="language-popup">
    <uni-popup ref="languagePopup" type="dialog">
      <uni-popup-dialog>
        <view class="popup-title">
          <view class="title-content">请选择使用语言</view>
          <view class="close-btn" @click="closeDialog()"></view>
        </view>
        <view class="popup-main">
          <view class="checkbox-group">
            <view class="lan-block" :class="CNLan.checked === true ? 'lan-block_active' : ''" @click="checkboxChange('CN')">
              <view v-if="CNLan.checked === true" class="lan-checkbox">
                <checkbox :value="CNLan.value" :checked="CNLan.checked" />
              </view>
              <view class="lan-flag china"></view>
              <view class="lan-text">
                <view>{{CNLan.name}}</view>
              </view>
            </view>
            <view class="lan-block" :class="JPLan.checked === true ? 'lan-block_active' : ''" @click="checkboxChange('JP')">
              <view v-if="JPLan.checked === true" class="lan-checkbox">
                <checkbox :value="JPLan.value" :checked="JPLan.checked" />
              </view>
              <view class="lan-flag japan"></view>
              <view class="lan-text">
                <view>{{JPLan.name}}</view>
              </view>
            </view>
            <view class="lan-block" :class="USALan.checked === true ? 'lan-block_active' : ''" @click="checkboxChange('USA')">
              <view v-if="USALan.checked === true" class="lan-checkbox">
                <checkbox :value="USALan.value" :checked="USALan.checked" />
              </view>
              <view class="lan-flag usa"></view>
              <view class="lan-text">
                <view>{{USALan.name}}</view>
              </view>
            </view>
            <view class="lan-block" :class="KRLan.checked === true ? 'lan-block_active' : ''" @click="checkboxChange('KR')">
              <view v-if="KRLan.checked === true" class="lan-checkbox">
                <checkbox :value="KRLan.value" :checked="KRLan.checked" />
              </view>
              <view class="lan-flag korea"></view>
              <view class="lan-text">
                <view>{{KRLan.name}}</view>
              </view>
            </view>
          </view>
        </view>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: 'LanguageDialog',
  data() {
    return {
      CNLan: {
        name: '中文',
        value: 'CN',
        checked: false
      },
      JPLan: {
        name: '日本語.',
        value: 'JP',
        checked: false
      },
      USALan: {
        name: 'English',
        value: 'USA',
        checked: false
      },
      KRLan: {
        name: '한국어',
        value: 'KR',
        checked: false
      },
      selectLan: 'CN'
    };
  },
  
  created() {
	this.checkboxChange('CN')
  },
  
  methods: {
    openDialog() {
      this.$refs.languagePopup.open("center");
    },
    closeDialog() {
      this.$refs.languagePopup.close();
    },
    checkboxChange(type) {
      if (type == 'CN') {
        this.CNLan.checked = true;
        this.JPLan.checked = false;
        this.USALan.checked = false;
        this.KRLan.checked = false;
        this.selectLan = this.CNLan.value;
		this.$emit('get-language-change' , this.selectLan)
      }
      if (type == 'JP') {
        this.CNLan.checked = false;
        this.JPLan.checked = true;
        this.USALan.checked = false;
        this.KRLan.checked = false;
        this.selectLan = this.JPLan.value;
		this.$emit('get-language-change' , this.selectLan)
      }
      if (type == 'USA') {
        this.CNLan.checked = false;
        this.JPLan.checked = false;
        this.USALan.checked = true;
        this.KRLan.checked = false;
        this.selectLan = this.USALan.value;
		this.$emit('get-language-change' , this.selectLan)
      }
      if (type == 'KR') {
        this.CNLan.checked = false;
        this.JPLan.checked = false;
        this.USALan.checked = false;
        this.KRLan.checked = true;
        this.selectLan = this.KRLan.value;
		this.$emit('get-language-change' , this.selectLan)
      }
    }
  },
};
</script>

<style scoped lang="scss">
::v-deep .uni-popup-dialog {
  width: 840px;
  height: 378px;
  background: #FFFFFF;
  border-radius: 20px;
  .uni-dialog-title {
    display: none;
  }
  .uni-dialog-button-group {
    display: none;
  }
  .uni-dialog-content {
    padding: 0;
    display: block;
    .popup-title {
      width: 100%;
      text-align: center;
      padding-top: 30px;
      position: relative;
      .title-content {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 20px;
        color: #000000;
        line-height: 28px;
        font-style: normal;
      }
      .close-btn {
        width: 18px;
        height: 18px;
        background-image: url("@/static/public/img/close.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        right: 30px;
        top: 35px;
      }
    }
    .popup-main {
      padding: 30px;
      .checkbox-group {
        display: flex;
        justify-content: space-between;
        .lan-block {
          width: 180px;
          height: 260px;
          background: #FAFAFA;
          border-radius: 20px;
          border: 1px solid rgba(0,0,0,0.08);
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          .lan-flag {
            width: 100px;
            height: 67px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center center;
            margin-top: 70px;
          }
          .china {
            background-image: url("@/static/public/img/china-flag.png");
          }
          .japan {
            background-image: url("@/static/public/img/japan-flag.png");
          }
          .usa {
            background-image: url("@/static/public/img/usa-flag.png");
          }
          .korea {
            background-image: url("@/static/public/img/korea-flag.png");
          }
          .lan-text {
            margin-top: 24px;
            font-family: AppleSDGothicNeo, AppleSDGothicNeo;
            font-weight: 600;
            font-size: 24px;
            color: rgba(0,0,0,0.8);
            line-height: 29px;
            font-style: normal;
          }
        }
        .lan-block_active {
          background: rgba(4,184,91,0.1);
          border: 1px solid #04B85B;
          .lan-checkbox {
            position: absolute;
            right: 10px;
            top: 10px;
            uni-checkbox {
              .uni-checkbox-wrapper {
                .uni-checkbox-input {
                  width: 24px;
                  height: 24px;
                  border-radius: 50%;
                  background: linear-gradient( 329deg, #04B85B 0%, #2ECD7B 100%);
                }
              }
            }
            uni-checkbox::before {
              margin-top: -8px;
              right: 5px;
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>