908 lines
21 KiB
Vue
908 lines
21 KiB
Vue
|
<style lang="scss" scoped>
|
|||
|
|
@font-face {
|
|||
|
|
font-family: jiage;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-number-box {
|
|||
|
|
.u-number-box__minus {
|
|||
|
|
padding: 10px;
|
|||
|
|
font-size: 22px !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header_bar {
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 880rpx;
|
|||
|
|
z-index: 2;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
height: 100vh;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
padding: 20upx;
|
|||
|
|
width: 95%;
|
|||
|
|
height: 765rpx;
|
|||
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|||
|
|
margin: 0 auto;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background: url("../../static/binlang/bg.png");
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
position: relative;
|
|||
|
|
top: -160rpx;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
margin: 0 auto;
|
|||
|
|
margin-top: 180rpx;
|
|||
|
|
width: 368rpx;
|
|||
|
|
height: 79rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border: 4rpx solid #69cd2a;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
line-height: 79rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 44rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
margin-right: 15rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin-top: 36rpx;
|
|||
|
|
background-color: #eeeff3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content1 {
|
|||
|
|
padding: 0 29rpx;
|
|||
|
|
|
|||
|
|
view {
|
|||
|
|
padding: 34upx 0;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.lable {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #606061;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #28292b;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.border-b {
|
|||
|
|
border-bottom: 2rpx solid #cfcfcf;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.FLEX-CENTER {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wrapper {
|
|||
|
|
padding: 0 27rpx;
|
|||
|
|
top: 30rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setmeal_wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 95rpx;
|
|||
|
|
height: 81rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
right: -40rpx;
|
|||
|
|
top: 33rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setmeal {
|
|||
|
|
width: 344rpx;
|
|||
|
|
display: flex;
|
|||
|
|
height: 174rpx;
|
|||
|
|
background: #f1e748;
|
|||
|
|
border-radius: 21rpx;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.radius {
|
|||
|
|
position: relative;
|
|||
|
|
width: 119rpx;
|
|||
|
|
height: 119rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
left: -40rpx;
|
|||
|
|
top: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setmeal_info {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
flex-direction: column;
|
|||
|
|
color: #000506;
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-top: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.num {
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
color: #d2101c;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right {
|
|||
|
|
background-color: #97e253;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
top: 0;
|
|||
|
|
width: 97rpx;
|
|||
|
|
height: 123rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.luxury_meal {
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 695rpx;
|
|||
|
|
height: 174rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.meal_info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 284rpx;
|
|||
|
|
top: 32rpx;
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
color: #f6ea26;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.unit {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #ebdf2e;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-left: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price {
|
|||
|
|
margin-left: 60rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
color: #d2101c;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.purchase_wrapper {
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-top: 24rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
height: 94rpx;
|
|||
|
|
display: flex;
|
|||
|
|
font-weight: bold;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
padding-left: 35rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input_wrapper {
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
margin-top: 43rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #010000;
|
|||
|
|
|
|||
|
|
input {
|
|||
|
|
width: 104rpx;
|
|||
|
|
height: 74rpx;
|
|||
|
|
background: #d9dadb;
|
|||
|
|
border-radius: 5rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #000103;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #7a7979;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button {
|
|||
|
|
width: 579rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
background: #65c24a;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
margin-top: 45rpx;
|
|||
|
|
border-radius: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #030000;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.check_box {
|
|||
|
|
// margin-top: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-page__item__slot-icon {
|
|||
|
|
width: 50rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom_content {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 10px;
|
|||
|
|
margin-top: -170px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
/* 添加 box-sizing 属性 */
|
|||
|
|
z-index: 777;
|
|||
|
|
background: linear-gradient(180deg, #E9FCAC -100%, #FFFFFF 100%);
|
|||
|
|
border-radius: 48rpx 48rpx 0rpx 0rpx;
|
|||
|
|
border-image: linear-gradient(153deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.qita_taocan {
|
|||
|
|
background-image: url('../../static/binlang/qita.png');
|
|||
|
|
background-position: 0% 0%;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
height: 376upx;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
margin-bottom: 100px;
|
|||
|
|
|
|||
|
|
.qita_title {
|
|||
|
|
height: 45rpx;
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
line-height: 45rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
padding: 10px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.qita_dec {
|
|||
|
|
height: 45rpx;
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #43680A;
|
|||
|
|
line-height: 45rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
padding: 10px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.qita_input {
|
|||
|
|
width: 244rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
background: #F9F9F9;
|
|||
|
|
border-radius: 44rpx;
|
|||
|
|
margin: 10px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.qita_button {
|
|||
|
|
width: 378rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
background: linear-gradient(315deg, #65C927 0%, #4BC26E 100%), rgba(101, 201, 39, 0.1);
|
|||
|
|
border-radius: 44rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #ffffff;
|
|||
|
|
line-height: 72rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.weixingtaocan {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 12upx;
|
|||
|
|
|
|||
|
|
.text-title {
|
|||
|
|
width: 128rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
line-height: 32rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
padding: 15px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-dec {
|
|||
|
|
height: 26rpx;
|
|||
|
|
padding-left: 15px;
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
line-height: 24rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-price {
|
|||
|
|
height: 40rpx;
|
|||
|
|
padding: 15px;
|
|||
|
|
font-family: DINPro, DINPro;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left-taocan {
|
|||
|
|
background-image: url('../../static/binlang/weixing1.png');
|
|||
|
|
background-position: 0% 0%;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
height: 400upx;
|
|||
|
|
margin: 15upx;
|
|||
|
|
width: 334upx;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-taocan {
|
|||
|
|
.top-taocan {
|
|||
|
|
background-image: url('../../static/binlang/weixinger.png');
|
|||
|
|
margin: 12upx;
|
|||
|
|
background-position: 0% 0%;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
height: 200upx;
|
|||
|
|
width: 334upx;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-taocan {
|
|||
|
|
margin: 12upx;
|
|||
|
|
background-image: url('../../static/binlang/weixing3.png');
|
|||
|
|
background-position: 0% 0%;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
height: 200upx;
|
|||
|
|
width: 334upx;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<u-navbar bgColor="transparent" leftIconColor="#ffffff" @leftClick="goHome" @rightClick="goPerson">
|
|||
|
|
<!-- <view slot="right">
|
|||
|
|
<u-icon size="40rpx" name="account" color="#fff"></u-icon>
|
|||
|
|
</view> -->
|
|||
|
|
</u-navbar>
|
|||
|
|
<view class="header_bar">
|
|||
|
|
<image src="../../static/binlang/bg.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view style="position: relative;" v-if="this.typeList[0]">
|
|||
|
|
<view class="bottom_content">
|
|||
|
|
<view class="weixingtaocan">
|
|||
|
|
<view class="left-taocan" @click="handlerMeal('2')">
|
|||
|
|
<view class="text-title">
|
|||
|
|
<text class="name">微型套餐</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="text-dec" style="color: #3E88BF;">
|
|||
|
|
<text class="name">20棵≈2分地</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="text-price">
|
|||
|
|
<text class="name">￥ {{this.typeList[0].investmentPrice * 2 }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="right-taocan">
|
|||
|
|
<view class="top-taocan" @click="handlerMeal('10')">
|
|||
|
|
<view class="text-title">
|
|||
|
|
<text class="name">迷你套餐</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="text-dec" style="color: #C8751A;">
|
|||
|
|
<text class="name">100棵≈1亩地</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="text-price">
|
|||
|
|
<text class="name">￥ {{this.typeList[0].investmentPrice * 10}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bottom-taocan" @click="handlerMeal('100')">
|
|||
|
|
<view class="text-title">
|
|||
|
|
<text class="name">中型套餐</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="text-dec" style="color: #BB504B;">
|
|||
|
|
<text class="name">1000棵≈10亩地</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="text-price">
|
|||
|
|
<text class="name">￥ {{this.typeList[0].investmentPrice * 100}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="qita_taocan">
|
|||
|
|
<view class="qita_title">购买其他份额：</view>
|
|||
|
|
<view class="qita_dec">
|
|||
|
|
<view>{{acer}}分地={{spec}}棵</view>
|
|||
|
|
<!-- <input type="number" v-model="value" @input="getAmount">
|
|||
|
|
份
|
|||
|
|
<text>≈</text>
|
|||
|
|
<input type="number" disabled="true" v-model="acer" />
|
|||
|
|
亩
|
|||
|
|
<text>=</text>
|
|||
|
|
<input type="number" disabled="true" v-model="spec" /> 棵 -->
|
|||
|
|
</view>
|
|||
|
|
<view class="qita_dec" style="margin: 10px;">
|
|||
|
|
<u-number-box :min="2" :disabledInput="true" :integer="true" v-model="value"
|
|||
|
|
@change="getAmount">
|
|||
|
|
<view slot="minus" class="minus">
|
|||
|
|
<u-icon v-if="value" name="minus-circle" color="#fff" size="36"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view slot="input">
|
|||
|
|
<input class="qita_input" type="number" v-model="value" @input="getAmountInput" />
|
|||
|
|
</view>
|
|||
|
|
<view slot="plus" class="minus">
|
|||
|
|
<u-icon v-if="value" name="plus-circle" color="#fff" size="36"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</u-number-box>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="input_wrapper">
|
|||
|
|
<u-number-box
|
|||
|
|
:disabledInput="true"
|
|||
|
|
:integer="true"
|
|||
|
|
v-model="value"
|
|||
|
|
@change="getAmount"
|
|||
|
|
></u-number-box>
|
|||
|
|
<input type="number" v-model="value" @input="getAmount">
|
|||
|
|
份
|
|||
|
|
<text>≈</text>
|
|||
|
|
<input type="number" disabled="true" v-model="acer" />
|
|||
|
|
亩
|
|||
|
|
<text>=</text>
|
|||
|
|
<input type="number" disabled="true" v-model="spec" /> 棵
|
|||
|
|
</view> -->
|
|||
|
|
<view style="display: flex;justify-content: center;">
|
|||
|
|
<view class="qita_button" @click="handlerPurchase">点击购买</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- <view class="wrapper">
|
|||
|
|
<view class="setmeal_wrapper">
|
|||
|
|
<view class="setmeal left" @click="handlerMeal('1')">
|
|||
|
|
<view class="radius">
|
|||
|
|
<image src="../../static/fruit-L.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="setmeal_info">
|
|||
|
|
<text class="name">微型套餐</text>
|
|||
|
|
<text class="num">40棵≈1分地</text>
|
|||
|
|
<view class="price"> 价格：<text>5000元</text> </view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="setmeal right" @click="handlerMeal('5')">
|
|||
|
|
<view class="radius">
|
|||
|
|
<image src="../../static/fruit-R.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="setmeal_info">
|
|||
|
|
<text class="name">小微套餐</text>
|
|||
|
|
<text class="num">200棵≈5分地</text>
|
|||
|
|
<view class="price"> 价格：<text>25000元</text> </view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="luxury_meal" @click="handlerMeal('10')">
|
|||
|
|
<image src="../../static/luxury_bg.png" mode=""></image>
|
|||
|
|
<view class="meal_info">
|
|||
|
|
<view class="name">迷你套餐</view>
|
|||
|
|
<view>
|
|||
|
|
<view class="unit">400棵=1亩地</view>
|
|||
|
|
<view class="price"> 价格：<text>50000元</text> </view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="purchase_wrapper">
|
|||
|
|
<view class="title">购买其他份额：</view>
|
|||
|
|
<view class="input_wrapper">
|
|||
|
|
<u-number-box
|
|||
|
|
:disabledInput="true"
|
|||
|
|
:integer="true"
|
|||
|
|
v-model="value"
|
|||
|
|
@change="getAmount"
|
|||
|
|
></u-number-box>
|
|||
|
|
<input type="number" v-model="value" @input="getAmount">
|
|||
|
|
份
|
|||
|
|
<text>≈</text>
|
|||
|
|
<input type="number" disabled="true" v-model="acer" />
|
|||
|
|
亩
|
|||
|
|
<text>=</text>
|
|||
|
|
<input type="number" disabled="true" v-model="spec" /> 棵
|
|||
|
|
</view>
|
|||
|
|
<view class="button" @click="handlerPurchase">购买</view>
|
|||
|
|
</view>
|
|||
|
|
<u-gap height="120rpx"></u-gap>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
<u-modal :show="show" :title="title" confirmText="确定" cancelText="取消" :showCancelButton="true"
|
|||
|
|
@close="show = false" @cancel="show = false" @confirm="onConfirm" :closeOnClickOverlay="true">
|
|||
|
|
<view>
|
|||
|
|
<view>
|
|||
|
|
您需要花费{{ result.payMoney }}元
|
|||
|
|
</view>
|
|||
|
|
<!-- <u-gap height="10"></u-gap>
|
|||
|
|
<view class="check_box flex1">
|
|||
|
|
<u-checkbox-group>
|
|||
|
|
<u-checkbox shape="circle"></u-checkbox>
|
|||
|
|
我已阅读并同意 <u-text @click="handlerAgreement" type="primary" text="《购买协议》"></u-text>
|
|||
|
|
</u-checkbox-group>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</u-modal>
|
|||
|
|
<u-tabbar
|
|||
|
|
value="/pages/licai/index"
|
|||
|
|
@change="handlerChange"
|
|||
|
|
:fixed="true"
|
|||
|
|
:placeholder="false"
|
|||
|
|
:safeAreaInsetBottom="false"
|
|||
|
|
activeColor="#ed6146"
|
|||
|
|
inactiveColor="#000000"
|
|||
|
|
>
|
|||
|
|
<u-tabbar-item text="首页" name="/pages/licai/index">
|
|||
|
|
<image
|
|||
|
|
class="u-page__item__slot-icon"
|
|||
|
|
slot="active-icon"
|
|||
|
|
src="../../static/icon/indexs.png"
|
|||
|
|
></image>
|
|||
|
|
<image
|
|||
|
|
class="u-page__item__slot-icon"
|
|||
|
|
slot="inactive-icon"
|
|||
|
|
src="../../static/icon/index.png"
|
|||
|
|
></image>
|
|||
|
|
</u-tabbar-item>
|
|||
|
|
<u-tabbar-item text="我的" name="/pages/licai/mine/index">
|
|||
|
|
<image
|
|||
|
|
class="u-page__item__slot-icon"
|
|||
|
|
slot="active-icon"
|
|||
|
|
src="../../static/icon/mys.png"
|
|||
|
|
></image>
|
|||
|
|
<image
|
|||
|
|
class="u-page__item__slot-icon"
|
|||
|
|
slot="inactive-icon"
|
|||
|
|
src="../../static/icon/my.png"
|
|||
|
|
></image>
|
|||
|
|
</u-tabbar-item>
|
|||
|
|
</u-tabbar>
|
|||
|
|
<!-- <neil-modal :show="show" :title="title" @cancel="show=false" @confirm="onConfirm"></neil-modal> -->
|
|||
|
|
<payModal :show="showModal" :investmentObj="investmentObj" @handlerClose="handlerClose"
|
|||
|
|
@handlerConfirm="handlerClose" @paySucess="paySucess" redirectUrl="" ref="payModal">
|
|||
|
|
</payModal>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import neilModal from "@/components/neil-modal/neil-modal.vue";
|
|||
|
|
import {
|
|||
|
|
calcFn
|
|||
|
|
} from "@/utils/calc.js";
|
|||
|
|
import PayModal from "@/components/payModal/payModal.vue";
|
|||
|
|
import {
|
|||
|
|
getPrice,
|
|||
|
|
getType,
|
|||
|
|
addInvestmentRecord
|
|||
|
|
} from "@/api/system/type.js";
|
|||
|
|
import {
|
|||
|
|
mapMutations
|
|||
|
|
} from "vuex";
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
neilModal,
|
|||
|
|
PayModal,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
detail: "",
|
|||
|
|
value: 2,
|
|||
|
|
result: "",
|
|||
|
|
show: false,
|
|||
|
|
title: "您确定购买吗?",
|
|||
|
|
titleStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
acer: "",
|
|||
|
|
spec: "",
|
|||
|
|
type: "",
|
|||
|
|
count: "",
|
|||
|
|
typeList: [],
|
|||
|
|
showModal: false,
|
|||
|
|
investmentObj: {},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: "加载中...",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log(calcFn);
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.fetchType();
|
|||
|
|
this.calcHandler(2);
|
|||
|
|
this.checkToken();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
...mapMutations(["logout"]),
|
|||
|
|
//就是点击下边四个tab的时候调用一下这个接口，返回false的话就调用一下退出登录，给他退掉
|
|||
|
|
checkToken() {
|
|||
|
|
this.$http("GET", "/user/userCache").then((res) => {
|
|||
|
|
if (!res.data) {
|
|||
|
|
this.logout();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
handlerChange(e) {
|
|||
|
|
console.log(e);
|
|||
|
|
// this.$navigateTo(e)
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: e,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
goHome() {
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: "/pages/index/index",
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
async init() {
|
|||
|
|
this.onInput(2);
|
|||
|
|
},
|
|||
|
|
goPerson() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/licai/mine/index",
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
handlerAgreement() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/common/webview/index?url=" +
|
|||
|
|
"http://zhongyihuashang1.oss-cn-hangzhou.aliyuncs.com/zhongyihuashang1-20230213-ca3aec9554ef4c52a413102ec47217d9.",
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
handlerClose() {
|
|||
|
|
this.showModal = false;
|
|||
|
|
},
|
|||
|
|
handlerPurchase() {
|
|||
|
|
// if (new Date().getTime() - new Date('2023-02-12').getTime() < 0) return uni.showToast({
|
|||
|
|
// icon: 'none',
|
|||
|
|
// title: '暂未开始售卖'
|
|||
|
|
// })
|
|||
|
|
if (this.value == "") {
|
|||
|
|
return uni.showToast({
|
|||
|
|
icon: "none",
|
|||
|
|
title: "请输入购买份额",
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (this.value < 2) {
|
|||
|
|
return uni.showToast({
|
|||
|
|
icon: "none",
|
|||
|
|
title: "请选择大于等于2以上的购买份额",
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// uni.showToast({
|
|||
|
|
// title: '测试使用禁止购买',
|
|||
|
|
// icon: 'none'
|
|||
|
|
// })
|
|||
|
|
this.show = true;
|
|||
|
|
},
|
|||
|
|
handlerMeal(count) {
|
|||
|
|
// if (new Date().getTime() - new Date('2023-02-12').getTime() < 0) return uni.showToast({
|
|||
|
|
// icon: 'none',
|
|||
|
|
// title: '暂未开始售卖'
|
|||
|
|
// })
|
|||
|
|
// uni.showToast({
|
|||
|
|
// title: '测试使用禁止购买',
|
|||
|
|
// icon: 'none'
|
|||
|
|
// })
|
|||
|
|
this.value = count;
|
|||
|
|
this.type = "meal";
|
|||
|
|
this.calcHandler(count);
|
|||
|
|
this.onInput(count, "meal");
|
|||
|
|
},
|
|||
|
|
// 获取消费金额
|
|||
|
|
getAmount(e) {
|
|||
|
|
this.type = "";
|
|||
|
|
let {
|
|||
|
|
value
|
|||
|
|
} = e;
|
|||
|
|
|
|||
|
|
this.calcHandler(value);
|
|||
|
|
this.onInput(value);
|
|||
|
|
},
|
|||
|
|
// 获取消费金额
|
|||
|
|
getAmountInput(e) {
|
|||
|
|
if(e.detail.value < 2) return uni.showToast({
|
|||
|
|
icon: "none",
|
|||
|
|
title: "请选择大于等于2以上的购买份额",
|
|||
|
|
})
|
|||
|
|
this.type = "";
|
|||
|
|
this.calcHandler(e.detail.value);
|
|||
|
|
this.onInput(e.detail.value);
|
|||
|
|
},
|
|||
|
|
calcHandler(value) {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.value = value;
|
|||
|
|
this.acer = calcFn.mul(value, 1);
|
|||
|
|
this.spec = calcFn.mul(10, value);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 获取购买类型列表
|
|||
|
|
async fetchType() {
|
|||
|
|
const ret = await getType({
|
|||
|
|
type: 2
|
|||
|
|
});
|
|||
|
|
this.typeList = ret.data;
|
|||
|
|
|
|||
|
|
this.init();
|
|||
|
|
uni.hideLoading();
|
|||
|
|
// this.onInput(1)
|
|||
|
|
},
|
|||
|
|
async onInput(v, type = "") {
|
|||
|
|
console.log(this.typeList[0]);
|
|||
|
|
|
|||
|
|
const {
|
|||
|
|
investmentPrice,
|
|||
|
|
investmentMonthsIncome,
|
|||
|
|
investmentMoneyRatio,
|
|||
|
|
investmentLsjfRatio,
|
|||
|
|
investmentPredictIncome,
|
|||
|
|
} = this.typeList[0];
|
|||
|
|
|
|||
|
|
let obj = {
|
|||
|
|
acres: v,
|
|||
|
|
price: investmentPrice,
|
|||
|
|
yield: investmentMonthsIncome,
|
|||
|
|
moneyRatio: investmentMoneyRatio,
|
|||
|
|
lsjfRatio: investmentLsjfRatio,
|
|||
|
|
predictIncome: investmentPredictIncome,
|
|||
|
|
};
|
|||
|
|
const ret = await getPrice(obj);
|
|||
|
|
this.result = ret.data;
|
|||
|
|
if (type) this.show = true;
|
|||
|
|
},
|
|||
|
|
//确认
|
|||
|
|
onConfirm() {
|
|||
|
|
console.log(this.detail, this.result, "ihjfdionqnoqfoi");
|
|||
|
|
console.log(this.typeList[0], 'this.typeList[0]')
|
|||
|
|
let {
|
|||
|
|
investmentName,
|
|||
|
|
investmentYield,
|
|||
|
|
investmentMonthsIncome,
|
|||
|
|
investmentPredictIncome,
|
|||
|
|
investmentPrice,
|
|||
|
|
investmentRewardRatio,
|
|||
|
|
investmentXfzMul,
|
|||
|
|
investmentXfzParMul,
|
|||
|
|
investmentXfzMerchantMul,
|
|||
|
|
id
|
|||
|
|
} = this.typeList[0];
|
|||
|
|
let {
|
|||
|
|
totalAmount,
|
|||
|
|
payMoney,
|
|||
|
|
payLsjf,
|
|||
|
|
predictIncome,
|
|||
|
|
monthIncome
|
|||
|
|
} =
|
|||
|
|
this.result;
|
|||
|
|
let obj = {
|
|||
|
|
investmentTypeName: investmentName,
|
|||
|
|
investmentYield: investmentYield,
|
|||
|
|
investmentMonthIncome: monthIncome,
|
|||
|
|
investmentPredictIncome: predictIncome,
|
|||
|
|
investmentCount: this.value,
|
|||
|
|
investmentPrice: investmentPrice,
|
|||
|
|
investmentAmount: totalAmount,
|
|||
|
|
investmentMoneyPay: payMoney,
|
|||
|
|
investmentLsjfPay: payLsjf,
|
|||
|
|
investmentRewardRatio: investmentRewardRatio,
|
|||
|
|
investmentXfzMul: investmentXfzMul,
|
|||
|
|
investmentXfzParMul: investmentXfzParMul,
|
|||
|
|
investmentXfzMerchantMul: investmentXfzMerchantMul,
|
|||
|
|
investmentEarningsMonths: 4,
|
|||
|
|
investmentTypeId: id
|
|||
|
|
};
|
|||
|
|
console.log(obj, "safdjsojfdshjiojdijsiod");
|
|||
|
|
this.show = false;
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: "加载中",
|
|||
|
|
mask: true,
|
|||
|
|
});
|
|||
|
|
addInvestmentRecord(obj).then((ret) => {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
if (ret.code == 200) {
|
|||
|
|
this.investmentObj = ret.data;
|
|||
|
|
this.showModal = true;
|
|||
|
|
this.$refs.payModal.handlerSend();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
paySucess() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '委托完成，签订合同！',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'/pages/licai/mine/record/index'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|