diff --git a/src/global.scss b/src/global.scss index 501989d..88735c5 100644 --- a/src/global.scss +++ b/src/global.scss @@ -93,12 +93,13 @@ html { display: none; } -/*页面加载*/ +// 营销 H5 全局样式 +// 页面加载 .pageNoneLoading_Vant { margin-top: 200px; } -/*点击遮罩loading*/ +// 点击遮罩loading .overlayLoadBody { background-color: rgba(0, 0, 0, 0) !important; display: flex; @@ -120,4 +121,18 @@ html { background: #e8eaec !important; } +// 底部滑出输入框 +.inputPopup { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + .inputModalTitle { + + } + .inputModalContent { + margin-bottom: 20px; + } +} + diff --git a/src/views/pages/comProduct/index.vue b/src/views/pages/comProduct/index.vue index bef0f03..9d52e85 100644 --- a/src/views/pages/comProduct/index.vue +++ b/src/views/pages/comProduct/index.vue @@ -64,14 +64,15 @@ v-model:show="inputModalShow" closeable position="bottom" - :style="{ height: '30%' }" - class="inputModal" + :style="{ height: '40%' }" + class="inputPopup" > -

标题

+

{{ getModalTitle }}

- + + 块级元素 @@ -84,8 +85,18 @@ export default { props: {}, data() { return { - loadingStatus: false, + loadingStatus: false, // 页面加载 loading + overlayLoad: false, // 点击 遮罩 loading + + isWx: navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1, + wxAuthUrl: 'https://openapi.1688sup.com/wechat/oauth', + zfbAuthUrl: 'https://openapi.1688sup.com/alipay/oauth', + key: this.$route.query.key || localStorage.getItem("key"), + // token: this.$route.query.token || localStorage.getItem("key"), + openid: this.$route.query.openid || localStorage.getItem("openid"), // 微信授权id + alipayuserid: this.$route.query.alipayuserid || localStorage.getItem("alipayuserid"), // 支付宝授权id + detailType: 0, // 路由 push 详情 type showData: ['31', '32', '33', '2', '1'] as Array, // 区分 列表 和 详情 pageData: new Map([['31', []], ['32', []], ['33', []], ['2', []], ['1', []]]), @@ -159,7 +170,7 @@ export default { inputModalShow: false, inputVal: '', inputValAgain: '', - overlayLoad: false, + selectedPro: [], // 单个商品 和 同一类型 + 一键领取 orderData: [], // 订单轮询 } }, @@ -168,6 +179,25 @@ export default { this.checkRoute(); await this.getData(); }, + computed: { + getModalTitle() { + const obj = this.selectedPro[0]; + if (this.selectedPro.length === 1) { + return obj.goods.name; + } else { + switch (obj.goods.type) { + case 1: + return "红包"; + case 2: + return "直充/卡密"; + case 3: + return obj.info.channel === 1 ? "支付宝立减金" : obj.info.channel === 2 ? '微信立减金' : '云闪付立减金'; + default: + return '' + } + } + } + }, watch: { '$route': { handler: 'checkRoute', @@ -191,6 +221,8 @@ export default { list.push(item); this.pageData.set(index, list); }) + } else { + showToast('商品数据为空'); } } this.loadingStatus = false; @@ -217,26 +249,81 @@ export default { async receiveAll (type: string, list: any) { if (this.detailType && type === 'top') return; console.log(`---list-${type}---`, list); - if (type === 'one') { + // 领取提示判断 + if (type === 'one') { // 单品 直接根据 let obj = list[0]; - if (obj.goods.err_code && obj.goods.reson) { - return showToast(obj.goods.reson); + if (obj.goods.err_code) { + return showToast(obj.goods.reson || '商品异常'); } } - let ids: any = []; + let ids: any = [], modes: any = []; list.forEach((item: any) => { + if (item.goods.type === 1) { // 红包 + const str = item.cash.channel === 3 ? `${item.cash.channel}` : `${item.cash.channel}${item.cash.receive_mode}`; + modes.push(str) + } else if (item.goods.type === 2) { // 直充 + const str = item.degital.product_type === 1 ? `${item.degital.product_type}${item.degital.check_sms_code}` : `${item.degital.product_type}${item.degital.card_show}${item.degital.check_sms_code}`; + modes.push(str) + } else if (item.goods.type === 3) { // 立减金 + const str = item.info.channel === 3 ? `${item.info.channel}` : `${item.info.channel}${item.info.receive_mode}`; + modes.push(str) + } if (!item.goods.err_code) { ids.push(item.goods.id) } }) + if (new Set(modes).size !== 1) { + return showToast('不同类型或领取方式不支持一键领取'); + } if (!ids.length) { return showToast('暂无可领取商品'); } + // 直充（非平台） + 红包/立减金（支付-账号领取/云闪付） 输入判断 + this.selectedPro = [ ...list ]; + let obj = this.selectedPro[0], account = '默认'; + const boolHB = obj.goods.type === 1 && (((obj.cash.channel === 1) && (obj.cash.receive_mode === 2)) || (obj.cash.channel === 3)); + const boolZC = obj.goods.type === 2 && !((obj.degital.product_type === 2) && (obj.degital.card_show === 2)); + const boolLJJ = obj.goods.type === 3 && ((obj.info.channel === 1) && (obj.info.receive_mode === 2) || (obj.info.channel === 3)); + if (boolHB || boolZC || boolLJJ) { + if (type !== 'submit') { + return this.inputModalShow = true; + } + if (!this.inputVal) { + return showToast('请输入账号'); + } else { + if (!this.inputValAgain) { + return showToast('请再次输入账号'); + } + if (this.inputValAgain !== this.inputVal) { + return showToast('两次输入不一致'); + } + } + account = this.inputVal; + } + // 红包/立减金（支付-官方领取/微信） 授权判断 + if (obj.goods.type === 1) { // 红包 + if (obj.cash.channel === 1 && obj.cash.receive_mode === 1) { // 支付宝-官方领取 + account = this.alipayuserid; + } + if (this.info.channel === 2) { // 微信 + account = this.openid; + } + if (!account) return this.channelJudge(obj.cash.channel, obj.cash.receive_mode); + } else if (obj.goods.type === 3) { + if (obj.info.channel === 1 && obj.info.receive_mode === 1) { // 支付宝-官方领取 + account = this.alipayuserid; + } + if (obj.info.channel === 2) { // 微信 + account = this.openid; + } + if (!account) return this.channelJudge(obj.info.channel, obj.info.receive_mode); + } + // 兑换-订单轮询 this.overlayLoad = true; const res = await EXCHANGE({ key: this.key, id: ids, - account: 'account', + account: account, name: 'name', }); if (res && res.code === 200) { @@ -263,6 +350,48 @@ export default { } this.overlayLoad = false; }, + // 支付宝-官方领取 + 微信 + channelJudge (channel: number, mode: number) { + // channel 1 支付宝 2 微信 3 云闪付 + // mode 支付宝：1 官方领取 2 账号领取；微信：1 小程序 2 公众号 3 通用领取 + if (channel === 1 && mode === 1) { // 支付宝-官方领取 + const backLink = encodeURIComponent(`${location.origin}/yxh5/cmsVoucher?key=${localStorage.getItem('key')}&id=${this.$route.query.id}`); + const url = `${this.zfbAuthUrl}?jump=${backLink}`; + // 微信等环境不能直接打开支付宝 + const ua = navigator.userAgent.toLowerCase(); + if (this.isWx || ua.indexOf("baiduboxapp") > -1 || ua.indexOf("firefox") > -1) { + showConfirmDialog({ + confirmButtonText: '复制', + message: '请点击[复制]按钮，复制链接到浏览器打开', + }) + .then(() => { + this.copyFn(url); + }) + .catch(() => {}) + } else { + // 唤起支付宝 + location.replace(url); + } + } else if (channel === 2) { // 微信 + if (!this.isWx) { // 微信环境 默认静默授权 + if (mode === 2) { // 公众号 + const backLink = encodeURIComponent(`${location.origin}/yxh5/cmsVoucher?key=${localStorage.getItem('key')}&id=${this.$route.query.id}`); + const url = `${this.wxAuthUrl}?jump=${backLink}`; + showConfirmDialog({ + confirmButtonText: '复制', + message: '请点击[复制]按钮，复制链接到微信打开', + }) + .then(() => { + this.copyFn(url); + }) + .catch(() => {}) + } else { // 小程序 + 通用领取 + // 唤起小程序 todo + location.replace('https://www.baidu.com/') + } + } + } + }, async orderPolling () { const that = this; const res = await ORDER_QUERY({ @@ -540,13 +669,4 @@ export default { } } } -.inputModal { - display: flex; - flex-direction: column; - justify-content: space-around; - align-items: center; - .inputModalContent { - margin-bottom: 20px; - } -} \ No newline at end of file diff --git a/src/views/templates/cmsDetail/index.vue b/src/views/templates/cmsDetail/index.vue index 9cf6a3a..ec7e79c 100644 --- a/src/views/templates/cmsDetail/index.vue +++ b/src/views/templates/cmsDetail/index.vue @@ -11,7 +11,7 @@

-

+
加载中...
- +
diff --git a/src/views/templates/cmsVoucher/index.vue b/src/views/templates/cmsVoucher/index.vue index ee79737..015c35d 100644 --- a/src/views/templates/cmsVoucher/index.vue +++ b/src/views/templates/cmsVoucher/index.vue @@ -269,7 +269,7 @@ export default { account = this.openid; } // 针对 支付宝-官方领取/微信 需要授权场景 判断 - if (!account ) return this.channelJudge(); + if (!account) return this.channelJudge(); this.overlayLoad = true; const res = await EXCHANGE({ key: this.key, @@ -306,6 +306,7 @@ export default { .then(() => { this.copyFn(url); }) + .catch(() => {}) } else { // 唤起支付宝 location.replace(url); @@ -322,6 +323,7 @@ export default { .then(() => { this.copyFn(url); }) + .catch(() => {}) } else { // 小程序 + 通用领取 // 唤起小程序 todo location.replace('https://www.baidu.com/')