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

138 lines
3.9 KiB
Vue

<!-- 店铺 客服 收藏 支付 -->
<template>
<view class="jy-shop-service bfff df aic jcsa ptb20" :style="{ bottom, width }">
<!-- 店铺 客服 收藏 -->
<view class="jy-service-item df fdr aic">
<view @click="fn[item.name]()" class="jy-service-icon df jcc fdc aic mlr10" v-for="(item, index) in list"
:key="index">
<image :src="item.icon" mode="widthFix"></image>
<view class="f24 c999 mt10">{{ item.text }}</view>
</view>
</view>
<!-- 订单弹窗按钮 -->
<view class="jy-service-btn df fdc jcc aic">
<!-- 价格 -->
<view class="jy-price cfff f26"> <span class="f32">{{ 9999 }}</span></view>
<!-- 会员优势 支付-->
<view class="jy-vip f24" style="color: #FFEBBD;" @click="payOpen">
<text>会员支持先用后付</text>
<text>去购买</text>
</view>
</view>
<!-- 立即支付弹窗 -->
<JyPaypPOpup ref="payPopup"></JyPaypPOpup>
</view>
</template>
<script setup>
import { ref, inject } from 'vue'
import store from '@/static/store.png';
import heibianStar from '@/static/heibian-star.png';
import customerService from '@/static/customer-service.png';
const { checkLink } = inject('util');
import JyPaypPOpup from '../jy-pay-popup';
import { bottomSafeAreaHeight, screenWidth, screenHeight } from '@/components/public/Mixins.js'
import {
shoppingCart
} from '@/api/shop'
import { useStore } from 'vuex'
const { userinfo } = useStore().state
const props = defineProps({
// 商品信息
commodityInformation: {
type: Object,
default: () => ({})
},
// 是否显示收藏图标
isShowFavorites: {
type: Boolean,
default: false
},
// 是否显示客服图标
isShowCustomerService: {
type: Boolean,
default: false
},
// 是否显示店铺图标
})
const width = ref(screenWidth())
const bottom = ref(bottomSafeAreaHeight())
const payPopup = ref(null)
const list = ref([{
name: 'store',
icon: store,
text: '店铺'
}, {
name: 'customerService',
icon: customerService,
text: '客服'
}, {
name: 'heibianStar',
icon: heibianStar,
text: '收藏'
}])
const fn = {
store() {
checkLink('pages/shop/store/index')
},
customerService() {
checkLink('pages/news/question-answer/index')
},
async heibianStar() {
try {
if (!userinfo) {
return showToastAndRedirect('请先登录', 'none', () => {
uni.heibianStar
checkLink('pages/login/loginPhone')
})
}
console.log('====================================', props);
console.log('商品收藏成功', {
storeId: props.commodityInformation.productId,
userId: userinfo.userId
});
console.log('====================================');
const res = await shoppingCart.add({
productId: props.commodityInformation.productId,
userId: userinfo.userId
})
if (res.code === 200) {
// 提示收藏成功
showToastAndRedirect('收藏成功', 'success')
}
emit('heibianStar')
} catch (error) {
}
}
}
const payOpen = () => {
payPopup.value.open()
}
</script>
<style scoped lang="scss">
//固定在底部
.jy-shop-service {
position: fixed;
.jy-service-icon {
image {
width: 36rpx;
height: 36rpx;
}
}
.jy-service-btn {
width: 462rpx;
height: 76rpx;
border-radius: 10rpx;
background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
}
}
.jy-pay-popup {
border-radius: 20px 20px 0px 0px;
}
</style>