<template> <view style="display: flex;flex-direction: column; height: 100vh;box-sizing: border-box; background-color: #fff;" id="page"> <view class="top"> <NavBar ref="nav" navTitle="详情" :showIcon="true" :start-change-height="page.startHeight" :end-change-height="page.endHeight"> </NavBar> </view> <view style="margin-top: -15vh; background-color: #fff;height: 20vh;border-top-left-radius: 25px;border-top-right-radius: 25px;"> <loading-state ref="pageView" @request="request"> <view style="display: flex;flex-direction: column; margin:20px 10px 0px 20px;padding-bottom:10px; border-bottom: 2px #EFEFEF solid;"> <view style="display: flex;flex-direction: row;align-items: center; justify-content: space-between;"> <view style="display: flex;flex-direction: row;align-items: center;"> <view style="background: #FF9900; border-radius: 50%;width: 12px;height: 12px;"></view> <view style="background: #FFCC7F; border-radius: 50%;width: 12px;height: 12px;"></view> <text style="margin-left: 8px;font-size: 16px;color: #FF9900;font-weight: 600;font-family: sans-serif;">自选组合</text> </view> <view style="display: flex;flex-direction: row;align-items: center;margin-right: 10px;"> <view style="color: #888;font-size: 12px;">定制</view> <input type="number" @input="numbers" v-model="page.number" maxlength="3" style="font-size: 12px; border: 1px #AEAEAE solid;border-radius: 5px;text-align: center; width: 25px;margin-left: 5px;margin-right: 5px;padding-left: 3px;padding-right: 3px;" /> <view style="color: #888;font-size: 12px;">个菜窖</view> </view> </view> </view> <view v-for="(item,index) in data" :key="index" @click="itemClick(item.goodsSid)" style="display: flex;flex-direction: column;margin-top: 14px;"> <view :style="{'border-bottom':(index===data.length-1 ? 'none':'1px #EFEFEF solid')}" style="display: flex;flex-direction: column; margin-left: 20px;margin-right: 20px;padding-bottom: 10px;"> <view style=" display: flex;flex-direction: row;align-items: center; margin-right: 10px;margin-top: 5px; margin-left: 10px;"> <image :src='item.iconUrl' style="width: 70px;height: 70px;" mode="aspectFit"></image> <view style="display: flex;flex-direction: column;margin-left: 20px;width: 100%;"> <view style="display: flex;flex-direction: row;align-items: center;"> <text style="flex: 1;margin-right: 10px;color: #000;font-size: 14px;">{{item.name}}</text> <uni-number-box ref="box" :showTextView="true" background="#fff" v-model="item.goodsNumber" @change="numberChange($event,item)"></uni-number-box> </view> <text style="color: #AEAEAE;font-size: 14px;margin-top: 5px;line-height: 20px;">{{item.remark}}</text> <view style="display: flex;flex-direction: row;justify-content:space-between;margin-top: 5px;"> <view style="display: flex;flex-direction: row;height: 20px;align-items: center;"> <text style="border: 1px #EE752F solid; border-radius: 10px; color:#EE752F ; font-size: 10px; margin-right: 20px;padding: 0px 5px;">{{convertPrice(item.jprice)}}元/{{item.specificationUnit}}</text> <text style="border: 1px #EE752F solid; border-radius: 10px; color: #EE752F;font-size: 10px;;padding: 0px 5px;">{{item.weight}}斤/{{item.unitName}}</text> </view> <text style="color: #FF5006;font-size: 15px;">¥{{convertPrice(item.price)}}</text> </view> </view> </view> </view> </view> <view style="height: 200px;background: #fff; "></view> <view style="background-color: #fff;position: fixed;bottom: 0;overflow:hidden; display: flex;flex-direction: column; width: 100%;flex-shrink: 1;"> <view style="display: flex;flex-direction: row;align-items: center; border-bottom: 1px #F0F0F0 solid;padding-top: 5px; padding-bottom: 5px;padding-left: 20px;"> <view style="color: #888;font-size: 10px;">温馨提示:已定制了</view> <view style="color: #FF5006;font-size: 15px;">{{page.weight}}斤</view> <view style="color: #888;font-size: 10px;">,满200斤可定制云菜窖</view> </view> <view style="display: flex;flex-direction: row;align-items: center; margin-top: 5px; padding: 10px 20px; width: 100%;"> <view style="flex: 1; display: flex;flex-direction: row;align-items: center; ; justify-content: space-between;"> <view style="display: flex;flex-direction: row;align-items: center;"> <text style="color: #888;font-size: 14px;">合计:</text> <text style="color: #F0752F;font-size: 18px;">{{convertPrice(page.price)}}元</text> </view> </view> <text style="background: #EE752F; text-align: center; color: #fff; border-radius: 5px;padding: 5px 20px; margin-right: 40px; " @click="settlement()">结算</text> </view> </view> </loading-state> </view> </view> </template> <script> //引入bus import bus from '@/common/bus'; export default { data() { return { page: { sid: '', name: "", price: "", startHeight: 0, endHeight: 0, number: "1", weight: "--", }, data: [] } }, onPageScroll(res) { // 渐变 this.$refs.nav.defaultColorBgAlpha(res) }, onLoad(options) { let info = uni.getSystemInfoSync(); this.page.startHeight = info.windowWidth * 0.6 this.page.endHeight = info.windowWidth * 0.8 this.request() uni.$on("pay", (e) => { uni.switchTab({ url: '/pages/home/pickUpCard' }) }) }, onUnload() { uni.$off('pay'); }, methods: { itemClick(goodsSid) { uni.navigateTo({ url: '/pages/good/goodsDetail?sid=' + goodsSid }) }, numberChange(event, item) { console.log("event", event) console.log("item", item) this.getallPrice() this.getweight() this.getPrice(item) }, request() { let _this = this _this.$api.getAllGiftBag().then((resp) => { _this.data = resp this.getallPrice() this.getweight() _this.$nextTick(() => { _this.$refs.pageView.setLoadState(2) }) }).catch(e => { _this.$nextTick(() => { _this.$refs.pageView.setLoadState(1) }) }) }, numbers(event) { this.page.number = event.target.value this.getallPrice() this.getweight() }, getallPrice() { let num = 0; for (var i = 0; i < this.data.length; i++) { num += Number(this.data[i].jprice) * Number(this.data[i].goodsNumber) * Number(this.data[i].weight); } console.log("num", num) this.page.price = Number(num * this.page.number).toFixed(2) }, getPrice(item) { if (item.goodsNumber > 0) item.price = Number(item.goodsNumber * item.jprice * item.weight).toFixed(2) else item.price = "0" }, getweight() { let num = 0; for (var i = 0; i < this.data.length; i++) { num += Number(this.data[i].weight) * Number(this.data[i].goodsNumber); } this.page.weight = num }, settlement() { // 支付 if (this.page.weight < 200) { this.shortToast('满200斤才可定制云菜窖哦,请继续选菜吧。') return } if (!Number(this.page.number) > 0) { this.shortToast('请输入要定制几份云菜窖') return } let list = [] for (var i = 0; i < this.data.length; i++) { var item = this.data[i] if (item.goodsNumber > 0) list.push({ goodsSid: item.goodsSid, goodsName: item.name, partNumber: item.goodsNumber, numofPart: item.weight, priceUnit: item.jprice, pricePart: item.price, }) } // console.log("ddd", list); if (list.length == 0) { this.shortToast('请添加商品') return } var params = { customerSid: getApp().globalData.sid, cardNumber: this.page.number, totalTee: this.page.price, ordOrderDetailsVoList: list } // console.log("params", params); let _this = this _this.$api.createOrder(params).then((resp) => { // console.log("resp", resp); this.$pay(resp) }).catch(e => {}) } } } </script> <style> .top { width: 100vw; /* height: 126.66vw; */ height: 95vw; /* 加载背景图 */ background-image: url(https://supervise.yxtsoft.com/lpk/image/home_bj1.png); /* 让背景图基于容器大小伸缩 */ background-size: 100% 100%; } </style>