3070

components/exchangeInfo/index.js

@@ -0,0 +1,34 @@
+// components/exchangeInfo/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        dataSource: {}
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        item: {}
+    },
+
+    observers: {
+        'dataSource'(value) {
+            let item = {}
+            item = {...value}
+            console.log(value, '====');
+            if(value.goods.goodsImage) {
+                item.coverImage = value.goods.goodsImage.split(',')[0]
+            }
+            this.setData({item})
+        }
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

components/exchangeInfo/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/exchangeInfo/index.wxml

@@ -0,0 +1,30 @@
+<!--components/exchangeInfo/index.wxml-->
+<view class="exchange_info">
+    <!-- 商品信息 -->
+    <view class="info_head">
+        <image class="exchange_img" src="{{item.coverImage}}"></image>
+        <view class="info_box">
+            <view class="goods_title">
+                <text class="goods_name" >{{item.goods.goodsName}}</text>
+                <view class="status_tab" wx:if="{{item.exchangeFlag === 1}}" style="color: #5472EF;background-color: #DCE3FE;" >已核销</view>
+                <view class="status_tab" wx:else style="color: #EB6100;background-color: rgba(235, 97, 0, 0.2);" >未核销</view>
+            </view>
+            <text class="info_item">{{item.goods.goodsSpec}}</text>
+            <view class="points_box">实付：<text style="color: #2D84E4;">{{item.goods.pointsChange}}</text> 积分</view>
+        </view>
+    </view>
+    <!-- 店铺信息 -->
+    <view class="info_foot">
+        <view class="stores_info">
+            <image class="store_icon" src="../../assets/img/store.png"></image>
+            <text class="store_text">商家：{{item.merchant.shopsName}}</text>
+        </view>
+        <view class="stores_info">
+            <image class="store_icon" src="../../assets/img/address.png"></image>
+            <text class="store_text">地址：{{item.merchant.shopsAddress}}</text>
+        </view>
+    </view>
+    <!-- 按钮区域 -->
+    <slot></slot>
+
+</view>

components/exchangeInfo/index.wxss

@@ -0,0 +1,83 @@
+/* components/exchangeInfo/index.wxss */
+.exchange_info {
+    width: 100%;
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-end;
+    border-bottom: 2rpx solid #eeeeee;
+}
+.info_head {
+    width: 100%;
+    padding: 40rpx 35rpx;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    border-bottom: 1rpx solid #D3DCE6;
+}
+.exchange_img {
+    width: 155rpx;
+    height: 155rpx;
+    flex-shrink: 0;
+}
+.info_box {
+    margin-left: 25rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+.goods_title {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.goods_name {
+    width: calc(100vw - 420rpx);
+    font-size: 32rpx;
+    font-weight: bold;
+}
+.status_tab {
+    width: 100rpx;
+    padding: 8rpx 10rpx;
+    font-size: 26rpx;
+}
+.info_item {
+    width: calc(100vw - 300rpx);
+    margin-top: 20rpx;
+    font-size: 26rpx;
+    color: #5B5B5B;
+}
+.points_box {
+    margin-top: 20rpx;
+    font-size: 28rpx;
+}
+.info_foot {
+    width: 100%;
+    padding: 32rpx 35rpx 10rpx 35rpx;
+    border-bottom: 1rpx solid #D3DCE6;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+.stores_info {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 30rpx;
+}
+.store_icon {
+    width: 40rpx;
+    height: 40rpx;
+    margin-right: 20rpx;
+    flex-shrink: 0;
+}
+.goods_name, .info_item, .store_text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}

package_mine/pages/exchange/index.js

@@ -1,4 +1,5 @@
 // package_mine/pages/exchange/index.js
+import {wgs84togcj02} from '../../../utils/util.js'
 Page({
 
     /**
@@ -27,12 +28,16 @@ Page({
     resetList() {
         this.setData({ list: [] })
     },
+    // 导航
+    navigateTo(e){
+        const item = e.currentTarget.dataset.item
+        const {longitude,latitude} = item
+        let coordinate=wgs84togcj02([longitude,latitude])
+        wx.openLocation({
+            latitude: parseFloat(coordinate[1]), // 纬度，范围为-90~90，负数表示南纬
+            longitude: parseFloat(coordinate[0]), // 经度，范围为-180~180，负数表示西经
+            scale: 17, // 缩放比例
+        })
+    }
 
-    // /* 跳转至详情页 */
-    // showDetail(e) {
-    //     let data = e.currentTarget.dataset.item
-    //     wx.navigateTo({
-    //     url: '/package_mine/pages/feedbackDetail/index?data='+ JSON.stringify(data),
-    //     })
-    // }
 })

package_mine/pages/exchange/index.json

@@ -1,6 +1,8 @@
 {
     "usingComponents": {
-        "list": "../../../components/List/index"
+        "list": "../../../components/List/index",
+        "exchange-info": "../../../components/exchangeInfo/index"
     },
-    "navigationBarTitleText": "我的兑换"
+    "navigationBarTitleText": "我的兑换",
+    "navigationBarBackgroundColor": "#F2F6F9"
 }

package_mine/pages/exchange/index.wxml

@@ -3,16 +3,12 @@
     <list id="list" class="exchange_list" url="{{current}}" bind:update-list="updateList" list="{{list}}" bind:reset-list="resetList" params="{{params}}">
         <view class="exchange_item" data-item="{{item}}" wx:for="{{list}}" wx:key="index">
             <view class="exchange_info">
-                <image class="exchange_img" src="{{item.shopsImage}}"></image>
-                <view class="info_box">
-                    <view style="color: #2D84E4;" class="status_box">已兑换</view>
-                    <text class="info_item" style="font-size: 30rpx; font-weight: bold;">{{item.shopsName}}</text>
-                    <text class="info_item" style="font-size: 26rpx;margin: 16rpx 0;">{{item.areaName}}</text>
-                    <text class="info_item" style="font-size: 22rpx;">{{item.createTime}}</text>
-                    <view class="status_box">实付：<text style="color: #2D84E4;">{{item.pointsChange}}</text>积分</view>
-                </view>
+                <exchange-info dataSource="{{item}}">
+                    <view class="nav_box">
+                        <view class="nav_btn" data-item="{{item}}" bindtap="navigateTo">导航</view>
+                    </view>
+                </exchange-info>
             </view>
         </view>
-        
     </list>
 </view>

package_mine/pages/exchange/index.wxss

@@ -8,6 +8,7 @@
     justify-content: flex-start;
     align-items: center;
     color: #0C0C0C;
+    background-color: #F2F6F9;
 }
 .exchange_list {
     width: 100%;
@@ -15,44 +16,23 @@
 }
 .exchange_item {
     width: 100%;
-    padding: 30rpx 0;
-    background-color: #ffffff;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-end;
-    border-bottom: 2rpx solid #eeeeee;
-}
-.info_head {
-   font-size: 22rpx; 
+    margin-bottom: 20rpx;
 }
-.exchange_info {
+.nav_box {
     width: 100%;
+    padding: 16rpx 30rpx;
     display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-}
-.exchange_img {
-    width: 262rpx;
-    height: 180rpx;
-    margin-right: 30rpx;
-    border-radius: 20rpx;
-}
-.info_box {
-    width: 395rpx;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-}
-.status_box {
-    width: 100%;
-    text-align: end;
-    font-size: 22rpx;
+    justify-content: flex-end;
+    align-items: center;
 }
-.info_item {
-    width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
+.nav_btn {
+    width: 160rpx;
+    height: 50rpx;
+    line-height: 50rpx;
+    text-align: center;
+    background-color: #5472EF;
+    border-radius: 25rpx;
+    font-size: 28rpx;
+    color: #ffffff;
+}
+