|
|
@@ -0,0 +1,513 @@
|
|
|
+<template>
|
|
|
+ <div class="production-card analysis-report-footer-production-card">
|
|
|
+ <div class="product-top">
|
|
|
+ <div class="report-info">
|
|
|
+ <van-form ref="formRef">
|
|
|
+ <van-field
|
|
|
+ v-model="info.email"
|
|
|
+ required
|
|
|
+ name="pattern"
|
|
|
+ label="邮箱地址"
|
|
|
+ placeholder="请输入您的邮箱地址"
|
|
|
+ :show-error="false"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请输入邮箱' },
|
|
|
+ {
|
|
|
+ pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
|
|
+ message: '邮箱格式错误'
|
|
|
+ } // 邮箱校验正则规则
|
|
|
+ ]"
|
|
|
+ @blur="onBlur('email')"
|
|
|
+ />
|
|
|
+ </van-form>
|
|
|
+ </div>
|
|
|
+ <div class="split-line"></div>
|
|
|
+ <div class='select-spec-cell flex flex-(row items-center justify-between)'>
|
|
|
+ <span class='label-text'>已选规格</span>
|
|
|
+ <div class='select-spec-info flex flex-(1 row items-center justify-right)' @click='popupSelect = true'>
|
|
|
+ <div class='spec-c-label flex flex-(row items-center)' v-if='specActiveInfo'>
|
|
|
+ <div class="activity-badge" v-if="specActiveInfo.badge">
|
|
|
+ <span class="j-icon icon-huo-badge" /> {{specActiveInfo.badge}}
|
|
|
+ </div>
|
|
|
+ <span class='spec-name'>{{specActiveInfo.label}}</span>
|
|
|
+ <span class='vip-label' :class='{ [specActiveInfo.packLevel]: true }' v-if='specActiveInfo.pack'>
|
|
|
+ <i class='iconfont icon-vip'></i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <span class="iconfont icon-youbian"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <van-popup
|
|
|
+ v-model="popupSelect"
|
|
|
+ :get-container="getContainer"
|
|
|
+ :safe-area-inset-bottom="true"
|
|
|
+ position="bottom"
|
|
|
+ round
|
|
|
+ >
|
|
|
+ <PopupLayout title="选择规格" @closeIconClick="popupSelect = false">
|
|
|
+ <div class="buy-item-list flex flex-(col items-center)">
|
|
|
+ <analysis-report-production-spec-card
|
|
|
+ v-for="(spec, index) in specList"
|
|
|
+ :spec="spec"
|
|
|
+ :key="index"
|
|
|
+ :active="productSpec.id"
|
|
|
+ @select="specCardChange"
|
|
|
+ >
|
|
|
+ </analysis-report-production-spec-card>
|
|
|
+ <div class='in-pack-tip' v-if='specActiveInfo?.badge === "权益特价"'>
|
|
|
+ 权益有效期内，超出当月下载额度需单份购买，暂不支持选择其他规格
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </PopupLayout>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
|
|
|
+import { Field, Form, Popup } from 'vant'
|
|
|
+import { debounce, fen2Yuan } from '@/utils/utils'
|
|
|
+import { getPureNumber, openAppOrWxPage } from '@/utils'
|
|
|
+import { appCallOpenWindow } from '@/utils/callFn/appFn'
|
|
|
+import { creditReportEntSearch, creditReportTime } from '@/api/modules/'
|
|
|
+import orderActivityHelper from '@/utils/mixins/modules/order-activity-helper'
|
|
|
+import {
|
|
|
+ formatZhimaInfoSubmitParamsOfType,
|
|
|
+ formatZhimaInfo
|
|
|
+} from '@/views/create-order/components/analysis-report/model/format'
|
|
|
+import AnalysisReportProductionSpecCard from '@/views/create-order/components/analysis-report/SpecCard.vue'
|
|
|
+import useAccountInfoModel from './model/account'
|
|
|
+import PopupLayout from '@/components/common/PopupLayout.vue'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'AnalysisReportFooterProductionCard',
|
|
|
+ components: {
|
|
|
+ PopupLayout,
|
|
|
+ AnalysisReportProductionSpecCard,
|
|
|
+ [Form.name]: Form,
|
|
|
+ [Field.name]: Field,
|
|
|
+ [Popup.name]: Popup
|
|
|
+ },
|
|
|
+ mixins: [orderActivityHelper],
|
|
|
+ setup() {
|
|
|
+ const { zhimaReportAccountInfo } = useAccountInfoModel()
|
|
|
+ return {
|
|
|
+ zhimaReportAccountInfo
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ conf: {
|
|
|
+ productName: '芝麻信用共建分析报告',
|
|
|
+ productId: 151,
|
|
|
+ linkKey: 'analysisReportLink'
|
|
|
+ },
|
|
|
+ info: {
|
|
|
+ email: '',
|
|
|
+ phone: ''
|
|
|
+ },
|
|
|
+ entList: [],
|
|
|
+ companyList: [],
|
|
|
+ popupSelect: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters('createOrder', [
|
|
|
+ 'productExtend',
|
|
|
+ 'productId',
|
|
|
+ 'getBidCreditReportInfo'
|
|
|
+ ]),
|
|
|
+ ...mapState('createOrder', {
|
|
|
+ productSpec: (state) => state.productSpec
|
|
|
+ }),
|
|
|
+ ...mapGetters('createOrder', [
|
|
|
+ 'productInfo',
|
|
|
+ 'productName',
|
|
|
+ 'productSpecInfoList',
|
|
|
+ 'productSpecInfo'
|
|
|
+ ]),
|
|
|
+ getContentAdID() {
|
|
|
+ return `order_mobile_zhima_${this.$route.params.type}`
|
|
|
+ },
|
|
|
+ specList() {
|
|
|
+ const themeMap = {
|
|
|
+ 1512: 'monthly-theme',
|
|
|
+ 1513: 'seasonal-theme',
|
|
|
+ 1514: 'year-theme'
|
|
|
+ }
|
|
|
+ // 计算卡片价格
|
|
|
+ return this.productSpecInfoList.map((spec, index) => {
|
|
|
+ const result = {
|
|
|
+ id: spec.productId,
|
|
|
+ productionId: spec.productId,
|
|
|
+ label: spec.info,
|
|
|
+ value: spec.productId,
|
|
|
+ num: getPureNumber(spec.info),
|
|
|
+ price: fen2Yuan(spec.originalPrice),
|
|
|
+ origin: fen2Yuan(spec.originalPrice),
|
|
|
+ now: fen2Yuan(spec.discountPrice),
|
|
|
+ tipText: spec._format.tag,
|
|
|
+ tipType: 'gift', // gift/discount/'' 为空则显示默认的蓝色
|
|
|
+ desc: '',
|
|
|
+ badge: '',
|
|
|
+ _data: spec,
|
|
|
+ pack: spec.productId !== 1511,
|
|
|
+ packLevel: themeMap[spec.productId] || '',
|
|
|
+ _extend: this.productInfo?.extend[151]?.[spec.productId] || {}
|
|
|
+ }
|
|
|
+ if (!result.pack) {
|
|
|
+ if (this.isFirstBuy) {
|
|
|
+ result.badge = '首购推荐'
|
|
|
+ result.desc = '购买首份报告享特价 299 元'
|
|
|
+ } else if (this.useNowState.inPack) {
|
|
|
+ result.badge = '权益特价'
|
|
|
+ result.desc = '您正在享受报告权益特价优惠'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!this.isFirstBuy && result.packLevel === 'year-theme') {
|
|
|
+ result.badge = '推荐'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return result
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 返回当前权益状态
|
|
|
+ useNowState() {
|
|
|
+ return this.zhimaReportAccountInfo
|
|
|
+ },
|
|
|
+ isFirstBuy() {
|
|
|
+ return this.useNowState?.isFirstBuy || false
|
|
|
+ },
|
|
|
+ // 获取当前选中的规格信息
|
|
|
+ specActiveInfo() {
|
|
|
+ return this.specList.find(
|
|
|
+ (spec) => spec.id === this.productSpecInfo.productId
|
|
|
+ )
|
|
|
+ },
|
|
|
+ getProjectParams() {
|
|
|
+ let result = formatZhimaInfoSubmitParamsOfType({
|
|
|
+ type: this.$route.params.type,
|
|
|
+ ...this.$route.query
|
|
|
+ })
|
|
|
+
|
|
|
+ result.email = this.info.email
|
|
|
+ result.is_first = this.isFirstBuy
|
|
|
+ result.order_phone = this.info.phone
|
|
|
+ result.level = this.productSpecInfo.info
|
|
|
+ result.pack_type = this.specActiveInfo?._extend?.pack_type
|
|
|
+ return result
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ const { buyer } = this.$route.query
|
|
|
+ if (buyer) {
|
|
|
+ this.info.buyer = buyer
|
|
|
+ }
|
|
|
+ this.updateLayout({
|
|
|
+ footerNotice: true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.updatePayAmount()
|
|
|
+ this.getUserInfoFun()
|
|
|
+ // 非首购、非会员时选中年卡
|
|
|
+ if (!this.isFirstBuy && !this.useNowState.inPack) {
|
|
|
+ this.updateProductSpecId(1514)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations('createOrder', ['updateProductSpecId', 'updateLayout']),
|
|
|
+ ...mapActions('createOrder', ['setProductInfo', 'changeProductChoiceSpec']),
|
|
|
+ ...mapActions('user', ['getUserInfo']),
|
|
|
+ specCardChange(id) {
|
|
|
+ // 更新规格时候更新product.extend，用来查价格和优惠券
|
|
|
+ const extend = { spec: 1 }
|
|
|
+ this.changeProductChoiceSpec({ id, extend })
|
|
|
+ this.popupSelect = false
|
|
|
+ },
|
|
|
+ async getUserInfoFun() {
|
|
|
+ const res = await this.getUserInfo()
|
|
|
+ if (res?.reportMail) {
|
|
|
+ this.info.email = res.reportMail || ''
|
|
|
+ }
|
|
|
+ if (res?.phone) {
|
|
|
+ this.info.phone = res.phone
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async updatePayAmount() {
|
|
|
+ const { productId } = this.conf
|
|
|
+ this.setProductInfo({
|
|
|
+ id: productId,
|
|
|
+ hooks: {
|
|
|
+ submit: this.onSubmit.bind(this)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ saveEchoInfo(orderCode, data) {
|
|
|
+ const { report_mold, email } = data
|
|
|
+ const info = formatZhimaInfo(data)
|
|
|
+ sessionStorage.setItem(
|
|
|
+ 'analysis-report-' + orderCode,
|
|
|
+ JSON.stringify({
|
|
|
+ 'target-type': info.type,
|
|
|
+ 'target-before': info.before,
|
|
|
+ 'target-name': info.name,
|
|
|
+ 'target-email': email,
|
|
|
+ 'target-level': data.level,
|
|
|
+ report_mold
|
|
|
+ })
|
|
|
+ )
|
|
|
+ },
|
|
|
+ async onSubmit(pre, next) {
|
|
|
+ // 校验输入框是否全部填写完成，如果没有则不提交订单
|
|
|
+ let validBool = false
|
|
|
+ await this.$refs.formRef.validate().then((valid) => {
|
|
|
+ validBool = !valid
|
|
|
+ })
|
|
|
+ if (!validBool) return
|
|
|
+ const payload = {
|
|
|
+ product: pre.productName,
|
|
|
+ productId: pre.productSpecId,
|
|
|
+ discountId: pre.offersId,
|
|
|
+ lotteryId: pre.offersId,
|
|
|
+ activityType: pre.activityType,
|
|
|
+ data: {
|
|
|
+ ...this.getProjectParams
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const res = await next(payload)
|
|
|
+ const { data } = res
|
|
|
+ if (data && data.needPay) {
|
|
|
+ const { linkKey } = this.conf
|
|
|
+ const query = this.getCommonQuery(data.order_code)
|
|
|
+ const orderDetailLinkInfo = this.getProductionLinks(linkKey).orderDetail
|
|
|
+ const payLinkInfo = this.getProductionLinks(linkKey).pay
|
|
|
+ this.saveEchoInfo(data.order_code, payload.data)
|
|
|
+
|
|
|
+ if (this.$envs.inApp || this.$envs.inWX) {
|
|
|
+ this.$storage.set(
|
|
|
+ `${this.$route.path}-redirect`,
|
|
|
+ {
|
|
|
+ urls: orderDetailLinkInfo,
|
|
|
+ query
|
|
|
+ },
|
|
|
+ { storage: sessionStorage }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ openAppOrWxPage(payLinkInfo, {
|
|
|
+ query
|
|
|
+ })
|
|
|
+ return res
|
|
|
+ }
|
|
|
+ return res
|
|
|
+ },
|
|
|
+ clickAssociation(item, type) {
|
|
|
+ if (type === 'ent') {
|
|
|
+ this.info.company = item.name
|
|
|
+ this.info.cert_no = item.cert_no
|
|
|
+ this.entList = []
|
|
|
+ } else {
|
|
|
+ this.info.buyer = item.name
|
|
|
+ this.companyList = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onInput(value, type) {
|
|
|
+ const pattner = /^.{3,}$/
|
|
|
+ if (!pattner.test(value)) return
|
|
|
+ this.getCompany(value, type)
|
|
|
+ },
|
|
|
+ onBlur(fieldName) {
|
|
|
+ // 投标企业名称必须选择联想内的企业
|
|
|
+ if (fieldName === 'company') {
|
|
|
+ if (!this.info.cert_no) {
|
|
|
+ this.info.company = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取公司联想数据
|
|
|
+ getCompany: debounce(function (val, type) {
|
|
|
+ if (val) {
|
|
|
+ creditReportEntSearch({ entName: val }).then((res) => {
|
|
|
+ if (type === 'ent') {
|
|
|
+ this.entList = res.data || []
|
|
|
+ } else {
|
|
|
+ this.companyList = res.data || []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }, 500),
|
|
|
+ getContainer() {
|
|
|
+ return document.querySelector('.analysis-report-footer-production-card');
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.analysis-report-footer-production-card {
|
|
|
+ border-top-left-radius: 12px;
|
|
|
+ border-top-right-radius: 12px;
|
|
|
+
|
|
|
+ .product-top {
|
|
|
+ position: relative;
|
|
|
+ margin-top: -10px;
|
|
|
+ z-index: 2;
|
|
|
+ border-top-left-radius: 12px;
|
|
|
+ border-top-right-radius: 12px;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.05);
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .report-func {
|
|
|
+ padding: 12px 16px;
|
|
|
+ background: #fff;
|
|
|
+ .report-func-title {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #171826;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ .report-func-content {
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #5f5e64;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .report-info {
|
|
|
+ margin-top: 8px;
|
|
|
+ ::v-deep {
|
|
|
+ .van-cell {
|
|
|
+ padding: 15px 16px 15px 24px;
|
|
|
+ .van-cell__title {
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #5f5e64;
|
|
|
+ }
|
|
|
+ input::placeholder,
|
|
|
+ textarea::placeholder {
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #c0c4cc;
|
|
|
+ }
|
|
|
+ .van-field__control {
|
|
|
+ white-space: normal;
|
|
|
+ word-wrap: break-word;
|
|
|
+ }
|
|
|
+ &.ent-input-field,
|
|
|
+ &.company-input-field {
|
|
|
+ position: relative;
|
|
|
+ .ent-popup-container {
|
|
|
+ position: absolute;
|
|
|
+ top: 54px;
|
|
|
+ right: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ width: 230px;
|
|
|
+ max-height: 150px;
|
|
|
+ z-index: 1;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #2abed1;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ .ent-popup-wrap {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .wrap-list {
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ padding: 4px 10px;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #171826;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.van-field--error .van-field__control {
|
|
|
+ color: #171826;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-cell--required::before {
|
|
|
+ left: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buy-item-list {
|
|
|
+ padding: 12px;
|
|
|
+ box-sizing: content-box;
|
|
|
+ background: linear-gradient(180deg, #ffffff 0%, #f4f5f7 100%);
|
|
|
+ }
|
|
|
+ .split-line {
|
|
|
+ height: 1px;
|
|
|
+ background: #f2f2f2;
|
|
|
+ margin: 0 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .in-pack-tip {
|
|
|
+ color: #5F5E64;
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-spec-cell {
|
|
|
+ height: 54px;
|
|
|
+ padding: 0 16px;
|
|
|
+ .label-text {}
|
|
|
+ .activity-badge {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 8px;
|
|
|
+ padding: 2px 4px;
|
|
|
+ background: rgba(255, 243, 239, 1);
|
|
|
+ border: 1px solid rgba(255, 98, 107, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ color: #FB483D;
|
|
|
+ font-size: 11px;
|
|
|
+ line-height: 14px;
|
|
|
+ }
|
|
|
+ .vip-label {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 4px;
|
|
|
+ height: 18px;
|
|
|
+ background: #2abed1;
|
|
|
+ border-radius: 8px 2px 8px 2px;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ &.monthly-theme {}
|
|
|
+ &.seasonal-theme {
|
|
|
+ background: #F1D090;
|
|
|
+ color: #1D1D1D;
|
|
|
+ }
|
|
|
+ &.year-theme {
|
|
|
+ background: #171826;
|
|
|
+ color: #FAE7CA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-vip {
|
|
|
+ display: inline-block;
|
|
|
+ color: inherit;
|
|
|
+ font-size: 18px;
|
|
|
+ transform: scale(0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-spec-info {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-youbian {
|
|
|
+ color: #C0C4CC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhangyuhan
