店铺会员制Vip功能增加
This commit is contained in:
@@ -1,20 +1,16 @@
|
||||
<template>
|
||||
<view class="goods-item">
|
||||
<image
|
||||
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F18%2F20200318231340_shbab.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662167784&t=893e1b78d1563aa0a9a65f4d14f21643"
|
||||
mode="aspectFill" class="goods-cover" />
|
||||
<image :src="item.cover" mode="aspectFill" class="goods-cover" />
|
||||
<view class="goods-info">
|
||||
<view class="_title">北欧抱枕靠垫沙发垫办公室腰靠等功能弃权</view>
|
||||
<view class="_des">金凯来京东店 </view>
|
||||
<view class="_title">{{item.name}}</view>
|
||||
<view class="_des">{{item.shop.name}} </view>
|
||||
<view class="_pin">
|
||||
<view class="_has">
|
||||
<image src="/static/book/fire.png" mode="widthFix" class="fire" /> 已拼1件
|
||||
</view>
|
||||
<view class="tuan">2人团</view>
|
||||
<view class="_has" v-if="item.sales>0"> <image src="/static/book/fire.png" mode="widthFix" class="fire" /> 已拼 {{item.sales}} 件 </view>
|
||||
<view class="tuan">{{item.active.number}}人团</view>
|
||||
</view>
|
||||
<view class="price">
|
||||
<view class="money"> ￥160.00 </view>
|
||||
<view class="now-pin" @click="goPin(90)">马上拼团</view>
|
||||
<view class="money">{{item.active.price}} <span>DT积分</span> </view>
|
||||
<view class="now-pin" @click="goPin(item.goods_id)">马上拼团</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -91,7 +87,8 @@
|
||||
color: #d81e06;
|
||||
background-color: rgba($color: $text-price, $alpha: 0.1);
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 30rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-right: $margin;
|
||||
|
||||
image {
|
||||
width: 24rpx;
|
||||
@@ -100,9 +97,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.tuan {
|
||||
margin-left: $margin;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
@@ -116,7 +110,12 @@
|
||||
.money {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #d81e06;
|
||||
color: #d81e06;
|
||||
span{
|
||||
font-size: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.now-pin {
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
# 使用方法
|
||||
```
|
||||
<x-pay-pwd
|
||||
ref="xPayPwd"
|
||||
:type="1"
|
||||
:maskClick="true"
|
||||
top="unset"
|
||||
bottom="0rpx"
|
||||
:showClose="false"
|
||||
@change="change"
|
||||
:showHead="true"
|
||||
headText="请输入支付密码"
|
||||
>
|
||||
<template #center>
|
||||
<button @click="clear">插槽</button>
|
||||
</template>
|
||||
</x-pay-pwd>
|
||||
```
|
||||
```
|
||||
export default {
|
||||
methods: {
|
||||
// 监听输入框内容变化
|
||||
change({password}){
|
||||
console.log(password)
|
||||
},
|
||||
// 清空输入框内容,一般用于密码输错手动清空
|
||||
clear(){
|
||||
this.$refs.xPayPwd._clearKey();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
# 属性
|
||||
| 字段 | 类型 | 默认 | 描述 |
|
||||
| --------- | ------- | -------------- | ---------------------------------------- |
|
||||
| type | Number | 1 | 0原生键盘 1自定义键盘 |
|
||||
| maskClick | Boolean | true | 是否允许点击蒙版 |
|
||||
| top | String | 20vh | 中间内容的top值，为absolute的top值 |
|
||||
| bottom | String | 0rpx | 中间内容的bottom值，为absolute的bottom值 |
|
||||
| showClose | Boolean | true | 是否显示关闭按钮 |
|
||||
| showHead | Boolean | true | 是否显示标题 |
|
||||
| headText | String | 请输入支付密码 | 标题文本 |
|
||||
# 事件
|
||||
|
||||
| 事件名 | 默认参数 | 描述 |
|
||||
| ------ | ---------- | -------------------------------- |
|
||||
| change | {password} | 监听内容输入，参数返回输入的内容 |
|
||||
|
||||
# 组件方法
|
||||
| 方法名 | 描述 |
|
||||
| ------ | -------------------------------- |
|
||||
| _open | 打开弹窗 |
|
||||
| _close | 关闭弹窗 |
|
||||
| _clearnKey | 请空输入内容 |
|
||||
|
||||
# 注意
|
||||
|
||||
```
|
||||
ios下输入框不会自动获取焦点，需要手动点击输入区域
|
||||
```
|
||||
|
||||
# 参与贡献
|
||||
+ xueshuai(xueshuai_12@163.com)
|
||||
+ Email：xueshuai_12@163.com
|
||||
+ GitHub：GitHub地址
|
||||
+ QQ交流群：1063233592
|
||||
+ 个人博客：(薛小帅)[http://blog.xueshuai.top]
|
||||
+ 个人公众号：叮当Ding
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
157
components/vip-goods-item/index.vue
Normal file
157
components/vip-goods-item/index.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="goods-item">
|
||||
<image :src="item.cover" mode="aspectFill" class="goods-cover" />
|
||||
<view class="tags"> VIP </view>
|
||||
<view class="goods-info">
|
||||
<view class="_title">{{item.name}}</view>
|
||||
<view class="_des">
|
||||
{{item.shop.name}}
|
||||
</view>
|
||||
<view class="_pin" v-if="item.sales>0">
|
||||
<view class="_has"> <image src="/static/book/fire.png" mode="widthFix" class="fire" /> 已换购 {{item.sales}} 件 </view>
|
||||
</view>
|
||||
<view class="price">
|
||||
<view class="money">{{item.price.price_min}} <span>DT积分</span> </view>
|
||||
<view class="now-pin" @click="goPin(item.goods_id)">立即领取</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goPin(id) {
|
||||
this.$emit('goPin',id)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.goods-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
border-radius: 10rpx;
|
||||
padding: $padding;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.tags {
|
||||
position: absolute;
|
||||
top: 6rpx;
|
||||
left: -54rpx;
|
||||
background: #d81e06;
|
||||
color: #fff;
|
||||
width: 150rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 4rpx 0;
|
||||
text-align: center;
|
||||
transform: rotate(-45deg);
|
||||
font-weight: bold;
|
||||
letter-spacing:2rpx;
|
||||
}
|
||||
|
||||
.goods-cover {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
width: calc(100% - 160rpx - 30rpx);
|
||||
padding-left: $padding;
|
||||
|
||||
._title {
|
||||
overflow: hidden;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
._des {
|
||||
font-size: 28rpx;
|
||||
padding: 6rpx 0;
|
||||
color: #4f300a;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
._pin {
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
color: $text-gray;
|
||||
|
||||
._has {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
color: #d81e06;
|
||||
background-color: rgba($color: $text-price, $alpha: 0.1);
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 30rpx;
|
||||
|
||||
image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tuan {
|
||||
margin-left: $margin;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.money {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #d81e06;
|
||||
span{
|
||||
font-size: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.now-pin {
|
||||
background-color: #d81e06;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
padding: 6rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user