123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413 |
- <template>
- <div v-loading="isLoading" class="container">
- <div class="title">购买会员</div>
- <!-- 会员套餐 -->
- <div class="section">
- <div class="subtitle">会员套餐<span class="tip">(基础服务功能)</span></div>
- <radio-card
- v-model="checkedPackage"
- :list="packageList"
- :show-un-active-icon="false"
- @change="handlePackageChange"
- >
- <template #item="{ row }">
- <div class="vip-package">
- <div class="time">{{ row.duration + (row.unit === 1 ? '月' : '年') }}</div>
- <div>
- <span>¥</span>
- <span class="price">{{ row.price }}</span>
- <span class="deleted">¥{{ row.originalPrice }}</span>
- </div>
- </div>
- </template>
- </radio-card>
- </div>
- <el-divider class="divider" />
- <!-- 订制服务 -->
- <div class="section">
- <div class="subtitle">订制服务<span class="tip">(勾选且付费后,将会有专人与您进行沟通)</span></div>
- <radio-card v-model="checkedServiceList" :list="serviceList" type="checkbox" @change="handleServiceChange">
- <template #item="{ row }">
- <div class="service-package">
- <div class="name">{{ row.name }}</div>
- <div class="subname">定制要求与费用另议</div>
- </div>
- </template>
- </radio-card>
- </div>
- <el-divider class="divider" />
- <template v-if="paySwitch">
- <!-- 选择支付方式 -->
- <div class="section">
- <div class="subtitle">选择支付方式</div>
- <radio-card v-model="checkedPayWay" :list="payWayList" :border="false" :show-un-active-icon="false">
- <template #item="{ row }">
- <el-image :src="row.image" class="pay-way" />
- </template>
- </radio-card>
- </div>
- <!-- 支付 -->
- <!-- 阿里云支付 -->
- <pay-alipay
- v-if="checkedPayWay === 1"
- ref="aliPay"
- class="pay-code"
- :data="orderInfo"
- :pay-way="checkedPayWay"
- @pay-confirm="handlePayConfirm"
- @hook:created="handleScanPayStart"
- />
- <!-- 微信支付 -->
- <pay-wechat
- v-if="checkedPayWay === 2"
- ref="wechatPay"
- class="pay-code"
- :data="orderInfo"
- :pay-way="checkedPayWay"
- @pay-confirm="handlePayConfirm"
- @hook:created="handleScanPayStart"
- />
- <!-- 企业网银支付 & 个人网银支付-->
- <template v-if="checkedPayWay === 3 || checkedPayWay === 4">
- <pay-bank
- :key="checkedPayWay"
- class="pay-bank"
- :data="orderInfo"
- :pay-way="checkedPayWay"
- @pay-confirm="handlePayConfirm"
- @hook:created="handleOtherPayStart"
- />
- </template>
- </template>
- <template v-else>
- <el-alert show-icon title="支付系统遇到点小问题,请稍后重试或联系管理员处理" type="error" effect="dark" />
- </template>
- </div>
- </template>
- <script>
- // 图标
- import imgPayAli from '@/assets/pay/pay-ali.png'
- import imgBank from '@/assets/pay/pay-bank.png'
- import imgSelfBank from '@/assets/pay/pay-self-bank.png'
- import imgWechat from '@/assets/pay/pay-wechat.png'
- import PayAlipay from '@/views/components/payment/pay-alipay.vue'
- import PayWechat from '@/views/components/payment/pay-wechat.vue'
- import PayBank from '@/views/components/payment/pay-bank.vue'
- // 单选 / 多选
- import RadioCard from '@/views/components/RadioCard'
- // 接口
- import { fetchConfigureList } from '@/api/member'
- import { registerSuperPay, payOnlineChecked, checkedWinxinPaySuccess, checkedOtherPaySuccess } from '@/api/pay'
- export default {
- components: {
- RadioCard,
- PayAlipay,
- PayWechat,
- PayBank
- },
- data() {
- return {
- isLoading: true,
- orderInfo: {
- pageType: 4,
- payAmount: '',
- vipId: '',
- vipRecordId: ''
- },
- packageList: [],
- serviceList: [],
- checkedPackage: '',
- checkedServiceList: [],
- checkedPayWay: 0,
- paySwitch: true,
- redirectUrlQuery: {},
- // 扫码支付倒计时
- scanToPayStartTime: 0,
- scanToPayEndTime: 0,
- payType: '',
- payWayList: [
- {
- image: imgPayAli,
- name: '阿里云支付',
- id: 1,
- checked: true
- },
- {
- image: imgWechat,
- name: '微信支付',
- id: 2,
- checked: false
- },
- {
- image: imgBank,
- name: '企业网银支付',
- id: 3,
- checked: false
- },
- {
- image: imgSelfBank,
- name: '个人网银支付',
- id: 4,
- checked: false
- }
- ]
- }
- },
- created() {
- this.fetchConfigureList()
- this.payOnlineChecked()
- },
- methods: {
- // 获取套餐 服务配置列表
- fetchConfigureList() {
- fetchConfigureList()
- .then((res) => {
- this.packageList = res.data.packageList
- this.serviceList = res.data.serviceList
- // 设置初始值
- this.checkedPackage = this.packageList[0].id
- this.registerSuperPay()
- this.setOrderInfo()
- })
- .finally(() => {
- this.isLoading = false
- })
- },
- // 设置订单信息(这个假订单)
- setOrderInfo() {
- const findOne = this.packageList.find((item) => item.id === this.checkedPackage)
- if (findOne) {
- this.orderInfo.payAmount = findOne.price
- this.orderInfo.vipId = findOne.id
- }
- },
- // 套餐修改
- handlePackageChange() {
- this.checkedPayWay = 0
- this.registerSuperPay()
- this.setOrderInfo()
- },
- // 服务修改
- handleServiceChange() {
- console.log(this.serviceList)
- this.checkedPayWay = 0
- this.registerSuperPay()
- this.setOrderInfo()
- },
- // 在线支付开通会员预处理
- registerSuperPay() {
- registerSuperPay({
- authUserId: this.$store.getters.authUserId,
- packageId: this.checkedPackage,
- services: this.checkedServiceList.join(',')
- }).then((res) => {
- this.orderInfo.vipRecordId = res.data
- })
- },
- // 在线支付开关检测
- payOnlineChecked() {
- payOnlineChecked().then((res) => {
- if (res.data === '1') {
- this.paySwitch = true
- } else {
- this.paySwitch = false
- }
- })
- },
- // 确认支付是否完成
- handlePayConfirm(e) {
- this.redirectUrlQuery = {
- payAmount: e.data.payAmount
- }
- this.payType = e.type
- if (e.type === 'WEIXIN') {
- this.checkedWinxinPaySuccess({ vipRecordId: e.data.vipRecordId, orderFlag: 0 })
- } else {
- this.checkedOtherPaySuccess({ mbOrderId: e.data.mbOrderId, orderFlag: 0 })
- }
- },
- // 查询是否成功(微信支付专用)
- checkedWinxinPaySuccess(params) {
- checkedWinxinPaySuccess(params).then((res) => {
- this.handleWixinPayResult(res)
- })
- },
- // 查询支付是否成功 (支付宝 银联)
- checkedOtherPaySuccess(params) {
- checkedOtherPaySuccess(params).then((res) => {
- this.handlePayResult(res)
- })
- },
- // 处理微信支付查询结果
- handleWixinPayResult(result) {
- result = JSON.parse(result.data)
- if (result.data.status === '1') {
- this.$store.dispatch('user/fetchUserVipInfo')
- this.$router.push({
- path: '/pay/success',
- query: this.redirectUrlQuery
- })
- } else {
- this.diffScanOverTime(60 * 5, () => {
- this.$router.push({
- path: '/pay/faild',
- query: this.redirectUrlQuery
- })
- })
- }
- },
- // 处理网银支付宝支付查询结果
- handlePayResult(result) {
- result = JSON.parse(result.data)
- console.log(result)
- if (result.rt7_orderStatus === 'SUCCESS') {
- this.$store.dispatch('user/fetchUserVipInfo')
- this.$router.push({
- path: '/pay/success',
- query: this.redirectUrlQuery
- })
- } else if (result.rt7_orderStatus === 'DOING') {
- this.diffScanOverTime(60 * 5, () => {
- this.$router.push({
- path: '/pay/faild',
- query: this.redirectUrlQuery
- })
- })
- } else {
- this.$router.push({
- path: '/pay/faild',
- query: this.redirectUrlQuery
- })
- }
- },
- // 扫码支付开始
- handleScanPayStart() {
- const h = this.$createElement
- this.$notify({
- title: '扫码支付提示',
- message: h('span', { style: 'color: #ff6d6d' }, '请在5分钟内完成扫码支付')
- })
- this.scanToPayStartTime = new Date().getTime()
- console.log('扫码支付开始', this.scanToPayStartTime)
- },
- // 其他支付方式(非扫码支付)
- handleOtherPayStart() {
- this.scanToPayStartTime = 0
- },
- diffScanOverTime(time, callback) {
- if (this.scanToPayStartTime > 0) {
- this.scanToPayEndTime = new Date().getTime()
- const subTime = this.scanToPayEndTime - this.scanToPayStartTime
- const maxTime = time * 1000
- if (subTime > maxTime) {
- console.log('放行')
- callback()
- }
- } else {
- console.log('放行')
- callback()
- }
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .container {
- margin: 0 auto;
- padding: 0 60px;
- }
- .divider {
- margin: 40px 0;
- }
- .pay-code {
- margin: 40px 0;
- }
- .pay-bank {
- margin: 25px 0;
- }
- .title {
- margin: 40px 0;
- font-size: 24px;
- font-weight: bold;
- color: #404040;
- text-align: center;
- }
- .section {
- .subtitle {
- margin-bottom: 24px;
- font-size: 18px;
- color: #101010;
- .tip {
- font-size: 14px;
- color: #909399;
- }
- }
- .vip-package {
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- width: 232px;
- height: 128px;
- .time {
- margin-bottom: 16px;
- font-size: 18px;
- font-weight: bold;
- color: #404040;
- }
- span {
- color: #ff6d6d;
- }
- .price {
- font-size: 36px;
- font-weight: bold;
- color: #ff6d6d;
- }
- .deleted {
- font-size: 14px;
- color: #b2b2b2;
- text-decoration: line-through;
- }
- }
- .service-package {
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- width: 232px;
- height: 128px;
- .name {
- margin-bottom: 16px;
- font-size: 18px;
- color: #404040;
- }
- .subname {
- font-size: 14px;
- color: #ff6d6d;
- }
- }
- .pay-way {
- display: block;
- width: 128px;
- height: 44px;
- }
- }
- </style>
|