109 lines
2.2 KiB
Vue
109 lines
2.2 KiB
Vue
<template>
|
|
<view class='commodity'>
|
|
<!-- 单个商品组件 -->
|
|
<view class='commodity-item'
|
|
v-for="(item,index) in dataList"
|
|
:key="index"
|
|
:style="'width:'+ itemW + ';' "
|
|
@tap="goDetails(item)"
|
|
>
|
|
<image class='commodity-img' :src="item.imgUrl" mode="widthFix"
|
|
:style="'height:'+ bigH +';'"></image>
|
|
<view class='commodity-content'>
|
|
<text class='commodity-name'>{{item.name}}</text>
|
|
<view>
|
|
<text class='pprice'>￥{{item.pprice / 100}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import process from '../../utils/process.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
name:null,
|
|
id: null,
|
|
imgUrl:null,
|
|
price:null,
|
|
Flowerpattern:null
|
|
}
|
|
},
|
|
props:{
|
|
dataList: Array,
|
|
itemW:{
|
|
type: String,
|
|
default: "375rpx"
|
|
},
|
|
bigH:{
|
|
type: String,
|
|
default: "375rpx"
|
|
}
|
|
},
|
|
methods:{
|
|
goDetails(item){
|
|
//跳转支付页面，需要把选择的棉花糖种类传过去。怎么选择其中一种？ 传递参数就行
|
|
this.name = item.name
|
|
this.id = item.id
|
|
this.imgUrl = item.imgUrl
|
|
this.price = item.pprice
|
|
process.SugarType[0] = item.Flowerpattern //赋值给全局变量并发送
|
|
uni.navigateTo({
|
|
//传递数据，不能只传一个值，传递一个对象
|
|
url:'/pages/pay/pay?dataList='+JSON.stringify({
|
|
name:item.name,
|
|
id:item.id,
|
|
imgUrl:item.imgUrl,
|
|
price:item.pprice,
|
|
})
|
|
})
|
|
// uni.navigateTo({
|
|
// url: '/pages/cottonCandy/SugarMaking'
|
|
// })
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.commodity{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.commodity-item{
|
|
width: 375rpx;
|
|
padding-bottom: 10rpx;
|
|
}
|
|
.commodity-img{
|
|
width: 100%;
|
|
height: 375rpx;
|
|
}
|
|
.commodity-content{
|
|
text-align: center;
|
|
}
|
|
.commodity-name{
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
color: #444444;
|
|
word-break: break-all;
|
|
/* padding: 6rpx 20rpx; */
|
|
}
|
|
.oprice{
|
|
text-decoration: line-through;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
.discount{
|
|
border-radius: 4rpx;
|
|
border: 1rpx solid #FF3333;
|
|
padding: 2rpx 10rpx;
|
|
font-size: 20rpx;
|
|
color: #FF3333;
|
|
}
|
|
</style> |