新增
This commit is contained in:
曹辉
parent
4386ebdc78
commit
b4a5866447
9
App.vue
9
App.vue
@ -1,11 +1,8 @@
|
||||
<script>
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
},
|
||||
onShow: function() {
|
||||
},
|
||||
onHide: function() {
|
||||
}
|
||||
onLaunch: function() {},
|
||||
onShow: function() {},
|
||||
onHide: function() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -6,27 +6,25 @@
|
||||
<!-- <swiper-item v-for="(item ,index) in info" :key="index">
|
||||
</swiper-item> -->
|
||||
<swiper-item>
|
||||
<image style='width:100%;height:750rpx' src="../../static/spjtcs.png" mode=""></image>
|
||||
<image style='width:100%;height:750rpx' :src="baseurl+goodsDetailslist.goodsPictureUrl" mode="">
|
||||
</image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
<view class="Commodity common" v-for="(item,index) in goodsDetails" :key="index">
|
||||
<view class="Commodity common">
|
||||
<view class="name">
|
||||
{{item.goodsName}}
|
||||
</view>
|
||||
<view class="number">
|
||||
200{{item.goodsUnit}}
|
||||
{{goodsDetailslist.goodsName}}
|
||||
</view>
|
||||
<view class="price">
|
||||
￥{{item.goodsPrice}}
|
||||
￥{{goodsPrice}} 起
|
||||
</view>
|
||||
</view>
|
||||
<view class="choice common" v-for="(item,index) in goodsDetails" @tap="buyshow=true">
|
||||
<view class="choice common" @tap="buyshow=true">
|
||||
<view class="selected">
|
||||
已选
|
||||
</view>
|
||||
<view class="content">
|
||||
酒精棉片 8盒×1
|
||||
{{updata.goodsAttributeName}}
|
||||
</view>
|
||||
<image src="../../static/jiantou.png" mode=""></image>
|
||||
</view>
|
||||
@ -55,45 +53,55 @@
|
||||
<view class="selected">
|
||||
图文服务
|
||||
</view>
|
||||
<image src="../../static/tpcs.png" mode=""></image>
|
||||
<image :src="baseurl+goodsDetailslist.goodsPictureUrl" mode=""></image>
|
||||
</view>
|
||||
<view class="Purchasecolumn">
|
||||
<view class="buy" @tap="buyshow=true">
|
||||
立即购买
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-mask :show="buyshow" @click="buyshow = false" class='mask'>
|
||||
<view class="PurchasePage" @click.stop=''>
|
||||
<image class="close" src="../../static/gb.png" mode="" @tap='buyshow=false'></image>
|
||||
</image>
|
||||
<view class="topcontent">
|
||||
<view class="image">
|
||||
<image src="../../static/tpcs.png" mode=""></image>
|
||||
<image :src="baseurl+goodsDetailslist.goodsPictureUrl" mode=""></image>
|
||||
</view>
|
||||
<view class="title">
|
||||
<span>酒精棉片</span> <span style='margin-left: 30rpx;'>200片</span>
|
||||
<span>{{goodsDetailslist.goodsName}}</span>
|
||||
</view>
|
||||
<view class="price">
|
||||
￥36.0
|
||||
￥{{updata.goodsPrice}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="centercontent topcontent">
|
||||
<view class="header">
|
||||
型号
|
||||
商品规格
|
||||
</view>
|
||||
<view class="Productmodel">
|
||||
酒精棉片 8盒
|
||||
<view v-for="(item,index) in goodDetailsLists"
|
||||
:class="item.isActive ? 'Productmodel':'productmodel'" @tap='isActivegoods(item)'>
|
||||
{{item.attributeDetailsName}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="centercontent topcontent" v-for="(item,index) in goodDetailsLists">
|
||||
<view class="header">
|
||||
{{item.attributeName}}
|
||||
</view>
|
||||
<view v-for="bitem in item.goodAttributeDetailsLists" :key="bitem.attributeDetailsId"
|
||||
:class="bitem.isActive ? 'Productmodel':'productmodel'" @tap='isActivegoods(item,bitem)'>
|
||||
{{bitem.attributeDetailsName}}
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="bottomcontent topcontent">
|
||||
<view class="header">
|
||||
数量
|
||||
</view>
|
||||
<view class="number">
|
||||
<u-number-box :min="1" :max="999"></u-number-box>
|
||||
<u-number-box :min="1" :max="999" v-model="updata.goodsCount"></u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buy">
|
||||
<view class="buy" @tap="tapbuy">
|
||||
立即购买
|
||||
</view>
|
||||
</view>
|
||||
@ -106,33 +114,115 @@
|
||||
goodsDetails
|
||||
} from '@/api/CommodityDetails/CommodityDetails.js'
|
||||
import baseurl from '@/api/baseurl.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goodsDetails:[],
|
||||
goodsInfoId:"1",
|
||||
baseurl: '', //url
|
||||
goodsPrice: '', //页面价格
|
||||
goodsDetailslist: [], //商品list
|
||||
goodDetailsLists: [], //提前预备商品规格数组
|
||||
buyshow: false, //立即购买遮罩层开关
|
||||
//轮播内容
|
||||
info: [{
|
||||
content: '内容 A'
|
||||
}],
|
||||
info: [{}],
|
||||
current: 0, //轮播初始下标
|
||||
mode: 'dot', //轮播点样式
|
||||
swiperDotIndex: 0, //轮播可视图
|
||||
number: 1, //数量
|
||||
updata: { //订单
|
||||
goodsPrice: 0.00,
|
||||
goodsName: "",
|
||||
goodsAttributeName: '',
|
||||
goodsCount: 1,
|
||||
nurseStationId: '',
|
||||
img: '',
|
||||
totalprice: null,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
//获取传值
|
||||
console.log(options)
|
||||
this.goodsDetailsinfo()
|
||||
// this.title = options.title
|
||||
this.goodsInfoId = options.goodsInfoId
|
||||
// this.goodsListinfo()
|
||||
},
|
||||
methods: {
|
||||
//立即购买跳转确认订单页面
|
||||
tapbuy() {
|
||||
this.updata.totalprice = (this.updata.goodsPrice * this.updata.goodsCount).toFixed(2)
|
||||
console.log(this.updata)
|
||||
},
|
||||
// tapbuy() {
|
||||
// this.goodsDetailslist.goodDetailsLists.forEach(e => {
|
||||
// e.goodAttributeDetailsLists.forEach(el => {
|
||||
// if (el.isActive == true) {
|
||||
// this.updata.goodsAttributeName += el.attributeDetailsName + ' '
|
||||
// this.updata.totalprice = (this.updata.goodsPrice * this.updata.goodsCount)
|
||||
// .toFixed(2)
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
// },
|
||||
//选择商品
|
||||
isActivegoods(item) {
|
||||
this.updata.goodsPrice = 0
|
||||
this.updata.goodsAttributeName = ''
|
||||
if (item.isActive == true) {
|
||||
this.goodDetailsLists.forEach(e => {
|
||||
e.isActive = false
|
||||
})
|
||||
} else {
|
||||
this.goodDetailsLists.forEach(e => {
|
||||
e.isActive = false
|
||||
})
|
||||
item.isActive = true
|
||||
this.updata.goodsAttributeName = item.attributeDetailsName
|
||||
this.updata.goodsPrice = item.goodsPrice
|
||||
this.updata.goodsPrice = this.updata.goodsPrice.toFixed(2)
|
||||
}
|
||||
},
|
||||
|
||||
// isActivegoods(item, bitem) {
|
||||
// if (item.attributeName.includes('服务')) {} else {
|
||||
// if (bitem.isActive == true) {
|
||||
// item.goodAttributeDetailsLists.forEach(e => {
|
||||
// e.isActive = false
|
||||
// })
|
||||
// } else {
|
||||
// item.goodAttributeDetailsLists.forEach(e => {
|
||||
// e.isActive = false
|
||||
// })
|
||||
// bitem.isActive = true
|
||||
// }
|
||||
// }
|
||||
// this.updata.goodsPrice = 0
|
||||
// this.updata.goodsAttributeName = ''
|
||||
// this.goodsDetailslist.goodDetailsLists.forEach(e => {
|
||||
// e.goodAttributeDetailsLists.forEach(el => {
|
||||
// if (el.isActive == true) {
|
||||
// this.updata.goodsPrice += el.goodsPrice
|
||||
// this.updata.goodsAttributeName += el.attributeDetailsName + ' '
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
// this.updata.goodsPrice = this.updata.goodsPrice.toFixed(2)
|
||||
// },
|
||||
// 查询商品详细信息
|
||||
goodsDetailsinfo(goodsInfoId) {
|
||||
goodsDetails(goodsInfoId).then(res => {
|
||||
res.data[0].goodDetailsLists.forEach(e => {
|
||||
e.isActive = false
|
||||
})
|
||||
this.goodsDetailslist = res.data[0]
|
||||
this.updata.goodsName = this.goodsDetailslist.goodsName
|
||||
this.updata.nurseStationId = this.goodsDetailslist.nurseStationId
|
||||
this.updata.img = this.goodsDetailslist.goodsPictureUrl
|
||||
this.goodDetailsLists = res.data[0].goodDetailsLists
|
||||
// res.data[0].goodDetailsLists.forEach(e => {
|
||||
// e.goodAttributeDetailsLists.forEach(el => {
|
||||
// el.isActive = false
|
||||
// el.goodsPrice = Number(el.goodsPrice)
|
||||
// })
|
||||
// })
|
||||
// this.goodsDetailslist = res.data[0]
|
||||
// this.updata.goodsName = this.goodsDetailslist.goodsName
|
||||
// this.updata.nurseStationId = this.goodsDetailslist.nurseStationId
|
||||
// this.updata.img = this.goodsDetailslist.goodsPictureUrl
|
||||
// this.goodDetailsLists = res.data[0].goodDetailsLists
|
||||
})
|
||||
},
|
||||
//滑动轮播切换
|
||||
change(e) {
|
||||
this.current = e.detail.current;
|
||||
@ -141,234 +231,15 @@
|
||||
clickItem(e) {
|
||||
this.swiperDotIndex = e
|
||||
},
|
||||
// 查询商品详细信息
|
||||
goodsDetailsinfo(){
|
||||
goodsDetails(this.goodsInfoId).then(res => {
|
||||
// res.data.forEach(e => {
|
||||
// e.goodsCatrgoryPicture = baseurl + e.goodsCatrgoryPicture
|
||||
// })
|
||||
this.goodsDetails = res.data
|
||||
console.log(this.goodsDetails)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(options) { //获取传值
|
||||
this.goodsPrice = options.goodsPrice //页面价格
|
||||
this.baseurl = baseurl;
|
||||
this.goodsDetailsinfo(options.goodsInfoId)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
.mask {
|
||||
.PurchasePage {
|
||||
position: fixed;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx 30rpx 0px 0px;
|
||||
font-size: 36rpx;
|
||||
|
||||
.close {
|
||||
width: 31rpx;
|
||||
height: 31rpx;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.topcontent {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 24rpx;
|
||||
border-bottom: 1rpx solid #D8D4D4;
|
||||
|
||||
.price {
|
||||
color: #D43953;
|
||||
position: absolute;
|
||||
top: 23%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 13%;
|
||||
left: 40%;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 215rpx;
|
||||
height: 215rpx;
|
||||
background: rgba(150, 147, 148, 0.21);
|
||||
margin: 60rpx 0 0 0;
|
||||
|
||||
image {
|
||||
width: 201rpx;
|
||||
height: 201rpx;
|
||||
margin: 7rpx 0 0 7rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.buy {
|
||||
width: 60%;
|
||||
height: 71rpx;
|
||||
background: #4C7BC9;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 71rpx;
|
||||
border-radius: 26rpx;
|
||||
margin: 40rpx 0 0 20%;
|
||||
}
|
||||
|
||||
.bottomcontent {
|
||||
margin-top: 34rpx;
|
||||
padding-bottom: 35rpx;
|
||||
|
||||
.header {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.number {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.centercontent {
|
||||
margin-top: 34rpx;
|
||||
padding-bottom: 35rpx;
|
||||
|
||||
.Productmodel {
|
||||
width: 344rpx;
|
||||
height: 80rpx;
|
||||
background: #ECF1FA;
|
||||
border: 1rpx solid #4C7BC9;
|
||||
line-height: 80rpx;
|
||||
border-radius: 25rpx;
|
||||
color: #4C7BC9;
|
||||
text-align: center;
|
||||
margin-top: 27rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Purchasecolumn {
|
||||
width: 100%;
|
||||
height: 110rpx;
|
||||
background: #FFFFFF;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
.buy {
|
||||
width: 263rpx;
|
||||
height: 80rpx;
|
||||
background: #4C7BC9;
|
||||
border-radius: 25rpx;
|
||||
font-size: 38rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.common {
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
||||
.choice,
|
||||
.Discount,
|
||||
.service {
|
||||
height: 80rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
|
||||
font-size: 34rpx;
|
||||
line-height: 80rpx;
|
||||
margin-bottom: 15rpx;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 17rpx;
|
||||
height: 26rpx;
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: #969394;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.picture {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
|
||||
position: relative;
|
||||
padding-bottom: 110rpx;
|
||||
|
||||
.selected {
|
||||
padding: 20rpx 0 0 5%;
|
||||
color: #969394;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
image {
|
||||
margin-top: 20rpx;
|
||||
height: 850rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.service {
|
||||
height: 130rpx;
|
||||
line-height: 65rpx;
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: #969394;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.Commodity {
|
||||
height: 160rpx;
|
||||
background: #FFFFFF;
|
||||
margin: 15rpx 0 15rpx 0;
|
||||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
font-size: 36rpx;
|
||||
line-height: 75rpx;
|
||||
|
||||
.name,
|
||||
.number {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #D43953;
|
||||
}
|
||||
|
||||
.number {
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "./CommodityDetailsstyle.scss";
|
||||
</style>
|
||||
|
||||
246
pages/CommodityDetails/CommodityDetailsstyle.scss
Normal file
246
pages/CommodityDetails/CommodityDetailsstyle.scss
Normal file
@ -0,0 +1,246 @@
|
||||
.app {
|
||||
.mask {
|
||||
.PurchasePage {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx 30rpx 0px 0px;
|
||||
font-size: 36rpx;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.close {
|
||||
width: 31rpx;
|
||||
height: 31rpx;
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
right: 2%;
|
||||
}
|
||||
|
||||
.topcontent {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 24rpx;
|
||||
border-bottom: 1rpx solid #D8D4D4;
|
||||
position: relative;
|
||||
|
||||
.price {
|
||||
color: #D43953;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 37%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 38%;
|
||||
font-weight: 600;
|
||||
width: 58%;
|
||||
height: 85rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 215rpx;
|
||||
height: 215rpx;
|
||||
background: rgba(150, 147, 148, 0.21);
|
||||
margin: 35rpx 0 0 0;
|
||||
|
||||
image {
|
||||
width: 201rpx;
|
||||
height: 201rpx;
|
||||
margin: 7rpx 0 0 7rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.buy {
|
||||
width: 60%;
|
||||
height: 71rpx;
|
||||
background: #4C7BC9;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 71rpx;
|
||||
border-radius: 26rpx;
|
||||
margin: 40rpx 0 0 20%;
|
||||
}
|
||||
|
||||
.bottomcontent {
|
||||
margin-top: 34rpx;
|
||||
padding-bottom: 35rpx;
|
||||
|
||||
.header {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.number {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.centercontent {
|
||||
margin-top: 34rpx;
|
||||
font-size: 36rpx;
|
||||
.header {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.productmodel {
|
||||
font-size: 24rpx;
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
height: 60rpx;
|
||||
border: 1rpx solid #D8D4D4;
|
||||
line-height: 60rpx;
|
||||
border-radius: 25rpx;
|
||||
text-align: center;
|
||||
margin: 15rpx 10rpx 0 0;
|
||||
}
|
||||
|
||||
.Productmodel {
|
||||
font-size: 24rpx;
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
height: 60rpx;
|
||||
background: #ECF1FA;
|
||||
border: 1rpx solid #4C7BC9;
|
||||
line-height: 60rpx;
|
||||
border-radius: 25rpx;
|
||||
color: #4C7BC9;
|
||||
text-align: center;
|
||||
margin: 15rpx 10rpx 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Purchasecolumn {
|
||||
width: 100%;
|
||||
height: 110rpx;
|
||||
background: #FFFFFF;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
.buy {
|
||||
width: 263rpx;
|
||||
height: 80rpx;
|
||||
background: #4C7BC9;
|
||||
border-radius: 25rpx;
|
||||
font-size: 38rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.common {
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
||||
.choice,
|
||||
.Discount,
|
||||
.service {
|
||||
height: 80rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
|
||||
font-size: 34rpx;
|
||||
line-height: 80rpx;
|
||||
margin-bottom: 15rpx;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 17rpx;
|
||||
height: 26rpx;
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 65%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: #000111;
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: #969394;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.picture {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
|
||||
position: relative;
|
||||
padding-bottom: 110rpx;
|
||||
|
||||
.selected {
|
||||
padding: 20rpx 0 0 5%;
|
||||
color: #969394;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
image {
|
||||
margin-top: 20rpx;
|
||||
height: 850rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.service {
|
||||
height: 130rpx;
|
||||
line-height: 65rpx;
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: #969394;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.Commodity {
|
||||
background: #FFFFFF;
|
||||
margin: 15rpx 0 15rpx 0;
|
||||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
font-size: 36rpx;
|
||||
line-height: 60rpx;
|
||||
|
||||
.name,
|
||||
.number {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #D43953;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
|
||||
.number {
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -112,7 +112,7 @@
|
||||
height: 373rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 9rpx 3r1px 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 20px;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
@ -147,7 +147,7 @@
|
||||
background: #FFFFFF;
|
||||
font-size: 36rpx;
|
||||
box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
|
||||
border-radius: 20px;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 15rpx;
|
||||
font-size: 36rpx;
|
||||
|
||||
@ -159,8 +159,8 @@
|
||||
width: 99%;
|
||||
height: 105rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 9rpx 31rpx 9px rgba(0, 0, 0, 0.03);
|
||||
border-radius: 20rpx;
|
||||
margin-top: 15rpx;
|
||||
font-size: 36rpx;
|
||||
|
||||
|
||||
@ -2,14 +2,16 @@
|
||||
<view class="app">
|
||||
<view class="productlist">
|
||||
<view class="item" @tap='goCommodityDetails(item)' v-for="(item,index) in goodsList" :key="index">
|
||||
<image :src="item.goodsPictureUrl" mode=""></image>
|
||||
<image :src="baseurl+item.goodsPictureUrl" mode=""></image>
|
||||
<view class="title">
|
||||
{{item.goodsName}} 1{{item.goodsUnit}}
|
||||
{{item.goodsName}}
|
||||
</view>
|
||||
<view class="price">
|
||||
￥{{item.goodsPrice}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item" v-if="goodsList.length%2!=0">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -22,44 +24,59 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseurl: '',
|
||||
title: '医路优品', //导航栏标题
|
||||
pageNum: 1,
|
||||
pageSize: 999,
|
||||
goodsCategoryId:"",
|
||||
goodsList:[],
|
||||
pageSize: 10,
|
||||
goodsCategoryId: '', //请求值
|
||||
goodsList: [], //商品列表list
|
||||
total: 0, //list总长度
|
||||
};
|
||||
},
|
||||
onReady() {
|
||||
//更改导航栏文字
|
||||
onLoad(options) { //获取传值
|
||||
this.title = options.title //导航栏标题
|
||||
this.goodsCategoryId = options.goodsCategoryId //请求id
|
||||
this.baseurl = baseurl;
|
||||
this.goodsListinfo(this.pageSize, this.pageNum, options.goodsCategoryId)
|
||||
},
|
||||
methods: {
|
||||
// 查询商品列表
|
||||
goodsListinfo(pageSize, pageNum, goodsCategoryId) {
|
||||
goodsList(pageSize, pageNum, goodsCategoryId).then(res => {
|
||||
res.rows.forEach(e => {
|
||||
this.goodsList.push(e)
|
||||
})
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
//跳转详情页
|
||||
goCommodityDetails(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/CommodityDetails/CommodityDetails?goodsPrice=${item.goodsPrice}&goodsInfoId=${item.goodsInfoId}`
|
||||
})
|
||||
},
|
||||
},
|
||||
onReady() { //更改导航栏文字
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.title,
|
||||
});
|
||||
},
|
||||
onLoad(options) {
|
||||
//获取传值
|
||||
console.log(options)
|
||||
this.title = options.title
|
||||
this.goodsCategoryId = options.goodsCategoryId
|
||||
this.goodsListinfo()
|
||||
},
|
||||
methods: {
|
||||
// 查询商品列表
|
||||
goodsListinfo(){
|
||||
goodsList(this.patientId).then(res => {
|
||||
res.data.forEach(e => {
|
||||
e.goodsPictureUrl = baseurl + e.goodsPictureUrl
|
||||
})
|
||||
this.goodsList = res.data
|
||||
console.log(this.goodsCategoryList)
|
||||
})
|
||||
},
|
||||
//跳转详情页
|
||||
goCommodityDetails() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/CommodityDetails/CommodityDetails'
|
||||
})
|
||||
},
|
||||
onReachBottom() { //下滑加载
|
||||
if (this.goodsList.length >= this.total) {} else {
|
||||
this.pageNum++;
|
||||
this.goodsListinfo(this.pageSize, this.pageNum, this.goodsCategoryId)
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() { //下拉刷新
|
||||
this.pageNum = 1;
|
||||
goodsList(this.pageSize, this.pageNum, this.goodsCategoryId).then(res => {
|
||||
this.goodsList = res.rows
|
||||
this.total = res.total
|
||||
})
|
||||
setTimeout(function() {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -93,6 +110,9 @@
|
||||
color: #000000;
|
||||
line-height: 69rpx;
|
||||
padding-left: 20rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
image {
|
||||
|
||||
@ -353,7 +353,6 @@
|
||||
.Consumablespackage {
|
||||
width: 94%;
|
||||
height: 188rpx;
|
||||
;
|
||||
margin: 10rpx auto;
|
||||
padding: 3%;
|
||||
font-size: 35rpx;
|
||||
|
||||
60
pages/doctorslist/doctorslist.scss
Normal file
60
pages/doctorslist/doctorslist.scss
Normal file
@ -0,0 +1,60 @@
|
||||
.app {
|
||||
.visual {
|
||||
text-align: center;
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
background-color: #F4F5F7;
|
||||
padding-top: 20rpx;
|
||||
display: flex;
|
||||
|
||||
.list {
|
||||
width: 72%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 0px 20rpx 20rpx 0px;
|
||||
padding-bottom: 100rpx;
|
||||
|
||||
.information {
|
||||
width: 90%;
|
||||
position: relative;
|
||||
margin: 37rpx auto 0;
|
||||
padding-bottom: 60rpx;
|
||||
border-bottom: 1rpx solid #D8D4D4;
|
||||
|
||||
.name {
|
||||
font-size: 36rpx;
|
||||
position: absolute;
|
||||
left: 45%;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 135rpx;
|
||||
height: 138rpx;
|
||||
background: #BFBFBF;
|
||||
border-radius: 25rpx;
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.department {
|
||||
width: 28%;
|
||||
|
||||
.item {
|
||||
line-height: 100rpx;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 20rpx 0px 0px 20rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.departmentitem {
|
||||
background: #4C7BC9;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -48,64 +48,5 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
.visual {
|
||||
text-align: center;
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
background-color: #F4F5F7;
|
||||
padding-top: 20rpx;
|
||||
display: flex;
|
||||
|
||||
.list {
|
||||
width: 72%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 0px 20rpx 20rpx 0px;
|
||||
padding-bottom: 100rpx;
|
||||
|
||||
.information {
|
||||
width: 90%;
|
||||
position: relative;
|
||||
margin: 37rpx auto 0;
|
||||
padding-bottom: 60rpx;
|
||||
border-bottom: 1rpx solid #D8D4D4;
|
||||
|
||||
.name {
|
||||
font-size: 36rpx;
|
||||
position: absolute;
|
||||
left: 45%;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 135rpx;
|
||||
height: 138rpx;
|
||||
background: #BFBFBF;
|
||||
border-radius: 25rpx;
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.department {
|
||||
width: 28%;
|
||||
|
||||
.item {
|
||||
line-height: 100rpx;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 20rpx 0px 0px 20rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.departmentitem {
|
||||
background: #4C7BC9;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "./doctorslist.scss";
|
||||
</style>
|
||||
|
||||
@ -13,29 +13,31 @@
|
||||
就医
|
||||
</view>
|
||||
</view>
|
||||
<view class="item knowledge">
|
||||
<image src="../../static/zs.png" mode=""></image>
|
||||
<view class="title">
|
||||
健康知识
|
||||
</view>
|
||||
</view>
|
||||
<view class="elderly item">
|
||||
<image src="../../static/ylfw.png" mode=""></image>
|
||||
<view class="title" style="font-size: 42rpx;">
|
||||
<view class="title" style="font-size: 40rpx;">
|
||||
国家老年病中心
|
||||
</view>
|
||||
</view>
|
||||
<view class="smallitem">
|
||||
<view class="item Bodyguard">
|
||||
<image src="../../static/pb.png" mode=""></image>
|
||||
<view class="title">
|
||||
体卫融合
|
||||
</view>
|
||||
</view>
|
||||
<view style="width:56% ;">
|
||||
<view class="item knowledge">
|
||||
<image src="../../static/zs.png" mode=""></image>
|
||||
<view class="title">
|
||||
专病管理
|
||||
</view>
|
||||
</view>
|
||||
<view class='item shopping' @tap="goshopping">
|
||||
<image src="../../static/shopping.png" mode=""></image>
|
||||
<view class="title">
|
||||
商城
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -45,6 +47,12 @@
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
//跳转商城页面
|
||||
goshopping() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/shopping/shopping'
|
||||
})
|
||||
},
|
||||
//跳转就医页面
|
||||
gomedicine() {
|
||||
uni.navigateTo({
|
||||
@ -57,48 +65,21 @@
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
// background-color: #F4F5F7;
|
||||
// width: 100%;
|
||||
// height: 100vh;
|
||||
// position: relative;
|
||||
|
||||
.cards {
|
||||
.shopping {
|
||||
background: #F58540;
|
||||
}
|
||||
|
||||
.smallitem {
|
||||
width: 30%;
|
||||
height: 200rpx;
|
||||
margin-bottom: 40rpx;
|
||||
border-radius: 25rpx;
|
||||
position: relative;
|
||||
background: #9E4DD0;
|
||||
|
||||
.title {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #FCFCFC;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
image {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.Bodyguard {
|
||||
background-color: #00C176;
|
||||
}
|
||||
|
||||
.knowledge {
|
||||
background-color: #E1AE3C;
|
||||
background: #9E4DD0;
|
||||
}
|
||||
|
||||
.elderly {
|
||||
background-color: #00C176;
|
||||
background-color: #E1AE3C;
|
||||
}
|
||||
|
||||
.expert {
|
||||
|
||||
141
pages/information/information.scss
Normal file
141
pages/information/information.scss
Normal file
@ -0,0 +1,141 @@
|
||||
.app {
|
||||
.service {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 15rpx;
|
||||
|
||||
.Multiplechoice {
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
width: 100%;
|
||||
|
||||
.choices {
|
||||
background: #4C7BC9;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
width: 190rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 26rpx;
|
||||
margin: 30rpx 30rpx 0 0;
|
||||
}
|
||||
|
||||
.choice {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
width: 190rpx;
|
||||
height: 70rpx;
|
||||
background: #BFBFBF;
|
||||
border-radius: 26rpx;
|
||||
margin: 30rpx 30rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
padding-top: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 94%;
|
||||
margin: 0 auto 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding-bottom: 5rpx;
|
||||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
|
||||
.userinfo {
|
||||
.item {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: 120rpx;
|
||||
line-height: 120rpx;
|
||||
border-bottom: 1rpx solid #D8D4D4;
|
||||
display: flex;
|
||||
|
||||
view {
|
||||
height: 120rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 120rpx;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: 120rpx;
|
||||
height: 120rpx;
|
||||
width: 30%;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
::v-deep .u-input__input {
|
||||
height: 120rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
::v-deep .uni-input-wrapper {
|
||||
height: 120rpx;
|
||||
line-height: 120rpx;
|
||||
}
|
||||
|
||||
::v-deep .u-input {
|
||||
width: 70%;
|
||||
height: 120rpx;
|
||||
line-height: 120rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-child(6) {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
.information {
|
||||
width: 70%;
|
||||
height: 400rpx;
|
||||
margin: 50% auto;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
position: relative;
|
||||
|
||||
.determine,
|
||||
.cancel {
|
||||
width: 200rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 26rpx;
|
||||
font-size: 34rpx;
|
||||
line-height: 70rpx;
|
||||
position: absolute;
|
||||
top: 74%;
|
||||
}
|
||||
|
||||
.determine {
|
||||
background: #4C7BC9;
|
||||
right: 36rpx;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
background: #C5BFBF;
|
||||
left: 36rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 42rpx;
|
||||
margin-top: 40rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin: 10% 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -199,145 +199,5 @@
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.app {
|
||||
.service {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 15rpx;
|
||||
|
||||
.Multiplechoice {
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
width: 100%;
|
||||
|
||||
.choices {
|
||||
background: #4C7BC9;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
width: 190rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 26rpx;
|
||||
margin: 30rpx 30rpx 0 0;
|
||||
}
|
||||
|
||||
.choice {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
width: 190rpx;
|
||||
height: 70rpx;
|
||||
background: #BFBFBF;
|
||||
border-radius: 26rpx;
|
||||
margin: 30rpx 30rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
padding-top: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 94%;
|
||||
margin: 0 auto 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding-bottom: 5rpx;
|
||||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
|
||||
.userinfo {
|
||||
.item {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: 120rpx;
|
||||
line-height: 120rpx;
|
||||
border-bottom: 1rpx solid #D8D4D4;
|
||||
display: flex;
|
||||
|
||||
view {
|
||||
height: 120rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 120rpx;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: 120rpx;
|
||||
height: 120rpx;
|
||||
width: 30%;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
::v-deep .u-input__input {
|
||||
height: 120rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
::v-deep .uni-input-wrapper {
|
||||
height: 120rpx;
|
||||
line-height: 120rpx;
|
||||
}
|
||||
|
||||
::v-deep .u-input {
|
||||
width: 70%;
|
||||
height: 120rpx;
|
||||
line-height: 120rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-child(6) {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
.information {
|
||||
width: 70%;
|
||||
height: 400rpx;
|
||||
margin: 50% auto;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
position: relative;
|
||||
|
||||
.determine,
|
||||
.cancel {
|
||||
width: 200rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 26rpx;
|
||||
font-size: 34rpx;
|
||||
line-height: 70rpx;
|
||||
position: absolute;
|
||||
top: 74%;
|
||||
}
|
||||
|
||||
.determine {
|
||||
background: #4C7BC9;
|
||||
right: 36rpx;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
background: #C5BFBF;
|
||||
left: 36rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 42rpx;
|
||||
margin-top: 40rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin: 10% 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import './information.scss';
|
||||
</style>
|
||||
|
||||
89
pages/login/login.scss
Normal file
89
pages/login/login.scss
Normal file
@ -0,0 +1,89 @@
|
||||
.app {
|
||||
font-family: DengXian;
|
||||
color: #C3C1C1;
|
||||
font-weight: 400;
|
||||
|
||||
.switch {
|
||||
text-align: center;
|
||||
height: 100rpx;
|
||||
color: #46ABD7;
|
||||
position: absolute;
|
||||
top: 67%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.loginbtn {
|
||||
width: 80%;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
background: #4C7BC9;
|
||||
border-radius: 51rpx;
|
||||
font-size: 41rpx;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
top: 57%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.loginphone {
|
||||
background-color: #fff;
|
||||
width: 80%;
|
||||
height: 162rpx;
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
top: 23%;
|
||||
|
||||
input {
|
||||
font-size: 45rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
::v-deep .uni-input-placeholder {
|
||||
padding-left: 40rpx;
|
||||
font-size: 41rpx;
|
||||
font-weight: 400;
|
||||
color: #C3C1C1;
|
||||
}
|
||||
|
||||
.phone {
|
||||
padding-left: 40rpx;
|
||||
height: 100%;
|
||||
box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.logincode {
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
|
||||
.obtaincode {
|
||||
text-align: center;
|
||||
font-size: 37rpx;
|
||||
color: #4C7BC9;
|
||||
line-height: 162rpx;
|
||||
position: absolute;
|
||||
left: 65%;
|
||||
top: 0%;
|
||||
}
|
||||
|
||||
::v-deep .u-input__input {
|
||||
padding-left: 20rpx;
|
||||
color: #000000;
|
||||
font-size: 42rpx;
|
||||
font-weight: 400;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 50rpx;
|
||||
font-size: 52rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 44rpx;
|
||||
position: absolute;
|
||||
top: 13%;
|
||||
left: 13%;
|
||||
}
|
||||
}
|
||||
@ -257,93 +257,5 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
font-family: DengXian;
|
||||
color: #C3C1C1;
|
||||
font-weight: 400;
|
||||
|
||||
.switch {
|
||||
text-align: center;
|
||||
height: 100rpx;
|
||||
color: #46ABD7;
|
||||
position: absolute;
|
||||
top: 67%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.loginbtn {
|
||||
width: 80%;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
background: #4C7BC9;
|
||||
border-radius: 51rpx;
|
||||
font-size: 41rpx;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
top: 57%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.loginphone {
|
||||
background-color: #fff;
|
||||
width: 80%;
|
||||
height: 162rpx;
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
top: 23%;
|
||||
|
||||
input {
|
||||
font-size: 45rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
::v-deep .uni-input-placeholder {
|
||||
padding-left: 40rpx;
|
||||
font-size: 41rpx;
|
||||
font-weight: 400;
|
||||
color: #C3C1C1;
|
||||
}
|
||||
|
||||
.phone {
|
||||
padding-left: 40rpx;
|
||||
height: 100%;
|
||||
box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.logincode {
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
|
||||
.obtaincode {
|
||||
text-align: center;
|
||||
font-size: 37rpx;
|
||||
color: #4C7BC9;
|
||||
line-height: 162rpx;
|
||||
position: absolute;
|
||||
left: 65%;
|
||||
top: 0%;
|
||||
}
|
||||
|
||||
::v-deep .u-input__input {
|
||||
padding-left: 20rpx;
|
||||
color: #000000;
|
||||
font-size: 42rpx;
|
||||
font-weight: 400;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 50rpx;
|
||||
font-size: 52rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 44rpx;
|
||||
position: absolute;
|
||||
top: 13%;
|
||||
left: 13%;
|
||||
}
|
||||
}
|
||||
@import "./login.scss";
|
||||
</style>
|
||||
|
||||
80
pages/register/register.scss
Normal file
80
pages/register/register.scss
Normal file
@ -0,0 +1,80 @@
|
||||
.app {
|
||||
font-family: DengXian;
|
||||
color: #C3C1C1;
|
||||
font-weight: 400;
|
||||
|
||||
.switch {
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
color: #46ABD7;
|
||||
position: absolute;
|
||||
top: 66%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.loginbtn {
|
||||
width: 80%;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
background: #4C7BC9;
|
||||
border-radius: 51rpx;
|
||||
font-size: 41rpx;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
top: 57%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.loginphone {
|
||||
background-color: #fff;
|
||||
width: 80%;
|
||||
height: 162rpx;
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
top: 23%;
|
||||
|
||||
input {
|
||||
font-size: 40rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
::v-deep .uni-input-placeholder {
|
||||
padding-left: 40rpx;
|
||||
font-size: 41rpx;
|
||||
font-weight: 400;
|
||||
color: #C3C1C1;
|
||||
}
|
||||
|
||||
.phone {
|
||||
padding-left: 40rpx;
|
||||
height: 100%;
|
||||
box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.logincode {
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
|
||||
::v-deep .u-input__input {
|
||||
padding-left: 20rpx;
|
||||
color: #000000;
|
||||
font-size: 41rpx;
|
||||
font-weight: 400;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 50rpx;
|
||||
font-size: 52rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 44rpx;
|
||||
position: absolute;
|
||||
top: 13%;
|
||||
left: 13%;
|
||||
}
|
||||
}
|
||||
@ -61,84 +61,5 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
font-family: DengXian;
|
||||
color: #C3C1C1;
|
||||
font-weight: 400;
|
||||
|
||||
.switch {
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
color: #46ABD7;
|
||||
position: absolute;
|
||||
top: 66%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.loginbtn {
|
||||
width: 80%;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
background: #4C7BC9;
|
||||
border-radius: 51rpx;
|
||||
font-size: 41rpx;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
top: 57%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.loginphone {
|
||||
background-color: #fff;
|
||||
width: 80%;
|
||||
height: 162rpx;
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
top: 23%;
|
||||
|
||||
input {
|
||||
font-size: 40rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
::v-deep .uni-input-placeholder {
|
||||
padding-left: 40rpx;
|
||||
font-size: 41rpx;
|
||||
font-weight: 400;
|
||||
color: #C3C1C1;
|
||||
}
|
||||
|
||||
.phone {
|
||||
padding-left: 40rpx;
|
||||
height: 100%;
|
||||
box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.logincode {
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
|
||||
::v-deep .u-input__input {
|
||||
padding-left: 20rpx;
|
||||
color: #000000;
|
||||
font-size: 41rpx;
|
||||
font-weight: 400;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 50rpx;
|
||||
font-size: 52rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 44rpx;
|
||||
position: absolute;
|
||||
top: 13%;
|
||||
left: 13%;
|
||||
}
|
||||
}
|
||||
@import "./register.scss";
|
||||
</style>
|
||||
|
||||
@ -3,13 +3,12 @@
|
||||
<view class="cards">
|
||||
<view class="item" :style="{background:listcolor[index]}" @tap='goProductList(item)'
|
||||
v-for="(item,index) in goodsCategoryList" :key="index">
|
||||
<!-- <image src="../../static/sp.png" mode=""></image> -->
|
||||
<image :src="item.goodsCatrgoryPicture" mode=""></image>
|
||||
<image :src="baseurl+item.goodsCatrgoryPicture" mode=""></image>
|
||||
<view class="title" style="font-size:42rpx">
|
||||
{{item.goodsCategoryName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item" v-if="goodsCategoryList.length%2!=0">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -22,13 +21,16 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageNum: 1,
|
||||
pageSize: 999,
|
||||
goodsCategoryList: [],
|
||||
listcolor: ['#00C176', '#D43953', '#E1AE3C', '#4C7BC9', '#00C176'],
|
||||
baseurl: '', //url
|
||||
pageNum: 1, //页
|
||||
pageSize: 10, //列
|
||||
total: 0, //list总长度
|
||||
goodsCategoryList: [], //商品列表list
|
||||
listcolor: ['#00C176', '#D43953', '#E1AE3C', '#4C7BC9', '#00C176', '#D43953', '#E1AE3C', '#4C7BC9'], //颜色随动
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
onLoad(options) { //初始化加载
|
||||
this.baseurl = baseurl
|
||||
this.goodsCategory()
|
||||
},
|
||||
methods: {
|
||||
@ -41,14 +43,31 @@
|
||||
},
|
||||
//获取商城信息
|
||||
goodsCategory() {
|
||||
goodsCategoryList(this.pageSize, this.pageNum, ).then(res => {
|
||||
res.data.forEach(e => {
|
||||
e.goodsCatrgoryPicture = baseurl + e.goodsCatrgoryPicture
|
||||
goodsCategoryList(this.pageSize, this.pageNum).then(res => {
|
||||
res.rows.forEach(e => {
|
||||
this.goodsCategoryList.push(e)
|
||||
})
|
||||
this.goodsCategoryList = res.data
|
||||
this.total = res.total
|
||||
})
|
||||
}
|
||||
},
|
||||
onReachBottom() { //下滑加载
|
||||
if (this.goodsCategoryList.length >= this.total) {} else {
|
||||
this.pageNum++;
|
||||
this.goodsCategory()
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() { //下拉刷新
|
||||
// console.log('refresh');
|
||||
this.pageNum = 1;
|
||||
goodsCategoryList(this.pageSize, this.pageNum).then(res => {
|
||||
this.goodsCategoryList = res.rows
|
||||
this.total = res.total
|
||||
})
|
||||
setTimeout(function() {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
height: 200rpx;
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
top:28%;
|
||||
top: 28%;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
|
||||
@mixin vue-flex($direction: row) {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: $direction;
|
||||
/* #endif */
|
||||
}
|
||||
BIN
static/hdpi.png
Normal file
BIN
static/hdpi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
static/shopping.png
Normal file
BIN
static/shopping.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 314 KiB |
BIN
static/tpcs.png
BIN
static/tpcs.png
Binary file not shown.
|
Before Width: | Height: | Size: 437 KiB |
BIN
static/xhdpi.png
Normal file
BIN
static/xhdpi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
BIN
static/xxhdpi.png
Normal file
BIN
static/xxhdpi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 338 KiB |
Loading…
Reference in New Issue
Block a user