386 lines
9.2 KiB
Vue
386 lines
9.2 KiB
Vue
<template>
|
||
<su-fixed bottom placeholder bg="bg-white">
|
||
<view class="ui-tabbar-box">
|
||
<view class="ui-tabbar ss-flex ss-col-center ss-row-between">
|
||
<!-- <view
|
||
v-if="collectIcon"
|
||
class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
|
||
@tap="onFavorite"
|
||
>
|
||
<block v-if="modelValue.favorite">
|
||
<image
|
||
class="item-icon"
|
||
:src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/collect_1.gif')"
|
||
mode="aspectFit"
|
||
></image>
|
||
<view class="item-title">已收藏</view>
|
||
</block>
|
||
<block v-else>
|
||
<image
|
||
class="item-icon"
|
||
:src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/collect_0.png')"
|
||
mode="aspectFit"
|
||
></image>
|
||
<view class="item-title">收藏</view>
|
||
</block>
|
||
</view> -->
|
||
<view v-if="serviceIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
|
||
style="margin-left: 12rpx;" @tap="backHome">
|
||
<image class="item-icon" src="https://mall.jiangxiaoxian.hschool.com.cn/backHome.png" mode="aspectFit">
|
||
</image>
|
||
<view class="item-title">首页</view>
|
||
</view>
|
||
<!-- <view @click="backHome">
|
||
<image class="btnIcon" src="https://mall.jiangxiaoxian.hschool.com.cn/backHome.png" mode=""></image>
|
||
<view class="btnText" style="margin-top: 10rpx;">首页</view>
|
||
</view> -->
|
||
<view v-if="serviceIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
|
||
@tap="onChat">
|
||
<image class="item-icon" :src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/message.png')"
|
||
mode="aspectFit"></image>
|
||
<view class="item-title">客服</view>
|
||
</view>
|
||
<view v-if="shareIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
|
||
style="margin-right: 12rpx;" @tap="shareGoods()">
|
||
<image class="item-icon" :src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/share.png')"
|
||
mode="aspectFit"></image>
|
||
<view class="item-title">分享</view>
|
||
</view>
|
||
<slot></slot>
|
||
</view>
|
||
</view>
|
||
</su-fixed>
|
||
|
||
<su-popup :show="showLogin == true" type="center" round="10" @close="showLogin = false" @open="showLogin = true">
|
||
<view class="popup">
|
||
|
||
<button class="texbut" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
||
<!-- <image style="width: 100%;height: 136rpx;" src="https://mall.jiangxiaoxian.hschool.com.cn/loginBtnTwo.png"></image> -->
|
||
<!-- 授权登录 -->
|
||
</button>
|
||
</view>
|
||
<view style="margin: 0 auto;position: absolute;bottom: -90rpx;width: 100%;text-align: center;">
|
||
<image style="width: 50rpx;height: 50rpx;" src="https://mall.jiangxiaoxian.hschool.com.cn/registerCancel.png"
|
||
mode="aspectFill" @click="showLogin = false"></image>
|
||
</view>
|
||
</su-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
/**
|
||
*
|
||
* 底部导航
|
||
*
|
||
* @property {String} bg - 背景颜色Class
|
||
* @property {String} ui - 自定义样式Class
|
||
* @property {Boolean} noFixed - 是否定位
|
||
* @property {Boolean} topRadius - 上圆角
|
||
*
|
||
*
|
||
*/
|
||
|
||
import {
|
||
computed,
|
||
ref,
|
||
reactive
|
||
} from 'vue';
|
||
import sheep from '@/sheep';
|
||
import {
|
||
showShareModal
|
||
} from '@/sheep/hooks/useModal';
|
||
import third from '@/sheep/api/third';
|
||
import userApi from '@/sheep/api/user';
|
||
|
||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||
|
||
// 数据
|
||
const state = reactive({});
|
||
|
||
// 接收参数
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: Object,
|
||
default () {},
|
||
},
|
||
bg: {
|
||
type: String,
|
||
default: 'bg-white',
|
||
},
|
||
bgStyles: {
|
||
type: Object,
|
||
default () {},
|
||
},
|
||
ui: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
|
||
noFixed: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
topRadius: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
collectIcon: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
serviceIcon: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
shareIcon: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
});
|
||
const elStyles = computed(() => {
|
||
return {
|
||
'border-top-left-radius': props.topRadius + 'rpx',
|
||
'border-top-right-radius': props.topRadius + 'rpx',
|
||
overflow: 'hidden',
|
||
};
|
||
});
|
||
|
||
const tabbarheight = (e) => {
|
||
uni.setStorageSync('tabbar', e);
|
||
};
|
||
async function onFavorite() {
|
||
const {
|
||
code
|
||
} = await sheep.$api.user.favorite.do(props.modelValue.id);
|
||
if (code === 1) {
|
||
if (props.modelValue.favorite) {
|
||
props.modelValue.favorite = 0;
|
||
} else {
|
||
props.modelValue.favorite = 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
const goodShare = ref(false)
|
||
function shareGoods() {
|
||
console.log('shareGoods');
|
||
showShareModal();
|
||
// if(isLogin.value == true) {
|
||
// goodShare.value = false;
|
||
// showShareModal();
|
||
// }else {
|
||
// goodShare.value = true;
|
||
// toLogin();
|
||
// }
|
||
}
|
||
|
||
const isLogin = computed(() => sheep.$store('user').isLogin);
|
||
const showLogin = ref(false);
|
||
const iv = ref('');
|
||
const wxCode = ref('');
|
||
const encryptedData = ref('');
|
||
|
||
// 打开登录的弹框
|
||
function toLogin() {
|
||
console.log('toLogin——打开登录的弹框：', showLogin.value);
|
||
showLogin.value = true;
|
||
console.log('showLogin', showLogin.value);
|
||
}
|
||
// 关闭登录弹框
|
||
function closeLogin() {
|
||
console.log('closeLogin');
|
||
showLogin.value = false;
|
||
}
|
||
// 打开登录的弹框
|
||
function openLogin() {
|
||
console.log('openLogin');
|
||
showLogin.value = true;
|
||
}
|
||
// 使用微信手机号
|
||
async function getPhoneNumber(e) {
|
||
console.log('获取手机号', e, e.detail.errMsg);
|
||
if (e.detail.errMsg !== 'getPhoneNumber:ok') {} else {
|
||
encryptedData.value = e.detail.encryptedData // 用于解密
|
||
iv.value = e.detail.iv // 用于解密
|
||
getCode()
|
||
// let result = await sheep.$platform.useProvider().bindUserPhoneNumber(e.detail);
|
||
// console.log('result', result);
|
||
// if (result) {
|
||
// sheep.$store('user').getInfo();
|
||
// // closeAuthModal();
|
||
// closeLogin();
|
||
// }
|
||
}
|
||
}
|
||
// 获取code和sessionId
|
||
function getCode() {
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: (res) => {
|
||
wxCode.value = res.code
|
||
// loginResult.value = res
|
||
// getSessionId();
|
||
Login();
|
||
}
|
||
})
|
||
}
|
||
// 登录接口
|
||
function Login() {
|
||
const session_id = uni.getStorageSync('sessionId')
|
||
console.log('session_id', session_id);
|
||
return new Promise(async (resolve, reject) => {
|
||
const {
|
||
code
|
||
} = await third.wechat.wxLogin({
|
||
platform: 'miniProgram',
|
||
payload: encodeURIComponent(
|
||
JSON.stringify({
|
||
sessionId: session_id,
|
||
iv: iv.value,
|
||
encryptedData: encryptedData.value,
|
||
code: wxCode.code,
|
||
}),
|
||
),
|
||
});
|
||
if (code === 1) {
|
||
resolve(true);
|
||
showLogin.value = false;
|
||
if(goodShare.value == true) {
|
||
shareGoods();
|
||
}
|
||
if(chatPhone.value == true) {
|
||
getInfoUser();
|
||
}
|
||
}
|
||
resolve(false);
|
||
});
|
||
}
|
||
|
||
// const onChat = () => {
|
||
// sheep.$router.go('/pages/chat/index', {
|
||
// id: props.modelValue.id,
|
||
// });
|
||
// };
|
||
|
||
//获取平台客服电话
|
||
function getInfoUser() {
|
||
userApi.profile().then(res=> {
|
||
if (res.code == 1){
|
||
console.log('获取个人信息：',res.data);
|
||
userInfo.value = res.data;
|
||
console.log('联系平台客服', userInfo.value.platform_contact_number);
|
||
onChat();
|
||
};
|
||
});
|
||
}
|
||
|
||
//联系平台客服
|
||
const chatPhone = ref(false);
|
||
function onChat() {
|
||
if(isLogin.value == true) {
|
||
chatPhone.value = false;
|
||
console.log('联系平台客服', userInfo.value.platform_contact_number);
|
||
wx.makePhoneCall({
|
||
phoneNumber: userInfo.value.platform_contact_number,
|
||
success: function() {
|
||
console.log("拨打电话成功")
|
||
|
||
},
|
||
fail: function(err) {
|
||
console.log("拨打电话失败", err)
|
||
}
|
||
})
|
||
}else {
|
||
chatPhone.value = true;
|
||
toLogin();
|
||
}
|
||
|
||
}
|
||
|
||
|
||
//返回首页
|
||
function backHome() {
|
||
uni.switchTab({
|
||
// url: '/pages/index/index'
|
||
url: '/pages/index/category'
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.ui-tabbar-box {
|
||
box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
|
||
}
|
||
|
||
.ui-tabbar {
|
||
display: flex;
|
||
height: 50px;
|
||
background: #fff;
|
||
|
||
.detail-tabbar-item {
|
||
width: 90rpx;
|
||
|
||
.item-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
line-height: 20rpx;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup {
|
||
background-image: url('https://mall.jiangxiaoxian.hschool.com.cn/loginBack.png');
|
||
background-size: 100%;
|
||
width: 540rpx;
|
||
height: 640rpx;
|
||
display: flex;
|
||
padding-bottom: 44rpx;
|
||
flex-direction: column;
|
||
align-items: baseline;
|
||
justify-content: flex-end;
|
||
padding-left: 73rpx;
|
||
padding-right: 73rpx;
|
||
|
||
.img_shouquan {
|
||
position: absolute;
|
||
width: 680rpx;
|
||
height: 857rpx;
|
||
left: -25rpx;
|
||
top: -390rpx;
|
||
}
|
||
|
||
|
||
#txt2 {
|
||
text-align: center;
|
||
margin-top: 200rpx;
|
||
font-size: 28rpx;
|
||
color: #525252;
|
||
margin-bottom: 60rpx;
|
||
position: relative;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.texbut {
|
||
width: 507rpx;
|
||
height: 93rpx;
|
||
border-radius: 16rpx;
|
||
// background: #ffbd25;
|
||
background-image: url('https://mall.jiangxiaoxian.hschool.com.cn/loginBtnTwo.png');
|
||
background-size: 100%;
|
||
font-size: 34rpx;
|
||
color: #3d3d3d;
|
||
font-weight: bold;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 30rpx;
|
||
// margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
</style> |