小程序:首页按钮功能完成;个人中心、生活物资页框架;体温上报定位权限获取失败提示信息;删除部分无用代码;
This commit is contained in:
37
weixin-miniprogram/pages/shop/components/good-list-card.js
Normal file
37
weixin-miniprogram/pages/shop/components/good-list-card.js
Normal file
@@ -0,0 +1,37 @@
|
||||
// pages/shop/components/good-list-card.js
|
||||
Component({
|
||||
// refer: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html
|
||||
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
goodinfo: {
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
displayGoodsInfo: "",
|
||||
displayInfo: "",
|
||||
},
|
||||
|
||||
observers: {
|
||||
'goodinfo': function (goodinfo) {
|
||||
console.log("observers -> goodinfo", goodinfo)
|
||||
this.setData({
|
||||
displayGoodsInfo: JSON.stringify(this.properties.goodinfo)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
|
||||
}
|
||||
})
|
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
22
weixin-miniprogram/pages/shop/components/good-list-card.wxml
Normal file
22
weixin-miniprogram/pages/shop/components/good-list-card.wxml
Normal file
@@ -0,0 +1,22 @@
|
||||
<!--pages/shop/components/good-list-card.wxml-->
|
||||
<view class="good-card-container">
|
||||
<!-- <view class="good-card-image" style="background-image: url('../../../image/home.jpg');">
|
||||
</view> -->
|
||||
<view class="good-card-image" style="background-image: {{ 'url(' + goodinfo.picUrl + ');'}};">
|
||||
</view>
|
||||
<view class="good-card-info">
|
||||
<text class="good-title line-wrap">{{ goodinfo.goodsName }}</text>
|
||||
<view class="good-price good-price-counter">
|
||||
<!-- 原价 -->
|
||||
<view class="good-price-symbol">¥</view>
|
||||
<view class="good-price-number">{{ goodinfo.counterPrice }}</view>
|
||||
</view>
|
||||
<view class="good-price good-price-retail">
|
||||
<!-- 售价 -->
|
||||
<view style="height:0.12em;" class="good-price-line"></view>
|
||||
<view class="good-price-symbol">¥</view>
|
||||
<view class="good-price-number">{{ goodinfo.retailPrice }}</view>
|
||||
</view>
|
||||
<!-- <text class="line-wrap">{{ displayGoodsInfo }}</text> -->
|
||||
</view>
|
||||
</view>
|
82
weixin-miniprogram/pages/shop/components/good-list-card.wxss
Normal file
82
weixin-miniprogram/pages/shop/components/good-list-card.wxss
Normal file
@@ -0,0 +1,82 @@
|
||||
/* pages/shop/components/good-list-card.wxss */
|
||||
.good-card-container {
|
||||
/* background-color: violet; */
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
height: 200px;
|
||||
grid-template-rows: auto 58px;
|
||||
}
|
||||
|
||||
.good-card-image {
|
||||
background-color: bisque;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.good-card-info {
|
||||
padding: 4.5px 6px;
|
||||
}
|
||||
|
||||
/* 自动换行 */
|
||||
.line-wrap {
|
||||
width: 100%;
|
||||
word-break: break-word;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 商品标题 */
|
||||
.good-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
height: 36rpx;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
line-height: 36rpx;
|
||||
margin: 4rpx 0;
|
||||
}
|
||||
|
||||
/* 商品价格 */
|
||||
.good-price {
|
||||
white-space: nowrap;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.good-price-counter {
|
||||
color: #fa4126;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.good-price-retail {
|
||||
color: #bbbbbb;
|
||||
font-size: 24rpx;
|
||||
margin: 0 0 0 8rpx;
|
||||
}
|
||||
|
||||
.good-price .good-price-symbol {
|
||||
font-size: 24rpx;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.good-price .good-price-number {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.good-price .good-price-line {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
margin: 0;
|
||||
background-color: currentColor;
|
||||
}
|
Reference in New Issue
Block a user