607 lines
14 KiB
Vue
607 lines
14 KiB
Vue
|
||
<style lang="scss" scoped>
|
||
.header_bar {
|
||
width: 750rpx;
|
||
height: 693rpx;
|
||
position: relative;
|
||
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/detail_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: 18rpx 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 {
|
||
width: 700rpx;
|
||
height: 365rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
margin-top: 16rpx;
|
||
overflow: hidden;
|
||
.title {
|
||
height: 94rpx;
|
||
background: #222222;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28;
|
||
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;
|
||
}
|
||
</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/headerbar_bg.png" mode=""></image>
|
||
</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>
|
||
|
||
</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 }}元+{{ result.payLsjf }}个绿色积分
|
||
</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>
|
||
<!-- <neil-modal :show="show" :title="title" @cancel="show=false" @confirm="onConfirm"></neil-modal> -->
|
||
<payModal
|
||
:show="showModal"
|
||
:investmentObj="investmentObj"
|
||
@handlerClose="handlerClose"
|
||
@handlerConfirm="handlerClose"
|
||
ref="payModal"
|
||
></payModal>
|
||
<!-- <u-tabbar
|
||
value="/pages/chili/index"
|
||
@change="handlerChange"
|
||
:fixed="true"
|
||
:placeholder="false"
|
||
:safeAreaInsetBottom="false"
|
||
activeColor="#ed6146"
|
||
inactiveColor="#000000"
|
||
>
|
||
<u-tabbar-item text="首页" name="/pages/chili/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/chili/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> -->
|
||
</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: 1,
|
||
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(1);
|
||
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(1);
|
||
},
|
||
goPerson() {
|
||
uni.navigateTo({
|
||
url: "/pages/chili/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() {
|
||
return uni.showToast({
|
||
icon: 'none',
|
||
title: '已售馨！'
|
||
})
|
||
if (this.value == "") {
|
||
return uni.showToast({
|
||
icon: "none",
|
||
title: "请输入购买份额",
|
||
});
|
||
}
|
||
// 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) {
|
||
console.log(e);
|
||
this.type = "";
|
||
let { value } = e;
|
||
this.calcHandler(value);
|
||
this.onInput(value);
|
||
},
|
||
calcHandler(value) {
|
||
this.$nextTick(() => {
|
||
this.value = value;
|
||
this.acer = calcFn.mul(value, 0.1);
|
||
this.spec = calcFn.mul(40, value);
|
||
});
|
||
},
|
||
// 获取购买类型列表
|
||
async fetchType() {
|
||
const ret = await getType({
|
||
type:1
|
||
});
|
||
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: 6,
|
||
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();
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
|