Leadfyy.co
/
uniapp-hainan
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[新增] 商品详情页

test
邓平艺 4 years ago
parent
286fcfdb66
commit
8e4f1992f4
2 changed files with 401 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      pages.json
  2. 391
      pages/goodsDetail/index.vue

14
pages.json
View File

@ -3,6 +3,14 @@
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom",
"enablePullDownRefresh": true
}
},
{
"path": "pages/notice/notice",
"style": {
@ -34,11 +42,9 @@
}
},
{
"path": "pages/index/index",
"path": "pages/goodsDetail/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom",
"enablePullDownRefresh": true
"navigationBarTitleText": "商品详情"
}
}
],

391
pages/goodsDetail/index.vue
View File

@ -0,0 +1,391 @@
<template>
<view>
<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true">
<block v-if="$isRight(goods_detail)">
<!-- 商品图片轮播 -->
<swiper :current="current" :indicator-dots="goods_detail.banners.length > 1 ? true : false" :circular="true" class="swiper-box" indicator-active-color="#1998FE">
<swiper-item v-for="(item, index) in goods_detail.banners" :key="item.id">
<image mode="aspectFill" :src="item.cover" style="width: 100%; height: 100%;" @click="lookImg(index)"></image>
</swiper-item>
</swiper>
<!-- 商品主要信息 -->
<view class="head-info">
<view class="lf-font-32 lf-color-333 lf-font-bold">{{ goods_detail.name }}</view>
<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20">
<view class="lf-flex price">
<lf-price :price="goods_detail.specs[0].selling_price"></lf-price>
<view class="lf-m-l-20">¥{{ goods_detail.specs[0].original_price }}</view>
<view v-if="goods_detail.specs[0].cost">{{ goods_detail.specs[0].cost }}</view>
</view>
<view class="lf-font-24 lf-text-right">
<view class="lf-color-gray">{{ goods_detail.specs[0].sold_stock_text }}</view>
<!-- <view class="lf-color-primary">{{ goods_detail.specs[0].stock_text }}</view> -->
</view>
</view>
<view class="label-box" v-if="goods_detail.tags && goods_detail.tags.length">
<view class="label-item" v-for="(item, index) in goods_detail.tags" :key="index">{{ item }}</view>
</view>
</view>
<!-- 地址信息 -->
<!-- <view class="address-box">
<view class="lf-font-32 lf-font-bold">适用门店</view>
<view class="lf-m-t-20 lf-row-between">
<view class="lf-flex">
<image mode="aspectFill" class="lf-fle shop-img" :src="goods_detail.store.cover" v-if="goods_detail.store.cover"></image>
<image mode="aspectFill" class="lf-fle shop-img" src="../../static/center/shop-logo.png" v-else></image>
<view class="lf-font-32 lf-m-l-20 lf-line-1" style="max-width: 512rpx;">{{ goods_detail.store.name }}</view>
</view>
<view @click="makePhoneCall(goods_detail.store.tel)">
<text class="lf-iconfont lf-icon-dianhua lf-font-40" style="color: #3A62FF;"></text>
</view>
</view>
<view class="lf-flex lf-m-t-20" @click="openMap">
<view style="width: 60rpx; height: 60rpx;" class="lf-row-center">
<text class="lf-iconfont lf-icon-dizhi lf-font-40" style="color: #555555;"></text>
</view>
<view class="lf-m-l-20 lf-font-28" style="color: #555555;">{{ goods_detail.store.address }}</view>
</view>
</view> -->
<!-- 商品详情 -->
<view class="goods-detail">
<view class="lf-font-32 lf-font-bold lf-m-b-20">旅游须知</view>
<rich-text :nodes="formatRichText(goods_detail.content)" v-if="goods_detail.content_type == 'rich_text'"></rich-text>
<image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index" v-if="goods_detail.content_type == 'img'"></image>
</view>
<!-- 修饰专用 -->
<view class="extra"></view>
<!-- 吸底操作按钮 -->
<view class="lf-row-between fixed-bottom">
<view class="lf-flex lf-p-t-10 lf-p-b-10">
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/index/index', {type: 'switch'})">
<image class="icon-img" src="../../static/center/home.png"></image>
<view class="lf-m-t-1">首页</view>
</view>
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/contactService/index')">
<image class="icon-img" src="../../static/center/service.png"></image>
<view class="lf-m-t-1">客服</view>
</view>
<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
<image class="icon-img" src="../../static/center/collect-active.png" v-if="is_collect"></image>
<image class="icon-img" src="../../static/center/collect.png" v-else></image>
<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
</view>
<button class="lf-flex-column lf-row-center icon-item" open-type="share">
<image class="icon-img" src="../../static/center/share.png"></image>
<view class="lf-m-t-1">分享</view>
</button>
</view>
<button class="btn" @click="toAddOrder">立即购买</button>
</view>
<!-- 回到顶部 -->
<!-- <u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}" :icon-style="{color: '#ffffff'}"></u-back-top> -->
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
</block>
</skeleton>
</view>
</template>
<script>
export default {
data(){
return {
current: 0, // 轮播下标
goods_id: 0,
goods_detail: {},
is_collect: 0, // 1为当前收藏商品了，0为否
skeletonLoading: true
}
},
onLoad(options){
this.goods_id = options.id;
this.getGoodsDetail();
},
methods: {
getGoodsDetail(){
let that = this;
this.goods_detail = {
all_specs: null,
banners: [],
category_id: 2,
content: "<p><img src='http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/tinymce/images/156005c5baf40ff51a327f1c34f2975b60dd6a468cdbe.jpg' alt='' width='100%' /></p>",
content_type: "rich_text",
cover: "http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/images/d1c990182d6cfd6ebf1faf4077f22248.jpg!thumb_300x300_q90",
created_at: "1625123492",
deleted_at: null,
id: 1,
name: "肯德基精选午餐",
share_cover: "http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/images/d1c990182d6cfd6ebf1faf4077f22248.jpg",
specs: [{
cost: "",
created_at: "1625470217",
deleted_at: null,
goods_id: 1,
id: 8,
limit: 10,
name: "规格3",
original_price: "111.00",
original_price_text: "111.00",
selling_price: "1.00",
sold_percent: 50,
sold_percent_text: "已抢50%",
sold_stock: 110,
sold_stock_text: "110人购买",
specs: null,
state: 1,
stock: 110,
stock_text: "库存仅剩110份",
updated_at: "1625471139"
}],
store: {
address: "广西南宁市青秀区民族大道111号",
cover: "http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/images/b4644c5226918153c0cb372e99e12bed.jpg!thumb_200x200_q90",
created_at: "1625122973",
deleted_at: null,
id: 1,
intro: null,
lat: "108.3745472970581",
lng: "22.813532837581967",
name: "肯德基连锁餐饮",
state: 2,
tel: "18888888888",
updated_at: "1625537146",
user_id: 7
},
store_id: 1,
tags: ["推荐"],
updated_at: "1625123492",
user: {is_collect: 1}
}
return;
this.$http(this.API.API_GOODS_DETAIL, {goods_id: this.goods_id}).then(res => {
this.skeletonLoading = false;
this.goods_detail = res.data;
this.is_collect = Boolean(res.data.user.is_collect);
}).catch(err => {
this.skeletonLoading = false;
setTimeout(() => {
that.$toBack();
}, 1000);
})
},
// 切换商品收藏
switchCollect(){
let userInfo = uni.getStorageSync('userinfo') || {};
if(!userInfo.id || !userInfo.nickname || !userInfo.avatar){
this.$url('/pages/login/index?type=userinfo');
return;
}
this.$http(this.API.API_COLLECT_DEAL, {goods_id: this.goods_id}).then(res => {
this.$msg(res.msg);
this.is_collect = Boolean(res.data.user.is_collect);
})
},
// 拨打电话
makePhoneCall(phoneStr){
uni.makePhoneCall({
phoneNumber: String(phoneStr)
})
},
// 打开地图
openMap(){
let { address, lat, lng } = this.goods_detail?.store || {};
uni.openLocation({
longitude: Number(lat),
latitude: Number(lng),
scale: 20,
name: address
});
},
// 跳转到确认下单页面
toAddOrder(){
let goods_id = this.goods_detail.id;
let goods_specs_id = this.goods_detail.specs[0].id
this.$url('/pages/order/confirm-order?goods_id='+ goods_id +'&goods_specs_id='+ goods_specs_id);
},
// 预览图片
lookImg(index){
this.$u.throttle(() => {
let goods_banner = this.goods_detail.banners || [];
let banners = goods_banner.map(item => item.cover);
uni.previewImage({
urls: banners,
current: index
})
}, 200);
},
// 富文本处理
formatRichText(richText){
if(richText != null){
let newRichText= richText.replace(/<img[^>]*>/gi, function(match, capture){
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newRichText = newRichText.replace(/style="[^"]+"/gi,function(match, capture){
match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');
return match;
});
newRichText = newRichText.replace(/<br[^>]*\/>/gi, '');
newRichText = newRichText.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin:10px 0;"');
return newRichText;
}else{
return null;
}
}
},
onShareAppMessage(){
let goods = this.goods_detail;
let title = goods.name;
let imageUrl = goods.share_cover || goods.cover;
let path = '/pages/route/index?route=goods_detail&id='+ goods.id;
return {
title,
path,
imageUrl
}
}
}
</script>
<style>
page{
background-color: #f5f5f5;
overflow-x: hidden;
}
</style>
<style lang="scss" scoped="scoped">
.swiper-box{
width: 750rpx;
height: 490rpx;
background-color: #FFFFFF;
}
.head-info{
width: 750rpx;
height: auto;
box-sizing: border-box;
padding: 0 32rpx;
padding-top: 20rpx;
background-color: #FFFFFF;
// .price>view:nth-of-type(1){
// color: #FF0000;
// margin-right: 22rpx;
// font-weight: bold;
// }
.price>view:nth-of-type(1){
text-decoration: line-through;
color: #777777;
margin-right: 22rpx;
}
.price>view:nth-of-type(2){
width: max-content;
padding: 0 18rpx;
height: 46rpx;
background-color: #1998FE;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
}
.label-box{
min-height: 130rpx;
width: 100%;
border-top: 1rpx solid #E5E5E5;
display: flex;
flex-wrap: wrap;
padding: 30rpx 0 10rpx 0;
.label-item{
width: 156rpx;
height: 70rpx;
border-radius: 10rpx;
border: 2rpx solid #1998FE;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #1998FE;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
}
}
.address-box{
width: 750rpx;
height: auto;
box-sizing: border-box;
background-color: #FFFFFF;
padding: 32rpx;
margin-top: 20rpx;
.shop-img{
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
}
.goods-detail{
width: 750rpx;
height: auto;
background-color: #FFFFFF;
padding: 32rpx;
box-sizing: border-box;
margin-top: 20rpx;
.goods-img{
width: 100%;
}
}
.extra{
width: 100%;
height: 120rpx;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: content-box;
}
.fixed-bottom{
position: fixed;
bottom: 0;
left: 0;
background-color: #FFFFFF;
width: 100%;
height: auto;
padding: 0 32rpx;
border-top: 1rpx solid #e5e5e5;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.icon-item{
margin-right: 16rpx;
background-color: transparent;
margin: 0;
line-height: initial;
font-size: 28rpx;
font-weight: inherit;
margin-right: 10rpx;
padding: 0;
width: 88rpx;
&:first-child{
padding-left: 0;
}
.icon-img{
height: 50rpx;
width: 50rpx;
}
}
.btn{
margin: 0;
padding: 0;
width: 208rpx;
height: 80rpx;
background-color: #1998FE;
color: #FFFFFF;
line-height: 80rpx;
font-size: 32rpx;
border-radius: 42rpx;
}
}
</style>
Write Preview
Loading…
Cancel
Save