TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

merge

Browse Source
This commit is contained in:
唐明明
2021-09-18 15:19:56 +08:00
parent 7ebb45e5ab f7fc27944d
commit d8d5766c86
44 changed files with 3939 additions and 507 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
pages/goods/details.vue
View File

@@ -129,9 +129,13 @@
{{item.time.interval}}
</view>
</view>
<view class="coupons-right" @click="drawCoupons(item.coupon_id)">
<view v-if="item.can.get" class="coupons-right" @click="drawCoupons(item.coupon_id, index)">
领取
</view>
<view v-else class="coupons-right coupons-right-active">
已领取
</view>
</view>
</view>
<view class="coupons-true" @click="couponsClose">
@@ -180,13 +184,13 @@
};
},
created() {
goods(this.$Route.query.id || 9).then(res=>{
goods(this.$Route.query.id).then(res=>{
this.loding = false
this.goodsObj = res
this.identity = res.identity.id || ''
this.company = res.company
this.couponSee= res.coupons.slice(0, 3)
this.coupons = res.coupons
this.couponSee= res.coupons.slice(0, 3)
this.coupons = res.coupons
})
},
methods:{
@@ -243,7 +247,11 @@
return
}
managesCoupons(id).then(res=>{
console.log(res)
uni.showToast({
title: '领取成功',
type: 'primary',
duration: 3000
})
}).catch(err => {
uni.showToast({
icon : 'none',
@@ -692,6 +700,10 @@
border-radius: 80rpx;
font-size: 24rpx;
line-height: 52rpx;
&.coupons-right-active {
background-color: #adadad;
color: #FFFFFF;
}
}
}
}

217
pages/property/coupon/canUseList.vue Normal file
View File

@@ -0,0 +1,217 @@
<template>
<view class="can-use-list">
<view v-for="(item,index) in lists" v-if="lists.length>0" :key="index" style="padding: 0 30rpx;">
<view class="goods-item">
<image class="goods-img" hover-class="none" mode="aspectFill" @click="goDetail(item.goods_id)"
:src="item.cover" />
<view class="goods-info">
<view class="goods-title ellipsis-2">{{item.name}}</view>
<view class="flexrow">
<view class="goods-price"><span>￥</span>{{item.price}}/权证</view>
<view :class="['right',selectSkuId===item.goods_sku_id?'selcetRight':'']"
@click="selectSkuId = item.goods_sku_id"> 兑换该商品</view>
</view>
</view>
</view>
</view>
<!-- 没有收藏的店铺 -->
<no-list name='no-goods' v-else txt="没有任何可兑换商品~" />
<view class="nowExchange" ><view class="btn" @click="verifiyCoupon('post')">确认兑换</view></view>
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
scanInfo
} from '@/apis/interfaces/scan'
export default {
data() {
return {
lists: [],
page: 1,
exchangeShow: false, // false不显示立即兑换按钮
has_more: true,
code: '',
selectSkuId: ''
};
},
onLoad(e) {
if (e.code) {
this.code = e.code
}
this.verifiyCoupon('get')
},
methods: {
// 获取列表
verifiyCoupon(method) {
let apiUrl = 'coupons/verify/coupon'
let data = {
code: this.code
}
if(method === 'post'){
data.goods_sku_id = this.selectSkuId
}
scanInfo(apiUrl, data, method).then(res => {
console.log(res)
if(method === 'get'){
this.lists = res.goods
}else{
this.$refs.uToast.show({
title: '优惠券核销成功',
type: 'error',
icon: false,
duration: 3000
})
setTimeout(res=>{
uni.navigateBack({})
},3000)
}
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'error',
icon: false,
duration: 3000
})
})
},
goDetail(id) {
console.log(id)
uni.navigateTo({
url: '/pages/goods/details?id=' + id
})
}
}
}
</script>
<style lang="scss" scoped>
.can-use-list {
padding-bottom: 120rpx;
}
.goods-item {
width: calc(100% - 20rpx);
box-shadow: 0 0 20rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
border-radius: 16rpx;
// margin-left: 20rpx;
margin: 40rpx 0 0 20rpx;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
position: relative;
.exchange {
position: absolute;
bottom: 30rpx;
right: 30rpx;
padding: 6rpx 16rpx;
border-radius: 20rpx 0 20rpx 0;
background-color: $main-color;
color: #fff;
font-size: 20rpx;
z-index: 1;
}
.goods-img {
width: 180rpx;
height: 180rpx;
position: relative;
top: 0;
left: -20rpx;
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
border-radius: 8rpx;
}
.goods-info {
flex: 1;
height: 180rpx;
padding: 20rpx 20rpx 20rpx 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-around;
box-sizing: border-box;
.goods-title {
width: 100%;
font-size: 28rpx;
}
.goods-price {
color: #039bfe;
padding-top: 10rpx;
font-weight: bold;
font-size: 32rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
span {
font-size: 26rpx;
// padding-right: 10rpx;
font-weight: normal;
&:nth-child(2) {
padding-left: 30rpx;
}
}
}
}
}
.flexrow {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.right {
padding: 20rpx 20rpx;
border-radius: 20rpx;
background-color: #cacaca;
color: #666;
}
.selcetRight {
background-color: #039bfe;
color: #fff;
font-weight: bold;
}
}
.nowExchange {
height: 90rpx;
background-color: #fff;
position: fixed;
bottom: 40rpx;
width: 100%;
padding:20rpx 30rpx;
.btn {
background-color: #039bfe;
font-size: 34rpx;
font-weight: bold;
color: #FFF;
padding: 20rpx 30rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 8rpx;
}
}
</style>

10
pages/property/coupon/detail.vue
View File

@@ -38,7 +38,7 @@
<view class="showCode " v-if="showCode">
<view class="showCodeBg" @click="showCode = false"></view>
<view :class="['showCodeContent', showCode?'showCodeContentSelect':'showCodeContentSelectNo']">
<view class="showCodeTitle">商品兑换码</view>
<view class="showCodeTitle">优惠券兑换码</view>
<image :src="code" mode="widthFix"></image>
</view>
</view>
@@ -70,6 +70,14 @@
this.coupon_grant_id = e.id
this.getList()
},
// 监听弹窗页面为false时候，重新请求当前页面
watch: {
showCode(newVal, oldVal) {
if(!newVal && oldVal){
uni.setStorageSync('refresh',true)
}
}
},
methods: {
// 获取列表
getList() {

10
pages/property/order/numberWeightInfo.vue
View File

@@ -155,6 +155,15 @@
this.getInfo(e.symbol)
// this.getInfo('G22S20')
},
// 监听弹窗页面为false时候，重新请求当前页面
watch: {
showCode(newVal, oldVal) {
if(!newVal && oldVal){
this.getInfo(this.symbol)
uni.setStorageSync('refresh',true)
}
}
},
methods: {
getInfo(symbol) {
mallWarrantsList(symbol).then(res => {
@@ -174,6 +183,7 @@
duration: 3000
})
setTimeout(res => {
uni.setStorageSync('refresh',true)
uni.navigateBack({})
}, 2000)
})

85
pages/property/setting/setting.vue
View File

@@ -59,11 +59,6 @@
}
},
onShow() {
wx.login({
success: res => {
this.loginCode = res.code
}
})
this.getUserInfo()
},
onPullDownRefresh() {
@@ -85,86 +80,6 @@
})
})
},
// 点击绑定用户得授权信息，且绑定带修改
getUser() {
uni.getUserProfile({
desc: "获取你的昵称、头像、地区及性别",
success: e => {
console.log(e)
if (e.errMsg == "getUserProfile:ok") {
this.userInfo = e.userInfo
// // 检查用户登录Code是否过期
wx.checkSession({
success: res => {
this.userLogin(e)
},
fail: err => {
// 登录过期重新获取code
uni.login({
success: res => {
this.loginCode = res.code
// 登录
this.userLogin()
}
})
}
})
} else {
uni.showToast({
duration: 1500,
title: "绑定手机号失败了",
icon: 'none'
})
}
},
fail() {
uni.showToast({
duration: 1500,
title: "您拒绝了请求",
icon: 'none'
})
}
})
},
// 登陆接口
userLogin(info) {
let that = this
uni.login({
success: res => {
let data = {
iv: info.iv,
encryptedData: info.encryptedData,
code: res.code
}
uni.showLoading({
title: '绑定中'
})
wechatbind(data).then(res => {
setTimeout(res => {
uni.hideLoading()
}, 1000)
this.$refs.uToast.show({
title: '绑定成功',
type: 'primary',
duration: 3000
})
setTimeout(res => {
this.getUserInfo()
}, 3000)
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
uni.hideLoading()
})
},
fail: () => {},
complete: () => {}
});
},
loginOut() {
uni.removeStorageSync('token')
uni.reLaunch({

84
pages/store/Spread.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<view class="content">
<view class="codeContent">
<image class="codeContent-back" src="../../static/icons/store_codeBack.png" mode="widthFix"></image>
<view class="company">
<image class="company-logo" src="../../static/dev/good_cover_00.jpg" mode="aspectFill"></image>
<view class="company-cont">
<view class="company-name">如朗科技</view>
<view class="company-name">邀请你加入易货平台</view>
</view>
</view>
<image class="codeContent-code" src="../../static/dev/good_cover_03.jpg" mode="aspectFit"></image>
</view>
<view class="codeBnt">
<image class="codeBnt-img" src="../../static/icons/store_down.png" mode="aspectFill"></image>
保存图片
</view>
</view>
</template>
<script>
import { companiesCode } from '@/apis/interfaces/store'
export default {
data() {
return {
codeImg: ''
}
},
created() {
// companiesCode().then(res=>{
// this.codeImg = res
// })
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.content {
background-color: #e1293f;
height: 100vh;
width: 100vw;
padding: 80rpx;
box-sizing: border-box;
}
.codeContent {
position: relative;
width: 100%;
.codeContent-back {
width: 100%;
height: 100%;
z-index: 1;
position: absolute;
box-shadow: 0 0 20rpx rgba(115,0,4,.3);
}
.company {
position: absolute;
width: 100%;
}
}
.codeBnt {
background-color: #FFFFFF;
text-align: center;
border-radius: 10rpx;
line-height: 90rpx;
font-weight: 600;
font-size: $title-size;
color: #e1293f;
margin-top: 160rpx;
box-shadow: 4rpx 0 10rpx rgba(155,0,19,.5);
position: relative;
.codeBnt-img {
position: absolute;
top: 0;
width: 60rpx;
height: 60rpx;
left: 24%;
}
}
</style>

1
pages/store/index.vue
View File

@@ -268,6 +268,7 @@
display: inline-block;
border-radius: 0 60rpx 60rpx 0;
position: relative;
text-transform: uppercase;
.btn-img {
position: absolute;
width: 38rpx;

402
pages/verification/index.vue
View File

@@ -1,34 +1,402 @@
<template>
<view class="Verification">
<image src="/static/images/hexiao_bg.png" mode="widthFix" />
<view class="">
<view class="">扫描券码和权证 一键核销</view>
<view class="">降低核销门槛 低成本留存优质客户</view>
<image class="top-img" src="/static/images/hexiao_bg.png" mode="widthFix" />
<view class="txt">
<view class="title">扫描券码和权证 一键核销</view>
<view class="des">降低核销门槛 <span class='dian'>·</span>低成本留存优质客户</view>
</view>
<view class="btn">
<view class="goods" @click="scanCode('goods','get')"> 权证核销 </view>
<view class="coupons" @click="scanCode('coupons','get')"> 优惠券核销 </view>
</view>
<view class="history">核销记录</view>
<u-toast ref="uToast" />
<!-- 二维码展示动画效果 -->
<view class="showCode " v-if="showCode">
<view class="showCodeBg" @click="showCode = false"></view>
<view :class="['showCodeContent', showCode?'showCodeContentSelect':'showCodeContentSelectNo']">
<view class="showCodeTitle"> {{scanType === 'goods'?'确认核销该权证':'确认核销该优惠券'}}</view>
<view class="goodsInfo" v-if="scanType === 'goods'">
<image class="left" :src="info.goods.cover" mode="widthFix" />
<view class="right">
<view class="title ellipsis-2">{{info.goods.goods_name}}</view>
<view class="number">核销数量: X {{info.qty}}</view>
</view>
</view>
<view class="goodsInfo" v-else>
<view class="right">
<view class="title ellipsis-2">优惠券名称：‘ {{info.coupon.title}} ’</view>
<view class="number">
优惠券类型：{{info.coupon.type.text}}
<span style='padding-left: 20rpx;'>数量：1</span>
</view>
<view class="number">备注：{{info.coupon.remark}}</view>
</view>
</view>
<view class="sureVer" @click="scanInfo(code,'post',)">确认核销</view>
<view class="showCodeDes">请谨慎核销,操作成功后无法撤回</view>
</view>
</view>
</view>
</template>
<script>
import {
scanInfo
} from '@/apis/interfaces/scan'
export default {
data() {
return {
scanType: 'goods', // coupons 优惠券核销 goods 权证核销
showCode: false,
info: '', // 权证核销返回前置
code: '', // 扫码返回的code
};
},
onLoad() {
uni.hideLoading()
},
methods: {
scanCode(e) {
console.log(e)
this.scanType = e
uni.scanCode({
success: (res) => {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
// uni.showLoading({
// title: '核销请求中..'
// })
this.code = res.result
this.scanInfo(res.result, 'get')
}
});
},
// 请求核销前置，优惠券前置和权证前置
scanInfo(token, method) {
console.log(token, this.scanType)
let apiUrl = ''
let data = {
code: token
}
if (this.scanType === 'goods') {
console.log('权证核销')
apiUrl = 'manages/warrants/verification'
} else {
console.log('优惠券核销！')
apiUrl = 'coupons/verify/coupon'
}
scanInfo(apiUrl, data, method).then(res => {
if (this.scanType === 'goods') {
uni.hideLoading()
if (method === 'post') {
this.showCode = false
this.$refs.uToast.show({
title: '权证核销成功',
type: 'error',
icon: false,
duration: 3000
})
} else {
this.showCode = true
this.info = res
}
} else {
console.log('优惠券核销 有商品跳转优惠券详情页面，没有商品直接弹出核销页面！')
console.log(res, 'res')
if (method === 'post') {
this.showCode = false
this.$refs.uToast.show({
title: '优惠券核销成功',
type: 'error',
icon: false,
duration: 3000
})
} else {
if (res.goods.length > 0) {
uni.showModal({
title: '温馨提示',
content: '该优惠券下绑定了商品，是否勾选相应商品',
success: (res1) => {
if (res1.confirm) {
uni.navigateTo({
url:'/pages/property/coupon/canUseList?code='+this.code
})
} else {
this.showCode = true
this.info = res.info
}
}
})
} else {
this.showCode = true
this.info = res.info
}
}
}
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'error',
icon: false,
duration: 3000
})
this.showCode = false
})
}
}
}
</script>
<style lang="scss">
.Verification{
width: 100%;
height: 100vh;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.Verification {
width: 100%;
min-height: 100vh;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
.top-img {
margin-top: 100rpx;
}
.txt {
padding-top: 120rpx;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
.title {
font-size: 42rpx;
font-weight: 500;
}
.des {
font-size: 34rpx;
color: rgba($color: #255a7c, $alpha: .4);
padding-top: 20rpx;
font-weight: bold;
.dian {
color: #039bfe;
padding: 0 10rpx;
}
}
}
.btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin-top: 140rpx;
.goods,
.coupons {
width: 310rpx;
height: 90rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 8rpx;
border: solid 1rpx #039bfe;
color: #039bfe;
font-size: 34rpx;
font-weight: bold;
}
.coupons {
background-color: #039bfe;
color: #fff;
margin-left: 30rpx;
}
}
.history {
text-align: center;
padding: $padding;
width: 100%;
color: #cacaca;
}
}
// 动画效果
.showCode {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
z-index: 1;
.showCodeBg {
background-color: rgba($color:#000, $alpha: 0.3);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.showCodeContentSelect {
animation: sk-foldCubeAngle .6s linear both;
}
.showCodeContentSelectNo {
animation: sk-foldCubeAngleNo .6s linear both;
}
.showCodeContent {
padding: 50rpx 30rpx 30rpx 30rpx;
width: 640rpx;
min-height: 500rpx;
background-color: #fff;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 30rpx;
position: relative;
z-index: 199;
image {
width: 60%;
}
.showCodeTitle {
font-weight: bold;
padding-bottom: 20rpx;
font-size: 40rpx;
margin-bottom: 20rpx;
margin-top: 30rpx;
}
.goodsInfo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
margin: $margin;
// background-color:red;
.left {
width: 200rpx;
height: 200rpx;
margin-right: 20rpx;
border-radius: 2rpx;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
box-sizing: border-box;
.title {
font-size: 30rpx;
font-weight: bold;
}
.number {
padding-top: 10rpx;
color: #999;
}
}
}
.sureVer {
background-color: #039bfe;
width: 500rpx;
height: 90rpx;
border-radius: 8rpx;
color: #fff;
margin: 30rpx 0;
font-size: 40rpx;
font-weight: bold;
text-align: center;
line-height: 90rpx;
}
.showCodeDes {
padding: 20rpx 0 20rpx 0;
color: gray;
font-size: 24rpx;
}
}
@keyframes sk-foldCubeAngle {
0% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
100% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
}
@keyframes sk-foldCubeAngleNo {
0% {
transform: scale(1);
opacity: 1;
}
25% {
transform: scale(0);
opacity: 0;
}
}
@keyframes turn {
0% {
-webkit-transform: rotate(0deg);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg);
opacity: .9;
}
50% {
-webkit-transform: rotate(180deg);
opacity: .8;
}
75% {
-webkit-transform: rotate(270deg);
opacity: .9;
}
100% {
-webkit-transform: rotate(360deg);
opacity: 1;
}
}
}
</style>

39
pages/vip/agree.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<view>
<view class="contentTitle">
<rich-text :nodes="content"></rich-text>
</view>
</view>
</template>
<script>
import { userAgree } from '@/apis/interfaces/vip'
export default {
data() {
return {
content: ''
}
},
created() {
userAgree().then(res => {
console.log(res.content)
this.content = res.content
}).catch(err =>{
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.contentTitle {
padding: $padding;
box-sizing: border-box;
}
</style>

480
pages/vip/index.vue
View File

@@ -1,30 +1,108 @@
<template>
<!-- v-if="!loding" -->
<view class="content">
<!-- <swiper class="vip-container" previous-margin="45rpx" next-margin="45rpx" circular @change="swiperChange">
<swiper-item class="vip-item">
<view>
VIP企业会员
<swiper class="vip-container" previous-margin="45rpx" next-margin="45rpx" circular @change="swiperChange">
<swiper-item class="swiper-item" v-for="(item, index) in identities" :key="index">
<view class="vip-item" :class="tabsIndex == index ? 'color-item-img' : ''">
<view class="vip-top">
<view class="vip-name">
<image class="vip-name-icon" src="../../static/icons/vip_icon.png" mode="aspectFill"></image>
{{item.name}}
</view>
<view class="vip-price">
{{identities[tabsIndex].price}}/年
</view>
</view>
<view class="vip-time">
{{identityTime}}
</view>
</view>
</swiper-item>
<swiper-item class="vip-item">
<view>
普通会员
</view>
</swiper-item>
<swiper-item class="vip-item">
<view>
超级会员
</view>
</swiper-item>
</swiper> -->
</swiper>
<!-- 轮播点 -->
<view class="vip-spot">
<view class="vip-spot-label" :class="tabsIndex == index ? 'vip-spot-color' : ''" v-for="(item, index) in identities" :key="index"></view>
</view>
<!-- 选择开通年限 -->
<view class="vip-years">
<view class="vip-years-name">
<image class="vip-years-icon" src="../../static/icons/vip_yearsIcon.png" mode="aspectFill"></image>
选择开通年限
</view>
<view class="vip-years-tool">
<view class="vip-years-btn" @click="yearsBtn('remove')">-</view>
<view class="vip-years-input">{{sumNumber}}</view>
<view class="vip-years-btn" @click="yearsBtn('plus')">+</view>
</view>
</view>
<!-- 会员特权 -->
<view class="privilege">
<image class="privilege-img" src="../../static/icons/vip_privilege_tittle.png" mode="heightFix"></image>
<view class="privilege-list">
<view class="privilege-label" v-for="(item, index) in rights" :key="index">
<image class="privilege-label-tips" src="../../static/icons/vip_privilege_tips.png" mode="heightFix"></image>
<view class="privilege-label-text">
{{item.name}}
</view>
</view>
</view>
</view>
<!-- 支付方式 -->
<view class="privilege payWay">
<image class="privilege-img" src="../../static/icons/vip_pay_title.png" mode="heightFix"></image>
<view class="payWay-way">
<radio-group @change="radioChange">
<view class="payWay-way-label">
<view class="payWay-way-name">
<image class="payWay-way-img" src="../../static/icons/payWay_icon_00.png"></image>
<text>微信支付</text>
</view>
<radio class="radio" value="weChat" checked style="transform: scale(.8);" color="#ff2828"></radio>
</view>
<view class="payWay-way-label">
<view class="payWay-way-name">
<image class="payWay-way-img" src="../../static/icons/payWay_icon_01.png"></image>
<text>余额支付</text>
</view>
<radio class="radio" value="balance" style="transform: scale(.8);" color="#9b9b9b"></radio>
</view>
</radio-group>
</view>
</view>
<!-- 用户协议 -->
<view class="agree">
<view class="agree-tips" @click="$Router.push({name: 'vipAgree'})">
请仔细阅读并确认服务协议
</view>
</view>
<view class="agree-btn" @click="agreeChange">
<radio :checked="selected" style="transform: scale(.7);" color="#ff2828"></radio>会员服务协议
</view>
<!-- 开通按钮 -->
<view class="footer">
<button class="footer-btn" type="default" @click="openOrder" :disabled="payChecked">
<view class="footer-btn-num">
合计：{{total}}
</view>
<view class="footer-btn-pay">
立即支付
</view>
</button>
</view>
<!-- 会员类型 -->
<view class="tabs">
<!-- <view class="tabs">
<view class="item" :class="{'show': index === tabsIndex}" v-for="(item, index) in identities" :key="index" @click="onTabs(index)">{{item.name}}</view>
</view>
</view> -->
<!-- 会员信息 -->
<view class="cards">
<!-- <view class="cards">
<view class="card">
<view class="card-content">
<image class="cover" src="@/static/dev/good_cover_01.png" mode="aspectFill"></image>
@@ -35,9 +113,9 @@
</view>
<view class="cards-back"></view>
<image class="cards-angle" src="@/static/imgs/vip-angle-back.png" mode="widthFix"></image>
</view>
</view> -->
<!-- 会员权限 -->
<view class="privilege">
<!-- <view class="privilege">
<view class="title">开通会员享特权</view>
<view class="privilege-box">
<view class="item" v-for="(item, index) in rights" :key="index" @click="showRemark(item.name, item.remark)">
@@ -45,23 +123,23 @@
<view class="text">{{item.name}}</view>
</view>
</view>
</view>
</view> -->
<!-- 会员 -->
<view class="footer">
<!-- <view class="footer">
<button class="footer-btn" type="default" @click="openOrder">￥{{identities[tabsIndex].price}}/年&nbsp;开通</button>
</view>
</view> -->
<!-- 会员服务信息 -->
<view class="notice">
<!-- <view class="notice">
<view class="title">开通须知</view>
<view class="item">
<text>{{description}}</text>
</view>
</view>
</view> -->
</view>
</template>
<script>
import { identities, vipOrder, vipWechatPay } from '@/apis/interfaces/vip'
import { identities, vipOrder, vipWechatPay, vipCont } from '@/apis/interfaces/vip'
export default {
data() {
return {
@@ -70,43 +148,63 @@
user : {},
identities : [],
rights : [],
description : ''
description : '',
identityTime: '', // 到期时间
valuePay : 'weChat', // 支付方式
sumNumber : 1, // 开通年限
total : '', // 开通年限总资金额
selected : false, // 用户协议
payChecked : false // 支付选择
}
},
created() {
// 获取当前用户信息
identities().then(res => {
this.loding = false
this.user = res.user
this.description= res.description
this.identities = res.identities
this.rights = res.identities[0].rights
this.total = res.identities[0].price
}).catch(err =>{
uni.showToast({
title: err.message,
icon : 'none'
})
})
// 获取支付总金额 默认传VIP会员id=2
this.totalData(2);
},
methods: {
// 切换开通身份
onTabs(index){
if(this.tabsIndex === index) return
this.tabsIndex = index
this.rights = this.identities[index].rights
},
// 会员权益介绍
showRemark(title, text){
uni.showModal({
title : title + '说明',
content : text,
showCancel : false
})
},
// onTabs(index){
// if(this.tabsIndex === index) return
// this.tabsIndex = index
// this.rights = this.identities[index].rights
// },
// 切换开通身份
swiperChange(e) {
this.tabsIndex = e.detail.current
this.total = this.identities[e.detail.current].price
this.sumNumber = 1
this.totalData(this.identities[e.detail.current].identity_id);
},
// 开通会员
openOrder(){
if(this.selected == false) {
uni.showToast({
title: '请勾选用户协议',
icon : 'none'
})
return
}
let identitiesId = this.identities[this.tabsIndex].identity_id
vipOrder(identitiesId).then(res => {
console.log(res.test)
vipOrder(identitiesId,{
year: this.sumNumber
}).then(res => {
if(!res.test){
let verifyForm = res
this.wechatPay(res.id)
@@ -137,6 +235,40 @@
})
})
},
// 选择权限
yearsBtn(val) {
let newNumber = this.sumNumber
if (val == 'plus'){
newNumber ++;
}else{
if (newNumber > 1){
newNumber --;
}else{
uni.showToast({
title : '商品数量不能小于1',
icon : 'none'
})
}
}
this.sumNumber = newNumber
this.totalData(this.identities[this.tabsIndex].identity_id);
},
// 支付总金额数据
totalData(id) {
vipCont(id,{
year: this.sumNumber
}).then(res => {
this.identityTime = res.identity.description
this.total = res.identity.price
}).catch(err =>{
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 微信支付
wechatPay(id){
@@ -154,7 +286,35 @@
}
})
})
}
},
// 支付选择
radioChange(val) {
let valuePay = val.detail.value
if( val.detail.value == 'balance') {
uni.showToast({
title: '抱歉暂未开通',
icon : 'none'
})
this.payChecked = true
return
}
this.payChecked = false
},
// 勾选协议
agreeChange() {
this.selected = !this.selected
},
// 会员权益介绍
showRemark(title, text){
uni.showModal({
title : title + '说明',
content : text,
showCancel : false
})
}
}
}
</script>
@@ -164,20 +324,213 @@
background-color: #FFFFFF;
}
// 新增样式
.vip-container {
width: 750rpx;
height: 350rpx;
.vip-item {
background-color: #c8c8c8;
border-radius: 20rpx;
height: 300rpx;
margin-top: $margin;
}
.swiper-item {
width: 630rpx;
height: 280rpx;
display: flex;
}
.vip-item {
width: 630rpx;
height: 280rpx;
border-radius: 20rpx;
background-color: #c8c8c8;
padding: 0 40rpx;
box-sizing: border-box;
.vip-top {
display: flex;
position: relative;
height: 80rpx;
line-height: 80rpx;
margin: $margin + 20 0 $margin + 20;
.vip-name {
font-size: $title-size + 6;
border-radius: 60rpx;
padding: 0 $padding;
box-sizing: border-box;
background-image: linear-gradient(to right, #f11a22, #ff252f);
display: flex;
.vip-name-icon {
width: 50rpx;
height: 50rpx;
margin: $margin - 15 $margin - 10 0 0;
}
}
.vip-price {
font-size: $title-size + 10;
font-weight: 600;
position: absolute;
right: 0;
top: 0;
}
}
.vip-time {
font-size: $title-size-lg;
text-align: center;
}
}
.content{
min-height: 100vh;
background: #fefaef;
}
.color-item-img {
background-color: #ff252f;
color: #FFFFFF;
box-shadow: 0 0 20rpx rgba(145,196,255,.5);
}
// 轮播点
.vip-spot {
margin-bottom: $margin;
text-align: center;
.vip-spot-label {
display: inline-block;
background-color: #e8ecf1;
width: 80rpx;
height: 8rpx;
margin: 0 10rpx;
&.vip-spot-color {
background-color: #fb560a;
}
}
}
// 选择年限
.vip-years {
display: flex;
line-height: 60rpx;
padding: $padding + 10 $padding + 20;
box-sizing: border-box;
border-top: $padding - 10 solid #f8fbfe;
border-bottom: $padding - 10 solid #f8fbfe;
.vip-years-name {
flex: 1;
display: flex;
color: #c8c8c8;
.vip-years-icon {
width: 60rpx;
height: 60rpx;
margin-right: 20rpx;
}
}
.vip-years-tool {
display: flex;
.vip-years-btn {
background-color: #ff9f43;
color: #ffffff;
border-radius: 10rpx;
width: 48rpx;
height: 48rpx;
line-height: 40rpx;
text-align: center;
border: 2rpx solid #f8fbfe;
font-size: $title-size + 4;
font-weight: 600;
}
.vip-years-input {
line-height: 48rpx;
padding: 0 $padding;
color: #000000;
}
}
}
// 会员特权
.privilege {
text-align: center;
.privilege-img {
height: 40rpx;
}
.privilege-list {
padding: 0 $padding;
box-sizing: border-box;
text-align: left;
margin-top: $margin;
.privilege-label {
border-bottom: 2rpx #e6eaef dashed;
font-size: $title-size;
padding: $padding + 10 0;
display: flex;
.privilege-label-tips {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
.privilege-label-text {
width: calc(100% - 60rpx);
}
}
}
}
// 支付方式
.payWay {
margin-top: $margin * 4;
.payWay-way {
padding: 0 $padding;
box-sizing: border-box;
margin-top: $margin;
.payWay-way-label {
display: flex;
border-bottom: 2rpx #e6eaef dashed;
padding: $padding 0;
.payWay-way-name {
font-size: $title-size;
line-height: 58rpx;
flex: 1;
display: flex;
.payWay-way-img {
width: 58rpx;
height: 58rpx;
margin-right: $margin - 10;
}
}
}
.radio[type="radio"].disabled {
background-color: #007aff;
border-color: #007aff;
color: #007aff;
&::before {
background-color: #007aff;
border-color: #007aff;
}
&::after {
background-color: #007aff;
border-color: #007aff;
}
}
}
}
// 用户协议
.agree {
margin: $margin 0;
text-align: center;
.agree-tips {
background-color: #999999;
display: inline-block;
padding: 14rpx $padding;
color: #FFFFFF;
border-radius: 60rpx;
}
}
.agree-btn {
display: flex;
font-size: $title-size-lg;
text-align: left;
color: #999999;
padding: $padding;
}
// .content{
// min-height: 100vh;
// background: #fefaef;
// }
// 开通须知
.notice{
font-size: $title-size-m;
@@ -195,16 +548,29 @@
}
// footer
.footer{
padding: $padding $padding*2;
padding: $padding;
box-sizing: border-box;
.footer-btn{
background-color: #201212;
padding: 0 $padding + 10;
box-sizing: border-box;
background-color: #ff2828;
height: 90rpx;
line-height: 90rpx;
padding: 0;
border-radius: 0;
color: #f7d79c;
border-radius: 60rpx;
color: #FFFFFF;
font-size: $title-size;
font-weight: bold;
text-align: left;
display: flex;
.footer-btn-num {
flex: 1;
}
.footer-btn-pay {
color: #f6ff00;
}
&[disabled] {
background-color: #b1b1b1;
}
}
}
// 会员权限