<template>
|
<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">{{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="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="bottom-banner d-c-c d-c" v-if="bottom_background!=''">
|
<image :src="bottom_background" mode="widthFix"></image>
|
</view>
|
</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>
|
<view class="ww100 pt20 d-c-c">
|
<button type="primary" class="btn-red" @click="isPopup=false">我已阅读</button>
|
</view>
|
</Popup>
|
</view>
|
</template>
|
|
<script>
|
import Popup from '@/components/uni-popup.vue'
|
export default {
|
components: {
|
Popup
|
},
|
data() {
|
return {
|
/*是否加载完成*/
|
loadding: true,
|
/*弹窗是否打开*/
|
isPopup: false,
|
/*是否阅读了规则*/
|
is_read:false,
|
agreement: '',
|
is_applying: false,
|
referee_name:'',
|
words:{},
|
is_bonus:'',
|
/*顶部背景*/
|
top_background: '',
|
/*小程序订阅消息*/
|
temlIds: [],
|
productList: [],
|
bottom_background: '',
|
product_id: '',
|
product_sku_id: '',
|
title: ''
|
}
|
},
|
mounted() {
|
/*数据*/
|
this.getData();
|
},
|
methods: {
|
/*获取数据*/
|
getData() {
|
let self = this;
|
uni.showLoading({
|
title: '加载中'
|
})
|
self._get('plus.vip.apply/apply', {
|
platform: self.getPlatform(),
|
referee_id: uni.getStorageSync('referee_id')
|
}, function(res) {
|
uni.hideLoading();
|
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({});
|
}
|
});
|
},
|
|
/*购买商品*/
|
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() {
|
uni.navigateBack();
|
}
|
}
|
}
|
</script>
|
|
<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;
|
}
|
|
.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%;
|
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;
|
}
|
|
.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 {
|
padding-right: 20rpx;
|
text-align: right;
|
transform: rotateY(180deg);
|
position: absolute;
|
bottom: 0;
|
}
|
|
.icon-jiantou {
|
|
color: #FFFFFF;
|
font-size: 30rpx;
|
}
|
|
.head_top {
|
position: absolute;
|
width: 100%;
|
height: 30px;
|
line-height: 30px;
|
color: #FFFFFF;
|
font-size: 32rpx;
|
z-index: 2;
|
}
|
|
.apply-box {
|
padding-top: 260rpx;
|
position: relative;
|
}
|
|
.bottom-banner {
|
width: 100%;
|
}
|
|
.bottom-banner image {
|
width: 100%;
|
}
|
</style>
|
