jiuyiUniapp/jiuyi2/pages/shop/commodity/components/jy-commodity-foot/index.vue

195 lines
3.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<script setup>
// 店铺 客服 收藏 支付
import {
ref,
reactive,
getCurrentInstance,
computed,
defineEmits,
onMounted
} from 'vue'
//
import util from '@/common/js/util.js'
//
import api from '@/api/index.js'
//
import {
useStore
} from 'vuex'
// 生成订单
import makeOrder from '@/components/shop/detail/makeOrder.vue'
const {
proxy
} = getCurrentInstance()
//
const store = useStore()
//
const props = defineProps({
// 商品信息
detail: {
type: Object,
default: () => ({})
},
})
//
const emit = defineEmits(['update'])
// 已选择的规格下标
const spaceIndex = ref(0)
// 数量
const payNum = ref(1)
// 当前选择的规格
const currentSpec = computed(() => {
let spec = props.detail.specs || []
return spec[spaceIndex.value] || {}
})
// 用户信息
const userinfo = computed(() => store.state.userinfo)
// 应付总价
const total = computed(() => {
let price = parseFloat(props.detail.price) * 100
let result = parseInt(price * payNum.value) / 100
return result
})
//
const menuFn = {
// 店铺
store() {
link('/pages/shop/store/index')
},
// 客服
customerService() {
link('/pages/news/question-answer/index')
},
// 收藏
heibianStar() {
//
}
}
/**
* 跳转
* @param {Object} url 跳转路径
*/
function link(url) {
uni.navigateTo({
url,
})
}
// 切换收藏
function handleCollect() {
//
api.shop.addProductCollect({
query: {
productId: props.detail.id,
type: {
0: 1,
1: 0,
} [props.detail.isCollect]
},
}).then(res => {
if (res.code === 200) {
emit('update', {
...props.detail,
isCollect: {
0: 1,
1: 0,
} [props.detail.isCollect]
})
return
}
util.alert({
content: res.msg,
showCancel: false,
})
})
}
/**
* 立即下单
*/
function handlePay(event) {
// 产生待付款订单
api.shop.addOrder({
data: [{
// 地址id
addressId: event.address.id,
// 产品id
productId: props.detail.id,
// 规格id
attrValueId: event.spec.id,
// 数量
payNum: event.payNum,
// 0-普通订单1-视频号订单
orderType: 0,
// 分享人id
// shareId: userinfo.id,
}],
}).then(rs => {
if (rs.code === 200) {
// 跳转
if (rs.data && rs.data[0]) uni.navigateTo({
url: util.setUrl('/pages/shop/commodity/payment', {
orderId: rs.data[0].orderId,
})
})
return
}
util.alert({
content: rs.msg,
showCancel: false,
})
})
}
</script>
<template>
<!-- 填充 -->
<view class="fill" style="height: 180rpx;"></view>
<!-- 底部 -->
<view class="footer footerMneu rows plr20 shadow bfff">
<view class="menu df fdr aic">
<view class="option ver">
<image class="wh30" src="/static/store.png" mode="widthFix" />
<view class="f24 c999 mt10">店铺</view>
</view>
<view class="option ver " @click="handleCollect">
<view class="wh30 fmid">
<uni-icons type="star-filled" size="45rpx" color="#FF9B27" v-if="detail.isCollect == 1" />
<uni-icons type="star" size="45rpx" color="#666" v-else />
</view>
<view class="f24 c999 mt10">
<text v-if="detail.isCollect == 1">已</text>
<text>收藏</text>
</view>
</view>
<!-- <view class="option ver ">
<image class="wh30" src="/static/customer-service.png" mode="widthFix" />
<view class="f24 c999 mt10">客服</view>
</view> -->
</view>
<!-- 下单 -->
<view class="btn lg primary f1 ml30" @click="$refs.makeOrderRef.open()">
<text>立即购买</text>
</view>
<!-- 立即支付 -->
<makeOrder ref="makeOrderRef" :detail="detail" @confirm="handlePay" />
</view>
</template>
<style scoped lang="scss">
// 底部菜单
.menu {
// 选项
.option {
width: 80rpx;
}
}
</style>