xwc/components/order-shop/order-shop.vue

<template>
	<view class="order-shop">
		<view class="m-l-20">
			<shop-title :shop="{shop_name:item.shop_name}" :is-link="false"></shop-title>
		</view>
		<view class="order-goods">
			<order-goods :list="item.goods"></order-goods>
		</view>
		<view class="item flex row-between" @tap="onShowCoupon" v-if="orderType == 0">
			<view>店铺优惠券</view>
			<view class="flex">
				<text class="primary" v-if="item.discount_amount">-￥{{item.discount_amount }}</text>
				<text v-else class="muted">请选择</text>
				<u-icon name="arrow-right muted" size="24" class="m-l-10"></u-icon>
			</view>
		</view>
		<view class="item " v-if="use_energy > 0" style="margin:10rpx auto;height:unset;">
			<view class="flex" style="justify-content: space-between;align-items: center;">
				<view class="">
					使用抵用券
				</view>
				<view class="right">
					<view class="flex-1 m-l-20 muted" style="text-align: right;font-size: 24rpx;color: #0EB5F1;">
						可用{{(item.goods[0].price * use_energy / 100 / appConfig.energyprice).toFixed(6)}}个抵用券抵扣￥{{(item.goods[0].price * use_energy / 100).toFixed(2)}}
					</view>
					<view class="int-wrap">
						<input type="text" placeholder="请输入抵扣数量" v-model="dNumber" @input="intEnergyNum">
					</view>
					<view class="d-price" style="font-size: 24rpx;color: #FF2C3C;text-align: center;">
						抵扣{{dPrice}}元
					</view>
				</view>

			</view>

			<!-- <view class="status">
				<u-switch v-model="checked" @change='change'></u-switch>
			</view> -->
		</view>
		<view class="item flex">
			<view>配送方式</view>
			<view class="flex-1 m-l-20 muted">{{item.delivery_type_text}}</view>
			<view>
				<price-format :price="item.shipping_price"></price-format>
			</view>
		</view>
		<view class="item flex row-between col-top m-t-20" @tap="handleInvoice(item.shop_id)" v-if="item.open_invoice">
			<view>开具发票</view>
			<view class="invoice col-top">
				<text class="muted invoice--text">{{ getCurrentShopInvoice }}</text>
				<u-icon name="arrow-right muted" size="24" class="m-t-10 m-l-10"></u-icon>
			</view>
		</view>
		<view class="item flex row-between">
			<view>买家留言</view>
			<u-input v-model="remark" class="flex-1 m-l-20" :clearable="false" placeholder="请添加备注（150字以内）"></u-input>
		</view>

		<view class="item flex row-right">
			共{{item.total_num || (item.goods && item.goods[0].count)}}件，合计： <price-format weight="500"
				:color="colorConfig.primary" :first-size="36" :second-size="36"
				:price="(item.total_amount - dPrice).toFixed(2) || ((item.goods && item.goods[0].team_price)- dPrice).toFixed(2)">
			</price-format>
		</view>
		<u-popup v-if="orderType == 0" v-model="showCoupon" border-radius="14" mode="bottom" closeable
			:safe-area-inset-bottom="true">
			<view class="p-30">
				<view class="title">优惠券</view>
			</view>
			<view v-if="showCoupon">
				<tabs :current="active" :bar-width="100" :is-scroll="false">
					<tab :name="'可使用优惠券 (' + usableCoupon.length + ')'">
						<coupon-order :list="usableCoupon" :type="0" @change="onSelectCoupon" :coupon-id="couponId">
						</coupon-order>
					</tab>
					<tab :name="'不可用优惠券 (' + unusableCoupon.length + ')'">
						<coupon-order :list="unusableCoupon" :type="1" @change="showCoupon = false"></coupon-order>
					</tab>
				</tabs>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getOrderCoupon
	} from '@/api/activity'
	import {
		invoiceType
	} from "@/utils/type.js"
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		name: "order-shop",
		props: {
			item: {
				type: [Object, Array]
			},
			orderType: {
				type: Number
			},
			invoice: {
				type: [Object, Array]
			},
			use_energy: {}
		},
		data() {
			return {
				active: 0,
				remark: '',
				showCoupon: false,
				usableCoupon: [],
				unusableCoupon: [],
				usableCouponL: 0,
				unusableCouponL: 0,
				isRequest: false,
				couponId: '',
				invoiceInfo: {}, // 发票内容
				checked: false,
				dNumber: null,
				dPrice: 0
			};
		},
		computed: {
			...mapGetters(['userInfo', 'appConfig']),
			// 获取当前发票选择显示在视图上
			getCurrentShopInvoice() {
				const invoice = this.invoiceInfo;
				if (invoice.name) {
					return `${ invoice.type == 0 ? '普通发票' : '专用发票' } - ${ invoice.header_type == 0 ? '个人' : '企业' } - ${ invoice.name }`
				} else {
					return '不开发票'
				}
			}
		},
		methods: {
			onShowCoupon() {
				if (!this.isRequest) {
					uni.showLoading({
						title: '加载中...'
					})
					this.getCoupon()
				} else {
					this.showCoupon = true
				}
			},
			async getCoupon() {
				const {
					item: {
						goods,
						shop_id
					}
				} = this
				const params = goods.map(({
					item_id,
					num,
					goods_id
				}) => ({
					item_id,
					num,
					goods_id
				}))
				const {
					data,
					code
				} = await getOrderCoupon({
					goods: params,
					shop_id: shop_id
				})
				if (code == 1) {
					this.isRequest = true
					this.usableCoupon = data.suit
					this.usableCouponL = data.suit.length
					this.unusableCoupon = data.un_suit
					this.unusableCouponL = data.un_suit.length
					this.showCoupon = true
					uni.hideLoading()
				}
			},
			// 选择发票
			handleInvoice(shopId) {
				this.$Router.push({
					path: '/bundle/pages/invoice/invoice',
					query: {
						shop_id: shopId,
						invoice: JSON.stringify(this.invoiceInfo),
						type: invoiceType['SETTLEMENT']
					}
				})
			},
			onSelectCoupon(e) {
				this.couponId = e
				this.$emit('changecoupon', e)
				this.showCoupon = false
			},
			change(status) {
				if (this.userInfo.is_energy == 0) {
					uni.showToast({
						title: '请先激活抵用券',
						icon: "none"
					})
					this.checked = false
				} else {
					this.$emit('changeEnergy', status)
				}

			},
			intEnergyNum(e) {

				let num = this.item.goods[0].price * this.use_energy / 100 / this.appConfig.energyprice
				let total = this.item.goods[0].price * this.use_energy / 100
				if (e.detail.value > num) {
					uni.showToast({
						title: '输入数量大于可抵扣数量',
						icon: 'none'
					})
				}

				this.dPrice = (total / num * e.detail.value).toFixed(2)
				this.$emit('intChange', this.dPrice, this.dNumber)
			}
		},
		watch: {
			remark(val) {
				this.$emit('changeremark', {
					shop_id: this.item.shop_id,
					remark: val
				})
			},
			invoice(val) {
				console.log(val);
				const res = val.filter(el => el.shop_id == this.item.shop_id)
				if (res.length) {
					this.invoiceInfo = res[0];
				} else {
					this.invoiceInfo = {};
				}
			}
		}
	}
</script>

<style lang="scss">
	.order-shop {
		.order-goods {
			border-top: $-solid-border;
		}

		.item {
			height: 88rpx;
			padding: 0 24rpx;

			.invoice {
				display: flex;

				&--text {
					width: 300rpx;
					text-align: right;
				}
			}

			.int-wrap {
				margin: 10rpx 0;

				input {
					border: 1px solid #f1f1f1;
					line-height: 50rpx;
					height: 50rpx;
					font-size: 28rpx;
					text-align: center;
				}
			}
		}
	}
</style>