3066

package_A/pages/goods-detail/index.js

@@ -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
+            })
+        })
+    }
+
+})

package_A/pages/goods-detail/index.json

@@ -0,0 +1,4 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "商品详情"
+}

package_A/pages/goods-detail/index.wxml

@@ -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>

package_A/pages/goods-detail/index.wxss

@@ -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;
+}