add: Team Plan页面的弹窗

fix：产品名展示文案修改；无token不展示过期错误提示

.eslintrc.cjs

@@ -112,6 +112,7 @@ module.exports = {
     "vue/space-infix-ops": "error",
     "vue/space-unary-ops": ["error", { words: true, nonwords: false }],
     "vue/template-curly-spacing": "error",
-    "vue/no-reserved-component-names": "off"
+    "vue/no-reserved-component-names": "off",
+    "no-useless-escape": "off"
   },
 };

src/components/form.vue

@@ -0,0 +1,104 @@
+<script>
+export default {
+  props: {
+    fieldValue: {
+      default: ''
+    },
+    rules: [Object, Array],
+    reset: {
+      type: Boolean,
+      default: false
+    },
+    teamFlag: {
+      default: ''
+    }
+  },
+  data() {
+    return {
+      validateMessage: ''
+    }
+  },
+  watch: {
+    fieldValue (nextValue, oldValue) {
+      if (!this.rules || this.reset) return
+      if (oldValue === '') {
+        this.$emit('blank', true)
+      }
+      if (this.teamFlag === 'team' && (nextValue !== '' || nextValue === '')) {
+        this.validateMessage = ''
+        return
+      }
+      this.validate()
+    }
+  },
+  mounted() {
+    if (!this.rules) return
+    this.$emit('form', this)
+  },
+  methods: {
+    // 验证邮箱
+    checkEmail(email) {
+      if (email === undefined || email === '' || !email.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)) {
+        return false
+      }
+      return true
+    },
+    validate(fn = () => {}) {
+      if (!this.rules) return
+      const rules = this.rules
+      for (let i = 0; i < rules.length; i++) {
+        const rule = rules[i]
+        if (rule.required && this.fieldValue === '') {
+          this.handelMessage(fn, rule.message, true)
+          return
+        }
+        if (rule.type && rule.type === 'email' && !this.checkEmail(this.fieldValue)) {
+          if (!this.fieldValue.match(/\@/)) {
+            this.handelMessage(fn, 'Please Enter a valid email address')
+          } else {
+            this.handelMessage(fn, rule.message)
+          }
+          return
+        }
+        if (rule.type && rule.type === 'phone' && /[a-zA-Z]/.test(this.fieldValue)) {
+          this.handelMessage(fn, rule.message)
+          return
+        }
+        if (rule.type && rule.type === 'users' && /[^0-9]/.test(this.fieldValue)) {
+          this.handelMessage(fn, rule.message)
+          return
+        }
+      }
+      this.validateMessage = ''
+      fn()
+    },
+    handelMessage (fn, message, blank) {
+      blank ? fn(message, true) : fn(message)
+      this.validateMessage = message
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="form" :class="{ 'err-form': rules && rules[0].required && validateMessage, 'notShowErr': teamFlag === 'partner' }">
+    <slot></slot>
+    <div v-if="rules && rules[0].required && validateMessage" class="err">{{ validateMessage }}</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .notShowErr {
+    margin-bottom: 21px;
+  }
+  .err {
+    width: 100%;
+    margin-top: 5px;
+    color: #fc4043;
+    font-size: 14px;
+    text-align: left;
+  }
+  .err-form{
+    margin-bottom: 0px;
+  }
+</style>

src/components/icon/arrow.vue

@@ -0,0 +1,5 @@
+<template>
+	<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M4.40502 11.695C4.15268 11.4427 4.13327 11.0456 4.34679 10.771L4.40502 10.705L8.1095 7.00002L4.40502 3.295C4.15268 3.04266 4.13327 2.6456 4.34679 2.37099L4.40502 2.30505C4.65736 2.05271 5.05442 2.0333 5.32903 2.24682L5.39497 2.30505L9.59497 6.50505C9.84731 6.75739 9.86672 7.15445 9.6532 7.42905L9.59497 7.495L5.39497 11.695C5.1216 11.9684 4.67839 11.9684 4.40502 11.695Z" fill="currentColor"/>
+	</svg>
+</template>

src/components/icon/close.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13 1L1 13" stroke="#BABABA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M1 1L13 13" stroke="#BABABA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+</template>

src/components/trailForm.vue

@@ -0,0 +1,727 @@
+<script>
+import axios from 'axios'
+import Form from '@/components/form.vue'
+import Arrow from '@/components/icon/arrow.vue'
+import Close from '@/components/icon/close.vue'
+
+export default {
+  components: {
+    Form,
+    Arrow,
+    Close
+  },
+  data () {
+    return {
+      reset: false,
+      model: {
+        name: '',
+        email: '',
+        country: '',
+        company: '',
+        product: '',
+        users: ''
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: 'Please enter your name'
+          }
+        ],
+        email: [
+          {
+            required: true,
+            message: 'Please enter your business email'
+          },
+          {
+            type: 'email',
+            message: 'Invalid numbers of users'
+          }
+        ],
+        country: [
+          {
+            required: true,
+            message: 'Please choose your country/region'
+          }
+        ],
+        company: [
+          {
+            required: true,
+            message: 'Please enter your company name'
+          }
+        ],
+        product: [
+          {
+            required: true,
+            message: 'Please choose the product'
+          }
+        ],
+        users: [
+          {
+            required: true,
+            message: 'Please enter the number of users'
+          },
+          {
+            type: 'users',
+            message: 'Invalid numbers of users'
+          }
+        ]
+      },
+      fields: [],
+      blankNumber: 0,
+      isSubmit: false,
+      showSubmitError: false,
+      teamFlag: 'team',
+      errText: '',
+      isLoading: false
+    }
+  },
+  watch: {
+    blankNumber(val) {
+      if (val > 0) {
+        this.errText = 'Please fill in the missing field before submitting.'
+      } else {
+        this.errText = ''
+      }
+    }
+  },
+  methods: {
+    handleBlank(value) {
+      if (value && this.blankNumber > 0) {
+        this.blankNumber--
+      }
+    },
+    addField(field) {
+      if (field) {
+        this.fields.push(field)
+      }
+    },
+    handleSubmit() {
+      this.showSubmitError = false
+      let valid = true
+      this.blankNumber = 0
+      this.fields.forEach((field) => {
+        field.validate((message, blank) => {
+          if (message) {
+            valid = false
+            this.showSubmitError = true
+          }
+          if (blank) {
+            this.blankNumber++
+          }
+        })
+      })
+      if (this.isLoading) { return }
+      this.isLoading = true
+      if (valid) {
+        const self = this
+        const domain = import.meta.env.MODE === 'production' ? 'https://content.pdfreaderpro.com' : 'https://test-pdf-pro.kdan.cn:3020'
+        axios({
+          method: 'POST',
+          url: domain + '/api/contact',
+          data: {
+            'contact_email[email_subject]': 'Your PDF Reader Pro Team License Inquiry',
+            'contact_email[user_name]': self.model.name,
+            'contact_email[email]': self.model.email,
+            'detail[country]': self.model.country,
+            'detail[company]': self.model.company,
+            'contact_email[product_name]': self.model.product,
+            'detail[users_number]': self.model.users,
+            'detail[description]': self.model.description,
+            'detail[team_plan]': 1,
+            'detail[phone]': 1,
+            'detail[product_name]': self.model.product
+          },
+          transformRequest: [function (data) {
+            let ret = ''
+            for (let item in data) {
+              ret += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
+            }
+            ret = ret.substr(0, ret.length - 1)
+            return ret
+          }]
+        })
+          .then((res) => {
+            console.log(res)
+            this.isLoading = false
+            if (res.status === 'success' || res.status === 200) {
+              this.isSubmit = true
+              console.log('Replace the success Flag')
+              setTimeout(function () {
+                self.submitText = 'Success'
+                self.modalShow = true
+              }, 0)
+            } else if (res.status === 'failed') {
+              alert('The email fails to send.')
+            }
+          })
+          .catch((err) => {
+            console.log(err)
+            this.isLoading = false
+            alert('The email fails to send.')
+          })
+      } else {
+        this.isLoading = false
+      }
+    },
+    transformRequest (data) {
+      let ret = ''
+      for (let item in data) {
+        ret += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
+      }
+      ret = ret.substr(0, ret.length - 1)
+      return ret
+    },
+    onInput(e, val) {
+      this.model[val] = e.target.value
+      this.showSubmitError = false
+    },
+    validateSelectMessage (value) {
+      this.showSubmitError = value
+    },
+    close() {
+      if (this.isSubmit) {
+        for (let key in this.model) {
+          this.model[key] = ''
+        }
+      }
+      this.isSubmit = false
+      this.$parent.closeTrailForm()
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="trail-form">
+    <div v-show="!isSubmit" class="business-form">
+      <Close class="close" @click.native="close" />
+      <div class="original">
+        <p class="period">Get Free Trial for PDF Tech Console</p>
+        <p class="desc">Please complete all fields below</p>
+        <form class="form-area" autocomplete="off">
+          <Form :reset="reset" :fieldValue="model.name" :rules="rules.name" :teamFlag="teamFlag" @blank="handleBlank" @form="addField">
+            <input v-model="model.name" type="text" @input="onInput($event, 'name')">
+            <span v-show="model.name === ''" class="placeholder">Your Name</span>
+          </Form>
+          <Form :reset="reset" :fieldValue="model.email" :rules="rules.email" :teamFlag="teamFlag" @blank="handleBlank" @form="addField">
+            <input v-model="model.email" type="text" @input="onInput($event, 'email')">
+            <span v-show="model.email === ''" class="placeholder">Business Email</span>
+          </Form>
+          <Form :reset="reset" :fieldValue="model.country" :rules="rules.country" :teamFlag="teamFlag" @blank="handleBlank" @form="addField">
+            <div class="content">
+              <span v-show="model.country === ''" class="placeholder">Country/Region</span>
+              <select v-model="model.country" name="Industry" :class="{ active: model.country }" @change="validateSelectMessage(false)">
+                <option value="AF" selected>Afghanistan</option>
+                <option value="AX">Aland Islands</option>
+                <option value="AL">Albania</option>
+                <option value="DZ">Algeria</option>
+                <option value="AS">American Samoa</option>
+                <option value="AD">Andorra</option>
+                <option value="AO">Angola</option>
+                <option value="AI">Anguilla</option>
+                <option value="AG">Antigua and Barbuda</option>
+                <option value="AR">Argentina</option>
+                <option value="AM">Armenia</option>
+                <option value="AW">Aruba</option>
+                <option value="AU">Australia</option>
+                <option value="AT">Austria</option>
+                <option value="AZ">Azerbaijan</option>
+                <option value="BS">Bahamas</option>
+                <option value="BH">Bahrain</option>
+                <option value="BD">Bangladesh</option>
+                <option value="BB">Barbados</option>
+                <option value="BY">Belarus</option>
+                <option value="BE">Belgium</option>
+                <option value="BZ">Belize</option>
+                <option value="BJ">Benin</option>
+                <option value="BM">Bermuda</option>
+                <option value="BT">Bhutan</option>
+                <option value="BO">Bolivia</option>
+                <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
+                <option value="BA">Bosnia and Herzegovina</option>
+                <option value="BW">Botswana</option>
+                <option value="BV">Bouvet Island</option>
+                <option value="BR">Brazil</option>
+                <option value="IO">Brit. Indian Ocean</option>
+                <option value="VG">British Virgin Islands</option>
+                <option value="BN">Brunei Darussalam</option>
+                <option value="BG">Bulgaria</option>
+                <option value="BF">Burkina Faso</option>
+                <option value="BI">Burundi</option>
+                <option value="KH">Cambodia</option>
+                <option value="CM">Cameroon</option>
+                <option value="CA">Canada</option>
+                <option value="CV">Cape Verde</option>
+                <option value="KY">Cayman Islands</option>
+                <option value="CF">Central African Republic</option>
+                <option value="TD">Chad</option>
+                <option value="CL">Chile</option>
+                <option value="CN">China</option>
+                <option value="CX">Christmas Island</option>
+                <option value="CC">Cocos Islands</option>
+                <option value="CO">Colombia</option>
+                <option value="KM">Comoros</option>
+                <option value="CG">Congo</option>
+                <option value="CK">Cook Islands</option>
+                <option value="CR">Costa Rica</option>
+                <option value="CI">Cote D'Ivoire</option>
+                <option value="HR">Croatia</option>
+                <option value="CW">Curaçao</option>
+                <option value="CY">Cyprus</option>
+                <option value="CZ">Czech Republic</option>
+                <option value="DK">Denmark</option>
+                <option value="DJ">Djibouti</option>
+                <option value="DM">Dominica</option>
+                <option value="DO">Dominican Republic</option>
+                <option value="EC">Ecuador</option>
+                <option value="EG">Egypt</option>
+                <option value="SV">El Salvador</option>
+                <option value="GQ">Equatorial Guinea</option>
+                <option value="ER">Eritrea</option>
+                <option value="EE">Estonia</option>
+                <option value="ET">Ethiopia</option>
+                <option value="FK">Falkland Islands</option>
+                <option value="FO">Faroe Islands</option>
+                <option value="FJ">Fiji</option>
+                <option value="FI">Finland</option>
+                <option value="FR">France</option>
+                <option value="GF">French Guiana</option>
+                <option value="PF">French Polynesia</option>
+                <option value="TF">French Southern Terr.</option>
+                <option value="GA">Gabon</option>
+                <option value="GM">Gambia</option>
+                <option value="GE">Georgia</option>
+                <option value="DE">Germany</option>
+                <option value="GH">Ghana</option>
+                <option value="GI">Gibraltar</option>
+                <option value="GR">Greece</option>
+                <option value="GL">Greenland</option>
+                <option value="GD">Grenada</option>
+                <option value="GP">Guadeloupe</option>
+                <option value="GU">Guam</option>
+                <option value="GT">Guatemala</option>
+                <option value="GG">Guernsey</option>
+                <option value="GN">Guinea</option>
+                <option value="GW">Guinea-Bissau</option>
+                <option value="GY">Guyana</option>
+                <option value="HT">Haiti</option>
+                <option value="HM">Heard/ Mcdonald Islands</option>
+                <option value="VA">Holy See/ Vatican City</option>
+                <option value="HN">Honduras</option>
+                <option value="HK">Hong Kong</option>
+                <option value="HU">Hungary</option>
+                <option value="IS">Iceland</option>
+                <option value="IN">India</option>
+                <option value="ID">Indonesia</option>
+                <option value="IQ">Iraq</option>
+                <option value="IE">Ireland</option>
+                <option value="IM">Isle of Man</option>
+                <option value="IL">Israel</option>
+                <option value="IT">Italy</option>
+                <option value="JM">Jamaica</option>
+                <option value="JP">Japan</option>
+                <option value="JE">Jersey</option>
+                <option value="JO">Jordan</option>
+                <option value="KZ">Kazakhstan</option>
+                <option value="KE">Kenya</option>
+                <option value="KI">Kiribati</option>
+                <option value="KW">Kuwait</option>
+                <option value="KG">Kyrgyzstan</option>
+                <option value="LA">Lao People's DR</option>
+                <option value="LV">Latvia</option>
+                <option value="LB">Lebanon</option>
+                <option value="LS">Lesotho</option>
+                <option value="LR">Liberia</option>
+                <option value="LY">Libyan Arab Jamahiriya</option>
+                <option value="LI">Liechtenstein</option>
+                <option value="LT">Lithuania</option>
+                <option value="LU">Luxembourg</option>
+                <option value="MO">Macao</option>
+                <option value="MK">Macedonia</option>
+                <option value="MG">Madagascar</option>
+                <option value="MW">Malawi</option>
+                <option value="MY">Malaysia</option>
+                <option value="MV">Maldives</option>
+                <option value="ML">Mali</option>
+                <option value="MT">Malta</option>
+                <option value="MH">Marshall Islands</option>
+                <option value="MQ">Martinique</option>
+                <option value="MR">Mauritania</option>
+                <option value="MU">Mauritius</option>
+                <option value="YT">Mayotte</option>
+                <option value="MX">Mexico</option>
+                <option value="FM">Micronesia</option>
+                <option value="MD">Moldova</option>
+                <option value="MC">Monaco</option>
+                <option value="MN">Mongolia</option>
+                <option value="ME">Montenegro</option>
+                <option value="MS">Montserrat</option>
+                <option value="MA">Morocco</option>
+                <option value="MZ">Mozambique</option>
+                <option value="MM">Myanmar</option>
+                <option value="NA">Namibia</option>
+                <option value="NR">Nauru</option>
+                <option value="NP">Nepal</option>
+                <option value="NL">Netherlands</option>
+                <option value="AN">Netherlands Antilles</option>
+                <option value="NC">New Caledonia</option>
+                <option value="NZ">New Zealand</option>
+                <option value="NI">Nicaragua</option>
+                <option value="NE">Niger</option>
+                <option value="NG">Nigeria</option>
+                <option value="NU">Niue</option>
+                <option value="NF">Norfolk Island</option>
+                <option value="MP">Northern Mariana Islands</option>
+                <option value="NO">Norway</option>
+                <option value="OM">Oman</option>
+                <option value="PK">Pakistan</option>
+                <option value="PW">Palau</option>
+                <option value="PS">Palestinian Territory</option>
+                <option value="PA">Panama</option>
+                <option value="PG">Papua New Guinea</option>
+                <option value="PY">Paraguay</option>
+                <option value="PE">Peru</option>
+                <option value="PH">Philippines</option>
+                <option value="PN">Pitcairn</option>
+                <option value="PL">Poland</option>
+                <option value="PT">Portugal</option>
+                <option value="PR">Puerto Rico</option>
+                <option value="QA">Qatar</option>
+                <option value="RS">Republic of Serbia</option>
+                <option value="RE">Reunion</option>
+                <option value="RO">Romania</option>
+                <option value="RU">Russian Federation</option>
+                <option value="RW">Rwanda</option>
+                <option value="GS">S. Georgia/ Sandwich Islands</option>
+                <option value="SH">Saint Helena</option>
+                <option value="KN">Saint Kitts and Nevis</option>
+                <option value="LC">Saint Lucia</option>
+                <option value="MF">Saint Martin</option>
+                <option value="PM">Saint Pierre and Miquelon</option>
+                <option value="VC">Saint Vincent/ Grenadines</option>
+                <option value="WS">Samoa</option>
+                <option value="SM">San Marino</option>
+                <option value="ST">Sao Tome and Principe</option>
+                <option value="SA">Saudi Arabia</option>
+                <option value="SN">Senegal</option>
+                <option value="SC">Seychelles</option>
+                <option value="SL">Sierra Leone</option>
+                <option value="SG">Singapore</option>
+                <option value="SK">Slovakia</option>
+                <option value="SI">Slovenia</option>
+                <option value="SB">Solomon Islands</option>
+                <option value="SO">Somalia</option>
+                <option value="ZA">South Africa</option>
+                <option value="KR">South Korea</option>
+                <option value="ES">Spain</option>
+                <option value="LK">Sri Lanka</option>
+                <option value="SD">Sudan</option>
+                <option value="SR">Suriname</option>
+                <option value="SJ">Svalbard and Jan Mayen</option>
+                <option value="SZ">Swaziland</option>
+                <option value="SE">Sweden</option>
+                <option value="CH">Switzerland</option>
+                <option value="TW">Taiwan</option>
+                <option value="TJ">Tajikistan</option>
+                <option value="TZ">Tanzania</option>
+                <option value="TH">Thailand</option>
+                <option value="TL">Timor-Leste</option>
+                <option value="TG">Togo</option>
+                <option value="TK">Tokelau</option>
+                <option value="TO">Tonga</option>
+                <option value="TT">Trinidad and Tobago</option>
+                <option value="TN">Tunisia</option>
+                <option value="TR">Turkey</option>
+                <option value="TM">Turkmenistan</option>
+                <option value="TC">Turks and Caicos Islands</option>
+                <option value="TV">Tuvalu</option>
+                <option value="VI">U.S. Virgin Islands</option>
+                <option value="UG">Uganda</option>
+                <option value="UA">Ukraine</option>
+                <option value="AE">United Arab Emirates</option>
+                <option value="GB">United Kingdom</option>
+                <option value="US">United States</option>
+                <option value="UM">United States (M.O.I.)</option>
+                <option value="UY">Uruguay</option>
+                <option value="UZ">Uzbekistan</option>
+                <option value="VU">Vanuatu</option>
+                <option value="VE">Venezuela</option>
+                <option value="VN">Viet Nam</option>
+                <option value="WF">Wallis and Futuna</option>
+                <option value="EH">Western Sahara</option>
+                <option value="YE">Yemen</option>
+                <option value="ZM">Zambia</option>
+                <option value="ZW">Zimbabwe</option>
+              </select>
+              <Arrow />
+            </div>
+          </Form>
+          <Form :reset="reset" :fieldValue="model.company" :rules="rules.company" :teamFlag="teamFlag" @blank="handleBlank" @form="addField">
+            <input v-model="model.company" type="text" @input="onInput($event, 'company')">
+            <span v-show="model.company === ''" class="placeholder">Company</span>
+          </Form>
+          <Form :reset="reset" :fieldValue="model.product" :rules="rules.product" :teamFlag="teamFlag" @blank="handleBlank" @form="addField">
+            <div class="content">
+              <span v-show="model.product === ''" class="placeholder">Product</span>
+              <select v-model="model.product" name="Industry" :class="{ active: model.product }" @change="validateSelectMessage(false)">
+                <option value="PDF Reader Pro for Mac">PDF Reader Pro for Mac</option>
+                <option value="PDF Reader Pro for Mac (With PDF to Office Pack)">PDF Reader Pro for Mac (With PDF to Office Pack)</option>
+                <option value="PDF Reader Pro for Windows">PDF Reader Pro for Windows</option>
+                <option value="PDF Reader Pro for Windows (With PDF to Office Pack)">PDF Reader Pro for Windows (With PDF to Office Pack)</option>
+                <option value="PDF Reader Pro for iOS">PDF Reader Pro for iOS</option>
+                <option value="PDF Reader Pro for Android">PDF Reader Pro for Android</option>
+              </select>
+              <Arrow />
+            </div>
+          </Form>
+          <Form :reset="reset" :fieldValue="model.users" :rules="rules.users" :teamFlag="teamFlag" @blank="handleBlank" @form="addField">
+            <input v-model="model.users" type="text" @input="onInput($event, 'users')">
+            <span v-show="model.users === ''" class="placeholder">Numbers of Users</span>
+          </Form>
+        </form>
+        <div class="submit-area" :class="{ 'submit-area-err': showSubmitError }">
+          <div class="submit" @click="handleSubmit()">Submit</div>
+          <p v-show="showSubmitError" class="err-text">{{ errText }}</p>
+        </div>
+      </div>
+    </div>
+    <div v-show="isSubmit" class="submitted-form">
+      <Close class="close" @click.native="close" />
+      <div class="submitted">
+        <img loading="lazy" src="@/assets/images/success.png" alt="success">
+        <p class="period">The Form Was Submitted Successfully</p>
+        <p class="desc">We will contact you via the email address you provide</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.business-form {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 500px;
+  padding: 40px 32px 24px;
+  background-color: #fff;
+  border: 1px solid #9A999A;
+  border-radius: 8px;
+  text-align: center;
+  z-index: 11;
+  .form-area {
+    .form {
+      position: relative;
+      width: 100%;
+      margin-bottom: 20px;
+      &:last-child {
+        margin-bottom: 24px;
+      }
+      &.err-form {
+        margin-bottom: 3px;
+        &:last-child {
+          margin-bottom: 15px;
+        }
+      }
+      .placeholder {
+        font-size: 16px;
+        font-weight: 400;
+        color: #3F454B;
+        position: absolute;
+        top: 14px;
+        left: 14px;
+        line-height: 18px;
+        pointer-events: none;
+        &::before {
+          content: '* ';
+          color: #ff2776;
+        }
+      }
+    }
+  }
+  .submit-area {
+    position: relative;
+    .submit {
+      width: 100%;
+      height: 50px;
+      background: linear-gradient(127.63deg, #0097FF 15.23%, #0070FF 96.95%);
+      font-size: 16px;
+      line-height: 50px;
+      cursor: pointer;
+      text-align: center;
+      color: #FFF;
+      font-weight: 700;
+      border-radius: 25px;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+    .err-text {
+      width: 100%;
+      margin-top: 12px;
+      color: #FF494F;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 16px;
+    }
+  }
+}
+.close {
+  top: 20px;
+  right: 20px;
+  width: 12px;
+  height: 12px;
+  pointer-events: auto;
+  cursor: pointer;
+}
+.period {
+  font-size: 24px;
+  line-height: 28px;
+  font-weight: 700;
+  color: #000;
+}
+.desc {
+  display: inline-block;
+  margin: 4px auto 20px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: #000;
+}
+.submitted-form {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 460px;
+  padding: 40px 40px 60px;
+  background-color: #fff;
+  border: 1px solid #9A999A;
+  border-radius: 8px;
+  text-align: center;
+  z-index: 11;
+  .submitted {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    img {
+      width: 48px;
+      height: 48px;
+      margin-bottom: 24px;
+    }
+    .period {
+      font-size: 20px;
+      line-height: 32px;
+    }
+    .desc {
+      margin: 8px 0 0;
+      color: #6A6F77;
+    }
+  }
+}
+input, select {
+  width: 100%;
+  height: 46px;
+  padding: 0 12px;
+  border: 1px solid #CCCCCC;
+  border-radius: 4px;
+  font-size: 16px;
+  color: #1D2023;
+  outline: none;
+  line-height: 22px;
+  &:hover, &:focus {
+    border-color: #0097FF;
+  }
+}
+select {
+  padding-right: 32px;
+  cursor: pointer;
+  background: none;
+}
+.content {
+  position: relative;
+}
+svg {
+  position: absolute;
+  top: 14px;
+  right: 10px;
+  z-index: 2;
+  height: 20px;
+  width: 20px;
+  pointer-events: none;
+  transform: rotate(90deg);
+  color: #CCCCCC;
+}
+select {
+  appearance: none;
+}
+select {
+  background-color: #FFFFFF;
+  color: #777777;
+  &.active {
+    color: #1D2023;
+  }
+  option {
+    color: #1D2023;
+  }
+}
+@media screen and (max-width: 575px) {
+  .business-form {
+    width: calc(100% - 40px);
+    max-width: 320px;
+    padding: 25px 20px;
+    .form-area {
+      .form {
+        width: 100%;
+        margin-bottom: 20px;
+        &:last-child {
+          margin-bottom: 24px;
+        }
+        .placeholder {
+          left: 16px;
+        }
+      }
+    }
+  }
+  .desc {
+    margin: 4px 0 24px;
+  }
+  .submitted-form {
+    width: calc(100% - 60px);
+    max-width: 300px;
+    padding: 40px 24px;
+    .submitted {
+      .period {
+        font-size: 20px;
+        line-height: 24px;
+      }
+      .desc {
+        margin: 12px 0 0;
+        color: #6A6F77;
+      }
+    }
+  }
+}
+@media screen and (max-height: 682px) {
+  .trail-form {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden auto;
+    z-index: 9;
+    .business-form,
+    .submitted-form {
+      position: relative;
+      top: 0;
+      transform: translate(-50%, 0);
+      margin: 90px 0;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -237,22 +237,21 @@ router.beforeEach((to, from, next) => {
   const whiteList = '/login'
   const token = cookies.get('accessToken')
   //路由守卫，进行权限判断
-  if (to.path !== whiteList && to.path !== '/sign-up' && to.path !== '/non-admin-user' && to.path !== '/forget-password') {
+  if (token === 'expired') {
+    cookies.remove('accessToken')
     // 判断是否登录
-    if(token){
-      // 判断权限
-      if (userStore().user.role?.indexOf("2") !== -1 || userStore().user.role?.indexOf("1") !== -1 || userStore().user.role?.indexOf("4") !== -1) {
-        next()
-      } else {
-        next('/non-admin-user')
-      }
+    Message({
+      duration: 5000,
+      message: 'Your session has expired. Please log in again.',
+      type: "error",
+    })
+    next('/login')
+  } else if (token && to.path !== whiteList && to.path !== '/sign-up' && to.path !== '/non-admin-user' && to.path !== '/forget-password') {
+    // 判断权限
+    if (userStore().user.role?.indexOf("2") !== -1 || userStore().user.role?.indexOf("1") !== -1 || userStore().user.role?.indexOf("4") !== -1) {
+      next()
     } else {
-      Message({
-        duration: 5000,
-        message: 'Your session has expired. Please log in again.',
-        type: "error",
-      })
-      next('/login')
+      next('/non-admin-user')
     }
   } else {
     next()

src/views/Login.vue

@@ -5,9 +5,10 @@ import Eyecolse from '@/components/icon/eye_colse.vue'
 import Eyeopen from '@/components/icon/eye_open.vue'
 import Error from '@/components/icon/error.vue'
 import { userStore } from '@/store/userInfo'
+import TrailForm from '@/components/trailForm.vue'
 
 export default {
-  components: { Eyecolse, Eyeopen, Error },
+  components: { Eyecolse, Eyeopen, Error, TrailForm },
   data() {
     return {
       passwordError: false,
@@ -36,7 +37,8 @@ export default {
         password: [
           { required: true, message: 'Password is required', trigger: [''] }
         ]
-      }
+      },
+      showTrailForm: false
     }
   },
   mounted() {
@@ -174,6 +176,9 @@ export default {
           this.$router.push('/non-admin-user')
         }
       })
+    },
+    closeTrailForm() {
+      this.showTrailForm = false
     }
   }
 }
@@ -257,8 +262,15 @@ export default {
             Create account
           </router-link>
         </div> -->
+        <div class="flex justify-center">
+          <span @click="showTrailForm = true" class="text-12px text-[#1460F3] cursor-pointer">
+            Don't have an account?
+          </span>
+        </div>
       </el-form>
     </div>
+    <div v-show="showTrailForm" class="bg-cover" @touchmove.stop.prevent></div>
+    <TrailForm v-show="showTrailForm" />
   </div>
 </template>
 
@@ -288,5 +300,15 @@ export default {
   height: 14px;
   cursor: pointer;
 }
+.bg-cover {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  opacity: 0.5;
+  z-index: 6;
+}
 </style>
 

src/views/ProductManagement.vue

@@ -52,6 +52,20 @@ const pagingQuery = () => {
   ).then((res) => {
     tableData.value = res.data.result.list
     total.value = res.data.result.total
+
+    // 产品名映射
+    const nameMapping = {
+      'com.brother.pdfreaderpro.mac.product_1': 'PDF Reader Pro for Mac',
+      'com.brother.pdfreaderpro.mac.product_3': 'PDF Reader Pro for Mac (With PDF to Office Pack)',
+      'com.brother.pdfreaderpro.windows.product_3': 'PDF Reader Pro for Windows (With PDF to Office Pack)',
+      'com.brother.pdfreaderpro.cross.platform.product_3': 'PDF Reader Pro Cross-Platform (With PDF to Office Pack)'
+    }
+    tableData.value = tableData.value.map((item) => {
+      if (Object.prototype.hasOwnProperty.call(nameMapping, item.code)) {
+        item.name = nameMapping[item.code]
+      }
+      return item
+    })
   })
 }
 //获取已购买产品

utils/request.js

@@ -59,13 +59,11 @@ instance.interceptors.response.use(
     if (response && response.data) {
       //没有登录或者登录过期跳到登录页面
       if(response.data.code === 310 && response.data.msg === "无效的token或者token已过期"){
-        cookies.remove('accessToken')
+        const token = cookies.get('accessToken')
+        if (token) {
+          cookies.set('accessToken', 'expired')
+        }
         userStore().clearUserInfo()
-        Message({
-          duration: 5000,
-          message: 'Your session has expired. Please log in again.',
-          type: "error",
-        })
         window.location.href = '/login'
       }
       return Promise.reject(error);