mall_client/zyhs3_uniapp/pages/chili/index.vue

607 lines
14 KiB
Vue
Raw Normal View History

2026-03-13 07:50:35 +00:00
<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">401分地</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">2005分地</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>