// 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: { | |||||
} | |||||
}) |
{ | |||||
"component": true, | |||||
"usingComponents": {} | |||||
} |
<!--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 */ | |||||
.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 | // package_mine/pages/exchange/index.js | ||||
import {wgs84togcj02} from '../../../utils/util.js' | |||||
Page({ | Page({ | ||||
/** | /** | ||||
resetList() { | resetList() { | ||||
this.setData({ list: [] }) | 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), | |||||
// }) | |||||
// } | |||||
}) | }) |
{ | { | ||||
"usingComponents": { | "usingComponents": { | ||||
"list": "../../../components/List/index" | |||||
"list": "../../../components/List/index", | |||||
"exchange-info": "../../../components/exchangeInfo/index" | |||||
}, | }, | ||||
"navigationBarTitleText": "我的兑换" | |||||
"navigationBarTitleText": "我的兑换", | |||||
"navigationBarBackgroundColor": "#F2F6F9" | |||||
} | } |
<list id="list" class="exchange_list" url="{{current}}" bind:update-list="updateList" list="{{list}}" bind:reset-list="resetList" params="{{params}}"> | <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_item" data-item="{{item}}" wx:for="{{list}}" wx:key="index"> | ||||
<view class="exchange_info"> | <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> | ||||
</view> | </view> | ||||
</list> | </list> | ||||
</view> | </view> |
justify-content: flex-start; | justify-content: flex-start; | ||||
align-items: center; | align-items: center; | ||||
color: #0C0C0C; | color: #0C0C0C; | ||||
background-color: #F2F6F9; | |||||
} | } | ||||
.exchange_list { | .exchange_list { | ||||
width: 100%; | width: 100%; | ||||
} | } | ||||
.exchange_item { | .exchange_item { | ||||
width: 100%; | 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%; | width: 100%; | ||||
padding: 16rpx 30rpx; | |||||
display: flex; | 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; | |||||
} | |||||