123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358 |
- <!DOCTYPE html>
- <html class="">
- <!--STATUS OK-->
- <head>
- <meta name="referrer" content="always" />
- <meta charset='utf-8' />
- <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
- <meta http-equiv="x-dns-prefetch-control" content="on">
- <meta name="description" content="">
- <meta name="format-detection" content="telephone=no" />
- <link rel="stylesheet" type="text/css" href="../css/api.css" />
- <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
- <link rel="stylesheet" type="text/css" href="css/vant-ui.css" />
- <link rel="stylesheet" type="text/css" href="css/iconfont.css">
- <link rel="stylesheet" type="text/css" href="css/main.css" />
- <script type="text/javascript" src="../script/aui-tab.js"></script>
- <script src="js/vue.js"></script>
- <script src="js/vant-ui.js"></script>
- <script src="js/main.js"></script>
- <title></title>
- </head>
- <style>
- .card-main {
- position: relative;
- top: -3.5rem;
- height: 100%
- }
- .card {
- display: flex;
- justify-content: center;
- height: 100%
- }
- .card-left {
- background-color: #EBEBEB;
- width: 1.5rem;
- border-top-left-radius: .3rem;
- }
- .type-list {
- padding: .1rem 0;
- font-size: .3rem;
- display: flex;
- justify-content: center;
- color: #333333;
- }
- .type-active {
- background-color: #fff;
- }
- .card-right {
- background-color: #fff;
- border-top-right-radius: .3rem;
- width: 5.5rem;
- }
- .shop-list {
- display: flex;
- padding: .2rem .15rem;
- }
- /*.shop-img {
- width: 1.5rem;
- height: 1.5rem;
- background-color: #000
- }*/
- .shop-list-right {
- display: flex;
- flex-direction: column;
- width: 3.4rem;
- justify-content: space-between;
- padding-left: .1rem;
- }
- .shop-title {
- display: flex;
- color: #333333;
- }
- .shop-title-p {
- font-size: .28rem;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- width: 3.4rem;
- }
- .shop-integral {
- display: flex;
- align-items: flex-end;
- }
- .shop-integral-left {
- font-size: .25rem;
- width: 1.4rem;
- color: #666666;
- }
- .shop-integral-right {
- font-size: .25rem;
- color: #333333;
- }
- .shop-add {
- display: flex;
- align-items: flex-end;
- justify-content: space-between;
- }
- .shop-add-right {
- font-size: .25rem;
- color: #fff;
- background-color: #0098E2;
- padding: .05rem .1rem;
- border-radius: .1rem;
- }
- [v-cloak] {
- display: none;
- }
- </style>
- <body>
- <div id="app" style="background-color:#F5F5F5">
- <header class="aui-bar aui-bar-nav aui-bar-info" id="aui-header">
- <div>
- <a class="aui-btn aui-btn-info aui-pull-left" tapmode onclick="closeWin()"> <span
- class="aui-iconfont aui-icon-left"></span> </a>
- <div class="aui-title" id="aui-title">
- 积分商城
- </div>
- <a class="aui-btn aui-btn-info aui-pull-right" tapmode v-on:click="inSearchPage()"> <span
- class="aui-iconfont aui-icon-search"></span> </a>
- </div>
- </header>
- <div class="banner">
- </div>
- <div class="card-main">
- <div class="card">
- <div class="card-left" style="height:90%;overflow-y:scroll;padding-bottom:1rem;" v-cloak>
- <div v-bind:class="index==activeId?'type-active':''" class="type-list"
- v-for="(item,index) in typeList" :key="index" v-on:click="getId(item,index);getshopLists(item)">
- {{item.categoryName}}
- </div>
- </div>
- <div class="card-right" style="height:90%;overflow-y:scroll;padding-bottom:1rem;" v-cloak>
- <div style="display:flex;align-items:flex-end;margin:.1rem 0 0 .1rem" v-if="this.activeId==0">
- <div style="font-weight:800;margin-left:.1rem">
- 热销
- </div>
- <div style="font-size:.25rem;color:#7C7C7C;padding-bottom:.03rem;margin-left:.1rem">
- 大家都换,才是真的好用
- </div>
- </div>
- <div v-if="shopList.length!=0">
- <div class="shop-list" v-for="(list,index) in shopList" :key="index">
- <div class="shop-img" v-on:click="inDetails(list)">
- <img v-if="list.productImage==null" src="img/nothing.png"
- style="width:1.8rem;height:1.8rem">
- <img v-else :src="list.productImage" style="width:1.8rem;height:1.8rem">
- </div>
- <div class="shop-list-right">
- <div v-on:click="inDetails(list)">
- <div class="shop-title">
- <p class="shop-title-p">{{list.productName}}</p>
- </div>
- </div>
- <div class="shop-add">
- <div class="shop-add-left">
- <div style="color:#333333;font-size:.25rem;">
- 剩余库存:{{list.productQtyStock}}
- </div>
- <div style="color:#FF0000;font-size:.25rem;margin-top:.1rem">
- {{list.productPrice}}积分
- </div>
- <!-- <van-stepper v-model="list.defaultCount" input-width=".6rem" button-size=".4rem" integer min="1" max="999" v-on:change="inputNum(list)" /> -->
- <!-- <div class="but-sub" v-on:click="subQuantity(list)">-</div>
- <input type="number" v-model="list.defaultCount" v-on:input="inputNum(list)" v-on:Blur="outBlur(list)">
- <div class="but-add" v-on:click="addQuantity(list)">+</div> -->
- </div>
- <div class="shop-add-right" v-on:click="addShopCart(list)">
- 加入购物车
- </div>
- </div>
- </div>
- </div>
- </div>
- <div v-else style="display:flex;justify-content:center;color:#ccc;padding-top:1.5rem">
- 暂无商品
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- <link rel="stylesheet" href="./mescroll/mescroll.min.css">
- <script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
- <script type="text/javascript" src="../script/api.js"></script>
- <script type="text/javascript" src="../script/httpRequest.js"></script>
- <script type="text/javascript" src="../script/vue_plugins.js"></script>
- <script type="text/javascript">
- function closeWin() {
- api.closeWin({});
- }
- apiready = function () {
- api.parseTapmode();
- var header = $api.byId('aui-header');
- $api.fixStatusBar(header);
- new Vue({
- el: '#app',
- data: {
- typeList: [],
- shopList: [],
- activeId: 0
- },
- methods: {
- init: function () {
- this.getTypes();
- this.getshopLists();
- this.storeId = $api.getStorage('userid');
- this.status = $api.getStorage('status');
- // this.verifyBusiness();
- var _this = this;
- this.addEvent("refreshindex", function () {
- _this.getshopLists();
- _this.activeId = 0
- });
- },
- verifyBusiness: function () {
- var data = {
- "storeId": this.storeId,
- "url": "json",
- "type": "body"
- },
- _this = this,
- url = "verifyBusiness";
- this.$postuser(url, data, function (ret) {
- if (ret.code == 500) {
- api.alert({
- title: '系统提示',
- msg: ret.msg,
- }, function (ret, err) {
- if (ret) {
- _this.goWin("license_win", "license_win.html", {})
- }
- });
- }
- })
- },
- getTypes: function () {
- var data = {
- "url": "json",
- "type": "body"
- },
- _this = this,
- url = "getTypes";
- this.$post(url, data, function (ret) {
- _this.typeList = ret.productCategory;
- })
- },
- getshopLists: function (item) {
- if (!item) {
- var data = {
- "url": "json",
- "type": "body",
- "mainId": 0
- },
- _this = this,
- url = "getshopLists";
- this.$post(url, data, function (ret) {
- _this.shopList = ret.product;
- })
- } else {
- var data = {
- "url": "json",
- "type": "body",
- "mainId": item.mainId
- },
- _this = this,
- url = "getshopLists";
- this.$post(url, data, function (ret) {
- _this.shopList = ret.product;
- })
- }
- },
- getId: function (item, index) {
- this.activeId = index;
- },
- addShopCart: function (list) {
- if (this.status == 3) {
- api.alert({
- title: '系统提示',
- msg: '门店已冻结,请找相关业务经理解冻!',
- }, function (ret, err) {
- });
- return;
- }
- if (list.productQtyStock == 0 || list.productQtyStock == null) {
- api.toast({
- msg: '很抱歉,当前商品暂时缺货'
- });
- return
- }
- var data = {
- "url": "json",
- "type": "body",
- "productId": list.mainId,
- "storeId": this.storeId,
- "cartQty": 1,
- "cartType": "0",
- "productIntroduction": list.productName,
- "spec": list.productSpecs,
- "productPrice": list.productPrice,
- "productImage": list.productImage
- },
- _this = this,
- url = "addShopCart";
- this.$post(url, data, function (ret) {
- if (ret.code == 0 || ret.code == '0') {
- if (!ret.message) {
- api.toast({
- msg: '成功加入购物车'
- });
- } else {
- api.toast({
- msg: ret.message
- });
- }
- }
- })
- },
- inDetails: function (list) {
- this.goWin('integral_details', 'integral_details.html', {
- productId: list.mainId
- });
- },
- inSearchPage: function () {
- this.goWin('integral_search', 'integral_search.html');
- }
- },
- mounted: function () {
- this.init();
- },
- })
- }
- </script>
- </html>
|