154 lines
3.9 KiB
Vue
154 lines
3.9 KiB
Vue
<template>
|
||
<view>
|
||
<view class="hm-header-xian"></view>
|
||
<scroll-view scroll-y="true" class="goods">
|
||
<view v-if="detail">
|
||
<swiper :autoplay="autoplay" @change="setCurrent" class="banner-box"
|
||
:duration="duration" :indicator-dots="indicatorDots" :interval="interval" circular="true">
|
||
<swiper-item v-for="(item, index) in detail.image" :key="index">
|
||
<image class="hm-bg-f" mode="scaleToFill" :src="item.url"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="number-banner">
|
||
<text>{{currentIndex}}</text>
|
||
<text>/{{detail.image.length}}</text>
|
||
</view>
|
||
<view class="hm-p-20 hm-bg-f">
|
||
<view class="hm-line-1">{{detail.goods_name}}</view>
|
||
<view class="hm-p-t-10">
|
||
<text class="hm-col-error">￥{{goods_price}}</text>
|
||
<text class="hm-m-l-20 hm-col-tips hm-font-zhx" v-if="line_price>0">￥{{line_price}}</text>
|
||
<text class="hm-fr hm-col-tips">销量：{{detail.goods_sales}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 商品描述 -->
|
||
<view v-if="detail.content!=''" class="hm-p-20 hm-m-t-20 hm-bg-f">
|
||
<view class="hm-p-b-20 hm-border-b">商品详情</view>
|
||
<view class="hm-p-t-20">
|
||
<u-parse :content="detail.content" selectable></u-parse>
|
||
</view>
|
||
</view>
|
||
<view v-else class="hm">
|
||
<img :src="applet.domain + '/addons/food/img/empty/data.png'" />
|
||
<view class="text">暂无商品详情</view>
|
||
</view>
|
||
</view>
|
||
<!-- 技术支持 -->
|
||
<view class="hm">
|
||
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
var App = getApp();
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
goods_id:0,
|
||
applet:{},
|
||
indicatorDots: true, // 是否显示面板指示点
|
||
autoplay: true, // 是否自动切换
|
||
interval: 3000, // 自动切换时间间隔
|
||
duration: 800, // 滑动动画时长
|
||
currentIndex: 1, // 轮播图指针
|
||
detail: {}, // 商品详情信息
|
||
goods_price: 0, // 商品价格
|
||
line_price: 0, // 划线价格
|
||
goods_num: 1, // 商品数量
|
||
};
|
||
},
|
||
|
||
components: {},
|
||
props: {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad(options) {
|
||
let _this = this;
|
||
_this.goods_id = options.goods_id;
|
||
_this.applet = uni.getStorageSync('applet');
|
||
_this.getGoodsDetail();
|
||
},
|
||
|
||
/**
|
||
* 分享当前页面
|
||
*/
|
||
onShareAppMessage: function() {
|
||
// 构建页面参数
|
||
let _this = this;
|
||
return {
|
||
title: _this.detail.goods_name,
|
||
path: "/pages/goods/detail?goods_id=" + _this.goods_id
|
||
};
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取商品信息
|
||
*/
|
||
getGoodsDetail() {
|
||
let _this = this;
|
||
App._get('goods/detail', {
|
||
goods_id: _this.goods_id
|
||
}, function(result) {
|
||
// 初始化商品详情数据
|
||
let data = _this.initGoodsDetailData(result.data);
|
||
_this.setData(data);
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 初始化商品详情数据
|
||
*/
|
||
initGoodsDetailData(data) {
|
||
let _this = this;
|
||
// 商品价格/划线价/库存
|
||
data.goods_sku_id = data.detail.spec[0].spec_sku_id;
|
||
data.goods_price = data.detail.spec[0].goods_price;
|
||
data.line_price = data.detail.spec[0].line_price;
|
||
return data;
|
||
},
|
||
|
||
/**
|
||
* 设置轮播图当前指针 数字
|
||
*/
|
||
setCurrent(e) {
|
||
this.setData({
|
||
currentIndex: e.detail.current + 1
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.goods{
|
||
width: 100%;
|
||
height: 100%;
|
||
.banner-box {
|
||
height: 750rpx;
|
||
border-bottom: 1rpx solid #f3f4f6;
|
||
image{
|
||
width: 100%;
|
||
height: 750rpx;
|
||
}
|
||
}
|
||
.number-banner {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
margin-top: -70rpx;
|
||
padding: 0 18rpx;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border-radius: 50rpx;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
text:last-child {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|