| @ -0,0 +1,133 @@ | |||||
| <!-- 优惠券弹窗 --> | |||||
| <template> | |||||
| <view class="couponPopup"> | |||||
| <uv-overlay :show="show" :z-index="999999"> | |||||
| <view class="couponPopup-wrapper"> | |||||
| <view class="main-container"> | |||||
| <view class="body"> | |||||
| <image src="@/pages_order/static/coupon/bg.png" mode="widthFix" class="coupon-bg"></image> | |||||
| <image @click="closeCouponPopup" src="@/pages_order/static/coupon/close-btn.png" mode="widthFix" | |||||
| class="close-btn"> | |||||
| </image> | |||||
| <view class="coupon-money"> | |||||
| <text class="unit">¥</text> | |||||
| <view class="money"> | |||||
| 20 | |||||
| </view> | |||||
| </view> | |||||
| <image src="@/pages_order/static/coupon/register-success.png" mode="widthFix" | |||||
| class="register-success"></image> | |||||
| <view class="shopping">(购物即可抵扣!)</view> | |||||
| </view> | |||||
| <image src="@/pages_order/static/coupon/examine.png" mode="widthFix" class="examine"></image> | |||||
| </view> | |||||
| </view> | |||||
| </uv-overlay> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: "CouponPopup", | |||||
| data() { | |||||
| return {} | |||||
| }, | |||||
| methods: { | |||||
| //关闭新人优惠券活动 | |||||
| closeCouponPopup() { | |||||
| this.show = false; | |||||
| } | |||||
| }, | |||||
| computed: { | |||||
| show: { | |||||
| get() { | |||||
| return this.value; | |||||
| }, | |||||
| set(newValue) { | |||||
| this.$emit('input', newValue); | |||||
| } | |||||
| } | |||||
| }, | |||||
| props: { | |||||
| value: { | |||||
| type: Boolean, | |||||
| default: false | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .couponPopup { | |||||
| .couponPopup-wrapper { | |||||
| width: 100%; | |||||
| height: 100vh; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| .main-container { | |||||
| .body { | |||||
| position: relative; | |||||
| .coupon-bg {} | |||||
| .close-btn { | |||||
| position: absolute; | |||||
| right: 0; | |||||
| top: 0; | |||||
| width: 50rpx; | |||||
| height: 50rpx; | |||||
| } | |||||
| .coupon-money { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: flex-end; | |||||
| position: absolute; | |||||
| left: 50%; | |||||
| top: 34%; | |||||
| width: 40%; | |||||
| color: #FF6733; | |||||
| transform: translateX(-30%); | |||||
| font-weight: bold; | |||||
| .unit { | |||||
| font-size: 40rpx; | |||||
| } | |||||
| .money { | |||||
| font-size: 120rpx; | |||||
| line-height: 120rpx; | |||||
| } | |||||
| } | |||||
| .register-success { | |||||
| position: absolute; | |||||
| top: 7%; | |||||
| left: 50%; | |||||
| transform: translateX(-50%); | |||||
| width: 80%; | |||||
| } | |||||
| .shopping { | |||||
| position: absolute; | |||||
| bottom: 5%; | |||||
| left: 50%; | |||||
| transform: translateX(-50%); | |||||
| color: #FEF3DD; | |||||
| text-align: center; | |||||
| font-size: 40rpx; | |||||
| width: 80%; | |||||
| } | |||||
| } | |||||
| .examine { | |||||
| display: block; | |||||
| width: 70%; | |||||
| margin: 20rpx auto; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -1,133 +1,130 @@ | |||||
| <template> | <template> | ||||
| <view class="list"> | <view class="list"> | ||||
| <view class="item" | |||||
| v-for="(item, index) in list" | |||||
| @click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)" | |||||
| :key="index"> | |||||
| <image | |||||
| class="image" | |||||
| :src="item.image && | |||||
| <view class="item" v-for="(item, index) in list" | |||||
| @click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)" :key="index"> | |||||
| <image class="image" :src="item.image && | |||||
| item.image.split(',')[0]" mode="aspectFill"></image> | item.image.split(',')[0]" mode="aspectFill"></image> | ||||
| <view class="info"> | |||||
| <view class="title"> | |||||
| <view class="product-info"> | |||||
| <view class="product-title"> | |||||
| {{ item.title }} | {{ item.title }} | ||||
| </view> | </view> | ||||
| <view style="display: flex;align-items: flex-end;"> | |||||
| <view class="price"> | |||||
| <text>¥{{ item.price }}</text>/件 | |||||
| </view> | |||||
| <view class="oldPrice"> | |||||
| <text>¥{{ item.oldPrice }}</text>/件 | |||||
| </view> | |||||
| </view> | |||||
| <!-- <view class="favorable"> | |||||
| <view class="t"> | |||||
| 限时优惠 | |||||
| <view class="product-main"> | |||||
| <view class="sale-information"> | |||||
| <view style="display: flex;align-items: flex-end;"> | |||||
| <view class="price"> | |||||
| <text>¥{{ item.price }}</text>/件 | |||||
| </view> | |||||
| <view class="oldPrice"> | |||||
| <text>¥{{ item.oldPrice }}</text>/件 | |||||
| </view> | |||||
| </view> | |||||
| <view class="num"> | |||||
| 已售卖5000+件 | |||||
| </view> | |||||
| </view> | </view> | ||||
| <view class="p"> | |||||
| ¥48 | |||||
| <view class="btn"> | |||||
| 购买 | |||||
| </view> | </view> | ||||
| </view> --> | |||||
| <view class="num"> | |||||
| 已售卖5000+件 | |||||
| </view> | </view> | ||||
| </view> | </view> | ||||
| <view class="btn"> | |||||
| 购买 | |||||
| <!-- <uv-icon name="shopping-cart" | |||||
| color="#fff"></uv-icon> --> | |||||
| </view> | |||||
| </view> | </view> | ||||
| </view> | </view> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| export default { | export default { | ||||
| name:"productList", | |||||
| props : { | |||||
| list : { | |||||
| default : [] | |||||
| name: "productList", | |||||
| props: { | |||||
| list: { | |||||
| default: [] | |||||
| }, | }, | ||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| }; | }; | ||||
| }, | }, | ||||
| methods : { | |||||
| methods: { | |||||
| }, | }, | ||||
| } | } | ||||
| </script> | </script> | ||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||
| .list{ | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| .item{ | |||||
| position: relative; | |||||
| width: 300rpx; | |||||
| padding: 20rpx; | |||||
| // padding-bottom: 50rpx; | |||||
| background-color: #fff; | |||||
| border-radius: 20rpx; | |||||
| margin-top: 20rpx; | |||||
| &:nth-child(odd){ | |||||
| margin-right: 20rpx; | |||||
| } | |||||
| .image{ | |||||
| width: 300rpx; | |||||
| height: 250rpx; | |||||
| .list { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| .item { | |||||
| position: relative; | |||||
| width: 345rpx; | |||||
| padding: 20rpx; | |||||
| box-sizing: border-box; | |||||
| background-color: #fff; | |||||
| border-radius: 20rpx; | border-radius: 20rpx; | ||||
| } | |||||
| .info{ | |||||
| font-size: 24rpx; | |||||
| .title{ | |||||
| font-size: 28rpx; | |||||
| overflow:hidden; //超出的文本隐藏 | |||||
| text-overflow:ellipsis; //溢出用省略号显示 | |||||
| white-space:nowrap; //溢出不换行 | |||||
| } | |||||
| .price{ | |||||
| color: $uni-color; | |||||
| margin-top: 6rpx; | |||||
| text{ | |||||
| font-size: 30rpx; | |||||
| font-weight: 900; | |||||
| } | |||||
| } | |||||
| .oldPrice{ | |||||
| color: #888; | |||||
| text-decoration: line-through; | |||||
| margin-left: 20rpx; | |||||
| .image { | |||||
| width: 300rpx; | |||||
| height: 250rpx; | |||||
| border-radius: 20rpx; | |||||
| } | } | ||||
| .favorable{ | |||||
| display: flex; | |||||
| background-image: url(/static/image/product/favorable.png); | |||||
| background-size: 100% 100%; | |||||
| width: fit-content; | |||||
| padding: 5rpx 10rpx; | |||||
| font-size: 18rpx; | |||||
| margin-top: 6rpx; | |||||
| .p{ | |||||
| color: #fff; | |||||
| margin-left: 10rpx; | |||||
| .product-info { | |||||
| font-size: 24rpx; | |||||
| .product-title {} | |||||
| .product-main { | |||||
| display: flex; | |||||
| .sale-information { | |||||
| width: 75%; | |||||
| .title { | |||||
| font-size: 28rpx; | |||||
| overflow: hidden; //超出的文本隐藏 | |||||
| text-overflow: ellipsis; //溢出用省略号显示 | |||||
| white-space: nowrap; //溢出不换行 | |||||
| } | |||||
| .price { | |||||
| color: $uni-color; | |||||
| margin-top: 6rpx; | |||||
| text { | |||||
| font-size: 30rpx; | |||||
| font-weight: 900; | |||||
| } | |||||
| } | |||||
| .oldPrice { | |||||
| color: #888; | |||||
| text-decoration: line-through; | |||||
| } | |||||
| .num { | |||||
| margin-top: 6rpx; | |||||
| font-size: 22rpx; | |||||
| color: #888; | |||||
| } | |||||
| } | |||||
| .btn { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| border-radius: 10rpx; | |||||
| font-size: 24rpx; | |||||
| height: 60rpx; | |||||
| width: 25%; | |||||
| color: #fff; | |||||
| background-color: $uni-color; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| .num{ | |||||
| margin-top: 6rpx; | |||||
| font-size: 22rpx; | |||||
| color: #888; | |||||
| } | |||||
| } | |||||
| .btn{ | |||||
| padding: 10rpx 20rpx; | |||||
| border-radius: 10rpx; | |||||
| font-size: 24rpx; | |||||
| color: #fff; | |||||
| margin-left: auto; | |||||
| width: fit-content; | |||||
| background-color: $uni-color; | |||||
| } | } | ||||
| } | } | ||||
| } | |||||
| </style> | </style> | ||||
| @ -0,0 +1,141 @@ | |||||
| <!-- 会员卡片页面 --> | |||||
| <template> | |||||
| <view class="member-card"> | |||||
| <!-- 导航栏 --> | |||||
| <navbar title="会员" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <!-- 会员列表 --> | |||||
| <view class="member-list"> | |||||
| <view v-for="item in memberList" :key="item.id" class="member-item"> | |||||
| <image :src="item.memberBg" mode="widthFix" class="member-image"></image> | |||||
| <view class="member-info"> | |||||
| <view class="profile-photo"> | |||||
| <image src="@/pages_order/static/card/profilePhoto.png" mode="widthFix" class="pro-img"></image> | |||||
| <view class="open-status"> | |||||
| 暂未开通 | |||||
| </view> | |||||
| </view> | |||||
| <view class="open"> | |||||
| 立即开通 | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 小会员列表 --> | |||||
| <view class="member-list-min"> | |||||
| <image v-for="item in minMemberList" :key="item.id" :src="item.icon" mode="heightFix" class="member-icon"></image> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: 'MenberCard', | |||||
| data() { | |||||
| return { | |||||
| memberList: [{ | |||||
| id: 1, | |||||
| memberBg: "/pages_order/static/card/diamond.png", | |||||
| }, | |||||
| { | |||||
| id: 2, | |||||
| memberBg: "/pages_order/static/card/gold.png", | |||||
| }, | |||||
| { | |||||
| id: 3, | |||||
| memberBg: "/pages_order/static/card/silver.png", | |||||
| } | |||||
| ], | |||||
| minMemberList: [{ | |||||
| id: 1, | |||||
| icon: "/pages_order/static/card/diamond-min.png", | |||||
| }, | |||||
| { | |||||
| id: 2, | |||||
| icon: "/pages_order/static/card/gold-min.png", | |||||
| }, | |||||
| { | |||||
| id: 3, | |||||
| icon: "/pages_order/static/card/sliver-min.png", | |||||
| } | |||||
| ] | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .member-card { | |||||
| background: white; | |||||
| min-height: 100vh; | |||||
| // 会员列表 | |||||
| .member-list { | |||||
| padding: 20rpx; | |||||
| box-sizing: border-box; | |||||
| .member-item { | |||||
| position: relative; | |||||
| .member-image { | |||||
| width: 100%; | |||||
| } | |||||
| .member-info { | |||||
| position: absolute; | |||||
| bottom: 30rpx; | |||||
| left: 0rpx; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 0rpx 40rpx; | |||||
| box-sizing: border-box; | |||||
| width: 100%; | |||||
| .profile-photo { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| .pro-img { | |||||
| width: 60rpx; | |||||
| height: 60rpx; | |||||
| } | |||||
| .open-status { | |||||
| color: #F8A95F; | |||||
| border: 1px solid #F8A95F; | |||||
| border-radius: 30rpx; | |||||
| padding: 7rpx 20rpx; | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| } | |||||
| .open { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| background: #F8A95F; | |||||
| color: white; | |||||
| border-radius: 30rpx; | |||||
| padding: 7rpx 20rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| // 小会员列表 | |||||
| .member-list-min { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| padding: 0rpx 20rpx; | |||||
| box-sizing: border-box; | |||||
| margin: 20rpx 0rpx 0rpx 0rpx; | |||||
| .member-icon { | |||||
| height: 80rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -0,0 +1,406 @@ | |||||
| <!-- 会员中心页面 --> | |||||
| <template> | |||||
| <view class="member-center"> | |||||
| <!-- 导航栏 --> | |||||
| <navbar title="会员中心" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <!-- 会员卡片 --> | |||||
| <swiper :slides-per-view="3" :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange"> | |||||
| <swiper-slide v-for="item in memberList" :key="item.id" class="member-item"> | |||||
| <image :src="item.memberBg" mode="widthFix" class="member-image"></image> | |||||
| <view class="member-info"> | |||||
| <view class="profile-photo"> | |||||
| <image src="@/pages_order/static/card/profilePhoto.png" mode="widthFix" class="pro-img"> | |||||
| </image> | |||||
| <view class="open-status"> | |||||
| 暂未开通 | |||||
| </view> | |||||
| </view> | |||||
| <view class="open"> | |||||
| 立即开通 | |||||
| </view> | |||||
| </view> | |||||
| </swiper-slide> | |||||
| </swiper> | |||||
| <!-- 充值套餐 --> | |||||
| <view class="top-up-package"> | |||||
| <view class="title"> | |||||
| 充值套餐 | |||||
| </view> | |||||
| <view class="set-meal-list"> | |||||
| <view v-for="item in cardList" :key="item.id" :class="{'active-set-meal-item' : item.id == 1}" | |||||
| class="set-meal-item"> | |||||
| <view class="card-tag"> | |||||
| 限时折扣 | |||||
| </view> | |||||
| <view class="card-title">{{ item.title }}</view> | |||||
| <view class="money"> | |||||
| <text class="unit">¥</text>{{ item.money }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="member-descript"> | |||||
| (不同会员等级商品价格不一样,可以设置给与推荐人佣金。) | |||||
| </view> | |||||
| </view> | |||||
| <!-- 会员权益 --> | |||||
| <view class="member-equity-title"> | |||||
| <image src="@/pages_order/static/memberCenter/equity.png" mode="widthFix" class="eqyity-img"></image> | |||||
| </view> | |||||
| <view class="equity-card-list"> | |||||
| <view v-for="(item,index) in equityList" :key="item.id" class="equity-card"> | |||||
| <view class="equity-title">{{ item.title }}</view> | |||||
| <view class="equity-descript-list"> | |||||
| <view class="equity-descript-icon"> | |||||
| <image :src="item.icon" mode="widthFix" class="equity-descript-img"></image> | |||||
| </view> | |||||
| <view v-for="(litem,lindex) in item.list" :key="lindex" class="equity-descript-item"> | |||||
| <view class="num"> | |||||
| {{ lindex + 1 }} | |||||
| </view> | |||||
| <view class="content"> | |||||
| {{ litem }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import { | |||||
| Swiper, | |||||
| SwiperSlide | |||||
| } from 'vue-awesome-swiper' | |||||
| import 'swiper/css/swiper.css' | |||||
| export default { | |||||
| name: "MemberCenter", | |||||
| data() { | |||||
| return { | |||||
| memberList: [{ | |||||
| id: 1, | |||||
| memberBg: "/pages_order/static/card/diamond.png", | |||||
| }, | |||||
| { | |||||
| id: 2, | |||||
| memberBg: "/pages_order/static/card/gold.png", | |||||
| }, | |||||
| { | |||||
| id: 3, | |||||
| memberBg: "/pages_order/static/card/silver.png", | |||||
| } | |||||
| ], | |||||
| list: [ | |||||
| 'https://cdn.uviewui.com/uview/swiper/swiper3.png', | |||||
| 'https://cdn.uviewui.com/uview/swiper/swiper2.png', | |||||
| 'https://cdn.uviewui.com/uview/swiper/swiper1.png' | |||||
| ], | |||||
| memberList: [{ | |||||
| id: 1, | |||||
| memberBg: "/pages_order/static/card/diamond.png", | |||||
| }, | |||||
| { | |||||
| id: 2, | |||||
| memberBg: "/pages_order/static/card/gold.png", | |||||
| }, | |||||
| { | |||||
| id: 3, | |||||
| memberBg: "/pages_order/static/card/silver.png", | |||||
| } | |||||
| ], | |||||
| cardList: [{ | |||||
| id: 1, | |||||
| title: "金卡", | |||||
| money: "39" | |||||
| }, | |||||
| { | |||||
| id: 2, | |||||
| title: "银卡", | |||||
| money: "29" | |||||
| }, | |||||
| { | |||||
| id: 3, | |||||
| title: "钻石卡", | |||||
| money: "99" | |||||
| } | |||||
| ], | |||||
| equityList: [{ | |||||
| id: 1, | |||||
| title: "权益1·专属推广码", | |||||
| icon: "/pages_order/static/memberCenter/descript1.png", | |||||
| list: [ | |||||
| "购买会员卡或者购物金额满500元!有专属推广码。", | |||||
| "显示直推,间推人员信息及下单佣金明细。" | |||||
| ] | |||||
| }, | |||||
| { | |||||
| id: 2, | |||||
| title: "权益2·直推奖励", | |||||
| icon: "/pages_order/static/memberCenter/descript2.png", | |||||
| list: [ | |||||
| "通过扫专属推广码进来的用户下单,享受30%的直推奖励!(比例可调)", | |||||
| "显示直推,间推人员信息及下单佣金明细。" | |||||
| ] | |||||
| }, | |||||
| { | |||||
| id: 3, | |||||
| title: "权益3·间推奖励", | |||||
| icon: "/pages_order/static/memberCenter/descript1.png", | |||||
| list: [ | |||||
| "下级发展的用户下单,享受20%的间推奖励!(比例可调)", | |||||
| ] | |||||
| }, | |||||
| { | |||||
| id: 4, | |||||
| title: "权益4·会员等级奖励", | |||||
| icon: "/pages_order/static/memberCenter/descript2.png", | |||||
| list: [ | |||||
| "银,金,钻不同会员等级,同一个商品分佣比例不一样,等级越高,佣金比例越高!" | |||||
| ] | |||||
| } | |||||
| ] | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .member-center { | |||||
| //会员卡片 | |||||
| .member-image { | |||||
| width: 100%; | |||||
| } | |||||
| .member-info { | |||||
| position: absolute; | |||||
| bottom: 30rpx; | |||||
| left: 0rpx; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 0rpx 40rpx; | |||||
| box-sizing: border-box; | |||||
| width: 100%; | |||||
| .profile-photo { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| .pro-img { | |||||
| width: 60rpx; | |||||
| height: 60rpx; | |||||
| } | |||||
| .open-status { | |||||
| color: #F8A95F; | |||||
| border: 1px solid #F8A95F; | |||||
| border-radius: 30rpx; | |||||
| padding: 7rpx 20rpx; | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| } | |||||
| .open { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| background: #F8A95F; | |||||
| color: white; | |||||
| border-radius: 30rpx; | |||||
| padding: 7rpx 20rpx; | |||||
| } | |||||
| } | |||||
| // 充值套餐 | |||||
| .top-up-package { | |||||
| padding: 0rpx 20rpx; | |||||
| box-sizing: border-box; | |||||
| .title { | |||||
| font-size: 36rpx; | |||||
| font-weight: bold; | |||||
| margin-top: 30rpx; | |||||
| } | |||||
| .set-meal-list { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| margin-top: 20rpx; | |||||
| .set-meal-item { | |||||
| position: relative; | |||||
| width: 30%; | |||||
| margin-right: calc(9% / 2); | |||||
| border-radius: 10rpx; | |||||
| overflow: hidden; | |||||
| box-sizing: border-box; | |||||
| background: white; | |||||
| margin-bottom: 20rpx; | |||||
| padding: 40rpx; | |||||
| &:nth-child(3n) { | |||||
| margin-right: 0rpx; | |||||
| } | |||||
| .card-tag { | |||||
| position: absolute; | |||||
| left: 0; | |||||
| top: 0; | |||||
| background: #FF9633; | |||||
| border-bottom-right-radius: 10rpx; | |||||
| color: white; | |||||
| padding: 5rpx 10rpx; | |||||
| font-size: 20rpx; | |||||
| } | |||||
| .card-title { | |||||
| text-align: center; | |||||
| font-size: 38rpx; | |||||
| font-weight: bold; | |||||
| } | |||||
| .money { | |||||
| color: #FF9633; | |||||
| font-size: 30rpx; | |||||
| text-align: center; | |||||
| .unit {} | |||||
| } | |||||
| } | |||||
| .active-set-meal-item { | |||||
| border: 2rpx solid #FF9633; | |||||
| background: #FFF5EB; | |||||
| } | |||||
| } | |||||
| .member-descript { | |||||
| font-size: 24rpx; | |||||
| color: #333333; | |||||
| text-align: center; | |||||
| } | |||||
| } | |||||
| // 会员权益 | |||||
| .member-equity-title { | |||||
| margin: 30rpx 0rpx; | |||||
| padding: 0rpx 20rpx; | |||||
| box-sizing: border-box; | |||||
| .eqyity-img { | |||||
| width: 240rpx; | |||||
| } | |||||
| } | |||||
| .equity-card-list { | |||||
| padding: 0rpx 20rpx; | |||||
| box-sizing: border-box; | |||||
| .equity-card { | |||||
| background: white; | |||||
| border-radius: 10rpx; | |||||
| margin-bottom: 40rpx; | |||||
| padding: 20rpx; | |||||
| box-sizing: border-box; | |||||
| .equity-title { | |||||
| color: #F18F09; | |||||
| font-size: 28rpx; | |||||
| font-weight: bold; | |||||
| } | |||||
| .equity-descript-list { | |||||
| position: relative; | |||||
| .equity-descript-icon { | |||||
| .equity-descript-img { | |||||
| width: 150rpx; | |||||
| } | |||||
| } | |||||
| .equity-descript-item { | |||||
| position: relative; | |||||
| background: #FDF9EF; | |||||
| border-radius: 10rpx; | |||||
| border: 1px solid #F7C47B; | |||||
| margin: 20rpx 0rpx; | |||||
| padding: 20rpx; | |||||
| box-sizing: border-box; | |||||
| color: #BA7E2B; | |||||
| font-size: 24rpx; | |||||
| .num { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| position: absolute; | |||||
| top: -15rpx; | |||||
| left: -15rpx; | |||||
| width: 30rpx; | |||||
| height: 30rpx; | |||||
| border-radius: 50%; | |||||
| background: #F18F09; | |||||
| border: 2px solid #F8CB8E; | |||||
| box-sizing: border-box; | |||||
| color: white; | |||||
| font-size: 24rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| &:nth-child(1) { | |||||
| .equity-descript-list { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| flex-wrap: wrap; | |||||
| .equity-descript-icon { | |||||
| position: absolute; | |||||
| bottom: 100%; | |||||
| right: 0rpx; | |||||
| z-index: 200; | |||||
| } | |||||
| .equity-descript-item { | |||||
| width: 49%; | |||||
| } | |||||
| } | |||||
| } | |||||
| &:nth-child(2) { | |||||
| .equity-descript-icon { | |||||
| position: absolute; | |||||
| bottom: -10%; | |||||
| right: 0rpx; | |||||
| z-index: 200; | |||||
| } | |||||
| .equity-descript-item { | |||||
| &:nth-child(3) { | |||||
| width: calc(100% - 160rpx); | |||||
| margin-right: 10rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| &:nth-child(3), | |||||
| &:nth-child(4) { | |||||
| .equity-descript-icon { | |||||
| position: absolute; | |||||
| bottom: 100%; | |||||
| right: 0rpx; | |||||
| z-index: 200; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -0,0 +1,119 @@ | |||||
| <!-- 更多商品 --> | |||||
| <template> | |||||
| <view class="more-commodity"> | |||||
| <!-- 导航栏 --> | |||||
| <navbar title="商品" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <view class="more-commodity-header"> | |||||
| <!-- 搜索栏 --> | |||||
| <view class="search"> | |||||
| <uv-search placeholder="搜你喜欢的产品" bgColor="#fff" @search="getData" @custom="getData" | |||||
| v-model="queryParams.title"></uv-search> | |||||
| </view> | |||||
| <!-- 筛选过滤 --> | |||||
| <view class="filtration"> | |||||
| <view v-for="(item,index) in filtrationList" :key="index" | |||||
| :class="{ 'filtration-acitve-item' : activeFiltration == index }" @click="changeFiltration(index)" | |||||
| class="filtration-item"> | |||||
| {{ item }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 商品列表 --> | |||||
| <view class="product-list"> | |||||
| <productList :list="commodiryList" /> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import productList from '@/components/user/productList.vue' | |||||
| export default { | |||||
| name: "MoreCommodity", | |||||
| components: { | |||||
| productList | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| filtrationList: ['综合', '销量', '价格', '上新'], | |||||
| activeFiltration: 0, | |||||
| commodiryList: [] | |||||
| } | |||||
| }, | |||||
| onShow() { | |||||
| this.getRiceCommonProductList(); | |||||
| }, | |||||
| methods: { | |||||
| //修改过滤条件 | |||||
| changeFiltration(index) { | |||||
| this.activeFiltration = index; | |||||
| //重新获取数据逻辑 | |||||
| }, | |||||
| // 获取常规产品 | |||||
| getRiceCommonProductList() { | |||||
| this.$api('getRiceCommonProductList', res => { | |||||
| uni.stopPullDownRefresh() | |||||
| if (res.code == 200) { | |||||
| this.commodiryList = res.result | |||||
| } | |||||
| }) | |||||
| }, | |||||
| //搜索 | |||||
| getData() { | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .more-commodity { | |||||
| .more-commodity-header { | |||||
| background: white; | |||||
| padding: 20rpx; | |||||
| // 搜索栏 | |||||
| .search { | |||||
| border: 1px solid #F0F0F0; | |||||
| border-radius: 41rpx; | |||||
| padding: 10rpx 20rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| /deep/ .uv-search__action { | |||||
| background-color: $uni-color; | |||||
| color: #FFFFFF; | |||||
| padding: 10rpx 20rpx; | |||||
| border-radius: 30rpx; | |||||
| } | |||||
| } | |||||
| // 筛选过滤 | |||||
| .filtration { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 30rpx 20rpx; | |||||
| .filtration-item { | |||||
| font-size: 36rpx; | |||||
| } | |||||
| .filtration-acitve-item { | |||||
| color: $uni-color; | |||||
| } | |||||
| } | |||||
| } | |||||
| // 商品列表 | |||||
| .product-list { | |||||
| padding-top: 20rpx; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -0,0 +1,270 @@ | |||||
| <!-- 合伙人页面 --> | |||||
| <template> | |||||
| <view class="partner"> | |||||
| <!-- 导航栏 --> | |||||
| <navbar title="合伙人" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <!-- 合伙人信息 --> | |||||
| <view class="partner-info-bg"> | |||||
| <view class="partner-info"> | |||||
| <view class="profile-photo"> | |||||
| <image src="@/pages_order/static/card/profilePhoto.png" mode="widthFix" class="pro-img"></image> | |||||
| </view> | |||||
| <view class="performance-information"> | |||||
| <view class="user-info-base"> | |||||
| <view class="username">18200000000</view> | |||||
| <view class="user-tag">合伙人</view> | |||||
| </view> | |||||
| <view class="live-performance"> | |||||
| <view class="live-performance-money"> | |||||
| <view class="live-tag"> | |||||
| 直推及间推业绩 | |||||
| </view> | |||||
| <view class="money"> | |||||
| <text class="unit">¥</text>666 | |||||
| </view> | |||||
| </view> | |||||
| <view class="withdraw"> | |||||
| <view class="btn"> | |||||
| 去提现 | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="tabs"> | |||||
| <uv-tabs :list="tabList" @click="click"></uv-tabs> | |||||
| </view> | |||||
| <!-- 佣金列表 --> | |||||
| <view class="brokerage-list"> | |||||
| <view v-for="item in 10" :key="item" class="brokerage-item"> | |||||
| <view class="brokerage-user"> | |||||
| <image src="@/pages_order/static/card/profilePhoto.png" mode="widthFix" class="pro-img"></image> | |||||
| <view class="name-time"> | |||||
| <view class="name"> | |||||
| 用户138xxxxxxxx | |||||
| </view> | |||||
| <view class="time"> | |||||
| 已加入平台120天 | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="brokerage-money"> | |||||
| <view class="order-money"> | |||||
| 下单量: <text>666</text> | |||||
| </view> | |||||
| <text>|</text> | |||||
| <view class="money"> | |||||
| 佣金:<text>666元</text> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: "Partner", | |||||
| data() { | |||||
| return { | |||||
| tabList: [{ | |||||
| name: '直推用户' | |||||
| }, | |||||
| { | |||||
| name: '间推用户' | |||||
| } | |||||
| ] | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .partner { | |||||
| // 合伙人信息 | |||||
| .partner-info-bg { | |||||
| background: $uni-color; | |||||
| padding: 60rpx 0rpx; | |||||
| .partner-info { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| background: white; | |||||
| border-radius: 20rpx; | |||||
| box-sizing: border-box; | |||||
| padding: 20rpx; | |||||
| width: 90%; | |||||
| margin: 0rpx auto; | |||||
| .profile-photo { | |||||
| width: 25%; | |||||
| .pro-img { | |||||
| width: 100%; | |||||
| aspect-ratio: 1, 1; | |||||
| } | |||||
| } | |||||
| .performance-information { | |||||
| width: 75%; | |||||
| padding: 0rpx 20rpx; | |||||
| box-sizing: border-box; | |||||
| .user-info-base { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| align-items: center; | |||||
| border-bottom: 2px dashed $uni-color; | |||||
| padding: 20rpx 0rpx; | |||||
| .username { | |||||
| font-size: 36rpx; | |||||
| } | |||||
| .user-tag { | |||||
| background: black; | |||||
| color: white; | |||||
| margin-left: 20rpx; | |||||
| border-radius: 20rpx; | |||||
| padding: 3rpx 10rpx; | |||||
| font-size: 28rpx; | |||||
| } | |||||
| } | |||||
| .live-performance { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| padding: 20rpx 0rpx; | |||||
| box-sizing: border-box; | |||||
| .live-performance-money { | |||||
| width: 50%; | |||||
| .live-tag { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| background: #F99F9F; | |||||
| color: #DC2828; | |||||
| border-radius: 40rpx; | |||||
| font-weight: bold; | |||||
| font-size: 28rpx; | |||||
| padding: 10rpx 0rpx; | |||||
| } | |||||
| .money { | |||||
| font-size: 45rpx; | |||||
| color: $uni-color; | |||||
| font-weight: bold; | |||||
| .unit { | |||||
| font-size: 32rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| .withdraw { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| align-items: flex-end; | |||||
| width: 50%; | |||||
| .btn { | |||||
| width: 90%; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| background: #DC2828; | |||||
| color: white; | |||||
| border-radius: 40rpx; | |||||
| padding: 20rpx 0rpx; | |||||
| font-weight: bold; | |||||
| font-size: 32rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .tabs { | |||||
| background: white; | |||||
| } | |||||
| // 佣金列表 | |||||
| .brokerage-list { | |||||
| padding: 0rpx 20rpx; | |||||
| .brokerage-item { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| flex-wrap: wrap; | |||||
| background: white; | |||||
| margin: 20rpx 0rpx; | |||||
| border-radius: 20rpx; | |||||
| padding: 20rpx; | |||||
| box-sizing: border-box; | |||||
| .brokerage-user { | |||||
| width: 50%; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| flex-wrap: wrap; | |||||
| .pro-img { | |||||
| width: 100rpx; | |||||
| height: 100rpx; | |||||
| } | |||||
| .name-time { | |||||
| width: calc(100% - 100rpx); | |||||
| padding: 0rpx 20rpx; | |||||
| box-sizing: border-box; | |||||
| .name { | |||||
| font-size: 32rpx; | |||||
| white-space: nowrap; | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| } | |||||
| .time { | |||||
| color: #999999; | |||||
| font-size: 26rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| .brokerage-money { | |||||
| width: 50%; | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| justify-content: space-between; | |||||
| .order-money { | |||||
| text { | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| } | |||||
| .money { | |||||
| text { | |||||
| color: #FEB814; | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -1,89 +0,0 @@ | |||||
| <template> | |||||
| <view class="page"> | |||||
| <navbar title="推广明细" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <view class="top"> | |||||
| <view class="top-text"> | |||||
| <view>{{ total }}</view> | |||||
| <view>直推人数</view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="cell"> | |||||
| <view class="cell-top">推广明细</view> | |||||
| <view class="cell-box" | |||||
| :key="index" | |||||
| v-for="(item,index) in list"> | |||||
| <uv-cell-group> | |||||
| <uv-cell | |||||
| :title="item.nickName" | |||||
| :label="item.createTime" | |||||
| :center="true"> | |||||
| <template #value> | |||||
| <text style="font-weight: 600; font-size: 28rpx;"> | |||||
| {{ vipType[item.isPay] }} | |||||
| </text> | |||||
| </template> | |||||
| </uv-cell> | |||||
| </uv-cell-group> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import mixinsList from '@/mixins/list.js' | |||||
| export default { | |||||
| mixins : [mixinsList], | |||||
| data() { | |||||
| return { | |||||
| mixinsListApi : 'getFansPageList', | |||||
| vipType : ['普通会员', '黄金会员', '渠道商'], | |||||
| } | |||||
| }, | |||||
| onLoad(e) {}, | |||||
| methods: { | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .page { | |||||
| background-color: #F3F3F3; | |||||
| height: 100vh; | |||||
| .top { | |||||
| display: flex; | |||||
| height: 400rpx; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| color: #474747; | |||||
| .top-text { | |||||
| text-align: center; | |||||
| view:nth-child(1) { | |||||
| font-size: 78rpx; | |||||
| font-weight: 600; | |||||
| } | |||||
| view:nth-child(2) { | |||||
| font-size: 28rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| .cell { | |||||
| margin: 20rpx; | |||||
| background-color: #FFFFFF; | |||||
| border-radius: 16rpx; | |||||
| .cell-top { | |||||
| padding: 40rpx 34rpx; | |||||
| color: #474747; | |||||
| font-size: 34rpx; | |||||
| font-weight: 600; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -1,162 +0,0 @@ | |||||
| <template> | |||||
| <view class="page"> | |||||
| <navbar title="推广明细" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <view class="search"> | |||||
| <uv-search | |||||
| placeholder="会员ID/昵称" | |||||
| bgColor="#fff" | |||||
| @search="getData" | |||||
| @custom="getData" | |||||
| v-model="queryParams.title"></uv-search> | |||||
| </view> | |||||
| <view class="top"> | |||||
| <view class="top-text"> | |||||
| <view>{{ total }}</view> | |||||
| <view>直推人数</view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="cell"> | |||||
| <!-- <view class="cell-top">推广明细</view> --> | |||||
| <view class="cell-box" | |||||
| :key="index" | |||||
| v-for="(item,index) in list"> | |||||
| <view class="headImage"> | |||||
| <image :src="item.headImage" mode="aspectFill"></image> | |||||
| </view> | |||||
| <view class="info"> | |||||
| <view | |||||
| style="width: 300rpx;"> | |||||
| <text>昵称:</text> | |||||
| {{ item.nickName }} | |||||
| </view> | |||||
| <view style="display: flex;align-items: center;" | |||||
| @click="$utils.copyText(item.shareId)"> | |||||
| <text>上级ID:</text> | |||||
| {{ item.shareId && item.shareId.substring(0, 8) }}... | |||||
| <uv-icon name="empty-news" color="#aaa" size="40"></uv-icon> | |||||
| </view> | |||||
| </view> | |||||
| <view class="info"> | |||||
| <view class=""> | |||||
| <text>级别:</text> | |||||
| 直属下级 | |||||
| </view> | |||||
| <view class=""> | |||||
| <text>时间:</text> | |||||
| {{ $dayjs(item.createTime).format('YYYY-MM-DD') }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import mixinsList from '@/mixins/list.js' | |||||
| export default { | |||||
| mixins : [mixinsList], | |||||
| data() { | |||||
| return { | |||||
| mixinsListApi : 'getFansPageList', | |||||
| vipType : ['普通会员', '黄金会员', '渠道商'], | |||||
| } | |||||
| }, | |||||
| onLoad(e) { | |||||
| // this.queryParams.xxx = id | |||||
| }, | |||||
| methods: { | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .page { | |||||
| background-color: #F3F3F3; | |||||
| height: 100vh; | |||||
| .search { | |||||
| position: relative; | |||||
| background: #FFFFFF; | |||||
| margin: 20rpx; | |||||
| border-radius: 41rpx; | |||||
| padding: 10rpx 20rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| /deep/ .uv-search__action { | |||||
| background-color: $uni-color; | |||||
| color: #FFFFFF; | |||||
| padding: 10rpx 20rpx; | |||||
| border-radius: 30rpx; | |||||
| } | |||||
| } | |||||
| .top { | |||||
| display: flex; | |||||
| height: 200rpx; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| color: #474747; | |||||
| .top-text { | |||||
| text-align: center; | |||||
| view:nth-child(1) { | |||||
| font-size: 78rpx; | |||||
| font-weight: 600; | |||||
| } | |||||
| view:nth-child(2) { | |||||
| font-size: 28rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| .cell { | |||||
| .cell-box{ | |||||
| border-radius: 16rpx; | |||||
| margin: 20rpx; | |||||
| background-color: #FFFFFF; | |||||
| padding: 20rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| .headImage{ | |||||
| width: 120rpx; | |||||
| height: 120rpx; | |||||
| margin-right: 20rpx; | |||||
| flex-shrink: 0; | |||||
| image{ | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| border-radius: 50%; | |||||
| } | |||||
| } | |||||
| .info{ | |||||
| flex: 1; | |||||
| font-size: 22rpx; | |||||
| flex-shrink: 0; | |||||
| view{ | |||||
| width: 240rpx; | |||||
| overflow:hidden; //超出的文本隐藏 | |||||
| text-overflow:ellipsis; //溢出用省略号显示 | |||||
| white-space:nowrap; //溢出不换行 | |||||
| } | |||||
| text{ | |||||
| font-weight: 900; | |||||
| color: #474747; | |||||
| } | |||||
| } | |||||
| } | |||||
| .cell-top { | |||||
| padding: 40rpx 34rpx; | |||||
| color: #474747; | |||||
| font-size: 34rpx; | |||||
| font-weight: 600; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -0,0 +1,177 @@ | |||||
| <!-- 合伙人招募令页面 --> | |||||
| <template> | |||||
| <view class="recruit"> | |||||
| <!-- 导航栏 --> | |||||
| <navbar title="合伙人" leftClick @leftClick="$utils.navigateBack" /> | |||||
| <view class="b-relative" style="width: 710rpx;margin: 20rpx;"> | |||||
| <image src="@/pages_order/static/recruit/bg.png" style="width: 710rpx;height: 310rpx;"></image> | |||||
| </view> | |||||
| <view class="item-card"> | |||||
| <view class="item-line"> | |||||
| <view class="before"></view> | |||||
| <view class="label">合伙人</view> | |||||
| </view> | |||||
| <view class="item-line"> | |||||
| <view class="label">您的姓名</view> | |||||
| <input placeholder="请输入姓名" v-model="partnership.name" /> | |||||
| </view> | |||||
| <view class="item-line"> | |||||
| <view class="label">联系方式</view> | |||||
| <input placeholder="请输入联系方式" v-model="partnership.phone" /> | |||||
| </view> | |||||
| <view class="item-line"> | |||||
| <view class="label">所在地区</view> | |||||
| <input placeholder="请输入所在地区" v-model="partnership.city" /> | |||||
| </view> | |||||
| <view class="item-line"> | |||||
| <view class="label">详细地址</view> | |||||
| <textarea v-model="partnership.detailAddress" placeholder="请输入详细地址"></textarea> | |||||
| </view> | |||||
| </view> | |||||
| <view class="b-fiexd"> | |||||
| <view @click="addOrUpdateMsgTer" class="button-submit">提交</view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: "Recruit", | |||||
| data() { | |||||
| return { | |||||
| partnership: { | |||||
| name: "", | |||||
| phone: "", | |||||
| city: "", | |||||
| detailAddress: "" | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .recruit { | |||||
| .item-card { | |||||
| width: calc(710rpx - 40rpx); | |||||
| height: auto; | |||||
| background: #ffffff; | |||||
| border-radius: 16rpx; | |||||
| margin: 40rpx auto 20rpx; | |||||
| padding: 40rpx 20rpx; | |||||
| } | |||||
| .item-line { | |||||
| display: flex; | |||||
| height: 60rpx; | |||||
| font-size: 28rpx; | |||||
| font-family: PingFang SC, PingFang SC-Bold; | |||||
| font-weight: 700; | |||||
| text-align: left; | |||||
| color: #333333; | |||||
| margin-bottom: 40rpx; | |||||
| &:nth-child(1) { | |||||
| margin-bottom: 0rpx; | |||||
| .label { | |||||
| font-size: 36rpx; | |||||
| } | |||||
| } | |||||
| &:last-child { | |||||
| margin-bottom: 0rpx; | |||||
| height: auto; | |||||
| } | |||||
| } | |||||
| .item-line .before { | |||||
| content: ""; | |||||
| width: 8rpx; | |||||
| height: 30rpx; | |||||
| background: $uni-color; | |||||
| border-radius: 4rpx; | |||||
| margin-right: 10rpx; | |||||
| margin-top: 15rpx; | |||||
| } | |||||
| .item-line .label { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| width: 152rpx; | |||||
| height: 60rpx; | |||||
| } | |||||
| .item-line input, | |||||
| .item-line textarea { | |||||
| width: 90%; | |||||
| height: 60rpx; | |||||
| line-height: 60rpx; | |||||
| background: #f5f5f5; | |||||
| border-radius: 12rpx; | |||||
| font-size: 24rpx; | |||||
| font-family: PingFang SC, PingFang SC-Medium; | |||||
| font-weight: 500; | |||||
| text-align: left; | |||||
| color: #939393; | |||||
| padding: 0 20rpx; | |||||
| } | |||||
| .item-line textarea { | |||||
| height: 120rpx; | |||||
| padding: 10rpx; | |||||
| } | |||||
| .upload { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 200rpx; | |||||
| height: 200rpx; | |||||
| background: rgba(245, 245, 245, 0.82); | |||||
| border: 2rpx dashed #99dcd0; | |||||
| border-radius: 16rpx; | |||||
| margin: 10rpx 12rpx; | |||||
| } | |||||
| .upload-img { | |||||
| width: calc(100% - 4rpx); | |||||
| height: calc(100% - 4rpx); | |||||
| border: 2rpx dashed #ccc; | |||||
| margin: 2rpx; | |||||
| } | |||||
| .b-fiexd { | |||||
| position: fixed; | |||||
| left: 0; | |||||
| bottom: 0; | |||||
| width: 100%; | |||||
| .button-submit { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 596rpx; | |||||
| height: 90rpx; | |||||
| background: #E3441A; | |||||
| border-radius: 46rpx; | |||||
| margin: 20rpx auto; | |||||
| font-size: 28rpx; | |||||
| font-family: PingFang SC, PingFang SC-Regular; | |||||
| font-weight: 400; | |||||
| text-align: center; | |||||
| color: #ffffff; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @ -1 +0,0 @@ | |||||
| <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726157567630" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6220" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M513.536 628.6336c101.6832 0 280.8832 38.7072 310.8864 193.7408 77.5168-77.5168 124.928-185.9584 124.928-305.0496 0-241.152-194.6624-435.8144-435.8144-435.8144S77.7216 277.0944 77.7216 517.2224c0 119.0912 47.4112 227.6352 124.928 306.0736 30.0032-154.9312 209.2032-194.6624 310.8864-194.6624z m0-439.7056c112.3328 0 204.3904 91.0336 204.3904 204.3904 0 112.3328-91.0336 204.3904-204.3904 204.3904a203.776 203.776 0 0 1-204.3904-204.3904c0.1024-112.4352 92.0576-204.3904 204.3904-204.3904z m0 0" fill="#cdcdcd" p-id="6221"></path><path d="M515.4816 1006.8992c-65.8432 0-129.8432-12.9024-189.952-38.4-58.1632-24.576-110.2848-59.8016-155.136-104.5504A485.56032 485.56032 0 0 1 65.8432 708.8128c-25.6-60.2112-38.5024-124.1088-38.5024-189.952 0-65.8432 12.9024-129.8432 38.4-189.952 24.576-58.1632 59.8016-110.2848 104.5504-155.136 44.8512-44.8512 96.9728-79.9744 155.136-104.5504C385.6384 43.6224 449.536 30.72 515.4816 30.72c65.8432 0 129.8432 12.9024 189.952 38.4 58.1632 24.576 110.2848 59.8016 155.136 104.5504 44.8512 44.8512 79.9744 96.9728 104.5504 155.136C990.6176 389.0176 1003.52 452.9152 1003.52 518.8608c0 65.8432-12.9024 129.8432-38.4 189.952-24.576 58.1632-59.8016 110.2848-104.5504 155.136a485.56032 485.56032 0 0 1-155.136 104.5504 484.39296 484.39296 0 0 1-189.952 38.4z m0-936.8576c-60.6208 0-119.3984 11.8784-174.6944 35.2256a447.76448 447.76448 0 0 0-142.6432 96.1536A444.42624 444.42624 0 0 0 101.9904 344.064a446.70976 446.70976 0 0 0-35.2256 174.6944c0 60.6208 11.8784 119.3984 35.2256 174.6944 22.6304 53.4528 54.9888 101.4784 96.1536 142.6432 41.1648 41.2672 89.1904 73.6256 142.6432 96.1536 55.296 23.3472 114.0736 35.2256 174.6944 35.2256 60.6208 0 119.3984-11.8784 174.6944-35.2256 53.4528-22.6304 101.4784-54.9888 142.6432-96.1536 41.2672-41.1648 73.6256-89.1904 96.1536-142.6432 23.3472-55.296 35.2256-114.0736 35.2256-174.6944 0-60.6208-11.8784-119.3984-35.2256-174.6944a447.76448 447.76448 0 0 0-96.1536-142.6432 444.42624 444.42624 0 0 0-142.6432-96.1536 447.44704 447.44704 0 0 0-174.6944-35.2256z m0 0" fill="#cdcdcd" p-id="6222"></path></svg> | |||||
| @ -0,0 +1,8 @@ | |||||
| ## 1.0.3(2022-01-21) | |||||
| - 优化 组件示例 | |||||
| ## 1.0.2(2021-11-22) | |||||
| - 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 | |||||
| ## 1.0.1(2021-11-22) | |||||
| - 修复 vue3中scss语法兼容问题 | |||||
| ## 1.0.0(2021-11-18) | |||||
| - init | |||||
| @ -0,0 +1 @@ | |||||
| @import './styles/index.scss'; | |||||
| @ -0,0 +1,82 @@ | |||||
| { | |||||
| "id": "uni-scss", | |||||
| "displayName": "uni-scss 辅助样式", | |||||
| "version": "1.0.3", | |||||
| "description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。", | |||||
| "keywords": [ | |||||
| "uni-scss", | |||||
| "uni-ui", | |||||
| "辅助样式" | |||||
| ], | |||||
| "repository": "https://github.com/dcloudio/uni-ui", | |||||
| "engines": { | |||||
| "HBuilderX": "^3.1.0" | |||||
| }, | |||||
| "dcloudext": { | |||||
| "category": [ | |||||
| "JS SDK", | |||||
| "通用 SDK" | |||||
| ], | |||||
| "sale": { | |||||
| "regular": { | |||||
| "price": "0.00" | |||||
| }, | |||||
| "sourcecode": { | |||||
| "price": "0.00" | |||||
| } | |||||
| }, | |||||
| "contact": { | |||||
| "qq": "" | |||||
| }, | |||||
| "declaration": { | |||||
| "ads": "无", | |||||
| "data": "无", | |||||
| "permissions": "无" | |||||
| }, | |||||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | |||||
| }, | |||||
| "uni_modules": { | |||||
| "dependencies": [], | |||||
| "encrypt": [], | |||||
| "platforms": { | |||||
| "cloud": { | |||||
| "tcb": "y", | |||||
| "aliyun": "y" | |||||
| }, | |||||
| "client": { | |||||
| "App": { | |||||
| "app-vue": "y", | |||||
| "app-nvue": "u" | |||||
| }, | |||||
| "H5-mobile": { | |||||
| "Safari": "y", | |||||
| "Android Browser": "y", | |||||
| "微信浏览器(Android)": "y", | |||||
| "QQ浏览器(Android)": "y" | |||||
| }, | |||||
| "H5-pc": { | |||||
| "Chrome": "y", | |||||
| "IE": "y", | |||||
| "Edge": "y", | |||||
| "Firefox": "y", | |||||
| "Safari": "y" | |||||
| }, | |||||
| "小程序": { | |||||
| "微信": "y", | |||||
| "阿里": "y", | |||||
| "百度": "y", | |||||
| "字节跳动": "y", | |||||
| "QQ": "y" | |||||
| }, | |||||
| "快应用": { | |||||
| "华为": "n", | |||||
| "联盟": "n" | |||||
| }, | |||||
| "Vue": { | |||||
| "vue2": "y", | |||||
| "vue3": "y" | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| @ -0,0 +1,4 @@ | |||||
| `uni-sass` 是 `uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。 | |||||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass) | |||||
| #### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 | |||||
| @ -0,0 +1,7 @@ | |||||
| @import './setting/_variables.scss'; | |||||
| @import './setting/_border.scss'; | |||||
| @import './setting/_color.scss'; | |||||
| @import './setting/_space.scss'; | |||||
| @import './setting/_radius.scss'; | |||||
| @import './setting/_text.scss'; | |||||
| @import './setting/_styles.scss'; | |||||
| @ -0,0 +1,3 @@ | |||||
| .uni-border { | |||||
| border: 1px $uni-border-1 solid; | |||||
| } | |||||
| @ -0,0 +1,66 @@ | |||||
| // TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐 | |||||
| // @mixin get-styles($k,$c) { | |||||
| // @if $k == size or $k == weight{ | |||||
| // font-#{$k}:#{$c} | |||||
| // }@else{ | |||||
| // #{$k}:#{$c} | |||||
| // } | |||||
| // } | |||||
| $uni-ui-color:( | |||||
| // 主色 | |||||
| primary: $uni-primary, | |||||
| primary-disable: $uni-primary-disable, | |||||
| primary-light: $uni-primary-light, | |||||
| // 辅助色 | |||||
| success: $uni-success, | |||||
| success-disable: $uni-success-disable, | |||||
| success-light: $uni-success-light, | |||||
| warning: $uni-warning, | |||||
| warning-disable: $uni-warning-disable, | |||||
| warning-light: $uni-warning-light, | |||||
| error: $uni-error, | |||||
| error-disable: $uni-error-disable, | |||||
| error-light: $uni-error-light, | |||||
| info: $uni-info, | |||||
| info-disable: $uni-info-disable, | |||||
| info-light: $uni-info-light, | |||||
| // 中性色 | |||||
| main-color: $uni-main-color, | |||||
| base-color: $uni-base-color, | |||||
| secondary-color: $uni-secondary-color, | |||||
| extra-color: $uni-extra-color, | |||||
| // 背景色 | |||||
| bg-color: $uni-bg-color, | |||||
| // 边框颜色 | |||||
| border-1: $uni-border-1, | |||||
| border-2: $uni-border-2, | |||||
| border-3: $uni-border-3, | |||||
| border-4: $uni-border-4, | |||||
| // 黑色 | |||||
| black:$uni-black, | |||||
| // 白色 | |||||
| white:$uni-white, | |||||
| // 透明 | |||||
| transparent:$uni-transparent | |||||
| ) !default; | |||||
| @each $key, $child in $uni-ui-color { | |||||
| .uni-#{"" + $key} { | |||||
| color: $child; | |||||
| } | |||||
| .uni-#{"" + $key}-bg { | |||||
| background-color: $child; | |||||
| } | |||||
| } | |||||
| .uni-shadow-sm { | |||||
| box-shadow: $uni-shadow-sm; | |||||
| } | |||||
| .uni-shadow-base { | |||||
| box-shadow: $uni-shadow-base; | |||||
| } | |||||
| .uni-shadow-lg { | |||||
| box-shadow: $uni-shadow-lg; | |||||
| } | |||||
| .uni-mask { | |||||
| background-color:$uni-mask; | |||||
| } | |||||
| @ -0,0 +1,55 @@ | |||||
| @mixin radius($r,$d:null ,$important: false){ | |||||
| $radius-value:map-get($uni-radius, $r) if($important, !important, null); | |||||
| // Key exists within the $uni-radius variable | |||||
| @if (map-has-key($uni-radius, $r) and $d){ | |||||
| @if $d == t { | |||||
| border-top-left-radius:$radius-value; | |||||
| border-top-right-radius:$radius-value; | |||||
| }@else if $d == r { | |||||
| border-top-right-radius:$radius-value; | |||||
| border-bottom-right-radius:$radius-value; | |||||
| }@else if $d == b { | |||||
| border-bottom-left-radius:$radius-value; | |||||
| border-bottom-right-radius:$radius-value; | |||||
| }@else if $d == l { | |||||
| border-top-left-radius:$radius-value; | |||||
| border-bottom-left-radius:$radius-value; | |||||
| }@else if $d == tl { | |||||
| border-top-left-radius:$radius-value; | |||||
| }@else if $d == tr { | |||||
| border-top-right-radius:$radius-value; | |||||
| }@else if $d == br { | |||||
| border-bottom-right-radius:$radius-value; | |||||
| }@else if $d == bl { | |||||
| border-bottom-left-radius:$radius-value; | |||||
| } | |||||
| }@else{ | |||||
| border-radius:$radius-value; | |||||
| } | |||||
| } | |||||
| @each $key, $child in $uni-radius { | |||||
| @if($key){ | |||||
| .uni-radius-#{"" + $key} { | |||||
| @include radius($key) | |||||
| } | |||||
| }@else{ | |||||
| .uni-radius { | |||||
| @include radius($key) | |||||
| } | |||||
| } | |||||
| } | |||||
| @each $direction in t, r, b, l,tl, tr, br, bl { | |||||
| @each $key, $child in $uni-radius { | |||||
| @if($key){ | |||||
| .uni-radius-#{"" + $direction}-#{"" + $key} { | |||||
| @include radius($key,$direction,false) | |||||
| } | |||||
| }@else{ | |||||
| .uni-radius-#{$direction} { | |||||
| @include radius($key,$direction,false) | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| @ -0,0 +1,56 @@ | |||||
| @mixin fn($space,$direction,$size,$n) { | |||||
| @if $n { | |||||
| #{$space}-#{$direction}: #{$size*$uni-space-root}px | |||||
| } @else { | |||||
| #{$space}-#{$direction}: #{-$size*$uni-space-root}px | |||||
| } | |||||
| } | |||||
| @mixin get-styles($direction,$i,$space,$n){ | |||||
| @if $direction == t { | |||||
| @include fn($space, top,$i,$n); | |||||
| } | |||||
| @if $direction == r { | |||||
| @include fn($space, right,$i,$n); | |||||
| } | |||||
| @if $direction == b { | |||||
| @include fn($space, bottom,$i,$n); | |||||
| } | |||||
| @if $direction == l { | |||||
| @include fn($space, left,$i,$n); | |||||
| } | |||||
| @if $direction == x { | |||||
| @include fn($space, left,$i,$n); | |||||
| @include fn($space, right,$i,$n); | |||||
| } | |||||
| @if $direction == y { | |||||
| @include fn($space, top,$i,$n); | |||||
| @include fn($space, bottom,$i,$n); | |||||
| } | |||||
| @if $direction == a { | |||||
| @if $n { | |||||
| #{$space}:#{$i*$uni-space-root}px; | |||||
| } @else { | |||||
| #{$space}:#{-$i*$uni-space-root}px; | |||||
| } | |||||
| } | |||||
| } | |||||
| @each $orientation in m,p { | |||||
| $space: margin; | |||||
| @if $orientation == m { | |||||
| $space: margin; | |||||
| } @else { | |||||
| $space: padding; | |||||
| } | |||||
| @for $i from 0 through 16 { | |||||
| @each $direction in t, r, b, l, x, y, a { | |||||
| .uni-#{$orientation}#{$direction}-#{$i} { | |||||
| @include get-styles($direction,$i,$space,true); | |||||
| } | |||||
| .uni-#{$orientation}#{$direction}-n#{$i} { | |||||
| @include get-styles($direction,$i,$space,false); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||