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.
357 lines
8.6 KiB
357 lines
8.6 KiB
<template>
|
|
<view class="">
|
|
<view class="goods-info">
|
|
<uv-swiper :list="photo" indicator indicatorMode="line" circular height="750rpx" radius="0"></uv-swiper>
|
|
</view>
|
|
<!-- <view class="merchant-name">{{ form.merchantName }}</view> -->
|
|
<uni-card :border="false" :is-shadow="false" :padding="0">
|
|
<uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
|
|
<uv-cell :cellStyle="{padding: '10px 5px'}">
|
|
<template v-slot:title>
|
|
<view class="pirce-bar" style="display: flex;">
|
|
<view class="web-text-danger">￥</view>
|
|
<view class="web-text-danger" style="font-size: 40rpx;">{{ form.price }}</view>
|
|
</view>
|
|
</template>
|
|
<template v-slot:right-icon>
|
|
<text class="web-text-secondary" style="text-decoration: line-through">划线价￥{{ form.price*2 }}</text>
|
|
</template>
|
|
</uv-cell>
|
|
<uv-cell :title="form.goodsName" label="商品名称" :cellStyle="{padding: '10px 5px'}">
|
|
</uv-cell>
|
|
<uv-cell title="选择款式" :label="`100zz【藏青色】、100zz【古红色】`" isLink
|
|
:cellStyle="{padding: '10px 5px'}">
|
|
<template v-slot:right-icon>
|
|
<!-- <uv-icon size="50rpx" name="map-fill" color="#5ac725" style="color: #ff0000;"></uv-icon> -->
|
|
</template>
|
|
</uv-cell>
|
|
<uv-cell title="参数" :label="form.goodsName" :cellStyle="{padding: '10px 5px'}">
|
|
</uv-cell>
|
|
<uv-cell title="客服电话" label="0771-8888888" :border="false" :cellStyle="{padding: '10px 5px'}"
|
|
@click="callPhone('0771-8888888')">
|
|
|
|
</uv-cell>
|
|
</uv-cell-group>
|
|
</uni-card>
|
|
|
|
<uni-card title="商品详情" :is-shadow="false" :border="false" :padding="0">
|
|
<view class="web-text-heading booking-content">
|
|
<view v-html="form.content"></view>
|
|
</view>
|
|
</uni-card>
|
|
|
|
<view class="xieyi web-cell web-text-secondary web-cell-align-top">
|
|
<view class="web-cell web-cell-content web-cell-align-top">
|
|
<uni-icons type="circle" size="20" color="#a4a5a7" v-if="!disabled" @click="onDisabled"></uni-icons>
|
|
<uni-icons type="checkbox" size="20" color="#11a954" v-else @click="onDisabled"></uni-icons>
|
|
<view class="text" @click="onDisabled">
|
|
<text>我已阅读并同意</text>
|
|
<text class="link"
|
|
@click.stop="navTo('/package/article-detail/article-detail?articleId=503')">《购买协议》</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<uv-gap height="50"></uv-gap>
|
|
<view class="save-btn">
|
|
<uv-button
|
|
:customStyle="{background: 'linear-gradient(to right, #ccff66, #008e04)',borderRadius: '30px',color: '#ffffff'}"
|
|
text="立即购买" @click="save"></uv-button>
|
|
</view>
|
|
<!-- <view class="goods-nav-btn">
|
|
<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick"
|
|
@buttonClick="buttonClick" />
|
|
</view> -->
|
|
|
|
</view>
|
|
<!-- 活动订场弹窗 -->
|
|
<uni-popup ref="popup" type="center">
|
|
<view class="popup-booking-tel">
|
|
<text class="title">场馆热线</text>
|
|
<text class="desc">主体育场、足球训练场：0771-4953380</text>
|
|
<text class="desc">体育馆、综合训练馆、网球馆：0771-4953380</text>
|
|
<text class="desc">游泳跳水馆：0771-4736008</text>
|
|
|
|
<text class="title">参观接待</text>
|
|
<text class="desc">预约电话：0771-4736955</text>
|
|
<text class="desc">传真号码：0771-4736955</text>
|
|
|
|
<text class="title">大型活动订场</text>
|
|
<text class="desc">预约电话：0771-4736970、0771-4736994</text>
|
|
|
|
<text class="title">威拓普健身馆</text>
|
|
<text class="desc">联系电话：0771-5588699</text>
|
|
</view>
|
|
<view class="web-cell popup-close" @click="closeBookingTel">
|
|
<uv-icon name="close-circle" color="#ffffff" size="30"></uv-icon>
|
|
</view>
|
|
</uni-popup>
|
|
<!-- 登录组件 -->
|
|
<ws-login ref="login" :logo="logo" @done="reload" />
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
storeToRefs
|
|
} from 'pinia';
|
|
import * as GoodsApi from '@/api/shop/goods';
|
|
import {
|
|
useCarStore
|
|
} from '@/store/modules/car';
|
|
const carStore = useCarStore();
|
|
const {
|
|
goodsList,
|
|
orderInfo,
|
|
totalPrice,
|
|
carNum,
|
|
merchantId,
|
|
merchantName,
|
|
merchantCode,
|
|
type,
|
|
dateTime
|
|
} = storeToRefs(carStore)
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
id: 0,
|
|
form: {},
|
|
// 场馆相册
|
|
photo: [],
|
|
isLogin: false,
|
|
disabled: true,
|
|
orderInfo,
|
|
goodsList,
|
|
totalPrice,
|
|
carNum,
|
|
merchantId,
|
|
merchantName,
|
|
merchantCode,
|
|
type,
|
|
dateTime,
|
|
options: [{
|
|
icon: 'headphones',
|
|
text: '客服'
|
|
}, {
|
|
icon: 'cart',
|
|
text: '购物车',
|
|
info: 2
|
|
}],
|
|
buttonGroup: [
|
|
{
|
|
text: '立即购买',
|
|
backgroundColor: 'linear-gradient(90deg, #ccff66, #008e04)',
|
|
color: '#fff'
|
|
}
|
|
],
|
|
customButtonGroup1: [{
|
|
text: '立即购买',
|
|
backgroundColor: 'linear-gradient(90deg, #ccff66, #008e04)',
|
|
color: '#fff'
|
|
}]
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.id = option.id
|
|
this.reload();
|
|
},
|
|
onShow() {
|
|
// 登录状态
|
|
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
|
this.isLogin = true;
|
|
}
|
|
},
|
|
methods: {
|
|
async reload() {
|
|
const app = this
|
|
|
|
// 请求数据
|
|
Promise.all([app.getGoods()]).then(data => {
|
|
console.log('data: ', data);
|
|
const form = data[0]
|
|
app.form = form;
|
|
carStore.merchantId = form.merchantId
|
|
carStore.merchantName = form.merchantName
|
|
carStore.merchantCode = form.merchantCode
|
|
|
|
// 修改标题
|
|
uni.setNavigationBarTitle({
|
|
title: form.goodsName
|
|
})
|
|
// 加载场馆相册
|
|
if (form.files) {
|
|
app.photo = JSON.parse(form.files)
|
|
}
|
|
})
|
|
},
|
|
getGoods() {
|
|
return new Promise((resolve, reject) => {
|
|
GoodsApi.getGoods(this.id).then(result => {
|
|
resolve(result)
|
|
}).catch(reject)
|
|
})
|
|
},
|
|
onDisabled() {
|
|
this.disabled = !this.disabled;
|
|
},
|
|
navTo(url) {
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
},
|
|
openBookingTel() {
|
|
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
|
this.$refs.popup.open('center')
|
|
},
|
|
closeBookingTel() {
|
|
this.$refs.popup.close()
|
|
},
|
|
callPhone(phone) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone
|
|
});
|
|
},
|
|
onMap() {
|
|
uni.getLocation({
|
|
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
|
|
success: function(res) {
|
|
console.log('返回可以用于uni.openLocation的经纬度: ', res);
|
|
const latitude = this.merchant.latitude;
|
|
const longitude = this.merchant.longitude;
|
|
uni.openLocation({
|
|
latitude: latitude,
|
|
longitude: longitude,
|
|
success: function() {
|
|
console.log('success');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
save() {
|
|
if (!this.disabled) {
|
|
uni.showToast({
|
|
title: '请先阅读并同意订票协议',
|
|
icon: 'none'
|
|
})
|
|
return false
|
|
}
|
|
const app = this
|
|
const { form } = this
|
|
carStore.totalPrice = form.price
|
|
app.goodsList = []
|
|
form.image = JSON.parse(form.image)[0]
|
|
app.goodsList.push(form)
|
|
carStore.goodsList = app.goodsList
|
|
|
|
// 跳转页面
|
|
uni.navigateTo({
|
|
url: '/package/goods/checkout?goodsId=' + this.id
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
page {
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-color: #f0f2f5;
|
|
width: 750rpx;
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.container {}
|
|
|
|
.goods-info {
|
|
width: 750rpx;
|
|
height: 750rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.merchant-name {
|
|
padding: 30rpx;
|
|
font-weight: 500;
|
|
font-size: 42rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.save-btn {
|
|
width: 700rpx;
|
|
left: 25rpx;
|
|
height: 80rpx;
|
|
position: fixed;
|
|
bottom: 30rpx;
|
|
}
|
|
|
|
.booking-tel {
|
|
position: fixed;
|
|
z-index: 1;
|
|
top: 270px;
|
|
right: 0;
|
|
width: 80px;
|
|
height: 38px;
|
|
border-radius: 50px 0 0 50px;
|
|
background: linear-gradient(to right, #ccff66, #008e04);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #ffffff;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.popup-booking-tel {
|
|
background-color: #ffffff;
|
|
width: 560rpx;
|
|
min-height: 400rpx;
|
|
border-radius: 20rpx;
|
|
margin: auto;
|
|
padding: 20px;
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 38rpx;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.desc {
|
|
line-height: 2rem;
|
|
}
|
|
}
|
|
|
|
.popup-close {
|
|
display: flex;
|
|
margin-top: 24rpx;
|
|
justify-content: center;
|
|
}
|
|
|
|
.booking-content {
|
|
padding: 10px;
|
|
font-size: 30rpx;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
.xieyi {
|
|
margin-bottom: 80rpx;
|
|
padding: 0 30rpx;
|
|
|
|
.text {
|
|
margin-left: 5rpx;
|
|
|
|
.link {
|
|
color: #0f80ff;
|
|
}
|
|
}
|
|
}
|
|
.goods-nav-btn {
|
|
width: 750rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
background-color: #fff;
|
|
}
|
|
</style>
|