738 lines
23 KiB
Vue
738 lines
23 KiB
Vue
<template>
|
|
<view class="content" v-if="!loding">
|
|
<!-- 轮播主图 -->
|
|
<view class="goods-covers">
|
|
<swiper class="swiper" indicator-dots indicator-active-color="#c82626">
|
|
<block v-if="goodsObj.pictures.length > 0">
|
|
<swiper-item v-for="(item, index) in goodsObj.pictures" :key="index">
|
|
<image class="swiper-item" :src="item" mode="aspectFill"/>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
<!-- 产品详情 -->
|
|
<view class="goods-content">
|
|
<view class="header">
|
|
<view class="flex-box">
|
|
<view class="price"><text>￥</text>{{goodsObj.price.show}}</view>
|
|
<view class="sales">累计易货{{goodsObj.sales}}次</view>
|
|
</view>
|
|
<view class="coupon" v-if="couponSee.length > 0" @click="couponsOpne">
|
|
<view class="coupon-list" v-for="(item, index) in couponSee" :key="index">
|
|
<view class="coupon-label">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
<view class="coupon-btn">领券<image class="coupon-btn-img" src="../../static/icons/goods_row.png" mode="aspectFill"></image></view>
|
|
</view>
|
|
<view class="title"><view class="title-hot">热卖</view>{{goodsObj.name}}</view>
|
|
<!-- <view class="sub-title">{{goodsObj.description}}</view> -->
|
|
</view>
|
|
<!-- 商家信息 -->
|
|
<view class="store">
|
|
<image class="logo" :src="goodsObj.shop.cover" mode="aspectFill"></image>
|
|
<view class="store-cont">
|
|
<view class="store-title">{{goodsObj.shop.name}}</view>
|
|
<view class="rate">
|
|
<uni-rate
|
|
:readonly="true"
|
|
color="#ddd"
|
|
active-color="#c82626"
|
|
:value="goodsObj.company.star"
|
|
:size="14"
|
|
/>
|
|
</view>
|
|
<view class="openbtn" @click="onOpenWechat">进店<image class="openbtn-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image></view>
|
|
</view>
|
|
<view class="tooSee">
|
|
<view class="tooSee-label" @click="$Router.push({name: 'GoodsChain', params: {id: goodsObj.goods_id}})">
|
|
区块链证书
|
|
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="tooSee-label" @click="$Router.push({name: 'GoodsAttestation', params: {id: goodsObj.goods_id}})">
|
|
商品认证
|
|
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="tooSee-label" @click="$Router.push({name: 'GoodstracedTo', params: {id: goodsObj.goods_id}})">
|
|
商品溯源
|
|
<image class="tooSee-label-img" src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 产品规格 -->
|
|
<view class="size">
|
|
<view class="size-item nowrap">
|
|
<label class="title">规格</label>
|
|
{{goodsObj.skus[0].goods_name}}
|
|
</view>
|
|
<view class="size-item nowrap">
|
|
<label class="title">说明</label>
|
|
特价商品不可与优惠券叠加使用
|
|
</view>
|
|
<view class="size-item nowrap" v-if="goodsObj.services.length > 0">
|
|
<label class="title">服务</label>
|
|
<view class="goods-serve" @click="serveOpne">
|
|
<image class="goods-serve-img" src="../../static/icons/goods_buy.png" mode="aspectFill"></image>
|
|
<view class="nowrap goods-serve-name"><text v-for="(item, index) in goodsObj.services">{{item.name}}</text></view>
|
|
<image class="goods-serve-img" src="../../static/icons/goods_spot.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 产品详情 -->
|
|
<view class="product">
|
|
<block v-for="(item, index) in goodsObj.content" :key="index">
|
|
<image :src="item" mode="widthFix"></image>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<!-- footer -->
|
|
<view class="footer">
|
|
<button class="btn" size="default" @click="buyGoods">立即购买</button>
|
|
</view>
|
|
|
|
<!-- 优惠券弹出 -->
|
|
<uni-popup ref="couponsPopup">
|
|
<view class="coupons-popup">
|
|
<view class="coupons-header">
|
|
<view class="title">优惠券</view>
|
|
<image @click="couponsClose" class="close" src="../../static/icons/goods_close.png" mode=""></image>
|
|
</view>
|
|
<view class="coupons-cont">
|
|
<view class="coupons-name">
|
|
可领取的优惠券
|
|
</view>
|
|
<view class="coupons-list" v-for="(item , index) in coupons" :key="index">
|
|
<view class="coupons-tips" v-if="item.type">
|
|
<!-- value == 1服务券 value == 2代金券 value == 3提货券 -->
|
|
<text class="coupons-tips-text" v-if="item.type.value == '1'">服务券</text>
|
|
<text class="coupons-tips-text" v-else-if="item.type.value == '2'">代金券</text>
|
|
<text class="coupons-tips-text" v-else>提货券</text>
|
|
</view>
|
|
<view class="coupons-left" v-if="item.type.value == '2'">
|
|
<view class="coupons-number">
|
|
<text>￥</text>{{item.price}}
|
|
</view>
|
|
<view class="coupons-full">
|
|
满{{item.full}}可用
|
|
</view>
|
|
</view>
|
|
<view class="coupons-left" v-else-if="item.type.value == '3'">
|
|
<view class="coupons-number coupons-small">
|
|
提货券
|
|
</view>
|
|
</view>
|
|
<view class="coupons-center">
|
|
<view class="nowrap coupons-title">
|
|
{{item.title}}
|
|
</view>
|
|
<view class="coupons-time" v-if="item.time">
|
|
{{item.time.interval}}
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="item.can.get" class="coupons-right" @click="drawCoupons(item.coupon_id, index)">
|
|
领取
|
|
</view>
|
|
<view v-else class="coupons-right coupons-right-active">
|
|
已领取
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="coupons-true" @click="couponsClose">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<!-- 服务保障弹出 -->
|
|
<uni-popup ref="servePopup">
|
|
<view class="coupons-popup">
|
|
<view class="coupons-header">
|
|
<view class="title">保障</view>
|
|
<image @click="serveClose" class="close" src="../../static/icons/goods_close.png" mode=""></image>
|
|
</view>
|
|
<view class="serve-cont">
|
|
<view class="serve-label" v-for="(item, index) in goodsObj.services" :key="index">
|
|
<view class="serve-label-name">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="serve-label-text">
|
|
{{item.content}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="coupons-true" @click="serveClose">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { goods, managesCoupons } from '@/apis/interfaces/goods'
|
|
import userAuth from '@/public/userAuth'
|
|
export default {
|
|
data() {
|
|
return {
|
|
loding : true,
|
|
goodsObj : {},
|
|
identity : '',
|
|
company : {},
|
|
coupons : {},
|
|
couponSee : ""
|
|
};
|
|
},
|
|
created() {
|
|
goods(this.$Route.query.id).then(res=>{
|
|
this.loding = false
|
|
this.goodsObj = res
|
|
this.identity = res.identity.id || ''
|
|
this.company = res.company
|
|
this.couponSee= res.coupons.slice(0, 3)
|
|
this.coupons = res.coupons
|
|
})
|
|
},
|
|
methods:{
|
|
// 提交购买单
|
|
buyGoods(){
|
|
let token = this.$store.getters.getToken
|
|
if(token == ''){
|
|
let userLogin = new userAuth()
|
|
userLogin.Login()
|
|
return
|
|
}
|
|
this.$Router.push({
|
|
name: 'Buy',
|
|
params: {
|
|
skuId: this.goodsObj.skus[0].sku_id,
|
|
qty : this.goodsObj.skus[0].number
|
|
}
|
|
})
|
|
},
|
|
// 打开微信小程序
|
|
onOpenWechat(){
|
|
plus.share.getServices(res => {
|
|
let sweixin = null;
|
|
for(let val of res){
|
|
if(val.id === 'weixin'){
|
|
sweixin = val
|
|
}
|
|
}
|
|
/** 以此为例子 显示跳转引导页
|
|
* 'index_4'
|
|
* index 跳小程序企业首页
|
|
* 4 企业id
|
|
**/
|
|
if(sweixin != null){
|
|
sweixin.launchMiniProgram({
|
|
id : this.company.original_id,
|
|
path: 'pages/login/guide?scene=index_' + this.company.company_id
|
|
})
|
|
}else{
|
|
uni.showToast({
|
|
title: '当前环境不支持打开微信小程序',
|
|
icon : 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
// 领取优惠券
|
|
drawCoupons(id){
|
|
let token = this.$store.getters.getToken
|
|
if(token == ''){
|
|
let userLogin = new userAuth()
|
|
userLogin.Login()
|
|
return
|
|
}
|
|
managesCoupons(id).then(res=>{
|
|
uni.showToast({
|
|
title: '领取成功',
|
|
type: 'primary',
|
|
duration: 3000
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
icon : 'none',
|
|
title: err.message
|
|
})
|
|
})
|
|
},
|
|
|
|
// 选择优惠券-显示
|
|
couponsOpne(){
|
|
this.$refs.couponsPopup.open('bottom')
|
|
},
|
|
|
|
// 选择优惠券-隐藏
|
|
couponsClose(){
|
|
this.$refs.couponsPopup.close()
|
|
},
|
|
|
|
// 查看保障服务-显示
|
|
serveOpne(){
|
|
this.$refs.servePopup.open('bottom')
|
|
},
|
|
|
|
// 查看保障服务-隐藏
|
|
serveClose() {
|
|
this.$refs.servePopup.close()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content{
|
|
position: relative;
|
|
padding-top: 100%;
|
|
|
|
}
|
|
// 轮播图
|
|
.goods-covers{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
padding-top: 100%;
|
|
.swiper{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
.swiper-item{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
// 商品详情
|
|
.goods-content{
|
|
position: relative;
|
|
z-index: 2;
|
|
background-color: white;
|
|
border-radius: $radius $radius 0 0;
|
|
padding-bottom: calc((#{$padding} * 2) + (env(safe-area-inset-bottom) / 2) + 90rpx);
|
|
padding-bottom: calc((#{$padding} * 2) + (constant(safe-area-inset-bottom) / 2) + 90rpx);
|
|
// 详情
|
|
.header{
|
|
padding: 0 $padding $padding;
|
|
.title{
|
|
font-size: $title-size;
|
|
font-weight: bold;
|
|
line-height: 50rpx;
|
|
display: flex;
|
|
.title-hot {
|
|
background-color: #fee195;
|
|
font-size: 24rpx;
|
|
border-radius: 50rpx;
|
|
padding: 0 10rpx;
|
|
height: 34rpx;
|
|
line-height: 36rpx;
|
|
margin: 6rpx 10rpx 0 0;
|
|
}
|
|
}
|
|
.sub-title{
|
|
line-height: 40rpx;
|
|
font-size: $title-size-sm;
|
|
color: $text-gray;
|
|
padding-bottom: $padding/3;
|
|
}
|
|
.flex-box{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 90rpx;
|
|
.price{
|
|
font-weight: bold;
|
|
color: $text-price;
|
|
font-size: $title-size + 14;
|
|
text{
|
|
font-size: 70%;
|
|
}
|
|
width: calc(60% - #{$padding});
|
|
}
|
|
.sales{
|
|
font-size: $title-size-sm;
|
|
color: $text-gray;
|
|
width: 40%;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
// 新增优惠券
|
|
.coupon {
|
|
background-color: #fef2f2;
|
|
color: #e1293f;
|
|
border-radius: 8rpx;
|
|
border: 1rpx solid #ffe5e5;
|
|
padding: $padding - 15;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
position: relative;
|
|
margin-bottom: $margin - 10;
|
|
.coupon-list {
|
|
font-size: 22rpx;
|
|
.coupon-label {
|
|
display: inline-block;
|
|
border: 1rpx solid #e998a1;
|
|
border-radius: 50rpx;
|
|
padding: 0 15rpx;
|
|
height: 34rpx;
|
|
line-height: 34rpx;
|
|
margin-right: $margin - 10;
|
|
}
|
|
}
|
|
.coupon-btn {
|
|
position: absolute;
|
|
right: $padding - 20;
|
|
top: 0;
|
|
line-height: 60rpx;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
font-weight: 700;
|
|
.coupon-btn-img {
|
|
width: 22rpx;
|
|
height: 22rpx;
|
|
margin: 20rpx 0 0 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 新增服务
|
|
.goods-serve {
|
|
display: flex;
|
|
.goods-serve-img {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-top: 26rpx;
|
|
}
|
|
.goods-serve-name {
|
|
margin: 0 30rpx 0 20rpx;
|
|
width: calc(100% - 122rpx);
|
|
text {
|
|
padding-right: $padding;
|
|
position: relative;
|
|
&:last-child {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 店铺
|
|
.store{
|
|
position: relative;
|
|
margin: 0 $margin;
|
|
background: #F8F8F8;
|
|
border-radius: $radius/2;
|
|
padding: $padding;
|
|
min-height: 220rpx;
|
|
.logo{
|
|
position: absolute;
|
|
left: $margin;
|
|
top: $margin;
|
|
width: 98rpx;
|
|
height: 98rpx;
|
|
border-radius: $radius/2;
|
|
}
|
|
.store-cont {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
padding-left: 150rpx;
|
|
padding-top: 20rpx;
|
|
box-sizing: border-box;
|
|
height: 140rpx;
|
|
}
|
|
.tooSee {
|
|
position: absolute;
|
|
top: 150rpx;
|
|
left: 0;
|
|
font-size: 24rpx;
|
|
padding-left: $padding;
|
|
box-sizing: border-box;
|
|
.tooSee-label {
|
|
background-color: #fd683e;
|
|
border-radius: 8rpx 4rpx 4rpx 6rpx;
|
|
color: #FFFFFF;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
padding: 0 $padding - 15;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
margin-right: $margin * 2;
|
|
position: relative;
|
|
&::after, &::before{
|
|
content: '';
|
|
position: absolute;
|
|
}
|
|
&::after {
|
|
right: -40rpx;
|
|
top: 0;
|
|
background-color: #f64c37;
|
|
width: 40rpx;
|
|
height: 100%;
|
|
border-radius: 4rpx 8rpx 8rpx 4rpx;
|
|
}
|
|
&::before {
|
|
right: -1rpx;
|
|
top: 5%;
|
|
border: 1rpx dashed #fb745a;
|
|
height: 90%;
|
|
z-index: 2;
|
|
box-sizing: border-box;
|
|
}
|
|
&:last-child {
|
|
margin: 0;
|
|
}
|
|
&:first-child {
|
|
background-color: #f2d7aa;
|
|
color: #362507;
|
|
}
|
|
&:first-child::after {
|
|
background-color: #f1d599;
|
|
}
|
|
&:first-child::before {
|
|
border-color: #fae2b9;
|
|
}
|
|
.tooSee-label-img {
|
|
position: absolute;
|
|
right: -34rpx;
|
|
top: 12rpx;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
z-index: 9;
|
|
}
|
|
&:first-child .tooSee-label-img {
|
|
filter: brightness(.2)
|
|
}
|
|
}
|
|
}
|
|
.store-title{
|
|
font-size: $title-size-lg;
|
|
font-weight: bold;
|
|
line-height: 60rpx;
|
|
color: $text-color;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
// rate
|
|
.openbtn{
|
|
position: absolute;
|
|
right: $margin - 10;
|
|
top: $margin * 3.5;
|
|
color: #848484;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-size: $title-size-m;
|
|
margin-top: -30rpx;
|
|
display: flex;
|
|
.openbtn-img {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
filter: brightness(.5);
|
|
margin-top: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
// 产品规格
|
|
.size{
|
|
margin-top: $margin;
|
|
border-top: solid 20rpx #F8F8F8;
|
|
border-bottom: solid 20rpx #F8F8F8;
|
|
.size-item{
|
|
position: relative;
|
|
padding: 0 $padding 0 ($padding + 100);
|
|
line-height: 90rpx;
|
|
font-size: $title-size-m;
|
|
&::after{
|
|
position: absolute;
|
|
left: $margin;
|
|
right: 0;
|
|
bottom: 0;
|
|
content: " ";
|
|
height: 1rpx;
|
|
background-color: $border-color;
|
|
}
|
|
&:last-child::after{
|
|
display: none;
|
|
}
|
|
.title{
|
|
position: absolute;
|
|
left: $margin;
|
|
top: 0;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
// 产品详情
|
|
.product{
|
|
image{
|
|
vertical-align: top;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
// 立即购买
|
|
.footer{
|
|
padding: $padding;
|
|
background: white;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 99;
|
|
box-sizing: border-box;
|
|
.btn[size='default']{
|
|
width: 100%;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
box-sizing: border-box;
|
|
background: $text-price;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: $title-size;
|
|
margin-bottom: calc(env(safe-area-inset-bottom) / 2);
|
|
margin-bottom: calc(constant(safe-area-inset-bottom) / 2);
|
|
}
|
|
}
|
|
|
|
// 优惠券弹出样式
|
|
.coupons-popup {
|
|
background-color: #FFFFFF;
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
padding: $padding;
|
|
box-sizing: border-box;
|
|
.coupons-header {
|
|
text-align: center;
|
|
position: relative;
|
|
margin-bottom: $margin*1.5;
|
|
.title {
|
|
font-weight: 700;
|
|
}
|
|
.close {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 2;
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
}
|
|
}
|
|
.coupons-cont {
|
|
.coupons-name {
|
|
color: #616065;
|
|
font-size: 30rpx;
|
|
}
|
|
.coupons-list {
|
|
border: 2rpx solid #d6b9be;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin-top: $margin;
|
|
.coupons-tips {
|
|
background-color: #211e17;
|
|
color: #efe8d8;
|
|
position: absolute;
|
|
border-radius: 0 0 20rpx 0;
|
|
padding: 0 8rpx;
|
|
height: 34rpx;
|
|
line-height: 34rpx;
|
|
left: 0;
|
|
top: 0;
|
|
.coupons-tips-text {
|
|
font-size: 24rpx;
|
|
transform:scale(.85);
|
|
display: block;
|
|
}
|
|
}
|
|
.coupons-left {
|
|
background-color: #fdedee;
|
|
color: #e1293f;
|
|
width: 190rpx;
|
|
text-align: center;
|
|
padding: $padding - 10 0;
|
|
border-right: 2rpx dashed #eccdd4;
|
|
.coupons-number {
|
|
font-size: 40rpx;
|
|
font-weight: 600;
|
|
text {
|
|
font-size: 24rpx;
|
|
}
|
|
&.coupons-small {
|
|
font-size: 32rpx;
|
|
padding: 20rpx 0;
|
|
}
|
|
}
|
|
.coupons-full {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.coupons-center {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
padding: $padding - 10 130rpx 0 220rpx;
|
|
box-sizing: border-box;
|
|
font-size: 28rpx;
|
|
.coupons-time {
|
|
font-size: 24rpx;
|
|
margin-top: 10rpx;
|
|
color: #514c51;
|
|
}
|
|
}
|
|
.coupons-right {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 36rpx;
|
|
width: 110rpx;
|
|
text-align: center;
|
|
background-color: #e1293f;
|
|
color: #FFFFFF;
|
|
border-radius: 80rpx;
|
|
font-size: 24rpx;
|
|
line-height: 52rpx;
|
|
&.coupons-right-active {
|
|
background-color: #adadad;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.coupons-true {
|
|
background-image: linear-gradient(to right, #e1293f, #fd275d);
|
|
color: #FFFFFF;
|
|
border-radius: 80rpx;
|
|
line-height: 84rpx;
|
|
text-align: center;
|
|
margin-top: $margin*5;
|
|
}
|
|
}
|
|
|
|
// 新增服务保障样式
|
|
.serve-label {
|
|
margin-top: $margin + 10;
|
|
font-size: 28rpx;
|
|
.serve-label-name {
|
|
font-weight: 700;
|
|
margin-bottom: $margin - 10;
|
|
}
|
|
.serve-label-text {
|
|
line-height: 44rpx;
|
|
}
|
|
}
|
|
|
|
.serve-cont {
|
|
height: 40vh;
|
|
overflow-y: scroll;
|
|
}
|
|
</style>
|