17638755181/XiaoLingHou_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
王明
2023-12-29 00:08:10 +08:00
commit 5ed0fc646f
512 changed files with 54378 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
pages/mine/components/MineHeader.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<!-- 用户信息组件 -->
<view class="mine-hd">
<view class="mine-info">
<view class="mine-avatar">
<image :src="userInfo.avatar" mode="aspectFit"></image>
</view>
<view class="mine-info-text">
<view class="name">
<view class="name-text">{{ userInfo.nickname }}</view>
<!-- <view class="member-sign">
<image src="../../../static/mine/m_gorden_member.png" mode="aspectFit" v-if="memberStatus"></image>
<image src="../../../static/mine/m_normal_member.png" mode="aspectFit" v-else></image>
</view> -->
</view>
<!-- <view class="member-text">
<text v-if="memberStatus">会员到期时间: 2023-05-28 24:00:00</text>
<text v-else>暂未开通会员</text>
</view> -->
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
memberStatus: false,
orderList: []
}
},
computed: {
userInfo() {
return this.$storeMine.userInfo;
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.mine-hd {
padding: 0 0 30rpx;
.mine-info {
display: flex;
align-items: center;
.mine-avatar {
image {
width: 109rpx;
height: 109rpx;
border-radius: 9999rpx;
}
}
.mine-info-text {
padding-left: 25rpx;
.name {
display: flex;
align-items: center;
.name-text {
line-height: 40rpx;
font-size: 38rpx;
font-weight: 600;
}
.member-sign {
padding-left: 10rpx;
image {
width: 150rpx;
height: 40rpx;
}
}
}
.member-text {
padding-top: 10rpx;
font-size: 24rpx;
}
}
}
}
</style>

369
pages/mine/mine.vue Normal file
View File

@@ -0,0 +1,369 @@
<template>
<view class="uni-page mine">
<u-navbar title="个人中心" leftIconSize="0" bg-color="transparent" placeholder></u-navbar>
<MineHeader></MineHeader>
<view class="mine-inner">
<!-- 开通会员 -->
<view class="open-member">
<view class="open-member-hd">
<template v-if="userInfo.vip_end">
<view class="open-member-hd-left">
<image class="open-member-hd-left-vip" src="../../static/mine/m_member_vip.png" mode="">
</image>
<text>会员到期时间</text>
</view>
<view class="open-member-hd-right" @click="jumpPage('/pages/mine/openMember')">
<text>有效期至{{ userInfo.vip_end }}</text>
</view>
</template>
<template v-else>
<view class="open-member-hd-left">
<image class="open-member-hd-left-vip" src="../../static/mine/m_member_vip.png" mode="">
</image>
<text>开通会员功能</text>
</view>
<view class="open-member-hd-right" @click="jumpPage('/pages/mine/openMember')">
<text>享受更多特权</text>
<u-icon name="arrow-right" size="14" color="#6D3B00"></u-icon>
</view>
</template>
</view>
<!-- 钱包 -->
<view class="open-member-bd">
<view class="open-member-bd-left">
我的钱包
</view>
<view class="open-member-bd-right">
￥ {{ userInfo.money }}
<!-- <text>我的钱包</text>
<u-icon name="arrow-right" size="14" color="#ababab"></u-icon> -->
</view>
</view>
</view>
<!-- 订单 -->
<view class="order-entrance">
<view class="order-entrance-title">
我的订单
</view>
<view class="order-entrance-list">
<view class="order-entrance-list-item" v-for="item in order" :key="item.label"
@click="jumpPage(item.path)">
<view class="order-entrance-list-item-value">
<text class="number">{{ orderNum[item.type] || 0 }}</text>
<text class="unit">件</text>
</view>
<view class="order-entrance-list-item-label">
{{ item.label }}
</view>
</view>
</view>
</view>
<!-- 菜单 -->
<view class="menu">
<view class="menu-item" v-for="item in menuList" :key="item.label" @click="jumpPage(item.path)">
<view class="menu-item-inner">
<view class="menu-item-icon">
<!-- <component :is="item.icon" size="20"></component> -->
<u-icon :name="item.icon" size="20"></u-icon>
</view>
<view class="menu-item-text">
<view class="label">
{{ item.label }}
</view>
<view class="desc">
{{ item.desc }}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import MineHeader from './components/MineHeader.vue';
import {
getOrderList,
getUserInfo
} from '@/request/yyf.js';
export default {
components: {
MineHeader,
},
data() {
return {
order: [{
label: '待付款',
type: '0',
path: '/pages/mine/mineOrder?type=0'
},
{
label: '待寄出',
type: '1',
path: '/pages/mine/mineOrder?type=1'
},
{
label: '已寄出',
type: '2',
path: '/pages/mine/mineOrder?type=2'
},
{
label: '被退回',
type: '3',
path: '/pages/mine/mineOrder?type=3'
},
{
label: '已取消',
type: '4',
path: '/pages/mine/mineOrder?type=4'
},
],
menuList: [
// { label: '邀请有礼', path: '', icon: 'share-square', desc: '邀请好友获取收益' },
{
label: '地址管理',
path: '/pages/address/address',
icon: 'map',
desc: '添加收件地址'
},
{
label: '我的优惠券',
path: '/pages/coupon/coupon',
icon: 'coupon',
desc: '查看我的优惠券'
},
// { label: '咨询客服', path: '', icon: 'server-fill', desc: '在线咨询客服' },
{
label: '系统设置',
path: '/pages/setting/setting',
icon: 'setting',
desc: '基本资料设置'
},
// { label: '关于我们', path: '', icon: 'error-circle', desc: '公司基本介绍' },
]
}
},
computed: {
userInfo() {
return this.$storeMine.userInfo;
},
orderList() {
return this.$storeMine.orderList;
},
orderNum() {
return this.$storeMine.orderNum;
},
prevTime() {
let {
prevtime
} = this.userInfo;
const date = new Date(prevtime * 1000);
const year = date.getFullYear(); // 获取年份
const month = date.getMonth() + 1 > 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1); // 获取月份，需要加1
const day = date.getDate() > 10 ? date.getDate() : '0' + date.getDate(); // 获取日期
const hour = date.getHours() > 10 ? date.getHours() : '0' + date.getHours(); // 获取小时
const minute = date.getMinutes() > 10 ? date.getMinutes() : '0' + date.getMinutes(); // 获取分钟
const second = date.getSeconds() > 10 ? date.getSeconds() : '0' + date.getSeconds(); // 获取秒数
const formattedDate = `${year}-${month}-${day}`; // 拼接成格式化后的日期字符串
return formattedDate
}
},
onShow() {
this.$actionsMine.onGetuserInfo();
this.$actionsMine.onGetOrderNum();
},
methods: {
jumpPage(path) {
// console.log(path);
path && this.$Router.push(path);
},
},
}
</script>
<style lang="scss" scoped>
/deep/.u-icon {
display: inline-block;
}
.mine-inner {
.open-member {
height: 210rpx;
background: url(../../static/mine/m_member_bg.png) center/100% no-repeat;
.open-member-hd {
padding: 17rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
.open-member-hd-left {
display: flex;
align-items: center;
&-vip {
width: 46rpx;
height: 40rpx;
}
text {
padding-left: 27rpx;
line-height: 1;
font-family: PingFang SC-Bold, PingFang SC;
font-size: 26rpx;
font-weight: 600;
color: #6D3B00;
}
}
.open-member-hd-right {
cursor: pointer;
display: flex;
align-items: center;
text {
padding-right: 10rpx;
line-height: 1;
font-family: PingFang SC-Bold, PingFang SC;
font-size: 24rpx;
color: #6D3B00;
}
}
}
.open-member-bd {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
padding: 0 30rpx;
height: 130rpx;
background-color: #fff;
border-radius: 40rpx;
&-left {
font-size: 34rpx;
font-family: OPPOSans-bold, OPPOSans;
font-weight: bold;
color: #111111;
}
&-right {
display: flex;
align-items: center;
text {
padding-right: 10rpx;
}
cursor: pointer;
font-size: 24rpx;
font-family: PingFang SC-Bold,
PingFang SC;
color: #ababab;
}
}
}
.order-entrance {
box-sizing: border-box;
margin-top: 26rpx;
height: 260rpx;
background: #FFFFFF;
border-radius: 40rpx 40rpx 40rpx 40rpx;
padding: 30rpx 40rpx;
.order-entrance-title {
padding-bottom: 45rpx;
font-size: 34rpx;
font-family: OPPOSans-bold, OPPOSans;
font-weight: bold;
color: #333333;
}
.order-entrance-list {
cursor: pointer;
display: flex;
.order-entrance-list-item {
flex: 1;
text-align: center;
&-label {
padding-top: 18rpx;
font-size: 26rpx;
font-family: OPPOSans-Medium, OPPOSans;
font-weight: 500;
color: #333333;
}
&-value {
.number {
font-size: 34rpx;
font-family: OPPOSans-Medium, OPPOSans;
font-weight: 500;
color: #CE7A2C;
}
.unit {
padding-left: 5rpx;
font-size: 24rpx;
font-family: OPPOSans-Medium, OPPOSans;
font-weight: 500;
color: #CE7A2C;
}
}
}
}
}
.menu {
display: flex;
flex-wrap: wrap;
margin: 0 -10rpx;
.menu-item {
margin-top: 10px;
box-sizing: border-box;
padding: 0 10rpx;
width: 50%;
.menu-item-inner {
cursor: pointer;
box-sizing: border-box;
padding: 37rpx 39rpx;
background-color: #fff;
border-radius: 40rpx;
display: flex;
.menu-item-icon {
padding-right: 12rpx;
}
.menu-item-text {
.label {
font-size: 26rpx;
font-family: OPPOSans-Medium, OPPOSans;
font-weight: 500;
color: #111111;
line-height: 1;
}
.desc {
padding-top: 10rpx;
font-size: 20rpx;
color: #ababab;
line-height: 1;
}
}
}
}
}
}
</style>

443
pages/mine/mineOrder.vue Normal file
View File

@@ -0,0 +1,443 @@
<template>
<view class="order">
<u-navbar title="我的订单" @leftClick="leftClick" placeholder bg-color="#fff0e7"></u-navbar>
<view class="tabs-wrap">
<u-tabs
:list="tabList"
:current="currentType"
lineColor="#E39B46"
lineHeight="12rpx"
:activeStyle="{
color: '#333333',
fontSize: '26rpx',
fontWeight: 'bold'
}"
:inactiveStyle="{
color: '#333333',
fontSize: '26rpx',
}"
@click="changeTab"
>
</u-tabs>
</view>
<view class="order-inner">
<scroll-view style="height: 100%;"
scroll-y="true"
refresher-enabled
:refresher-triggered="refreshState"
@refresherrefresh="onScrollRefresh"
@scrolltolower="loadMoreData"
>
<template v-if="currentOrder.length > 0">
<view class="order-item" v-for="item in currentOrder" :key="item.id" >
<view class="order-hd">
<view class="order-id">订单号 {{ item.id }}</view>
<view class="order-time">{{ item.create_time }}</view>
</view>
<view class="order-address">
<view class="name">
<view style="min-width: 55%; display: flex;">
<view class="name-left">
{{ item.send_address[0] }}
</view>
<view class="name-icon">
<image src="../../static/mine/m_order_arrow.png" mode=""></image>
</view>
</view>
<view class="name-right" style="flex: 1;">
{{ item.take_address[0] }}
</view>
</view>
<view class="address-text">
<view class="address-text-inner" >
{{ item.send_address[2] }}
</view>
<view class="address-text-inner">
{{ item.take_address[2] }}
</view>
</view>
</view>
<view class="order-opera">
<template v-if="currentType === 0">
<u-button text="取消付款" plain shape="circle" @click="confirmCancel(item)"></u-button>
<u-button text="去付款" type="warning" plain shape="circle" @click="selectPayMent(item)"></u-button>
</template>
<!-- <template v-else-if="currentType === 1"> -->
<u-button text="查看预览" type="warning" plain shape="circle" @click="jumpPage(item)"></u-button>
<u-button @click="toViewLogistics(item)" v-if="currentType==2||currentType==3" text="物流详情" type="warning" plain shape="circle" ></u-button>
<!-- </template> -->
</view>
</view>
</template>
<view class="no-data" v-if="currentOrder.length <= 0">
暂无订单
</view>
<u-modal
showCancelButton
:show="show"
:title="title"
:content="content"
:cancelText="cancelText"
:confirmText="confirmText"
confirmColor="#E08745"
@cancel="show = false"
@confirm="cancelOrder"
>
</u-modal>
<u-popup :show="showPopup" closeOnClickOverlay @close="showPopup = false">
<view class="popup-content">
<PayPatter v-model="pay_payment"></PayPatter>
<view class="popup-footer">
<u-button class="v-default" shape="circle" @click="showPopup = false">取消</u-button>
<u-button class="v-primary" shape="circle" type="primary" @click="onRePayment(currentPayInfo)">确认</u-button>
</view>
</view>
</u-popup>
</scroll-view>
</view>
</view>
</template>
<script>
import { rePayment, cancelPayment, getOrderList } from '@/request/yyf.js';
import PayPatter from '@/components/Pay-patter/Pay-patter.vue';
export default {
components: {
PayPatter
},
data() {
return {
currentType: 0,
orderType: '0',
show: false, // 弹窗状态
title: "警告",
content: "确认取消订单吗？",
confirmText: "确认",
cancelText: "取消",
currentId: '',
orderList: {
'0': [],
'1': [],
'2': [],
'3': [],
'4': [],
},
params: {
'0': { page: 1 },
'1': { page: 1 },
'2': { page: 1 },
'3': { page: 1 },
'4': { page: 1 },
},
total: {
'0': { total: 0 },
'1': { total: 0 },
'2': { total: 0 },
'3': { total: 0 },
'4': { total: 0 },
},
showPopup: false,
pay_payment: '',
currentPayInfo: {},
refreshState: false
}
},
computed: {
tabList() {
return [
{ name: '待付款', type: '0', badge: { value: this.orderNum['0'] || 0 } },
{ name: '待寄出', type: '1', badge: { value: this.orderNum['1'] || 0 } },
{ name: '已寄出', type: '2', badge: { value: this.orderNum['2'] || 0 } },
{ name: '被退回', type: '3', badge: { value: this.orderNum['3'] || 0 } },
{ name: '已取消', type: '4', badge: { value: this.orderNum['4'] || 0 } },
]
},
currentOrder() {
return this.orderList[this.currentType]
},
orderNum() {
return this.$storeMine.orderNum;
},
},
watch: {
'$Route'(newVal) {
console.log(newVal);
}
},
methods: {
jumpPage(item) {
this.$Router.push({
path: '/pages/preview/preview',
query: {
...item
}
})
},
toViewLogistics(data){
uni.navigateTo({
url:'pages/waybill-info/waybill-info?id='+data.id,
})
// console.log(data);
},
leftClick() {
this.$Router.replace('/pages/mine/mine');
},
changeTab({ index, type }) {
if(type === this.currentType) {
return
}
this.currentType = index;
this.orderType = type;
if(this.orderList[this.currentType].length <= 0) {
this.queryData();
}
},
confirmCancel({ id }) {
this.currentId = id;
this.show = true;
},
async cancelOrder() {
const { data } = await cancelPayment({
id: this.currentId
});
if(data.code === 1) {
uni.$u.toast('订单已取消');
this.show = false;
this.refreshData();
this.$actionsMine.onGetOrderNum();
} else {
uni.$u.toast(data.msg);
}
},
selectPayMent(item) {
this.currentPayInfo = { ...item };
console.log(item);
this.showPopup = true;
},
// 重新支付
async onRePayment(item) {
let { message, affix, thumb, mail_type, coupon, send_type, pay_payment, send_address, take_address, id } = item;
// this.$store.letterInfo = {};
// this.$store.letterInfo.message = message;
// this.$store.letterInfo.mail_type = mail_type;
// this.$store.letterInfo.thumb = thumb;
// this.$store.letterInfo.affix = affix;
// this.$store.letterInfo.coupon = coupon;
// this.$store.letterInfo.send_type = send_type;
// this.$store.letterInfo.pay_payment = pay_payment;
// this.$store.letterInfo.send_address = send_address.reduce((total, item)=> total + ' ' + item);
// this.$store.letterInfo.take_address = take_address.reduce((total, item)=> total + ' ' + item);
// // console.log(this.$store.letterInfo);
// this.$Router.push({
// path: '/pages/confirmOrder/confirmOrder',
// query: {
// ...item
// }
// })
const { data } = await rePayment({
id,
pay_payment: this.pay_payment
})
if (data.code === 1) {
if(this.pay_payment === 1) {
uni.showToast({
title: data.msg,
});
this.refreshData();
} else {
// #ifdef H5
location.href = data.data.pay.url;
// #endif
// #ifdef MP-WEIXIN
uni.showToast({
title: "小程序支付暂未配置",
icon: "error",
});
// #endif
}
} else {
uni.showToast({
title: data.msg,
icon: 'error'
})
}
},
// 刷新
refreshData() {
this.orderList[this.currentType] = [];
this.params[this.currentType].page = 1;
this.queryData();
},
onScrollRefresh() {
this.refreshState = true;
this.refreshData()
},
async queryData() {
const { data } = await getOrderList({
...this.params[this.currentType],
status: this.currentType,
order: 'desc'
})
if(data.code === 1) {
this.total[this.currentType].total = data.data.total;
this.orderList[this.currentType].push(...data.data.data);
}
setTimeout(()=>{
this.refreshState = false;
}, 1000)
},
loadMoreData() {
if(this.total[this.currentType].total > this.orderList[this.currentType].length) {
this.params[this.currentType].page += 1;
this.queryData();
}
}
},
onLoad() {
let { type } = this.$Route.query;
this.currentType = parseInt(type);
this.orderType = type;
this.$actionsMine.onGetOrderNum();
this.queryData();
}
}
</script>
<style lang="scss" scoped>
/deep/.u-tabs__wrapper__nav__line {
bottom: 0;
}
/deep/.u-tabs__wrapper__nav__item {
box-sizing: border-box;
min-width: 20%;
}
/deep/.u-badge--error {
margin-left: 0 !important;
background-color: transparent;
color: #000;
font-size: 24rpx;
}
.order {
height: 100vh;
display: flex;
flex-direction: column;
.tabs-wrap {
}
.order-inner {
flex: 1;
overflow: auto;
background-color: rgba(255, 255, 255, .33);
padding: 35rpx 30rpx;
.order-item {
box-sizing: border-box;
padding: 42rpx 40rpx;
background-color: #fff;
border-radius: 40rpx;
margin-bottom: 40rpx;
.order-hd {
display: flex;
justify-content: space-between;
color: #333;
font-size: 26rpx;
font-family: OPPOSans-Medium, OPPOSans;
}
.order-address {
padding-top: 33rpx;
.name {
display: flex;
align-items: center;
font-size: 34rpx;
font-weight: bold;
&-icon {
padding: 0 28rpx;
image {
width: 190rpx;
height: 12rpx;
}
}
}
.address-text {
padding-top: 10rpx;
display: flex;
.address-text-inner {
width: 50%;
font-size: 24rpx;
font-family: OPPOSans-Medium, OPPOSans;
font-weight: 500;
color: #ababab;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-right: 5%;
&:last-child {
flex: 1;
}
}
}
}
.order-opera {
margin-top: 46rpx;
display: flex;
justify-content: flex-end;
/deep/.u-button {
margin: 0 0 0 20rpx;
padding: 12rpx 22rpx;
height: auto;
background-color: transparent;
border-width: 2rpx;
width: auto;
}
/deep/.u-button--warning {
color: #f9ae3d;
}
}
}
}
.no-data {
padding: 100rpx 0;
text-align: center;
color: #ababab;
}
}
.popup-content {
padding: 40rpx;
.popup-footer {
padding-top: 40rpx;
display: flex;
.v-default {
margin-right: 20rpx;
}
.v-primary {
background-color: #E39B46;
border-color: #E39B46;;
}
}
}
</style>

536
pages/mine/openMember.vue Normal file
View File

@@ -0,0 +1,536 @@
<template>
<view class="open">
<u-navbar
title="会员中心"
placeholder
autoBack
bg-color="transparent"
></u-navbar>
<view class="open-header">
<MineHeader></MineHeader>
</view>
<view class="open-inner">
<view class="open-title">
开通会员即可享受包月或按次服务，最高可省88.8元
</view>
<view class="open-content">
<!-- tab -->
<u-tabs
:list="tabList"
lineColor="#E39B46"
lineHeight="12rpx"
:activeStyle="{
color: '#333333',
fontSize: '26rpx',
fontWeight: 'bold',
}"
@click="changeTab"
>
</u-tabs>
<view class="open-content-inner">
<!-- 付款信息 -->
<view class="open-content-inner-bd">
<!-- 月份 -->
<view class="open-month" v-if="currentType === 'date'">
<!-- <u-scroll-list :indicator="false" style="overflow-x: auto;"> -->
<view
class="v-item"
:class="selectMeal === item.id ? 'select' : ''"
v-for="(item, index) in list['date']"
:key="index"
@click="switchMeal(item.id)"
>
<image
class="bg-img"
v-show="selectMeal === item.id"
src="@/static/mine/m_open_select.png"
mode=""
></image>
<image
class="bg-img"
v-show="selectMeal !== item.id"
src="@/static/mine/m_open_not_select.png"
mode=""
></image>
<view class="v-item-inner">
<view class="v-item-title">
{{ item.title }}
</view>
<view class="v-item-dec">
{{ item.content }}
</view>
<view class="v-item-amount">
<view class="v-item-amount-label"> 金额 </view>
<view class="v-item-amount-value">
￥{{ item.balance }}
</view>
</view>
</view>
</view>
<!-- </u-scroll-list> -->
</view>
<!-- 次数 -->
<view class="open-month" v-else>
<view
class="v-item"
:class="selectMeal === item.id ? 'select' : ''"
v-for="(item, index) in list['count']"
:key="index"
@click="switchMeal(item.id)"
>
<image
class="bg-img"
v-show="selectMeal === item.id"
src="@/static/mine/m_open_select.png"
mode=""
></image>
<image
class="bg-img"
v-show="selectMeal !== item.id"
src="@/static/mine/m_open_not_select.png"
mode=""
></image>
<view class="v-item-inner">
<view class="v-item-title">
{{ item.title }}
</view>
<view class="v-item-dec">
{{ item.content }}
</view>
<view class="v-item-amount">
<view class="v-item-amount-label"> 金额 </view>
<view class="v-item-amount-value">
￥{{ item.balance }}
</view>
</view>
</view>
</view>
</view>
<view class="open-info">
<view class="open-info-title">
<text class="main"> 专属权益 </text>
<text class="in"> 开通会员后将享受超多专属权益 </text>
</view>
<view class="open-info-content">
<view
class="open-info-content-item"
v-for="(item, index) in infoList"
:key="index"
>
<image :src="item.img" mode=""></image>
<view>{{ item.label }}</view>
</view>
</view>
</view>
</view>
<!-- 底部支付 -->
<view class="open-content-inner-ft">
<view class="terms">
<u-checkbox-group v-model="checkboxValue">
<u-checkbox
shape="circle"
label="我已阅读并同意《会员使用协议》《隐私协议》"
inactiveColor="#E39B46"
labelColor="#111111"
activeColor="#E39B46"
>
</u-checkbox>
</u-checkbox-group>
</view>
<view class="opera">
<view class="amount">
￥ <text class="amount-price">{{ currentAmount }}</text>
<!-- <text class="amount-text">开通立省</text>
<text class="save-text">88元</text> -->
</view>
<u-button
:disabled="checkboxValue.length === 0 || !formData.id"
@click="showPopup = true"
>立即支付</u-button
>
</view>
</view>
</view>
</view>
</view>
<u-popup
:show="showPopup"
mode="bottom"
closeOnClickOverlay
@close="showPopup = false"
style="position: absolute"
>
<view class="popup-content">
<PayType v-model="formData.platform"></PayType>
<u-cell-group style="margin-top: 60rpx">
<u-cell
title="我的优惠券"
isLink
@click="
$Router.push('/pages/coupon/coupon?amount=' + currentAmount)
"
>
<template #value>
<view style="width: 300rpx; text-align: right">
{{ couponInfo ? couponInfo.title : "" }}
</view>
</template>
</u-cell>
</u-cell-group>
<view class="popup-footer">
<u-button class="v-default" shape="circle" @click="showPopup = false"
>取消</u-button
>
<u-button
class="v-primary"
shape="circle"
type="primary"
@click="onPayment"
>确认</u-button
>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import MineHeader from "./components/MineHeader.vue";
import PayType from "@/components/PayType/PayType.vue";
import { getPayList, onPayment, checkPayStatus } from "@/request/yyf.js";
export default {
components: {
MineHeader,
PayType,
},
data() {
return {
tabList: [
{ name: "包月套餐", type: "date" },
{ name: "按次套餐", type: "count" },
],
currentType: "date",
checkboxValue: [],
selectMeal: 0,
list: {
date: [],
count: [],
},
infoList: [
{ label: "免费寄信", img: require("../../static/mine/m_member_1.png") },
{ label: "人工代写", img: require("../../static/mine/m_member_2.png") },
{ label: "专属客服", img: require("../../static/mine/m_member_3.png") },
{
label: "尊贵身份标识",
img: require("../../static/mine/m_member_4.png"),
},
],
formData: {
platform: "",
coupon: "",
id: "",
},
couponInfo: null,
showPopup: false,
};
},
computed: {
currentAmount() {
let { id } = this.formData;
if (id) {
let obj = this.list[this.currentType].find((item) => item.id === id);
return obj.balance.toFixed(2);
}
},
},
onLoad() {
this.onGetPay();
uni.$on("selectCoupon", (data) => {
console.log("selectCoupon", data);
this.couponInfo = data;
this.formData.coupon = data.id;
});
},
methods: {
changeTab({ type }) {
this.currentType = type;
if (this.list[type][0]) {
let id = this.list[type][0].id;
this.formData.id = id;
this.selectMeal = id;
}
},
switchMeal(id) {
console.log(id);
this.selectMeal = id;
this.formData.id = id;
},
async onGetPay() {
const { data } = await getPayList({});
// console.log(data);
if (data.code === 1) {
data.data.forEach((item) => {
this.list[item.key] = item.list;
});
this.formData.id = this.list["date"][0].id;
this.selectMeal = this.list["date"][0].id;
// console.log(this.formData.id);
}
},
async onPayment() {
let { platform } = this.formData;
const { data } = await onPayment({
...this.formData,
coupon: this.formData.coupon || undefined,
});
// console.log(data);
this.showPopup = false;
if (data.code === 1) {
if (platform === 1) {
uni.showToast({
title: "支付成功",
});
this.$actionsMine.onGetuserInfo();
setTimeout(() => {
uni.navigateTo({
url: "/pages/mine/mine",
});
}, 1000);
} else {
// #ifdef H5
location.href = data.data.url;
// #endif
// #ifdef MP-WEIXIN
uni.showToast({
title: "小程序支付暂未配置",
icon: "error",
});
// #endif
}
} else {
uni.showToast({
title: data.msg,
icon: "error",
});
}
},
async onCheckPayStatus() {
// const { data } = await checkPayStatus({
// order_id: ''
// });
},
},
};
</script>
<style lang="scss" scoped>
/deep/.u-tabs__wrapper__nav__line {
bottom: 0;
}
.open {
height: 100vh;
display: flex;
flex-direction: column;
.open-header {
padding: 0 20rpx;
}
.open-inner {
flex: 1;
border-radius: 40rpx 40rpx 0 0;
background-color: #ffdbac;
.open-title {
padding: 15rpx 0;
border-radius: 40rpx 40rpx 0 0;
text-align: center;
font-size: 28rpx;
line-height: 1;
font-family: OPPOSans-Medium, OPPOSans;
font-weight: 500;
color: #de640a;
}
.open-content {
box-sizing: border-box;
padding-top: 20rpx;
height: calc(100% - 58rpx);
background-color: #fff;
border-radius: 40rpx 40rpx 0 0;
.open-content-inner {
margin-top: 40rpx;
height: calc(100% - 140rpx);
padding: 0 20rpx;
display: flex;
flex-direction: column;
&-bd {
flex: 1;
overflow-y: auto;
.open-month {
overflow-x: auto;
white-space: nowrap;
.v-item {
display: inline-block;
box-sizing: border-box;
width: 250rpx;
height: 330rpx;
// background: url(../../static/mine/m_open_not_select.png) center/100% no-repeat;
margin-right: 20rpx;
position: relative;
.v-item-inner {
position: relative;
z-index: 1;
padding-top: 65rpx;
padding-left: 30rpx;
}
.bg-img {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 0;
}
&.select {
width: 330rpx;
}
.v-item-title {
font-size: 36rpx;
font-family: OPPOSans-bold, OPPOSans;
font-weight: bold;
color: #011111;
}
.v-item-dec {
padding-top: 10rpx;
font-size: 24rpx;
font-family: OPPOSans-Medium, OPPOSans;
color: #ababab;
}
.v-item-amount {
&-label {
padding: 27rpx 0 11rpx;
font-size: 18rpx;
color: #666;
}
&-value {
color: #ce7a2c;
font-size: 47rpx;
font-weight: bold;
}
}
}
}
.open-info {
.open-info-title {
padding: 55rpx 0 45rpx;
.main {
font-size: 30rpx;
font-family: OPPOSans-bold, OPPOSans;
font-weight: bold;
color: #111111;
}
.in {
padding-left: 15rpx;
font-size: 23rpx;
font-family: OPPOSans-Medium, OPPOSans;
font-weight: 500;
color: #ababab;
}
}
.open-info-content {
display: flex;
&-item {
padding: 0 10rpx;
width: 25%;
text-align: center;
image {
width: 124rpx;
height: 124rpx;
}
view {
padding-top: 20rpx;
font-size: 26rpx;
font-family: OPPOSans-Medium, OPPOSans;
font-weight: 500;
color: #111111;
}
}
}
}
}
&-ft {
.opera {
margin-top: 48rpx;
display: flex;
.amount {
box-sizing: border-box;
padding: 0 36rpx;
width: 459rpx;
height: 98rpx;
line-height: 98rpx;
background: #ffe4d9;
border-radius: 20px 20px 20px 20px;
color: #ce7a2c;
.amount-price {
font-size: 42rpx;
}
.amount-text {
padding: 0 10rpx;
color: #111;
}
}
/deep/.u-button {
width: 214rpx;
height: 98rpx;
background: linear-gradient(178deg, #e8b648 0%, #e08745 100%);
border-radius: 20rpx 20rpx 20rpx 20rpx;
color: #fff;
font-size: 30rpx;
font-family: OPPOSans-Medium, OPPOSans;
font-weight: 500;
}
}
}
}
}
}
}
.popup-content {
padding: 40rpx;
.popup-footer {
padding-top: 40rpx;
display: flex;
.v-default {
margin-right: 20rpx;
}
.v-primary {
background-color: #e39b46;
border-color: #e39b46;
}
}
}
</style>