From 2d9362ae6f528f57e6133d5d80f0b633c24e8eb6 Mon Sep 17 00:00:00 2001
From: quanwei <419654421@qq.com>
Date: Fri, 21 Nov 2025 18:02:26 +0800
Subject: [PATCH] 年卡管理 年卡购买
---
mobile/pages/plus/vip/apply.vue | 527 ++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 398 insertions(+), 129 deletions(-)
diff --git a/mobile/pages/plus/vip/apply.vue b/mobile/pages/plus/vip/apply.vue
index fac43bd..41edc61 100644
--- a/mobile/pages/plus/vip/apply.vue
+++ b/mobile/pages/plus/vip/apply.vue
@@ -1,123 +1,251 @@
<template>
- <view class="apply-vip" v-if="!loading">
+ <view class="apply-bonus" v-if="!loadding">
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
<view class="ww100" :style="'height:'+topBarTop()+'px;'"></view>
<view class="tc head_top" :style="topBarHeight() == 0 ? '': 'height:'+topBarHeight()+'px;'">
<view class="reg180" @click="goback"><text class="icon iconfont icon-jiantou"></text></view>
- <view class="fb">{{titel}}</view>
+ <view class="fb">{{title}}</view>
</view>
<!-- #endif -->
<view class="banner d-c-c d-c" v-if="top_background!=''">
<image :src="top_background" mode="widthFix"></image>
</view>
- <view class="banner-fill"></view>
- <!--申请成功-->
- <template v-if="apply_status == 'success'">
- <view class="form-wrap p30 f30 tc">
- <view class="pb30 d-c-c gray3 f40 fb">
- 申请已提交
+ <view class="apply-box">
+ <!--申请成功-->
+ <template v-if="!is_applying ">
+ <view class="form-wrap p-30-0 f30">
+ <view class="p30 d-c-c gray3 f30 fb border-b-d">
+ {{words.apply.words.title.value}}
+ </view>
+ <view class="section">
+ <view @click="selectItem(item)" class="item" :class="index==productList.length-1?'noborder':'border-b-e'" v-for="(item, index) in productList" :key="index">
+ <image :src="item.product_image" class="cover" mode="aspectFit"></image>
+ <view class="info">
+ <view class="title">{{ item.product_name }}</view>
+ <view class="describe">{{ item.product_sku.product_attr }}</view>
+ <view class="level-box count_choose">
+ <view class="price">
+ ¥
+ <text class="num">{{ item.product_sku.product_price }}</text>
+ </view>
+ <view class="num-wrap">
+ <view class="" @tap.stop="reduceFunc(item)" v-if="item.total_num > 1">
+ <image class="reduce_icon" src="../../static/icon/reduce.png" mode=""></image>
+ </view>
+ <view class="text-wrap">{{item.total_num}}</view>
+ <view class="" @tap.stop="addFunc(item)" v-if="item.total_num < item.product_sku.stock_num ">
+ <image class="add_icon" src="../../static/icon/add.png" mode=""></image>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="icon-box pl20" :class="product_id==item.product_id?'active':''">
+ <text class="icon iconfont icon-xuanze f50"></text>
+ </view>
+ </view>
+ </view>
+ <view class="button-box p-30-0">
+ <view class="d-c-c f28">
+ <checkbox-group @change="changeFunc">
+ <checkbox value="checkbox" :checked="is_read" />
+ </checkbox-group>
+ <text>我已阅读并了解</text>
+ <text class="red" @click="isPopup=true">
+ 【{{ words.apply.words.license.value }}】
+ </text>
+ </view>
+ <view class="d-c-c mt30">
+ <button class="btn-red" @click="Submit()">{{ words.apply.words.submit.value }}</button>
+ </view>
+ </view>
</view>
- <view class="pt20">
- 您的申请已提交，请耐心等待审核
+ <view class="bottom-banner d-c-c d-c" v-if="bottom_background!=''">
+ <image :src="bottom_background" mode="widthFix"></image>
</view>
- <view class="pt30">
- <button type="primary" class="btn-gcred" @click="gotoVip">返回VIP中心</button>
+ </template>
+ <!--分销商审核中-->
+ <template v-if="is_applying">
+ <view class="d-c-c pt30">
+ <text style=" font-size: 100rpx;" class="icon iconfont icon-icon_xianshi-xian"></text>
</view>
+ <view class="p-30-0 d-c-c gray6 f30">
+ {{ words.apply.words.wait_audit.value }}
+ </view>
+ <view class="p30 mt30 d-c-c">
+ <button type="primary" class="btn-red" @click="gotoShop">{{ words.apply.words.goto_mall.value }}</button>
+ </view>
+ </template>
+ </view>
+ <!--协议-->
+ <Popup :show="isPopup" msg="申请协议">
+ <view class="agreement-content f28 lh150">
+ {{agreement}}
</view>
- </template>
-
- <!--申请表单-->
- <template v-else>
- <view class="form-wrap p30 f30">
- <form @submit="formSubmit">
- <view class="form-item border-b">
- <view class="field-name">姓名</view>
- <input name="real_name" class="flex-1 ml20" type="text" placeholder="请输入真实姓名" />
- </view>
- <view class="form-item border-b">
- <view class="field-name">手机号</view>
- <input name="mobile" class="flex-1 ml20" type="number" maxlength="11" placeholder="请输入手机号" />
- </view>
- <view class="form-item border-b">
- <view class="field-name">推荐人</view>
- <input name="referee_id" class="flex-1 ml20" type="number" placeholder="请输入推荐人ID（选填）" />
- </view>
-
- <view class="pt30">
- <button class="btn-gcred" form-type="submit">提交申请</button>
- </view>
- </form>
+ <view class="ww100 pt20 d-c-c">
+ <button type="primary" class="btn-red" @click="isPopup=false">我已阅读</button>
</view>
- </template>
+ </Popup>
</view>
</template>
<script>
+ import Popup from '@/components/uni-popup.vue'
export default {
+ components: {
+ Popup
+ },
data() {
return {
- loading: true,
- titel: '',
+ /*是否加载完成*/
+ loadding: true,
+ /*弹窗是否打开*/
+ isPopup: false,
+ /*是否阅读了规则*/
+ is_read:false,
+ agreement: '',
+ is_applying: false,
+ referee_name:'',
+ words:{},
+ is_bonus:'',
+ /*顶部背景*/
top_background: '',
- apply_status: 'form' // form-表单, success-申请成功
- };
+ /*小程序订阅消息*/
+ temlIds: [],
+ productList: [],
+ bottom_background: '',
+ product_id: '',
+ product_sku_id: '',
+ title: ''
+ }
},
- onLoad() {
- this.getPageData();
+ mounted() {
+ /*数据*/
+ this.getData();
},
methods: {
- // 获取页面数据
- getPageData() {
+ /*获取数据*/
+ getData() {
let self = this;
- uni.showLoading({ title: '加载中' });
-
- self._get('plus.vip.apply/getAgreement', {}, function(res) {
- self.titel = '申请成为VIP';
- self.top_background = res.data.data.background?.cash_apply || '';
- self.loading = false;
+ uni.showLoading({
+ title: '加载中'
+ })
+ self._get('plus.vip.apply/apply', {
+ platform: self.getPlatform(),
+ referee_id: uni.getStorageSync('referee_id')
+ }, function(res) {
uni.hideLoading();
- });
- },
-
- // 表单提交
- formSubmit(e) {
- let self = this;
- let formData = e.detail.value;
-
- // 数据验证
- if (!formData.real_name) {
- uni.showToast({ title: '请输入姓名', icon: 'none' });
- return;
- }
-
- if (!/^1[3-9]\d{9}$/.test(formData.mobile)) {
- uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
- return;
- }
-
- if (formData.referee_id && !/^\d+$/.test(formData.referee_id)) {
- uni.showToast({ title: '推荐人ID格式不正确', icon: 'none' });
- return;
- }
-
- // 提交申请
- uni.showLoading({ title: '提交中' });
- self._post('plus.vip.apply/submit', formData, function(res) {
- uni.hideLoading();
- if (res.code === 1) {
- uni.showToast({ title: '申请提交成功' });
- self.apply_status = 'success';
- } else {
- uni.showToast({ title: res.msg, icon: 'none' });
+ self.top_background = res.data.background;
+ self.is_applying = res.data.is_applying;
+ self.referee_name = res.data.referee_name!=null?res.data.referee_name:'平台';
+ self.is_bonus=res.data.is_bonus;
+ self.words = res.data.words;
+ self.temlIds = res.data.template_arr;
+ self.agreement = res.data.license;
+ self.productList = res.data.productList;
+ self.bottom_background = res.data.bottom_background;
+ /*默认选中商品*/
+ self.product_id = self.productList[0].product_id;
+ self.product_sku_id = self.productList[0].product_sku.product_sku_id;
+ /*设置标题*/
+ // uni.setNavigationBarTitle({
+ // title: self.words.apply.title.value
+ // });
+ self.title = self.words.apply.title.value;
+ self.loadding = false;
+ if(self.is_bonus){
+ uni.navigateBack({});
}
});
},
- // 返回VIP中心
- gotoVip() {
- uni.redirectTo({
- url: '/pages/plus/vip/index'
- });
+ /*购买商品*/
+ Submit() {
+ if(!this.is_read){
+ uni.showToast({
+ title: '请同意协议！',
+ icon:'none'
+ });
+ return;
+ }
+ let product_id = this.product_id;
+ let product_num = 1;
+ let product_sku_id = this.product_sku_id;
+ this.gotoPage('/pages/order/confirm-order?product_id=' + product_id + '&product_num=' + product_num +
+ '&product_sku_id=0&order_type=buy');
+ },
+
+ /*申请*/
+ formSubmit: function(e) {
+ let formdata = e.detail.value;
+ formdata.referee_id=uni.getStorageSync('referee_id');
+ let self = this;
+
+ if(formdata.name==''){
+ uni.showToast({
+ title: '请输入姓名！',
+ icon:'none'
+ });
+ return;
+ }
+ if(formdata.mobile.length==''){
+ uni.showToast({
+ title: '请输入手机号！',
+ icon: 'none'
+ });
+ return;
+ }
+ if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(formdata.mobile)) {
+ uni.showToast({
+ title: '手机有误,请重填！',
+ icon: 'none'
+ });
+ return;
+ }
+
+ if(!self.is_read){
+ uni.showToast({
+ title: '请同意协议！',
+ icon:'none'
+ });
+ return;
+ }
+
+ let callback = function(){
+ uni.showLoading({
+ title: '正在提交',
+ mask: true
+ })
+ self._post('plus.bonus.apply/submit', formdata, function(res) {
+ uni.hideLoading();
+ uni.showToast({
+ title: '申请成功'
+ });
+ self.getData();
+ });
+ };
+ self.subMessage(self.temlIds, callback);
+ },
+
+ /*去商城看看*/
+ gotoShop(){
+ uni.switchTab({
+ url:'/pages/index/index'
+ })
+ },
+
+ /*同意协议*/
+ changeFunc(e){
+ if(e.target.value.length>0){
+ this.is_read=true;
+ }else{
+ this.is_read=false;
+ }
+ },
+
+ /*选择商品*/
+ selectItem(e) {
+ this.product_id = e.product_id;
+ this.product_sku_id = e.product_sku.product_sku_id;
},
goback() {
@@ -127,21 +255,171 @@
}
</script>
-<style lang="scss">
- .apply-vip {
- min-height: 100vh;
- background: #fff;
+<style>
+.apply-bonus .banner {
+ position: absolute;
+ width: 100%;
+ z-index: 0;
+ min-height: 167rpx;
+ /* padding-bottom: 60rpx; */
+ background-repeat: no-repeat;
+ background-size: 100%;
+ top: 0;
+}
+.apply-bonus .banner image{ width: 100%;}
+
+ .form-wrap {
+ background: #FFFFFF;
+ border-radius: 26rpx 26rpx 0 0;
+ /* box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, .2); */
+ }
+
+ .form-item {
+ padding: 20rpx 0;
+ margin-bottom: 20rpx;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ font-size: 28rpx;
+ }
+
+ .form-item .field-name {
+ width: 180rpx;
+ }
+
+ .form-item input {
+ font-size: 28rpx;
+ }
+
+ .agreement-content {
+ max-height: 60vh;
+ overflow-y: auto;
+ }
+ .apply-bonus .btn-red{
+ width: 600rpx;
+ height: 88rpx;
+ line-height: 88rpx;
+ border-radius: 44rpx;
+ box-shadow: 0 8rpx 16rpx 0 rgba(226,35,26,.6);}
+
+ /* 商品列表样式 */
+ .section .item {
+ margin: 0 26rpx;
+ display: flex;
+ align-items: center;
+ padding-bottom: 29rpx;
+ padding-top: 29rpx;
}
- .head_top {
- position: absolute;
+ .section .cover {
+ width: 150rpx;
+ height: 150rpx;
+ border-radius: 8px;
+ }
+
+ .section .info {
+ flex: 1;
+ padding-left: 30rpx;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+
+ .section .title {
width: 100%;
- padding-top: var(--status-bar-height);
- height: 30px;
- line-height: 30px;
- color: #FFFFFF;
+ font-size: 26rpx;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ }
+
+ .vender .list .describe {
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .section .describe {
+ margin-top: 20rpx;
+ font-size: 24rpx;
+ color: #999999;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
+ }
+
+ .section .price {
+ color: #F6220C;
+ font-size: 24rpx;
+ }
+
+ .section .price .num {
+ padding: 0 4rpx;
font-size: 32rpx;
- z-index: 2;
+ }
+
+ .section .level-box {
+ margin-top: 20rpx;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .section .level-box .key {
+ font-size: 24rpx;
+ color: #999999;
+ }
+
+ .section .level-box .num-wrap {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ }
+
+ .section .level-box .icon-box {
+ width: 33rpx;
+ height: 33rpx;
+ border: 1px solid #c5c5c5;
+ background: #f2f2f2;
+ }
+
+ .section .level-box .icon-box .gray {
+ color: #cccccc;
+ }
+
+ .section .level-box .icon-box .gray3 {
+ color: #333333;
+ }
+
+ .section .level-box .text-wrap {
+ margin: 0 20rpx;
+ height: 33rpx;
+ border: none;
+ background: none;
+ }
+
+ .section .level-box .text-wrap input {
+ padding: 0 4rpx;
+ height: 33rpx;
+ line-height: 1;
+ width: 40rpx;
+ font-size: 32rpx;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ min-height: 33rpx;
+ }
+
+ .button-box {
+ margin: 0 26rpx;
+ background: #f5f5f5;
+ border-radius: 8rpx;
+ }
+
+ .icon-box.active text {
+ color: #F6220C;
}
.reg180 {
@@ -153,40 +431,31 @@
}
.icon-jiantou {
+
color: #FFFFFF;
font-size: 30rpx;
}
- .banner-fill {
- height: 200rpx;
- }
-
- .form-wrap {
- .form-item {
- display: flex;
- align-items: center;
- padding: 30rpx 0;
-
- .field-name {
- width: 150rpx;
- color: #333;
- }
-
- input {
- height: 50rpx;
- line-height: 50rpx;
- }
- }
- }
-
- .btn-gcred {
+ .head_top {
+ position: absolute;
width: 100%;
- height: 88rpx;
- line-height: 88rpx;
- border-radius: 44rpx;
- background: #FF5649;
- border-color: #FF5649;
- color: #fff;
+ height: 30px;
+ line-height: 30px;
+ color: #FFFFFF;
font-size: 32rpx;
+ z-index: 2;
}
-</style>
\ No newline at end of file
+
+ .apply-box {
+ padding-top: 260rpx;
+ position: relative;
+ }
+
+ .bottom-banner {
+ width: 100%;
+ }
+
+ .bottom-banner image {
+ width: 100%;
+ }
+</style>
--
Gitblit v1.9.2