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

1111111

Browse Source
This commit is contained in:
guoxing
2024-02-01 10:57:56 +08:00
parent be49a3e45e
commit 8851cbf7dd
26 changed files with 966 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
pages/home/cloudCard2.vue
View File

@@ -3,9 +3,24 @@
<view
style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);">
<view class="top" style="position: fixed;z-index: 0;" />
<view class="top" style="position: fixed;z-index: 2;">
<loading-state ref="pageView" @request="request" style="z-index: 2;">
<swiper class="swiper" ref="swiper" :indicator-dots="true" :autoplay="true" :interval="3000"
:duration="1200" :circular='true'>
<swiper-item v-for="(item,index) in imgList" style="" @click="swiperClick(item)">
<image :src="item.bannerUrl" style="width: 100%; " mode="scaleToFill">
</image>
</swiper-item>
</swiper>
</view>
<loading-state ref="pageView" @request="request" style="z-index: 0;">
<!-- 总高度 - 底部导航栏高度 60px -->
<view style="height: calc(100vh - 60px);box-sizing: border-box;display: flex;flex-direction: column;">
@@ -19,7 +34,7 @@
<view class="center" style="">
<view
style="width: 24%;display: flex;flex-direction: column;overflow-y: auto;padding-top: 10px;">
style="width: 24%;display: flex;flex-direction: column;overflow-y: auto;padding-top: 20px;">
<view style="width: 100%;display: flex;flex-direction: column; ">
<view v-for="(item,index) in data.typeVos" @click="labelClick(index,item)"
@@ -33,7 +48,8 @@
<view style="width: 77%;background-color: #fff;overflow-y: auto;">
<view style="z-index: 1;background: #FFFFFF;position: sticky;top: 0;padding: 10px;">
<view
style="z-index: 1;background: #FFFFFF;position: sticky;top: 0;padding: 10px; margin-top: 10px;">
<view style="display: flex;flex-direction: row;overflow-x: auto;">
@@ -115,8 +131,7 @@
mode="aspectFill" style="width: 40vw;height: 40vw; "></image>
<view
style="display: flex;flex-direction: row;align-items: center;margin-top: -15px;">
<text
style="font-size: 16px; color: #999;">菜窖还在补充中~</text>
<text style="font-size: 16px; color: #999;">菜窖还在补充中~</text>
</view>
</view>
@@ -170,7 +185,7 @@
<view style="display: flex;flex-direction: column;flex: 1;">
<text
style="font-size: 15px;color: #FF5006;margin-left: 5px;height: 20px;line-height: 20px;margin-top: 5px;font-weight: bold;">￥{{page.price}}</text>
<text
<text v-if="page.remarks!=''"
style="font-size: 10px;color: #666;margin-left: 5px; height: 10px;line-height: 10px;margin-bottom: 5px;">{{page.remarks}}</text>
</view>
</view>
@@ -204,6 +219,19 @@
:content="data.brandVos[selectIndex2].qdxy"></uni-popup-dialog>
</uni-popup>
<!-- 弹窗蒙版 -->
<view class="model" catchtouchmove='preventTouchMove' v-if='showModal'></view>
<view class="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal'>
<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
<image :src="modalUrl" style="width:80vw; height: 80vh;" mode="scaleToFill"></image>
<image src="../../static/close.png" mode="aspectFill" style="width: 28px;height: 28px;margin-top: 10px;"
@click="colseDialog()"></image>
</view>
</view>
</view>
</template>
@@ -212,6 +240,9 @@
export default {
data() {
return {
showModal: false,
modalUrl: "https://supervise.yxtsoft.com/lpk/image/banner.png",
imgList: [],
notData: false,
dialogContent: "这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容这里是协议内容，这里是协议内容",
confirmText: "我知道了（5s）",
@@ -254,7 +285,8 @@
initReduce: "0",
initWeight: "0",
shareSid: "",
baseDataSuccess: false
baseDataSuccess: false,
}
},
onShow() {
@@ -283,9 +315,28 @@
this.request()
this.shareGift()
this.getBannerList()
},
methods: {
getBannerList() {
let _this = this
_this.$api.bannerList().then((resp) => {
_this.imgList = resp
console.log("======", resp);
}).catch(e => {})
},
swiperClick(item) {
console.log("swiperClick======", item);
this.modalUrl = item.contentUrl
if (item.contentUrl != '') {
this.showModal = true
}
},
colseDialog() {
this.showModal = false
},
shareGift() {
@@ -554,7 +605,8 @@
gotoCart() {
uni.navigateTo({
url: '/pages/good/shoppCart?affiliation=' + this.data.brandVos[this.selectIndex2].id +
"&weight=" + this.data.brandVos[this.selectIndex2].qssl+"&qdxy=" + this.data.brandVos[this.selectIndex2].qdxy
"&weight=" + this.data.brandVos[this.selectIndex2].qssl + "&qdxy=" + this.data.brandVos[
this.selectIndex2].qdxy
})
},
showPop2() {
@@ -677,7 +729,36 @@
border: 0;
}
/* 弹窗样式 */
.model {
position: absolute;
width: 100%;
height: 100%;
background: #000;
z-index: 100000;
opacity: 0.7;
top: 0;
left: 0;
}
.modalDlg {
/* 设置超出滚动 */
overflow: auto;
width: 100%;
position: fixed;
height: 100%;
top: 0;
left: 0;
z-index: 100000;
display: flex;
justify-content: center;
align-items: center;
}
.top {
width: 100vw;
/* height: 126.66vw; */
height: 50vw;
@@ -688,6 +769,33 @@
background-size: 100% 100%;
}
.swiper {
width: 100vw;
height: 100%;
}
.wx-swiper-dots {
position: relative;
left: 50%;
top: 90%;
}
.swiper /deep/ .wx-swiper-dot {
height: 12rpx;
width: 12rpx;
border-radius: 8rpx;
background: #98978C;
margin-right: 0;
}
.swiper /deep/ .wx-swiper-dot-active {
width: 44rpx;
height: 12rpx;
background: #FF9900;
border-radius: 8rpx;
}
.center {
display: flex;
flex-direction: row;

143
pages/home/myCellar.vue
View File

@@ -12,9 +12,22 @@
<loading-state ref="pageView" @request="request">
<view style="background: #fff; height: calc(100vh - 45px - 50vw);width: 100%;
<view style="background: #fff; height: calc(100vh - 45px - 65vw);width: 100%;
border-radius: 15px;display: flex;flex-direction: column; box-sizing: border-box;margin-top: -15px;">
<swiper v-if="notices.length>0" class='swiper-box' :autoplay='true' interval='5000' :vertical='true'
:circular='true'>
<swiper-item v-for="(item,index) in notices" @click="noticeClick(item)">
<!-- {{index + 1}}、啊实打实阿斯加德阿斯asdas什么大塑料袋阿萨德的 -->
<view style="display: flex;flex-direction: row;align-items: center;box-sizing: border-box;">
<image src="../../static/notice.png" style="width: 18px;height: 18px;"></image>
<text
style="font-size: 13px; text-overflow: ellipsis;white-space: nowrap;overflow: hidden;color: #E26040; flex: 1;margin-left: 10px;margin-right: 10px;">{{index + 1}}、{{item.title}}</text>
<image src="../../static/more.png" style="width: 15px;height:15px;"></image>
</view>
</swiper-item>
</swiper>
<view class="center">
<view style="width: 22%;display: flex;flex-direction: column;overflow-y: auto;padding-top: 10px;">
@@ -349,6 +362,35 @@
</view>
<!-- 通知弹框 -->
<view class="model" catchtouchmove='preventTouchMove' v-if='showModal4' @click="colseDialog4()"></view>
<view class="modalDlg4" catchtouchmove='preventTouchMove' v-if='showModal4'>
<view style="display: flex;flex-direction: column;background: #fff; width: 80%; border-radius: 20px;
padding: 20px;">
<text
style="color: #333; font-size: 20px;font-weight: 800;font-family: sans-serif;width: 100%;text-align: center;">通知公告</text>
<view style="margin-top: 20px;" v-show="!noticeInfo.content==''">
<rich-text :nodes="noticeInfo.content | formatRichText" class="ql-editor"></rich-text>
</view>
<text style="color: #666; font-size: 13px; width: 95%;text-align:right;margin-top: 20px;">{{noticeInfo.releaseTime}}</text>
<view
style="flex-shrink: 0;display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 20px;">
<text style="background: #FF9900;color: #fff;text-align: center;border-radius: 20px;
padding:8px 25px ;" @click="colseDialog4()">我知道了</text>
</view>
</view>
</view>
</view>
</template>
@@ -357,12 +399,15 @@
export default {
data() {
return {
notices: [],
noticeInfo: {},
butdisabled: true,
transferNotData: true,
notData: false,
showModal: false,
showModal2: false,
showModal3: false,
showModal4: false,
scrollHeight: "",
scrollLeftTop: "0",
scrollRightTop: "0",
@@ -428,6 +473,7 @@
}
this.request()
this.getNotice()
this.page.count = 0
},
onLoad(options) {
@@ -445,15 +491,64 @@
this.shareGift()
},
filters: {
/**
* 处理富文本里的图片宽度自适应
* 1.去掉img标签里的style、width、height属性
* 2.img标签添加style属性：max-width:100%;height:auto
* 3.修改所有style里的width属性为max-width:100%
* 4.去掉<br/>标签
* @param html
* @returns {void|string|*}
*/
formatRichText(html) {
//控制小程序中图片大小
if (html) {
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi,
'<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;"');
return newContent;
} else {
return '暂无商品详情';
}
},
},
methods: {
getNotice() {
let _this = this
this.$api.getNotices().then((resp) => {
console.log("getNotice>>>>", resp);
_this.notices = resp
}).catch(e => {})
},
noticeClick(item) {
console.log("noticeClick>>>>", item);
this.noticeInfo = item
this.showModal4 = true
},
onKeyInput(event) {
this.transferInfo.remarks = event.target.value
},
shareGift() {
console.log("shareGift>>>>", this.shareSid);
console.log("shareGift>>>>", this.orderSid);
// 邀请新人 助力礼包 isNewUser==1 可以助力
if (this.shareSid != '' && getApp().globalData.isNewUser == '1') {
if (this.stringIsNotEmpty(this.orderSid) && getApp().globalData.isNewUser == '1') {
var params = {
customerSid: getApp().globalData.sid,
@@ -462,7 +557,6 @@
this.$api.recommendedAssistance(params).then((resp) => {
}).catch(e => {})
}
@@ -665,6 +759,9 @@
colseDialog3() {
this.showModal3 = false
},
colseDialog4() {
this.showModal4 = false
},
onShareAppMessage: function(res) {
let _this = this
@@ -740,6 +837,29 @@
</script>
<style>
.swiper-box {
margin-top: -55px;
height: 50rpx;
line-height: 50rpx;
padding: 0 20rpx;
background-color: #FDE0C6;
overflow: hidden;
opacity: 0.8;
border-radius: 5px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 5px;
}
.swiper-box .item {
white-space: nowrap;
text-overflow: ellipsis;
color: #E26040;
font-size: 10px;
}
button {
background: #FF9900;
color: #fff;
@@ -768,7 +888,7 @@
.top {
width: 100vw;
/* height: 126.66vw; */
height: 50vw;
height: 65vw;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/clound_bj1.png);
/* background-image: url(../../static/clound_bj1.png); */
@@ -933,4 +1053,19 @@
flex-direction: column;
}
.modalDlg4 {
/* 设置超出滚动 */
overflow: auto;
position: fixed;
z-index: 100000;
display: flex;
width: 100%;
height: 100%;
top: 0;
left: 0;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>

135
pages/home/myHome.vue
View File

@@ -17,8 +17,17 @@
<image src="../../static/more_white.png"
style="width: 30px;height: 30px;margin-right: 10px;flex-shrink: 0;" :rotate="0"></image>
</view>
<view style="display: flex;flex-direction: row;align-items: center; width: 100%;
position: absolute;bottom: 8vw; " >
<view style="flex: 1;"></view>
<view style="margin-right: 20px;display: flex;flex-direction: row;align-items: center;" @click="makePhoneCall()">
<image src="../../static/userService.png" style="width: 25px;height: 25px;margin-right: 5px;"></image>
<text style="color: #fff;font-size: 16px;">客服电话</text>
</view>
</view>
</view>
<view class="view">
<view class="view" style="z-index: 2;">
<!-- 滚动视图 -->
<scroll-view scroll-y="true" class="scroll-view" bindscrolltoupper="upper" bindscrolltolower="lower"
bindscroll="scroll">
@@ -123,26 +132,30 @@
</view>
<text style="font-size: 12px;color: #4B4B4B; margin-top: 8px;">邀请新朋友后，您将获得“蔬菜品鉴礼包”。</text>
<text style="font-size: 12px;color: #4B4B4B; margin-top: 8px;">{{recommend.remarks}}</text>
<!-- <view style="display: flex;flex-direction: row;align-items: center; "> -->
<view style="display: flex;flex-direction: row;align-items: center; margin-top: 10px;"
v-if="recommend.vos.length>0">
<!-- <image :src="recommend.iconUrl" style="width: 35%;height: 150px; border-radius: 10px;"
<!-- <image :src="recommend.iconUrl" style="width: 30%;height: 100px; border-radius: 10px;"
mode="aspectFill">
</image> -->
<!-- <view style="display: flex;flex-direction: column; margin-left: 20px; ">
<view v-for="(child,pos) in recommend.recordList" :key="pos"
style="display: flex;flex-direction: column;">
<view
style="display: flex;flex-direction: column; margin-left: 20px;width: 90%;box-sizing: border-box;">
<view v-for="(child,pos) in recommend.vos" :key="pos" @click="recommendClick(child)"
style="display: flex;flex-direction: column;width: 100%;box-sizing: border-box;">
<text style="color: #424242; font-size: 12px;line-height: 20px;">* {{child.content}}</text>
<text style="color: #424242; font-size: 13px;line-height: 25px;">* {{child.remarks}}</text>
</view>
</view> -->
<!-- </view> -->
</view>
</view>
</view>
@@ -156,7 +169,7 @@
export default {
data() {
return {
butdisabled: true,
butdisabled: true,
page: {
startHeight: 0,
endHeight: 0
@@ -175,7 +188,9 @@
mobile: ""
},
headImage: "",
recommend: {},
recommend: {
vos:[]
},
banKInfo: null
}
},
@@ -187,7 +202,7 @@
}
this.getUserInfo()
// this.myRecommend()
this.myRecommend()
},
onLoad(options) {
// this.request()
@@ -201,6 +216,12 @@
this.$refs.nav.defaultColorBgAlpha(res)
},
methods: {
makePhoneCall() {
wx.makePhoneCall({
phoneNumber: '15503115233',
})
},
getUserInfo() {
let _this = this
_this.$api.getUserInfo(getApp().globalData.sid).then((resp) => {
@@ -223,12 +244,17 @@
let _this = this
_this.$api.myRecommend(getApp().globalData.sid).then((resp) => {
console.log("myRecommend>>>", resp)
_this.recommend = resp
}).catch(e => {
})
},
recommendClick(item) {
console.log("recommendClick>>>", item)
},
showDiaLog() {
uni.navigateTo({
url: '/pages/me/base_info'
@@ -238,9 +264,9 @@
// console.log("res", res)
// console.log("data", res.target.dataset)
// var data = res.target.dataset.info
// this.shareCard()
// // ①
// let shareData = JSON.stringify({
// // params: {
@@ -270,20 +296,20 @@
// console.log('aaaa', "用户点击了取消")
// }
// }
let _this = this
const promise = new Promise(resolve => {
// 模拟网络请求
setTimeout(() => {
var params ={
customerSid:getApp().globalData.sid
var params = {
customerSid: getApp().globalData.sid
}
_this.$api.recommendNewUsers(params).then((resp) => {
let shareData = JSON.stringify({
// params: {
// code: resp.transferCode,
@@ -292,46 +318,47 @@
// functionName: 'bindCard',
// url: '/pages/bind/bind_cloudCard?code=' + resp
// .transferCode + "&codeKey=" + resp.sid
url: '/pages/home/myCellar?shareSid=' + getApp().globalData.sid+"&orderSid=" + resp.sid,
url: '/pages/home/myCellar?shareSid=' + getApp()
.globalData.sid + "&orderSid=" + resp.sid,
functionName: 'share'
})
// 转码传输
let value = encodeURIComponent(shareData)
resolve({
title: '汇融惠享-云菜窖',
// ②
path: '/pages/login/login?data=' + value,
imageUrl: 'https://supervise.yxtsoft.com/lpk/image/share_invite.png', //自定义图片路径，显示图片长宽比是 5:4。
})
}).catch(e => {
_this.shortToast('发生错误,请稍后再试.')
return
})
}, 0)
})
return promise
},
shareCard() {
let _this = this
var params ={
customerSid:getApp().globalData.sid
var params = {
customerSid: getApp().globalData.sid
}
_this.$api.recommendNewUsers(params).then((resp) => {
}).catch(e => {})
},
itemClick(type) {
switch (type) {
@@ -339,22 +366,29 @@
uni.navigateTo({
url: '/pages/records/reservationRecords',
})
// uni.navigateTo({
// url: '/pages/records/reservationRecords3',
// })
break;
case "已提菜":
uni.navigateTo({
url: '/pages/records/reservationRecords2',
})
uni.navigateTo({
url: '/pages/records/reservationRecords2',
})
// uni.navigateTo({
// url: '/pages/records/reservationRecords4',
// })
break;
case "我的订单":
uni.navigateTo({
url: '/pages/records/orderRecords',
})
// uni.navigateTo({
// url:"/pages/records/orderDetail"
// })
break;
case "待付款":
@@ -396,6 +430,8 @@
background-image: url(https://supervise.yxtsoft.com/lpk/image/my_bj.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
position: relative;/*父元素位置要设置为相对*/
}
/* 顶部-用户信息 */
@@ -429,12 +465,11 @@
/* 视图 */
.view {
box-sizing: border-box;margin-top: -15px;
background: #F7F7F7;
flex-flow: 1;
height: calc(100vh - 50vw - 48px);
height: calc(100vh - 45px - 65vw);;
width: 100%;
margin-top: -18vw;
border-radius: 25px;
border-radius: 15px;
}
/* 滚动视图 */
@@ -442,7 +477,7 @@
height: 100%;
width: 100%;
padding: 15px;
border-radius: 25px;
border-radius: 15px;
box-sizing: border-box;
}