621 lines
14 KiB
Vue
621 lines
14 KiB
Vue
<template>
|
|
<view class="dealer-grade">
|
|
<view class="page-bg"></view>
|
|
<view class="header" :style="'margin-top: ' + statusBarHeight + 'px'"></view>
|
|
<view class="main-header">
|
|
<image class="bg-image" :src="bgImage" mode="scaleToFill"></image>
|
|
<!-- 用户信息 -->
|
|
</view>
|
|
<view class="main">
|
|
<!-- 表单信息 -->
|
|
<u--form :model="form" ref="uForm">
|
|
<view class="buy-user">
|
|
<view class="sub-name">{{ plan.subName }}</view>
|
|
<u-grid :border="false" col="3">
|
|
<u-grid-item v-for="(item,index) in plan.icons" :key="index">
|
|
<view class="demo-layout bg-purple-light">
|
|
<view class="icon">
|
|
<image :src="item.icon"></image>
|
|
</view>
|
|
<text class="name">{{ item.name }}</text>
|
|
</view>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</view>
|
|
<u-gap height="3"></u-gap>
|
|
<!-- 会员套餐 -->
|
|
<view class="buy-user" v-if="plan.price">
|
|
<view class="buy">
|
|
<view class="title">开通{{ plan.name }}</view>
|
|
<view class="total-price">{{ plan.price[0].name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="xieyi">
|
|
<u-icon name="checkbox-mark"></u-icon>
|
|
购买代表同意爱尚客网
|
|
<text @click="$push('pages/article/detail/detail?id=117')">《品牌合作协议》</text>
|
|
</view>
|
|
</u--form>
|
|
</view>
|
|
<view class="cart">
|
|
<view class="cart-info">
|
|
<view class="btn-wrapper">
|
|
<u-button text="立即开通" color="linear-gradient(to bottom, #010002, #681752)" :disabled="disabled"
|
|
shape="circle" @click="onBuy()"></u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 地址选择器 -->
|
|
<liu-customize-sel ref="area" @change="chooseSuccess"></liu-customize-sel>
|
|
<!-- 选择店铺 -->
|
|
<u-picker :show="showMerchant" :columns="merchantList" @confirm="confirmMerchant"
|
|
@cancel="showMerchant = false"></u-picker>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import store from '@/store/index.js'
|
|
import storage from '@/utils/storage'
|
|
import * as UserPlanApi from '@/api/love-user-plan.js'
|
|
import * as UserPlanLogApi from '@/api/love-user-plan-log.js'
|
|
import * as UserPlanEquityApi from '@/api/love-user-plan-equity.js'
|
|
import * as MerchantApi from '@/api/merchant.js'
|
|
import {
|
|
getUser,
|
|
updateUser
|
|
} from '@/api/user.js'
|
|
import {
|
|
username
|
|
} from '@/config.js';
|
|
import {
|
|
getMobile
|
|
} from '@/utils/util.js'
|
|
import http from '@/api'
|
|
|
|
const userId = uni.getStorageSync('userId')
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
storeVn: 0, // 当前待升级等级
|
|
planId: 0,
|
|
plan: {},
|
|
subPayPrice: 0, // 升级只需补差价
|
|
loading: true,
|
|
merchantList: [],
|
|
bgImage: 'data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.36308349769888226%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%221%22%20offset%3D%220.24%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23160028%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E',
|
|
statusBarHeight: 25,
|
|
// 是否已登录
|
|
isLogin: false,
|
|
disabled: false,
|
|
showMerchant: false,
|
|
// 系统设置
|
|
form: {
|
|
userId,
|
|
priceId: 0,
|
|
planId: 0,
|
|
area: '',
|
|
merchantName: ''
|
|
},
|
|
totalPrice: 0.00
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.planId = options.id
|
|
this.getUserInfo()
|
|
this.getMerchant()
|
|
this.getStroeVn()
|
|
// 设置navbar标题、颜色options
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#ffffff',
|
|
backgroundColor: '#101010'
|
|
})
|
|
},
|
|
onShow() {},
|
|
methods: {
|
|
// 跳转页面
|
|
navTo(url) {
|
|
this.$navTo(url)
|
|
},
|
|
getUserInfo() {
|
|
const {
|
|
form
|
|
} = this
|
|
const app = this
|
|
uni.getSystemInfo({
|
|
success(data) {
|
|
if (data) {
|
|
app.statusBarHeight = data.statusBarHeight + 50
|
|
}
|
|
}
|
|
})
|
|
getUser().then(res => {
|
|
if (res.code == 0 && res.data.username != 'www') {
|
|
if (res.data) {
|
|
console.log("res.data.phone: ", res.data.phone);
|
|
app.form.realName = res.data.realName
|
|
app.form.phone = res.data.phone
|
|
}
|
|
app.isLogin = true
|
|
} else {
|
|
app.isLogin = false
|
|
app.$push('pages/login/index')
|
|
}
|
|
})
|
|
|
|
},
|
|
getMerchant() {
|
|
const app = this
|
|
MerchantApi.listMerchant().then(result => {
|
|
let arr = []
|
|
result.data.map(d => {
|
|
console.log("d.merchantName: ", d.merchantName);
|
|
arr.push(d.merchantName)
|
|
})
|
|
app.merchantList.push(arr)
|
|
})
|
|
|
|
},
|
|
getStroeVn() {
|
|
const app = this
|
|
const {
|
|
userId
|
|
} = app.form
|
|
UserPlanEquityApi.listUserPlanEquity({
|
|
userId
|
|
}).then(result => {
|
|
const list = result.data
|
|
// 线上门店
|
|
const storeV1 = list.filter(d => d.planId == 19)
|
|
if(storeV1.length > 0){
|
|
// 升级差价
|
|
app.subPayPrice = 4999
|
|
}
|
|
if (storeV1.length == 0) {
|
|
app.storeVn = 19
|
|
storage.set('storeVn', 19)
|
|
app.getUserPlan()
|
|
return false
|
|
}
|
|
// 门店合伙人
|
|
const storeV2 = list.filter(d => d.planId == 20)
|
|
if (storeV2.length == 0) {
|
|
app.storeVn = 20
|
|
storage.set('storeVn', 20)
|
|
app.getUserPlan()
|
|
return false
|
|
}
|
|
// 门店运营总监
|
|
const storeV3 = list.filter(d => d.planId == 21)
|
|
if (storeV3.length == 0) {
|
|
app.storeVn = 21
|
|
storage.set('storeVn', 21)
|
|
app.getUserPlan()
|
|
return false
|
|
}
|
|
// 实体店
|
|
const storeV4 = list.filter(d => d.planId == 22)
|
|
if (storeV4.length == 0) {
|
|
app.storeVn = 22
|
|
storage.set('storeVn', 22)
|
|
app.getUserPlan()
|
|
return false
|
|
}
|
|
// 旗舰店
|
|
const storeV5 = list.filter(d => d.planId == 23)
|
|
if (storeV5.length == 0) {
|
|
app.storeVn = 23
|
|
storage.set('storeVn', 23)
|
|
app.getUserPlan()
|
|
return false
|
|
}
|
|
// 区县级运营中心
|
|
const storeV6 = list.filter(d => d.planId == 24)
|
|
if (storeV6.length == 0) {
|
|
app.storeVn = 24
|
|
storage.set('storeVn', 24)
|
|
app.getUserPlan()
|
|
return false
|
|
}
|
|
// 市级运营中心
|
|
const storeV7 = list.filter(d => d.planId == 25)
|
|
if (storeV7.length == 0) {
|
|
app.storeVn = 25
|
|
storage.set('storeVn', 25)
|
|
app.getUserPlan()
|
|
return false
|
|
}
|
|
// 省级运营中心
|
|
const storeV8 = list.filter(d => d.planId == 26)
|
|
if (storeV8.length == 0) {
|
|
app.storeVn = 26
|
|
storage.set('storeVn', 26)
|
|
app.getUserPlan()
|
|
return false
|
|
}
|
|
})
|
|
// app.loading = false
|
|
},
|
|
getUserPlan() {
|
|
const app = this
|
|
const {
|
|
storeVn,
|
|
planId
|
|
} = this
|
|
|
|
UserPlanApi.getUserPlan(planId > 0 ? planId : storeVn).then(res => {
|
|
app.plan = res.data
|
|
app.form.priceId = res.data.price[0].id
|
|
uni.setNavigationBarTitle({
|
|
title: res.data.name
|
|
})
|
|
})
|
|
},
|
|
onArea() {
|
|
this.$refs.area.open()
|
|
},
|
|
onMerchant() {
|
|
this.showMerchant = true
|
|
},
|
|
confirmMerchant(e) {
|
|
this.form.merchantName = e.value[0]
|
|
this.showMerchant = false
|
|
},
|
|
//地址选择成功
|
|
chooseSuccess(e) {
|
|
const app = this
|
|
const data = e.value
|
|
if (data) {
|
|
app.form.area = `${data[0].label} ${data[1].label} ${data[2].label}`
|
|
app.form.province = data[0].label
|
|
app.form.city = data[1].label
|
|
app.form.region = data[2].label
|
|
}
|
|
},
|
|
// 跳转到服务页面
|
|
handleService({
|
|
url
|
|
}) {
|
|
if (url.slice(0, 4) == 'http') {
|
|
wx.openCustomerServiceChat({
|
|
extInfo: {
|
|
url: 'https://work.weixin.qq.com/kfid/kfc1693a8d29b84bc5e'
|
|
},
|
|
corpId: 'ww1c3f872ba0a39228',
|
|
success(res) {}
|
|
})
|
|
return;
|
|
}
|
|
if (!this.isLogin) {
|
|
return false;
|
|
}
|
|
console.log("url: ", url);
|
|
this.$navTo(url)
|
|
},
|
|
// 显示toast信息
|
|
showToast(title, duration = 2000) {
|
|
this.$refs.uToast.show({
|
|
title,
|
|
duration
|
|
})
|
|
},
|
|
|
|
handleLogout() {
|
|
// http.setConfig((config) => {
|
|
// config.header = {};
|
|
// config.header = {
|
|
// AppId: appId,
|
|
// tenantId: tenantId
|
|
// };
|
|
// return config
|
|
// })
|
|
// uni.clearStorage()
|
|
// uni.clearStorageSync()
|
|
uni.redirectTo({
|
|
url: '/pages/login/index'
|
|
})
|
|
},
|
|
onBuy() {
|
|
const app = this
|
|
const {
|
|
form,
|
|
subPayPrice
|
|
} = this
|
|
console.log("this.plan: ",this.plan);
|
|
const planId = this.plan.planId
|
|
const priceId = this.plan.price[0].id
|
|
// app.disabled = true
|
|
return this.$push('sub_pages/checkout/checkout',{planId,subPayPrice})
|
|
|
|
// UserPlanLogApi.addUserPlanLog(form).then(res => {
|
|
|
|
// const orderInfo = res.data
|
|
// // 调起微信支付
|
|
// uni.requestPayment({
|
|
// provider: orderInfo.provider, // 服务提供商
|
|
// timeStamp: orderInfo.timeStamp, // 时间戳
|
|
// nonceStr: orderInfo.nonceStr, // 随机字符串
|
|
// package: orderInfo.package,
|
|
// signType: orderInfo.signType, // 签名算法
|
|
// paySign: orderInfo.paySign, // 签名
|
|
// success: function(res) {
|
|
// // 业务逻辑。。。
|
|
// app.$success('支付成功')
|
|
// setTimeout(function() {
|
|
// app.showEdit = false
|
|
// app.disabled = false
|
|
// uni.navigateBack()
|
|
// }, 1500);
|
|
// },
|
|
// fail: function(err) {
|
|
// console.log('支付失败', err);
|
|
// app.disabled = false
|
|
// }
|
|
// });
|
|
// })
|
|
},
|
|
|
|
onApply() {
|
|
if (!this.isLogin) {
|
|
return false;
|
|
}
|
|
this.$navTo('pages/wallet/balance/log')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dealer-grade {
|
|
background-color: #f3f3f3;
|
|
height: 100vh;
|
|
}
|
|
|
|
.page-bg {
|
|
width: 750rpx;
|
|
height: calc(100rpx + var(--status-bar-height));
|
|
display: block;
|
|
background-color: #101010;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -100;
|
|
}
|
|
|
|
// 页面头部
|
|
.main-header {
|
|
// background-color: #FBF7EF;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 360rpx;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.bg-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
}
|
|
}
|
|
|
|
.main {
|
|
position: fixed;
|
|
top: 80rpx;
|
|
left: 25rpx;
|
|
z-index: 999;
|
|
|
|
// 开通会员
|
|
.buy-user {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 20rpx auto 20rpx auto;
|
|
padding: 20rpx 0;
|
|
width: 700rpx;
|
|
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
|
border-radius: 24rpx;
|
|
background: #fff;
|
|
|
|
.sub-name {
|
|
text-align: center;
|
|
line-height: 3rem;
|
|
}
|
|
|
|
.item-equity {}
|
|
|
|
.buy {
|
|
padding: 0 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.demo-layout {
|
|
background-color: #ffffff;
|
|
margin: auto;
|
|
width: 200rpx;
|
|
color: #4c4c4c;
|
|
padding: 24rpx;
|
|
border-radius: 15rpx;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 25rpx;
|
|
|
|
.icon {
|
|
// background-color: gold;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 80rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
line-height: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 退出登录
|
|
.my-logout {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 50rpx;
|
|
|
|
.logout-btn {
|
|
width: 400rpx;
|
|
margin: 0 auto;
|
|
font-size: 28rpx;
|
|
color: #616161;
|
|
border-radius: 20rpx;
|
|
border: 1px solid #dcdcdc;
|
|
padding: 16rpx 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.price-box {
|
|
padding: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.info {
|
|
display: flex;
|
|
|
|
image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.content {
|
|
width: 280rpx;
|
|
padding-left: 30rpx;
|
|
font-size: 34rpx;
|
|
color: #ff0000;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
padding: 0 20rpx;
|
|
|
|
.reb {
|
|
color: #ff0000;
|
|
}
|
|
|
|
.num {
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xieyi {
|
|
width: 600rpx;
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 50rpx auto;
|
|
color: #999999;
|
|
|
|
text {
|
|
text-decoration: underline;
|
|
color: #681752;
|
|
}
|
|
}
|
|
|
|
.cart {
|
|
position: fixed;
|
|
bottom: 25rpx;
|
|
z-index: 888;
|
|
width: 750rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
|
|
.cart-info {
|
|
// background: linear-gradient(to bottom, $main-bg, $main-bg2);
|
|
// width: 700rpx;
|
|
margin: auto;
|
|
display: flex;
|
|
border-radius: 100rpx;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
|
|
.cart-logo {
|
|
position: absolute;
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
margin-left: 20rpx;
|
|
bottom: 10rpx;
|
|
}
|
|
|
|
|
|
.clear-cart {
|
|
color: #ff0000;
|
|
}
|
|
|
|
.buy {
|
|
margin-right: 8rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.custom-style {
|
|
padding: 0 50rpx;
|
|
color: #ffffff;
|
|
background-color: #ff0000;
|
|
background: linear-gradient(to bottom, $main-bg, $main-bg2);
|
|
// background-color: #681752;
|
|
border: none;
|
|
width: 330rpx;
|
|
height: 66rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.w-input {
|
|
text-align: right;
|
|
font-size: 25rpx;
|
|
color: #606266;
|
|
}
|
|
|
|
.btn-wrapper {
|
|
width: 360rpx;
|
|
margin: auto;
|
|
// display: flex;
|
|
// align-items: center;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.total-price {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #ff0000;
|
|
}
|
|
</style>
|