<!--买家求购确认页--> <template> <LayoutApp :show-back="true" title="出价求购"> <div class="body" ref="body"> <div class="topContainer"> <!--<div class="topView">--> <!--<div class="title"></div>--> <!--</div>--> <!--商品信息--> <div class="productDetail"> <div class="productImageWrapper"> <ImageFormat class="image" :lazy="lazy" :src="originProductData.image" :width="136" :height="180"></ImageFormat> </div> <div class="productPrice"> <span class="size">{{sizeInfo}}</span> <div class="pricedetail"> <div> <span class="priceTitle">现货最低售价: </span> <span class="price">¥{{originProductData.least_price || '-'}}</span> </div> <div> <span class="priceTitle">现货最高求购价: </span> <span class="price">¥{{originProductData.bid_moster_price || '-'}}</span> </div> </div> </div> </div> <div class="inputView"> <span class="inputViewIcon"> ¥ </span> <Input ref="myinput" class="wordText" v-model="inputPrice" type="number" placeholder="定价需以9为结尾" @input="onTextChange"></Input> </div> <div> <div class="sales"> <span class="tipHeaderText">需要支付定金:</span> <span class="tipPriceText">¥{{computeInfo.depositAmount}}</span> </div> </div> <div class="saleDetailTips"> {{configTip.tips}} </div> <div class="space"></div> <div class="line"></div> <div class="space"></div> <div class="feeContainer" v-for="(item,index ) in computeInfo.promotionFormulaList"> <span :class="{'feeCommonText': true, 'feeTotalLeft':index === computeInfo.promotionFormulaList.length - 1}">{{item.promotion}}</span> <span :class="{'feeCommonText': true, 'feeTotalRight':index === computeInfo.promotionFormulaList.length - 1}">{{item.promotionAmount}}</span> </div> <div class="space"></div> <div class="line"></div> <div class="space"></div> <order-address :data="addressInfo"></order-address> <div class="line"></div> <div class="space"></div> <!--<day-choose :chooseDay="chooseDay" :options="dayOptions" :choose="BUYER_ASK_SET_CHOOSEDAY"></day-choose>--> <div class="dayChoose" @click="showPicker"> <span class="leftText" >求购期限:</span> <div class="rightWrapper"> <span class="rightText">{{chooseDay || '7天'}}</span> <i class="cubeic-arrow" ></i> </div> </div> <div class="space"></div> <div class="line"></div> </div> </div> <div class="bottomContainer"> <OrderAgree :value="isAgreeTerms" @input="isAgreeTerms = !isAgreeTerms" class="agree-wrapper" :desc="agreeDesc" :url="url"></OrderAgree> <div class="btn-wrapper"> <YohoButton class="submit-btn" :txt="submitText" :disable="!isAgreeTerms" @click="submitClick"></YohoButton> </div> </div> </LayoutApp> </template> <script> import {Input, Button} from 'cube-ui'; import OrderAddress from './components/confirm/address'; import DayChoose from './components/askorder/day-choose'; import OrderAgree from './components/confirm/agree'; import { createNamespacedHelpers } from 'vuex'; import {debounce, get} from 'lodash'; const {mapState, mapActions, mapMutations, mapGetters} = createNamespacedHelpers( 'order/buyerAskOrder' ); export default { name: 'BuyerAskOrder', components: {Button, Input, DayChoose, OrderAddress, OrderAgree}, props: ['lazy', 'storageId'], component: { Input, OrderAddress, Button, }, data() { return { inputPrice: '', isAgreeTerms: false, url: 'https://activity.yoho.cn/feature/6775.html?share_id=9481&title=%E9%97%B2%E9%B1%BC%E4%B9%B0%E5%AE%B6%E5%8D%8F%E8%AE%AE', agreeDesc: '有货买家协议', submitText: '提交', }; }, computed: { ...mapState([ 'notFirstOrder', 'addressInfo', 'originProductData', 'configTip', 'computeInfo', 'isShowToast', 'toasMessage', 'chooseDay', 'isShowDialog', 'preTip', 'publishresult', ]), ...mapGetters([ 'dayOptions', 'chooseDayId', ]), sizeInfo: { get() { return this.originProductData.colorName + ', ' + this.originProductData.sizeName + '码';// '黑色, 48码'; } }, }, beforeRouteEnter(to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 if (from.name !== 'address') { vm.inputPrice = ''; vm.BUYER_ASK_RESET_DATA(); } }); }, mounted() { this.BUYER_ASK_SET_STORAGEID(this.storageId); this.fetchBuyerOrderCount({ tabType: 'buy'}); this.fetchConfig(); this.$on('addressinfo', function(address) { console.log(address); }); }, watch: { isShowToast(val) { if (val) { this.showToast(); } }, // isShowDialog(val) { // if (val) { // this.showDialog(); // } // }, addressInfo(val) { if (this.inputPrice && val) { this.computePrice(); } }, inputPrice(val) { console.log(val); } }, methods: { ...mapMutations([ 'BUYER_ASK_SET_SHOWTOAST', 'BUYER_ASK_SET_CHOOSEDAY', 'BUYER_ASK_SET_SHOWDIALOG', 'BUYER_ASK_SET_STORAGEID', 'BUYER_ASK_RESET_DATA', ]), ...mapActions([ 'fetchConfig', 'fetchBuyerOrderCount', 'buyerCompute', 'buyerPrePublish', 'buyerPublish', ]), onTextChange: debounce(function() { if (this.originProductData.least_price && this.originProductData.skup && this.originProductData.least_price <= this.inputPrice) { this.showBuyDialog(); } else { this.computePrice(); } }, 500, {leading: false, trailing: true}), showToast() { this.BUYER_ASK_SET_SHOWTOAST(false); this.$createToast({ time: 1000, type: 'txt', txt: this.toasMessage }).show(); }, showBuyDialog() { this.$refs.myinput.blur(); this.$createDialog({ type: 'confirm', title: '求购价格过高', content: '您的出价高于当前售价,建议直接购买', confirmBtn: { text: '去购买', active: true, disabled: false, href: 'javascript:;', }, cancelBtn: { text: '取消', active: false, disabled: false, href: 'javascript:;' }, onConfirm: () => { this.$router.push({ name: 'OrderBuyConfirm', query: { storageId: this.storageId || '', skup: this.originProductData.skup || '', productId: this.originProductData.productId || '', }, }); }, onCancel: () => { this.computePrice(); } }).show(); }, showDialog() { this.BUYER_ASK_SET_SHOWDIALOG(false); let that = this; if (this.preTip) { this.$createDialog({ type: 'confirm', title: this.preTip.title || '', content: this.preTip.content || `确认以${this.inputPrice}元的价格求购`, confirmBtn: { text: this.preTip.confirm, active: true, disabled: false, href: 'javascript:;', }, cancelBtn: { text: this.preTip.cancel, active: false, disabled: false, href: 'javascript:;' }, onConfirm: () => { that.publishProduct(); }, onCancel: () => { } }).show(); } else { that.publishProduct(); } }, submitClick: debounce(function() { this.buyerPrePublish({price: this.inputPrice, storage_id: this.storageId, address_id: this.addressInfo.address_id}) .then((res) => { if (res && res.code == 200) { this.showDialog(); } }); }, 500, {leading: false, trailing: true}), publishProduct() { this.buyerPublish({price: this.inputPrice, storage_id: this.storageId, address_id: this.addressInfo.address_id, time_limit_id: this.chooseDayId}).then(() => { this.payOrder(); }); }, computePrice() { if (!this.inputPrice) { console.log('inputPrice is null'); return; } this.buyerCompute({price: this.inputPrice, storage_id: this.storageId, address_id: this.addressInfo.address_id || '' }); }, payOrder() { let vm = this; this.$createOrderPayType({ price: get(this.publishresult, 'depositAmount', ''), desc: '定金', orderCode: get(this.publishresult, 'orderCode', ''), extra: JSON.stringify({ type: 'buy', back: { name: 'ProductDetail', params: { productId: get(this.originProductData, 'productId', '') } }, forward: { type: 'buy', name: 'buyOrderDetail', params: { code: get(this.publishresult, 'orderCode', ''), owner: 'buy', } } }), onCloseAction() { vm.onClose(get(vm.publishresult, 'orderCode', '')); } }).show(); }, showPicker() { console.log(this.options); this.$createPicker({ title: '选择求购时限', data: [this.dayOptions], onSelect: (value) => { this.BUYER_ASK_SET_CHOOSEDAY(value[0]); }, selectedIndex: [2], onCancel: () => { } }).show(); }, onClose(orderCode) { if (orderCode) { this.$router.replace({ name: 'buyOrderDetail', params: { owner: 'buy', code: orderCode } }); } } } }; </script> <style lang="scss" scoped> .dayChoose { height: 60px; font-family: PingFang-SC-Regular; font-size: 14*2px; color: #000000; display: flex; justify-content: space-between; flex-direction: row; } .body { height: 100%; /*position: relative;*/ padding-bottom: 200px; overflow-y: auto; } .topContainer { /*height: calc(100% - 100*2px);*/ padding-left: 20*2px; padding-right: 20*2px; /*margin-bottom: 200px;*/ } .topView { width: 100%; height: 167px; display: flex; align-items: flex-start; background-color: white; } .title { font-weight: bold; font-size: 34*2px; color: #000; letter-spacing: 0.41*2px; line-height: 41*2px; margin-left: 20*2px; margin-top: 5*2px; } .productDetail { display: flex; flex-direction: row; width: calc(100% - 40*2px); height: 120*2px; margin-left: 20*2px; align-items: center; margin-top: 5*2px; background-color: white; } .productImageWrapper { width: 120*2px; height: 120*2px; background-color: white; display: flex; justify-content: center; align-items: center; overflow: hidden; } .productImage { width: 110*2px; height: 110*2px; } .productPrice { width: calc(100% - 120*2px - 10*2px); height: 120*2px; margin-left: 10*2px; justify-content: center; display: flex; flex-direction: column; } .size { font-family: "PingFang SC"; font-size: 12*2px; color: #999; letter-spacing: 0; } .pricedetail { height: 30*2px; margin-top: 5*2px; } .priceTitle { font-family: "PingFang SC"; font-size: 14*2px; color: #000; letter-spacing: 0; } .price { font-family: "DIN Alternate"; font-size: 14*2px; color: #000; line-height: 20.5*2px; letter-spacing: 0px; } .priceTip { font-family: "PingFang SC"; font-size: 12*2px; color: #D0021B; letter-spacing: 0px; width: 80*2px; text-align: right; } .inputView { width: calc(100%); height: 50*2px; border-radius: 5*2px; display: flex; flex-direction: row; align-items: center; background-color: #f5f5f5; } .inputViewIcon{ line-height: 50*2px; font-size: 20*2px; color: #000; margin-left: 10*2px; } .wordText { margin-left: 10*2px; font-family: "DIN Alternate"; font-size: 20*2px; height: 100%; line-height: 100%; color: #000; width: 100%; background-color: transparent; } .sales { display: flex; flex-direction: row; align-items: center; } .tipHeaderText { font-family: "PingFang SC"; font-size: 14*2px; color:#000; letter-spacing: 0; //<!--margin-left: 20*2px;--> margin-top: 15*2px; } .tipPriceText { font-family: "PingFang SC"; font-size: 14*2px; color: #D0021B; letter-spacing: 0; margin-top: 15*2px; } .saleDetailTips { font-family: "PingFang SC"; font-size: 12*2px; color: #999; letter-spacing: 0px; margin-top: 5*2px; //<!--margin-left: 20*2px;--> width: calc(100% - 40*2px); } .space { width: 100%; background-color: white; height: 20*2px; } .line { width: 100%; height: 1*2px; background-color: #eee; } .priceCell { display: flex; width: 100%; height: 25*2px; align-items: center; justify-content: space-between; } .feeContainer { display: flex; align-items: center; justify-content: space-between; flex-direction: row; margin-bottom: 6*2px; } .feeCommonText { font-family: PingFang-SC-Regular; font-size: 14*2px; color: #999999; letter-spacing: 0; } .feeTotalLeft { font-family: PingFang-SC-Regular; font-size: 14*2px; color: #000000; letter-spacing: 0; } .feeTotalRight { font-family: PingFangSC-Regular; font-size: 14*2px; color: #D0021B; letter-spacing: 0; text-align: right; } .bottomContainer { position: absolute; bottom: 0px; /*height: 100px;*/ width: 100%; left: 0px; z-index: 1; } .agree-wrapper { height: 60px; background-color: white; border-top: 1px solid #eee; padding: 0 40px; line-height: 60px; } .submit-btn { height: 80px; line-height: 80px; font-size: 28px; } .btn-wrapper { padding: 0 40px 40px; background-color: white; } .cube-picker-panel { height: 273px; text-align: center; font-size: 14px; background: #fff; border-top-left-radius: 15px !important; border-top-right-radius: 15px !important; } </style>