@@ -0,0 +1,109 @@ | |||
// package_A/pages/goods-detail/index.js | |||
import {storeInfo, exchange} from '../../../api/goods.js' | |||
Page({ | |||
/** | |||
* 页面的初始数据 | |||
*/ | |||
data: { | |||
// 商品详情信息 | |||
detail: {}, | |||
// 轮播图列表 | |||
coverList: [], | |||
// 详情图片列表 | |||
detailImages: [], | |||
// 商铺信息 | |||
storeDetail: {}, | |||
// 商品数量 | |||
numbers: 1 | |||
}, | |||
/** | |||
* 生命周期函数--监听页面加载 | |||
*/ | |||
onLoad(options) { | |||
if(options.data) { | |||
let detail = this.data.detail | |||
let coverList = [] | |||
let detailImages = [] | |||
detail = JSON.parse(decodeURIComponent(options.data)) | |||
this.getStoreInfo({merchantId: detail.merchantId}) | |||
if(detail.goodsImage) { | |||
coverList = detail.goodsImage.split(',') | |||
} | |||
if(detail.goodsDetailImage) { | |||
detailImages = detail.goodsDetailImage.split(',') | |||
} | |||
this.setData({detail, coverList, detailImages}) | |||
} | |||
}, | |||
// 获取商铺信息 | |||
async getStoreInfo(params) { | |||
const res = await storeInfo(params) | |||
if(res.code === 0) { | |||
let storeDetail = this.data.storeDetail | |||
storeDetail = res.data | |||
this.setData({ | |||
storeDetail | |||
}) | |||
} | |||
}, | |||
/** | |||
* 生命周期函数--监听页面显示 | |||
*/ | |||
onShow() { | |||
}, | |||
// 加数量 | |||
addNum() { | |||
let numbers = this.data.numbers | |||
this.setData({ | |||
numbers: numbers + 1 | |||
}) | |||
}, | |||
// 减数量 | |||
reduceNum() { | |||
let numbers = this.data.numbers | |||
if(numbers !== 1) { | |||
this.setData({ | |||
numbers: numbers - 1 | |||
}) | |||
} else { | |||
wx.showToast({ | |||
icon: "none", | |||
title: '请至少选择一件商品!', | |||
}) | |||
} | |||
}, | |||
// 兑换 | |||
exchangeGoods() { | |||
wx.showLoading() | |||
let params = {} | |||
params.goodsId = this.data.detail.id | |||
params.goodsCount = this.data.numbers | |||
params.openid = wx.getStorageSync('openid') | |||
exchange(params).then(res=> { | |||
wx.hideLoading() | |||
if(res.code === 0) { | |||
// 成功跳转页面 | |||
wx.reLaunch({ | |||
url: '/package_A/pages/exchange-success/index?data=' + encodeURIComponent(JSON.stringify(this.data.storeDetail)) | |||
}) | |||
} else { | |||
wx.showToast({ | |||
icon: 'none', | |||
title: res.msg | |||
}) | |||
} | |||
}).catch((e)=> { | |||
wx.hideLoading() | |||
wx.showToast({ | |||
icon: 'none', | |||
title: e.msg | |||
}) | |||
}) | |||
} | |||
}) |
@@ -0,0 +1,4 @@ | |||
{ | |||
"usingComponents": {}, | |||
"navigationBarTitleText": "商品详情" | |||
} |
@@ -0,0 +1,46 @@ | |||
<!--package_A/pages/goods-detail/index.wxml--> | |||
<view class="goods_detail"> | |||
<!-- 轮播图 --> | |||
<swiper class="swiper_box" autoplay> | |||
<swiper-item class="swiper_item" wx:for="{{coverList}}" wx:key="index"> | |||
<image style="width:100vw;height: 435rpx;" mode="scaleToFill" src="{{item}}"></image> | |||
</swiper-item> | |||
</swiper> | |||
<!-- 商品信息 --> | |||
<view class="goods_info"> | |||
<view class="goods_name">{{detail.goodsName}}</view> | |||
<view class="goods_points_num"> | |||
<view class="goods_point"> | |||
<text style="color: #3175E8; font-size: 38rpx;">{{detail.goodsPoints}}</text> 积分 | |||
</view> | |||
<view class="goods_num_box"> | |||
<text class="operate_num" bindtap="reduceNum">-</text> | |||
<text class="goods_num">{{numbers}}</text> | |||
<text class="operate_num" bindtap="addNum">+</text> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 商品规格 --> | |||
<view class="goods_info"> | |||
<text class="goods_name">规格</text> | |||
<text class="goods_desc">{{detail.goodsSpec}}</text> | |||
</view> | |||
<!-- 店铺信息 --> | |||
<view class="stores_info"> | |||
<image class="stores_img" src="{{storeDetail.shopsImage}}"></image> | |||
<view class="stores_message"> | |||
<text class="goods_name">{{storeDetail.shopsName}}</text> | |||
<text class="goods_desc">{{storeDetail.shopsAddress}}</text> | |||
</view> | |||
</view> | |||
<!-- 详情图片展示 --> | |||
<view class="detail_images"> | |||
<image wx:for="{{detailImages}}" wx:key="index" style="width: 100vw;" mode="widthFix" src="{{item}}"></image> | |||
</view> | |||
<!-- 按钮 --> | |||
<view class="btn_box"> | |||
<view class="btn_item" bindtap="exchangeGoods">立即兑换</view> | |||
</view> | |||
</view> |
@@ -0,0 +1,113 @@ | |||
/* package_A/pages/goods-detail/index.wxss */ | |||
.goods_detail { | |||
min-height: 100vh; | |||
width: 100%; | |||
padding-bottom: 120rpx; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: flex-start; | |||
align-items: flex-start; | |||
background-color: #F2F6F9; | |||
position: relative; | |||
} | |||
.swiper_box { | |||
width: 100vw; | |||
height: 435rpx; | |||
} | |||
.swiper_item { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.goods_info { | |||
width: 100%; | |||
padding: 30rpx 32rpx; | |||
margin-bottom: 20rpx; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: flex-start; | |||
align-items: flex-start; | |||
background-color: #fff; | |||
} | |||
.goods_name { | |||
width: 100%; | |||
font-size: 34rpx; | |||
font-weight: bold; | |||
overflow: hidden; | |||
white-space: nowrap; | |||
text-overflow: ellipsis; | |||
} | |||
.goods_points_num { | |||
width: 100%; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
} | |||
.goods_num_box { | |||
margin-top: 30rpx; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
} | |||
.goods_num_box { | |||
display: flex; | |||
justify-content: end; | |||
align-items: center; | |||
} | |||
.operate_num { | |||
width: 52rpx; | |||
height: 52rpx; | |||
line-height: 52rpx; | |||
text-align: center; | |||
border-radius: 50%; | |||
border: 1rpx solid #AAAAAA; | |||
font-size: 40rpx; | |||
color: #AAAAAA; | |||
} | |||
.goods_num { | |||
font-size: 30rpx; | |||
margin: 0 12rpx; | |||
} | |||
.goods_desc { | |||
font-size: 26rpx; | |||
color: #666666; | |||
margin-top: 30rpx; | |||
} | |||
.stores_info { | |||
width: 100%; | |||
margin-bottom: 20rpx; | |||
padding: 30rpx 32rpx; | |||
display: flex; | |||
justify-content: flex-start; | |||
align-items: center; | |||
background-color: #fff; | |||
} | |||
.stores_img { | |||
width: 102rpx; | |||
height: 102rpx; | |||
flex-shrink: 0; | |||
} | |||
.stores_message { | |||
margin-left: 30rpx; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: flex-start; | |||
align-items: flex-start; | |||
} | |||
.btn_box { | |||
width: 100%; | |||
padding: 0 30rpx; | |||
position: fixed; | |||
bottom: 20rpx; | |||
left: 0; | |||
} | |||
.btn_item { | |||
width: 100%; | |||
height: 90rpx; | |||
line-height: 90rpx; | |||
text-align: center; | |||
background-color: #3175E8; | |||
font-size: 32rpx; | |||
color: #fff; | |||
border-radius: 40rpx; | |||
} |