product_platform/yxt-yythmall-ui-miniprogram
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

111

Browse Source
This commit is contained in:
wong1988
2024-01-19 19:16:44 +08:00
parent 119a17f02b
commit 99ff039fb9
1 changed files with 145 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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