|
@@ -13,78 +13,173 @@
|
|
|
<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy(1)">立即购买</button>
|
|
<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy(1)">立即购买</button>
|
|
|
</view> -->
|
|
</view> -->
|
|
|
<view class="btm-btn">
|
|
<view class="btm-btn">
|
|
|
- <button type="primary" class="add-btn" @click="buy(2)" v-if="showAdd">加入购物车</button>
|
|
|
|
|
|
|
+ <button type="primary" class="add-btn" @click="buy(2)" v-if="showAdd&&jifen==0">加入购物车</button>
|
|
|
<button type="primary" class="buy-btn" @click="buy(1)" :class="{'quck':!showAdd }">立即购买</button>
|
|
<button type="primary" class="buy-btn" @click="buy(1)" :class="{'quck':!showAdd }">立即购买</button>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
-import { collectAdd, collectDel } from '@/api/product.js';
|
|
|
|
|
-export default {
|
|
|
|
|
- props: {
|
|
|
|
|
- many: {
|
|
|
|
|
- default: 9
|
|
|
|
|
- },
|
|
|
|
|
- goodsObjact: {
|
|
|
|
|
- default: function() {
|
|
|
|
|
- return {};
|
|
|
|
|
|
|
+ import {
|
|
|
|
|
+ collectAdd,
|
|
|
|
|
+ collectDel
|
|
|
|
|
+ } from '@/api/product.js';
|
|
|
|
|
+ import {
|
|
|
|
|
+ addJifen
|
|
|
|
|
+ } from '@/api/index.js'
|
|
|
|
|
+ export default {
|
|
|
|
|
+ props: {
|
|
|
|
|
+ jifen: {
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ many: {
|
|
|
|
|
+ default: 9
|
|
|
|
|
+ },
|
|
|
|
|
+ goodsObjact: {
|
|
|
|
|
+ default: function() {
|
|
|
|
|
+ return {};
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ goodsid: {
|
|
|
|
|
+ default: ''
|
|
|
|
|
+ },
|
|
|
|
|
+ showAdd: {
|
|
|
|
|
+ default: true
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- goodsid: {
|
|
|
|
|
- default: ''
|
|
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {};
|
|
|
},
|
|
},
|
|
|
- showAdd: {
|
|
|
|
|
- default: true
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- data() {
|
|
|
|
|
- return {};
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- buy(type) {
|
|
|
|
|
- this.$emit('specOPne', type);
|
|
|
|
|
|
|
+ onLoad() {
|
|
|
|
|
+ addJifen()
|
|
|
},
|
|
},
|
|
|
- //收藏
|
|
|
|
|
- toFavorite(item) {
|
|
|
|
|
- let obj = this;
|
|
|
|
|
- item.userCollect = !item.userCollect;
|
|
|
|
|
- if (!item.userCollect) {
|
|
|
|
|
- collectDel({ id: obj.goodsid, category: 'product' }).then(function(e) {
|
|
|
|
|
- uni.showToast({
|
|
|
|
|
- title: '成功取消收藏',
|
|
|
|
|
- type: 'top',
|
|
|
|
|
- duration: 1500
|
|
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ buy(type) {
|
|
|
|
|
+ this.$emit('specOPne', type);
|
|
|
|
|
+ },
|
|
|
|
|
+ //收藏
|
|
|
|
|
+ toFavorite(item) {
|
|
|
|
|
+ let obj = this;
|
|
|
|
|
+ item.userCollect = !item.userCollect;
|
|
|
|
|
+ if (!item.userCollect) {
|
|
|
|
|
+ collectDel({
|
|
|
|
|
+ id: obj.goodsid,
|
|
|
|
|
+ category: 'product'
|
|
|
|
|
+ }).then(function(e) {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '成功取消收藏',
|
|
|
|
|
+ type: 'top',
|
|
|
|
|
+ duration: 1500
|
|
|
|
|
+ });
|
|
|
});
|
|
});
|
|
|
- });
|
|
|
|
|
- } else {
|
|
|
|
|
- collectAdd({ id: obj.goodsid, category: 'product' }).then(function(e) {
|
|
|
|
|
- uni.showToast({
|
|
|
|
|
- title: '成功加入收藏',
|
|
|
|
|
- type: 'top',
|
|
|
|
|
- duration: 1500
|
|
|
|
|
|
|
+ } else {
|
|
|
|
|
+ collectAdd({
|
|
|
|
|
+ id: obj.goodsid,
|
|
|
|
|
+ category: 'product'
|
|
|
|
|
+ }).then(function(e) {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '成功加入收藏',
|
|
|
|
|
+ type: 'top',
|
|
|
|
|
+ duration: 1500
|
|
|
|
|
+ });
|
|
|
});
|
|
});
|
|
|
- });
|
|
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ };
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
-/* 底部操作菜单 */
|
|
|
|
|
-.page-bottom {
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- bottom: 0rpx;
|
|
|
|
|
- z-index: 95;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- width: 750rpx;
|
|
|
|
|
- height: 120rpx;
|
|
|
|
|
- background-color: #ffffff;
|
|
|
|
|
- /* box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
|
+ /* 底部操作菜单 */
|
|
|
|
|
+ .page-bottom {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ bottom: 0rpx;
|
|
|
|
|
+ z-index: 95;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ width: 750rpx;
|
|
|
|
|
+ height: 120rpx;
|
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
|
+
|
|
|
|
|
+ /* box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
|
|
|
border-radius: 16rpx; */
|
|
border-radius: 16rpx; */
|
|
|
|
|
+ .p-b-btn {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ font-size: $font-sm;
|
|
|
|
|
+ color: $font-color-base;
|
|
|
|
|
+ width: 96rpx;
|
|
|
|
|
+ height: 80rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .iconfont {
|
|
|
|
|
+ font-size: 40rpx;
|
|
|
|
|
+ line-height: 48rpx;
|
|
|
|
|
+ color: $font-color-light;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.active,
|
|
|
|
|
+ &.active .iconfont {
|
|
|
|
|
+ color: $uni-color-primary;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .iconlikefill {
|
|
|
|
|
+ font-size: 46rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 56rpx;
|
|
|
|
|
+ height: 58rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .action-btn-group {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ height: 76rpx;
|
|
|
|
|
+ border-radius: 100px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ margin-left: 20rpx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ &:after {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ right: 50%;
|
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
|
+ height: 28rpx;
|
|
|
|
|
+ width: 0;
|
|
|
|
|
+ border-right: 1px solid rgba(255, 255, 255, 0.5);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .action-btn {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ // width: 270rpx;
|
|
|
|
|
+ // height: 100%;
|
|
|
|
|
+ font-size: $font-base;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ border-radius: 0;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ width: 339rpx;
|
|
|
|
|
+ height: 90rpx;
|
|
|
|
|
+
|
|
|
|
|
+ &.buy-now-btn {
|
|
|
|
|
+ background-color: #303e49;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.add-cart-btn {
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ color: #ff4c4c;
|
|
|
|
|
+ border: #ff4c4c 1px solid;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.p-b-btn {
|
|
.p-b-btn {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -94,126 +189,68 @@ export default {
|
|
|
color: $font-color-base;
|
|
color: $font-color-base;
|
|
|
width: 96rpx;
|
|
width: 96rpx;
|
|
|
height: 80rpx;
|
|
height: 80rpx;
|
|
|
|
|
+
|
|
|
.iconfont {
|
|
.iconfont {
|
|
|
font-size: 40rpx;
|
|
font-size: 40rpx;
|
|
|
line-height: 48rpx;
|
|
line-height: 48rpx;
|
|
|
color: $font-color-light;
|
|
color: $font-color-light;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
&.active,
|
|
&.active,
|
|
|
&.active .iconfont {
|
|
&.active .iconfont {
|
|
|
color: $uni-color-primary;
|
|
color: $uni-color-primary;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .icon-fenxiang2 {
|
|
|
|
|
+ font-size: 42rpx;
|
|
|
|
|
+ transform: translateY(-2rpx);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.iconlikefill {
|
|
.iconlikefill {
|
|
|
font-size: 46rpx;
|
|
font-size: 46rpx;
|
|
|
}
|
|
}
|
|
|
- image {
|
|
|
|
|
- width: 56rpx;
|
|
|
|
|
- height: 58rpx;
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
- .action-btn-group {
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .btm-btn {
|
|
|
|
|
+ z-index: 2;
|
|
|
|
|
+ width: 750rpx;
|
|
|
|
|
+ height: 130rpx;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- height: 76rpx;
|
|
|
|
|
- border-radius: 100px;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- margin-left: 20rpx;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- &:after {
|
|
|
|
|
- content: '';
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 50%;
|
|
|
|
|
- right: 50%;
|
|
|
|
|
- transform: translateY(-50%);
|
|
|
|
|
- height: 28rpx;
|
|
|
|
|
- width: 0;
|
|
|
|
|
- border-right: 1px solid rgba(255, 255, 255, 0.5);
|
|
|
|
|
|
|
+ // justify-content: space-between;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ // justify-content: space-between;
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ padding: 20rpx;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+
|
|
|
|
|
+ // z-index: 666;
|
|
|
|
|
+ .add-btn {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 90rpx;
|
|
|
|
|
+ border: 1px solid #ff4c4c;
|
|
|
|
|
+ border-radius: 45rpx;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #ff4c4c;
|
|
|
|
|
+ line-height: 90rpx;
|
|
|
}
|
|
}
|
|
|
- .action-btn {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- // width: 270rpx;
|
|
|
|
|
- // height: 100%;
|
|
|
|
|
- font-size: $font-base;
|
|
|
|
|
- padding: 0;
|
|
|
|
|
- border-radius: 0;
|
|
|
|
|
- background: transparent;
|
|
|
|
|
- width: 339rpx;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .buy-btn {
|
|
|
|
|
+ width: 100%;
|
|
|
height: 90rpx;
|
|
height: 90rpx;
|
|
|
- &.buy-now-btn {
|
|
|
|
|
- background-color: #303e49;
|
|
|
|
|
- }
|
|
|
|
|
- &.add-cart-btn {
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
- color: #ff4c4c;
|
|
|
|
|
- border: #ff4c4c 1px solid;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ background: #ff4c4c;
|
|
|
|
|
+ border-radius: 45rpx;
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #ff4c4c;
|
|
|
|
|
+ line-height: 90rpx;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .quck {
|
|
|
|
|
+ width: 691px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
-.p-b-btn {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- font-size: $font-sm;
|
|
|
|
|
- color: $font-color-base;
|
|
|
|
|
- width: 96rpx;
|
|
|
|
|
- height: 80rpx;
|
|
|
|
|
- .iconfont {
|
|
|
|
|
- font-size: 40rpx;
|
|
|
|
|
- line-height: 48rpx;
|
|
|
|
|
- color: $font-color-light;
|
|
|
|
|
- }
|
|
|
|
|
- &.active,
|
|
|
|
|
- &.active .iconfont {
|
|
|
|
|
- color: $uni-color-primary;
|
|
|
|
|
- }
|
|
|
|
|
- .icon-fenxiang2 {
|
|
|
|
|
- font-size: 42rpx;
|
|
|
|
|
- transform: translateY(-2rpx);
|
|
|
|
|
- }
|
|
|
|
|
- .iconlikefill {
|
|
|
|
|
- font-size: 46rpx;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-.btm-btn {
|
|
|
|
|
- z-index: 2;
|
|
|
|
|
- width: 750rpx;
|
|
|
|
|
- height: 130rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- // justify-content: space-between;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- // justify-content: space-between;
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- padding: 20rpx;
|
|
|
|
|
- bottom: 0;
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
- // z-index: 666;
|
|
|
|
|
- .add-btn {
|
|
|
|
|
- width: 339rpx;
|
|
|
|
|
- height: 90rpx;
|
|
|
|
|
- border: 1px solid #ff4c4c;
|
|
|
|
|
- border-radius: 45rpx;
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
- font-size: 36rpx;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- color: #ff4c4c;
|
|
|
|
|
- line-height: 90rpx;
|
|
|
|
|
- }
|
|
|
|
|
- .buy-btn {
|
|
|
|
|
- width: 339rpx;
|
|
|
|
|
- height: 90rpx;
|
|
|
|
|
- background: #ff4c4c;
|
|
|
|
|
- border-radius: 45rpx;
|
|
|
|
|
- font-size: 36rpx;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- color: #ff4c4c;
|
|
|
|
|
- line-height: 90rpx;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- }
|
|
|
|
|
- .quck {
|
|
|
|
|
- width: 691px;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
</style>
|
|
</style>
|