main
parent
8d3df67a43
commit
24bdc2a3ba
@ -0,0 +1,46 @@
|
||||
<template name="lucky">
|
||||
<view class="lucky" catchtouchmove="preventTouchMove">
|
||||
<view class="lucky-hongbao">
|
||||
<view class="lucky-hongbao-header">
|
||||
<image src="http://pos.juweiyun.cn/373001/file/wechatAppmemberccc.png"></image>
|
||||
</view>
|
||||
<view class="lucky-hongbao-list">
|
||||
<scroll-view scroll-y class="{{'lucky-hongbao-scroll '+'lucky-hongbao-scroll'+(luckyData.length>2?'n':luckyData.length)}}">
|
||||
|
||||
<block wx:if="{{upWindowList.length>0}}">
|
||||
<view class="lucky-hongbao-item" wx:for="{{upWindowList}}" wx:key="item">
|
||||
<view class="upWindowItemLeft">
|
||||
<image src='/images/upwindowbg.png' style='width:530rpx;height:150rpx;'></image>
|
||||
<image class="lucky-hongbao-icon" src="{{item.logoUrl}}"></image>
|
||||
</view>
|
||||
<!-- {{item.logoUrl}} -->
|
||||
<view class="lucky-hongbao-middle">
|
||||
<view class="lucky-hongbao-name">{{item.title}}</view>
|
||||
<view class="lucky-hongbao-rule">{{item.content}}</view>
|
||||
<view class="lucky-hongbao-time">{{item.time}}</view>
|
||||
</view>
|
||||
<view class="lucky-hongbao-right">
|
||||
<view class="lucky-hongbao-money">
|
||||
|
||||
<view class="lucky-hongbao-amount">{{item.cardTypeCn}}</view>
|
||||
</view>
|
||||
|
||||
<form bindsubmit="" reportSubmit="true">
|
||||
<button class="lucky-hongbao-share has-share2" formType="submit">{{item.quantity}} 张</button>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<form bindsubmit="receiveUpWindow" reportSubmit="true" data-=''>
|
||||
<button class="lucky-hongbao-share2 has-share" formType="submit">一键领取</button>
|
||||
</form>
|
||||
</view>
|
||||
<form bindsubmit="closeUpWindows" class="lucky-hongbao-close" reportSubmit="true">
|
||||
<button class="close-btn" formType="submit">
|
||||
<image src="/components/Lucky/media/close.png"></image>
|
||||
</button>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -0,0 +1,273 @@
|
||||
.lucky {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color:rgba(0,0,0,0.9);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.lucky-hongbao {
|
||||
position: relative;
|
||||
top:-80rpx;
|
||||
}
|
||||
|
||||
.lucky-hongbao-header {
|
||||
width: 666rpx;
|
||||
height: 212rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lucky-hongbao-header image {
|
||||
width: 640rpx;
|
||||
height: 220rpx;
|
||||
}
|
||||
|
||||
.lucky-hongbao-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
left: 32rpx;
|
||||
top: 32rpx;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.lucky-hongbao-list {
|
||||
background: linear-gradient(0deg, rgba(247, 44, 48, 1) 0%, rgba(254, 148, 68, 1) 100%);
|
||||
border-radius: 0px 0px 20rpx 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-bottom-left-radius: 16rpx;
|
||||
border-bottom-right-radius: 16rpx;
|
||||
width: 557.8rpx;
|
||||
height: 600rpx;
|
||||
margin: auto auto;
|
||||
margin-top: -3rpx;
|
||||
}
|
||||
|
||||
.lucky-hongbao-scroll {
|
||||
width: 550rpx;
|
||||
padding-left: 11.8rpx;
|
||||
max-height: 450rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.lucky-hongbao-scroll1 {
|
||||
height: 170rpx;
|
||||
}
|
||||
|
||||
.lucky-hongbao-scroll2 {
|
||||
height: 350rpx;
|
||||
}
|
||||
|
||||
.lucky-hongbao-scrolln {
|
||||
height: 420rpx;
|
||||
}
|
||||
|
||||
.lucky-hongbao-item {
|
||||
width: 530rpx;
|
||||
height: 150rpx;
|
||||
position: relative;
|
||||
margin-bottom: 16rpx;
|
||||
/* margin-top: 16rpx; */
|
||||
}
|
||||
|
||||
.lucky-hongbao-middle {
|
||||
position: absolute;
|
||||
left: 156rpx;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
padding: 3rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.lucky-hongbao-name {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 214rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang-SC-Regular;
|
||||
font-weight: 400;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
|
||||
.lucky-hongbao-rule {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.lucky-hongbao-time {
|
||||
margin-top: 4rpx;
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.lucky-hongbao-right {
|
||||
position: absolute;
|
||||
right: 16rpx;
|
||||
bottom: 30rpx;
|
||||
width: 116rpx;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.lucky-hongbao-money {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lucky-hongbao-rmb {
|
||||
color: #ff5339;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.lucky-hongbao-amount {
|
||||
width: 97rpx;
|
||||
height: 49rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(249, 67, 53, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lucky-hongbao-footer {
|
||||
width: 640rpx;
|
||||
height: 120rpx;
|
||||
margin-top: -100rpx;
|
||||
}
|
||||
|
||||
.lucky-hongbao-msg {
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #ffe9b2;
|
||||
text-align: center;
|
||||
background: #e5193e;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-bottom-left-radius: 20rpx;
|
||||
border-bottom-right-radius: 20rpx;
|
||||
}
|
||||
|
||||
.lucky-hongbao-close {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
right: 0rpx;
|
||||
}
|
||||
|
||||
.lucky-hongbao-use {
|
||||
width: 116rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 22rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 44rpx;
|
||||
color: #fff;
|
||||
background: #ff4b33;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: none;
|
||||
margin-top: 850rpx;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
margin-left:-290rpx;
|
||||
}
|
||||
|
||||
.close-btn image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.lucky-hongbao-get {
|
||||
width: 116rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 22rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 44rpx;
|
||||
color: #40210a;
|
||||
background: #e5e5e5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lucky-hongbao-share {
|
||||
width: 116rpx;
|
||||
height: 44rpx;
|
||||
font-size: 23rpx;
|
||||
line-height: 44rpx;
|
||||
color: #583834;
|
||||
border: 2rpx solid #f63c28;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
.share-btn {
|
||||
width: 524rpx;
|
||||
height: 112rpx;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #e5193e;
|
||||
}
|
||||
|
||||
.share-btn image {
|
||||
width: 524rpx;
|
||||
height: 112rpx;
|
||||
}
|
||||
|
||||
.share-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.has-share {
|
||||
background: rgba(248, 62, 51, 1);
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(248, 65, 52, 1);
|
||||
width: 460rpx;
|
||||
height: 80rpx;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 40rpx;
|
||||
line-height: 80rpx;
|
||||
bottom: 17rpx;
|
||||
}
|
||||
|
||||
.has-share2 {
|
||||
overflow: hidden;
|
||||
width: 86rpx;
|
||||
height: 36rpx;
|
||||
border: 1rpx solid rgba(254, 84, 99, 1);
|
||||
border-radius: 18rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(249, 67, 53, 1);
|
||||
text-align: center;
|
||||
line-height: 36rpx;
|
||||
margin-top: 13rpx;
|
||||
}
|
||||
|
||||
.upWindowItemLeft {
|
||||
width: 28%;
|
||||
height: 100%;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,44 @@
|
||||
// components/cart/cart.js
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
cartFlag:Boolean,
|
||||
list:Array,
|
||||
color:String
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
},
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
cy_hide:function(){
|
||||
this.triggerEvent("cy_hide");
|
||||
},
|
||||
cy_clearCart:function(){
|
||||
this.triggerEvent("cy_clearCart");
|
||||
},
|
||||
cy_subCartItem:function(e){
|
||||
this.triggerEvent("cy_subCartItem",e.currentTarget);
|
||||
},
|
||||
cy_addCartItem:function(e){
|
||||
this.triggerEvent("cy_addCartItem",e.currentTarget);
|
||||
},
|
||||
cy_subSpecItem:function(){
|
||||
this.triggerEvent("cy_subSpecItem");
|
||||
},
|
||||
cy_addSpecItem:function(){
|
||||
this.triggerEvent("cy_addSpecItem");
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
<view hidden='{{cartFlag}}' class='cy-cart-back'>
|
||||
<view class='cy-mask' style='position:fixed; bottom:120rpx;' bindtap='cy_hide' catchtouchmove='true'></view>
|
||||
<view class='cy-cart' catchtap='test'>
|
||||
<view class='cy-cart-header flex-display'>
|
||||
<view class='cy-cart-clear content-center' bindtap='cy_clearCart'>
|
||||
<image src='../../images/icon-clear.png'></image>
|
||||
<view>清空购物车</view>
|
||||
</view>
|
||||
<view class='cy-cart-close' bindtap='cy_hide'>
|
||||
<text class='iconfont icon-guanbi'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='cy-cart-content'>
|
||||
<block wx:for="{{list}}" wx:key="index">
|
||||
<!-- 套菜明细 -->
|
||||
<view class="" wx:if="{{item.isSuit == 3}}">
|
||||
<view class='cy-cart-item-view' style="height:auto;">
|
||||
<view class='cy-cart-content-name down-center cy-ellipsis' style="color:gray; width:90%">（套菜){{item.productName}} x{{item.count}}</view>
|
||||
<view style="min-height:50rpx; cy-ellipsis; color:#c0c0c0; font-size:28rpx; padding-left:15rpx;">{{item.showName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 套菜 -->
|
||||
<view wx:if="{{item.isSuit == 2}}" class='{{index != 0 ? " cy-cart-line ":" "}}' style="width:750rpx;">
|
||||
<view class='cy-cart-item-view down-center' style='margin-top:15rpx;'>
|
||||
<view class='cy-cart-content-name cy-ellipsis down-center'>{{item.productName}}</view>
|
||||
<view class='cy-cart-content-count down-center'>¥{{item.receivable}}</view>
|
||||
<view class='cy-product-width flex-display'>
|
||||
<image src='../../images/icon-sub.png' data-index="{{index}}" class='cy-product-sym ' bindtap='cy_subCartItem' />
|
||||
<view class='cy-product-count content-center' style="color:#333;">{{item.count}}</view>
|
||||
<view class='cy-product-sym content-center' style='background: {{color}};' data-index="{{index}}" bindtap='cy_addCartItem'>
|
||||
<image class="iconfont iconjiahao" style="color:{{color}};" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 普通菜 -->
|
||||
<view wx:if="{{item.isSuit == 1}}" class='cy-cart-item {{index != 0 ? "cy-cart-line":""}}'>
|
||||
<view class='cy-cart-item-view down-center' style='margin-top:15rpx;'>
|
||||
<view class='cy-cart-content-name down-center cy-ellipsis'>{{item.productName}}</view>
|
||||
<view class='cy-cart-content-count down-center'>
|
||||
<block wx:if="{{item.promotionTotalPrice>0}}">
|
||||
<text style="font-size:32rpx;">¥{{item.promotionTotalPrice}}</text>
|
||||
<text class="cy-product-originalPrice">¥{{item.receivable}}</text>
|
||||
</block>
|
||||
<block wx:else>
|
||||
¥{{item.receivable}}
|
||||
</block>
|
||||
</view>
|
||||
<view class='cy-product-width flex-display'>
|
||||
<image src='../../images/icon-sub.png' data-index="{{index}}" class='cy-product-sym ' bindtap='cy_subCartItem' />
|
||||
<view class='cy-product-count content-center' style="color:#333;">{{item.count}}</view>
|
||||
<view class='cy-product-sym content-center' style='background: {{color}};' data-index="{{index}}" bindtap='cy_addCartItem'>
|
||||
<image class="iconfont iconjiahao" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='cy-cart-item-view cy-ellipsis' style='color:#999'>
|
||||
<text>{{item.showName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view style="height:32rpx;"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,954 @@
|
||||
.cy-top-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cy-view-top {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 3rpx 12rpx 0px rgba(97, 97, 97, 0.10);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.cy-title-item {
|
||||
margin-left: 30rpx;
|
||||
margin-top: 15rpx;
|
||||
width: 460rpx;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cy-food-mark {
|
||||
position: absolute;
|
||||
bottom: 26rpx;
|
||||
right: 30rpx;
|
||||
width: 150rpx;
|
||||
height: 60rpx;
|
||||
/* border: 1rpx solid rgba(254, 182, 9, 1); */
|
||||
border-radius: 30rpx;
|
||||
/* color: #ffc639; */
|
||||
top: 15rpx;
|
||||
}
|
||||
|
||||
.cy-food-mark image {
|
||||
width: 33rpx;
|
||||
height: 47rpx;
|
||||
font-size: 33rpx;
|
||||
}
|
||||
|
||||
.cy-food-mark text {
|
||||
margin-left: 14rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.cy-title-row {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.cy-title-row text:nth-child(1) {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.cy-title-row text:nth-child(2) {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cy-view-evaluation {
|
||||
width: 750rpx;
|
||||
height: 130rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.cy-evaluation-list {
|
||||
position: relative;
|
||||
margin-top: 20rpx;
|
||||
width: 750rpx;
|
||||
bottom: 0rpx;
|
||||
background: white;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.cy-evaluation-item {
|
||||
margin: 50rpx 30rpx;
|
||||
width: 690rpx;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cy-evaluation-header-view {
|
||||
margin-right: 15rpx;
|
||||
width: 80rpx;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cy-evaluation-header-view image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #f3f3f3;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cy-item-name {
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
.cy-item-time {
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
|
||||
.cy-item-content {
|
||||
margin-top: 10rpx;
|
||||
font-size: 28rpx;
|
||||
width: 596rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
.cy-item-evaluate {
|
||||
margin-right: 15rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
}
|
||||
|
||||
.cy-item-icon-image {
|
||||
width: 24rpx;
|
||||
height: 23rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
|
||||
.cy-evaluation-row {
|
||||
margin-left: 50rpx;
|
||||
width: 345rpx;
|
||||
height: 130rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
|
||||
.cy-evaluation-view {
|
||||
margin-left: 15rpx;
|
||||
width: auto;
|
||||
height: 30rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cy-evaluation-row image {
|
||||
width: 32rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.cy-view-store {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
letter-spacing: 1.5rpx;
|
||||
top: 240rpx;
|
||||
bottom: 0rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.cy-store-info {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.cy-store-info text {
|
||||
margin-left: 20rpx;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
width: 560rpx;
|
||||
}
|
||||
|
||||
.cy-store-bottom-line {
|
||||
margin-top: 20rpx;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.cy-store-mobile {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
/* background: #ffc639; */
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cy-store-icon {
|
||||
margin-left: 30rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.cy-store-icon image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cy-store-address {
|
||||
font-size: 12px;
|
||||
font-weight: 350;
|
||||
}
|
||||
|
||||
.cy-top-bar {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
top: 160rpx;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.cy-top-bar view {
|
||||
width: 281rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cy-top-title {
|
||||
padding-top: 10rpx;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cy-normal-title {
|
||||
border-bottom: 5rpx solid white;
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cy-select-title {
|
||||
border-bottom: 4rpx solid var(--color--);
|
||||
font-size: 32rpx;
|
||||
/* color: #ffc639; */
|
||||
}
|
||||
|
||||
.cy-content-cart {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
bottom: 0rpx;
|
||||
background-color: white;
|
||||
z-index: 199;
|
||||
box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cy-content-cart-image {
|
||||
position: relative;
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
padding-left: 10rpx;
|
||||
padding-top: 10rpx;
|
||||
left: 34rpx;
|
||||
top: -34rpx;
|
||||
background-color: white;
|
||||
border-radius: 60rpx;
|
||||
box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cy-view-cart {
|
||||
position: absolute;
|
||||
width: 550rpx;
|
||||
height: 100%;
|
||||
right: 0rpx;
|
||||
}
|
||||
|
||||
.cy-content-cart-total {
|
||||
position: relative;
|
||||
width: 38%;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.cy-content-cart-total text {
|
||||
width: auto;
|
||||
color: #ff4949;
|
||||
}
|
||||
|
||||
.cy-sum-money {
|
||||
font-size: 50rpx;
|
||||
margin-left: 3rpx;
|
||||
}
|
||||
|
||||
.cy-content-place-order {
|
||||
position: absolute;
|
||||
width: 220rpx;
|
||||
height: 100%;
|
||||
right: 0rpx;
|
||||
/* background-color: #fecf5b; */
|
||||
letter-spacing: 2rpx;
|
||||
font-size: 40rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
.cy-content-list {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
letter-spacing: 1.5rpx;
|
||||
top: 260rpx;
|
||||
bottom: 120rpx;
|
||||
}
|
||||
|
||||
.cy-category-list {
|
||||
position: absolute;
|
||||
width: 25%;
|
||||
top: 0rpx;
|
||||
bottom: 34rpx;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cy-category-item {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.cy-unchecked-item {
|
||||
color: #666;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cy-checked-item {
|
||||
background-color: white;
|
||||
/* color: #ffc639; */
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cy-select-line {
|
||||
width: 12rpx;
|
||||
height: 100%;
|
||||
/* background: #ffc639; */
|
||||
}
|
||||
|
||||
.cy-category-name {
|
||||
position: relative;
|
||||
margin: 0 10rpx;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cy-product-list {
|
||||
position: relative;
|
||||
left: 25%;
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.cy-view-search {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
/* position: fixed; */
|
||||
/* top: -30rpx; */
|
||||
}
|
||||
|
||||
.cy-search {
|
||||
margin-left: 20rpx;
|
||||
margin-top: 30rpx;
|
||||
width: 512rpx;
|
||||
height: 60rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
|
||||
.cy-search-icon {
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.cy-search-input {
|
||||
margin-left: 10rpx;
|
||||
width: 420rpx;
|
||||
height: 60rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.cy-product-item {
|
||||
width: 93%;
|
||||
height: 190rpx;
|
||||
border-bottom: 0.1rpx solid rgba(237, 237, 237, 1);
|
||||
margin: auto auto;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.cy-product-view-image {
|
||||
position: relative;
|
||||
width: 180rpx;
|
||||
height: 85%;
|
||||
margin: auto auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cy-product-image {
|
||||
/* margin: 0rpx 10rpx 15rpx 20rpx; */
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
display: block;
|
||||
margin-top: 7rpx;
|
||||
}
|
||||
|
||||
.cy-product-view-image image:nth-child(2) {
|
||||
position: absolute;
|
||||
margin: 0rpx;
|
||||
top: 0rpx;
|
||||
right: -20rpx;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cy-product-row {
|
||||
width: 350rpx;
|
||||
height: 85%;
|
||||
margin: auto auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cy-product-name {
|
||||
max-width: 80%;
|
||||
height: 70rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
|
||||
.cy-product-description {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: rgba(136, 136, 136, 1);
|
||||
margin-top: -17rpx;
|
||||
line-height: 30rpx;
|
||||
height: 75rpx;
|
||||
padding-top: 2rpx;
|
||||
}
|
||||
|
||||
.cy-product-more {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.cy-product-price {
|
||||
width: 180rpx;
|
||||
height: 100%;
|
||||
font-weight: 450;
|
||||
color: #ff4949;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.cy-product-width {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
width: auto;
|
||||
height: auto;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cy-product-sym {
|
||||
position: relative;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.cy-product-sym image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.cy-product-sub {
|
||||
color: black;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
|
||||
.cy-product-count {
|
||||
width: auto;
|
||||
min-width: 60rpx;
|
||||
max-width: 80rpx;
|
||||
height: 40rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
background-color: white;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.cy-product-position {
|
||||
position: absolute;
|
||||
top: -12rpx;
|
||||
right: -10rpx;
|
||||
min-width: 32rpx;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
border-radius: 30rpx;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.cy-product-spec {
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
margin-top: 5rpx;
|
||||
width: auto;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
font-size: 24rpx;
|
||||
/* background-color: #ffc639; */
|
||||
border-radius: 30rpx;
|
||||
color: rgba(0, 51, 51, 1);
|
||||
}
|
||||
|
||||
.cy-product-sell_out {
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
margin-top: 5rpx;
|
||||
width: auto;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 30rpx;
|
||||
background: rgba(102, 102, 102, 1);
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.cy-cart-image {
|
||||
position: relative;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
/* background-color: #ffc639; */
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
|
||||
.cy-cart-view-image {
|
||||
margin: 20rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.cy-cart-count {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
right: -10rpx;
|
||||
min-width: 46rpx;
|
||||
max-width: 58rpx;
|
||||
height: 46rpx;
|
||||
line-height: 46rpx;
|
||||
text-align: center;
|
||||
background-color: red;
|
||||
border-radius: 46rpx;
|
||||
font-size: 30rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cy-mask-spec {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 299;
|
||||
}
|
||||
|
||||
.cy-spec-back {
|
||||
position: absolute;
|
||||
width: 620rpx;
|
||||
height: auto;
|
||||
background-color: white;
|
||||
border-radius: 18rpx;
|
||||
z-index: 99999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cy-spec-header-view {
|
||||
width: 100%;
|
||||
height: 108rpx;
|
||||
text-align: center;
|
||||
background: white;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cy-spec-header {
|
||||
position: relative;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
|
||||
.cy-spec-bottom-view {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 128rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.cy-spec-bottom-left-view {
|
||||
margin-left: 30rpx;
|
||||
width: 240rpx;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cy-spec-bottom-price {
|
||||
height: 55rpx;
|
||||
margin-top: 15rpx;
|
||||
font-size: 38rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 73, 73, 1);
|
||||
}
|
||||
|
||||
.cy-spec-text {
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
|
||||
.cy-close {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
width: 80rpx;
|
||||
height: 100%;
|
||||
right: 0rpx;
|
||||
color: gray;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.cy-spec-list {
|
||||
position: relative;
|
||||
margin-left: 30rpx;
|
||||
width: 560rpx;
|
||||
max-height: 600rpx;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.cy-spec-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cy-spec-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cy-spec-label {
|
||||
margin: 15rpx 25rpx 8rpx 0rpx;
|
||||
padding: 8rpx 40rpx;
|
||||
width: auto;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 40rpx;
|
||||
border: 1rpx solid gainsboro;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cy-spec-list-title {
|
||||
width: 100%;
|
||||
height: 40rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 450;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cy-footer-add {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
right: 24rpx;
|
||||
width: 224rpx;
|
||||
height: 80rpx;
|
||||
/* background: #ffc639; */
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.cy-footer-change {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
right: 24rpx;
|
||||
width: 224rpx;
|
||||
height: 80rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cy-footer-icon {
|
||||
padding: 0rpx 20rpx;
|
||||
}
|
||||
|
||||
.cy-bg {
|
||||
/* background: #ffc639; */
|
||||
color: white;
|
||||
border: 1rpx solid var(--color--);
|
||||
}
|
||||
|
||||
.cy-cart-back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
bottom: 120rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cy-cart {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 750rpx;
|
||||
bottom: 120rpx;
|
||||
z-index: 101;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.cy-cart-header {
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.cy-cart-clear {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
margin-left: 40rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.cy-cart-clear image {
|
||||
margin-right: 20rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.cy-cart-clear view {
|
||||
width: auto;
|
||||
height: 40rpx;
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
|
||||
.cy-cart-close {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100%;
|
||||
right: 0rpx;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
color: gray;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.cy-cart-content {
|
||||
width: 100%;
|
||||
max-height: 680rpx;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.cy-cart-item {
|
||||
width: 750rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.cy-cart-item-view {
|
||||
position: relative;
|
||||
margin-left: 40rpx;
|
||||
width: 710rpx;
|
||||
height: 70rpx;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cy-cart-content-name {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
.cy-cart-content-count {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
font-size: 38rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.cy-cart-line {
|
||||
border-top: 1px solid gainsboro;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.cy-new-product {
|
||||
width: 50rpx;
|
||||
height: 28rpx;
|
||||
background: rgba(253, 102, 61, 1);
|
||||
border-radius: 4rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
margin-top: -20rpx;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
.cy-product-title {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.cy_shop_banner {
|
||||
width: 520rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx;
|
||||
margin: auto auto;
|
||||
/* margin-bottom: 30rpx; */
|
||||
/* margin-top: 110rpx; */
|
||||
}
|
||||
|
||||
.cy_shop_banner image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.cy_sellOut {
|
||||
background: #e0e0e0;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
.cy-content-no-cart {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 135rpx;
|
||||
bottom: 0rpx;
|
||||
background: rgba(102, 102, 102, 1);
|
||||
z-index: 199;
|
||||
box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);
|
||||
color: white;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
line-height: 135rpx;
|
||||
}
|
||||
|
||||
.cy_store_describe {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
background: red;
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.cy_noticeInfo {
|
||||
width: 110%;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.cy_noticeInfo_img {
|
||||
height: 23rpx;
|
||||
width: 35rpx;
|
||||
margin-top: -8rpx;
|
||||
}
|
||||
|
||||
.cy_noticeInfo_img image {
|
||||
/* height: 30rpx; */
|
||||
width: 29rpx;
|
||||
display: block;
|
||||
margin-left: 5rpx;
|
||||
margin-top: -5rpx;
|
||||
}
|
||||
|
||||
.cy_noticeInfo_msg {
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
line-height: 40rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding-left: 15rpx;
|
||||
}
|
||||
|
||||
.cy_product_border {
|
||||
width: 550rpx;
|
||||
height: 1rpx;
|
||||
border-bottom: 0.1rpx solid rgba(237, 237, 237, 1);
|
||||
}
|
||||
.margin-bottom{
|
||||
margin-bottom: 35rpx;
|
||||
}
|
||||
.margin-bottom2{
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.heigth{
|
||||
height: 149rpx;
|
||||
}
|
||||
.cy-product-originalPrice {
|
||||
font-size: 25rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
text-decoration: line-through;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
/* padding-left: 15rpx; */
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
title: {
|
||||
type: String,
|
||||
// 初始值
|
||||
value: '请确认提交信息'
|
||||
},
|
||||
content: {
|
||||
type: String
|
||||
},
|
||||
content2: {
|
||||
type: String
|
||||
},
|
||||
content3: {
|
||||
type: String
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
value: '确定'
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
value: '取消'
|
||||
},
|
||||
color:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
showDialog: false
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
show() {
|
||||
this.setData({
|
||||
showDialog: true
|
||||
})
|
||||
},
|
||||
hide() {
|
||||
this.setData({
|
||||
showDialog: false
|
||||
})
|
||||
},
|
||||
/*
|
||||
* 内部私有方法建议以下划线开头
|
||||
* triggerEvent 用于触发事件
|
||||
*/
|
||||
_cancel() {
|
||||
//触发取消回调
|
||||
this.triggerEvent("cancel")
|
||||
},
|
||||
_confirm() {
|
||||
//触发成功回调
|
||||
this.triggerEvent("confirm");
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
<view class="my-dialog" hidden="{{!showDialog}}">
|
||||
<view class="my-mask"></view>
|
||||
<view class="my-container">
|
||||
<view class="title">{{title}}</view>
|
||||
<view class="content">
|
||||
<view class="row">{{content}} <text style='color:red;'>{{content2}}</text> {{content3}}</view>
|
||||
</view>
|
||||
<view class="rows">
|
||||
<view class="confirm" bindtap="_confirm" style='color:{{color}};'>取消</view>
|
||||
<view class="cancel" bindtap='_cancel'>确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,123 @@
|
||||
.my-dialog {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.my-dialog .my-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.my-dialog .my-container {
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
max-width: 300px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
z-index: 5000;
|
||||
height: 346rpx;
|
||||
}
|
||||
|
||||
.my-dialog .my-container .title {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: 20rpx 0 0 0;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.my-dialog .my-container .content {
|
||||
margin: 10rpx 0 20rpx;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: 50rpx;
|
||||
text-align: left;
|
||||
height: 130rpx;
|
||||
font-family: SourceHanSansCN-Regular;
|
||||
}
|
||||
|
||||
.my-dialog .my-container .content .row {
|
||||
margin: 0 10%;
|
||||
width: 80%;
|
||||
word-break: break-all;
|
||||
height: 84rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang-SC-Regular;
|
||||
font-weight: 400;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.my-dialog .my-container .btn-row {
|
||||
padding: 10rpx 0 0;
|
||||
width: 100%;
|
||||
height: 68rpx;
|
||||
line-height: 68rpx;
|
||||
font-size: 18px;
|
||||
border-top: 1rpx solid #c0c4cc;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.my-dialog .my-container .btn-row .confirm {
|
||||
float: right;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: var(--color--);
|
||||
border-right: 1px solid #c0c4cc;
|
||||
}
|
||||
|
||||
.my-dialog .my-container .btn-row .cancel {
|
||||
float: right;
|
||||
width: calc(50% - 2rpx);
|
||||
height: 100%;
|
||||
border-right: 1rpx solid #c0c4cc;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
}
|
||||
|
||||
.confirm {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
border: 2rpx solid var(--color--);
|
||||
border-radius: 10rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
width: 220rpx;
|
||||
height: 80rpx;
|
||||
background: var(--color--);
|
||||
border-radius: 10rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.rows {
|
||||
width: 90%;
|
||||
margin: auto auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
const app = getApp()
|
||||
Component({
|
||||
properties: {
|
||||
navbarData: {
|
||||
//navbarData 由父页面传递的数据，变量名字自命名
|
||||
type: Object,
|
||||
value: {},
|
||||
observer: function (newVal, oldVal) { }
|
||||
}
|
||||
},
|
||||
data: {
|
||||
height: '',
|
||||
//默认值 默认显示左上角
|
||||
navbarData: {
|
||||
showCapsule: 1
|
||||
},
|
||||
imageWidth: wx.getSystemInfoSync().windowWidth, // 背景图片的高度
|
||||
imageHeight: '' // 背景图片的长度，通过计算获取
|
||||
},
|
||||
attached: function () {
|
||||
// 获取是否是通过分享进入的小程序
|
||||
this.setData({
|
||||
share: app.globalData.share
|
||||
})
|
||||
// 定义导航栏的高度 方便对齐
|
||||
this.setData({
|
||||
height: app.globalData.height
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 返回上一页面
|
||||
_navback() {
|
||||
wx.navigateBack()
|
||||
},
|
||||
// 计算图片高度
|
||||
imgLoaded(e) {
|
||||
this.setData({
|
||||
imageHeight:
|
||||
e.detail.height *
|
||||
(wx.getSystemInfoSync().windowWidth / e.detail.width)
|
||||
})
|
||||
}
|
||||
// //返回到首页
|
||||
// _backhome() {
|
||||
// wx.switchTab({
|
||||
// url: '/pages/index/index'
|
||||
// })
|
||||
// }
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"component": true
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
.nav-wrap {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
/* opacity: 0.3; */
|
||||
z-index: 9999999;
|
||||
overflow: hidden;
|
||||
background: rgba(252, 250, 250, 0);
|
||||
}
|
||||
|
||||
/* 背景图 */
|
||||
.backgroundimg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 标题要居中 */
|
||||
.nav-title {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
max-width: 400rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
font-size: 36rpx;
|
||||
color: #2c2b2b;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
.nav-capsule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 30rpx;
|
||||
width: 140rpx;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.back-pre {
|
||||
width: 32rpx;
|
||||
height: 36rpx;
|
||||
margin-top: 4rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.nav-capsule {
|
||||
width: 36rpx;
|
||||
height: 40rpx;
|
||||
margin-top: 3rpx;
|
||||
}
|
||||
@ -0,0 +1,74 @@
|
||||
// components/showSpecAndMake/showSpecAndMake.js
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
isSpec: Boolean,
|
||||
shopName: String,
|
||||
spec: Boolean,
|
||||
makeList: Array,
|
||||
specPrice: String,
|
||||
showSpec: String,
|
||||
productCount: String,
|
||||
selectProduct: Object,
|
||||
color:String,
|
||||
specList:Array,
|
||||
promotionPrice:String
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
isSpec: "",
|
||||
shopName: "",
|
||||
spec: Boolean,
|
||||
makeList: Array,
|
||||
specPrice: String,
|
||||
showSpec: String,
|
||||
productCount: "",
|
||||
selectProduct:"",
|
||||
color:"",
|
||||
specList:Array,
|
||||
promotionPrice:String
|
||||
},
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
},
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
|
||||
methods: {
|
||||
|
||||
cy_hide: function () {
|
||||
this.triggerEvent("cy_hide");
|
||||
},
|
||||
cy_changeSpecSellOut: function () {
|
||||
this.triggerEvent("cy_changeSpecSellOut");
|
||||
},
|
||||
/**
|
||||
* 修改规格
|
||||
*/
|
||||
cy_changeSpec: function (e) {
|
||||
console.error("guige",e)
|
||||
this.triggerEvent("cy_changeSpec",e);
|
||||
},
|
||||
/**
|
||||
* 修改做法
|
||||
*/
|
||||
cy_changeMake: function (e) {
|
||||
this.triggerEvent("cy_changeMake",e);
|
||||
},
|
||||
cy_addCart:function(){
|
||||
this.triggerEvent("cy_addCart");
|
||||
},
|
||||
cy_subSpecItem:function(){
|
||||
this.triggerEvent("cy_subSpecItem");
|
||||
},
|
||||
cy_addSpecItem:function(){
|
||||
this.triggerEvent("cy_addSpecItem");
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
<view wx:if='{{isSpec}}' class='cy-mask-spec content-center'>
|
||||
<view class='cy-mask' bindtap='cy_hide' catchtouchmove='true'></view>
|
||||
<view class='cy-spec-back'>
|
||||
<view class='cy-spec-header-view'>
|
||||
<view class='cy-spec-header'>
|
||||
<text>{{shopName}}</text>
|
||||
<text bindtap='cy_hide' class='iconfont icon-guanbi cy-close'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='cy-spec-list'>
|
||||
<view wx:if="{{spec}}" class='cy-spec-item'>
|
||||
<view class='cy-spec-list-title'> 规格 </view>
|
||||
<view class='cy-spec-content'>
|
||||
<view bindtap='{{item.stock>0?"cy_changeSpec":"cy_changeSpecSellOut"}}' data-index='{{index}}' wx:for="{{specList}}" wx:key="spec" class='cy-spec-label cy-left-float {{item.checked ? "cy-bg cy-global-bg-color":""}} {{item.stock<=0 ? "cy_sellOut":"" }} '>{{item.specName}}
|
||||
<view class="cy-new-product" wx:if="{{item.discountRule}}">促销</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style='width:100%; height:20rpx;'></view>
|
||||
</view>
|
||||
<block wx:for="{{makeList}}" wx:key="make" wx:for-index="inx">
|
||||
<view class='cy-spec-item'>
|
||||
<view class='cy-spec-list-title'>{{item.typeName}}</view>
|
||||
<view class='cy-spec-content'>
|
||||
<view bindtap='cy_changeMake' data-x='{{inx}}' data-y='{{index}}' wx:for="{{item.list}}" wx:key="detail" class='cy-spec-label cy-left-float content-center {{item.checked ? "cy-bg cy-global-bg-color":""}}'>{{item.showName}}</view>
|
||||
</view>
|
||||
<view style='width:100%; height:20rpx;'></view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class='cy-spec-bottom-view flex-display'>
|
||||
<view class='cy-spec-bottom-left-view'>
|
||||
<view class='cy-spec-bottom-price'>
|
||||
<text style='font-size:28rpx;'>¥</text>
|
||||
<block wx:if="{{promotionPrice>0}}">
|
||||
<text style='margin-left:3rpx;'>{{promotionPrice}}</text>
|
||||
<text class="cy-product-originalPrice">{{specPrice}} </text>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<text style='margin-left:3rpx;'>{{specPrice}} </text>
|
||||
</block>
|
||||
</view>
|
||||
<view class='cy-spec-text cy-ellipsis'> {{showSpec}}</view>
|
||||
</view>
|
||||
<view class="cy-spec-bottom-add">
|
||||
<image wx:if="{{productCount>0}}" src='../../images/icon-sub.png' class='cy-product-sym cy-other' bindtap='cy_subSpecItem' />
|
||||
<view wx:if="{{productCount>0}}" class='cy-product-count content-center' style="color:#333;">{{productCount}}</view>
|
||||
<view class='cy-product-sym content-center cy-other' style='background: {{color}};' bindtap='cy_addSpecItem'>
|
||||
<view class="mykd"></view>
|
||||
</view>
|
||||
</view>
|
||||
<block>
|
||||
<view class='cy-footer-add content-center cy-global-bg-color' bindtap='cy_addCart'>
|
||||
<view class='cy-footer-icon'>确定</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,987 @@
|
||||
.cy-top-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cy-view-top {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 3rpx 12rpx 0px rgba(97, 97, 97, 0.10);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.cy-title-item {
|
||||
margin-left: 30rpx;
|
||||
margin-top: 15rpx;
|
||||
width: 460rpx;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cy-food-mark {
|
||||
position: absolute;
|
||||
bottom: 26rpx;
|
||||
right: 30rpx;
|
||||
width: 150rpx;
|
||||
height: 60rpx;
|
||||
/* border: 1rpx solid rgba(254, 182, 9, 1); */
|
||||
border-radius: 30rpx;
|
||||
/* color: #ffc639; */
|
||||
top: 15rpx;
|
||||
}
|
||||
|
||||
.cy-food-mark image {
|
||||
width: 33rpx;
|
||||
height: 47rpx;
|
||||
font-size: 33rpx;
|
||||
}
|
||||
|
||||
.cy-food-mark text {
|
||||
margin-left: 14rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.cy-title-row {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.cy-title-row text:nth-child(1) {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.cy-title-row text:nth-child(2) {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cy-view-evaluation {
|
||||
width: 750rpx;
|
||||
height: 130rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.cy-evaluation-list {
|
||||
position: relative;
|
||||
margin-top: 20rpx;
|
||||
width: 750rpx;
|
||||
bottom: 0rpx;
|
||||
background: white;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.cy-evaluation-item {
|
||||
margin: 50rpx 30rpx;
|
||||
width: 690rpx;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cy-evaluation-header-view {
|
||||
margin-right: 15rpx;
|
||||
width: 80rpx;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cy-evaluation-header-view image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #f3f3f3;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cy-item-name {
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
.cy-item-time {
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
|
||||
.cy-item-content {
|
||||
margin-top: 10rpx;
|
||||
font-size: 28rpx;
|
||||
width: 596rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
.cy-item-evaluate {
|
||||
margin-right: 15rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
}
|
||||
|
||||
.cy-item-icon-image {
|
||||
width: 24rpx;
|
||||
height: 23rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
|
||||
.cy-evaluation-row {
|
||||
margin-left: 50rpx;
|
||||
width: 345rpx;
|
||||
height: 130rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
|
||||
.cy-evaluation-view {
|
||||
margin-left: 15rpx;
|
||||
width: auto;
|
||||
height: 30rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cy-evaluation-row image {
|
||||
width: 32rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.cy-view-store {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
letter-spacing: 1.5rpx;
|
||||
top: 240rpx;
|
||||
bottom: 0rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.cy-store-info {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.cy-store-info text {
|
||||
margin-left: 20rpx;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
width: 560rpx;
|
||||
}
|
||||
|
||||
.cy-store-bottom-line {
|
||||
margin-top: 20rpx;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.cy-store-mobile {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
/* background: #ffc639; */
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cy-store-icon {
|
||||
margin-left: 30rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.cy-store-icon image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cy-store-address {
|
||||
font-size: 12px;
|
||||
font-weight: 350;
|
||||
}
|
||||
|
||||
.cy-top-bar {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
top: 160rpx;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.cy-top-bar view {
|
||||
width: 281rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cy-top-title {
|
||||
padding-top: 10rpx;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cy-normal-title {
|
||||
border-bottom: 5rpx solid white;
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cy-select-title {
|
||||
border-bottom: 4rpx solid var(--color--);
|
||||
font-size: 32rpx;
|
||||
/* color: #ffc639; */
|
||||
}
|
||||
|
||||
.cy-content-cart {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
bottom: 0rpx;
|
||||
background-color: white;
|
||||
z-index: 199;
|
||||
box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cy-content-cart-image {
|
||||
position: relative;
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
padding-left: 10rpx;
|
||||
padding-top: 10rpx;
|
||||
left: 34rpx;
|
||||
top: -34rpx;
|
||||
background-color: white;
|
||||
border-radius: 60rpx;
|
||||
box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cy-view-cart {
|
||||
position: absolute;
|
||||
width: 550rpx;
|
||||
height: 100%;
|
||||
right: 0rpx;
|
||||
}
|
||||
|
||||
.cy-content-cart-total {
|
||||
position: relative;
|
||||
width: 38%;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.cy-content-cart-total text {
|
||||
width: auto;
|
||||
color: #ff4949;
|
||||
}
|
||||
|
||||
.cy-sum-money {
|
||||
font-size: 50rpx;
|
||||
margin-left: 3rpx;
|
||||
}
|
||||
|
||||
.cy-content-place-order {
|
||||
position: absolute;
|
||||
width: 220rpx;
|
||||
height: 100%;
|
||||
right: 0rpx;
|
||||
/* background-color: #fecf5b; */
|
||||
letter-spacing: 2rpx;
|
||||
font-size: 40rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
.cy-content-list {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
letter-spacing: 1.5rpx;
|
||||
top: 260rpx;
|
||||
bottom: 120rpx;
|
||||
}
|
||||
|
||||
.cy-category-list {
|
||||
position: absolute;
|
||||
width: 25%;
|
||||
top: 0rpx;
|
||||
bottom: 34rpx;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cy-category-item {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.cy-unchecked-item {
|
||||
color: #666;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cy-checked-item {
|
||||
background-color: white;
|
||||
/* color: #ffc639; */
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cy-select-line {
|
||||
width: 12rpx;
|
||||
height: 100%;
|
||||
/* background: #ffc639; */
|
||||
}
|
||||
|
||||
.cy-category-name {
|
||||
position: relative;
|
||||
margin: 0 10rpx;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cy-product-list {
|
||||
position: relative;
|
||||
left: 25%;
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.cy-view-search {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
/* position: fixed; */
|
||||
/* top: -30rpx; */
|
||||
}
|
||||
|
||||
.cy-search {
|
||||
margin-left: 20rpx;
|
||||
margin-top: 30rpx;
|
||||
width: 512rpx;
|
||||
height: 60rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
|
||||
.cy-search-icon {
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.cy-search-input {
|
||||
margin-left: 10rpx;
|
||||
width: 420rpx;
|
||||
height: 60rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.cy-product-item {
|
||||
width: 93%;
|
||||
height: 190rpx;
|
||||
border-bottom: 0.1rpx solid rgba(237, 237, 237, 1);
|
||||
margin: auto auto;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.cy-product-view-image {
|
||||
position: relative;
|
||||
width: 180rpx;
|
||||
height: 85%;
|
||||
margin: auto auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cy-product-image {
|
||||
/* margin: 0rpx 10rpx 15rpx 20rpx; */
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
display: block;
|
||||
margin-top: 7rpx;
|
||||
}
|
||||
|
||||
.cy-product-view-image image:nth-child(2) {
|
||||
position: absolute;
|
||||
margin: 0rpx;
|
||||
top: 0rpx;
|
||||
right: -20rpx;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cy-product-row {
|
||||
width: 350rpx;
|
||||
height: 85%;
|
||||
margin: auto auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cy-product-name {
|
||||
max-width: 80%;
|
||||
height: 70rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
|
||||
.cy-product-description {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: rgba(136, 136, 136, 1);
|
||||
margin-top: -17rpx;
|
||||
line-height: 30rpx;
|
||||
height: 75rpx;
|
||||
padding-top: 2rpx;
|
||||
}
|
||||
|
||||
.cy-product-more {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.cy-product-price {
|
||||
width: 180rpx;
|
||||
height: 100%;
|
||||
font-weight: 450;
|
||||
color: #ff4949;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.cy-product-width {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
width: auto;
|
||||
height: auto;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cy-product-sym {
|
||||
position: relative;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.cy-other{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cy-product-sym image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.cy-product-sub {
|
||||
color: black;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
|
||||
.cy-product-count {
|
||||
width: auto;
|
||||
min-width: 60rpx;
|
||||
max-width: 80rpx;
|
||||
height: 40rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
background-color: white;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.cy-product-position {
|
||||
position: absolute;
|
||||
top: -12rpx;
|
||||
right: -10rpx;
|
||||
min-width: 32rpx;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
border-radius: 30rpx;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.cy-product-spec {
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
margin-top: 5rpx;
|
||||
width: auto;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
font-size: 24rpx;
|
||||
/* background-color: #ffc639; */
|
||||
border-radius: 30rpx;
|
||||
color: rgba(0, 51, 51, 1);
|
||||
}
|
||||
|
||||
.cy-product-sell_out {
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
margin-top: 5rpx;
|
||||
width: auto;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 30rpx;
|
||||
background: rgba(102, 102, 102, 1);
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.cy-cart-image {
|
||||
position: relative;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
/* background-color: #ffc639; */
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
|
||||
.cy-cart-view-image {
|
||||
margin: 20rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.cy-cart-count {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
right: -10rpx;
|
||||
min-width: 46rpx;
|
||||
max-width: 58rpx;
|
||||
height: 46rpx;
|
||||
line-height: 46rpx;
|
||||
text-align: center;
|
||||
background-color: red;
|
||||
border-radius: 46rpx;
|
||||
font-size: 30rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cy-mask-spec {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 299;
|
||||
}
|
||||
|
||||
.cy-spec-back {
|
||||
position: absolute;
|
||||
width: 620rpx;
|
||||
height: auto;
|
||||
background-color: white;
|
||||
border-radius: 18rpx;
|
||||
z-index: 99999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cy-spec-header-view {
|
||||
width: 100%;
|
||||
height: 108rpx;
|
||||
text-align: center;
|
||||
background: white;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cy-spec-header {
|
||||
position: relative;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
|
||||
.cy-spec-bottom-view {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 128rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.cy-spec-bottom-left-view {
|
||||
margin-left: 20rpx;
|
||||
width: 160rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cy-spec-bottom-price {
|
||||
height: 55rpx;
|
||||
margin-top: -12rpx;
|
||||
font-size: 38rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 73, 73, 1);
|
||||
}
|
||||
|
||||
.cy-spec-bottom-add{
|
||||
height: 100%;
|
||||
width: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.cy-spec-text {
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
|
||||
.cy-close {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
width: 80rpx;
|
||||
height: 100%;
|
||||
right: 0rpx;
|
||||
color: gray;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.cy-spec-list {
|
||||
position: relative;
|
||||
margin-left: 30rpx;
|
||||
width: 560rpx;
|
||||
max-height: 600rpx;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.cy-spec-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cy-spec-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cy-spec-label {
|
||||
margin: 15rpx 25rpx 8rpx 0rpx;
|
||||
padding: 8rpx 40rpx;
|
||||
width: auto;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 40rpx;
|
||||
border: 1rpx solid gainsboro;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cy-spec-list-title {
|
||||
width: 100%;
|
||||
height: 40rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 450;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cy-footer-add {
|
||||
position: absolute;
|
||||
top: 34rpx;
|
||||
right: 24rpx;
|
||||
width: 180rpx;
|
||||
height: 60rpx;
|
||||
/* background: #ffc639; */
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.cy-footer-change {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
right: 24rpx;
|
||||
width: 224rpx;
|
||||
height: 80rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cy-footer-icon {
|
||||
padding: 0rpx 20rpx;
|
||||
}
|
||||
|
||||
.cy-bg {
|
||||
/* background: #ffc639; */
|
||||
color: white;
|
||||
border: 1rpx solid var(--color--);
|
||||
}
|
||||
|
||||
.cy-cart-back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
bottom: 120rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cy-cart {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 750rpx;
|
||||
bottom: 0rpx;
|
||||
z-index: 101;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.cy-cart-header {
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.cy-cart-clear {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
margin-left: 40rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.cy-cart-clear image {
|
||||
margin-right: 20rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.cy-cart-clear view {
|
||||
width: auto;
|
||||
height: 40rpx;
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-weight: 500;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
|
||||
.cy-cart-close {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100%;
|
||||
right: 0rpx;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
color: gray;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.cy-cart-content {
|
||||
width: 100%;
|
||||
max-height: 680rpx;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.cy-cart-item {
|
||||
width: 750rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.cy-cart-item-view {
|
||||
position: relative;
|
||||
margin-left: 40rpx;
|
||||
width: 710rpx;
|
||||
height: 70rpx;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cy-cart-content-name {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
.cy-cart-content-count {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
font-size: 38rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.cy-cart-line {
|
||||
border-top: 1px solid gainsboro;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.cy-new-product {
|
||||
width: 50rpx;
|
||||
height: 28rpx;
|
||||
background: rgba(253, 102, 61, 1);
|
||||
border-radius: 4rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
margin-top: -20rpx;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
.cy-product-title {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.cy_shop_banner {
|
||||
width: 520rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx;
|
||||
margin: auto auto;
|
||||
/* margin-bottom: 30rpx; */
|
||||
/* margin-top: 110rpx; */
|
||||
}
|
||||
|
||||
.cy_shop_banner image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.cy_sellOut {
|
||||
background: #e0e0e0;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
.cy-content-no-cart {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 135rpx;
|
||||
bottom: 0rpx;
|
||||
background: rgba(102, 102, 102, 1);
|
||||
z-index: 199;
|
||||
box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);
|
||||
color: white;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
line-height: 135rpx;
|
||||
}
|
||||
|
||||
.cy_store_describe {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
background: red;
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.cy_noticeInfo {
|
||||
width: 110%;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.cy_noticeInfo_img {
|
||||
height: 23rpx;
|
||||
width: 35rpx;
|
||||
margin-top: -8rpx;
|
||||
}
|
||||
|
||||
.cy_noticeInfo_img image {
|
||||
/* height: 30rpx; */
|
||||
width: 29rpx;
|
||||
display: block;
|
||||
margin-left: 5rpx;
|
||||
margin-top: -5rpx;
|
||||
}
|
||||
|
||||
.cy_noticeInfo_msg {
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
line-height: 40rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding-left: 15rpx;
|
||||
}
|
||||
|
||||
.cy_product_border {
|
||||
width: 550rpx;
|
||||
height: 1rpx;
|
||||
border-bottom: 0.1rpx solid rgba(237, 237, 237, 1);
|
||||
}
|
||||
.margin-bottom{
|
||||
margin-bottom: 35rpx;
|
||||
}
|
||||
.margin-bottom2{
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.heigth{
|
||||
height: 149rpx;
|
||||
}
|
||||
|
||||
.cy-new-product {
|
||||
width: 55rpx;
|
||||
height: 30rpx;
|
||||
background:linear-gradient(137deg, rgba(254, 182, 9, 1), rgba(254, 84, 99, 1));
|
||||
border-radius: 4rpx;
|
||||
font-size: 20rpx;
|
||||
/* font-family: PingFang SC; */
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
margin-top: -60rpx;
|
||||
margin-left: 55rpx;
|
||||
font-family:FZLTHJW--GB1-0;
|
||||
font-weight:400;
|
||||
position: absolute;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.cy-product-originalPrice {
|
||||
font-size: 25rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
text-decoration: line-through;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
padding-left: 15rpx;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
var app=getApp();
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
testParam:Object
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
test:function(){
|
||||
console.error("组件事件被触发",app.globalData.color)
|
||||
this.setData({testParam:"ziaiaiaiai"})
|
||||
this.triggerEvent("confirm");
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
<view bindtap="test" > 测试组件 {{testParam}} </view>
|
||||
<testComponent />
|
||||
@ -0,0 +1 @@
|
||||
/* components/testComponent/testComponent.wxss */
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,83 @@
|
||||
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
params: {
|
||||
type: Object,
|
||||
value: {
|
||||
|
||||
},
|
||||
observer (val) {
|
||||
if (val.success === 'success') {
|
||||
this.setData({
|
||||
icon: './image/right.png'
|
||||
})
|
||||
} else if (val.success === 'warning') {
|
||||
this.setData({
|
||||
icon: './image/warning.png'
|
||||
})
|
||||
} else {
|
||||
this.setData({
|
||||
icon: val.success
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
isShow: false,
|
||||
icon: '',
|
||||
animation: {}
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
// 显示弹窗
|
||||
showToast: function () {
|
||||
this.setData({
|
||||
isShow: true
|
||||
})
|
||||
this.clickShow()
|
||||
},
|
||||
// 隐藏弹窗
|
||||
hideToast: function () {
|
||||
this.setData({
|
||||
isShow: false
|
||||
})
|
||||
},
|
||||
clickShow: function () {
|
||||
let animate = wx.createAnimation({
|
||||
duration: 300,
|
||||
timingFunction: 'linear',
|
||||
})
|
||||
animate.opacity(1).step()
|
||||
this.setData({
|
||||
animation: animate.export()
|
||||
})
|
||||
// 延时隐藏
|
||||
if (this.data.params.time) {
|
||||
setTimeout(() => {
|
||||
this.hideToast()
|
||||
this.setData({
|
||||
animation: {}
|
||||
})
|
||||
}, this.data.params.time)
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.hideToast()
|
||||
this.setData({
|
||||
animation: {}
|
||||
})
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
<view class='toast' wx:if="{{isShow}}" bindtap='clickShow' animation="{{animation}}">
|
||||
<view class='toast-in'>
|
||||
<view class='toast_icon' hidden='{{icon === ""}}'>
|
||||
<block wx:if="{{icon=='./image/right.png'}}">
|
||||
<image src='{{icon}}'></image>
|
||||
</block>
|
||||
<block wx:if="{{icon=='./image/warning.png'}}">
|
||||
<image src='{{icon}}'></image>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<view class="i-class i-icon type i-icon-{{icon}}" style="font-size: 56rpx;color:white;"></view>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
<view class='toast_content'>
|
||||
{{params.context}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue