yxt_product
/
yxt-yythmall-ui-miniprogram
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

111

master
wong1988 1 year ago
parent
119a17f02b
commit
99ff039fb9
1 changed files with 137 additions and 163 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 300
      pages/home/cloudCard2.vue

300
pages/home/cloudCard2.vue
View File

@ -4,155 +4,96 @@
style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);">
<view class="top">
<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight"
:end-change-height="page.endHeight">
</NavBar>
<!-- <view style="background: #F7F7F7; opacity: 0.5; border-radius: 20px;display: flex;flex-direction: row;align-items: center;
padding-left: 10px; margin-left: 20px;width: 40vw; margin-top: 5vh;">
<image src="../../static/search_icon.png" mode="aspectFill" style="width: 25px;height: 25px;">
</image>
<input placeholder="搜索"
style="font-size: 25rpx;flex: 1;height: 35px;line-height: 35px;padding-left: 10px;padding-right: 10px;"
:value="searchInfo.name" @input="onKeyInput" />
</view> -->
<view style="display: flex;flex-direction: row;align-items: center;justify-content: center;;
padding-left: 10vw;padding-right: 10vw; margin-top: 40vw;">
<view style="display: flex;flex-direction: column; flex: 1;justify-content: center;align-items: center;"
@click.stop="brandClick('0')">
</view>
<image src="https://supervise.yxtsoft.com/lpk/image/family_icon.png" mode="aspectFill"
:class="brandType=='0'?'top_img1':'top_img2'"
style="width: 60px;height:60px;border-radius: 50%;padding:5px;"></image>
<text :class="brandType=='0'?'top_text1':'top_text2'">百姓菜窖</text>
<view
style="background: #fff; height: calc(100vh - 45px - 50vw);width: 100%; border-radius: 15px;display: flex;flex-direction: column; box-sizing: border-box;margin-top: -15px;box-sizing: border-box;">
</view>
<view class="center">
<view style="display: flex;flex-direction: column;flex: 1;justify-content: center;align-items: center;"
@click.stop="brandClick('1')">
<view style="width: 22%;display: flex;flex-direction: column;overflow-y: auto;padding-top: 10px;">
<image src="https://supervise.yxtsoft.com/lpk/image/love_icon.png" mode="aspectFill"
:class="brandType=='1'?'top_img1':'top_img2'"
style="width: 60px;height: 60px;border-radius: 50%;padding: 5px;"></image>
<view style="width: 100%;display: flex;flex-direction: column; ">
<view v-for="(item,index) in data" @click="labelClick(index,item)"
style="display: flex;flex-direction: column;justify-content: center;">
<text class="label" :class="{'label2':selectIndex==index}">{{item.name}}</text>
</view>
<text :class="brandType=='1'?'top_text1':'top_text2'">精品菜窖</text>
</view>
</view>
<view style="display: flex;flex-direction: column;flex: 1;justify-content: center;align-items: center;"
@click.stop="brandClick('2')">
<view style="width: 78%;background-color: #fff;overflow-y: auto;">
<image src="https://supervise.yxtsoft.com/lpk/image/enterprise_icon.png" mode="aspectFill"
:class="brandType=='2'?'top_img1':'top_img2'"
style="width: 60px;height: 60px;border-radius: 50%;padding: 5px;"></image>
<view style="z-index: 1;background: #FFFFFF;position: sticky;top: 0;padding: 10px;">
<text :class="brandType=='2'?'top_text1':'top_text2'">企业菜窖</text>
<view style="display: flex;flex-direction: row;overflow-x: auto;">
</view>
</view>
</view>
<view v-for="(item,index) in 100"
style="display: flex;flex-direction: column; justify-content: center;align-items: center;margin-right: 10px;"
@click.stop="brandClick('0')">
<image src="https://supervise.yxtsoft.com/lpk/image/family_icon.png" mode="aspectFill"
:class="brandType=='0'?'top_img1':'top_img2'"
style="width: 60px;height:60px;border-radius: 50%;padding:5px;"></image>
<view style="background: #fff;flex-flow: 1; height: calc(100vh - 65vw - 50px);
width: 100%; margin-top: -13vw;
border-radius: 25px;display: flex;flex-direction: column; box-sizing: border-box;">
<text :class="brandType=='0'?'top_text1':'top_text2'">百姓菜窖</text>
<view style="display: flex;flex-direction: row;height: 25px; width: 100%; flex-shrink: 0;">
<view style="width: 20%;background: #F7F7F7;border-top-left-radius: 25px;"></view>
<view style="width: 80%;background: #fff; border-top-right-radius: 25px;"></view>
</view>
</view>
<view style="display: flex;flex-direction: row;min-height: calc(100% - 115px); ">
<scroll-view scroll-y="true" style="height: 100%; width: 21%;border-bottom-left-radius: 25px;"
:scroll-top="scrollLeftTop" bindscrolltoupper="upper" bindscrolltolower="lower"
:show-scrollbar="false" :enhanced="true" bindscroll="scroll">
<view
style="width: 100%;; display: flex;flex-direction: column; background: #F7F7F7;border-bottom-left-radius: 25px;">
<view v-for="(item,index) in data" @click="labelClick(index,item)"
style="display: flex;flex-direction: column;justify-content: center; margin-top: 15px; ">
<text class="label" :class="{ label2: selectIndex==index }">{{item.name}}</text>
</view>
</view>
</scroll-view>
<view
style="width: 80%;min-height: calc(100% - 115px); display: flex;flex-direction: column; margin-left: 10px; margin-right: 10px;">
<view style=" border: 1px #bbb solid; border-radius: 8px;display: flex;flex-direction: row;align-items: center;
padding-left: 10px; margin-left: 20px;margin-right: 20px;">
<image src="../../static/search_icon.png" mode="aspectFill" style="width: 25px;height: 25px;">
</image>
<input placeholder="请输入"
style="font-size: 25rpx;flex: 1;height: 35px;line-height: 35px;padding-left: 10px;padding-right: 10px;"
:value="searchInfo.name" @input="onKeyInput" />
</view>
<scroll-view scroll-y="true" style="min-height: calc(100% - 150px); width: 100%; margin-top: 10px;"
bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" :show-scrollbar="false"
:scroll-top="scrollRightTop" :enhanced="true">
<view style="width: 100%; display: flex;flex-direction: column;overflow-y: auto;">
<view style="width: 100%; display: flex;flex-direction: column;">
<view v-for="(item,index) in goods" @click="itemClick(item.goodsSid)"
style="display: flex;flex-direction: column;justify-content: center;width: 100%; margin-top: 15px; ">
<view v-for="(item,index) in goods" @click="itemClick(item.goodsSid)"
style="display: flex;flex-direction: column;justify-content: center;width: 95%; margin-top: 15px; margin-left: 3%;">
<view style="display: flex;flex-direction: row;align-items: center;width: 100%; ">
<view style="display: flex;flex-direction: row;align-items: center;width: 100%; ">
<image :src="item.iconUrl" style="width: 90px;height: 90px; border-radius: 10px; "
mode="aspectFill"></image>
<image :src="item.iconUrl" style="width: 90px;height: 90px; border-radius: 10px; "
mode="aspectFill"></image>
<view
style="display: flex;flex-direction: column;flex: 1; padding-bottom: 15px; margin-left: 10px;"
:style="{'border-bottom':(index == goods.length-1 ? 'none' : '1px #EFEFEF solid')}">
<view
style="display: flex;flex-direction: column;flex: 1; padding-bottom: 15px; margin-left: 10px;"
:style="{'border-bottom':(index == goods.length-1 ? 'none' : '1px #EFEFEF solid')}">
<text style="font-size: 13px;color: #000;">{{item.name}}</text>
<text style="font-size: 13px;color: #000;">{{item.name}}</text>
<text
style="font-size: 10px;color: #999;margin-top: 5px;">{{item.remark}}</text>
<text style="font-size: 10px;color: #999;margin-top: 5px;">{{item.remark}}</text>
<view
style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;">
<text style="border: 1px #EE752F solid; border-radius: 5px; padding: 0px 8px;
<view
style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;">
<text style="border: 1px #EE752F solid; border-radius: 5px; padding: 0px 8px;
font-size: 10px;color: #EE752F;">{{item.jprice}}元/{{item.specificationUnit}}</text>
<text
style="border: 1px #EE752F solid; border-radius: 5px; padding: 0px 8px;
<text
style="border: 1px #EE752F solid; border-radius: 5px; padding: 0px 8px;
font-size: 10px;color: #EE752F; margin-left: 10px; margin-right: 10px; ">{{item.weight}}{{item.specificationUnit}}/{{item.unitName}}</text>
<!-- <text
style="background: #FF9900; color: #fff; font-size: 10px;padding: 0px 8px; border-radius: 5px;">￥{{item.mefenPrice}}</text> -->
</view>
<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between; margin-top: 15px;
margin-right: 15px;">
<text style="font-size: 14px;color: #FF5006;">￥{{item.mefenPrice}}</text>
<!--
<image src="../../static/inCart.png" mode="aspectFill"
style="width: 25px;height: 25px;" @click.stop="itemShow(item)"
v-if="!item.showCart"></image> -->
</view>
<view style="display: flex;flex-direction: row;align-items: center;">
<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between; margin-top: 15px;
margin-right: 15px;">
<text style="font-size: 14px;color: #FF5006;">￥{{item.mefenPrice}}</text>
<image src="../../static/jian_icon.png" mode="aspectFill"
style="width: 20px;height: 20px;" @click.stop="jian(item)"></image>
<view style="display: flex;flex-direction: row;align-items: center;">
<text
style="font-size: 14px;margin-left: 8px;margin-right: 8px;">{{item.goodsNumber}}</text>
<image src="../../static/jia_icon.png" mode="aspectFill"
style="width: 20px;height: 20px;" @click.stop="jia(item)"></image>
<image src="../../static/jian_icon.png" mode="aspectFill"
style="width: 20px;height: 20px;" @click.stop="jian(item)"></image>
<!-- <text
style="margin-left: 10px;color: #fff; font-size: 12px; border: 1px #EE752F solid; border-radius: 5px; padding: 0px 5px; background: #FF9900;"
@click.stop="itemShow2(item)">确定</text> -->
</view>
<text
style="font-size: 14px;margin-left: 8px;margin-right: 8px;">{{item.goodsNumber}}</text>
<image src="../../static/jia_icon.png" mode="aspectFill"
style="width: 20px;height: 20px;" @click.stop="jia(item)"></image>
</view>
</view>
</view>
@ -160,14 +101,14 @@
</view>
</view>
</scroll-view>
</view>
</view>
</view>
<view style="display: flex;flex-direction: column;border-top: 1px solid #F8F8F8; border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;
padding-top: 5px; flex-shrink: 0;">
<view class="bottom">
<view style="display: flex;flex-direction: row;align-items: center; padding-left: 30px;">
<view style="width: 35px;height: 35px;position: relative; visibility: hidden; ">
@ -176,53 +117,49 @@
src="../../static/basket_icon.png" mode="aspectFill"></image>
<view style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
position: absolute;
top: 2px;
right: 0px;
padding: 2px 5px;
width: auto;">{{page.count}}</view>
position: absolute;
top: 2px;
right: 0px;
padding: 2px 5px;
width: auto;">{{page.count}}</view>
</view>
<view id="bomView"
style="display: flex;flex-direction: row;align-items: center; margin-left: 15px;">
<view style="color: #888;font-size: 10px;">温馨提示：已定制了</view>
<view style="color: #FF5006;font-size: 15px;">{{page.weight}}斤</view>
<!-- <view style="color: #FF5006;font-size: 15px;" v-if="brandType=='1'">{{page.weight2}}斤</view> -->
<!-- <view style="color: #FF5006;font-size: 15px;" v-if="brandType=='2'">{{page.weight3}}斤</view> -->
<view style="color: #888;font-size: 10px;">，满200斤可定制云菜窖</view>
<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
温馨提示：已定制了</view>
<view style="color: #FF5006;font-size: 15px;height: 15px;line-height: 15px;font-weight: bold;">
{{page.weight}}斤
</view>
<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
，满200斤可定制云菜窖</view>
</view>
</view>
<view
style="display: flex;flex-direction: row; justify-content: center;align-items: center;padding-bottom: 10px;margin-top: 5px;">
style="display: flex;flex-direction: row; justify-content: center;align-items: center;padding-bottom: 10px;margin-top: 5px;padding: 0px 10px;">
<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 8px 15px;
border: 1px #FF5006 solid; border-top-left-radius: 25px; border-bottom-left-radius: 25px;">分享新人有礼</text>
<text
style="background: #FF9900; color: #fff;font-size: 13px; padding: 0px 15px;height: 40px;line-height: 40px;
border: 1px #FF5006 solid; border-top-left-radius: 25px; border-bottom-left-radius: 25px;flex-shrink: 0;">分享新人有礼</text>
<view style="border: 1px #FF5006 solid;margin-left: 5px;margin-right: 5px;padding: 5px 10px;
display: flex;flex-direction: row;align-items: center;" @click="gotoCart()">
<view style="border: 1px #FF5006 solid;margin-left: 5px;margin-right: 5px;padding: 0px 10px;height: 42px;flex: 1;
display: flex;flex-direction: row;align-items: center;box-sizing: border-box;" @click="gotoCart()">
<image src="../../static/shoppCart_icon.png" mode="aspectFill"
style="height: 20px;width: 25px;"></image>
<text style="font-size: 15px;color: #FF5006;margin-left: 10px; ">￥{{page.price}}</text>
<text style="font-size: 10px;color: #666;margin-left: 10px; ">共减：￥{{page.reduce}}</text>
</view>
<!-- <view style="border: 1px #FF5006 solid;margin-left: 5px;margin-right: 5px;padding: 5px 10px;
display: flex;flex-direction: row;align-items: center;" v-if="brandType=='1'">
<image src="../../static/shoppCart_icon.png" mode="aspectFill"
style="height: 20px;width: 25px;"></image>
<text style="font-size: 15px;color: #FF5006;margin-left: 10px; ">￥{{page.price2}}</text>
<text style="font-size: 10px;color: #666;margin-left: 10px; ">共减：￥{{page.reduce2}}</text>
style="height: 20px;width: 20px;flex-shrink: 0;">
</image>
<view style="display: flex;flex-direction: column;flex: 1;">
<text
style="font-size: 15px;color: #FF5006;margin-left: 10px;height: 20px;line-height: 20px;margin-top: 5px;font-weight: bold;">￥{{page.price}}</text>
<text
style="font-size: 10px;color: #666;margin-left: 10px; height: 10px;line-height: 10px;margin-bottom: 5px;">共减：￥{{page.reduce}}</text>
</view>
</view>
<view style="border: 1px #FF5006 solid;margin-left: 5px;margin-right: 5px;padding: 5px 10px;
display: flex;flex-direction: row;align-items: center;" v-if="brandType=='2'">
<image src="../../static/shoppCart_icon.png" mode="aspectFill"
style="height: 20px;width: 25px;"></image>
<text style="font-size: 15px;color: #FF5006;margin-left: 10px; ">￥{{page.price3}}</text>
<text style="font-size: 10px;color: #666;margin-left: 10px; ">共减：￥{{page.reduce3}}</text>
</view> -->
<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 8px 15px;
border: 1px #FF5006 solid; border-top-right-radius: 25px; border-bottom-right-radius: 25px;"
<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 0px 15px;height: 40px;line-height: 40px;
border: 1px #FF5006 solid; border-top-right-radius: 25px; border-bottom-right-radius: 25px;flex-shrink: 0;"
@click="settlement()">结算</text>
</view>
@ -232,14 +169,12 @@
</view>
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog ref="inputClose" mode="base" title="订购协议" :showConfirm="true"
:beforeClose="dialogBeforeClose" @confirm="dialogInputConfirm" :content="dialogContent"
:confirm-text="confirmText"></uni-popup-dialog>
</uni-popup>
</view>
</template>
@ -353,6 +288,7 @@
request() {
let _this = this
_this.$api.getAllGoodsType(_this.brandType).then((resp) => {
console.log("------------", resp);
_this.data = resp
_this.searchInfo.sid = _this.data[0].sid
_this.selectIndex = 0
@ -660,31 +596,57 @@
.top {
width: 100vw;
/* height: 126.66vw; */
height: 75vw;
height: 50vw;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/clound_bj1.png);
background-image: url(https://supervise.yxtsoft.com/lpk/image/banner.png);
/* background-image: url(../../static/clound_bj1.png); */
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.center {
display: flex;
flex-direction: row;
flex: 1;
background-color: #f7f7f7;
border-radius: 15px;
overflow: hidden;
min-width: 0;
}
.bottom {
display: flex;
flex-direction: column;
border-top: 1px solid #F8F8F8;
padding-top: 5px;
flex-shrink: 0;
margin-bottom: 10px;
}
.label {
background: #fff;
color: #FF9900;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
color: #191919;
font-size: 12px;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 5px;
}
.label2 {
background: #FF9900;
color: #fff;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
background: #FFF;
color: #FFF;
background-color: #FF9900;
font-size: 12px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
font-weight: bold;
border-radius: 20px;
margin-left: 5px;
}
.top_img1 {
@ -701,9 +663,12 @@
color: #fff;
font-weight: 800;
font-family: sans-serif;
padding: 2px 5px;
padding: 5px 16px;
border-radius: 5px;
margin-top: -25px;
font-size: 13px;
word-break: keep-all;
white-space: nowrap;
}
.top_text2 {
@ -711,9 +676,18 @@
background: #fff;
color: #F6894B;
font-weight: 800;
padding: 5px 16px;
font-family: sans-serif;
padding: 2px 5px;
border-radius: 5px;
margin-top: -25px;
font-size: 13px;
word-break: keep-all;
white-space: nowrap;
}
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
</style>
Write Preview
Loading…
Cancel
Save