枕头定制小程序项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

318 lines
6.6 KiB

<template>
<view>
<view class="img_box">
<image :show-menu-by-longpress="true" class="img" mode="widthFix" :src="bgSrc"></image>
<!-- <img class="img" src="../../../static/image/bag.jpg" mode=""></img> -->
</view>
<view class="per_box">
<view class="my_box" @click="turnMyPage">
<view class="image_box">
<image class="img" src="../../../static/image/person.png" mode=""></image>
</view>
<view class="per_txt">
我的
</view>
</view>
<view class="line"></view>
<view class="service_box" @click="turnShouhou">
<view class="image_box">
<image class="img" src="../../../static/image/icon-contact.png" mode=""></image>
</view>
<view class="per_txt">
客服
</view>
</view>
</view>
<view class="bottom_box">
<!-- <button class="btn" @click="addForm">填写报名单其他渠道已购买</button> -->
<button v-if="!hasPhone" open-type="getPhoneNumber" class="btn"
@getphonenumber="getPhoneNumber">立即定制</button>
<button v-else class="btn" @click="clickCustom">立即定制</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userInfo: {},
phone: '',
hasPhone: false,
bgSrc: '', //背景图片
}
},
onShow() {
let userInfo = uni.getStorageSync('userInfo');
if (userInfo) {
this.userInfo = JSON.parse(userInfo);
// console.log('home',userInfo)
if(this.userInfo.phone) {
this.phone = this.userInfo.phone;
this.hasPhone = true;
}
}
//商品信息
this.queryGoodsInfo();
},
methods: {
//商品信息
queryGoodsInfo() {
uni.request({
url: getApp().globalData.baseUrl + '/blade-system/dict-biz/get-goods-info',
method: 'GET',
success: (res) => {
if (JSON.stringify(res.data.data) !== '{}') {
this.bgSrc = res.data.data.imgPath;
} else {
this.bgSrc = getApp().globalData.imgPrefix + 'bag.jpg';
}
}
})
},
// 点击定制
clickCustom() {
console.log('点击定制');
uni.navigateTo({
url: '/pages/pages_zhentou/order/confirmOrder'
})
},
// 跳转到我的页面
turnMyPage() {
uni.navigateTo({
url: "/pages/pages_zhentou/myPage/myPage"
})
},
// 跳转到售后页面
turnShouhou() {
uni.navigateTo({
url: "/pages/pages_zhentou/contact/contact"
})
},
// 填写表单
addForm() {
uni.switchTab({
url: '/pages/pages_zhentou/form/form'
});
},
//获取手机号
getPhoneNumber(e) {
if(e.detail.errMsg == 'getPhoneNumber:fail user deny'){
return;
}
console.log(e, '获取手机号授权')
uni.request({
url: getApp().globalData.baseUrl + '/app/phone', //仅为示例,并非真实接口地址。
method: 'POST',
data: {
code: e.detail.code
},
success: (res) => {
if (res.data.code == 200) {
this.phone = res.data.data;
this.hasPhone = true;
// uni.setStorageSync('phone', res.data.data);
this.doSave();
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
}
},
fail: function(res) {
// 获取手机号码失败
if (res.errMsg == 'getPhoneNumber:fail user deny') {
// 用户取消授权
uni.showToast({
title: '您未授权获取手机号码',
icon: 'none',
duration: 2000
})
}
}
})
},
//存储用户信息
doSave() {
uni.request({
url: getApp().globalData.baseUrl + '/weChatUser/save',
method: 'POST',
data: {
openId: getApp().globalData.openId,
username: this.userInfo.nickName,
phone: this.phone,
avatar: this.userInfo.avatarUrl
},
success: (res) => {
if (res.data.code == 200) {
uni.setStorageSync('userInfo', JSON.stringify(res.data.data));
//登录
this.doLogin(1);
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
}
}
})
},
//登录
doLogin(type) {
uni.showLoading({
title: '登录中',
mask: true
});
uni.request({
url: getApp().globalData.baseUrl + '/blade-auth/getToken',
method: 'POST',
data: {
openId: getApp().globalData.openId,
username: this.userInfo.username,
phone: this.phone
},
header: {
'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0'
},
success: (res) => {
if (res.data.code == 200) {
uni.setStorageSync('token', res.data.data.access_token);
if(type == 1) {
this.clickCustom();
}
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
}
},
complete: () => {
uni.hideLoading();
}
})
}
}
}
</script>
<style lang="scss" scoped>
.img_box {
padding-bottom: 180rpx;
.img {
width: 100%;
}
}
.per_box {
width: 70rpx;
height: 242rpx;
background: rgba(255, 255, 255, 0.8);
border-radius: 20rpx 20rpx 20rpx 20rpx;
position: fixed;
top: 30rpx;
right: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
.line{
width: 43rpx;
height: 2rpx;
background: #000;
margin: 16rpx 0;
}
.my_box{
width: 70rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.image_box {
width: 44rpx;
height: 44rpx;
.img {
width: 100%;
height: 100%;
}
}
}
.service_box{
width: 70rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.image_box {
width: 44rpx;
height: 44rpx;
.img {
width: 100%;
height: 100%;
}
}
}
.per_txt {
margin-top: 10rpx;
color: #333;
font-size: 24rpx;
}
}
.bottom_box {
width: 100%;
height: 180rpx;
border-radius: 30rpx 30rpx 0rpx 0rpx;
background: #fff;
position: fixed;
bottom: 0rpx;
display: flex;
flex-direction: column;
align-items: center;
// justify-content: center;
.btn {
width: 690rpx;
height: 90rpx;
background: #D73232;
border-radius: 20rpx 20rpx 20rpx 20rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-top: 30rpx;
// &:first-child {
// background: #E9B332;
// margin-bottom: 40rpx;
// display: flex;
// flex-direction: column;
// .form_txt{
// height: 50rpx;
// font-size: 28rpx;
// display: flex;
// align-items: center;
// }
// .form_txt1{
// height: 30rpx;
// display: flex;
// align-items: center;
// }
// }
}
}
</style>