303 lines
10 KiB
Vue
303 lines
10 KiB
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" :total-amount="item.total_amount"></order-goods>
|
||
</view>
|
||
|
||
<view class="item col-top m-t-20 subsidy-block">
|
||
<view>
|
||
<view class="item flex row-between subsidt-text" @click="joinSubsidy(1)">
|
||
<view class="bold">消费返补</view>
|
||
<view class="invoice col-top">
|
||
<u-checkbox :value="subsidy_type == 1" shape="circle"></u-checkbox>
|
||
</view>
|
||
</view>
|
||
<view class="sm">参与消费返补无法退款，如因质量问题，请联系客服</view>
|
||
</view>
|
||
|
||
<!-- <view>
|
||
<view class="item flex row-between subsidt-text" @click="joinSubsidy(2)">
|
||
<view class="bold">八折购买</view>
|
||
<view class="invoice col-top">
|
||
<u-checkbox :value="subsidy_type == 2" shape="circle"></u-checkbox>
|
||
</view>
|
||
</view>
|
||
<view class="sm">8折支付返补无法退款，如因质量问题，请联系客服</view>
|
||
</view> -->
|
||
|
||
<view class="item flex row-between subsidt-text" @click="joinSubsidy(3)">
|
||
<view class="bold">余额支付</view>
|
||
<view class="invoice col-top">
|
||
<u-checkbox :value="subsidy_type == 3" shape="circle"></u-checkbox>
|
||
</view>
|
||
</view>
|
||
<view class="sm">温馨提示：因您参与了消费返补活动点击确认收货无法退款，如因质量问题，请联系客服</view>
|
||
</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 flex" @click="chengeDelivery">
|
||
<view>配送方式</view>
|
||
<view class="flex-1 m-l-20 muted">
|
||
<template v-if="item.delivery_type == 0">
|
||
快递费
|
||
<price-format :price="item.shipping_price"></price-format>
|
||
</template>
|
||
</view>
|
||
<view>
|
||
{{delivery_type_arr[item.delivery_type]}}
|
||
<u-icon name="arrow-right muted" size="24" class="m-l-10" v-if="item.delivery_type != 1"></u-icon>
|
||
</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 || (item.goods && item.goods[0].team_price)"></price-format>
|
||
</view>
|
||
|
||
|
||
<u-modal v-model="showDelivery" title="请选择配送方式" showCancelButton @confirm="changeDeliveryType" :confirm-color="colorConfig.primary" :z-index="9999">
|
||
<view class="delivery nr" >
|
||
<view class="flex row-between bg-body delivery-item" @click="delivery_type=0">
|
||
<text>快递发货</text>
|
||
<u-checkbox :value="delivery_type == 0" shape="circle"></u-checkbox>
|
||
</view>
|
||
<view class="flex row-between bg-body m-t-20 delivery-item" @click="delivery_type=2" v-if="!teamId && bargainLaunchId==-1">
|
||
<text>线下自提</text>
|
||
<u-checkbox :value="delivery_type == 2" shape="circle"></u-checkbox>
|
||
</view>
|
||
</view>
|
||
</u-modal>
|
||
|
||
<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 {
|
||
mapActions,
|
||
mapGetters
|
||
} from 'vuex';
|
||
import {
|
||
getOrderCoupon
|
||
} from '@/api/activity'
|
||
import { invoiceType } from "@/utils/type.js"
|
||
export default {
|
||
name: "order-shop",
|
||
props: {
|
||
item: {
|
||
type: [Object, Array]
|
||
},
|
||
teamId: {
|
||
type: [Number, undefined]
|
||
},
|
||
bargainLaunchId: {
|
||
type: [Number, undefined]
|
||
},
|
||
orderType: {
|
||
type: Number
|
||
},
|
||
invoice: {
|
||
type: [Object, Array]
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
active: 0,
|
||
remark: '',
|
||
showCoupon: false,
|
||
showDelivery: false,
|
||
delivery_type: 0,
|
||
wholesale_type: 0,
|
||
delivery_type_arr: ['快递发货', '虚拟发货', '线下自提'],
|
||
usableCoupon: [],
|
||
unusableCoupon: [],
|
||
usableCouponL: 0,
|
||
unusableCouponL: 0,
|
||
isRequest: false,
|
||
couponId: '',
|
||
invoiceInfo: {},
|
||
subsidy_type: 1
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters(['userInfo']),
|
||
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
|
||
}
|
||
},
|
||
joinSubsidy(type) {
|
||
if (type == 2) {
|
||
this.$toast({ title: "功能维护中" })
|
||
return false
|
||
}
|
||
this.subsidy_type = type
|
||
this.$emit('joinSubsidy', type);
|
||
},
|
||
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()
|
||
}
|
||
},
|
||
chengeDelivery() {
|
||
if( this.item.delivery_type == 1 ) return
|
||
this.showDelivery = true
|
||
},
|
||
changeDeliveryType() {
|
||
this.$emit('changeDeliveryType', this.delivery_type)
|
||
},
|
||
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
|
||
},
|
||
},
|
||
watch: {
|
||
remark(val) {
|
||
this.$emit('changeremark', {
|
||
shop_id: this.item.shop_id,
|
||
remark: val
|
||
})
|
||
},
|
||
invoice(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;
|
||
}
|
||
|
||
.subsidy-block {
|
||
height: 300rpx !important;
|
||
margin-top: 0;
|
||
|
||
.subsidt-text {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
.item {
|
||
height: 88rpx;
|
||
padding: 0 24rpx;
|
||
|
||
.invoice {
|
||
display: flex;
|
||
&--text {
|
||
width: 300rpx;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.delivery {
|
||
padding: 60rpx 40rpx;
|
||
&-item {
|
||
padding: 24rpx 14rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
</style>
|