555 lines
16 KiB
Vue
555 lines
16 KiB
Vue
<template>
|
||
<view>
|
||
<z-paging ref="paging" v-model="dataList" @query="queryList">
|
||
<view slot="top" class="tab-top">
|
||
<u-tabs :list="tabList" @click="tabClick" :scrollable="false" lineColor="#111111"
|
||
:activeStyle="{color: '#303133',fontWeight: 700,transform: 'scale(1.05)',fontSize:'31rpx'}"
|
||
:inactiveStyle="{color: '#606266',transform: 'scale(1)',fontSize:'31rpx'}"
|
||
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
|
||
</view>
|
||
<view v-for="(item,index) in dataList" :key="index" style="">
|
||
<view class="data-list" @click="toDetailPages(item)">
|
||
<view class="f-jcsb data-list-header">
|
||
<view>{{item.intro}}</view>
|
||
<view class="data-list-state">{{item.status==0?"助力中":item.status==1?"助力完成":'助力失败'}}</view>
|
||
</view>
|
||
<view class="flex data-list-waist">
|
||
<image :src="item.cover" mode=""></image>
|
||
<view class="data-list-waist-cont">
|
||
<view class="data-list-waist-cont-name">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="data-list-waist-cont-label f-a-i">
|
||
<view v-for="(label,labelIndex) in item.labels" :key="labelIndex">{{label.value}}</view>
|
||
<view>快邀请好友</view>
|
||
<view>助力</view>
|
||
<!--<view>倒车</view>
|
||
<view>倒车像</view>
|
||
<view>倒车影像</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="data-list-leg f-jcsb">
|
||
<view class="f-a-i">
|
||
<image v-for="(imgItem,imgIndex) in item.userList"
|
||
:style="{marginLeft: imgIndex>1?'-8rpx':''}" :key="imgIndex" :src="imgItem.avatar"
|
||
mode=""></image>
|
||
<image style="margin-left: -8rpx;background: rgba(0, 0, 0, 0.3);"
|
||
src="@/static/images/app/mine/more.png" mode=""></image>
|
||
<view class="data-list-leg-num">{{item.userList.length}}人</view>
|
||
</view>
|
||
<!-- v-if="item.status==1&&!item.isCreateOrder" -->
|
||
<view v-if="item.status==1&&!item.isCreateOrder" @click.stop="topUpFn(item)">
|
||
<u-button color="#13AFA8" shape="circle"
|
||
:customStyle="{width: '160rpx', height: '56rpx', lineHeight: '56rpx',fontSize: '24rpx'}">提交订单</u-button>
|
||
</view>
|
||
<!-- v-if="item.status==1&&!item.isCreateOrder&&item.paid" -->
|
||
<view v-if="item.status==1&&!item.isCreateOrder&&item.paid" @click.stop="topOrderFn(item)">
|
||
<u-button color="#13AFA8" shape="circle"
|
||
:customStyle="{width: '160rpx', height: '56rpx', lineHeight: '56rpx',fontSize: '24rpx'}">查看订单</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</z-paging>
|
||
<!-- 支付方式 -->
|
||
<u-popup :show="topUpTypeShow" @close="topUpTypeClose" round="16" closeOnClickOverlay>
|
||
<view class="top-up-popup">
|
||
<view class="top-up-popup-allprice"> 合计：￥{{ payPrice }} </view>
|
||
<view class="top-up-popup-title">选择支付方式</view>
|
||
<view>
|
||
<view class="top-up-popup-type f-jcsb f-a-i" @click="actTypeFn('ye')">
|
||
<view class="f-a-i">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/serve/ye.png`" mode=""></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image src="@/static/images/app/serve/ye.png" mode=""></image>
|
||
<!-- #endif -->
|
||
<view class="top-up-popup-type-wx">余额支付</view>
|
||
</view>
|
||
<view class="f-a-i">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image v-if="topUpType=='ye'"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/serve/act.png`" mode=""></image>
|
||
<image v-else :src="`${config.aliyunOssUrl}/static/images/app/serve/act_no.png`" mode="">
|
||
</image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image v-if="topUpType=='ye'" src="@/static/images/app/serve/act.png" mode=""></image>
|
||
<image v-else src="@/static/images/app/serve/act_no.png" mode=""></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
<view class="top-up-popup-type f-jcsb f-a-i" @click="actTypeFn('wx')">
|
||
<view class="f-a-i">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/serve/wx.png`" mode=""></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image src="@/static/images/app/serve/wx.png" mode=""></image>
|
||
<!-- #endif -->
|
||
<view class="top-up-popup-type-wx">微信支付</view>
|
||
</view>
|
||
<view class="f-a-i">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image v-if="topUpType=='wx'"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/serve/act.png`" mode=""></image>
|
||
<image v-else :src="`${config.aliyunOssUrl}/static/images/app/serve/act_no.png`" mode="">
|
||
</image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image v-if="topUpType=='wx'" src="@/static/images/app/serve/act.png" mode=""></image>
|
||
<image v-else src="@/static/images/app/serve/act_no.png" mode=""></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
<view class="top-up-popup-type f-jcsb f-a-i" @click="actTypeFn('zfb')">
|
||
<view class="f-a-i">
|
||
<!-- #ifdef APP -->
|
||
<image src="@/static/images/app/serve/zfb.png" mode=""></image>
|
||
<view class="top-up-popup-type-zfb">支付宝</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="f-a-i">
|
||
<!-- #ifdef APP -->
|
||
<image v-if="topUpType=='zfb'" src="@/static/images/app/serve/act.png" mode=""></image>
|
||
<image v-else src="@/static/images/app/serve/act_no.png" mode=""></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="top-up-popup-button">
|
||
<u-button color="#13AFA8" shape="circle"
|
||
:customStyle="{height: '84rpx', lineHeight: '84rpx',marginTop: '48rpx'}"
|
||
@click="payPopupBtn">立即支付</u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
paymentFn,
|
||
wxpayPaymentFn
|
||
} from "@/utils/index.js"
|
||
import {
|
||
tabsList2
|
||
} from "@/data/tabsData2.js"
|
||
import {
|
||
getCardHelpList,
|
||
} from "@/api/user/index.js"
|
||
import {
|
||
paycardAPI,
|
||
addOrderAPI,
|
||
informationCreateAPI,
|
||
productCreate
|
||
} from '@/api/serve/coupons'
|
||
import {
|
||
frontPayPayrental,
|
||
frontPayCarSell
|
||
} from "@/api/showroom/showroom.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabList: tabsList2,
|
||
dataList: [],
|
||
//tab
|
||
type: '-1',
|
||
topUpTypeShow: false,
|
||
topUpType: 'ye',
|
||
payPrice: 0,
|
||
payData: {
|
||
from: "",
|
||
orderNo: "",
|
||
payChannel: "yue",
|
||
payType: "yue",
|
||
scene: 0
|
||
}
|
||
};
|
||
},
|
||
onShow() {
|
||
if (this.$refs.paging) {
|
||
this.$refs.paging.refresh();
|
||
}
|
||
},
|
||
methods: {
|
||
//去活动页
|
||
toDetailPages(item) {
|
||
this.$store.dispatch('CardId', item.id)
|
||
uni.navigateTo({
|
||
url: `/pages/driver/mine/my_activity/detail?id=${item.cardProductId}&helpGenre=${item.helpGenre}&activityId=${item.activityId}&isMould=${item.isMould}`
|
||
})
|
||
},
|
||
// 去支付
|
||
payPopupBtn() {
|
||
if (this.topUpType == 'ye') {
|
||
if (this.helpGenre == 0) {
|
||
paycardAPI(this.payData).then(res => {
|
||
this.topUpTypeShow = false
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=res&paymentType=1`
|
||
})
|
||
}).catch(err => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=err&paymentType=1`
|
||
})
|
||
})
|
||
} else if (this.helpGenre == 1) {
|
||
//租车
|
||
frontPayPayrental(this.payData).then(res => {
|
||
this.topUpTypeShow = false
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=res&paymentType=2`
|
||
})
|
||
}).catch(err => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=err&paymentType=2`
|
||
})
|
||
})
|
||
} else {
|
||
//买车
|
||
frontPayCarSell(this.payData).then(res => {
|
||
this.topUpTypeShow = false
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=res&paymentType=3`
|
||
})
|
||
}).catch(err => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=err&paymentType=3`
|
||
})
|
||
})
|
||
}
|
||
} else if (this.topUpType == 'zfb') {
|
||
if (this.helpGenre == 0) {
|
||
paycardAPI(this.payData).then(res => {
|
||
this.topUpTypeShow = false
|
||
paymentFn(this.payData.payType, res.data.alipayRequest).then(res => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=res&paymentType=1`
|
||
})
|
||
}).catch(err => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=err&paymentType=1`
|
||
})
|
||
})
|
||
})
|
||
} else if (this.helpGenre == 1) {
|
||
//租车
|
||
frontPayPayrental(this.payData).then(res => {
|
||
this.topUpTypeShow = false
|
||
paymentFn(this.payData.payType, res.data.alipayRequest).then(res => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=res&paymentType=2`
|
||
})
|
||
}).catch(err => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=err&paymentType=2`
|
||
})
|
||
})
|
||
})
|
||
} else {
|
||
//买车
|
||
frontPayCarSell(this.payData).then(res => {
|
||
this.topUpTypeShow = false
|
||
paymentFn(this.payData.payType, res.data.alipayRequest).then(res => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=res&paymentType=3`
|
||
})
|
||
}).catch(err => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=err&paymentType=3`
|
||
})
|
||
})
|
||
})
|
||
}
|
||
} else {
|
||
if (this.helpGenre == 0) {
|
||
paycardAPI(this.payData).then(res => {
|
||
this.topUpTypeShow = false
|
||
wxpayPaymentFn(res.data.jsConfig).then(res => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=res&paymentType=1`
|
||
})
|
||
}).catch(err => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=err&paymentType=1`
|
||
})
|
||
})
|
||
})
|
||
} else if (this.helpGenre == 1) {
|
||
//租车
|
||
frontPayPayrental(this.payData).then(res => {
|
||
this.topUpTypeShow = false
|
||
wxpayPaymentFn(res.data.jsConfig).then(res => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=res&paymentType=2`
|
||
})
|
||
}).catch(err => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=err&paymentType=2`
|
||
})
|
||
})
|
||
})
|
||
} else {
|
||
//买车
|
||
frontPayCarSell(this.payData).then(res => {
|
||
this.topUpTypeShow = false
|
||
wxpayPaymentFn(res.data.jsConfig).then(res => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=res&paymentType=3`
|
||
})
|
||
}).catch(err => {
|
||
uni.navigateTo({
|
||
url: `/pages/driver/serve/coupons/payresult?resultType=err&paymentType=3`
|
||
})
|
||
})
|
||
})
|
||
}
|
||
}
|
||
},
|
||
topUpTypeClose() {
|
||
this.topUpTypeShow = false
|
||
},
|
||
topOrderFn(item){
|
||
if (item.helpGenre == 0) {
|
||
uni.navigateTo({
|
||
url:`/pages/driver/mine/my_order/serveOrder/serve_order?tabOnecurrent=2`
|
||
})
|
||
} else if (item.helpGenre == 1) {
|
||
uni.navigateTo({
|
||
url:`/pages/driver/mine/my_order/rentCars/rent_order`
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url:`/pages/driver/mine/my_order/buyCars/buy_cars_order`
|
||
})
|
||
}
|
||
},
|
||
topUpFn(item) {
|
||
this.helpGenre = item.helpGenre
|
||
if (item.helpGenre == 0) {
|
||
addOrderAPI({
|
||
cardProductId: item.cardProductId,
|
||
num: 1,
|
||
userCouponId: 0,
|
||
cardHelpJoinId: item.id
|
||
}).then(res => {
|
||
this.topUpTypeShow = true
|
||
this.payPrice = res.data.payPrice
|
||
this.payData.orderNo = res.data.orderNo
|
||
this.$refs.paging.refresh();
|
||
})
|
||
} else if (item.helpGenre == 1) {
|
||
//租车创建订单
|
||
informationCreateAPI({
|
||
id: item.id,
|
||
activityId: item.activityId
|
||
}).then(res => {
|
||
this.topUpTypeShow = true
|
||
this.payPrice = res.data.payPrice
|
||
this.payData.orderNo = res.data.orderNo
|
||
this.$refs.paging.refresh();
|
||
})
|
||
} else {
|
||
//买车创建订单
|
||
productCreate({
|
||
id: item.id,
|
||
activityId: item.activityId
|
||
}).then(res => {
|
||
this.topUpTypeShow = true
|
||
this.payPrice = res.data.payPrice
|
||
this.payData.orderNo = res.data.orderNo
|
||
this.$refs.paging.refresh();
|
||
})
|
||
}
|
||
},
|
||
tabClick(e) {
|
||
this.type = e.value
|
||
this.$refs.paging.refresh();
|
||
},
|
||
queryList(page, limit) {
|
||
let obj = {
|
||
limit,
|
||
page,
|
||
type: this.type
|
||
}
|
||
getCardHelpList(obj).then(res => {
|
||
res.data.list.forEach(item => {
|
||
item.labels = JSON.parse(item.labels)
|
||
if (item.userList === null) {
|
||
item.userList = []
|
||
} else if (item.userList.length > 3) {
|
||
item.userList.length = 3
|
||
}
|
||
if (item.cover) {
|
||
item.cover = item.cover.split(",")[0]
|
||
}
|
||
|
||
})
|
||
console.log(res.data.list);
|
||
this.$refs.paging.complete(res.data.list);
|
||
}).catch(err => {
|
||
this.$refs.paging.complete(false)
|
||
})
|
||
},
|
||
//类型
|
||
actTypeFn(type) {
|
||
this.topUpType = type
|
||
// 支付方式:weixin,alipay,yue
|
||
// 支付渠道：yue-余额，wechatIos-微信Ios，wechatAndroid-微信Android, alipay-支付包，alipayApp-支付宝App
|
||
if (type == 'ye') {
|
||
this.payData.payType = 'yue'
|
||
this.payData.payChannel = 'yue'
|
||
}
|
||
if (type == 'wx') {
|
||
this.payData.payType = 'weixin'
|
||
if (uni.getSystemInfoSync().platform === 'ios') {
|
||
// iOS平台下的逻辑
|
||
this.payData.payChannel = 'wechatIos'
|
||
} else if (uni.getSystemInfoSync().platform === 'android') {
|
||
// 安卓平台下的逻辑
|
||
this.payData.payChannel = 'wechatAndroid'
|
||
} else {
|
||
// 其他平台下的逻辑
|
||
}
|
||
}
|
||
if (type == 'zfb') {
|
||
this.payData.payType = 'alipay'
|
||
this.payData.payChannel = 'alipay'
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.tab-top {
|
||
background: #fff;
|
||
}
|
||
|
||
.data-list {
|
||
width: calc(100% - 48rpx);
|
||
background-color: #fff;
|
||
margin-left: 24rpx;
|
||
margin-top: 16rpx;
|
||
padding: 16rpx 24rpx 24rpx 24rpx;
|
||
|
||
.data-list-leg {
|
||
padding-top: 26rpx;
|
||
|
||
.data-list-leg-num {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #111111;
|
||
height: 36rpx;
|
||
line-height: 36rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
image {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border-radius: 50%;
|
||
background: #EDEDED;
|
||
}
|
||
}
|
||
|
||
.data-list-header {
|
||
padding-bottom: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
border-bottom: 1rpx solid #EDEDED;
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
color: #666666;
|
||
|
||
.data-list-state {
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
color: #F20808;
|
||
}
|
||
}
|
||
|
||
.data-list-waist {
|
||
width: 100%;
|
||
padding-bottom: 16rpx;
|
||
border-bottom: 1rpx solid #EDEDED;
|
||
|
||
.data-list-waist-cont {
|
||
width: calc(100% - 160rpx);
|
||
margin-left: 16rpx;
|
||
|
||
.data-list-waist-cont-name {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
color: #111111;
|
||
margin-bottom: 18rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.data-list-waist-cont-label {
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
color: #444444;
|
||
flex-wrap: wrap;
|
||
|
||
view {
|
||
background-color: #F5F5F5;
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
margin-right: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
image {
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.top-up-popup {
|
||
padding: 48rpx 24rpx 88rpx;
|
||
|
||
.top-up-popup-allprice {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
padding: 24rpx 0;
|
||
border-bottom: 1rpx solid #E6E6E6;
|
||
}
|
||
|
||
.top-up-popup-title {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
padding-top: 48rpx;
|
||
}
|
||
|
||
.top-up-popup-type {
|
||
margin-top: 48rpx;
|
||
|
||
.top-up-popup-type-zfb,
|
||
.top-up-popup-type-wx {
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.top-up-popup-button {
|
||
width: 702rpx;
|
||
}
|
||
}
|
||
</style> |