iap

src/components/PayMethodPick.vue

@@ -21,7 +21,7 @@
     </div>
 </template>
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 export default {
     props: {
         modelValue: {},
@@ -31,19 +31,17 @@ export default {
         }
     },
     computed: {
-        ...mapState(['userInfo'])
+        ...mapState(['userInfo']),
+        ...mapGetters(['iosReview'])
     },
     created() {
         if (this.value) {
             this.checked = this.value;
         }
-        if (
-            (this.$store.state.review && window.cordova && window.cordova.platformId === 'ios') ||
-            navigator.userAgent.includes('#review#')
-        ) {
+        if (this.iosReview) {
             this.payConfig = [
                 {
-                    name: '绿洲石',
+                    name: '绿魔币 ',
                     key: 'BALANCE',
                     icon: 'https://cdn.raex.vip/image/2022-05-18-17-46-19eDglIIAy.png',
                     show: true,
@@ -59,7 +57,7 @@ export default {
                     }
                     return true;
                 });
-                if (this.inWeixin) {
+                if (this.$store.getters.inWechat) {
                     configs.forEach(item => {
                         if (item.key === 'ALIPAY') {
                             item.key = 'ALIPAY_BRIDGE';
@@ -79,10 +77,7 @@ export default {
                 require('@assets/svgs/icon_gouxuan_huise.svg'),
                 require('@assets/icon_gouxuan_pre.png'),
                 require('@assets/icon_gouxuan_huise1.png')
-            ],
-            inWeixin: /micromessenger/i.test(navigator.userAgent),
-            inApp: /#cordova#/i.test(navigator.userAgent),
-            inIos: /iPhone|iPad|iPod/i.test(navigator.userAgent)
+            ]
         };
     },
     methods: {

src/components/auction/deposit.vue

@@ -38,7 +38,7 @@
                 <img src="../../assets/icon_inter.png" alt="" />
             </div>
 
-            <div class="pay" v-if="!($store.state.review && inIos)">
+            <div class="pay">
                 <!-- <div class="pay-item" @click="payType = item.type" v-for="(item, index) in payInfos" :key="index">
                     <img class="icon" :src="item.icon" alt="" />
                     <span>{{ item.name }}</span>

src/main.js

@@ -148,7 +148,7 @@ if (query.hopeMarket === 'true' || query.hopeMarket === true || sessionStorage.g
     sessionStorage.setItem('hopeMarket', true);
 }
 
-const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+store.commit('setPlatform', /iPad|iPhone|iPod/i.test(navigator.userAgent) ? 'ios' : 'android');
 
 const loadSplash = (onload, onerror) =>
     new Promise((resolve, reject) => {
@@ -186,6 +186,9 @@ if (navigator.userAgent.includes('#review#')) {
     store.commit('setReview', true);
 }
 if (navigator.userAgent.includes('#cordova#')) {
+    if (window.cordova && window.cordova.platformId) {
+        store.commit('setPlatform', window.cordova.platformId);
+    }
     document.addEventListener(
         'deviceready',
         function () {
@@ -290,38 +293,44 @@ if (navigator.userAgent.includes('#cordova#')) {
             );
 
             if ('ios' === window.cordova.platformId) {
-                window.store.register({
-                    id: '358',
-                    alias: '358',
-                    type: window.store.CONSUMABLE
-                });
+                window.store.register(
+                    ['68', '108', '198', '288', '588', '998'].map(id => {
+                        return {
+                            id,
+                            alias: id,
+                            type: window.store.CONSUMABLE
+                        };
+                    })
+                );
                 window.store.error(function (error) {
                     console.log('ERROR ' + error.code + ': ' + error.message);
                 });
-                window.store
-                    .when('358')
-                    .updated(product => {
-                        emitter.emit('iapEvent', { event: 'updated', product });
-                    })
-                    .requested(product => {
-                        emitter.emit('iapEvent', { event: 'requested', product });
-                    })
-                    .initiated(product => {
-                        emitter.emit('iapEvent', { event: 'initiated', product });
-                    })
-                    .cancelled(product => {
-                        emitter.emit('iapEvent', { event: 'cancelled', product });
-                    })
-                    .approved(product => {
-                        product.finish();
-                        emitter.emit('iapEvent', { event: 'approved', product });
-                    })
-                    .verified(product => {
-                        emitter.emit('iapEvent', { event: 'verified', product });
-                    })
-                    .finished(product => {
-                        emitter.emit('iapEvent', { event: 'finished', product });
-                    });
+                ['68', '108', '198', '288', '588', '998'].forEach(id => {
+                    window.store
+                        .when(id)
+                        .updated(product => {
+                            emitter.emit('iapEvent', { event: 'updated', product });
+                        })
+                        .requested(product => {
+                            emitter.emit('iapEvent', { event: 'requested', product });
+                        })
+                        .initiated(product => {
+                            emitter.emit('iapEvent', { event: 'initiated', product });
+                        })
+                        .cancelled(product => {
+                            emitter.emit('iapEvent', { event: 'cancelled', product });
+                        })
+                        .approved(product => {
+                            product.finish();
+                            emitter.emit('iapEvent', { event: 'approved', product });
+                        })
+                        .verified(product => {
+                            emitter.emit('iapEvent', { event: 'verified', product });
+                        })
+                        .finished(product => {
+                            emitter.emit('iapEvent', { event: 'finished', product });
+                        });
+                });
                 window.store.refresh();
             }
         },

src/store/index.js

@@ -115,5 +115,16 @@ export default createStore({
             }
         }
     },
+    getters: {
+        iosReview(state) {
+            return state.platform === 'ios' && state.review;
+        },
+        androidReview(state) {
+            return state.platform === 'android' && state.review;
+        },
+        inWechat() {
+            return /micromessenger/i.test(navigator.userAgent);
+        }
+    },
     modules: {}
 });

src/views/user/Wallet.vue

@@ -14,7 +14,7 @@
             </div>
         </div>
         <div class="balance-amount" v-if="userInfo && userInfo.walletEnabled">
-            <div class="label" v-if="$store.state.review">绿洲石余额</div>
+            <div class="label" v-if="$store.state.review">绿魔币余额</div>
             <div class="label" v-else>账户余额（元）</div>
             <div class="value">
                 <span class="number"> {{ Number(userBalance.balance || 0).toFixed(2) }}</span>
@@ -25,7 +25,10 @@
                 >
                     提现
                 </button>
-                <button class="btn-recharge" @click="showRechargeDialog = true" v-if="enableRecharge">充值</button>
+                <button class="btn-recharge" @click="showIapRechargeDialog = true" v-if="enableRecharge && iosReview">
+                    充值
+                </button>
+                <button class="btn-recharge" @click="showRechargeDialog = true" v-else-if="enableRecharge">充值</button>
             </div>
         </div>
         <div class="cell-group" v-if="!$store.state.review">
@@ -140,12 +143,56 @@
                 </van-button>
             </div>
         </van-action-sheet>
+
+        <van-action-sheet v-model:show="showIapRechargeDialog" :closeable="false" class="recharge-dialog">
+            <div class="title">
+                <div class="text">充值</div>
+                <div class="close" @click="showIapRechargeDialog = false">
+                    <img src="@assets/icon_dialog_close.png" />
+                </div>
+            </div>
+            <div class="content">
+                <div class="iap-row">
+                    <div class="iap-item" :class="{ active: iapId === '68' }" @click="iapId = '68'">
+                        <div class="name">68绿魔币</div>
+                        <div class="price">¥68</div>
+                    </div>
+                    <div class="iap-item" :class="{ active: iapId === '108' }" @click="iapId = '108'">
+                        <div class="name">108绿魔币</div>
+                        <div class="price">¥108</div>
+                    </div>
+                    <div class="iap-item" :class="{ active: iapId === '198' }" @click="iapId = '198'">
+                        <div class="name">198绿魔币</div>
+                        <div class="price">¥198</div>
+                    </div>
+                </div>
+                <div class="iap-row">
+                    <div class="iap-item" :class="{ active: iapId === '288' }" @click="iapId = '288'">
+                        <div class="name">288绿魔币</div>
+                        <div class="price">¥288</div>
+                    </div>
+                    <div class="iap-item" :class="{ active: iapId === '588' }" @click="iapId = '588'">
+                        <div class="name">588绿魔币</div>
+                        <div class="price">¥588</div>
+                    </div>
+                    <div class="iap-item" :class="{ active: iapId === '988' }" @click="iapId = '988'">
+                        <div class="name">998绿魔币</div>
+                        <div class="price">¥998</div>
+                    </div>
+                </div>
+            </div>
+            <div class="btn-wrapper">
+                <van-button type="primary" :color="$colors.prim" round block class="btn-recharge" @click="iapRecharge">
+                    确认
+                </van-button>
+            </div>
+        </van-action-sheet>
     </div>
 </template>
 <script>
 import PayMethodPick from '@/components/PayMethodPick';
 import resolveUrl from 'resolve-url';
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 export default {
     components: { PayMethodPick },
     data() {
@@ -161,10 +208,13 @@ export default {
             payMethod: null,
             showWithdrawDialog: false,
             enableRecharge: false,
-            enableWithdraw: false
+            enableWithdraw: false,
+            showIapRechargeDialog: false,
+            iapId: '68'
         };
     },
     created() {
+        this.emitter.on('iapEvent', this.iapEvent);
         this.$http
             .get('/sysConfig/get/min_recharge_amount,max_recharge_amount,enable_recharge,enable_withdraw')
             .then(res => {
@@ -176,8 +226,12 @@ export default {
         this.$store.dispatch('getBankCard');
         this.getBalance();
     },
+    beforeUnmount() {
+        this.emitter.off('iapEvent', this.iapEvent);
+    },
     computed: {
-        ...mapState(['bankCard', 'userInfo'])
+        ...mapState(['bankCard', 'userInfo', 'review']),
+        ...mapGetters(['iosReview', 'androidReview'])
     },
     methods: {
         getBalance() {
@@ -301,6 +355,44 @@ export default {
         },
         all() {
             console.log('111');
+        },
+        iapEvent(e) {
+            console.log(e);
+            switch (e.event) {
+                case 'initiated':
+                    this.$toast.loading({
+                        duration: 0,
+                        forbidClick: true,
+                        message: '加载中'
+                    });
+                    break;
+                case 'finished':
+                    //this.$toast.clear();
+                    this.$http
+                        .post('/userBalance/iap', {
+                            receiptData: e.product.transaction.appStoreReceipt
+                        })
+                        .then(res => {
+                            this.getBalance();
+                            this.$toast.clear();
+                        })
+                        .catch(e => {
+                            console.log(e);
+                            this.$toast.clear();
+                        });
+                    console.log(e.product.transaction.appStoreReceipt);
+                    break;
+                case 'cancelled':
+                    this.$toast.clear();
+                    this.orderId = null;
+                    break;
+            }
+        },
+        iapRecharge() {
+            if (window.store) {
+                window.store.order(this.iapId);
+            }
+            this.showIapRechargeDialog = false;
         }
     }
 };
@@ -769,6 +861,41 @@ export default {
             }
         }
     }
+    .iap-row {
+        .flex();
+        padding: 0 15px;
+        margin-top: 15px;
+        .iap-item {
+            flex-basis: 0;
+            flex-grow: 1;
+            height: 50px;
+            border-radius: 8px;
+            background-color: @bg3;
+            color: @text1;
+            .flex-col();
+            align-items: center;
+            justify-content: center;
+            margin-left: 15px;
+            .name {
+                font-size: 14px;
+            }
+            .price {
+                margin-top: 2px;
+                font-size: 13px;
+                color: @text3;
+            }
+            &:first-child {
+                margin-left: 0;
+            }
+            &.active {
+                background: @prim;
+                color: white;
+                .price {
+                    color: rgba(255, 255, 255, 0.5);
+                }
+            }
+        }
+    }
 }
 ::v-deep(.van-cell__title) {
     font-weight: bold;