422 lines
11 KiB
Vue
422 lines
11 KiB
Vue
<template>
|
||
<view class="">
|
||
<u-navbar :title="' '" :safeAreaInsetTop="true" bgColor="rgba(0,0,0,0)">
|
||
<view class="u-nav-slot flex align-center justify-around" slot="left">
|
||
<u-icon name="arrow-left" size="19" @click="navBackFn('back')"></u-icon>
|
||
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
||
<u-icon name="home" size="20" @click="navBackFn('tabbar')"></u-icon>
|
||
</view>
|
||
<view slot="right">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="flex collect-share" style="">
|
||
<image v-if="commodityDeta.isCollect" @click="getIntegralOrderProductFn"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/serve/coupons_xingxing_end.png`" alt="">
|
||
</image>
|
||
<image v-else @click="getIntegralOrderProductFn"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/serve/coupons_xingxing.png`" mode=""></image>
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/serve/coupons_fenxiang.png`" mode=""></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<view class="flex collect-share" style="margin-right: 0;">
|
||
<image v-if="!commodityDeta.isCollect" @click="getIntegralOrderProductFn"
|
||
src="@/static/images/app/serve/coupons_xingxing.png" mode=""></image>
|
||
<image v-else @click="getIntegralOrderProductFn"
|
||
src="@/static/images/app/serve/coupons_xingxing_end.png" alt=""></image>
|
||
<image @click="shareFn(commodityDeta)" src="@/static/images/app/serve/coupons_fenxiang.png"
|
||
mode=""></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
</u-navbar>
|
||
<!-- 轮播图 -->
|
||
<u-swiper height="750rpx" keyName="image" @change="e => currentNum = e.current" :list="branner" indicator
|
||
:indicatorStyle="{bottom:'32rpx',right:'24rpx'}">
|
||
<view slot="indicator" class="indicator-num">
|
||
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ branner.length }}</text>
|
||
</view>
|
||
</u-swiper>
|
||
<view class="info-introduce">
|
||
<view>
|
||
<u--text :lines="2" bold size="16" :text="commodityDeta.name"></u--text>
|
||
</view>
|
||
<view class="flex align-center shop-price">
|
||
¥{{commodityDeta.price}} +
|
||
<view>
|
||
<!-- #ifdef APP -->
|
||
<image class="integral-icon" src="@/static/images/app/welfare/integral.png" mode="">
|
||
</image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image class="integral-icon" :src="`${config.aliyunOssUrl}/static/images/app/welfare/integral.png`"
|
||
mode="">
|
||
</image>
|
||
<!-- #endif -->
|
||
{{commodityDeta.integralNum}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 选择规格specificationShow = true -->
|
||
<view class="info-introduce info-spec flex justify-between" @click="specificationShow = true">
|
||
<view class="info-spec-title">规格</view>
|
||
<view class="flex align-center ">{{commodityDeta.specType==0?'单规格':'多规格'}}
|
||
<u-icon name="arrow-right" size="16" color="#999"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="commodity-details flex justify-center align-center">
|
||
<u-line length="188rpx"></u-line>
|
||
<view class="">商品详情</view>
|
||
<u-line length="188rpx"></u-line>
|
||
</view>
|
||
<view style="background: #fff;">
|
||
<view v-html="commodityDeta.description"></view>
|
||
</view>
|
||
<view class="buy-immediately">
|
||
<u-button color="#13AFA8" :customStyle="{width: '702rpx',height: '80rpx', margin: 0, fontSize:'24rpx'}"
|
||
shape="circle" @click="buyImmediatelyFn">立即购买</u-button>
|
||
</view>
|
||
<!-- 规格选择 -->
|
||
<u-popup :show="specificationShow" round="8" @close="specificationClose" closeOnClickOverlay>
|
||
<view class="specification-popup">
|
||
<view style="">
|
||
<view class="flex">
|
||
<image class="specification-popup-image" :src="commodityDeta.image" mode="">
|
||
</image>
|
||
<view class="specification-popup-cont flex-column justify-between">
|
||
<view>
|
||
<view class="specification-popup-cont-name">
|
||
<u--text :lines="2" bold size="14" :text="commodityDeta.name"></u--text>
|
||
</view>
|
||
<view class="flex align-center specification-popup-price">
|
||
¥{{commodityDeta.price}} +
|
||
<view>
|
||
<!-- #ifdef APP -->
|
||
<image class="integral-icon" src="@/static/images/app/welfare/integral.png"
|
||
mode="">
|
||
</image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image class="integral-icon"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/welfare/integral.png`"
|
||
mode="">
|
||
</image>
|
||
<!-- #endif -->
|
||
{{commodityDeta.integralNum}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>已选：{{commodityDeta.specType==0?'单规格':'多规格'}}</view>
|
||
</view>
|
||
</view>
|
||
<view v-for="(item,index) in specTabArr" :key="item.id">
|
||
<view class="spec-type">{{item.name}}</view>
|
||
<view class="spec-type-list flex flex-wrap justify-between">
|
||
<view :class="[actArr[index]==index2?'act-spec':'']" v-for="(item2,index2) in item.arr"
|
||
:key="item2.id" @click="actSpecFn(item2,index,index2)">{{item2.name}}{{index2}}</view>
|
||
<view style="border: none;"
|
||
v-for="(item3,index3) in (item.arr.length%3-1)<0?0:(item.arr.length%3-1)" :key="index3">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex justify-between shop-number">
|
||
<view>数量</view>
|
||
<view>
|
||
<u-number-box v-model="commodityNum">
|
||
<view slot="minus" class="minus">
|
||
<u-icon name="minus" color="#13AFA8" size="12"></u-icon>
|
||
</view>
|
||
<text slot="input" style="width: 60rpx;text-align: center;"
|
||
class="input">{{commodityNum}}</text>
|
||
<view slot="plus" class="plus">
|
||
<u-icon name="plus" color="#fff" size="12"></u-icon>
|
||
</view>
|
||
</u-number-box>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<u-button color="#13AFA8"
|
||
:customStyle="{width: '702rpx',height: '80rpx', margin: 0, fontSize:'24rpx'}" shape="circle"
|
||
@click="endSpecificationFn">确认</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '@/config'
|
||
import {
|
||
getIntegralInfo,
|
||
getIntegralOrderProduct
|
||
} from "@/api/welfare/welfare.js"
|
||
import {shareApi} from "@/utils/index.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
config,
|
||
//商品详情
|
||
commodityDeta: {},
|
||
details: '<h1>商品详情</h1>',
|
||
commodityNum: 1,
|
||
branner: [], // 轮播图列表
|
||
currentNum: 0,
|
||
//规格弹出
|
||
specificationShow: false,
|
||
actArr: [],
|
||
specTabArr: []
|
||
};
|
||
},
|
||
methods: {
|
||
//分享
|
||
shareFn(item) {
|
||
console.log(item);
|
||
let shareData = {
|
||
imageUrl: item.image? item.image+'?x-oss-process=image/resize,l_923,h_600/format,heic' :
|
||
'https://qicheoss.oss-cn-shanghai.aliyuncs.com/crmebimage/public/product/2024/01/24/c70ad2284470406280fb0e06200a63e2g4ht7zante.png',
|
||
content: item.name
|
||
}
|
||
shareApi('WXSceneSession', shareData,`pages/welfare/rightsInterests/rightsInterests_particulars?id=${item.id}`).then(res => {
|
||
})
|
||
},
|
||
//立即购买
|
||
buyImmediatelyFn() {
|
||
this.specificationShow = true
|
||
},
|
||
//选择规格
|
||
actSpecFn(item, index, index2) {
|
||
this.$set(this.actArr, index, index2)
|
||
},
|
||
//弹出层确认
|
||
endSpecificationFn() {
|
||
this.specificationClose()
|
||
let id = this.commodityDeta.id
|
||
let commodityNum = this.commodityNum
|
||
uni.navigateTo({
|
||
url: `/pages/driver/welfare/rightsInterests/confirm_order?id=${id}&commodityNum=${commodityNum}`
|
||
})
|
||
},
|
||
//弹出层
|
||
specificationClose() {
|
||
this.specificationShow = false
|
||
},
|
||
//返回
|
||
navBackFn(type) {
|
||
if (type == 'tabbar') {
|
||
uni.switchTab({
|
||
url: '/pages/driver/home/home'
|
||
})
|
||
} else {
|
||
uni.navigateBack()
|
||
}
|
||
},
|
||
//商品详情
|
||
getIntegralInfoFn(id) {
|
||
getIntegralInfo(id).then(res => {
|
||
this.commodityDeta = res.data
|
||
this.branner = res.data.sliderImage.split(',')
|
||
})
|
||
},
|
||
// 添加收藏接口
|
||
getIntegralOrderProductFn() {
|
||
getIntegralOrderProduct(this.commodityDeta.id).then(res => {
|
||
this.getIntegralInfoFn(this.commodityDeta.id)
|
||
})
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.getIntegralInfoFn(options.id)
|
||
},
|
||
onShow() {},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.collect-share {
|
||
margin-right: 140rpx;
|
||
|
||
image {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
}
|
||
}
|
||
|
||
.buy-immediately {
|
||
position: fixed;
|
||
width: 100%;
|
||
left: 0;
|
||
bottom: 0;
|
||
background: #fff;
|
||
padding: 18rpx 24rpx 18rpx 24rpx;
|
||
}
|
||
|
||
.commodity-details {
|
||
margin: 24rpx 0;
|
||
|
||
view {
|
||
margin: 0 24rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.specification-popup {
|
||
padding: 32rpx 24rpx 40rpx 24rpx;
|
||
height: 500rpx;
|
||
|
||
.shop-number {
|
||
margin: 40rpx 0 78rpx 0;
|
||
}
|
||
|
||
.specification-popup-cont {
|
||
width: calc(100% - 228rpx);
|
||
height: 212rpx;
|
||
.specification-popup-cont-name{
|
||
height: 90rpx;
|
||
line-height: 44rpx;
|
||
}
|
||
.specification-popup-price {
|
||
font-size: 40rpx;
|
||
font-weight: 500;
|
||
color: #111111;
|
||
}
|
||
}
|
||
|
||
.specification-popup-image {
|
||
width: 212rpx;
|
||
height: 212rpx;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.spec-type {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #222222;
|
||
margin: 16rpx 0;
|
||
}
|
||
|
||
.spec-type-list {
|
||
view {
|
||
width: 218rpx;
|
||
height: 60rpx;
|
||
border-radius: 30rpx;
|
||
border: 2rpx solid #666666;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
margin: 16rpx 0;
|
||
color: #666666;
|
||
}
|
||
|
||
.act-spec {
|
||
background: #13AFA8;
|
||
border: none;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-spec {
|
||
margin-top: 24rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
|
||
.info-spec-title {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #222222;
|
||
}
|
||
}
|
||
|
||
.info-introduce {
|
||
padding: 40rpx 24rpx 32rpx 24rpx;
|
||
background: #FFFFFF;
|
||
|
||
.shop-price {
|
||
font-size: 40rpx;
|
||
font-weight: 500;
|
||
color: #111111;
|
||
margin-top: 32rpx;
|
||
}
|
||
}
|
||
|
||
.u-nav-slot {
|
||
width: 174rpx;
|
||
height: 64rpx;
|
||
border-radius: 32rpx;
|
||
border: 1rpx solid rgba(0, 0, 0, 0.2);
|
||
background: #FFFFFF;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.indicator {
|
||
@include flex(row);
|
||
justify-content: center;
|
||
|
||
&__dot {
|
||
height: 6px;
|
||
width: 6px;
|
||
border-radius: 100px;
|
||
background-color: rgba(255, 255, 255, 0.35);
|
||
margin: 0 5px;
|
||
transition: background-color 0.3s;
|
||
|
||
&--active {
|
||
background-color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.indicator-num {
|
||
padding: 2px 0;
|
||
background-color: rgba(0, 0, 0, 0.35);
|
||
border-radius: 100px;
|
||
width: 35px;
|
||
@include flex;
|
||
justify-content: center;
|
||
|
||
&__text {
|
||
color: #FFFFFF;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.integral-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.minus {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-width: 1px;
|
||
border-color: #13AFA8;
|
||
border-style: solid;
|
||
border-top-left-radius: 100px;
|
||
border-top-right-radius: 100px;
|
||
border-bottom-left-radius: 100px;
|
||
border-bottom-right-radius: 100px;
|
||
@include flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.input {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.plus {
|
||
width: 22px;
|
||
height: 22px;
|
||
background-color: #13AFA8;
|
||
border-radius: 50%;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
</style> |