123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345 |
- <template>
- <view class="container">
- <view class="main-block flex box-pack-between">
- <scroll-view scroll-y class="left-bar">
- <view class="item" :class="[catIndex == -1?'active':'']" @click="onCatChange(-1)">默认</view>
- <view class="item" :class="[catIndex == index?'active':'']" v-for="(item,index) in catList" :key="index"
- @click="onCatChange(index)">{{item.name}}</view>
- </scroll-view>
- <scroll-view scroll-y class="right-bar">
- <view class="cat-name">{{catIndex == -1?'默认':catList[catIndex].name}}</view>
- <view class="goods-list">
- <view class="item flex" v-for="(item,index) in list" :key="index" @click="toDetail(index)">
-
- <view class="goods-img-block">
- <image :src="getImgPath(item.thumb)" mode="aspectFill" class="goods-img"></image>
- <view class="goods-tips" v-if="item.stock == 0">已售罄</view>
- </view>
-
- <view class="info-block">
- <view class="goods-name text-1 flex flex-y-center box-pack-between arr-r">{{item.name}}</view>
- <view class="stock">库存:{{item.stock}}</view>
- <view class="goods-btm flex flex-y-center box-pack-between">
- <view class="price">¥{{item.price}}</view>
- <view class="btn-block flex flex-y-center">
- <view class="btn" v-if="item.status == 0" @click.stop="onStatusChange(index,1)">上架</view>
- <view class="btn" v-if="item.status == 1" @click.stop="onStatusChange(index,0)">下架</view>
- <view class="btn" style="margin-left:24rpx;" @click.stop="onDel(index)">删除</view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </scroll-view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- store_id:"",
- typeActive: 1,
- catIndex: -1, //选中分类
- page:1,
- list:[],
- is_bottom:false,
- catList:[]
- }
- },
-
- onLoad(options) {
- this.store_id = options.store_id
- this.getCatList()
- },
- onShow() {
- this.getData(1)
- },
- onReachBottom() {
- if (!this.is_bottom) {
- this.getData(this.page + 1)
- }
- },
-
- methods: {
- getImgPath(path) {
- return this.$siteroot + path
- },
- onTypeChange(index) {
- if (index != this.typeActive) {
- this.typeActive = index
- this.getData(1)
- }
- },
-
- onCatChange(index) {
- if (index != this.catIndex) {
- this.catIndex = index
- this.getData(1)
- }
- },
-
- getData(page) {
- if (page == 1) {
- this.list = []
- this.page = 1
- this.is_bottom = false
- }
- let params = {
- page,
- limit: 10,
- admin_id: uni.getStorageSync("admin_id"),
- type_id: this.catIndex == -1?'':this.catList[this.catIndex].id,
- }
- if(this.typeActive == 2){
- params.status = 1
- }else if(this.typeActive == 3){
- params.status = 0
- }else{
- params.status = ""
- }
- this.request({
- url: 'Smdcshop/jfgoods_lists',
- data: params
- }).then(res => {
- if (res.code == 200 && res.data.length) {
- this.list = this.list.concat(res.data)
- this.page = page
- } else {
- this.is_bottom = true
- }
- })
- },
-
- getCatList(){
- this.request({
- url:'Smdcshop/jftype_index',
- data:{
- admin_id: uni.getStorageSync("admin_id")
- }
- }).then(res=>{
- this.catList = res.data
- })
- },
-
- onStatusChange(index,status){
- this.request({
- url:'Smdcshop/jfgoods_state',
- data:{
- id:this.list[index].id,
- is_show:status
- }
- }).then(res=>{
- this.list[index].status = status == 1 ?1:0
- })
- },
- onDel(index){
- uni.showModal({
- content:"确定删除该商品",
- success: (r) => {
- if(r.confirm){
- this.request({
- url:"Smdcshop/jfgoods_delect",
- data:{
- id:this.list[index].id
- }
- }).then(res=>{
- if(res.code == 200){
- this.getData(1)
- }
- })
- }
- }
- })
- },
- toDetail(index){
- let id=this.list[index].id;
- uni.navigateTo({
- url:`./editGoods?id=${id}`
- })
- },
- }
- }
- </script>
- <style>
- page {}
- .header {
- height: 96rpx;
- background-color: #fff;
- position: sticky;
- top: 0;
- z-index: 100;
- box-sizing: border-box;
- border-bottom: 8rpx solid #F4F5F7;
- }
- .header .item {
- width: 33.33vw;
- box-sizing: border-box;
- flex: none;
- height: 88rpx;
- position: relative;
- }
- .header .item.active .title {
- color: #247EFF;
- font-size: 32rpx;
- font-weight: 600;
- }
- .header .item.active::after {
- content: "";
- display: block;
- width: 40rpx;
- height: 4rpx;
- border-radius: 2rpx;
- background-color: #247EFF;
- position: absolute;
- bottom: 8rpx;
- left: 50%;
- transform: translateX(-50%);
- }
- .header .item .title {
- font-size: 28rpx;
- color: #666;
- }
- .main-block {
- width: 100%;
- height: calc(100vh);
- }
- .main-block .left-bar {
- width: 176rpx;
- flex: none;
- height: 100%;
- background-color: #F4F5F7;
- /*兼容 IOS<11.2*/
- padding-bottom: constant(safe-area-inset-bottom);
- /*兼容 IOS>11.2*/
- padding-bottom: env(safe-area-inset-bottom);
- }
- .main-block .item {
- padding: 30rpx 15rpx;
- font-size: 28rpx;
- color: #666;
- font-weight: 500;
- line-height: 40rpx; text-align: center;
- }
- .main-block .item.active {
- color: #247EFF;
- font-weight: 600;
- background-color: #fff;
- }
- .main-block .right-bar {
- width: 574rpx;
- flex: none;
- height: 100%;
- background-color: #fff;
- box-sizing: border-box;
- padding: 30rpx 0 30rpx 25rpx;
- position: relative;
- /*兼容 IOS<11.2*/
- padding-bottom: constant(safe-area-inset-bottom);
- /*兼容 IOS>11.2*/
- padding-bottom: env(safe-area-inset-bottom);
- }
- .main-block .right-bar .cat-name {
- font-size: 30rpx;
- font-weight: 600;
- color: #333;
- line-height: 42rpx;
- background-color: #fff;
- }
- .main-block .right-bar .item {
- padding: 40rpx 30rpx 40rpx 0;
- border-bottom: 1rpx solid #f5f5f5;
- }
- .main-block .right-bar .item .goods-img-block {
- flex: none;
- width: 120rpx;
- height: 120rpx;
- overflow: hidden;
- border-radius: 8rpx;
- position: relative;
- }
- .main-block .right-bar .item .goods-img-block .goods-img {
- display: block;
- width: 120rpx;
- height: 120rpx;
- }
- .main-block .right-bar .item .goods-img-block .goods-tips {
- background-color: rgba(0, 0, 0, 0.5);
- width: 100%;
- height: 35rpx;
- position: absolute;
- left: 0;
- bottom: 0;
- color: #fff;
- line-height: 35rpx;
- text-align: center;
- font-size: 20rpx;
- }
- .main-block .right-bar .item .info-block {
- padding-left: 24rpx;
- width: 405rpx;
- box-sizing: border-box;
- }
- .main-block .right-bar .item .info-block .goods-name {
- padding-right: 15rpx;
- font-size: 30rpx;
- font-weight: 600;
- color: #333;
- line-height: 1;
- }
- .main-block .right-bar .item .arr-r::after {
- border-color: #333 #333 transparent transparent;
- }
- .main-block .right-bar .item .info-block .stock {
- font-size: 24rpx;
- color: #999;
- line-height: 1;
- margin-top: 16rpx;
- }
- .main-block .right-bar .item .info-block .goods-btm {
- margin-top: 12rpx;
- }
- .main-block .right-bar .item .info-block .goods-btm .price {
- font-size: 30rpx;
- color: #FD3939;
- font-weight: 600;
- }
- .main-block .right-bar .item .info-block .goods-btm .btn {
- width: 100rpx;
- height: 38rpx;
- font-size: 20rpx;
- line-height: 38rpx;
- text-align: center;
- color: #666;
- border: 1rpx solid #DBDDE1;
- background-color: #F4F5F7;
- }
- </style>
|