merchant.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <view class="body">
  3. <view class="background"></view>
  4. <view class="content">
  5. <view class="userInfo">
  6. <view class="userInfo-box">
  7. <view class="userInfo-img"><image class="portrait" src="../../static/error/missing-face.png"></image></view>
  8. <view class="userInfo-xinxi">
  9. <view class="title"><text>满园春泰州店</text></view>
  10. <view class="phone"><text>19999999999</text></view>
  11. </view>
  12. <view class="balance">可用余额¥20000</view>
  13. </view>
  14. </view>
  15. <view class="userInfoList">
  16. <view class="userInfoList-top" @click="sao()">
  17. <view class="top"><image src="../../static/merchant/saoma.png" mode=""></image></view>
  18. 扫码核销
  19. </view>
  20. <view class="userInfoList-top" @click="navTo('/pages/merchant/storeQr')">
  21. <view class="top"><image src="../../static/merchant/erweima.png" mode=""></image></view>
  22. 店铺二维码
  23. </view>
  24. <view class="userInfoList-bottom" @click="navTo('/pages/merchant/finance')">
  25. <view class="bottom"><image src="../../static/merchant/money.png" mode=""></image></view>
  26. 店铺财务
  27. </view>
  28. <view class="userInfoList-bottom" @click="navTo('/pages/merchant/order')">
  29. <view class="bottom"><image src="../../static/merchant/order.png" mode=""></image></view>
  30. 订单管理
  31. </view>
  32. <view class="userInfoList-bottom" @click="navTo('/pages/merchant/commodity')">
  33. <view class="bottom"><image src="../../static/merchant/shop.png" mode=""></image></view>
  34. 商品管理
  35. </view>
  36. <view class="userInfoList-bottom">
  37. <view class="bottom"><image src="../../static/merchant/xiadan.png" mode=""></image></view>
  38. 在线下单
  39. </view>
  40. <view class="userInfoList-bottom" @click="navTo('/pages/merchant/vipDetail')">
  41. <view class="bottom"><image src="../../static/merchant/vip.png" mode=""></image></view>
  42. 店铺会员
  43. </view>
  44. <view class="userInfoList-bottom" @click="navTo('/pages/merchant/storeData')">
  45. <view class="bottom"><image src="../../static/merchant/dianpu.png" mode=""></image></view>
  46. 店铺数据
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. export default {
  54. data() {
  55. return {};
  56. },
  57. methods: {
  58. //跳转
  59. navTo(url) {
  60. uni.navigateTo({
  61. url
  62. });
  63. },
  64. //调取扫描二维码
  65. sao() {
  66. let obj = this;
  67. // #ifndef H5
  68. uni.scanCode({
  69. success(e) {
  70. obj.orderVerific(e.result);
  71. }
  72. });
  73. // #endif
  74. // #ifdef H5
  75. this.weichatObj.scanQRCode({
  76. needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  77. scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
  78. success: function(res) {
  79. obj.orderVerific(res.resultStr); // 当needResult 为 1 时,扫码返回的结果
  80. }
  81. });
  82. // #endif
  83. }
  84. }
  85. };
  86. </script>
  87. <style lang="scss">
  88. page {
  89. height: 100%;
  90. background-color: #eeeded;
  91. padding: 0;
  92. margin: 0;
  93. }
  94. .content {
  95. background-color: #eeeded;
  96. margin: 0 30rpx;
  97. display: flex;
  98. flex-direction: column;
  99. }
  100. .background {
  101. width: 100%;
  102. height: 220rpx;
  103. background-color: #75e5b6;
  104. }
  105. .userInfo {
  106. margin-top: -110rpx;
  107. display: flex;
  108. flex-direction: column;
  109. justify-content: center;
  110. background-color: #f9f9f9;
  111. border-radius: 19rpx;
  112. width: 100%;
  113. height: 300rpx;
  114. .userInfo-box {
  115. display: flex;
  116. flex-direction: column;
  117. align-items: center;
  118. .userInfo-img {
  119. margin: -65rpx 0 0 0;
  120. width: 130rpx;
  121. height: 130rpx;
  122. border: 5rpx solid #fff;
  123. border-radius: 50%;
  124. image {
  125. width: 100%;
  126. height: 100%;
  127. }
  128. }
  129. .userInfo-xinxi {
  130. .title {
  131. margin: 20rpx 0;
  132. font-size: 32rpx;
  133. font-family: PingFang SC;
  134. font-weight: bold;
  135. color: #333333;
  136. line-height: 21rpx;
  137. }
  138. .phone {
  139. font-size: 28rpx;
  140. font-family: PingFang SC;
  141. font-weight: 500;
  142. color: #666666;
  143. line-height: 21rpx;
  144. margin-bottom: 40rpx;
  145. }
  146. }
  147. .balance {
  148. text-align: center;
  149. width: 500rpx;
  150. height: 60rpx;
  151. background: #52c696;
  152. border-radius: 30rpx;
  153. font-size: 28rpx;
  154. font-family: PingFang SC;
  155. font-weight: 500;
  156. color: #ffffff;
  157. line-height: 60rpx;
  158. }
  159. }
  160. }
  161. .userInfoList {
  162. display: flex;
  163. flex-wrap: wrap;
  164. justify-content: space-between;
  165. .userInfoList-top {
  166. position: relative;
  167. margin: 15rpx 0;
  168. display: flex;
  169. justify-content: center;
  170. align-items: center;
  171. width: 340rpx;
  172. height: 100rpx;
  173. background: #ffffff;
  174. border-radius: 20rpx;
  175. font-size: 30rpx;
  176. font-family: PingFang SC;
  177. font-weight: 500;
  178. color: #4d4d4d;
  179. line-height: 21rpx;
  180. .top {
  181. position: absolute;
  182. margin-left: -230rpx;
  183. width: 50rpx;
  184. height: 50rpx;
  185. image {
  186. width: 100%;
  187. height: 100%;
  188. }
  189. }
  190. }
  191. .userInfoList-bottom {
  192. margin-bottom: 15rpx;
  193. width: 340rpx;
  194. height: 250rpx;
  195. background: #f9f9f9;
  196. border-radius: 20rpx;
  197. display: flex;
  198. flex-direction: column;
  199. justify-content: center;
  200. align-items: center;
  201. .bottom {
  202. margin-bottom: 20rpx;
  203. width: 68rpx;
  204. height: 68rpx;
  205. image {
  206. width: 100%;
  207. height: 100%;
  208. }
  209. }
  210. }
  211. }
  212. </style>