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.
332 lines
7.7 KiB
332 lines
7.7 KiB
<template>
|
|
<view class="container">
|
|
<view class="details-container">
|
|
<uni-swiper-dot class="uni-swiper-dot-box" field="content">
|
|
<swiper style="height: 245px;" indicator-dots indicator-color="rgba(255, 255, 255, 0.50)"
|
|
indicator-active-color="#ffffff" autoplay interval="3000">
|
|
<swiper-item class="swiper-box" v-for="(item,index) in slideshow" :key="index">
|
|
<img :src="item"
|
|
style="width: 100%; height:100%" />
|
|
</swiper-item class="swiper-box">
|
|
</swiper>
|
|
</uni-swiper-dot>
|
|
<view class="details-price">
|
|
<view class="details-price1">
|
|
<view class="details-price-normal">
|
|
<text class="details-price-big">￥{{detailInfo.price}}.00</text>
|
|
<text>{{detailInfo.unit}}</text>
|
|
</view>
|
|
<button open-type="share" @click="sharePage" class="share-btn">
|
|
<img src="../../static/images/details/share.svg" style="width: 14px;height: 14px; margin-right:5px" alt="share"
|
|
srcset="">
|
|
</button>
|
|
|
|
</view>
|
|
<view class="details-price2">
|
|
<text class="details-price-item">{{detailInfo.name}}</text>
|
|
<button class="details-price-share share-btn" open-type="share" @click="sharePage">分享</button>
|
|
</view>
|
|
</view>
|
|
<view class="details-banner">
|
|
<view class="details-banner-item">
|
|
<!-- <img src="../../static/images/details/right.svg" alt="right">
|
|
<text>全程直播</text> -->
|
|
<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/second_stage/spzb.png"
|
|
style="width: 96px;" mode="widthFix" alt="">
|
|
</view>
|
|
<view class="details-banner-item">
|
|
<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/second_stage/fwdj.png"
|
|
style="width: 109px;" mode="widthFix" alt="">
|
|
<!-- <img src="../../static/images/details/right.svg" alt="right">
|
|
<text>1v1服务</text> -->
|
|
</view>
|
|
<view class="details-banner-item">
|
|
<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/second_stage/kspp.png"
|
|
style="width: 96px;" mode="widthFix" alt="">
|
|
<!-- <img src="../../static/images/details/right.svg" alt="right">
|
|
<text>及时匹配</text> -->
|
|
</view>
|
|
|
|
</view>
|
|
<view class="details-img">
|
|
<img :src="detailInfo.detailPic" style="width: 100%;" mode="widthFix" show-menu-by-longpress />
|
|
</view>
|
|
|
|
</view>
|
|
<view class="details-subscribe">
|
|
<button v-if="isMember" class="details-btn" @click="goSubscribe">去预约</button>
|
|
<button v-else class="details-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">去预约</button>
|
|
</view>
|
|
<Kefu></Kefu>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { setToken,getToken,getOpenIdKey } from '@/utils/auth'
|
|
import Kefu from '../common/kefu.vue'
|
|
import {
|
|
getProductDetails,
|
|
getPhoneNumber
|
|
} from '@/api/system/user.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentProductId: '',
|
|
isAgree: false,
|
|
code: '',
|
|
detailInfo: {},
|
|
skus: null,
|
|
slideshow: [],
|
|
isMember:false
|
|
};
|
|
},
|
|
components:{
|
|
Kefu
|
|
},
|
|
mounted() {
|
|
// this.currentProductId = this.$globalData.selectedProductId;
|
|
console.log(this.currentProductId);
|
|
this.getDetailInfo();
|
|
},
|
|
|
|
methods: {
|
|
getDetailInfo() {
|
|
getProductDetails(this.currentProductId).then(response => {
|
|
this.detailInfo = response.product
|
|
this.skus = response.skus
|
|
if(response.product&&response.product.albumPics){
|
|
this.slideshow = response.product.albumPics.split(",")
|
|
}
|
|
})
|
|
},
|
|
sharePage() {
|
|
uni.shareAppMessage({
|
|
title: '猫妈狗爸',
|
|
path: `/pages/details/detail?id=${this.currentProductId}`,
|
|
imageUrl: this.detailInfo.pic
|
|
})
|
|
},
|
|
changeAgree() {
|
|
console.log(this.isAgree);
|
|
if (this.isAgree) {
|
|
this.isAgree = false
|
|
} else {
|
|
this.isAgree = true
|
|
}
|
|
},
|
|
|
|
goSubscribe() {
|
|
if (this.skus) {
|
|
let productSku = {
|
|
"skuId": this.skus[0].id,
|
|
"quantity": 1
|
|
}
|
|
this.$store.commit('setPosition', {})
|
|
this.buyInfo.teacher = null
|
|
this.$globalData.newOrderData={
|
|
currentAddress:{},
|
|
currentPets:[],
|
|
totalPrice:0,
|
|
needPreFamiliarize:[]
|
|
}
|
|
this.$globalData.mainSku = [productSku]
|
|
uni.navigateTo({
|
|
url: `/pages/newOrder/serviceNew`
|
|
// url: `/pages/details/service?price=${this.detailInfo.price}`
|
|
});
|
|
}else{
|
|
this.$modal.showToast('产品SKU有误,请联系系统管理员');
|
|
}
|
|
|
|
},
|
|
init() {
|
|
this.$globalData.itemPrice = []
|
|
this.$globalData.submitData = {
|
|
"phone": "",
|
|
"wechatId": "",
|
|
"note": "",
|
|
"totalPrice": "",
|
|
"address": {
|
|
"province": "上海市",
|
|
"city": "上海市",
|
|
"district": "",
|
|
"detailAddress": ""
|
|
},
|
|
"skuList": [],
|
|
"service": {
|
|
"serviceFrequency": "once_a_day",
|
|
"serviceDate": [],
|
|
"serviceTimeFirst": "",
|
|
"serviceTimeSecond": "",
|
|
"pet": []
|
|
}
|
|
}
|
|
},
|
|
onGetPhoneNumber(e){
|
|
if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户拒绝授权
|
|
//拒绝授权后弹出一些提示
|
|
}else{ //允许授权
|
|
if(getOpenIdKey()){
|
|
this.getPhoneNumber({"openId":getOpenIdKey(),"code":e.detail.code})
|
|
}
|
|
}
|
|
},
|
|
getPhoneNumber(data){
|
|
getPhoneNumber(data).then(res=>{
|
|
if(res&&res.code==200){
|
|
let token = res.data.token
|
|
setToken(token)
|
|
this.isMember=true
|
|
this.goSubscribe()
|
|
} else{
|
|
uni.showToast({
|
|
icon:'error',
|
|
title:'获取手机号失败'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
},
|
|
|
|
onLoad: function(option) {
|
|
|
|
this.init();
|
|
this.currentProductId = option.id || 63;
|
|
this.isMember= getToken()?true:false
|
|
},
|
|
onShareAppMessage(res) {
|
|
if (res.from === 'button') { // 来自页面内分享按钮
|
|
console.log(res.target)
|
|
}
|
|
return {
|
|
title: '猫妈狗爸',
|
|
path: `/pages/details/detail?id=${this.currentProductId}`,
|
|
imageUrl: this.detailInfo.pic
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
position: relative;
|
|
height: 100%;
|
|
padding-bottom: 58px;
|
|
.details-subscribe {
|
|
background-color: #FFFFFF;
|
|
padding: 10px;
|
|
width: 100%;
|
|
height: 58px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
|
|
.details-btn {
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
background: #FFB13F;
|
|
font-size: 16px;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.details-container {
|
|
.share-btn {
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0 !important;
|
|
background: #fff;
|
|
border-color: #fff;
|
|
display: flex;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.share-btn::after {
|
|
border: none;
|
|
}
|
|
|
|
.details-price {
|
|
background: #FFFFFF;
|
|
padding: 10px 19px 15px;
|
|
margin-top: -5px;
|
|
|
|
.details-price1 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
|
|
.details-price-normal {
|
|
|
|
color: #FF530A;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
line-height: normal;
|
|
|
|
.details-price-big {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.details-price2 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 5px;
|
|
|
|
.details-price-item {
|
|
color: #333;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
line-height: 16px;
|
|
/* 100% */
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.details-price-share {
|
|
color: #666;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 13px;
|
|
/* 92.857% */
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.details-banner {
|
|
width: 100%;
|
|
height: 36px;
|
|
background-color: #FFF8DF;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.details-banner-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
line-height: 13px;
|
|
color: #A94F20;
|
|
|
|
img {
|
|
width: 13px;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.details-img {
|
|
background: #F5F5F7;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
</style>
|