初始化仓库
This commit is contained in:
wangxiaowei
333
components/order-shop/order-shop.vue
Normal file
333
components/order-shop/order-shop.vue
Normal file
@ -0,0 +1,333 @@
|
||||
<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 flex" @click="chengeDelivery">
|
||||
<view>配送方式</view>
|
||||
<view class="flex-1 m-l-20 muted">
|
||||
<template v-if="item.delivery_type == 1">
|
||||
快递费
|
||||
<price-format :price="item.shipping_price"></price-format>
|
||||
</template>
|
||||
</view>
|
||||
<!-- TODO -->
|
||||
<view>
|
||||
<!-- {{ deliveryType.delivery_type_text || "" }} -->
|
||||
{{ item.delivery_types_arr[delivery_type_index].delivery_type_text }}
|
||||
<u-icon name="arrow-right muted" size="24" class="m-l-10"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="flex pickCard"
|
||||
@click="openLocation(item)"
|
||||
v-if="item.delivery_types_arr[delivery_type_index].delivery_type_text == '线下自提'"
|
||||
>
|
||||
<view>
|
||||
<image class="icon-md m-r-20" src="/static/images/icon_address.png"></image
|
||||
></view>
|
||||
<view class="text"
|
||||
><view
|
||||
>{{ item.province }} {{ item.city }}{{ item.district }} {{ item.address }}
|
||||
</view>
|
||||
<view class="muted">
|
||||
营业时间:{{ item.run_start_time }} ~ {{ item.run_end_time }}
|
||||
</view></view
|
||||
>
|
||||
<!-- <u-icon
|
||||
name="arrow-right muted"
|
||||
size="24"
|
||||
class="m-t-10 m-l-10"
|
||||
style="margin-left: auto"
|
||||
></u-icon> -->
|
||||
</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"
|
||||
v-for="(item2, index) in item.delivery_types_arr"
|
||||
:key="index"
|
||||
>
|
||||
<view
|
||||
class="flex row-between bg-body delivery-item"
|
||||
@click="delivery_type = item2.delivery_type"
|
||||
>
|
||||
<text>{{ item2.delivery_type_text }}</text>
|
||||
<u-checkbox
|
||||
:value="item2.delivery_type == delivery_type"
|
||||
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 { 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: this.item.delivery_type,
|
||||
delivery_type_index: 0,
|
||||
usableCoupon: [],
|
||||
unusableCoupon: [],
|
||||
usableCouponL: 0,
|
||||
unusableCouponL: 0,
|
||||
isRequest: false,
|
||||
couponId: '',
|
||||
invoiceInfo: {} // 发票内容
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 获取当前发票选择显示在视图上
|
||||
getCurrentShopInvoice() {
|
||||
const invoice = this.invoiceInfo
|
||||
if (invoice.name) {
|
||||
return `${invoice.type == 0 ? '普通发票' : '专用发票'} - ${
|
||||
invoice.header_type == 0 ? '个人' : '企业'
|
||||
} - ${invoice.name}`
|
||||
} else {
|
||||
return '不开发票'
|
||||
}
|
||||
}
|
||||
// deliveryType() {
|
||||
// console.log(this.item, 1234);
|
||||
// return this.item.delivery_types_arr.find((i) => {
|
||||
// return i.delivery_type == this.delivery_type;
|
||||
// });
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
openLocation(row) {
|
||||
uni.openLocation({
|
||||
latitude: Number(row.info.latitude), //要去地点的纬度
|
||||
longitude: Number(row.info.longitude), ///要去地点的经度-地址
|
||||
name: row.info.name, //地点名称
|
||||
address: row.info.address_detail //详细地点名称
|
||||
})
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
chengeDelivery() {
|
||||
// if (this.item.delivery_type == 1) return;
|
||||
this.showDelivery = true
|
||||
},
|
||||
changeDeliveryType() {
|
||||
this.delivery_type_index = this.item.delivery_types_arr.findIndex(
|
||||
(iten) => iten.delivery_type === this.delivery_type
|
||||
)
|
||||
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;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 88rpx;
|
||||
padding: 0 24rpx;
|
||||
|
||||
.invoice {
|
||||
display: flex;
|
||||
&--text {
|
||||
width: 300rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delivery {
|
||||
&-item {
|
||||
padding: 24rpx 14rpx;
|
||||
margin: 0 40rpx 30rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
.pickCard {
|
||||
padding: 24rpx;
|
||||
height: 100rpx;
|
||||
background-color: #ffefe9;
|
||||
margin: 0 24rpx;
|
||||
border-radius: 20rpx;
|
||||
.text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user