138 lines
3.9 KiB
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> |